/* =========================================================================
   EPUGMATIC — TEMA CYBERPUNK 2077 (solo presentación)
   -------------------------------------------------------------------------
   Hoja aislada: TODAS las reglas viven bajo `body.theme-cyberpunk`, 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 (terminal Arasaka / Militech):
   - Carbón #050505, panel #0B0B09, amarillo eléctrico #FCEE0A (primario),
     cian #00F0FF (ingresos/links/info), rojo #FF003C (gastos/deudas/alertas).
   - Rajdhani (títulos/cifras/nav) + Share Tech Mono (cuerpo).
   - Esquinas biseladas con clip-path SOLO en botones/chips/inputs/cards:
     el clip recorta outlines y desbordes, así que modales, dropdowns y
     popovers llevan solo bordes finos. Cero audio en todo el tema.
   ========================================================================= */

/* ─── Tokens ─────────────────────────────────────────────────────────── */
body.theme-cyberpunk {
  --surface-base: #050505;
  --surface-raised: #0b0b09;
  --surface-card: #0b0b09;
  --surface-overlay: #101009;
  --surface-cell: #0e0e0a;
  --surface-cell-future: rgba(252, 238, 10, .03);
  --surface-cell-past: rgba(252, 238, 10, .06);
  --text-primary: #fff8d6;
  --text-secondary: #8a8570;
  /* Sólido, nunca rgba. #827d69 mide 4.77:1 sobre --surface-card (#0b0b09). */
  --text-muted: #827d69;
  --text-on-accent: #0a0a02;
  --border-subtle: rgba(252, 238, 10, .22);
  --border-medium: rgba(252, 238, 10, .4);
  --accent-turquoise: #00f0ff;
  --accent-fuchsia: #ff003c;
  --accent-lila: #00f0ff;
  --accent-turquoise-text: #00f0ff;
  --accent-fuchsia-text: #ff4d6d;
  --accent-lila-text: #00f0ff;
  --accent-turquoise-bg: rgba(0, 240, 255, .07);
  --accent-fuchsia-bg: rgba(255, 0, 60, .08);
  --accent-lila-bg: rgba(0, 240, 255, .07);
  --accent-turquoise-border: rgba(0, 240, 255, .45);
  --accent-fuchsia-border: rgba(255, 0, 60, .5);
  --accent-lila-border: rgba(0, 240, 255, .45);
  /* Acento amarillo del sistema (Metas: tipo Progresivo): amarillo Arasaka. */
  --accent-yellow: #fcee0a;
  --accent-yellow-text: #fcee0a;
  --accent-yellow-bg: rgba(252, 238, 10, .07);
  --accent-yellow-border: rgba(252, 238, 10, .45);
  --pulse-day-glow: #fcee0a;
  /* Botón sólido de flujo: cian de terminal y rojo Arasaka con tinta #050505
     (su propio negro): 14.37:1 y 5.13:1. */
  --solid-turquoise: #00f0ff;
  --solid-turquoise-ink: #050505;
  --solid-fuchsia: #ff003c;
  --solid-fuchsia-ink: #050505;
  /* El tercer rol (acciones estructurales) es el cian de la casa: 14.47:1. */
  --solid-lila: #00f0ff;
  --solid-lila-ink: #050505;
  /* Forma de los paneles flotantes (desplegables), calcada de su nav-dropdown. */
  --radius-overlay: 0;
  --shadow-overlay: none;
  /* Forma del tema: bisel cuadrado, sin sombra y sin glow (Arasaka no difumina). */
  --radius-card: 0;
  --radius-control: 0;
  --shadow-card: none;
  --shadow-card-hover: none;
  --glow-rest: none;
  --glow-hover: none;
  /* Hero de cuenta: amarillo Arasaka quemado → ocre. Tinta #fff8d6: 9.8:1 y 13:1. */
  --surface-hero: #4a3f05;
  --surface-hero-2: #3a2a00;
  --text-on-hero: #fff8d6;
  --collapse-bg: #0b0b09;
  --collapse-hover: rgba(252, 238, 10, .05);
  color-scheme: dark;
}

/* ─── Base: fondo + cuadrícula + tipografía ─────────────────────────── */
body.theme-cyberpunk,
body.theme-cyberpunk #app-view,
body.theme-cyberpunk #auth-view {
  background-color: #050505 !important;
  background-image:
    linear-gradient(rgba(252, 238, 10, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 238, 10, .028) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}
