/* =============================================================================
   Liquid Glass SV — sistema de superficies
   -----------------------------------------------------------------------------
   Tres capas ópticas, como el Liquid Glass de Apple:
     1. LENSING     el fondo se dobla en el borde     → lg-filters.js (Chromium)
     2. HIGHLIGHT   borde especular que corre ↘        → CSS, siempre
     3. SOMBRA      separa la pieza del fondo          → CSS, siempre

   La 1 es enhancement. Las 2 y 3 son la BASELINE: este archivo solo ya deja
   una superficie correcta en Safari, Firefox e iOS. Si una pieza necesita la
   refracción para leerse, está mal diseñada.

   Paleta: la de /brand (black, white, #033CCC, #0F3159) más la escala pastel
   que ya introdujo el design system del onboarding. El vidrio es ESTRUCTURA
   (jerarquía y profundidad), no decoración.
   ============================================================================= */

:root {
  /* --- marca (no se toca) --- */
  --lg-black: #000000;
  --lg-white: #ffffff;
  --lg-electric: #033CCC;
  --lg-deep: #0F3159;

  /* --- escala de superficie --- */
  --lg-pastel-0: #FAFBFE;
  --lg-pastel-1: #EEF1F8;
  --lg-pastel-2: #E3E9F6;
  --lg-ink: #0a1426;

  /* --- el hueco donde lg-filters.js enchufa la lente ---
     Valor vacío a propósito: sin JS, o fuera de Chromium, se sustituye por
     nada y la cadena de backdrop-filter queda solo con blur + saturate. */
  --lg-lente: ;

  /* --- geometría de la lente (la lee lg-filters.js) --- */
  --lg-bisel: 18px;      /* ancho de la zona curva desde el borde */
  --lg-espesor: 12px;    /* grosor aparente del vidrio */

  /* --- óptica CSS --- */
  --lg-blur: 14px;
  --lg-sat: 175%;
  --lg-bright: 105%;

  /* Fuerza de la lente y de la escarcha, por tema. Sobre fondos claros de bajo
     contraste la refracción no tiene qué doblar y solo ensucia: ahí se atenúa
     el lensing y se compensa con más blur. Los define cada tema. */
  --lg-fuerza: 1;
  --lg-frost: 1;

  /* --- radio ---
     UNO SOLO, para todo. Sidebar, barra, sheet, card, chip, botón: el mismo.
     Una escala de radios es la forma más rápida de que un sistema se vea como
     seis sistemas. En piezas más bajas que 2×radio el navegador lo clampea
     solo a la mitad del alto, así que un chip sigue leyéndose como pastilla
     sin que haya que declarar un radio aparte. */
  --lg-r: 12px;

  /* Fondo por defecto, para cuando no hay atributo de tema. Los bloques de
     tema lo pisan por orden, no por especificidad. */
  --lg-fondo: linear-gradient(180deg, var(--lg-pastel-0), var(--lg-pastel-2));

  /* --- motion --- */
  --lg-ease: cubic-bezier(.22,.61,.36,1);
  --lg-ease-out: cubic-bezier(.16,1,.3,1);
}

/* =============================================================================
   TEMA CLARO — continúa el pastel del onboarding
   ============================================================================= */
