/* =========================================================================
   EPUGMATIC — TEMA EPUG LILAC (solo presentación)
   -------------------------------------------------------------------------
   Hoja aislada: TODAS las reglas viven bajo `body.theme-lilac.light-mode`.
   Doble clase a propósito: el bloque `body.light-mode` del <style> inline va
   DESPUÉS de las hojas de tema, así que a igual especificidad ganaría él; con
   las dos clases el tema claro manda sin tocar el inline y sin `!important`
   extra. Sin el tema activo esta hoja no cambia ni un píxel.

   Dirección de arte — lavanda fría (claro, etéreo, sereno):
   - Fondo blanco lavado #F7F5FD, paneles de vidrio (blanco al 78% + blur) y
     esquinas de 18-20px con sombra lila muy suave.
   - Tres acentos oscurecidos para contraste AA sobre blanco: menta
     #1F9E86 (entra/positivo), orquídea #C4568C (sale/gasto) y periwinkle
     #6C63D8 (transferencia). Oro champán #A5762F para el hito Progresivo.
   - Títulos en Quicksand (redonda, amable) y cifras en Inter: los importes
     siguen en tabulares y no bailan al actualizarse.
   - Sin CRT, sin audio y sin emojis: el encanto viene del color y la forma.
   ========================================================================= */

