/* =========================================================================
   EPUGMATIC — TEMA PUGBERKAI / MONOKAI PRO (solo presentación)
   -------------------------------------------------------------------------
   Hoja aislada: TODAS las reglas viven bajo `body.theme-monokai`, así que
   con el tema inactivo esta hoja no cambia ni un píxel. No contiene JS,
   ni referencias a Supabase/store/cálculos: pura apariencia.

   Dirección de arte (editor Monokai Pro, fiel):
   - Pizarra #272822, tarjetas #383539, texto #FCFCFA, menta #A9DC76
     (rejilla/secundarios), ámbar #FFD866 (activo/ingresos), violeta
     #AB9DF2 (gasto/secundario). Esquinas rectas, JetBrains Mono en cifras
     y calendario. Sin CRT, sin audio.
   ========================================================================= */

/* ─── Tokens ─────────────────────────────────────────────────────────── */
body.theme-monokai {
  --surface-base: #272822;
  --surface-raised: #2d2a2e;
  --surface-card: #383539;
  --surface-overlay: #3e3b40;
  --surface-cell: #383539;
  --surface-cell-future: rgba(169, 220, 118, .04);
  --surface-cell-past: rgba(169, 220, 118, .07);
  --text-primary: #fcfcfa;
  --text-secondary: #a9dc76;
  /* Sólido, nunca rgba: el atenuado con alfa se componía dos veces al anidarse.
     #8fbb63 mide 5.44:1 sobre --surface-card (#383539). */
  --text-muted: #8fbb63;
  --text-on-accent: #272822;
  --border-subtle: rgba(252, 252, 250, .1);
  --border-medium: rgba(252, 252, 250, .16);
  --accent-turquoise: #ffd866;
  --accent-fuchsia: #ab9df2;
  --accent-lila: #ab9df2;
  --accent-turquoise-text: #ffd866;
  --accent-fuchsia-text: #c4b7f5;
  --accent-lila-text: #c4b7f5;
  --accent-turquoise-bg: rgba(255, 216, 102, .1);
  --accent-fuchsia-bg: rgba(171, 157, 242, .12);
  --accent-lila-bg: rgba(171, 157, 242, .12);
  --accent-turquoise-border: rgba(255, 216, 102, .45);
  --accent-fuchsia-border: rgba(171, 157, 242, .45);
  --accent-lila-border: rgba(171, 157, 242, .45);
  /* Acento amarillo del sistema (Metas: tipo Progresivo): ámbar Monokai. */
  --accent-yellow: #ffd866;
  --accent-yellow-text: #ffd866;
  --accent-yellow-bg: rgba(255, 216, 102, .1);
  --accent-yellow-border: rgba(255, 216, 102, .45);
  --pulse-day-glow: #ffd866;
  /* Botón sólido de flujo: ámbar y lavanda Monokai con tinta #272822 (su
     propio fondo): 10.81:1 y 6.25:1. */
  --solid-turquoise: #ffd866;
  --solid-turquoise-ink: #272822;
  --solid-fuchsia: #ab9df2;
  --solid-fuchsia-ink: #272822;
  --solid-lila: #ab9df2;
  --solid-lila-ink: #272822;
  /* Forma de los paneles flotantes (desplegables), calcada de su nav-dropdown. */
  --radius-overlay: 2px;
  --shadow-overlay: none;
  /* Forma del tema: esquinas de 2px, sin sombra ni glow (Monokai no brilla). */
  --radius-card: 2px;
  --radius-control: 2px;
  --shadow-card: none;
  --shadow-card-hover: none;
  --glow-rest: none;
  --glow-hover: none;
  /* Hero de cuenta: ámbar Monokai → violeta. Tinta #fcfcfa: 10.7:1 y 12.8:1. */
  --surface-hero: #4a3a10;
  --surface-hero-2: #3a2a45;
  --text-on-hero: #fcfcfa;
  --collapse-bg: #383539;
  --collapse-hover: rgba(255, 216, 102, .06);
  color-scheme: dark;
}