[data-tema="claro"] {
  --lg-fuerza: .45;   /* el pastel casi no tiene contraste: poca lente */
  --lg-frost: 1.7;    /* y más escarcha, que es lo que sí se lee en claro */
  /* El fondo no es decoración: es lo que el vidrio dobla. Un fondo plano deja
     el lensing invisible y la pieza se lee como un rectángulo más claro. */
  --lg-fondo:
    radial-gradient(44% 32% at 80% 12%, rgba(3,60,204,.20) 0%, transparent 64%),
    radial-gradient(38% 30% at 10% 66%, rgba(15,49,89,.17) 0%, transparent 66%),
    radial-gradient(56% 42% at 46% 106%, rgba(3,60,204,.15) 0%, transparent 62%),
    linear-gradient(180deg, var(--lg-pastel-0) 0%, var(--lg-pastel-1) 60%, var(--lg-pastel-2) 100%);
  --lg-tint: rgba(255,255,255,.56);
  --lg-tint-alto: rgba(255,255,255,.74);
  --lg-tint-bajo: rgba(255,255,255,.38);
  --lg-borde: rgba(255,255,255,.85);
  --lg-rim-alto: rgba(255,255,255,1);
  --lg-rim-bajo: rgba(15,49,89,.10);
  --lg-interior: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(15,49,89,.06);
  --lg-sombra-1: 0 10px 26px -14px rgba(15,49,89,.34);
  --lg-sombra-2: 0 22px 60px -22px rgba(15,49,89,.42);
  --lg-sombra-3: 0 34px 80px -28px rgba(15,49,89,.50);

  --lg-texto: var(--lg-ink);
  --lg-texto-suave: rgba(10,20,38,.72);
  /* .60 y no .55: con .55 el texto tenue queda en 4.09 sobre blanco y 4.01 sobre
     vidrio, los dos por debajo de AA. Medido, no estimado. */
  --lg-texto-tenue: rgba(10,20,38,.60);
  --lg-acento: var(--lg-electric);
  --lg-linea: rgba(15,49,89,.13);
  --lg-solido: #ffffff;
  --lg-solido-alt: #f6f8fc;

  /* selección: pista HUNDIDA, cápsula ELEVADA. Ver el bloque de reglas abajo. */
  --lg-hundido: rgba(15,49,89,.09);
  --lg-sel: #ffffff;
  --lg-sel-texto: var(--lg-ink);
  --lg-sel-sombra: 0 2px 8px -2px rgba(15,49,89,.30), 0 0 0 .5px rgba(15,49,89,.07);
  --lg-sel-acento: rgba(3,60,204,.11);
  --lg-sel-borde: rgba(3,60,204,.24);
}

/* =============================================================================
   TEMA OSCURO — el registro donde el vidrio se luce
   ============================================================================= */
[data-tema="oscuro"] {
  --lg-fuerza: 1;
  --lg-frost: 1;
  --lg-fondo:
    radial-gradient(42% 30% at 82% 14%, rgba(3,60,204,.40) 0%, transparent 62%),
    radial-gradient(36% 26% at 12% 30%, rgba(70,125,255,.20) 0%, transparent 64%),
    radial-gradient(48% 34% at 34% 88%, rgba(15,49,89,.72) 0%, transparent 60%),
    radial-gradient(120% 90% at 92% 108%, rgba(15,49,89,.42) 0%, transparent 58%),
    linear-gradient(180deg, #0a1120 0%, #070d1a 55%, #050912 100%);
  --lg-tint: rgba(255,255,255,.075);
  --lg-tint-alto: rgba(255,255,255,.13);
  --lg-tint-bajo: rgba(255,255,255,.045);
  --lg-borde: rgba(255,255,255,.16);
  --lg-rim-alto: rgba(255,255,255,.85);
  --lg-rim-bajo: rgba(255,255,255,.06);
  --lg-interior: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.35);
  --lg-sombra-1: 0 12px 30px -16px rgba(0,0,0,.75);
  --lg-sombra-2: 0 26px 64px -24px rgba(0,0,0,.80);
  --lg-sombra-3: 0 40px 90px -30px rgba(0,0,0,.85);

  --lg-texto: #ffffff;
  --lg-texto-suave: rgba(255,255,255,.76);
  --lg-texto-tenue: rgba(255,255,255,.56);
  --lg-acento: #5b8cff;              /* Blue Electric aclarado: #033CCC no llega a 4.5:1 sobre oscuro */
  --lg-linea: rgba(255,255,255,.11);
  --lg-solido: rgba(12,19,33,.92);
  --lg-solido-alt: rgba(18,26,43,.92);

  --lg-hundido: rgba(0,0,0,.28);
  --lg-sel: rgba(255,255,255,.17);
  --lg-sel-texto: #ffffff;
  --lg-sel-sombra: 0 2px 10px -3px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.24);
  --lg-sel-acento: rgba(143,176,255,.18);
  --lg-sel-borde: rgba(143,176,255,.34);
}

/* Sin tema declarado, el claro es el default (es el registro actual de live).
   🔴 Este selector NO puede tener más especificidad que los bloques de tema.
   Estuvo como `:root:not([data-tema="oscuro"])`, que es (0,2,0), y le ganaba a
   `[data-tema="claro"]`, que es (0,1,0): el tema claro quedaba mudo y no había
   forma de cambiarle el fondo. El default vive en el :root de arriba, que es de
   la misma especificidad pero está antes, así que el tema gana por orden. */
:root { color-scheme: light dark; }

/* =============================================================================
   SUPERFICIE BASE
   ============================================================================= */
