/* =========================================================================
   EPUGMATIC — TEMA TERMINAL PIP-BOY / FALLOUT (solo presentación)
   -------------------------------------------------------------------------
   Hoja aislada: TODAS las reglas viven bajo `body.theme-terminal`, 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 (Pip-Boy auténtico, monocromo total):
   - Fósforo verde #33FF66 sobre negro verdoso #031007. Gastos, deudas y
     alertas TAMBIÉN en verde: la distinción es por brillo/inversión,
     no por color (fiel a Fallout). Cero audio en todo el tema.
   - Tipografías bitmap: VT323 (títulos/cifras) + Share Tech Mono (cuerpo).
   - Corchetes [ ], pestañas en mayúsculas, paneles ASCII, prompt >>,
     barras chunky segmentadas, CRT con scanlines + viñeta + glare.
   ========================================================================= */

/* ─── Tokens ─────────────────────────────────────────────────────────── */
body.theme-terminal {
  --surface-base: #031007;
  --surface-raised: #04140a;
  --surface-card: #04140a;
  --surface-overlay: #051a0d;
  --surface-cell: #04140a;
  --surface-cell-future: rgba(51, 255, 102, .04);
  --surface-cell-past: rgba(51, 255, 102, .08);
  --text-primary: #c9ffd9;
  --text-secondary: #4c8a5f;
  /* Monocromo a propósito: aquí el atenuado NO baja el contraste (4.60:1, el
     mismo que --text-secondary). En una superficie de fósforo verde sobre negro
     no hay margen para un gris más apagado y Fallout tampoco lo tenía: la
     jerarquía la dan el TAMAÑO y el PESO, no el color. */
  --text-muted: #4c8a5f;
  /* Faltaba: sin este token, cualquier relleno de acento (`.onboarding-primary`
     y el CTA del aviso del dashboard) quedaba con texto heredado e ilegible. */
  --text-on-accent: #04140a;
  --border-subtle: rgba(51, 255, 102, .22);
  --border-medium: rgba(51, 255, 102, .38);
  --accent-turquoise: #33ff66;
  --accent-fuchsia: #33ff66;
  --accent-lila: #33ff66;
  --accent-turquoise-text: #33ff66;
  --accent-fuchsia-text: #eafff0;
  --accent-lila-text: #33ff66;
  --accent-turquoise-bg: rgba(51, 255, 102, .07);
  --accent-fuchsia-bg: rgba(51, 255, 102, .07);
  --accent-lila-bg: rgba(51, 255, 102, .07);
  --accent-turquoise-border: rgba(51, 255, 102, .45);
  --accent-fuchsia-border: rgba(51, 255, 102, .45);
  --accent-lila-border: rgba(51, 255, 102, .45);
  /* Acento amarillo del sistema (Metas: tipo Progresivo). Este tema es
     monocromo verde, así que su amarillo es su propio acento. */
  --accent-yellow: #33ff66;
  --accent-yellow-text: #33ff66;
  --accent-yellow-bg: rgba(51, 255, 102, .07);
  --accent-yellow-border: rgba(51, 255, 102, .45);
  --pulse-day-glow: #33ff66;
  /* Botón sólido de flujo: este tema es monocromo, así que entra y sale el
     mismo verde de fósforo. Tinta #031007 (su propio fondo profundo): 14.46:1. */
  --solid-turquoise: #33ff66;
  --solid-turquoise-ink: #031007;
  --solid-fuchsia: #33ff66;
  --solid-fuchsia-ink: #031007;
  --solid-lila: #33ff66;
  --solid-lila-ink: #031007;
  /* Forma de los paneles flotantes (desplegables), calcada de su nav-dropdown. */
  --radius-overlay: 0;
  --shadow-overlay: none;
  /* Forma del tema: el panel es cuadrado (0, como sus controles) y su tarjeta
     conserva los 2px de su `.neon-card`; sin sombra y sin glow (no brilla). */
  --radius-card: 2px;
  --radius-control: 0;
  --shadow-card: none;
  --shadow-card-hover: none;
  --glow-rest: none;
  --glow-hover: none;
  /* Hero de cuenta: dos verdes del fósforo. Tinta #c9ffd9: 14.3:1 y 16.2:1. */
  --surface-hero: #06280f;
  --surface-hero-2: #041a0a;
  --text-on-hero: #c9ffd9;
  --collapse-bg: #04140a;
  --collapse-hover: rgba(51, 255, 102, .05);
  color-scheme: dark;
}