body.theme-cyberpunk,
body.theme-cyberpunk button,
body.theme-cyberpunk input,
body.theme-cyberpunk select,
body.theme-cyberpunk textarea {
  font-family: 'Share Tech Mono', ui-monospace, Menlo, Consolas, monospace !important;
}
body.theme-cyberpunk h1,
body.theme-cyberpunk h2,
body.theme-cyberpunk h3,
body.theme-cyberpunk .font-display,
body.theme-cyberpunk #hero-balance,
body.theme-cyberpunk .nav-btn {
  font-family: 'Rajdhani', 'Share Tech Mono', sans-serif !important;
  letter-spacing: .04em !important;
}
body.theme-cyberpunk ::selection {
  background: #fcee0a;
  color: #0a0a02;
}
body.theme-cyberpunk ::-webkit-scrollbar-thumb {
  background: rgba(252, 238, 10, .3);
  border-radius: 0;
}
body.theme-cyberpunk :focus-visible {
  outline: 2px solid #fcee0a;
  outline-offset: 2px;
}
body.theme-cyberpunk #app-ambient {
  display: none !important;
}

/* ─── Biselado: botones / chips / inputs / cards ────────────────────── */
body.theme-cyberpunk .neon-card {
  background: #0b0b09 !important;
  border: 1px solid rgba(252, 238, 10, .35) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
}
body.theme-cyberpunk .hero-quick-btn,
body.theme-cyberpunk .link-chip,
body.theme-cyberpunk .neon-input,
body.theme-cyberpunk .neon-cta,
body.theme-cyberpunk #btn-fab-add,
body.theme-cyberpunk #btn-fab-voice {
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
}
body.theme-cyberpunk .neon-border-brand,
body.theme-cyberpunk .neon-border-brand-ring::after {
  background: #0b0b09 padding-box !important;
}
body.theme-cyberpunk .neon-border-fuchsia { border-color: rgba(255, 0, 60, .55) !important; }
body.theme-cyberpunk .neon-border-turquoise,
body.theme-cyberpunk .neon-border-lila { border-color: rgba(0, 240, 255, .5) !important; }

/* ─── Header / nav / drawer ─────────────────────────────────────────── */
body.theme-cyberpunk header {
  background: rgba(5, 5, 5, .96) !important;
  border-bottom: 2px solid #fcee0a !important;
}
body.theme-cyberpunk .nav-btn {
  border-radius: 0 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
body.theme-cyberpunk .nav-btn:hover:not([class*="tab-active"]) {
  background: rgba(252, 238, 10, .1) !important;
  color: #fcee0a !important;
}
body.theme-cyberpunk .nav-btn[class*="tab-active"] {
  background: #fcee0a !important;
  color: #0a0a02 !important;
  box-shadow: 0 0 16px rgba(252, 238, 10, .5) !important;
}
body.theme-cyberpunk .nav-dropdown-menu {
  background: #0b0b09 !important;
  border: 1px solid rgba(252, 238, 10, .45) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.theme-cyberpunk .nav-dropdown-item {
  border-radius: 0 !important;
}
body.theme-cyberpunk .nav-dropdown-item.active-view {
  background: rgba(252, 238, 10, .14) !important;
  color: #fcee0a !important;
}
body.theme-cyberpunk #mobile-drawer {
  background: #050505 !important;
  border-right: 2px solid #fcee0a !important;
}
body.theme-cyberpunk .drawer-item { border-radius: 0 !important; }
body.theme-cyberpunk .drawer-item.active-view {
  background: rgba(252, 238, 10, .12) !important;
  color: #fcee0a !important;
}
body.theme-cyberpunk .drawer-item.active-view span:last-child { color: #fcee0a !important; }
body.theme-cyberpunk .profile-pill {
  background: transparent !important;
  border: 1px solid rgba(252, 238, 10, .4) !important;
  border-radius: 0 !important;
}

/* ─── Marcadores Arasaka // coherentes en secciones ───────────────────
   h2 de todas las vistas + eyebrows (RESUMEN, ACTIVIDAD, PATRIMONIO…) +
   título del colapsable. Vía ::before sobre nodos existentes, sin HTML. */
body.theme-cyberpunk .view h2::before,
body.theme-cyberpunk .view p[class*="tracking-wider"]::before,
body.theme-cyberpunk #dashboard-analysis-toggle .font-display::before {
  content: '// ';
  color: #fcee0a;
}

/* ─── Hero: glitch-in de entrada + neón ─────────────────────────────── */
body.theme-cyberpunk #hero-balance {
  font-size: 3rem !important;
  color: #fcee0a !important;
  text-shadow: 0 0 10px rgba(252, 238, 10, .6), 0 0 32px rgba(252, 238, 10, .25) !important;
  animation: cyberGlitchIn .6s steps(6) !important;
}
@keyframes cyberGlitchIn {
  0% { opacity: 0; transform: translateX(-6px) skewX(-8deg); }
  40% { opacity: 1; transform: translateX(3px) skewX(4deg); }
  70% { transform: translateX(-1px) skewX(0); }
  100% { opacity: 1; transform: none; }
}
body.theme-cyberpunk .hero-quick-btn {
  background: rgba(5, 5, 5, .7) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
body.theme-cyberpunk #hero-btn-ingreso {
  border: 1px solid rgba(0, 240, 255, .65) !important;
  color: #00f0ff !important;
  text-shadow: 0 0 8px rgba(0, 240, 255, .55) !important;
}
body.theme-cyberpunk #hero-btn-gasto {
  border: 1px solid rgba(255, 0, 60, .7) !important;
  color: #ff4d6d !important;
  text-shadow: 0 0 8px rgba(255, 0, 60, .55) !important;
}
body.theme-cyberpunk #hero-btn-transferir {
  border: 1px solid rgba(255, 43, 214, .65) !important;
  color: #ff2bd6 !important;
  text-shadow: 0 0 8px rgba(255, 43, 214, .55) !important;
}

