/* ══════════════════════════════════════════════════════════════════════════
   Vidrio líquido. Se enciende con la clase `liquido` que app.html trae fija en
   <html> (sin interruptor desde 2026-09-14; en el laboratorio era una prueba que
   se apagaba desde el menú de la cuenta). Todo aquí cuelga de :root.liquido:
   quitar esa clase deja el panel sin vidrio, y el :root le sube la
   especificidad para ganarle a los !important de panel.css sin repetirlos.

   Dónde va el vidrio y por qué se aparta del prompt original:
   · Desenfoque de verdad solo en lo que FLOTA: la barra de abajo, los botones
     de la de arriba, el buscador, las ventanas y la hoja de resultados. Las
     tarjetas llevan el mismo material SIN desenfoque (ver su bloque).
   · El tinte NO es rgba(0,0,0,.25) / rgba(255,255,255,.15). Medido contra el
     peor fondo (blanco puro detrás en oscuro, negro en claro), el texto queda
     en 1.7:1 y 1.2:1. Con 72 % llega a 6.4:1 y 9.1:1, y lo secundario a 4.7:1
     y 4.9:1: pasa el 4.5:1 que pide el mismo prompt.
   · Sombra de 10 % de negro no se ve sobre fondo casi negro: en oscuro va más.
   · Un borde blanco sobre vidrio blanco no se ve: en claro se suma un pelo
     oscuro por fuera.
   · En el iPhone el desenfoque NO se anima ni vive en algo que se transforma
     (capas congeladas o en blanco, ya nos pasó). Ver el bloque de ventanas.
   · Nada de vidrio sobre vidrio: con una ventana abierta, la cortina solo
     oscurece.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El material ─────────────────────────────────────────────────────────── */
:root.liquido {
  --lq-tinte: rgba(26, 26, 32, .72);
  --lq-denso: rgba(26, 26, 32, .96);    /* sin transparencia */
  --lq-blur: 20px;
  --lq-sat: 120%;
  --lq-borde: rgba(255, 255, 255, .16);
  --lq-brillo: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 6px rgba(255, 255, 255, .06);
  --lq-sombra: 0 8px 32px rgba(0, 0, 0, .40);
  --lq-pastilla: rgba(255, 255, 255, .10);   /* la pestaña activa, dentro del vidrio */
  --lq-tarjeta: rgba(255, 255, 255, .055);
  --lq-tarjeta-sombra: 0 8px 24px rgba(0, 0, 0, .28);
  /* Lo que queda detrás de una ventana. Con 30 % las tarjetas del fondo se
     seguían leyendo casi igual que la ventana y no quedaba claro cuál era la
     principal. Sobre fondo casi negro hace falta más de la mitad para que se
     note que el fondo se apagó. */
  --lq-cortina: rgba(0, 0, 0, .58);
  --lq-curva: cubic-bezier(.25, 1, .5, 1);
  --lq-resorte: var(--ease-spring);
}
:root.liquido[data-theme="light"] {
  --lq-tinte: rgba(255, 255, 255, .72);
  --lq-denso: rgba(255, 255, 255, .96);
  --lq-borde: rgba(255, 255, 255, .75);
  --lq-brillo: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 6px rgba(255, 255, 255, .30), 0 0 0 .5px rgba(24, 22, 19, .10);
  --lq-sombra: 0 8px 32px rgba(24, 22, 19, .12);
  --lq-pastilla: rgba(24, 22, 19, .07);
  --lq-tarjeta: rgba(255, 255, 255, .70);
  --lq-tarjeta-sombra: 0 6px 22px rgba(24, 22, 19, .08);
  --lq-cortina: rgba(24, 22, 19, .38);
}
/* Resorte de verdad donde el navegador entiende linear(); si no, el rebote
   sutil de siempre. */
@supports (transition-timing-function: linear(0, 1)) {
  :root.liquido {
    --lq-resorte: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077 20.4%,
      1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%,
      .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  }
}
/* Sin transparencia: quien la pide en el sistema, quien pide más contraste y el
   navegador que no sabe desenfocar reciben el mismo material, pero opaco. Como
   todo sale de estas variables, basta con cambiarlas aquí. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root.liquido, :root.liquido[data-theme="light"] { --lq-tinte: var(--lq-denso); --lq-blur: 0px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root.liquido, :root.liquido[data-theme="light"] { --lq-tinte: var(--lq-denso); }
}

/* ── La barra de abajo: una cápsula que flota ───────────────────────────── */
/* Como la de iOS 26: separada de los bordes, y el contenido pasa por debajo,
   que es lo único que le da algo que difuminar. */
