/* css/style.css */

/* iOS Safari (y algunos Android) hacen zoom automático al enfocar un campo
   cuyo font-size sea menor a 16px. Muchos inputs del proyecto usan text-sm
   (14px) o text-xs (12px), lo que dispara ese zoom en buscadores, teléfono,
   etc. En vez de corregir campo por campo (y tener que acordarse de nuevo
   cada vez que se agrega un input), se fuerza acá un piso global de 16px
   SOLO en mobile, para que este problema no vuelva a aparecer en ningún
   formulario, actual o futuro. No usa maximum-scale=1/user-scalable=no en
   el viewport a propósito: eso bloquearía también el pinch-zoom manual,
   que sí es una función de accesibilidad válida.
*/
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Un <option> hereda el "color" que le pusimos al <select> (ej.
   dark:text-white), pero el navegador dibuja el FONDO de la lista
   desplegable con la paleta del sistema operativo, no con la que definimos
   en Tailwind -- casi siempre blanco. Con texto blanco eso da una lista
   ilegible: blanco sobre blanco (visto primero en el selector de país del
   modal de "Solicitar demo" de la portada, pero el mismo problema puede
   aparecer en cualquier <select> nuevo). Se fuerza acá, una sola vez para
   toda la app/portada, en vez de acordarse de arreglar cada <select> por
   separado. Mismos colores que ya usaba .select-premium option más abajo,
   así no hay dos estilos de desplegable distintos conviviendo. */
select option {
  background-color: #ffffff;
  color: #0f1719;
}
.dark select option {
  background-color: #1a2f35;
  color: #ffffff;
}

/* Custom scrollbar for clean look */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #234248;
}