/* ─── Tokens ─────────────────────────────────────────────────────────── */
body.theme-lilac.light-mode {
  --surface-base: #f7f5fd;
  --surface-raised: #efeafa;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-cell: #efebfa;
  --surface-cell-future: #f3f0fd;
  --surface-cell-past: #e5dff7;
  --text-primary: #2a2340;
  --text-secondary: #6b6389;
  /* Sólido, nunca rgba. Sobre un tema CLARO el margen es mínimo: el secundario
     (#6b6389) ya vive a 4.76:1 sobre --surface-cell, así que un atenuado más
     apagado NO puede pasar AA. Como en Epug-Retro, aquí la jerarquía la dan el
     tamaño y el peso, no más gris. Este valor mide 4.66:1 sobre la celda. */
  --text-muted: #6b6490;
  --text-on-accent: #ffffff;
  --border-subtle: rgba(108, 99, 216, .14);
  --border-medium: rgba(108, 99, 216, .24);
  --accent-turquoise: #1f9e86;
  --accent-fuchsia: #c4568c;
  --accent-lila: #6c63d8;
  --accent-turquoise-text: #157f6b;
  --accent-fuchsia-text: #ae4478;
  --accent-lila-text: #5a50c9;
  --accent-turquoise-bg: rgba(31, 158, 134, .10);
  --accent-fuchsia-bg: rgba(196, 86, 140, .10);
  --accent-lila-bg: rgba(108, 99, 216, .10);
  --accent-turquoise-border: rgba(31, 158, 134, .32);
  --accent-fuchsia-border: rgba(196, 86, 140, .32);
  --accent-lila-border: rgba(108, 99, 216, .32);
  /* Acento amarillo del sistema (Metas: tipo Progresivo): oro champán. */
  --accent-yellow: #a5762f;
  --accent-yellow-text: #8f6524;
  --accent-yellow-bg: rgba(165, 118, 47, .12);
  --accent-yellow-border: rgba(165, 118, 47, .32);
  --pulse-day-glow: #6c63d8;
  /* Botón sólido de flujo: este tema es claro, así que el relleno es un
     escalón más profundo que el acento y la tinta es oscura: verde azulado
     #1f9e86 con #0c0a1a da 5.86:1 y el malva #c4568c 4.71:1. */
  --solid-turquoise: #1f9e86;
  --solid-turquoise-ink: #0c0a1a;
  --solid-fuchsia: #c4568c;
  --solid-fuchsia-ink: #0c0a1a;
  /* Tercer rol (acciones estructurales): el índigo del tema ya es profundo,
     así que aquí la tinta es blanca (4.76:1). */
  --solid-lila: #6c63d8;
  --solid-lila-ink: #ffffff;
  /* Forma de los paneles flotantes (desplegables, tooltips): aireada y con
     sombra lila muy suave. */
  --radius-overlay: 18px;
  --shadow-overlay: 0 18px 40px -18px rgba(60, 45, 110, .28);
  /* Forma del tema: la más aireada del catálogo, sombra lila muy suave. */
  --radius-card: 20px;
  --radius-control: 14px;
  --shadow-card: 0 12px 30px -20px rgba(60, 45, 110, .28);
  --shadow-card-hover: 0 16px 36px -20px rgba(60, 45, 110, .36);
  --glow-rest: 0 0 14px -6px rgba(108, 99, 216, .3);
  --glow-hover: 0 0 20px -6px rgba(108, 99, 216, .4);
  /* Hero de cuenta: es el único tema CLARO, así que la tarjeta con color se
     invierte: superficie lavanda y tinta oscura (#2a2340: 11.8:1 y 12.4:1).
     Con tinta blanca sobre lavanda no habría forma de pasar AA. */
  --surface-hero: #e7e2fb;
  --surface-hero-2: #f4e6f6;
  --text-on-hero: #2a2340;
  --collapse-bg: linear-gradient(180deg, #ffffff 0%, #f8f6fe 100%);
  --collapse-hover: rgba(108, 99, 216, .05);
  color-scheme: light;
}

/* ─── Base: fondo lavado + títulos Quicksand ────────────────────────── */
body.theme-lilac.light-mode,
body.theme-lilac.light-mode #app-view,
body.theme-lilac.light-mode #auth-view {
  background: linear-gradient(165deg, #f8f6fe 0%, #f2eefb 50%, #eae4f8 100%) !important;
}
body.theme-lilac.light-mode h1,
body.theme-lilac.light-mode h2,
body.theme-lilac.light-mode h3,
body.theme-lilac.light-mode .font-display {
  font-family: 'Quicksand', 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
body.theme-lilac.light-mode ::selection {
  background: rgba(108, 99, 216, .22);
  color: #2a2340;
}
body.theme-lilac.light-mode ::-webkit-scrollbar-thumb {
  background: rgba(108, 99, 216, .28);
  border-radius: 999px;
}
body.theme-lilac.light-mode :focus-visible {
  outline: 2px solid rgba(108, 99, 216, .75);
  outline-offset: 2px;
}
/* Ambiente: halos periwinkle y orquídea muy tenues sobre el blanco. */
body.theme-lilac.light-mode #app-ambient {
  background:
    radial-gradient(560px 380px at 8% -6%, rgba(108, 99, 216, .10), transparent 62%),
    radial-gradient(520px 360px at 92% 6%, rgba(196, 86, 140, .07), transparent 60%),
    radial-gradient(440px 320px at 50% 106%, rgba(31, 158, 134, .05), transparent 65%);
}

/* ─── Logo: degradado lavanda (stops oscuros para leer sobre blanco) ── */
body.theme-lilac.light-mode .brand-matic,
body.theme-lilac.light-mode .gradient-title {
  background: linear-gradient(135deg, #6c63d8 0%, #c4568c 55%, #1f9e86 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body.theme-lilac.light-mode #btn-logo-home img {
  filter: drop-shadow(0 6px 14px rgba(108, 99, 216, .28)) !important;
}

/* ─── Tarjetas de vidrio ────────────────────────────────────────────── */
body.theme-lilac.light-mode .neon-card {
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid rgba(108, 99, 216, .16) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px -26px rgba(60, 45, 110, .45) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
}
body.theme-lilac.light-mode .neon-border-brand,
body.theme-lilac.light-mode .neon-border-brand-ring::after {
  background: rgba(255, 255, 255, .78) padding-box !important;
}
body.theme-lilac.light-mode .neon-border-fuchsia { border-color: rgba(196, 86, 140, .35) !important; }
body.theme-lilac.light-mode .neon-border-lila { border-color: rgba(108, 99, 216, .35) !important; }
body.theme-lilac.light-mode .neon-border-turquoise { border-color: rgba(31, 158, 134, .35) !important; }

/* ─── Header + navegación ───────────────────────────────────────────── */
body.theme-lilac.light-mode header {
  background: rgba(255, 255, 255, .82) !important;
  border-bottom: 1px solid rgba(108, 99, 216, .14) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
}
body.theme-lilac.light-mode .nav-dropdown-menu {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(108, 99, 216, .16) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 40px -18px rgba(60, 45, 110, .3) !important;
}
body.theme-lilac.light-mode .nav-btn,
body.theme-lilac.light-mode .nav-dropdown-item,
body.theme-lilac.light-mode .drawer-item {
  border-radius: 14px !important;
  color: #6b6389 !important;
}
body.theme-lilac.light-mode .nav-btn:hover:not([class*="tab-active"]) {
  background: rgba(108, 99, 216, .07) !important;
  color: #2a2340 !important;
}
body.theme-lilac.light-mode .nav-btn[class*="tab-active"],
body.theme-lilac.light-mode .nav-dropdown-item.active-view {
  background: rgba(108, 99, 216, .12) !important;
  color: #5a50c9 !important;
  box-shadow: none !important;
}
body.theme-lilac.light-mode .nav-dropdown-item.active-view .text-txt { color: #5a50c9 !important; }
body.theme-lilac.light-mode #mobile-drawer {
  background: rgba(255, 255, 255, .97) !important;
  border-right: 1px solid rgba(108, 99, 216, .14) !important;
}
body.theme-lilac.light-mode .drawer-item.active-view {
  background: rgba(108, 99, 216, .12) !important;
  color: #5a50c9 !important;
}
body.theme-lilac.light-mode .drawer-item.active-view span:last-child { color: #5a50c9 !important; }
body.theme-lilac.light-mode .profile-pill {
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid rgba(108, 99, 216, .16) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px -12px rgba(60, 45, 110, .5) !important;
}

/* ─── Hero: saldo en periwinkle ─────────────────────────────────────── */
body.theme-lilac.light-mode #hero-balance {
  color: #5a50c9 !important;
  text-shadow: 0 6px 20px rgba(108, 99, 216, .18) !important;
}
body.theme-lilac.light-mode .hero-quick-btn {
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .85) !important;
  border: 1px solid rgba(108, 99, 216, .16) !important;
}
body.theme-lilac.light-mode .hero-quick-btn:hover {
  background: rgba(108, 99, 216, .08) !important;
  border-color: rgba(108, 99, 216, .3) !important;
}
body.theme-lilac.light-mode #hero-btn-ingreso {
  background: linear-gradient(135deg, #6c63d8 0%, #5a50c9 100%) !important;
  border: 1px solid rgba(108, 99, 216, .3) !important;
  color: #ffffff !important;
}
body.theme-lilac.light-mode #hero-btn-ingreso:hover { filter: brightness(1.05); }
body.theme-lilac.light-mode #hero-btn-gasto {
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid rgba(196, 86, 140, .28) !important;
  color: #ae4478 !important;
}
body.theme-lilac.light-mode #hero-btn-transferir {
  background: transparent !important;
  border: 1px solid rgba(31, 158, 134, .4) !important;
  color: #157f6b !important;
}