@media (max-width: 640px) {
  :root.liquido .bottom-nav {
    left: 12px; right: 12px; bottom: max(8px, env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 30px;
    background: var(--lq-tinte) !important;
    -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat)) !important;
    backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat)) !important;
    border: 1px solid var(--lq-borde) !important;
    box-shadow: var(--lq-brillo), var(--lq-sombra) !important;
  }
  /* La pestaña activa lleva su pastilla: un tinte, no otra capa de vidrio. */
  :root.liquido .bn-item { border-radius: 22px; color: var(--text-2); }
  :root.liquido .bn-item.active { background: var(--lq-pastilla); color: var(--accent-ink); }
  /* La cápsula mide 58 px y arranca a max(8 px, área segura) del borde: el
     buscador sube lo justo para no montarse en ella. */
  :root.liquido body:not(.ld-buscando) .ld-muelle { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 64px); }
}

/* ── El buscador flotante ────────────────────────────────────────────────── */
/* Sin el degradado opaco que lo separaba del contenido: con el vidrio ya se
   separa solo, y el degradado tapaba justo lo que el vidrio debe dejar ver. */
:root.liquido .ld-muelle { background: none; }
:root.liquido .ld-campo {
  background: var(--lq-tinte);
  -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat));
  backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat));
  border: 1px solid var(--lq-borde);
  box-shadow: var(--lq-brillo), var(--lq-sombra);
}

/* ── La barra de arriba ──────────────────────────────────────────────────── */
/* iOS 26 ya no pone una barra de vidrio: el contenido se difumina al subir por
   debajo (el "borde de scroll") y los botones son los que llevan el vidrio.
   El desenfoque del borde se desvanece hacia abajo con una máscara, sin tinte
   ni pelo; y sigue animando SOLO su opacidad, igual que antes. */
:root.liquido .topbar::before {
  inset: 0 0 -20px 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), transparent);
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
:root.liquido .topbar .theme-toggle,
:root.liquido #topbarAvatar {
  border-radius: 50%;
  background: var(--lq-tinte);
  -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat));
  backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat));
  border: 1px solid var(--lq-borde);
  box-shadow: var(--lq-brillo), 0 4px 16px rgba(0, 0, 0, .18);
}
/* Botón de vidrio: al tocarlo NO se encoge (vidrio + transformación es la
   falla del iPhone); se ilumina. */
:root.liquido .topbar .theme-toggle:active,
:root.liquido #topbarAvatar:active { transform: none; background: var(--lq-denso); }

/* ── Ventanas emergentes y la hoja de resultados ────────────────────────── */
/* Vidrio desde el PRIMER cuadro. La primera versión entraba opaca y se
   difuminaba al asentarse, y se leía como un efecto que "carga después".
   Lo que lo hace posible sin caer en las fallas del iPhone:
   · La cortina ya no se desvanece con su OPACIDAD. Un padre con opacidad a
     medias es la "raíz de fondo" del hijo: mientras dura el fundido, el vidrio
     del modal solo ve la cortina y la página aparece de golpe al final (el
     otro "carga después"). La oscuridad vive en ::before, que no es padre del
     modal, y el fundido es suyo.
   · En pantallas táctiles la ventana entra moviendo `top`, no con transform.
     Con ratón (escritorio) sí escala de 95 a 100 %.
   El editor a pantalla completa se queda sólido: es un formulario largo, no
   una ventana sobre algo. */
:root.liquido .modal-overlay {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none;
}
/* z-index -1 dentro del contexto de la cortina: pinta encima de su fondo y
   debajo de lo que lleva adentro, sin tocar a los hijos. */
:root.liquido .modal-overlay::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--lq-cortina);
  animation: fadeIn .3s ease;
}
:root.liquido .modal-overlay.closing { animation: none; }
:root.liquido .modal-overlay.closing::before { animation: ovOut .18s ease forwards; }

/* Las otras dos cortinas no tienen vidrio adentro: solo oscurecen. */
:root.liquido #welcomeModal, :root.liquido #whatsNewModal, :root.liquido .ld-velo {
  background: var(--lq-cortina) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:root.liquido .modal-overlay .modal:not(.modal-full),
