/* =========================================================================
   EPUGMATIC — TEMA APPLE MINIMALISTA / DARK (solo presentación)
   -------------------------------------------------------------------------
   Hoja aislada: TODAS las reglas viven bajo `body.theme-apple`, 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 (Human Interface Guidelines, dark):
   - Grises espaciales #0A0A0C / #161619, texto #FFFFFF/#F5F5F7, secundarios
     #86868B, acento azul sistema #0A84FF, ingresos #30D158, gastos #FF453A.
   - Vidrio esmerilado en contenedores (header/cards/dropdowns/modales):
     backdrop-filter blur(20px) saturate(180%) + prefijo -webkit- (Safari).
     La grilla del pulso y las tablas quedan planas a propósito (costo GPU).
   - Radios generosos, tipografía Inter en todo, cero neón, sombras suaves.
   - Cero audio en todo el tema.
   ========================================================================= */

/* ─── Tokens ─────────────────────────────────────────────────────────── */
body.theme-apple {
  --surface-base: #0a0a0c;
  --surface-raised: #161619;
  --surface-card: #161619;
  --surface-overlay: #1c1c1f;
  --surface-cell: #1c1c1f;
  --surface-cell-future: rgba(255, 255, 255, .03);
  --surface-cell-past: rgba(255, 255, 255, .05);
  --text-primary: #ffffff;
  --text-secondary: #86868b;
  /* Sólido, nunca rgba. #84848b mide 4.86:1 sobre --surface-card (#161619) y
     4.58:1 sobre --surface-cell (#1c1c1f, el peor caso). El gris anterior
     (#82828a) se quedaba en 4.46:1 sobre la celda: era el único par de un tema
     oscuro que no llegaba a AA y lo cazó tests/contrastAudit.test.mjs. */
  --text-muted: #84848b;
  --text-on-accent: #ffffff;
  --border-subtle: rgba(255, 255, 255, .08);
  --border-medium: rgba(255, 255, 255, .12);
  --accent-turquoise: #30d158;
  --accent-fuchsia: #ff453a;
  --accent-lila: #0a84ff;
  --accent-turquoise-text: #30d158;
  --accent-fuchsia-text: #ff6961;
  --accent-lila-text: #409cff;
  --accent-turquoise-bg: rgba(48, 209, 88, .12);
  --accent-fuchsia-bg: rgba(255, 69, 58, .12);
  --accent-lila-bg: rgba(10, 132, 255, .14);
  --accent-turquoise-border: rgba(48, 209, 88, .3);
  --accent-fuchsia-border: rgba(255, 69, 58, .32);
  --accent-lila-border: rgba(10, 132, 255, .35);
  /* Acento amarillo del sistema (Metas: tipo Progresivo). */
  --accent-yellow: #ffd60a;
  --accent-yellow-text: #ffd60a;
  --accent-yellow-bg: rgba(255, 214, 10, .12);
  --accent-yellow-border: rgba(255, 214, 10, .32);
  --pulse-day-glow: #0a84ff;
  /* Botón sólido de flujo: verde y rojo del sistema con tinta #0a0a0c (su
     propio fondo mate): 9.78:1 y 5.81:1. Sobre estos dos acentos el blanco
     daba 2.02:1 y 3.41:1, así que la tinta clara no era una opción. */
  --solid-turquoise: #30d158;
  --solid-turquoise-ink: #0a0a0c;
  --solid-fuchsia: #ff453a;
  --solid-fuchsia-ink: #0a0a0c;
  /* Tercer rol (acciones estructurales): azul del sistema, 5.42:1. */
  --solid-lila: #0a84ff;
  --solid-lila-ink: #0a0a0c;
  /* Forma de los paneles flotantes (desplegables), calcada de su nav-dropdown. */
  --radius-overlay: 16px;
  --shadow-overlay: 0 16px 40px -12px rgba(0, 0, 0, .6);
  /* Forma del tema: radios generosos (su `.neon-card` ya usa 22px), sombras
     suaves y cero neón (HIG). */
  --radius-card: 22px;
  --radius-control: 12px;
  --shadow-card: 0 10px 30px -18px rgba(0, 0, 0, .6);
  --shadow-card-hover: 0 14px 36px -18px rgba(0, 0, 0, .7);
  --glow-rest: 0 0 14px -6px rgba(10, 132, 255, .45);
  --glow-hover: 0 0 20px -6px rgba(10, 132, 255, .55);
  /* Hero de cuenta: azul sistema → índigo. Tinta #ffffff: 13.5:1 y 17.7:1. */
  --surface-hero: #0a2f57;
  --surface-hero-2: #1b1236;
  --text-on-hero: #ffffff;
  --collapse-bg: #161619;
  --collapse-hover: rgba(255, 255, 255, .04);
  color-scheme: dark;
}