/* ─── Pulso: día seleccionado en amarillo ───────────────────────────── */
body.theme-cyberpunk .pulse-cell {
  aspect-ratio: 1;
  border-radius: 0 !important;
  border: 1px solid rgba(252, 238, 10, .22) !important;
  background: rgba(11, 11, 9, .7) !important;
}
body.theme-cyberpunk .pulse-cell-num {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  color: #e8e2c0 !important;
}
body.theme-cyberpunk .pulse-cell.is-today {
  border-color: #fcee0a !important;
  box-shadow: inset 0 0 0 1px rgba(252, 238, 10, .6), 0 0 10px rgba(252, 238, 10, .3) !important;
}
body.theme-cyberpunk .pulse-cell.selected {
  background: rgba(252, 238, 10, .22) !important;
  border-color: #fcee0a !important;
  box-shadow: inset 0 0 0 1px rgba(252, 238, 10, .7), 0 0 16px rgba(252, 238, 10, .5) !important;
}
body.theme-cyberpunk .pulse-cell.selected .pulse-cell-num,
body.theme-cyberpunk .pulse-cell.selected .pulse-cell-plus {
  color: #fff45a !important;
  text-shadow: 0 0 8px rgba(252, 238, 10, .8) !important;
}
body.theme-cyberpunk .pulse-cell-plus { color: rgba(252, 238, 10, .5) !important; }

/* ─── Colapsable ────────────────────────────────────────────────────── */
body.theme-cyberpunk .dashboard-collapse-header {
  border-radius: 0 !important;
  border: 1px solid rgba(252, 238, 10, .4) !important;
}
body.theme-cyberpunk .dashboard-collapse-header:hover { background: rgba(252, 238, 10, .06) !important; }

/* ─── Inputs / selects ─────────────────────────────────────────────── */
body.theme-cyberpunk .neon-input {
  background: #080806 !important;
  border: 1px solid rgba(252, 238, 10, .4) !important;
  color: #fff8d6 !important;
}
body.theme-cyberpunk .neon-input:focus {
  border-color: #fcee0a !important;
  box-shadow: 0 0 0 1px rgba(252, 238, 10, .5), 0 0 14px rgba(252, 238, 10, .2) !important;
}
body.theme-cyberpunk select.neon-input option,
body.theme-cyberpunk select.neon-input optgroup {
  background-color: #050505 !important;
  color: #fff8d6 !important;
}

/* ─── Botones / CTAs / tabs ─────────────────────────────────────────── */
/* La forma la manda el token (--radius-control), no un literal por hoja. */
body.theme-cyberpunk button { border-radius: var(--radius-control, 0) !important; }
body.theme-cyberpunk .neon-cta {
  background: #fcee0a !important;
  color: #0a0a02 !important;
  border: 1px solid #fcee0a !important;
  box-shadow: 0 0 16px rgba(252, 238, 10, .45) !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}
body.theme-cyberpunk .neon-cta:hover {
  filter: none !important;
  background: #fff45a !important;
}
body.theme-cyberpunk .link-chip {
  background: transparent !important;
  border-color: rgba(0, 240, 255, .45) !important;
  color: #00f0ff !important;
}
body.theme-cyberpunk .tab-active-turquoise {
  background: #00f0ff !important;
  border-color: #00f0ff !important;
  color: #021014 !important;
}
body.theme-cyberpunk .tab-active-fuchsia {
  background: #ff003c !important;
  border-color: #ff003c !important;
  color: #fff !important;
}
body.theme-cyberpunk .tab-active-lila {
  background: rgba(0, 240, 255, .14) !important;
  border-color: #00f0ff !important;
  color: #00f0ff !important;
}