/* ─── Base: fondo + tipografía consola ──────────────────────────────── */
body.theme-terminal,
body.theme-terminal #app-view,
body.theme-terminal #auth-view {
  background: #031007 !important;
}
body.theme-terminal,
body.theme-terminal button,
body.theme-terminal input,
body.theme-terminal select,
body.theme-terminal textarea {
  font-family: 'Share Tech Mono', ui-monospace, Menlo, Consolas, monospace !important;
  letter-spacing: 0 !important;
}
body.theme-terminal h1,
body.theme-terminal h2,
body.theme-terminal h3,
body.theme-terminal .font-display,
body.theme-terminal #hero-balance {
  font-family: 'VT323', 'Share Tech Mono', ui-monospace, monospace !important;
  letter-spacing: .02em !important;
}
body.theme-terminal ::selection {
  background: rgba(51, 255, 102, .4);
  color: #02120a;
}
body.theme-terminal ::-webkit-scrollbar-thumb {
  background: rgba(51, 255, 102, .25);
  border-radius: 0;
}
body.theme-terminal :focus-visible {
  outline: 1px dashed rgba(51, 255, 102, .8);
  outline-offset: 2px;
}

/* ─── CRT: scanlines + viñeta + glare (fijo, sin interceptar) ───────── */
body.theme-terminal::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 38%, rgba(255, 255, 255, .05) 0%, transparent 45%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
body.theme-terminal #app-ambient {
  display: none !important;
}

/* ─── Atajos [N] en la navegación (solo look, vía CSS) ────────────────
   El rótulo de aquí y el mapa TERMINAL_SHORTCUTS de src/main.js son las dos
   mitades de un mismo contrato: un test compara dígito → vista y falla si uno
   se mueve sin el otro. 1 Dashboard · 2 Movimientos · 3 Cuentas & Deudas ·
   4 Calendario · 5 Nuevo movimiento. El desplegable Pugberto Hub se queda sin
   atajo (además su vista era Premium: el 3 abría el paywall a los Free).

   El espacio final de cada `content` separa el rótulo del texto donde el
   destino NO es una fila flex con `gap`: los .link-chip "Ver todo →" y
   "Gestionar" de las vistas también llevan data-view y sin él saldría
   "[2]Ver todo". En las filas del menú ese espacio no pinta nada (el rótulo
   va posicionado en su columna). */
body.theme-terminal [data-view="dashboard"]::before { content: '[1] '; }
body.theme-terminal [data-view="transacciones"]::before { content: '[2] '; }
body.theme-terminal [data-view="banco"]::before { content: '[3] '; }
body.theme-terminal [data-view="calendario"]::before { content: '[4] '; }
body.theme-terminal #btn-header-new-tx::before { content: '[5] '; }

/* ─── El atajo en columna propia + menú dimensionado a contenido ─────
   El rótulo vive FUERA del flujo, en una columna que todas las filas del
   menú reservan por igual: así el icono queda alineado entre filas y ningún
   texto se estrecha por llevar atajo. En línea (dentro del flex) el `[4] `
   dejaba a "CUENTAS & DEUDAS" ~124px cuando necesita ~148px, partía el
   rótulo en dos líneas y esa fila crecía más que el resto. El menú, además,
   toma su ancho del contenido: con el `min-width: 220px` fijo de la base, la
   fila más larga se partía siempre. El tope evita desbordar en ventanas
   estrechas (el panel va centrado sobre su botón). */
body.theme-terminal .nav-dropdown-item {
  position: relative !important;
  padding-left: 2.55rem !important;
}
body.theme-terminal .nav-dropdown-item::before {
  position: absolute;
  left: .7rem;
  top: .55rem;
  color: rgba(51, 255, 102, .55);
  font-size: 11px;
  line-height: 1.25rem;
  pointer-events: none;
}

/* Chip [5] del botón "+": en el cuadrado de 36px el texto se salía del
   círculo. Pasa a ancho automático y cuadrado, como el resto del tema. */