/* ─── Base: pizarra + JetBrains Mono ────────────────────────────────── */
body.theme-monokai,
body.theme-monokai #app-view,
body.theme-monokai #auth-view {
  background: #272822 !important;
}
body.theme-monokai,
body.theme-monokai button,
body.theme-monokai input,
body.theme-monokai select,
body.theme-monokai textarea {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace !important;
}
body.theme-monokai h1,
body.theme-monokai h2,
body.theme-monokai h3,
body.theme-monokai .font-display,
body.theme-monokai #hero-balance,
body.theme-monokai .pulse-cell-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
body.theme-monokai ::selection {
  background: rgba(255, 216, 102, .4);
  color: #272822;
}
body.theme-monokai ::-webkit-scrollbar-thumb {
  background: #57544a;
  border-radius: 2px;
}
body.theme-monokai :focus-visible {
  outline: 2px solid #ffd866;
  outline-offset: 2px;
}
body.theme-monokai #app-ambient {
  display: none !important;
}

/* ─── Logo: mono blanco + nube menta ────────────────────────────────── */
body.theme-monokai .brand-matic,
body.theme-monokai .gradient-title {
  background: none !important;
  -webkit-text-fill-color: #fcfcfa !important;
  color: #fcfcfa !important;
}
body.theme-monokai #btn-logo-home img {
  filter: drop-shadow(0 0 10px rgba(169, 220, 118, .55)) !important;
}

/* ─── Paneles de editor: rectos y sobrios ───────────────────────────── */
body.theme-monokai .neon-card {
  background: #383539 !important;
  border: 1px solid rgba(252, 252, 250, .1) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
body.theme-monokai .neon-border-brand,
body.theme-monokai .neon-border-brand-ring::after {
  background: #383539 padding-box !important;
}
body.theme-monokai .neon-border-fuchsia { border-color: rgba(171, 157, 242, .5) !important; }
body.theme-monokai .neon-border-turquoise,
body.theme-monokai .neon-border-lila { border-color: rgba(255, 216, 102, .45) !important; }
body.theme-monokai header {
  background: #2d2a2e !important;
  border-bottom: 1px solid rgba(252, 252, 250, .1) !important;
}
body.theme-monokai .nav-dropdown-menu {
  background: #383539 !important;
  border: 1px solid rgba(252, 252, 250, .14) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
body.theme-monokai .nav-btn,
body.theme-monokai .nav-dropdown-item,
body.theme-monokai .drawer-item {
  border-radius: 2px !important;
}
body.theme-monokai .nav-btn:hover:not([class*="tab-active"]) {
  background: rgba(255, 216, 102, .08) !important;
  color: #ffd866 !important;
}
body.theme-monokai .nav-btn[class*="tab-active"],
body.theme-monokai .nav-dropdown-item.active-view {
  background: rgba(255, 216, 102, .14) !important;
  color: #ffd866 !important;
  box-shadow: none !important;
}
body.theme-monokai .nav-dropdown-item.active-view .text-txt { color: #ffd866 !important; }
body.theme-monokai #mobile-drawer {
  background: #2d2a2e !important;
  border-right: 1px solid rgba(252, 252, 250, .1) !important;
}
body.theme-monokai .drawer-item.active-view {
  background: rgba(255, 216, 102, .12) !important;
  color: #ffd866 !important;
}
body.theme-monokai .drawer-item.active-view span:last-child { color: #ffd866 !important; }
body.theme-monokai .profile-pill {
  background: rgba(252, 252, 250, .04) !important;
  border: 1px solid rgba(252, 252, 250, .1) !important;
  border-radius: 2px !important;
}

/* ─── Hero de editor ────────────────────────────────────────────────── */
body.theme-monokai #hero-balance {
  font-size: 2.6rem !important;
  color: #ffd866 !important;
  text-shadow: none !important;
}
body.theme-monokai .hero-quick-btn {
  border-radius: 2px !important;
  background: rgba(252, 252, 250, .04) !important;
}
body.theme-monokai #hero-btn-ingreso {
  border: 1px solid rgba(255, 216, 102, .55) !important;
  color: #ffd866 !important;
}
body.theme-monokai #hero-btn-gasto {
  border: 1px solid rgba(171, 157, 242, .55) !important;
  color: #c4b7f5 !important;
}
body.theme-monokai #hero-btn-transferir { border: 1px solid rgba(169, 220, 118, .45) !important; }

