/*
 * liquid.css — Skin «Liquid Glass» de Tarsis One (v1).
 *
 * Emula el material Liquid Glass de Apple (WWDC25) con la pila estándar web:
 * backdrop-filter (blur + saturación) + brillo especular en el canto + sombra
 * flotante + cápsulas y radios concéntricos + movimiento elástico. Principios y
 * mapeo completos en docs/DISENO-LIQUID-GLASS.md.
 *
 * Regla de capas (Apple): el VIDRIO es la capa de control que flota sobre el
 * contenido (barra, botones, chips, popovers, modales); el contenido vive en
 * paneles serenos de alta opacidad. El vidrio no muestrea vidrio.
 *
 * Se carga DESPUÉS de estilos.css y tarsis.css: gana la cascada con los mismos
 * selectores. Los 3 temas (verde / claro neutro / oscuro) funcionan vía tokens.
 */

/* ============================== Tokens del vidrio ============================== */
:root {
  --lg-blur: 18px;
  --lg-sat: 1.75;
  /* vidrio de CONTROL (barra, botones, chips, popovers) */
  --lg-vidrio: rgba(255, 255, 255, 0.52);
  --lg-vidrio-denso: rgba(255, 255, 255, 0.66);
  /* panel de CONTENIDO (tarjetas con texto: casi opaco, legible) */
  --lg-panel: rgba(255, 255, 255, 0.78);
  --lg-panel-solido: rgba(255, 255, 255, 0.92);
  /* canto especular (SOLO superficies grandes: en controles pequeños se lee como 3D) */
  --lg-rim: rgba(255, 255, 255, 0.50);
  --lg-rim-suave: rgba(255, 255, 255, 0.22);
  --lg-borde: rgba(120, 130, 120, 0.22);
  /* sombras de flotado (difusas y suaves: la profundidad nunca es un bisel) */
  --lg-sombra: 0 1px 1px rgba(20, 30, 20, 0.04), 0 8px 24px rgba(20, 30, 20, 0.10);
  --lg-sombra-alta: 0 2px 6px rgba(20, 30, 20, 0.08), 0 18px 50px rgba(20, 30, 20, 0.18);
  --lg-sombra-control: 0 1px 3px rgba(20, 30, 20, 0.05), 0 3px 10px rgba(20, 30, 20, 0.06);
  /* radios concéntricos */
  --lg-r-xl: 26px;
  --lg-r-l: 20px;
  --lg-r-m: 14px;
  --lg-r-s: 10px;
  /* movimiento elástico */
  --lg-mov: 300ms cubic-bezier(0.34, 1.4, 0.64, 1);
  --lg-mov-rapido: 160ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
html[data-modo="incognito-oscuro"] {
  --lg-vidrio: rgba(28, 32, 38, 0.52);
  --lg-vidrio-denso: rgba(30, 34, 40, 0.68);
  --lg-panel: rgba(32, 36, 42, 0.78);
  --lg-panel-solido: rgba(34, 38, 44, 0.94);
  --lg-rim: rgba(255, 255, 255, 0.10);
  --lg-rim-suave: rgba(255, 255, 255, 0.05);
  --lg-borde: rgba(255, 255, 255, 0.10);
  --lg-sombra: 0 1px 1px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.45);
  --lg-sombra-alta: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 50px rgba(0, 0, 0, 0.6);
  --lg-sombra-control: 0 1px 3px rgba(0, 0, 0, 0.28), 0 3px 10px rgba(0, 0, 0, 0.32);
}

/* ============================== Base y tipografía ============================== */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3 { letter-spacing: -0.015em; }
/* Fondo UNIFORME (directriz de Jacobo, 07/08/2026): sin luces ambientales — dibujaban
   una banda degradada arriba que además desaparecía al hacer scroll (composición de
   Chromium con capas de backdrop-filter). Un solo color plano por tema. */
body { background: var(--fondo); min-height: 100vh; }