.lg,
.lg-nav,
.lg-bar,
.lg-sheet,
.lg-chip,
.lg-btn,
.lg-toggle {
  position: relative;
  isolation: isolate;
  background: var(--lg-tint);
  border-radius: var(--lg-r);
  box-shadow: var(--lg-interior), var(--lg-sombra-2);
  color: var(--lg-texto);
  -webkit-backdrop-filter: var(--lg-lente) blur(calc(var(--lg-blur) * var(--lg-frost))) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter: var(--lg-lente) blur(calc(var(--lg-blur) * var(--lg-frost))) saturate(var(--lg-sat)) brightness(var(--lg-bright));
}

/* --- capa 2: el borde especular ---
   Un anillo de 1px con gradiente: luz arriba-izquierda, apagado en el medio,
   rebote suave abajo-derecha. Es lo que hace que el borde se lea como un canto
   de vidrio y no como un stroke. */
.lg::before,
.lg-nav::before,
.lg-bar::before,
.lg-sheet::before,
.lg-chip::before,
.lg-btn::before,
.lg-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    var(--lg-rim-alto) 0%,
    var(--lg-rim-bajo) 38%,
    transparent 55%,
    var(--lg-rim-bajo) 78%,
    var(--lg-rim-alto) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* El contenido siempre por encima del anillo. */
.lg > *, .lg-nav > *, .lg-bar > *, .lg-sheet > * { position: relative; z-index: 2; }

/* =============================================================================
   VARIANTES DE MATERIAL (las dos de Apple: regular y clear)
   ============================================================================= */

/* regular: más difuso, deja pasar menos. Para chrome sobre contenido variable. */
.lg-thin {
  --lg-bisel: 12px;
  --lg-espesor: 7px;
  --lg-blur: 22px;
  background: var(--lg-tint-alto);
}

/* clear: más transparente y más distorsión. Para chrome sobre fondos propios
   (foto, gradiente), nunca sobre texto ajeno. */
.lg-thick {
  --lg-bisel: 26px;
  --lg-espesor: 20px;
  --lg-blur: 8px;
  --lg-sat: 200%;
  background: var(--lg-tint-bajo);
  box-shadow: var(--lg-interior), var(--lg-sombra-3);
}

/* elevaciones */
.lg-e1 { box-shadow: var(--lg-interior), var(--lg-sombra-1); }
.lg-e2 { box-shadow: var(--lg-interior), var(--lg-sombra-2); }
.lg-e3 { box-shadow: var(--lg-interior), var(--lg-sombra-3); }


/* =============================================================================
   NAVEGACIÓN — sidebar y dock
   ============================================================================= */
.lg-nav {
  --lg-bisel: 20px;
  --lg-espesor: 10px;
  --lg-blur: 22px;
  border-radius: var(--lg-r);
}

/* scroll edge effect: el contenido se desvanece al entrar debajo del chrome,
   en vez de cortarse con una línea dura. */