/* ─── Pulso: celdas claras con acento periwinkle ────────────────────── */
body.theme-lilac.light-mode .pulse-cell {
  border-radius: 12px !important;
  border: 1px solid rgba(108, 99, 216, .12) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
body.theme-lilac.light-mode .pulse-cell-num { color: #6b6389 !important; }
body.theme-lilac.light-mode .pulse-cell.is-today {
  border-color: rgba(108, 99, 216, .45) !important;
  box-shadow: inset 0 0 0 1px rgba(108, 99, 216, .25) !important;
}
body.theme-lilac.light-mode .pulse-cell.selected {
  background: rgba(108, 99, 216, .14) !important;
  border-color: rgba(108, 99, 216, .45) !important;
  box-shadow: none !important;
}
body.theme-lilac.light-mode .pulse-cell.selected .pulse-cell-num,
body.theme-lilac.light-mode .pulse-cell.selected .pulse-cell-plus {
  color: #5a50c9 !important;
}
body.theme-lilac.light-mode .pulse-cell-plus { color: rgba(108, 99, 216, .5) !important; }

/* ─── Colapsable + rizo decorativo (solo forma, sin texto) ──────────── */
body.theme-lilac.light-mode .dashboard-collapse-header {
  border-radius: 16px !important;
  border: 1px solid rgba(108, 99, 216, .14) !important;
}
body.theme-lilac.light-mode .dashboard-collapse-header:hover { background: rgba(108, 99, 216, .05) !important; }
body.theme-lilac.light-mode #dashboard-analysis-body::after {
  content: '';
  display: block;
  height: 2px;
  margin: 14px 4px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(108, 99, 216, .5) 0%, rgba(196, 86, 140, .3) 45%, transparent 100%);
}

