/* ==========================================================
   Stith · diseño de cristal (basado en Glass UI v3.1) con modo claro y oscuro.
   - <html data-theme="dark|light" class="cristal">: lo pone _tema.html antes de pintar.
   - .glass: tarjeta de cristal. glass.js le pone el brillo que sigue al cursor (.is-lit).
   - .g-scene.g-scene--aurora: fondo de auroras moradas, fijo detras de todo.
   El modo claro de las clases de Tailwind que ya usan las plantillas (texto blanco,
   fondos negros, bordes grises) vive en tema-claro.css, generado por
   scripts/generar_tema_claro.py.
   ========================================================== */
@property --lit { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --g-tint: 20, 14, 34;
  --g-alpha: .46;
  --g-blur: 18px;
  --g-sat: 160%;
  --g-radius: 24px;
  --g-edge: rgba(255, 255, 255, .22);
  --g-edge-low: rgba(255, 255, 255, .04);
  --g-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 50px -12px rgba(0, 0, 0, .6);
  --g-shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 64px -16px rgba(0, 0, 0, .7);
  --g-sheen: rgba(255, 255, 255, .16);
  --g-spot: rgba(167, 139, 250, .16);
  --g-inset: inset 0 1px 0 rgba(255, 255, 255, .07);
  --g-accent: #8b5cf6;
  --g-accent-2: #22d3ee;
  --g-accent-3: #e879f9;
  --g-ink: #f3f0fa;
  --g-scene-bg: #07050d;
  --g-aurora-1: rgba(139, 92, 246, .46);
  --g-aurora-2: rgba(232, 121, 249, .26);
  --g-aurora-3: rgba(34, 211, 238, .18);
  --g-aurora-4: rgba(99, 102, 241, .30);
  --g-grid: rgba(167, 139, 250, .06);
  --g-spring: cubic-bezier(.34, 1.56, .64, 1);
  --g-smooth: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
html[data-theme="light"] {
  --g-tint: 255, 255, 255;
  --g-alpha: .62;
  --g-edge: rgba(255, 255, 255, .95);
  --g-edge-low: rgba(124, 58, 237, .10);
  --g-shadow: 0 1px 2px rgba(76, 29, 149, .06), 0 14px 40px -12px rgba(76, 29, 149, .22);
  --g-shadow-lift: 0 2px 4px rgba(76, 29, 149, .08), 0 26px 56px -16px rgba(76, 29, 149, .30);
  --g-sheen: rgba(255, 255, 255, .7);
  --g-spot: rgba(255, 255, 255, .55);
  --g-inset: inset 0 1px 0 rgba(255, 255, 255, .8);
  --g-ink: #1e1b2e;
  --g-scene-bg: #f5f2fd;
  --g-aurora-1: rgba(167, 139, 250, .46);
  --g-aurora-2: rgba(240, 171, 252, .30);
  --g-aurora-3: rgba(103, 232, 249, .26);
  --g-aurora-4: rgba(165, 180, 252, .30);
  --g-grid: rgba(124, 58, 237, .07);
  color-scheme: light;
}

html.cristal, html.cristal body { background: var(--g-scene-bg) !important; }
html.cristal body { color: var(--g-ink); }

/* ---------- Fondo de auroras ---------- */
.g-scene { position: fixed; inset: -40px; z-index: -2; pointer-events: none; background: var(--g-scene-bg); overflow: hidden; transform: scale(1.08); contain: strict; }
.g-scene::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 45% at 18% 25%, var(--g-aurora-1), transparent 100%),
    radial-gradient(35% 40% at 82% 18%, var(--g-aurora-2), transparent 100%),
    radial-gradient(45% 50% at 68% 82%, var(--g-aurora-3), transparent 100%),
    radial-gradient(35% 35% at 12% 88%, var(--g-aurora-4), transparent 100%);
  animation: g-aurora 32s ease-in-out infinite alternate;
}
.g-scene::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--g-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--g-grid) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  mask: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}
@keyframes g-aurora { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(8deg) scale(1.12) translate(3%, -2%); } 100% { transform: rotate(-6deg) scale(1.05) translate(-3%, 3%); } }

/* ---------- Tarjeta de cristal ---------- */
.glass {
  --mx: 50%; --my: 0%; --lit: 0;
  position: relative;
  isolation: isolate;
  border-radius: var(--g-radius);
  background: linear-gradient(135deg, rgba(var(--g-tint), calc(var(--g-alpha) + .12)), rgba(var(--g-tint), var(--g-alpha)) 55%, rgba(var(--g-tint), calc(var(--g-alpha) + .05)));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: var(--g-shadow), var(--g-inset);
  transition: --lit .45s var(--g-smooth), box-shadow .45s var(--g-smooth), background .5s;
}
.glass.is-lit { --lit: 1; }
[data-tilt].is-tilting, .glass.is-lit[data-tilt] { box-shadow: var(--g-shadow-lift), var(--g-inset); }
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background:
    radial-gradient(220px circle at var(--mx) var(--my), rgba(196, 181, 253, calc(var(--lit) * .9)), transparent 70%),
    linear-gradient(140deg, var(--g-edge), var(--g-edge-low) 38%, var(--g-edge-low) 62%, color-mix(in srgb, var(--g-edge) 70%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background:
    radial-gradient(440px circle at var(--mx) var(--my), var(--g-spot), transparent 62%),
    linear-gradient(115deg, transparent 30%, var(--g-sheen) 45%, transparent 52%) var(--sx, -160%) 0 / 250% 100% no-repeat;
  opacity: var(--lit);
  mix-blend-mode: screen;
  transition: background-position 1s var(--g-smooth);
}
html[data-theme="light"] .glass::after { mix-blend-mode: soft-light; }
.glass.is-lit::after { --sx: 160%; }
/* El contenido va encima del brillo. Los hijos que Tailwind ya posiciona (absolute/fixed/sticky) se respetan. */
.glass > :not(.absolute):not(.fixed):not(.sticky) { position: relative; z-index: 3; }
.glass.g-static::after { display: none; }
/* Contenedor grande sin desenfoque propio: sus tarjetas ya desenfocan. */
.glass--flat { backdrop-filter: none; -webkit-backdrop-filter: none; }

[data-tilt] { transform-style: preserve-3d; }
[data-tilt].is-tilting { will-change: transform; }

/* ---------- Aparicion al hacer scroll ---------- */
[data-reveal] { opacity: 0; }
[data-reveal].is-in { animation: g-in-up .8s var(--g-spring) backwards; animation-delay: calc(min(var(--i, 0), 12) * 70ms); opacity: 1; }
@keyframes g-in-up { from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(8px); } }