body.theme-terminal #btn-header-new-tx {
  width: auto !important;
  height: 2.25rem !important;
  padding: 0 .55rem !important;
  border-radius: 0 !important;
  gap: .25rem;
}

/* ─── Header / nav / drawer estilo Pip-Boy ──────────────────────────── */
body.theme-terminal header {
  background: #031007 !important;
  border-bottom: 1px solid rgba(51, 255, 102, .35) !important;
}
body.theme-terminal .nav-btn,
body.theme-terminal .nav-dropdown-item,
body.theme-terminal .drawer-item {
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
body.theme-terminal .nav-btn:hover:not([class*="tab-active"]) {
  background: rgba(51, 255, 102, .1) !important;
  color: #33ff66 !important;
}
body.theme-terminal .nav-btn[class*="tab-active"] {
  background: #33ff66 !important;
  color: #02120a !important;
  box-shadow: 0 0 14px rgba(51, 255, 102, .45) !important;
}
body.theme-terminal .nav-dropdown-menu {
  background: #04140a !important;
  border: 1px solid rgba(51, 255, 102, .45) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Ancho según el contenido (con el mínimo de la base, la fila más larga
     se partía en dos líneas) y tope para no salirse en pantallas estrechas. */
  min-width: 232px;
  width: max-content;
  max-width: min(340px, 88vw);
}
body.theme-terminal .nav-dropdown-item.active-view {
  background: #33ff66 !important;
  color: #02120a !important;
}
body.theme-terminal .nav-dropdown-item.active-view .text-txt { color: #02120a !important; }
body.theme-terminal #mobile-drawer {
  background: #031007 !important;
  border-right: 1px solid rgba(51, 255, 102, .35) !important;
}
body.theme-terminal .drawer-item.active-view {
  background: #33ff66 !important;
  color: #02120a !important;
}
body.theme-terminal .drawer-item.active-view span:last-child { color: #02120a !important; }
body.theme-terminal .profile-pill {
  background: transparent !important;
  border: 1px solid rgba(51, 255, 102, .4) !important;
  border-radius: 0 !important;
}

/* ─── Paneles ASCII ─────────────────────────────────────────────────── */
body.theme-terminal .neon-card {
  background: #04140a !important;
  border: 1px solid rgba(51, 255, 102, .4) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
body.theme-terminal .neon-border-brand,
body.theme-terminal .neon-border-brand-ring::after {
  background: #04140a padding-box !important;
}
body.theme-terminal .neon-border-fuchsia { border-color: rgba(51, 255, 102, .55) !important; }
body.theme-terminal .neon-border-turquoise { border-color: rgba(51, 255, 102, .55) !important; }
body.theme-terminal .neon-border-lila { border-color: rgba(51, 255, 102, .55) !important; }

/* ─── Hero consola ──────────────────────────────────────────────────── */
body.theme-terminal #hero-balance {
  font-size: 3.2rem !important;
  color: #33ff66 !important;
  text-shadow: 0 0 8px rgba(51, 255, 102, .8), 0 0 24px rgba(51, 255, 102, .4) !important;
}
body.theme-terminal .hero-quick-btn {
  border-radius: 0 !important;
  background: transparent !important;
  text-transform: uppercase !important;
}
body.theme-terminal #hero-btn-ingreso { border: 1px solid rgba(51, 255, 102, .6) !important; }
body.theme-terminal #hero-btn-gasto { border: 1px solid rgba(51, 255, 102, .6) !important; }
body.theme-terminal #hero-btn-transferir { border: 1px solid rgba(51, 255, 102, .35) !important; }

/* ─── Pulso: grilla [ N ] ──────────────────────────────────────────── */
body.theme-terminal .pulse-cell {
  aspect-ratio: 1;
  border-radius: 0 !important;
  border: 1px solid rgba(51, 255, 102, .28) !important;
  background: transparent !important;
}
body.theme-terminal .pulse-cell-num {
  font-family: 'VT323', monospace !important;
  font-size: 1.1rem !important;
  color: #a9f5c2 !important;
}
body.theme-terminal .pulse-cell.is-today {
  border-color: #33ff66 !important;
  box-shadow: inset 0 0 0 1px rgba(51, 255, 102, .6), 0 0 8px rgba(51, 255, 102, .3) !important;
}
body.theme-terminal .pulse-cell.selected {
  background: #33ff66 !important;
}
body.theme-terminal .pulse-cell.selected .pulse-cell-num,
body.theme-terminal .pulse-cell.selected .pulse-cell-plus {
  color: #02120a !important;
}
body.theme-terminal .pulse-cell-plus { color: rgba(51, 255, 102, .55) !important; }

/* ─── Colapsable + prompt >> ───────────────────────────────────────── */
body.theme-terminal .dashboard-collapse-header {
  border-radius: 0 !important;
  border: 1px solid rgba(51, 255, 102, .4) !important;
}
body.theme-terminal .dashboard-collapse-header:hover { background: rgba(51, 255, 102, .06) !important; }

/* ─── Inputs / selects / textareas ─────────────────────────────────── */
body.theme-terminal .neon-input {
  background: #020b06 !important;
  border: 1px solid rgba(51, 255, 102, .45) !important;
  border-radius: 0 !important;
  color: #c9ffd9 !important;
}
body.theme-terminal .neon-input:focus {
  border-color: #33ff66 !important;
  box-shadow: 0 0 0 1px rgba(51, 255, 102, .45), 0 0 12px rgba(51, 255, 102, .2) !important;
}
body.theme-terminal select.neon-input option,
body.theme-terminal select.neon-input optgroup {
  background-color: #031007 !important;
  color: #c9ffd9 !important;
}

/* ─── Botones / chips / CTAs ───────────────────────────────────────── */
/* La forma la manda el token (--radius-control), no un literal por hoja: así el
   tema conserva su radio (0 aquí) y un cambio de escala es un solo mando. */
body.theme-terminal button { border-radius: var(--radius-control, 0) !important; }
body.theme-terminal .neon-cta {
  background: #33ff66 !important;
  color: #02120a !important;
  border: 1px solid #33ff66 !important;
  box-shadow: 0 0 14px rgba(51, 255, 102, .4) !important;
}
body.theme-terminal .neon-cta:hover {
  filter: none !important;
  background: #7dff9e !important;
}
body.theme-terminal .link-chip {
  border-radius: 0 !important;
  background: transparent !important;
  border-color: rgba(51, 255, 102, .45) !important;
  color: #33ff66 !important;
}
body.theme-terminal .tab-active-turquoise,
body.theme-terminal .tab-active-fuchsia {
  background: #33ff66 !important;
  border-color: #33ff66 !important;
  color: #02120a !important;
}
body.theme-terminal .tab-active-lila {
  background: rgba(51, 255, 102, .15) !important;
  border-color: #33ff66 !important;
  color: #33ff66 !important;
}

/* ─── Monocromo: gastos y alertas en brillo máximo (sin otro color) ── */
body.theme-terminal .text-fuchsia { color: #eafff0 !important; font-weight: 700; }
body.theme-terminal .text-turquoise { color: #33ff66 !important; }
body.theme-terminal .text-lila { color: #8affab !important; }
body.theme-terminal .progress-track { background: rgba(51, 255, 102, .12) !important; }
body.theme-terminal .progress-fill-fijo { background: #33ff66 !important; }
body.theme-terminal .progress-fill-comp { background: #33ff66 !important; }
/* Barras chunky segmentadas estilo Pip-Boy */
body.theme-terminal .progress-fill {
  background-image: repeating-linear-gradient(to right, transparent 0 3px, rgba(2, 18, 10, .55) 3px 5px) !important;
}

/* ─── Actividad / tablas ───────────────────────────────────────────── */
body.theme-terminal .recent-card {
  border-radius: 0 !important;
  border: 1px solid rgba(51, 255, 102, .28) !important;
  background: transparent !important;
}
body.theme-terminal .recent-icon { border-radius: 0 !important; }
body.theme-terminal table th { color: #4c8a5f !important; }
body.theme-terminal table td { color: #c9ffd9 !important; }

/* ─── Modales / sheets / toast / FABs ──────────────────────────────── */
body.theme-terminal .modal-backdrop { background: rgba(1, 6, 3, .9) !important; }
body.theme-terminal .sheet { border-radius: 0 !important; }
body.theme-terminal .sheet-handle { background: rgba(51, 255, 102, .45) !important; }
body.theme-terminal .toast { border-radius: 0 !important; }
body.theme-terminal #btn-fab-add {
  background: #33ff66 !important;
  color: #02120a !important;
  border-radius: 0 !important;
}
body.theme-terminal #btn-fab-voice { border-radius: 0 !important; }

/* ─── Misceláneos ──────────────────────────────────────────────────── */
body.theme-terminal .brand-matic,
body.theme-terminal .gradient-title {
  background: none !important;
  -webkit-text-fill-color: #33ff66 !important;
  color: #33ff66 !important;
}
body.theme-terminal .glossary-trigger {
  border: 1px solid rgba(51, 255, 102, .55) !important;
  border-radius: 0 !important;
}
body.theme-terminal .bubble-mine {
  background: rgba(51, 255, 102, .1) !important;
  border: 1px solid rgba(51, 255, 102, .45) !important;
  border-radius: 0 !important;
}
body.theme-terminal .bubble-theirs {
  background: transparent !important;
  border: 1px solid rgba(51, 255, 102, .22) !important;
  border-radius: 0 !important;
}
body.theme-terminal .skeleton { --skeleton-bg: rgba(51, 255, 102, .08); --skeleton-shimmer: rgba(51, 255, 102, .14); }
body.theme-terminal .celebration-card { animation: none !important; }
body.theme-terminal .sync-spinner { border-top-color: #33ff66 !important; }

/* ═══ BOOT OVERLAY — secuencia de arranque al activar el tema ════════
   #terminal-boot nace oculto (display:none + .hidden). Solo se muestra
   con .is-visible, que pone main.js al elegir Terminal por gesto. Clic
   lo salta. Sin audio, sin bloquear más de ~1.4s. */
#terminal-boot {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #020b06;
  padding: 12vh 8vw;
  font-family: 'VT323', 'Share Tech Mono', ui-monospace, monospace;
  color: #33ff66;
  text-shadow: 0 0 8px rgba(51, 255, 102, .7);
  cursor: pointer;
}
#terminal-boot.is-visible { display: block; }
#terminal-boot .term-boot-line {
  opacity: 0;
  font-size: clamp(1.2rem, 4.5vw, 1.8rem);
  line-height: 1.7;
  white-space: pre-wrap;
  animation: termBootLine .12s steps(1) forwards;
}
#terminal-boot .term-boot-line:nth-child(1) { animation-delay: .05s; }
#terminal-boot .term-boot-line:nth-child(2) { animation-delay: .3s; }
#terminal-boot .term-boot-line:nth-child(3) { animation-delay: .55s; }
#terminal-boot .term-boot-line:nth-child(4) { animation-delay: .8s; }
#terminal-boot .term-boot-cursor::after {
  content: '_';
  animation: termBootBlink .5s steps(1) infinite;
}
@keyframes termBootLine { to { opacity: 1; } }
@keyframes termBootBlink { 50% { opacity: 0; } }

/* ─── Splash acorde al tema (F5 nace en verde, sin flash turquesa) ─── */
body.theme-terminal #splash-screen { background: #031007 !important; }
body.theme-terminal #splash-screen img {
  filter: drop-shadow(0 0 20px rgba(51, 255, 102, .5)) !important;
}
body.theme-terminal #splash-screen p {
  color: #33ff66 !important;
  font-family: 'VT323', 'Share Tech Mono', ui-monospace, monospace !important;
  font-size: 1.1rem !important;
  text-shadow: 0 0 8px rgba(51, 255, 102, .6) !important;
}
body.theme-terminal #splash-screen .bg-white\/5 { background: rgba(51, 255, 102, .1) !important; }
body.theme-terminal #splash-screen [class*="animate-[splashBar"] {
  background: #33ff66 !important;
  box-shadow: 0 0 12px rgba(51, 255, 102, .6) !important;
}

/* Movimiento reducido: CRT estático, boot instantáneo sin animación */
@media (prefers-reduced-motion: reduce) {
  body.theme-terminal::after { background: rgba(0, 0, 0, .14); }
  #terminal-boot .term-boot-line { animation: none; opacity: 1; }
  #terminal-boot .term-boot-cursor::after { animation: none; }
}