/* Barra de desplazamiento discreta (Chromium/WebKit). */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--lg-borde); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--texto-suave); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================== Recetas del material ============================== */
/* Vidrio de control (flota sobre el contenido). */
.barra-superior,
.dos-minipop,
.toast,
.tar-plan,
.tar-cupo,
.dos-toggle,
.dos-circ,
.btn-nav,
.boton-secundario,
.boton-mini,
.boton-acento,
.dos-rango,
.dos-tab,
.dos-imp-mover,
.tar-frag-cta,
.dos-kw-mas {
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  background: var(--lg-vidrio);
  border: 1px solid var(--lg-borde);
  /* PLANO: nada de brillos internos (relieve 3D). Profundidad = material + sombra difusa. */
  box-shadow: var(--lg-sombra-control);
}
/* El filo de luz del canto SOLO en superficies grandes (ahí se lee como borde de
   cristal; en un botón se leería como bisel). */
.barra-superior { box-shadow: inset 0 1px 0 var(--lg-rim), var(--lg-sombra); }
/* Panel de contenido (texto legible: alta opacidad, blur suave). */
.dos-busqueda-card,
.dos-resumen,
.dos-campo,
.dos-impacto,
.dos-enmarcha,
.dos-medios-sel,
.tar-upsell-precio,
.dos-prensa-papel .dos-prensa-tile {
  backdrop-filter: blur(10px) saturate(1.35);
  -webkit-backdrop-filter: blur(10px) saturate(1.35);
  background: var(--lg-panel);
  border: 1px solid var(--lg-borde);
  box-shadow: var(--lg-sombra);
}
/* ── REDES SOCIALES (07/09/2026) ────────────────────────────────────────────────────────────────
   Jacobo: «en general todo el diseño de la herramienta no tiene el liquid glass que sí tiene
   radar». Era verdad, y no por olvido de la piel: esta herramienta nació después y sus clases
   (`rrss-tarjeta`, `rrss-barra`, `rrss-red`) no estaban en ninguna de las listas de arriba, así
   que se quedaban con el fondo plano de `estilos.css` mientras el resto del sitio llevaba cristal.

   El BORDE no se toca aquí: cada tarjeta lleva el de SU red (`--red-col`), que es lo que permite
   distinguirlas de un vistazo. Lo que se añade es el desenfoque de lo que hay detrás, el brillo
   del canto y la sombra que la despega del fondo. */
.rrss-tarjeta,
.rrss-barra input,
.rrss-red,
.rrss-t-desde,
.rrss-kpi,
.rrss-periodo-pastilla,
.rrss-periodo-menu,
.rrss-tooltip,
.rrss-lienzo {
  backdrop-filter: blur(10px) saturate(1.35);
  -webkit-backdrop-filter: blur(10px) saturate(1.35);
  background: var(--lg-panel);
}
.rrss-tarjeta,
.rrss-kpi { box-shadow: inset 0 1px 0 var(--lg-rim), var(--lg-sombra); }
.rrss-tarjeta:hover { box-shadow: inset 0 1px 0 var(--lg-rim), var(--lg-sombra-alta); }
/* La red elegida es un color plano a propósito: el cristal encima de su color de marca lo apaga
   justo cuando lo que hace falta es que se vea cuál está puesta. */
.rrss-red.activo { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--red-col); }

/* Vidrio denso (modales y popovers grandes). */
.modal,
.rrss-popup-caja {
  backdrop-filter: blur(28px) saturate(1.9);
  -webkit-backdrop-filter: blur(28px) saturate(1.9);
  background: var(--lg-vidrio-denso);
  border: 1px solid var(--lg-borde);
  box-shadow: inset 0 1px 0 var(--lg-rim), var(--lg-sombra-alta);
}

/* ============================== Cabecera flotante ============================== */
.barra-superior {
  position: sticky;
  top: 10px;
  z-index: 60;
  width: min(calc(100% - 24px), calc(var(--max) + 48px));
  margin: 10px auto 4px;
  border-radius: var(--lg-r-xl);
  border-bottom: 1px solid var(--lg-borde); /* fuera el filete verde de 2px */
}
.barra-interior { padding: 8px 16px; gap: 12px; }
/* Navegación: cápsulas; la activa = píldora elevada. */
.btn-nav { border-radius: 999px; width: 34px; height: 34px; color: var(--texto); }
.tar-cabecera-der { gap: 10px; }