/* ─── Semántica: cian ingresos · rojo gastos ────────────────────────── */
body.theme-cyberpunk .text-turquoise { color: #00f0ff !important; }
body.theme-cyberpunk .text-fuchsia { color: #ff4d6d !important; }
body.theme-cyberpunk .text-lila { color: #00f0ff !important; }
body.theme-cyberpunk .progress-fill-fijo { background: #fcee0a !important; }
body.theme-cyberpunk .progress-fill-comp { background: linear-gradient(90deg, #fcee0a 0%, #ff003c 100%) !important; }

/* ─── Actividad / tablas ───────────────────────────────────────────── */
body.theme-cyberpunk .recent-card {
  border-radius: 0 !important;
  border: 1px solid rgba(252, 238, 10, .25) !important;
  background: rgba(11, 11, 9, .7) !important;
}
body.theme-cyberpunk .recent-icon { border-radius: 0 !important; }
body.theme-cyberpunk table th { color: #8a8570 !important; }
body.theme-cyberpunk table td { color: #fff8d6 !important; }

/* ─── Modales / sheets / toast / FABs (sin clip: hay popovers) ─────── */
body.theme-cyberpunk .modal-backdrop { background: rgba(3, 3, 2, .88) !important; }
body.theme-cyberpunk .modal-backdrop .neon-card { border-color: #fcee0a !important; }
body.theme-cyberpunk .sheet { border-radius: 0 !important; }
body.theme-cyberpunk .sheet-handle { background: rgba(252, 238, 10, .45) !important; }
body.theme-cyberpunk .toast { border-radius: 0 !important; }
body.theme-cyberpunk #btn-fab-add {
  background: #fcee0a !important;
  color: #0a0a02 !important;
}
body.theme-cyberpunk #btn-fab-voice { border: 1px solid #fcee0a !important; }

/* ─── Misceláneos ──────────────────────────────────────────────────── */
body.theme-cyberpunk .brand-matic,
body.theme-cyberpunk .gradient-title {
  background: none !important;
  -webkit-text-fill-color: #fcee0a !important;
  color: #fcee0a !important;
}
body.theme-cyberpunk .glossary-trigger {
  border: 1px solid rgba(252, 238, 10, .55) !important;
  border-radius: 0 !important;
}
body.theme-cyberpunk .bubble-mine {
  background: rgba(252, 238, 10, .07) !important;
  border: 1px solid rgba(252, 238, 10, .4) !important;
  border-radius: 0 !important;
}
body.theme-cyberpunk .bubble-theirs {
  background: transparent !important;
  border: 1px solid rgba(252, 238, 10, .2) !important;
  border-radius: 0 !important;
}
body.theme-cyberpunk .skeleton { --skeleton-bg: rgba(252, 238, 10, .07); --skeleton-shimmer: rgba(252, 238, 10, .12); }
body.theme-cyberpunk .celebration-card { animation: none !important; }
body.theme-cyberpunk .sync-spinner { border-top-color: #fcee0a !important; }
/* Sorpresa: la zona de peligro viste hazard en este tema */
body.theme-cyberpunk .neon-border-fuchsia {
  border: 1px solid #ff003c !important;
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(252, 238, 10, .05) 14px 28px) !important;
}

/* ─── Splash acorde al tema (F5 nace en amarillo, sin flash turquesa) */
body.theme-cyberpunk #splash-screen { background: #050505 !important; }
body.theme-cyberpunk #splash-screen img {
  filter: drop-shadow(0 0 20px rgba(252, 238, 10, .55)) !important;
}
body.theme-cyberpunk #splash-screen p {
  color: #fcee0a !important;
  font-family: 'Rajdhani', 'Share Tech Mono', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px rgba(252, 238, 10, .5) !important;
}
body.theme-cyberpunk #splash-screen .bg-white\/5 { background: rgba(252, 238, 10, .12) !important; }
body.theme-cyberpunk #splash-screen [class*="animate-[splashBar"] {
  background: #fcee0a !important;
  box-shadow: 0 0 12px rgba(252, 238, 10, .6) !important;
}

/* Movimiento reducido: sin glitch de entrada */
@media (prefers-reduced-motion: reduce) {
  body.theme-cyberpunk #hero-balance { animation: none !important; }
}