/* GlosaCero — capa visual «premium» (se carga después de app.css y rips.css).
   Superficies por niveles, barra lateral de vidrio, micro-animaciones, esqueletos de carga y fondo
   reactivo del inicio de sesión. Todo nativo (sin librerías). Para revertir: quitar este archivo. */

/* ══ 1. SUPERFICIES POR NIVELES ══
   Profundidad por luminosidad (oscuro) o por sombra suave (claro), con bordes casi invisibles. */
:root {
  --surface-0: #f4f5fa;
  --surface-1: #ffffff;
  --surface-2: #f8f9fc;
  --surface-3: #ffffff;
  --hairline: rgba(15, 23, 42, .07);
  --elev-1: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -16px rgba(15, 23, 42, .16);
  --elev-2: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 40px -18px rgba(15, 23, 42, .24);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme="dark"] {
  --surface-0: #09090b;
  --surface-1: #121215;
  --surface-2: #18181c;
  --surface-3: #202026;
  --hairline: rgba(255, 255, 255, .06);
  --elev-1: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --elev-2: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 40px -16px rgba(0, 0, 0, .75);
  /* Los tokens existentes pasan a usar los niveles (antes eran translúcidos y planos). */
  --bg: var(--surface-0);
  --surface: var(--surface-1);
  --surface-solid: var(--surface-1);
  --surface-raised: var(--surface-3);
  --input-bg: #0e0e11;
  --border: var(--hairline);
  --border-soft: rgba(255, 255, 255, .035);
}

/* Tarjetas de primer nivel: superficie 1 + elevación 1 */
.result-block, .card-lite, .inicio-mod, .admin-stat, .ent-list-panel, .ent-editor, .admin-preview,
.page-view .admin-list, .page-view #adminPaneForm form, .ciclos-chip, .ciclos-tabla-wrap {
  background: var(--surface-1);
  border-color: var(--hairline);
  box-shadow: var(--elev-1);
}
/* Segundo nivel: bloques dentro de tarjetas */
.ent-step, .inicio-accion, .result-header, .admin-row-head, .ciclos-tabla thead th, .stat {
  background: var(--surface-2);
}
.ent-step, .inicio-accion { border-color: var(--hairline); }
/* Tercer nivel: lo que flota (menús, diálogos) */
.settings-popover, .ui-dialog-card, .help-pop { background: var(--surface-3); box-shadow: var(--elev-2); }
.inicio-mod:not(.is-locked):hover, .admin-stat:hover:not(.is-static) { box-shadow: var(--elev-2); }

/* ══ 2. BARRA LATERAL DE VIDRIO ══ */
.side-nav {
  background: color-mix(in srgb, var(--surface-1) 74%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid var(--hairline);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .side-nav { background: var(--surface-1); }
}
@media (max-width: 960px) {
  .side-nav { background: color-mix(in srgb, var(--surface-1) 88%, transparent); }
}
.side-item, .side-sub .mode-tab { transition: background .18s var(--ease-out), color .18s var(--ease-out); }

/* ══ 3. MICRO-ANIMACIONES ══ */
/* Botones: brillo al pasar, leve encogimiento al presionar y onda en el punto del clic */
.btn { position: relative; overflow: hidden; transition: transform .12s var(--ease-out), box-shadow .2s var(--ease-out), filter .2s var(--ease-out), background .2s, border-color .2s; }
.btn:not(:disabled):active { transform: scale(.97); }
.btn-primary:not(:disabled):hover { filter: brightness(1.06); }
.gc-ripple {
  position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0);
  pointer-events: none; animation: gcRipple .5s var(--ease-out) forwards;
}
@keyframes gcRipple { to { transform: scale(2.6); opacity: 0; } }

/* Entrada escalonada (filas de tablas y tarjetas); --i lo asigna gcStagger() */
.gc-stagger {
  opacity: 0; transform: translateY(6px);
  animation: gcRowIn .32s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes gcRowIn { to { opacity: 1; transform: none; } }
.page-view .admin-row:not(.admin-row-head), .ciclos-tabla tbody tr { transition: background .15s var(--ease-out); }
.page-view .admin-row:not(.admin-row-head):hover, .ciclos-tabla tbody tr:hover td { background: var(--surface-2); }

/* Cambio de vista: el contenido aparece suave */
.app-main > .tool-head, .page-view:not([hidden]), .module-panel:not([hidden]) { animation: gcFade .28s var(--ease-out); }
@keyframes gcFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ══ 4. ESQUELETOS DE CARGA ══ */
.gc-sk { position: relative; overflow: hidden; display: block; border-radius: 8px; background: var(--surface-2); }
.gc-sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent);
  animation: gcShimmer 1.3s infinite;
}
@keyframes gcShimmer { to { transform: translateX(100%); } }
.gc-sk-row { display: grid; grid-template-columns: 38px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 80px; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.gc-sk-row:last-child { border-bottom: 0; }
.gc-sk-avatar { width: 38px; height: 38px; border-radius: 50%; }
.gc-sk-stack { display: grid; gap: 6px; }
.gc-sk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.gc-sk-card { display: grid; gap: 10px; padding: 14px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--elev-1); }