/* Custom scrollbar hide for horizontal scrolling */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Common UI adjustments */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Subtle, Premium Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes zoomInFade {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-slide-up {
  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-zoom-in {
  animation: zoomInFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered text delays for lists */
.stagger-1 {
  animation-delay: 0.05s;
  opacity: 0;
}
.stagger-2 {
  animation-delay: 0.1s;
  opacity: 0;
}
.stagger-3 {
  animation-delay: 0.15s;
  opacity: 0;
}
.stagger-4 {
  animation-delay: 0.2s;
  opacity: 0;
}
.stagger-5 {
  animation-delay: 0.25s;
  opacity: 0;
}
.stagger-6 {
  animation-delay: 0.3s;
  opacity: 0;
}
.stagger-7 {
  animation-delay: 0.35s;
  opacity: 0;
}

/* Statistics & Charts Animations */
@keyframes growWidth {
  from { width: 0; opacity: 0; }
  to { opacity: 1; }
}

@keyframes growHeight {
  from { height: 0; opacity: 0; }
  to { opacity: 1; }
}

@keyframes dashoffset {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: var(--dash-offset); }
}

.animate-grow-width {
  animation: growWidth 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-grow-height {
  animation: growHeight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-donut {
  animation: dashoffset 1s ease-out forwards;
}

/* Glassmorphism for charts */
.glass-panel {
  background: rgba(25, 47, 51, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dark .glass-panel {
  background: rgba(17, 31, 34, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.chart-gradient-teal {
  background: linear-gradient(180deg, #22d3ee 0%, #0891b2 100%);
}

.chart-gradient-blue {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}

.progress-shimmer {
  position: relative;
  overflow: hidden;
}

.progress-shimmer::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  animation: shimmer 2s infinite;
}

@keyframes entrance {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-enter {
  animation: entrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fill-1 {
  font-variation-settings: 'FILL' 1;
}

/* Page transition styles */
.page-enter {
  animation: fadeIn 0.25s ease-out forwards;
}

/* General Layout Fixes */
body {
  min-height: max(600px, 100dvh);
}

/* ── El gris del modo oscuro ───────────────────────────────────────────────
 *
 * `dark:bg-slate-800` viene de Tailwind con su #1e293b de fábrica. Acá se pisa
 * por #3f4458, que es un gris un punto más claro y menos azulado.
 *
 * Se pisa SOLO el fondo en modo oscuro, que es lo que se ve: el resto de la
 * familia slate-800 (textos, bordes) queda como está. Tocar el color en la
 * configuración de Tailwind los habría cambiado todos de una.
 *
 * La clase va repetida a propósito. Tailwind se carga desde su CDN y mete sus
 * estilos por JavaScript, así que puede quedar después de este archivo; con la
 * clase dos veces esta regla pesa más y gana igual, sin tener que recurrir a
 * un !important.
 *
 * Alcance: la app. El panel de control y la landing tienen su propio CSS.
 */
.dark\:bg-slate-800.dark\:bg-slate-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: #3f4458;
}

/* Premium Dropdown Styles */
.select-premium {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25em;
  padding-right: 3rem !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .select-premium {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322d3ee'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.select-premium:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15);
  transform: translateY(-1px);
}

.select-premium option {
  background-color: #ffffff;
  color: #0f1719;
  padding: 12px;
}

.dark .select-premium option {
  background-color: #1a2f35;
  color: #ffffff;
}

/* Drag & Drop Reorder */
.drag-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.drag-handle:active {
  cursor: grabbing;
}

.arancel-item-row {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s ease,
              opacity 0.18s ease;
}

.arancel-item-row.dragging {
  opacity: 0.85;
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgb(var(--color-primary-rgb) / 0.18), 0 2px 8px rgba(0,0,0,0.15);
  z-index: 100;
  border-radius: 12px;
  background: #192a2e;
}

.arancel-item-row.drag-over {
  border-top: 2px solid var(--color-primary);
}

/* Fade Out Animation */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.animate-fade-out {
  animation: fadeOut 0.2s ease-out forwards;
}

/* Zoom Out Animation */
@keyframes zoomOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}
.animate-zoom-out {
  animation: zoomOut 0.2s ease-out forwards;
}

/* Import dropzone */
.import-dropzone {
  border: 2px dashed #334155;
  transition: all 0.25s ease;
}
.import-dropzone:hover,
.import-dropzone.drag-active {
  border-color: var(--color-primary);
  background: rgb(var(--color-primary-rgb) / 0.05);
}
.import-dropzone.drag-active {
  transform: scale(1.01);
  box-shadow: 0 0 24px rgb(var(--color-primary-rgb) / 0.12);
}

/* Shimmer animation for loading */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════════════════
   JOB CALENDAR STYLES
   ═══════════════════════════════════════════════════════════════ */

.cal-container {
  padding: 0 0 8px;
}

/* Aviso de que el calendario está filtrado ("Mostrando 12 de 87 trabajos").
   Sin esto parecía que faltaban casos. */
.cal-filter-notice {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgb(var(--color-primary-rgb) / 0.1);
  border: 1px solid rgb(var(--color-primary-rgb) / 0.2);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ── Compact Toolbar (nav + mode in one row) ─────────────────── */
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0 8px;
}
.cal-nav-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: #64748b;
  transition: all 0.15s;
  flex-shrink: 0;
}
.cal-nav-btn:hover { background: rgb(var(--color-primary-rgb) / 0.08); color: var(--color-primary); }
.cal-nav-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  white-space: nowrap;
}
.dark .cal-nav-label { color: #fff; }
.cal-today-btn {
  font-size: 9px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(var(--color-primary-rgb) / 0.1);
  color: var(--color-primary);
  transition: all 0.15s;
  flex-shrink: 0;
  margin-right: auto;
}
.cal-today-btn:hover { background: rgb(var(--color-primary-rgb) / 0.2); }

/* ── Mode toggle (Mes/Semana inside toolbar) ─────────────────── */
.cal-mode-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: #f1f5f9;
  border-radius: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.dark .cal-mode-toggle { background: #192a2e; }
.cal-mode-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 28px;
  font-size: 11px; font-weight: 700;
  border-radius: 6px;
  color: #94a3b8;
  transition: all 0.15s;
}
.dark .cal-mode-btn { color: #64748b; }
.cal-mode-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dark .cal-mode-active {
  background: #234248;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ── View Mode Toggle (List / Calendar) ──────────────────────── */
.view-mode-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: #f1f5f9;
  border-radius: 8px;
}
.dark .view-mode-toggle { background: #192a2e; }
.view-mode-btn {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  padding: 5px 8px;
  font-size: 11px; font-weight: 700;
  border-radius: 6px;
  color: #94a3b8;
  transition: all 0.15s;
}
.dark .view-mode-btn { color: #92c0c9; }
.view-mode-btn.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dark .view-mode-btn.active {
  background: #234248;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── MONTH GRID ──────────────────────────────────────────────── */
.cal-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.cal-header-cell {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 6px 0;
}
.dark .cal-header-cell { color: #64748b; }

.cal-body-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-cell {
  position: relative;
  min-height: 56px;
  padding: 5px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.15s;
}
.dark .cal-cell {
  background: #192a2e;
  border-color: #234248;
}
.cal-cell-empty { background: transparent; border-color: transparent; }
.dark .cal-cell-empty { background: transparent; border-color: transparent; }

.cal-cell-has-jobs { cursor: pointer; }
.cal-cell-has-jobs:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 12px rgb(var(--color-primary-rgb) / 0.10);
  transform: translateY(-1px);
}
.cal-cell-today {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgb(var(--color-primary-rgb) / 0.2), inset 0 0 0 1px rgb(var(--color-primary-rgb) / 0.08);
}
.cal-cell-past {
  opacity: 0.5;
}

.cal-day-num {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  line-height: 1;
}
.dark .cal-day-num { color: #cbd5e1; }
.cal-cell-today .cal-day-num {
  background: var(--color-primary);
  color: #0D1E20;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-weight: 900;
  font-size: 10px;
}

.cal-dots-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
  padding-top: 2px;
}
.cal-dot {
  width: 7px; height: 7px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.cal-dot-overflow {
  font-size: 8px;
  font-weight: 800;
  color: #94a3b8;
  line-height: 7px;
}
.cal-day-count {
  position: absolute;
  top: 4px; right: 5px;
  font-size: 9px;
  font-weight: 900;
  color: var(--color-primary);
  background: rgb(var(--color-primary-rgb) / 0.1);
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}

/* ── WEEK GRID ───────────────────────────────────────────────── */
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
/* On mobile: show scrollable horizontal */
@media (max-width: 640px) {
  .cal-week-grid {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    scroll-behavior: smooth;
  }
  .cal-week-grid::-webkit-scrollbar { display: none; }
}

.cal-weekcol {
  display: flex; flex-direction: column;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #f1f5f9;
  min-height: 180px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.dark .cal-weekcol { background: #192a2e; border-color: #234248; }
.cal-weekcol-today { border-color: var(--color-primary) !important; }
.cal-weekcol-past { opacity: 0.6; }

.cal-weekcol-head {
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  padding: 7px 4px 6px;
  border-bottom: 1px solid #f1f5f9;
}
.dark .cal-weekcol-head { border-bottom-color: #234248; }

.cal-weekcol-dayname {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
.cal-weekcol-date {
  font-size: 16px; font-weight: 900;
  color: #1e293b;
}
.dark .cal-weekcol-date { color: #e2e8f0; }
.cal-weekcol-date-today {
  background: var(--color-primary);
  color: #0D1E20 !important;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 13px;
}
.cal-weekcol-badge {
  font-size: 9px; font-weight: 900;
  color: var(--color-primary);
  background: rgb(var(--color-primary-rgb) / 0.12);
  padding: 1px 5px;
  border-radius: 5px;
}

.cal-weekcol-body {
  flex: 1;
  padding: 6px;
  display: flex; flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  scrollbar-width: none;
}
.cal-weekcol-body::-webkit-scrollbar { display: none; }
.cal-weekcol-empty {
  display: flex; align-items: center; justify-content: center;
  flex: 1;
  color: #cbd5e1;
  font-size: 14px;
}
.dark .cal-weekcol-empty { color: #334155; }

/* ── Week Job Card ───────────────────────────────────────────── */
.cal-week-card {
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.cal-week-card:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.cal-week-card:active { transform: scale(0.98); }

.cal-week-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.cal-week-card-id {
  font-size: 9px; font-weight: 900;
  color: #64748b;
}
.dark .cal-week-card-id { color: #94a3b8; }
.cal-week-card-status {
  font-size: 8px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cal-week-card-patient {
  font-size: 11px; font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.dark .cal-week-card-patient { color: #f1f5f9; }
.cal-week-card-meta {
  font-size: 9px; font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* ── Legend ───────────────────────────────────────────────────── */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 10px;
}
.dark .cal-legend { background: #192a2e; }
.cal-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600;
  color: #64748b;
}
.dark .cal-legend-item { color: #94a3b8; }
.cal-legend-dot {
  width: 8px; height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Pruebas con fecha en el calendario ───────────────────────────
   Entrega = cuadradito del color del estado (como siempre). Prueba = rombo violeta (tarjeta de borde punteado en la semana).
   Realizada o cancelada: atenuada; cancelada, además, hueca / tachada. */
.cal-dot-prueba {
  background: #8b5cf6;
  border: 1px solid #6d28d9;
  border-radius: 1px;
  transform: rotate(45deg);
  box-sizing: border-box;
}
.cal-legend-dot.cal-dot-prueba { width: 7px; height: 7px; margin: 0 1px; }
.cal-dot-prueba-realizada { opacity: 0.45; }
.cal-dot-prueba-cancelada { opacity: 0.5; background: transparent; }

.cal-week-card-prueba {
  border-left: 3px dashed #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
}
.cal-week-card-prueba-tag { color: #7c3aed; }
.cal-week-card-prueba-etiqueta {
  display: block;
  font-size: 9px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.03em;
  line-height: 1.25;
  margin-bottom: 1px;
}
.dark .cal-week-card-prueba-tag { color: #c4b5fd; }
.cal-week-card-prueba-realizada { opacity: 0.55; }
.cal-week-card-prueba-cancelada { opacity: 0.5; }
.cal-week-card-prueba-cancelada .cal-week-card-patient,
.cal-week-card-prueba-cancelada .cal-week-card-meta,
.cal-week-card-prueba-cancelada .cal-week-card-prueba-tag { text-decoration: line-through; }
/* Violeta de las pruebas, FIJO: el diseño nuevo convierte las clases violet-* de Tailwind en el celeste de marca (index.html, --lp-acc), y las pruebas
   tienen que seguir distinguiéndose de las entregas en los dos diseños. */
.pr-violeta { color: #7c3aed; }
.dark .pr-violeta { color: #c4b5fd; }
.pr-violeta-fondo { background-color: rgba(139, 92, 246, 0.12); }
.pr-violeta-barra { background-color: #8b5cf6; }
.pr-violeta-borde { border-color: rgba(139, 92, 246, 0.35); }

.cal-week-card-entrega-tag {
  display: inline-block;
  font-size: 8px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #64748b;
}
.dark .cal-week-card-entrega-tag { color: #94a3b8; }

/* ==========================================================================
   LANDING PAGE STYLES (FROM D:\PROYECTOS\LabProUy\web\styles.css)
   ========================================================================== */

/* -------- GLASSMORPHISM MAX PRO -------- */
.glass-nav {
  background: rgba(16, 31, 34, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(19, 200, 236, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-nav.scrolled {
  background: rgba(10, 20, 22, 0.92);
  border-bottom: 1px solid rgba(19, 200, 236, 0.25);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.7), 
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.glass-card {
  background: rgba(20, 37, 41, 0.45);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(19, 200, 236, 0.12);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), 
              inset 0 1px 1px rgba(255, 255, 255, 0.08), 
              inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(19, 200, 236, 0.35);
  box-shadow: 0 12px 40px rgba(19, 200, 236, 0.08), 
              inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

/* --- SUBTLE LIFT AND NEON GLOW FOR CARDS --- */
.hover-lift-glow {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hover-lift-glow:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: 0 20px 40px -10px rgba(19, 200, 236, 0.15) !important;
  border-color: rgba(19, 200, 236, 0.35) !important;
}

/* -------- GLOWS & ACCENTS MAX PRO -------- */
.glow-cyan {
  box-shadow: 0 0 20px rgba(19, 200, 236, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glow-cyan:hover {
  box-shadow: 0 0 35px rgba(19, 200, 236, 0.65), 
              0 0 10px rgba(19, 200, 236, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.text-glow {
  text-shadow: 0 0 16px rgba(19, 200, 236, 0.6), 
               0 0 30px rgba(19, 200, 236, 0.25);
}

.text-glow-orange {
  text-shadow: 0 0 16px rgba(245, 158, 11, 0.6), 
               0 0 30px rgba(245, 158, 11, 0.25);
}

/* -------- BACKGROUNDS & SHIELDING -------- */
.hero-gradient {
  background: radial-gradient(circle at 50% 25%, rgba(19, 200, 236, 0.16) 0%, rgba(16, 31, 34, 0) 55%),
              radial-gradient(circle at 15% 50%, rgba(19, 200, 236, 0.05) 0%, transparent 40%),
              radial-gradient(circle at 85% 65%, rgba(245, 158, 11, 0.04) 0%, transparent 45%);
}

/* -------- HYPER-MODERN INPUT STATES -------- */
.glass-input {
  background: rgba(16, 31, 34, 0.6) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.glass-input:focus {
  border-color: #13c8ec !important;
  background: rgba(16, 31, 34, 0.8) !important;
  box-shadow: 0 0 20px rgba(19, 200, 236, 0.25), 
              inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* -------- FLOATING MICRO-ANIMATIONS -------- */
.float-anim {
  animation: float 6s ease-in-out infinite;
}

.float-anim-delayed {
  animation: float 6s ease-in-out infinite;
  animation-delay: -3s;
}

.float-anim-slow {
  animation: float 8s ease-in-out infinite;
}

.float-anim-slow-delayed {
  animation: float 8s ease-in-out infinite;
  animation-delay: -4s;
}

/* -------- SCROLL REVEAL -------- */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.from-left {
  transform: translateX(-40px);
}

.reveal.from-right {
  transform: translateX(40px);
}

.reveal.from-scale {
  transform: scale(0.94);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.45s; }

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(1deg);
  }
}

/* --- TESTIMONIAL CAROUSEL --- */
.testimonial-carousel {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.55s;
  pointer-events: none;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(16, 31, 34, 0.7);
  border: 1px solid rgba(19, 200, 236, 0.3);
  color: #13C8EC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(8px);
}

.carousel-arrow:hover {
  background: rgba(19, 200, 236, 0.15);
  border-color: #13C8EC;
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev { left: -10px; }
.carousel-next { right: -10px; }

@media (max-width: 768px) {
  .carousel-prev { left: 0; }
  .carousel-next { right: 0; }
  .carousel-arrow { width: 38px; height: 38px; }
}

.carousel-dot.active {
  background-color: #13C8EC;
  opacity: 1;
  transform: scale(1.3);
  box-shadow: 0 0 8px #13C8EC;
}

/* --- FRONTEND MAX PRO ANIMATIONS & GLOWS --- */
@keyframes glow-breathing {
  0%, 100% {
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.15), 0 0 15px rgba(245, 158, 11, 0.05);
    filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.1));
  }
  50% {
    text-shadow: 0 0 25px rgba(245, 158, 11, 0.65), 0 0 40px rgba(245, 158, 11, 0.35);
    filter: drop-shadow(0 0 30px rgba(245, 158, 11, 0.3));
  }
}

.animate-glow-breathing {
  animation: glow-breathing 4s ease-in-out infinite;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.9;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(245, 158, 11, 0.5));
  }
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

/* --- GRADIENT SHIMMER BORDER EFFECT --- */
.premium-coupon-card {
  position: relative;
}

.premium-coupon-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(245,158,11,0.4), rgba(245,158,11,0), rgba(19,200,236,0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.premium-coupon-card:hover::before {
  background: linear-gradient(135deg, rgba(245,158,11,0.9), rgba(245,158,11,0.2), rgba(19,200,236,0.8));
}

/* --- METALLIC GLOWING CARD FOR POPULAR PLANS --- */
.metallic-card {
  position: relative;
  z-index: 10;
}

.metallic-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  padding: 2.5px;
  background: linear-gradient(90deg, #13c8ec, #f59e0b, #10b981, #13c8ec);
  background-size: 300% 300%;
  animation: border-flow-glow 8s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

.metallic-card:hover::before {
  animation-duration: 4s;
  opacity: 1;
}

@keyframes border-flow-glow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* --- PULSING GLOW BACKGROUNDS --- */
.accent-glow-bg {
  position: relative;
}
.accent-glow-bg::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(19, 200, 236, 0.25) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
  animation: breathing-glow 4s ease-in-out infinite;
}

@keyframes breathing-glow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }
}

/* Prevenir scroll horizontal y rotaciones en mobile */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ── Red de seguridad contra el scroll horizontal ──────────────────────────
 *
 * Lo de arriba tapa el desborde de la PÁGINA, pero no alcanza: el contenido
 * de la app vive dentro de un <main> que scrollea vertical, y un contenedor
 * que scrollea en un eje pasa a scrollear también en el otro apenas algo se
 * le sale. Por eso en el celular aparecía una barra horizontal adentro del
 * contenido aunque la página estuviera bloqueada.
 *
 * `clip` corta lo que se sale sin habilitar el arrastre lateral. Se puede
 * combinar con overflow-y: auto, que es justo lo que hace falta acá.
 *
 * Es una red, no una excusa: lo que se sale hay que arreglarlo igual, porque
 * cortado tampoco se lee. Los carruseles que SÍ se arrastran de costado
 * (los filtros, las tarjetas del inicio) llevan su propio overflow-x-auto en
 * un div de adentro y no los toca esta regla.
 *
 * Va solo en los <main> que YA scrollean vertical, que son justamente los que
 * generaban la barra. En los que no scrollean, la página entera es la que se
 * mueve y de eso ya se ocupa el overflow-x: hidden de arriba; ponérselo igual
 * los convertiría en contenedores de scroll sin necesidad.
 */
main.overflow-y-auto {
  overflow-x: clip;
}

/* Franja "Estás viendo datos de ejemplo" (tutorial-v2/ui/demoDataBanner.js).
 * Es `fixed top-0` con z-[15000] -- por encima de todo -- así que sin esto
 * tapa la parte de arriba de cada vista: el header `sticky top-0` y, en
 * Inicio, el menú lateral (`#side-menu`, también `fixed top-0`).
 *
 * demoDataBanner.js mide su alto real (cambia según si el texto entra en una
 * línea o dos) y lo deja en --tv2-banner-demo-h + la clase de abajo en
 * <body>. Selector por atributo de clase, no una clase nueva por vista: cada
 * una repite su propio header con Tailwind (21 archivos), así que tocarlos
 * uno por uno para esto no valía la pena -- mismo criterio que la regla de
 * `overflow-x: clip` de arriba.
 */
:root {
  --tv2-banner-demo-h: 0px;
}
body.tv2-tiene-banner-demo #app-root {
  padding-top: var(--tv2-banner-demo-h);
}
body.tv2-tiene-banner-demo #app-root [class~="sticky"][class~="top-0"]:not(#cv3-panel *):not(#notifications-dropdown *) {
  top: var(--tv2-banner-demo-h);
}
/* Excepción: el encabezado fijo de adentro del panel de la campana ("Notificaciones", pestañas) NO es el encabezado de la pantalla.
   Con la franja puesta, esta regla lo corría hacia abajo dentro del panel: quedaba un hueco vacío arriba y el encabezado tapaba la
   mitad de la primera notificación. El panel tiene su propia barra de desplazamiento: su encabezado va pegado arriba (top-0). */
body.tv2-tiene-banner-demo #side-menu {
  top: var(--tv2-banner-demo-h);
}


/* -------- PORTADA: franja "Disponible en X países" --------
   Decorativa: no se hace clic, no tapa nada. Se mueve despacio y sigue; se
   frena al pasar el mouse; con "reducir movimiento" no se mueve y las banderas
   se acomodan en filas. */
.paises-franja { overflow: hidden; }
.paises-franja-pista {
  display: flex;
  width: max-content;
  animation: paises-franja-scroll 60s linear infinite;
}
.paises-franja:hover .paises-franja-pista { animation-play-state: paused; }
.paises-franja-mascara {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
@keyframes paises-franja-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .paises-franja-pista {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.5rem;
  }
  .paises-franja-copia { display: none; }
  .paises-franja-mascara { -webkit-mask-image: none; mask-image: none; }
}

/* ── Ventanas emergentes largas: nunca más altas que la pantalla visible ─────────────────────────────
   Las ventanas son una capa "fixed inset-0" con la tarjeta adentro (overflow-hidden, sin alto máximo): si el contenido era más alto que
   el celular, se cortaba y no había forma de bajar. dvh descuenta la barra de Safari/Chrome; 2rem = el relleno p-4 de la capa.
   Moli (#aiv2-*), el menú, el cartel de versión y la campana (que ya se desplaza por adentro) quedan afuera. */
[class~="fixed"][class~="inset-0"]:not([id^="aiv2"]):not(#menu-overlay):not(#app-preloader):not(#cv3-modal):not([data-version-check]):not(.help-popover-backdrop) > div:is([class*="bg-white"], [class*="bg-surface"], [class*="bg-[#"])[class*="rounded-"] {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Moli: el personaje flotante se esconde de verdad durante una llamada. Su clase `flex` le ganaba al atributo `hidden`, y se veía duplicado
   (el del rincón y el de la llamada). */
#aiv2-fab[hidden] { display: none !important; }

/* Título corto de una pantalla (solo celular, diseño nuevo): fuera de ahí no se ve. */
.lp-tit-corto { display: none; }