/* ============================== Botones (cápsulas) ============================== */
.boton-primario,
.boton-secundario,
.boton-mini,
.boton-acento {
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--lg-mov), box-shadow var(--lg-mov), background var(--lg-mov-rapido), filter var(--lg-mov-rapido);
}
.boton-primario {
  /* CTA = vidrio TINTADO estilo glassProminent: color PLANO y uniforme, sin degradados
     ni biseles; la profundidad la da una sombra difusa del propio tinte. */
  background: color-mix(in srgb, var(--verde-solido) 94%, transparent);
  border: none;
  color: #fff;
  padding: 9px 18px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--verde-solido) 22%, transparent);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.boton-primario:hover { filter: brightness(1.07); }
.boton-secundario, .boton-acento { color: var(--texto); padding: 8px 16px; }
.boton-secundario:hover, .boton-acento:hover { background: var(--lg-vidrio-denso); }
.boton-mini { padding: 4px 12px; font-size: .78125rem; color: var(--texto); }
/*
 * EL TAMAÑO NO CAMBIA EL COLOR (08/09/2026). `.boton-mini` es un modificador de TAMAÑO, pero
 * traía `color: var(--texto)` — y como va DESPUÉS de `.boton-primario` con la misma
 * especificidad, le ganaba: los ocho botones que llevan las dos clases salían con letra oscura
 * sobre el verde. Se veía en el aviso de la extensión del panel, que es donde lo cazó Jacobo.
 * Se arregla con el selector combinado en vez de quitarle el color a `.boton-mini`, porque un
 * mini SUELTO sí tiene que ir en color de texto.
 */
.boton-primario.boton-mini { color: #fff; }
.boton-primario:active, .boton-secundario:active, .boton-mini:active, .boton-acento:active,
.dos-rango:active, .dos-tab:active, .tar-plan:active { transform: scale(0.96); }

/* Chips de selección (rangos, categorías, pestañas): cápsulas; activo = tintado. */
.dos-rango { border-radius: 999px; transition: transform var(--lg-mov), background var(--lg-mov-rapido), border-color var(--lg-mov-rapido), color var(--lg-mov-rapido); }
.dos-rango.activo, .dos-rango.activa {
  background: color-mix(in srgb, var(--verde-solido) 94%, transparent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--verde-solido) 22%, transparent);
}
.dos-tab { border-radius: 999px; }
.dos-tab.activo {
  background: rgba(14, 126, 143, 0.94);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(14, 126, 143, 0.26);
}
.dos-conj-tabs { border-bottom: none; }

/* ============================== Tablón e impactos ============================== */
.dos-slot { border: 1.5px dashed var(--lg-borde); border-radius: var(--lg-r-xl); background: rgba(255, 255, 255, 0.06); }
html[data-modo="incognito-oscuro"] .dos-slot { background: rgba(255, 255, 255, 0.02); }
.dos-busqueda-card {
  border-radius: var(--lg-r-l); /* concéntrico: 26 (slot) − padding */
  transition: transform var(--lg-mov), box-shadow var(--lg-mov);
}
.dos-busqueda-card:hover { transform: translateY(-2px) scale(1.012); box-shadow: var(--lg-sombra-alta); }
/* Las «hojas» del taco, translúcidas para vivir sobre vidrio. */
.dos-busqueda-card::before, .dos-busqueda-card::after { background: var(--lg-vidrio); border-color: var(--lg-borde); }
.dos-resumen { border-radius: var(--lg-r-l); }
.dos-stat { border-left: 1px solid var(--lg-borde); }
.dos-impacto { border-radius: var(--lg-r-l); transition: transform var(--lg-mov), box-shadow var(--lg-mov), background var(--lg-mov-rapido); }
.dos-impacto:hover { background: var(--lg-panel-solido); transform: translateY(-1px); box-shadow: var(--lg-sombra-alta); }
.dos-imp-mover { border-radius: 999px; color: var(--texto-suave); }
.dos-seccion-tit .dos-bucket-n { border-radius: 999px; }
.dos-toggle { border-radius: 999px; }
.dos-grupo-tit { border-bottom: 1px solid var(--lg-borde); }
/* v334: la barra de enlaces a mano es un campo de vidrio a todo el ancho (ver estilos.css). */
.dos-manual-barra { border: 1px solid var(--lg-borde); border-radius: var(--lg-r-l); background: var(--lg-panel-solido); }
.dos-manual-barra:focus-within {
  border-color: color-mix(in srgb, var(--verde) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 18%, transparent);
}
.dos-burbujas-sep { background: var(--lg-borde); }
.dos-imp-pie { border-top: 1px solid var(--lg-borde); }
.dos-card-acc { border-top: 1px solid var(--lg-borde); }