/* ══ 5. FONDO REACTIVO DEL INICIO DE SESIÓN ══
   Los resplandores se desplazan unos píxeles siguiendo el puntero (variables --mx/--my). */
body::before { transition: transform .5s var(--ease-out); }
body.gc-login-activo::before { transform: translate3d(calc(var(--mx, 0) * 28px), calc(var(--my, 0) * 28px), 0) scale(1.04); }
body.gc-login-activo::after { transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -10px), 0); transition: transform .6s var(--ease-out); }
.login-card { box-shadow: var(--elev-2); }


/* ══ 6. GRÁFICO DE LÍNEAS (Estadísticas) ══ */
.stats-line { position: relative; }
.stats-line svg { display: block; width: 100%; height: auto; overflow: visible; }
.sl-grid { stroke: var(--hairline); stroke-width: 1; }
.sl-ax { font-family: var(--font-sans); font-size: 11px; fill: var(--text-faint); font-variant-numeric: tabular-nums; }
.sl-ax-i { fill: color-mix(in srgb, var(--success) 70%, var(--text-faint)); }
.sl-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sl-line-a { stroke: var(--primary); }
.sl-line-i { stroke: var(--success); stroke-dasharray: none; }
.sl-pt { stroke: var(--surface-1); stroke-width: 2; transition: r .15s var(--ease-out); }
.sl-pt-a { fill: var(--primary); }
.sl-pt-i { fill: var(--success); }
.sl-pt.is-on { r: 5.5; }
.sl-guia { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .15s; }
.stats-line.is-hover .sl-guia { opacity: .6; }
.sl-tip { position: absolute; top: 4px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; min-width: 130px;
  font-size: 12px; color: var(--text-muted); background: var(--surface-3); border: 1px solid var(--hairline); border-radius: 10px; box-shadow: var(--elev-2); pointer-events: none; }
.sl-tip[hidden] { display: none; }
.sl-tip strong { font-size: 12.5px; color: var(--text); }
.sl-tip span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sl-tip i { width: 8px; height: 8px; border-radius: 50%; }
.sl-tip i.a { background: var(--primary); }
.sl-tip i.i { background: var(--success); }
.stats-legend b { color: var(--text); font-weight: 700; margin-right: 6px; }
.stats-legend i { border-radius: 50%; }
/* Entrada: el trazo se dibuja, luego aparecen el área y los puntos */
.stats-line.is-anim .sl-line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: slDraw 1s var(--ease-out) .1s forwards; }
.stats-line.is-anim .sl-line-i { animation-delay: .25s; }
.stats-line.is-anim .sl-area, .stats-line.is-anim .sl-pt { opacity: 0; animation: slFade .5s ease .7s forwards; }
@keyframes slDraw { to { stroke-dashoffset: 0; } }
@keyframes slFade { to { opacity: 1; } }

/* ══ ACCESIBILIDAD: sin movimiento si el usuario lo pidió ══ */
@media (prefers-reduced-motion: reduce) {
  .gc-stagger { opacity: 1; transform: none; animation: none; }
  .gc-ripple, .gc-sk::after { display: none; }
  body.gc-login-activo::before, body.gc-login-activo::after { transform: none; }
  .app-main > .tool-head, .page-view:not([hidden]), .module-panel:not([hidden]) { animation: none; }
  .stats-line.is-anim .sl-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .stats-line.is-anim .sl-area, .stats-line.is-anim .sl-pt { opacity: 1; animation: none; }
}

/* Tarjetas y paneles de Estadísticas con la misma elevación que el resto */
.stats-card, .stats-panel { background: var(--surface-1); border-color: var(--hairline); box-shadow: var(--elev-1); }
#statsBody { display: grid; gap: 12px; }