/* ─── Pulso: celdas de editor, seleccionado ámbar ───────────────────── */
body.theme-monokai .pulse-cell {
  aspect-ratio: 1;
  border-radius: 2px !important;
  border: 1px solid rgba(252, 252, 250, .08) !important;
  background: #2d2a2e !important;
  box-shadow: none !important;
}
body.theme-monokai .pulse-cell-num {
  font-size: 1rem !important;
  color: #a9dc76 !important;
}
body.theme-monokai .pulse-cell.is-today {
  border-color: #a9dc76 !important;
  box-shadow: inset 0 0 0 1px rgba(169, 220, 118, .5) !important;
}
body.theme-monokai .pulse-cell.selected {
  background: #ffd866 !important;
  border-color: #ffd866 !important;
  box-shadow: none !important;
}
body.theme-monokai .pulse-cell.selected .pulse-cell-num,
body.theme-monokai .pulse-cell.selected .pulse-cell-plus {
  color: #272822 !important;
}
body.theme-monokai .pulse-cell-plus { color: rgba(169, 220, 118, .5) !important; }

/* ─── Colapsable ────────────────────────────────────────────────────── */
body.theme-monokai .dashboard-collapse-header {
  border-radius: 2px !important;
  border: 1px solid rgba(252, 252, 250, .1) !important;
}
body.theme-monokai .dashboard-collapse-header:hover { background: rgba(255, 216, 102, .05) !important; }
/* Tira de estado del sistema al cierre del análisis (solo look, vía CSS) */
body.theme-monokai #dashboard-analysis-body::after {
  content: '// ESTADO DEL SISTEMA: NOMINAL';
  display: block;
  padding: 10px 4px 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: #a9dc76;
}

/* ─── Inputs / selects ─────────────────────────────────────────────── */
body.theme-monokai .neon-input {
  background: #2d2a2e !important;
  border: 1px solid rgba(252, 252, 250, .14) !important;
  border-radius: 2px !important;
  color: #fcfcfa !important;
}
body.theme-monokai .neon-input:focus {
  border-color: #ffd866 !important;
  box-shadow: 0 0 0 2px rgba(255, 216, 102, .2) !important;
}
body.theme-monokai select.neon-input option,
body.theme-monokai select.neon-input optgroup {
  background-color: #272822 !important;
  color: #fcfcfa !important;
}

/* ─── Botones / chips / tabs ────────────────────────────────────────── */
/* La forma la manda el token (--radius-control), no un literal por hoja. */
body.theme-monokai button { border-radius: var(--radius-control, 2px) !important; }
body.theme-monokai .neon-cta {
  background: #ffd866 !important;
  color: #272822 !important;
  border: none !important;
  box-shadow: none !important;
}
body.theme-monokai .neon-cta:hover { filter: brightness(1.08) !important; box-shadow: none !important; }
body.theme-monokai .link-chip {
  border-radius: 2px !important;
  background: rgba(169, 220, 118, .08) !important;
  border-color: rgba(169, 220, 118, .3) !important;
  color: #a9dc76 !important;
  box-shadow: none !important;
}
body.theme-monokai .link-chip-ghost {
  background: rgba(252, 252, 250, .04) !important;
  color: #a9dc76 !important;
}
body.theme-monokai .tab-active-turquoise {
  background: rgba(255, 216, 102, .14) !important;
  border-color: #ffd866 !important;
  color: #ffd866 !important;
  box-shadow: none !important;
}
body.theme-monokai .tab-active-fuchsia {
  background: rgba(171, 157, 242, .14) !important;
  border-color: #ab9df2 !important;
  color: #c4b7f5 !important;
  box-shadow: none !important;
}
body.theme-monokai .tab-active-lila {
  background: rgba(171, 157, 242, .14) !important;
  border-color: #ab9df2 !important;
  color: #c4b7f5 !important;
  box-shadow: none !important;
}