/* ---------- Onda de luz al hacer clic ---------- */
.g-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 4; background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 60%); transform: scale(0); animation: g-ripple .75s var(--g-smooth) forwards; }
@keyframes g-ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Boton de tema (sol / luna) ---------- */
.tema-boton {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; min-height: 38px; border-radius: 999px; cursor: pointer;
  color: var(--g-ink); background: rgba(var(--g-tint), .5); border: 1px solid var(--g-edge-low);
  box-shadow: var(--g-inset); transition: transform .35s var(--g-spring), background .25s;
}
.tema-boton:hover { transform: rotate(-12deg) scale(1.06); }
.tema-boton:active { transform: scale(.92); }
.tema-boton:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
.tema-boton svg { width: 18px; height: 18px; }
.tema-icono-luna { display: none; }
html[data-theme="light"] .tema-icono-sol { display: none; }
html[data-theme="light"] .tema-icono-luna { display: block; }

/* ---------- Plantilla base (panel del aprendiz): menu y barra superior dejan ver la aurora ---------- */
html.cristal body.bg-\[\#0a0a0a\], html.cristal body > .flex-1.bg-\[\#0a0a0a\] { background: transparent !important; }
html.cristal body > aside.bg-\[\#0a0a0a\] { background: rgba(var(--g-tint), calc(var(--g-alpha) + .14)); }
/* La barra superior es mas opaca: el contenido pasa por detras al bajar y su texto no debe competir con el titulo. */
html.cristal header.bg-\[\#0a0a0a\] { background: rgba(var(--g-tint), calc(var(--g-alpha) + .28)); }
html.cristal body > aside.bg-\[\#0a0a0a\], html.cristal header.bg-\[\#0a0a0a\] {
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
html.cristal #sidebar-mobile.bg-\[\#0a0a0a\] { background: rgb(var(--g-tint)); }   /* el menu del celular tapa la pagina: solido */
html.g-lite.cristal body > aside.bg-\[\#0a0a0a\], html.g-lite.cristal header.bg-\[\#0a0a0a\] { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--g-tint), .94); }

/* Sin glass.js cargado, nada queda invisible esperando la animacion de entrada. */
html:not(.g-motor) [data-reveal] { opacity: 1; }

/* ---------- Rendimiento ---------- */
.g-off, .g-off::before, .g-off::after,
.g-hidden *, .g-hidden *::before, .g-hidden *::after { animation-play-state: paused !important; }
/* Celulares y equipos modestos (glass.js pone .g-lite): sin desenfoque en vivo. En iPhone el desenfoque
   recalculado en cada fotograma hacia que los botones tardaran en responder; un fondo casi opaco se ve casi igual. */
.g-lite .glass { backdrop-filter: none; -webkit-backdrop-filter: none; --g-alpha: .82; }
html[data-theme="light"].g-lite .glass { --g-alpha: .86; }
.g-lite .g-scene::before { animation: none; }
.g-calm *, .g-calm *::before, .g-calm *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
@media (prefers-reduced-transparency: reduce) { .glass { --g-alpha: .9; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { --g-alpha: .88; } }

/* ---------- Barras de desplazamiento ----------
   Antes el pulgar se volvia morado fuerte (#7C3AED, base.html) al pasar el mouse. En tablas apenas mas anchas que su
   caja (Registro en Tiempo Real) la barra horizontal ocupa casi todo el ancho, asi que al pararse abajo aparecia y
   desaparecia una franja morada. Aqui la barra es fina y discreta en ambos temas; vale para Jinja y para React. */
html.cristal { scrollbar-color: rgba(167, 139, 250, .35) transparent; }
html.cristal * { scrollbar-width: thin; }
html.cristal ::-webkit-scrollbar { width: 8px; height: 8px; }
html.cristal ::-webkit-scrollbar-track { background: transparent; }
html.cristal ::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, .28); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
html.cristal ::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, .45); background-clip: padding-box; }
html.cristal ::-webkit-scrollbar-corner { background: transparent; }
html[data-theme="light"].cristal ::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, .22); background-clip: padding-box; }
html[data-theme="light"].cristal ::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, .38); background-clip: padding-box; }

/* Rebote de "Registro en Tiempo Real": una caja que se desplaza en los dos sentidos (overflow auto) con una tabla que
   cabe casi justa entra en un ciclo: aparece la barra horizontal, le quita alto, hace falta la vertical, esa le quita
   ancho, cambia la horizontal... y la tabla sube y baja sin parar bajo el cursor. Reservando siempre el espacio de la
   barra vertical el ancho util no cambia y el ciclo no puede empezar. Aplica a Jinja y a React. */
html.cristal :is(.overflow-auto, .overflow-y-auto) { scrollbar-gutter: stable; }