/* ─── Base: fondo mate + Inter en todo ──────────────────────────────── */
body.theme-apple,
body.theme-apple #app-view,
body.theme-apple #auth-view {
  background: #0a0a0c !important;
}
body.theme-apple,
body.theme-apple button,
body.theme-apple input,
body.theme-apple select,
body.theme-apple textarea,
body.theme-apple h1,
body.theme-apple h2,
body.theme-apple h3,
body.theme-apple .font-display {
  font-family: 'Inter', -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif !important;
  letter-spacing: -0.01em !important;
}
body.theme-apple #hero-balance {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}
body.theme-apple ::selection {
  background: rgba(10, 132, 255, .4);
  color: #fff;
}
body.theme-apple ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: 8px;
}
body.theme-apple :focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
}
body.theme-apple #app-ambient {
  display: none !important;
}

/* ─── Vidrio: header / cards / menús / modales ──────────────────────── */
body.theme-apple header {
  background: rgba(16, 16, 20, .72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
body.theme-apple .neon-card {
  background: rgba(22, 22, 25, .6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .55) !important;
}
body.theme-apple .neon-border-brand,
body.theme-apple .neon-border-brand-ring::after,
body.theme-apple .neon-border-fuchsia,
body.theme-apple .neon-border-turquoise,
body.theme-apple .neon-border-lila {
  border-color: rgba(255, 255, 255, .12) !important;
}
body.theme-apple .nav-dropdown-menu,
body.theme-apple #profile-dropdown,
body.theme-apple #header-xp-popover {
  background: rgba(28, 28, 31, .78) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6) !important;
}
body.theme-apple .nav-dropdown-item,
body.theme-apple .nav-btn,
body.theme-apple .drawer-item {
  border-radius: 12px !important;
}
body.theme-apple .nav-btn:hover:not([class*="tab-active"]) {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
}
body.theme-apple .nav-btn[class*="tab-active"],
body.theme-apple .nav-dropdown-item.active-view,
body.theme-apple .drawer-item.active-view {
  background: rgba(10, 132, 255, .18) !important;
  color: #409cff !important;
  box-shadow: none !important;
}
body.theme-apple .nav-dropdown-item.active-view .text-txt { color: #409cff !important; }
body.theme-apple .drawer-item.active-view span:last-child { color: #409cff !important; }
body.theme-apple #mobile-drawer {
  background: rgba(16, 16, 20, .85) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
}
body.theme-apple .profile-pill {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 16px !important;
}
body.theme-apple .modal-backdrop {
  background: rgba(5, 5, 8, .55) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* ─── Hero limpio ───────────────────────────────────────────────────── */
body.theme-apple #hero-balance {
  font-size: 2.6rem !important;
  color: #fff !important;
}
body.theme-apple .hero-quick-btn {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  color: #f5f5f7 !important;
  transition: background .2s ease, transform .12s ease !important;
}
body.theme-apple .hero-quick-btn:hover { background: rgba(255, 255, 255, .1) !important; }
body.theme-apple #hero-btn-ingreso { color: #30d158 !important; }
body.theme-apple #hero-btn-gasto { color: #ff6961 !important; }

/* ─── Pulso plano ───────────────────────────────────────────────────── */
body.theme-apple .pulse-cell {
  aspect-ratio: 1;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
}
body.theme-apple .pulse-cell-num {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: #c7c7cc !important;
}
body.theme-apple .pulse-cell.is-today {
  border-color: #0a84ff !important;
  box-shadow: 0 0 0 1px rgba(10, 132, 255, .5) !important;
}
body.theme-apple .pulse-cell.selected {
  background: #0a84ff !important;
  box-shadow: 0 4px 14px -4px rgba(10, 132, 255, .6) !important;
}
body.theme-apple .pulse-cell.selected .pulse-cell-num,
body.theme-apple .pulse-cell.selected .pulse-cell-plus {
  color: #fff !important;
}
body.theme-apple .pulse-cell-plus { color: rgba(255, 255, 255, .35) !important; }

/* ─── Colapsable ────────────────────────────────────────────────────── */
body.theme-apple .dashboard-collapse-header {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
}
body.theme-apple .dashboard-collapse-header:hover { background: rgba(255, 255, 255, .05) !important; }

/* ─── Inputs ───────────────────────────────────────────────────────── */
body.theme-apple .neon-input {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
body.theme-apple .neon-input:focus {
  border-color: #0a84ff !important;
  background: rgba(255, 255, 255, .07) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .25) !important;
}
body.theme-apple select.neon-input option,
body.theme-apple select.neon-input optgroup {
  background-color: #1c1c1f !important;
  color: #fff !important;
}

/* ─── Botones / CTAs / tabs ─────────────────────────────────────────── */
body.theme-apple .neon-cta {
  background: #0a84ff !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px -6px rgba(10, 132, 255, .55) !important;
  transition: filter .2s ease, transform .12s ease !important;
}
body.theme-apple .neon-cta:hover { filter: brightness(1.12) !important; box-shadow: 0 8px 22px -6px rgba(10, 132, 255, .6) !important; }
body.theme-apple .link-chip {
  border-radius: 999px !important;
  background: rgba(10, 132, 255, .14) !important;
  border-color: transparent !important;
  color: #409cff !important;
  box-shadow: none !important;
}
body.theme-apple .link-chip-ghost {
  background: rgba(255, 255, 255, .06) !important;
  color: #86868b !important;
}
body.theme-apple .tab-active-turquoise {
  background: rgba(48, 209, 88, .14) !important;
  border-color: rgba(48, 209, 88, .4) !important;
  color: #30d158 !important;
  box-shadow: none !important;
}
body.theme-apple .tab-active-fuchsia {
  background: rgba(255, 69, 58, .14) !important;
  border-color: rgba(255, 69, 58, .4) !important;
  color: #ff6961 !important;
  box-shadow: none !important;
}
body.theme-apple .tab-active-lila {
  background: rgba(10, 132, 255, .16) !important;
  border-color: rgba(10, 132, 255, .4) !important;
  color: #409cff !important;
  box-shadow: none !important;
}

/* ─── Semántica sistema ─────────────────────────────────────────────── */
body.theme-apple .text-turquoise { color: #30d158 !important; }
body.theme-apple .text-fuchsia { color: #ff6961 !important; }
body.theme-apple .text-lila { color: #409cff !important; }
body.theme-apple .progress-track { background: rgba(255, 255, 255, .08) !important; }
body.theme-apple .progress-fill-fijo { background: #0a84ff !important; }
body.theme-apple .progress-fill-comp { background: linear-gradient(90deg, #0a84ff 0%, #ff453a 100%) !important; }
body.theme-apple .progress-fill::after { display: none !important; }

/* ─── Actividad / tablas ───────────────────────────────────────────── */
body.theme-apple .recent-card {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  background: rgba(255, 255, 255, .03) !important;
  transition: background .2s ease, transform .12s ease !important;
}
body.theme-apple .recent-card:hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
body.theme-apple .recent-icon { border-radius: 50% !important; }
body.theme-apple table th { color: #86868b !important; }
body.theme-apple table td { color: #f5f5f7 !important; }

/* ─── FABs / toast / misc ──────────────────────────────────────────── */
body.theme-apple .toast { border-radius: 14px !important; }
body.theme-apple .sheet { border-radius: 24px 24px 0 0 !important; }
body.theme-apple #btn-fab-add {
  background: #0a84ff !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 24px -6px rgba(10, 132, 255, .6) !important;
}
body.theme-apple #btn-fab-voice { border-radius: 50% !important; }
body.theme-apple .brand-matic,
body.theme-apple .gradient-title {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
body.theme-apple .glossary-trigger {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 50% !important;
}
body.theme-apple .bubble-mine {
  background: rgba(10, 132, 255, .18) !important;
  border: 1px solid rgba(10, 132, 255, .25) !important;
  border-radius: 18px !important;
}
body.theme-apple .bubble-theirs {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 18px !important;
}
body.theme-apple .skeleton { --skeleton-bg: rgba(255, 255, 255, .05); --skeleton-shimmer: rgba(255, 255, 255, .09); }
body.theme-apple .celebration-card { animation: none !important; }
body.theme-apple .sync-spinner { border-top-color: #0a84ff !important; }
/* ─── Splash acorde al tema (F5 nace sobrio, sin flash neón) ───────── */
body.theme-apple #splash-screen { background: #0a0a0c !important; }
body.theme-apple #splash-screen img {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6)) !important;
}
body.theme-apple #splash-screen p {
  color: #86868b !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}
body.theme-apple #splash-screen .bg-white\/5 { background: rgba(255, 255, 255, .08) !important; }
body.theme-apple #splash-screen [class*="animate-[splashBar"] {
  background: #0a84ff !important;
  box-shadow: 0 0 12px rgba(10, 132, 255, .5) !important;
}

/* Sorpresa: hero respira — balance con peso editorial y saludo sobrio */
body.theme-apple #hero-greeting { color: #86868b !important; }
body.theme-apple #hero-summary { color: #c7c7cc !important; }