.lg-edge-abajo { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%); }
.lg-edge-arriba { -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(0deg, #000 calc(100% - 28px), transparent 100%); }

/* =============================================================================
   BARRA — topbar flotante
   ============================================================================= */
.lg-bar {
  --lg-bisel: 16px;
  --lg-espesor: 9px;
  --lg-blur: 18px;
  border-radius: var(--lg-r);
}

/* =============================================================================
   SHEET — modal y panel lateral
   ============================================================================= */
.lg-sheet {
  --lg-bisel: 24px;
  --lg-espesor: 14px;
  --lg-blur: 26px;
  border-radius: var(--lg-r);
  box-shadow: var(--lg-interior), var(--lg-sombra-3);
}

.lg-scrim {
  position: fixed;
  inset: 0;
  background: rgba(4,8,17,.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* =============================================================================
   CONTROLES — chip, botón, toggle
   ============================================================================= */
.lg-chip,
.lg-btn,
.lg-toggle {
  --lg-bisel: 10px;
  --lg-espesor: 6px;
  --lg-blur: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: var(--lg-r);
  box-shadow: var(--lg-interior), var(--lg-sombra-1);
  font: inherit;
  letter-spacing: -.02em;
}

.lg-chip { padding: 5px 12px; font-size: 13px; font-weight: 600; }
.lg-btn  { padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .16s var(--lg-ease), box-shadow .16s var(--lg-ease), background .16s var(--lg-ease); }
.lg-btn:hover  { background: var(--lg-tint-alto); transform: translateY(-1px); box-shadow: var(--lg-interior), var(--lg-sombra-2); }
.lg-btn:active { transform: translateY(0) scale(.985); }

/* la única pieza que NO es de vidrio: la acción primaria es sólida y opaca,
   porque un CTA no se negocia con el fondo. */
.lg-btn-primario {
  background: var(--lg-electric);
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.lg-btn-primario::before { background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 45%, rgba(0,0,0,.18)); }
.lg-btn-primario:hover { background: #0230a8; }

/* =============================================================================
   SELECCIÓN — pista HUNDIDA, cápsula ELEVADA
   -----------------------------------------------------------------------------
   🔴 El estado seleccionado NUNCA se expresa con "más blanco". Sobre un fondo
   claro, un tinte más blanco no existe: la pestaña activa desaparece.

   Apple lo resuelve con profundidad, no con luminancia: la pista se hunde
   (se oscurece) y el elegido sale hacia adelante como una cápsula opaca con
   sombra. Es la misma jerarquía en claro y en oscuro, y por eso funciona en
   los dos. Su variante "tinted" hace lo mismo: sube opacidad y contraste.

   Para navegación (sidebar, dock, lista) va la otra forma: relleno de acento
   con su borde. Nunca tinte neutro.
   ============================================================================= */
.lg-toggle { padding: 4px; gap: 2px; background: var(--lg-hundido); }
.lg-toggle > button {
  border: none;
  background: transparent;
  color: var(--lg-texto-suave);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  padding: 7px 15px;
  border-radius: var(--lg-r);
  cursor: pointer;
  transition: background .18s var(--lg-ease), color .18s var(--lg-ease), box-shadow .18s var(--lg-ease);
}
.lg-toggle > button:hover { color: var(--lg-texto); }
.lg-toggle > button[aria-selected="true"] {
  background: var(--lg-sel);
  color: var(--lg-sel-texto);
  box-shadow: var(--lg-sel-sombra);
}

/* Ítem de navegación seleccionado: relleno de acento + su borde. */
.lg-activo {
  background: var(--lg-sel-acento) !important;
  color: var(--lg-acento) !important;
  box-shadow: inset 0 0 0 1px var(--lg-sel-borde);
}

/* =============================================================================
   SUPERFICIE SÓLIDA — la hermana obligatoria
   -----------------------------------------------------------------------------
   Tablas, formularios y bloques de texto largo van ACÁ, nunca sobre vidrio.
   Comparte radio, sombra y borde con las superficies de vidrio para que el
   sistema se lea como uno solo, pero es opaca y de alto contraste.
   ============================================================================= */
.lg-solid {
  position: relative;
  background: var(--lg-solido);
  border: 1px solid var(--lg-linea);
  border-radius: var(--lg-r);
  box-shadow: var(--lg-sombra-1);
  color: var(--lg-texto);
}
.lg-solid-alt { background: var(--lg-solido-alt); }

/* =============================================================================
   ACCESIBILIDAD — el sistema se apaga solo
   ============================================================================= */

/* Si el sistema operativo pide menos transparencia, todo cae a sólido.
   No es degradación: es el mismo layout con otro material. */
@media (prefers-reduced-transparency: reduce) {
  .lg, .lg-nav, .lg-bar, .lg-sheet, .lg-chip, .lg-btn, .lg-toggle {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--lg-solido) !important;
    border: 1px solid var(--lg-linea);
  }
  .lg::before, .lg-nav::before, .lg-bar::before, .lg-sheet::before,
  .lg-chip::before, .lg-btn::before, .lg-toggle::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-btn, .lg-toggle > button { transition: none; }
}

/* Sin soporte de backdrop-filter (navegador viejo): sólido, no translúcido roto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg, .lg-nav, .lg-bar, .lg-sheet, .lg-chip, .lg-btn, .lg-toggle {
    background: var(--lg-solido);
    border: 1px solid var(--lg-linea);
  }
}

/* =============================================================================
   TIPOGRAFÍA — Inter, letter-spacing negativo (regla de /brand)
   ============================================================================= */
.lg-h1 { font-size: 48px; font-weight: 800; letter-spacing: -1.44px; line-height: 1.1; }
.lg-h2 { font-size: 32px; font-weight: 700; letter-spacing: -.96px; line-height: 1.15; }
.lg-h3 { font-size: 24px; font-weight: 700; letter-spacing: -.72px; line-height: 1.2; }
.lg-body { font-size: 15px; font-weight: 400; letter-spacing: -.45px; line-height: 1.6; }
.lg-cap { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* =============================================================================
   FONDO DE PÁGINA
   ============================================================================= */
.lg-page {
  min-height: 100%;
  background: var(--lg-fondo);
  background-attachment: fixed;
  color: var(--lg-texto);
  font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}