/* ============================================================================
   styles.css — Estilos propios del Tarifario ACTIVA
   Tailwind (CDN) resuelve el layout; aquí van solo los detalles que Tailwind
   no cubre.
   Estructura del archivo:
     1. Scrollbars
     2. Animaciones de entrada
     3. Tabla (encabezado fijo y celdas)
     4. Utilidades varias
     5. Estilos de impresión
   ============================================================================ */

/* ===== 1. Scrollbars ===== */

/* Oculta la barra horizontal de la fila de categorías (se navega arrastrando). */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Scrollbar discreta y verde para los contenedores con desbordamiento. */
.scroll-suave::-webkit-scrollbar { height: 10px; width: 10px; }
.scroll-suave::-webkit-scrollbar-track { background: #f1f5f9; }
.scroll-suave::-webkit-scrollbar-thumb {
  background: #bbf7d0;
  border-radius: 9999px;
  border: 2px solid #f1f5f9;
}
.scroll-suave::-webkit-scrollbar-thumb:hover { background: #4ade80; }

/* ===== 2. Animaciones de entrada ===== */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulsoSuave {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.anim-fade   { animation: fadeIn 0.35s ease-out both; }
.anim-slide  { animation: slideUp 0.35s ease-out both; }
.anim-pulso  { animation: pulsoSuave 1.6s ease-in-out infinite; }

/* Respetamos la preferencia del sistema de reducir movimiento. */
@media (prefers-reduced-motion: reduce) {
  .anim-fade, .anim-slide, .anim-pulso {
    animation: none !important;
  }
}

/* ===== 3. Tabla ===== */

/* Encabezado fijo al hacer scroll vertical dentro del contenedor de la tabla. */
.tabla-tarifario thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f8fafc;
  box-shadow: inset 0 -1px 0 #e2e8f0;
}

/* Las características traen saltos de línea desde el Excel: los respetamos. */
.celda-multilinea {
  white-space: pre-line;
  line-height: 1.55;
}

/* Cebra muy tenue para seguir la fila con la vista en tablas largas. */
.tabla-tarifario tbody tr.fila-item:nth-child(4n + 3) {
  background-color: #fcfdfc;
}

/* ===== 4. Utilidades varias ===== */

/* Números tabulares: los precios quedan alineados columna a columna. */
.num-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Corta descripciones muy largas en un máximo de líneas (vista compacta). */
.recorte-2-lineas {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Botón "volver arriba" flotante. */
.boton-arriba {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
}

/* ===== 5. Estilos de impresión ===== */

@media print {
  .no-imprimir { display: none !important; }

  body { background: #fff; }

  .tabla-tarifario {
    font-size: 10px;
    width: 100%;
  }

  .tabla-tarifario thead th {
    position: static;
    background: #dcfce7 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Evita que una fila del tarifario se parta entre dos páginas. */
  .tabla-tarifario tr { page-break-inside: avoid; }
}