/* ─── Semántica Monokai ─────────────────────────────────────────────── */
body.theme-monokai .text-turquoise { color: #ffd866 !important; }
body.theme-monokai .text-fuchsia { color: #c4b7f5 !important; }
body.theme-monokai .text-lila { color: #c4b7f5 !important; }
body.theme-monokai .progress-track { background: rgba(252, 252, 250, .08) !important; }
body.theme-monokai .progress-fill-fijo { background: #a9dc76 !important; }
body.theme-monokai .progress-fill-comp { background: linear-gradient(90deg, #ffd866 0%, #ab9df2 100%) !important; }
body.theme-monokai .progress-fill::after { display: none !important; }

/* ─── Actividad / tablas ───────────────────────────────────────────── */
body.theme-monokai .recent-card {
  border-radius: 2px !important;
  border: 1px solid rgba(252, 252, 250, .08) !important;
  background: #2d2a2e !important;
}
body.theme-monokai .recent-card:hover {
  border-color: rgba(255, 216, 102, .4) !important;
  background: #2d2a2e !important;
}
body.theme-monokai .recent-icon { border-radius: 2px !important; }
body.theme-monokai table th { color: #a9dc76 !important; }
body.theme-monokai table td { color: #fcfcfa !important; }

/* ─── Splash acorde al tema (F5 nace en pizarra) ────────────────────── */
body.theme-monokai #splash-screen { background: #272822 !important; }
body.theme-monokai #splash-screen img {
  filter: drop-shadow(0 0 16px rgba(169, 220, 118, .4)) !important;
}
body.theme-monokai #splash-screen p {
  color: #a9dc76 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
body.theme-monokai #splash-screen .bg-white\/5 { background: rgba(252, 252, 250, .08) !important; }
body.theme-monokai #splash-screen [class*="animate-[splashBar"] {
  background: #ffd866 !important;
  box-shadow: none !important;
}

/* ─── Modales / sheets / toast / FABs ──────────────────────────────── */
body.theme-monokai .modal-backdrop { background: rgba(20, 19, 21, .8) !important; }
body.theme-monokai .sheet { border-radius: 2px 2px 0 0 !important; }
body.theme-monokai .toast { border-radius: 2px !important; }
body.theme-monokai #btn-fab-add {
  background: #ffd866 !important;
  color: #272822 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
body.theme-monokai #btn-fab-voice { border-radius: 2px !important; }

/* ─── Misceláneos ──────────────────────────────────────────────────── */
body.theme-monokai .glossary-trigger {
  border: 1px solid rgba(169, 220, 118, .4) !important;
  border-radius: 2px !important;
}
body.theme-monokai .bubble-mine {
  background: rgba(255, 216, 102, .08) !important;
  border: 1px solid rgba(255, 216, 102, .3) !important;
  border-radius: 2px !important;
}
body.theme-monokai .bubble-theirs {
  background: rgba(252, 252, 250, .04) !important;
  border: 1px solid rgba(252, 252, 250, .1) !important;
  border-radius: 2px !important;
}
body.theme-monokai .skeleton { --skeleton-bg: rgba(252, 252, 250, .05); --skeleton-shimmer: rgba(252, 252, 250, .09); }
body.theme-monokai .celebration-card { animation: none !important; }
body.theme-monokai .sync-spinner { border-top-color: #ffd866 !important; }

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