:root.liquido .ld-hoja {
  background: var(--lq-tinte);
  -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat));
  backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat));
  border: 1px solid var(--lq-borde);
  box-shadow: var(--lq-brillo), 0 24px 70px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .18);
}
:root.liquido .modal-overlay .modal:not(.modal-full) {
  position: relative;
  animation: lqEntra .45s var(--lq-curva);
}
@keyframes lqEntra { from { opacity: 0; top: 18px; } }
/* Con ratón, la ventana crece de 95 a 100 %. */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  :root.liquido .modal-overlay .modal:not(.modal-full) { animation: lqModalIn .5s var(--lq-curva); }
}
@keyframes lqModalIn { from { opacity: 0; transform: scale(.95); } }
:root.liquido .modal-overlay.closing .modal:not(.modal-full) { animation: lqSale .18s ease forwards; }
@keyframes lqSale { to { opacity: 0; top: 14px; } }

/* Teléfono: la hoja sube desde FUERA de la pantalla, como en iOS.
   La primera versión animaba `top` desde 45vh y se sentía brusca por dos
   razones: una ficha de 678 px en un teléfono de 812 arrancaba con 313 px ya
   visibles (aparecía de golpe y luego se deslizaba), y mover `top` sobre una
   hoja con desenfoque obliga a repintar la hoja y su desenfoque en cada cuadro.
   Ahora se mueve con transform, que lo hace la GPU, y por eso la hoja del
   teléfono NO lleva desenfoque (en el iPhone, desenfoque + transform es la
   falla de las capas en blanco). Queda casi opaca con el filo de luz y la
   sombra; con la cortina al 58 % detrás, el desenfoque apenas se notaba. */
@media (max-width: 640px) {
  :root.liquido .modal-overlay .modal:not(.modal-full) {
    background: var(--lq-denso);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    animation: lqSube .42s var(--lq-curva);
  }
  /* Al cerrar baja por donde vino. Tiene que acabar antes de los 190 ms en que
     closeOverlay quita la cortina. */
  :root.liquido .modal-overlay.closing .modal:not(.modal-full) {
    animation: lqBaja .18s cubic-bezier(.4, 0, 1, 1) forwards;
  }
}
@keyframes lqSube { from { transform: translateY(100%); } }
@keyframes lqBaja { to { transform: translateY(100%); } }

/* La hoja del buscador entra con su margen, no con transform. */
:root.liquido .ld-hoja { animation: lqHojaEntra .22s var(--lq-curva); }
@keyframes lqHojaEntra { from { opacity: 0; margin-bottom: -10px; } }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
/* El mismo material, pero SIN desenfoque, a propósito. Detrás de una tarjeta
   solo está el fondo liso (o el degradado de marca, que difuminado queda
   igual), así que el desenfoque no cambia lo que se ve; en cambio cuesta en
   cada cuadro de scroll de una lista de 200 y en el iPhone ya dejó tarjetas
   en blanco al cambiar de tema. Lo que sí se nota del vidrio va completo: el
   tinte, el filo de luz y la sombra. El filo es un anillo por dentro para no
   mover ni un pixel del acomodo. */
:root.liquido .card,
:root.liquido .stat-card,
:root.liquido .customer-item,
:root.liquido .ld-ahora:not(.calma),
:root.liquido .ld-rato-item:not(.tenue),
:root.liquido .ld-dinero,
:root.liquido .ms-kpi,
:root.liquido .ms-alta,
:root.liquido .pn-card {
  background-color: var(--lq-tarjeta) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--lq-borde), var(--lq-brillo), var(--lq-tarjeta-sombra) !important;
}
/* Dentro de una ventana los renglones ya flotan con ella: sin sombra propia,
   que en una lista apilada se ensucia. */
:root.liquido .modal .customer-item,
:root.liquido .modal .card {
  box-shadow: inset 0 0 0 1px var(--lq-borde), var(--lq-brillo) !important;
}

/* ── Botones: se hunden rápido y regresan con resorte ───────────────────── */
/* Solo los sólidos (van DENTRO del vidrio, como pide la regla de oro). Al
   presionar la transición es corta; al soltar manda la del reposo, larga y
   con rebote. */
:root.liquido .btn,
:root.liquido .ld-btn,
:root.liquido .ld-rato-btn,
:root.liquido .ld-res-btn,
:root.liquido .ms-scan,
:root.liquido .ms-alta,
:root.liquido .bn-item {
  transition: transform .55s var(--lq-resorte), background-color .2s ease, color .2s ease, opacity .2s ease;
}
:root.liquido .btn:active:not(:disabled),
:root.liquido .ld-btn:active,
:root.liquido .ld-rato-btn:active,
:root.liquido .ld-res-btn:active:not(:disabled),
:root.liquido .ms-scan:active,
:root.liquido .ms-alta:active,
:root.liquido .bn-item:active {
  transform: scale(.96);
  transition-duration: .12s;
}