/* ============================== Formulario ============================== */
.dos-campo { border-radius: var(--lg-r-l); }
.dos-chips-input,
.dos-fechas input,
.dos-medio-fila input,
.dos-medio-fila select,
.dos-minipop-fila select {
  border-radius: var(--lg-r-m);
  background: var(--lg-panel-solido);
  border: 1px solid var(--lg-borde);
}
.dos-chips-input:focus-within, .dos-fechas input:focus, .dos-campo input[type="search"]:focus {
  border-color: color-mix(in srgb, var(--verde) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 18%, transparent);
}

/* ============================== Modales, popovers, toast ============================== */
.modal-fondo { background: rgba(15, 20, 15, 0.30); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
html[data-modo="incognito-oscuro"] .modal-fondo { background: rgba(0, 0, 0, 0.45); }
.modal { border-radius: var(--lg-r-xl); }
.dos-minipop { border-radius: var(--lg-r-m); }
.toast { border-radius: 999px; color: var(--texto); font-weight: 600; }

/* Popup de progreso: pista serena + relleno tintado con brillo. */
.pa-prog-barra { background: color-mix(in srgb, var(--texto-suave) 14%, transparent); border-radius: 999px; height: 10px; }
.pa-prog-relleno { background: var(--verde-solido); }
.pa-prog-cifras > div { border-radius: var(--lg-r-m); background: var(--lg-vidrio); border: 1px solid var(--lg-borde); }

/* ============================== Piezas Tarsis ============================== */
.tar-plan-bronce { background: rgba(165, 112, 44, 0.95); border-color: transparent; box-shadow: 0 2px 8px rgba(165, 112, 44, 0.28); }
.tar-cupo { color: var(--verde-texto-2); }
.tar-upsell-precio { border-radius: var(--lg-r-m); }
.tar-bloqueo, .tar-bloqueo-inline { border: 1.5px dashed var(--lg-borde); border-radius: var(--lg-r-l); background: rgba(255, 255, 255, 0.05); }
html[data-modo="incognito-oscuro"] .tar-bloqueo, html[data-modo="incognito-oscuro"] .tar-bloqueo-inline { background: rgba(255, 255, 255, 0.02); }

/* Portadas y papel: láminas con sombra flotante suave. */
.dos-portada img, .dos-prensa-pag { border-radius: 6px; border: 1px solid var(--lg-borde); box-shadow: var(--lg-sombra); }

/* ============================== Lente (refracción real) ============================== */
/* v2: la aplica js/lente.js POR ELEMENTO (estilo inline) — genera un mapa de
   desplazamiento a la medida exacta de cada superficie (SDF del rectángulo redondeado,
   bisel con perfil squircle + Snell, interior neutro) y lo regenera al redimensionar.
   Solo Chromium (clase lg-lente); interruptor ?lente=0 / ?lente=1; superficies héroe
   (cabecera y modales). Aquí no hay reglas: el CSS de vidrio v1 de arriba ES el
   fallback cuando la lente no está. */

/* ============================== Accesibilidad y fallbacks ============================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --lg-vidrio: rgba(255, 255, 255, 0.94);
    --lg-vidrio-denso: rgba(255, 255, 255, 0.97);
    --lg-panel: rgba(255, 255, 255, 0.97);
  }
  html[data-modo="incognito-oscuro"] {
    --lg-vidrio: rgba(30, 34, 40, 0.96);
    --lg-vidrio-denso: rgba(30, 34, 40, 0.98);
    --lg-panel: rgba(32, 36, 42, 0.97);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --lg-vidrio: var(--lg-panel-solido); --lg-vidrio-denso: var(--lg-panel-solido); --lg-panel: var(--lg-panel-solido); --lg-blur: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .boton-primario, .boton-secundario, .boton-mini, .boton-acento, .dos-rango, .dos-tab,
  .dos-busqueda-card, .dos-impacto, .nav-medios a, .tar-frag-cta, .tar-plan { transition: none; }
  .dos-busqueda-card:hover, .dos-impacto:hover { transform: none; }
}