/* ─── Inputs ────────────────────────────────────────────────────────── */
body.theme-lilac.light-mode .neon-input {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(108, 99, 216, .2) !important;
  border-radius: 14px !important;
  color: #2a2340 !important;
}
body.theme-lilac.light-mode .neon-input:focus {
  border-color: #6c63d8 !important;
  box-shadow: 0 0 0 3px rgba(108, 99, 216, .18) !important;
}
body.theme-lilac.light-mode .neon-input::placeholder { color: #9a93b5 !important; }
body.theme-lilac.light-mode select.neon-input option,
body.theme-lilac.light-mode select.neon-input optgroup {
  background-color: #ffffff !important;
  color: #2a2340 !important;
}

/* ─── Botones / chips / pestañas ────────────────────────────────────── */
/* La forma la manda el token (--radius-control), no un literal por hoja. */
body.theme-lilac.light-mode button { border-radius: var(--radius-control, 14px) !important; }
body.theme-lilac.light-mode .neon-cta {
  background: linear-gradient(135deg, #6c63d8 0%, #5a50c9 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(108, 99, 216, .28) !important;
  box-shadow: 0 12px 28px -16px rgba(90, 80, 201, .8) !important;
}
body.theme-lilac.light-mode .neon-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 32px -16px rgba(90, 80, 201, .9) !important;
}
body.theme-lilac.light-mode .link-chip {
  border-radius: 999px !important;
  background: rgba(108, 99, 216, .10) !important;
  border-color: rgba(108, 99, 216, .3) !important;
  color: #5a50c9 !important;
  box-shadow: none !important;
}
body.theme-lilac.light-mode .link-chip:hover { filter: brightness(1.05); }
body.theme-lilac.light-mode .link-chip-fuchsia:hover { filter: brightness(1.05); }
body.theme-lilac.light-mode .link-chip-ghost {
  background: rgba(42, 35, 64, .05) !important;
  color: #6b6389 !important;
}
body.theme-lilac.light-mode .tab-active-turquoise {
  background: rgba(31, 158, 134, .12) !important;
  border-color: #1f9e86 !important;
  color: #157f6b !important;
  box-shadow: none !important;
}
body.theme-lilac.light-mode .tab-active-fuchsia {
  background: rgba(196, 86, 140, .12) !important;
  border-color: #c4568c !important;
  color: #ae4478 !important;
  box-shadow: none !important;
}
body.theme-lilac.light-mode .tab-active-lila {
  background: rgba(108, 99, 216, .12) !important;
  border-color: #6c63d8 !important;
  color: #5a50c9 !important;
  box-shadow: none !important;
}

/* ─── Semántica Lilac ───────────────────────────────────────────────── */
body.theme-lilac.light-mode .text-turquoise { color: #157f6b !important; }
body.theme-lilac.light-mode .text-fuchsia { color: #ae4478 !important; }
body.theme-lilac.light-mode .text-lila { color: #5a50c9 !important; }
body.theme-lilac.light-mode .progress-track { background: rgba(108, 99, 216, .12) !important; }
body.theme-lilac.light-mode .progress-fill-fijo { background: linear-gradient(90deg, #6c63d8 0%, #1f9e86 100%) !important; }
body.theme-lilac.light-mode .progress-fill-comp { background: linear-gradient(90deg, #c4568c 0%, #6c63d8 100%) !important; }
body.theme-lilac.light-mode .progress-fill::after { box-shadow: none !important; }

/* ─── Actividad / tablas ───────────────────────────────────────────── */
body.theme-lilac.light-mode .recent-card {
  border-radius: 18px !important;
  border: 1px solid rgba(108, 99, 216, .14) !important;
  background: rgba(255, 255, 255, .9) !important;
}
body.theme-lilac.light-mode .recent-card:hover {
  border-color: rgba(108, 99, 216, .3) !important;
  background: #ffffff !important;
}
body.theme-lilac.light-mode .recent-icon { border-radius: 16px !important; }
body.theme-lilac.light-mode table th { color: #6b6389 !important; }
body.theme-lilac.light-mode table td { color: #2a2340 !important; }
body.theme-lilac.light-mode table tr { border-color: rgba(108, 99, 216, .1) !important; }

/* ─── Splash acorde al tema (F5 nace en lavanda) ─────────────────────── */
body.theme-lilac.light-mode #splash-screen {
  background: linear-gradient(165deg, #f8f6fe 0%, #eae4f8 100%) !important;
}
body.theme-lilac.light-mode #splash-screen img {
  filter: drop-shadow(0 10px 22px rgba(108, 99, 216, .3)) !important;
}
body.theme-lilac.light-mode #splash-screen p { color: #6b6389 !important; }
body.theme-lilac.light-mode #splash-screen .bg-white\/5 { background: rgba(108, 99, 216, .14) !important; }
body.theme-lilac.light-mode #splash-screen [class*="animate-[splashBar"] {
  background: linear-gradient(90deg, #6c63d8 0%, #c4568c 100%) !important;
  box-shadow: none !important;
}

/* ─── Modales / sheets / toast / FABs ──────────────────────────────── */
body.theme-lilac.light-mode .modal-backdrop { background: rgba(42, 35, 64, .38) !important; }
body.theme-lilac.light-mode .sheet {
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(108, 99, 216, .16) !important;
  border-radius: 24px 24px 0 0 !important;
}
body.theme-lilac.light-mode .toast {
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(108, 99, 216, .22) !important;
  border-radius: 18px !important;
  color: #2a2340 !important;
  box-shadow: 0 16px 36px -20px rgba(60, 45, 110, .45) !important;
}
body.theme-lilac.light-mode #btn-fab-add {
  background: linear-gradient(135deg, #6c63d8 0%, #5a50c9 100%) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 30px -16px rgba(90, 80, 201, .85) !important;
}
body.theme-lilac.light-mode #btn-fab-add:hover { filter: brightness(1.05); }
body.theme-lilac.light-mode #btn-fab-voice {
  border-radius: 20px !important;
  background: rgba(196, 86, 140, .1) !important;
  border-color: rgba(196, 86, 140, .3) !important;
  color: #ae4478 !important;
}

/* ─── Misceláneos ──────────────────────────────────────────────────── */
body.theme-lilac.light-mode .glossary-trigger {
  border: 1px solid rgba(108, 99, 216, .28) !important;
  border-radius: 999px !important;
  color: #6b6389 !important;
  background: rgba(255, 255, 255, .9) !important;
}
body.theme-lilac.light-mode .glossary-trigger[aria-expanded="true"] {
  color: #5a50c9 !important;
  border-color: rgba(108, 99, 216, .4) !important;
  background: rgba(108, 99, 216, .1) !important;
}
body.theme-lilac.light-mode .glossary-popover { border-radius: 18px !important; }
body.theme-lilac.light-mode .bubble-mine {
  background: rgba(108, 99, 216, .12) !important;
  border: 1px solid rgba(108, 99, 216, .28) !important;
  border-radius: 20px 20px 8px 20px !important;
  color: #2a2340 !important;
}
body.theme-lilac.light-mode .bubble-theirs {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(108, 99, 216, .16) !important;
  border-radius: 20px 20px 20px 8px !important;
  color: #2a2340 !important;
}
body.theme-lilac.light-mode .skeleton { --skeleton-bg: rgba(108, 99, 216, .10); --skeleton-shimmer: rgba(108, 99, 216, .16); }
body.theme-lilac.light-mode .celebration-card { animation: none !important; }
body.theme-lilac.light-mode .sync-spinner { border-top-color: #6c63d8 !important; }

/* Movimiento reducido: sin animaciones propias */
@media (prefers-reduced-motion: reduce) {
  body.theme-lilac.light-mode * { animation-duration: .01ms !important; }
}