/* ═══════════════════════════════════════════════════════════════
   DurantIQ — Design System Premium (Editorial Financial Intelligence)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Aliases teal legacy → valores nuevos (backward-compat) */
  --teal-950: var(--racing);
  --teal-900: var(--racing-2);
  --teal-800: var(--moss);
  --teal-600: var(--moss);
  --teal-400: var(--mint);
  --teal-100: var(--mint-soft);
  --teal-50:  #F2FAF6;

  /* Superficies — paper/cream cálidos, no blanco puro */
  --surface:      var(--paper);
  --card:         var(--cream);
  --card-border:  rgba(11,59,46,0.12);
  --card-radius:  var(--radius-lg);

  /* Texto */
  --text-primary:   var(--ink);
  --text-secondary: var(--muted);
  --text-hint:      var(--muted-2);

  /* Semánticos */
  --success:        var(--mint);
  --success-light:  var(--mint-soft);
  --success-border: rgba(143,212,184,0.4);
  --danger:         var(--danger);
  --danger-light:   var(--danger-soft);
  --warning:        var(--champagne);
  --info:           var(--moss);
  --ai-purple:      #8b5cf6;

  /* Spacing */
  --space-card:    20px;
  --space-section: 24px;

  --shadow-color: rgba(11,59,46,0.08);
}

.dark {
  --text-primary:   var(--ink);
  --text-secondary: var(--muted);
  --text-hint:      var(--muted-2);
  --shadow-color:   rgba(0,0,0,0.3);

  --surface:     var(--paper);
  --card:        var(--cream);
  --card-border: rgba(244,239,230,0.08);
}

html.dark-transition,
html.dark-transition *,
html.dark-transition *::before,
html.dark-transition *::after {
  transition: background-color 0.3s var(--ease-standard),
              color 0.2s var(--ease-standard),
              border-color 0.3s var(--ease-standard) !important;
}

/* ── Reduce faux-bold / layout shift ───────────────────────────── */
[data-i18n], body { font-synthesis: none; text-rendering: optimizeLegibility; }

/* ── Body ──────────────────────────────────────────────────────── */
body {
  background: var(--surface);
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  color: var(--text-primary);
  font-family: var(--font-ui);
}

/* ── Transición global en interactivos ─────────────────────────── */
button, input, select, a {
  transition:
    color var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.4,0,0.2,1)),
    background-color var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.4,0,0.2,1)),
    border-color var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.4,0,0.2,1)),
    transform var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.4,0,0.2,1)),
    box-shadow var(--duration-base, 220ms) var(--ease-standard, cubic-bezier(0.4,0,0.2,1)),
    opacity var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.4,0,0.2,1));
}
button, select, input { -webkit-tap-highlight-color: transparent; }
select { -webkit-appearance: none; -moz-appearance: none; }

/* ════════════════════════════════════════════════════════════════
   HEADER — Racing Green editorial con glows
   ════════════════════════════════════════════════════════════════ */
.flujo-header-panel {
  background: var(--racing) !important;
  position: relative;
  overflow: hidden;
}
.flujo-header-panel::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(200,178,115,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.flujo-header-panel::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 55%;
  height: 70%;
  background: radial-gradient(circle, rgba(143,212,184,0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* Separadores verticales entre columnas */
.flujo-header-panel .grid.grid-cols-3 > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* Label del mes */
.flujo-mes-titulo {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.85);
}

/* Labels Ingresos / Gastos / Diferencia */
.flujo-header-col p.text-xs {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  font-weight: 400 !important;
}

/* Valores numéricos del header */
.flujo-monto-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.12em;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.2rem;
}
.flujo-monto-num {
  color: var(--cream);
  font-family: var(--font-ui);
  font-weight: 600;
  font-feature-settings: 'tnum', 'ss01';
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.72rem, 2.6vw, 1.125rem);
  line-height: 1.15;
}
.flujo-monto-eur {
  color: rgba(248, 250, 252, 0.75);
  font-family: var(--font-ui);
  font-weight: 500;
  font-feature-settings: 'tnum', 'ss01';
  font-size: clamp(0.65rem, 2.1vw, 0.9rem);
  flex-shrink: 0;
  line-height: 1.15;
}

/* ════════════════════════════════════════════════════════════════
   Sistema numérico híbrido editorial — Fraunces solo > 22px
   (definido tras .flujo-monto-num para que .num-hero gane en cascada)
   ════════════════════════════════════════════════════════════════ */
.flujo-monto-num.num-hero,
.num-hero {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 72px);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}
.num-hero-eur {
  font-family: var(--font-ui);
  font-size: clamp(15px, 2.5vw, 20px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum', 'ss01';
}
.num-kpi-lg {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.num-kpi-md {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 27px);
  font-variation-settings: "opsz" 36;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
}
.num-list-lg {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum', 'ss01';
}
.num-list-md {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum', 'ss01';
}
.num-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  font-feature-settings: 'tnum', 'ss01';
}

/* #2dd4bf sobre teal-800 → 3.2:1 (falla AA). #a7f3d0 → ~8:1 (AAA para dato financiero) */
.flujo-header-panel .flujo-monto-num--hero-ing { color: var(--mint); }
.flujo-kpi-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(244,239,230,0.65); font-family: var(--font-ui); }
.flujo-header-panel .flujo-monto-num--hero-gas { color: var(--danger-soft); }

/* Variación vs mes anterior (pills) */
.flujo-var-host {
  margin-top: 0.35rem;
  min-height: 1.25rem;
}
.flujo-var-host:empty {
  min-height: 0;
  margin-top: 0;
}
.vs-mes-ant-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  font-feature-settings: 'tnum', 'ss01';
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-pill);
  line-height: 1.2;
  cursor: default;
}
.vs-mes-ant-pill .vs-mes-ant-icon { width: 0.85em; height: 0.85em; flex-shrink: 0; }
.vs-mes-ant-pill--good    { color: var(--mint); background: rgba(143,212,184,0.18); }
.vs-mes-ant-pill--bad     { color: var(--danger-soft); background: rgba(168,68,64,0.18); }
.vs-mes-ant-pill--neutral { color: rgba(244,239,230,0.85); background: rgba(255,255,255,0.14); }

.flujo-var-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-pill);
  line-height: 1.2;
}
.flujo-var-up-good    { background: rgba(143,212,184,0.18); color: var(--mint); }
.flujo-var-down-bad   { background: rgba(168,68,64,0.18);   color: var(--danger-soft); }
.flujo-var-up-bad     { background: rgba(168,68,64,0.18);   color: var(--danger-soft); }
.flujo-var-down-good  { background: rgba(143,212,184,0.18); color: var(--mint); }
.flujo-var-neutral    { color: rgba(244,239,230,0.75); background: rgba(255,255,255,0.12); }

/* ── IQ Score box ──────────────────────────────────────────────── */
.dq-salud-hero-inner {
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(244,239,230,0.10) !important;
}
.dq-salud-hero-score {
  color: var(--champagne);
  line-height: 1;
}
/* IQ Score ring — stroke champagne vía CSS (complementa el JS) */
#saludFinRingCircle { stroke: var(--champagne) !important; }
.dq-salud-hero-msg--ok     { color: var(--mint); }
.dq-salud-hero-msg--mid    { color: var(--champagne); }
.dq-salud-hero-msg--bad    { color: var(--danger-soft); }
.dq-salud-hero-msg--muted  { color: rgba(244,239,230,0.45); }

/* Barra de progreso del IQ */
#saludFinBarTrack {
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
#saludFinBarFill {
  height: 100%;
  border-radius: 3px !important;
}

/* Columna col header */
.flujo-header-col { min-width: 0; }

/* ════════════════════════════════════════════════════════════════
   CARDS — cream flat, jerarquía por hairline no por sombra
   ════════════════════════════════════════════════════════════════ */
.bg-white.rounded-2xl,
.bg-white.rounded-xl {
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

/* Títulos de sección en cards */
.bg-white h3 {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════════
   SEGMENTED CONTROL — paper-2 container + racing active
   ════════════════════════════════════════════════════════════════ */
[role="tablist"].flex.rounded-xl,
[role="tablist"].flex.rounded-xl.bg-slate-200\/80 {
  background: var(--paper-2) !important;
  border-radius: var(--radius-md) !important;
  padding: 3px !important;
  gap: 3px !important;
}

#tabTipoGasto[aria-selected="true"],
#tabTipoIngreso[aria-selected="true"] {
  background: var(--racing) !important;
  color: var(--cream) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-xs) !important;
  font-weight: 600 !important;
}
#tabTipoGasto[aria-selected="false"],
#tabTipoIngreso[aria-selected="false"] {
  background: transparent !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   INPUTS — paper bg, hairline, radius-sm (10px)
   ════════════════════════════════════════════════════════════════ */
.dq-input-premium,
input[type="text"]:not(.dq-input-moneda__field),
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"]:not(.dq-input-moneda__field):not(.meta-input),
select.select-fin,
select:not(.dq-input-moneda__sym) {
  background: var(--paper-2) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-family: var(--font-ui) !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus {
  border-color: var(--racing) !important;
  box-shadow: none !important;
}
input::placeholder { color: var(--muted-2) !important; opacity: 1; }
input::-webkit-input-placeholder { color: var(--muted-2) !important; }

/* Altura mínima para inputs del form principal */
#nombre, #regFecha, #categoria, #subcategoria {
  min-height: 3.25rem;
}

/* Input moneda (wrapper especial) */
.dq-input-moneda {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  background: var(--paper-2) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}
.dq-input-moneda__sym {
  display: flex;
  align-items: center;
  padding: 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--paper-2) !important;
  border-right: 1px solid var(--hairline) !important;
}
.dq-input-moneda .dq-input-moneda__field {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 12px !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-feature-settings: 'tnum', 'ss01' !important;
  color: var(--ink) !important;
}
.dq-input-moneda .dq-input-moneda__field::placeholder {
  color: var(--muted-2) !important;
}

/* Labels de sección (uppercase) */
label.text-xs.font-semibold,
label.block.text-xs,
.text-xs.font-semibold.text-slate-500.uppercase,
p.text-xs.font-semibold.text-slate-500 {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════════
   BOTÓN PRIMARIO — teal gradient
   ════════════════════════════════════════════════════════════════ */
.dq-cta-primaria,
#btnGuardar,
#btnLogin,
#btnRegistrar,
#btnGuardarPerfil,
#btnGuardarProg,
#btnGuardarMetas,
#btnCrearFamilia,
#btnUnirFamilia,
#btnCerrarSesion {
  background: linear-gradient(135deg, var(--teal-950) 0%, var(--teal-800) 100%) !important;
  color: white !important;
  border-radius: 14px !important;
  padding: 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  border: none !important;
  box-shadow: none !important;
}
.dq-cta-primaria:hover,
#btnGuardar:hover,
#btnLogin:hover,
#btnRegistrar:hover,
#btnGuardarPerfil:hover,
#btnGuardarProg:hover,
#btnGuardarMetas:hover {
  filter: brightness(1.1) !important;
}
.dq-cta-primaria:active,
#btnGuardar:active { transform: scale(0.98) !important; }

/* Botón favorito (estrella) — warning */
#btnFavorito {
  background: var(--warning) !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: none !important;
  color: white !important;
}
#btnFavorito:hover { filter: brightness(1.1) !important; }

/* Botón Crear/Unirse familia — más compactos */
#btnCrearFamilia,
#btnUnirFamilia {
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
}
#btnUnirFamilia {
  background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-950) 100%) !important;
}

/* Botón cancelar (secundario) */
#btnCancelarProg {
  background: #f1f5f9 !important;
  color: var(--text-secondary) !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   ACTIVIDAD RECIENTE
   ════════════════════════════════════════════════════════════════ */
.actividad-importe {
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-weight: 600;
  font-feature-settings: 'tnum', 'ss01';
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
}
.actividad-importe__num.actividad-importe__num--ingreso { color: var(--success); }
.actividad-importe__num.actividad-importe__num--gasto   { color: var(--danger); }
.actividad-importe__sym {
  color: var(--text-hint);
  font-weight: 500;
  font-size: 0.9em;
  font-feature-settings: 'tnum', 'ss01';
}

/* Fila de actividad — sin card, solo separador */
.actividad-fila {
  border-color: var(--card-border) !important;
}

/* Iconos de categoría */
.dq-badge-ingreso-icon,
.dq-badge-gasto-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.dq-badge-ingreso-icon {
  background: var(--success-light) !important;
  color: #166534 !important;
}
.dq-badge-gasto-icon {
  background: var(--teal-50) !important;
  color: var(--teal-600) !important;
}

/* Botones editar/eliminar — solo icono, sutiles */
.btn-transaccion-eliminar {
  color: var(--text-hint) !important;
  background: transparent !important;
  border: none !important;
}
.btn-transaccion-eliminar:hover {
  color: var(--danger) !important;
  background: var(--danger-light) !important;
}

/* Grupo de fecha */
.dq-actividad-fecha-grupo {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 16px 0.25rem 0.25rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dq-actividad-fecha-grupo--sep {
  border-top: 0.5px solid var(--card-border);
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════
   BOTONES CSV / PDF — discretos
   ════════════════════════════════════════════════════════════════ */
#btnExportCsv,
#btnExportPdf {
  border: none !important;
  background: transparent !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
}
#btnExportCsv:hover,
#btnExportPdf:hover { color: var(--text-primary) !important; }

/* Separador visual entre formulario de registro y actividad reciente */
.actividad-reciente-header { border-top: 1px solid var(--card-border); padding-top: 1.25rem; margin-top: 0.5rem; }

/* ════════════════════════════════════════════════════════════════
   NUEVO REGISTRO — FAB + BOTTOM SHEET
   ════════════════════════════════════════════════════════════════ */
.dq-fab-nuevo-registro {
  position: fixed;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--racing);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 76, 76, 0.34);
  z-index: 180;
  transition: transform 160ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.dq-fab-nuevo-registro:hover {
  filter: brightness(1.06);
  box-shadow: 0 18px 38px rgba(15, 76, 76, 0.38);
}
.dq-fab-nuevo-registro:active { transform: scale(0.96); }

.dq-sheet-overlay {
  background: rgba(2, 6, 23, 0.58);
  opacity: 0;
  transition: opacity 220ms ease;
}

#nuevoRegistroSheet {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
}

.dq-nuevo-registro-sheet {
  background: var(--card);
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -20px 44px rgba(2, 6, 23, 0.25);
  /* Altura según contenido; al crecer mucho, limitar al viewport visible (svh evita corte con UI del navegador). */
  height: auto;
  min-height: 0;
  max-height: 90dvh;
  max-height: min(90dvh, 92svh);
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 260ms ease;
  overflow: hidden;
}
.dq-nuevo-registro-sheet__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dq-sheet-footer {
  flex-shrink: 0;
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 0.5px solid var(--hairline);
  background: var(--paper, var(--card));
}

/* Etiquetas en el sheet: borde con token editorial (evita slate azulado en dark) */
.dq-nuevo-registro-sheet .dq-form-tags-wrap {
  border: 0.5px solid var(--hairline);
}
.dq-nuevo-registro-sheet .dq-form-tags-input {
  border: 0.5px solid var(--hairline);
}

#nuevoRegistroSheet.is-open .dq-sheet-overlay { opacity: 1; }
#nuevoRegistroSheet.is-open .dq-nuevo-registro-sheet { transform: translateY(0); }

body.dq-sheet-open { overflow: hidden; }
/* El sheet es modal: ocultar la barra inferior para que no compita visualmente con el footer del formulario */
body.dq-sheet-open #bottomNav {
  visibility: hidden;
  pointer-events: none;
}
/* Evita que el transform del tab cree un containing block para el fixed del sheet */
body.dq-sheet-open #tabPanelInicio {
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════════
   NAV INFERIOR — cream + backdrop-blur + dot racing
   ════════════════════════════════════════════════════════════════ */
#bottomNav {
  background: rgba(244,239,230,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--hairline);
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

.dark #bottomNav {
  background: rgba(20,34,29,0.92);
  border-top-color: rgba(244,239,230,0.08);
}

#bottomNav .bottom-nav-btn {
  color: var(--muted) !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  padding: 10px 0 8px;
  position: relative;
  transition: color 200ms var(--ease-standard), transform 100ms ease;
}
#bottomNav .bottom-nav-btn:active { transform: scale(0.97); }

#bottomNav .bottom-nav-btn span {
  font-size: 9px !important;
  letter-spacing: 0.02em;
  font-family: var(--font-ui) !important;
}

/* Pestaña activa */
#bottomNav .bottom-nav-btn--active {
  background: transparent !important;
  color: var(--racing) !important;
  box-shadow: none !important;
}
#bottomNav .bottom-nav-btn--active i,
#bottomNav .bottom-nav-btn--active svg { color: var(--racing) !important; opacity: 1; }
#bottomNav .bottom-nav-btn i,
#bottomNav .bottom-nav-btn svg { opacity: 0.85; color: inherit; }

.dark #bottomNav .bottom-nav-btn { color: var(--muted) !important; }
.dark #bottomNav .bottom-nav-btn--active,
.dark #bottomNav .bottom-nav-btn--active i,
.dark #bottomNav .bottom-nav-btn--active svg { color: var(--racing) !important; }

/* Dot indicator debajo del icono activo */
#bottomNav .bottom-nav-btn--active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--racing);
}

/* ════════════════════════════════════════════════════════════════
   LOGIN / REGISTRO MODAL
   ════════════════════════════════════════════════════════════════ */
#authOverlay > div {
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
  border: 0.5px solid var(--card-border) !important;
}
#authOverlay > div > div:first-child {
  border-radius: 20px 20px 0 0 !important;
  background: white !important;
  border-bottom: 0.5px solid var(--card-border) !important;
  padding: 24px 24px 16px !important;
}

/* Logo DurantIQ en auth */
.durantiq-wordmark-auth .durantiq-wordmark-durant {
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--text-primary);
}
.durantiq-wordmark-auth .durantiq-wordmark-iq {
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--text-secondary);
}

/* Header wordmark del app */
.flujo-header-panel .durantiq-wordmark-durant {
  font-weight: 500;
  font-size: clamp(22px, 5vw, 1.95rem);
}
.flujo-header-panel .durantiq-wordmark-iq {
  font-weight: 300;
  font-size: clamp(22px, 5vw, 1.95rem);
  opacity: 0.95;
}
.durantiq-wordmark,
.durantiq-wordmark-auth {
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variation-settings: "opsz" 72;
}

/* Tabs auth — estilo underline */
#authTabEntrar,
#authTabRegistrar {
  background: transparent !important;
  border-bottom-width: 2px !important;
  font-size: 14px !important;
  padding: 12px 0 !important;
}
#authTabEntrar.border-b-2 {
  border-bottom-color: var(--teal-600) !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}
#authTabRegistrar:not(.border-b-2),
#authTabRegistrar.border-transparent {
  border-bottom-color: transparent !important;
  color: var(--text-hint) !important;
  font-weight: 400 !important;
}

/* Link forgot password */
#btnForgotPassword {
  font-size: 13px !important;
  color: var(--teal-600) !important;
  background: transparent !important;
  border: none !important;
}

/* Cerrar sesión — link discreto en Gestión */
#btnCerrarSesion {
  background: transparent !important;
  color: var(--danger) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
}
#btnCerrarSesion:hover { opacity: 0.8 !important; filter: none !important; }

/* Checkbox RGPD */
#regRgpd { accent-color: var(--teal-600); }

/* ════════════════════════════════════════════════════════════════
   ANÁLISIS — KPI cards y barras de progreso
   ════════════════════════════════════════════════════════════════ */
.stats-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}
.stats-kpi-card {
  box-sizing: border-box;
  min-width: 0;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 14px !important;
  background: var(--cream) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  transition: border-color 200ms var(--ease-standard);
}
.dark .stats-kpi-card {
  background: var(--cream) !important;
  border-color: var(--hairline) !important;
}
.stats-kpi-card:hover { border-color: var(--racing) !important; }

/* KPI variantes — sutil tinte en el gradiente */
.stats-kpi-card--gasto {
  background: linear-gradient(135deg, var(--cream) 50%, rgba(168,68,64,0.06) 100%) !important;
  border-color: rgba(168,68,64,0.15) !important;
}
.dark .stats-kpi-card--gasto {
  background: linear-gradient(135deg, var(--cream) 50%, rgba(168,68,64,0.12) 100%) !important;
}
.stats-kpi-card--ahorro {
  background: linear-gradient(135deg, var(--cream) 50%, rgba(143,212,184,0.12) 100%) !important;
  border-color: rgba(143,212,184,0.3) !important;
}
.dark .stats-kpi-card--ahorro {
  background: linear-gradient(135deg, var(--cream) 50%, rgba(143,212,184,0.10) 100%) !important;
}
.stats-kpi-card--diario {
  background: linear-gradient(135deg, var(--cream) 50%, rgba(11,59,46,0.05) 100%) !important;
}
.stats-kpi-card--proyec {
  background: linear-gradient(135deg, var(--cream) 50%, rgba(200,178,115,0.12) 100%) !important;
  border-color: rgba(200,178,115,0.25) !important;
}
.stats-kpi-card.stats-kpi-card--active {
  border: 1.5px solid var(--champagne) !important;
}
.stats-kpi-value {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--text-primary);
}
.stats-kpi-topcat-name {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  color: var(--racing);
}

/* Botones de rango */
.stats-rango-btn {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--muted);
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-ui);
  font-weight: 400;
  transition: all 200ms var(--ease-standard);
}
.stats-rango-btn.active {
  background: var(--racing);
  border-color: var(--racing);
  color: var(--cream);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.stats-rango-btn:hover:not(.active) {
  background: var(--paper);
  border-color: var(--hairline);
  color: var(--ink-2);
}

/* Top gastadores — barras de progreso */
.dq-gastador-bar {
  height: 8px;
  border-radius: var(--radius-sm);
}
.dq-gastador-bar--fernando { background: var(--teal-600); }
.dq-gastador-bar--danielys { background: var(--warning); }

/* ════════════════════════════════════════════════════════════════
   METAS — guía de referencia IQ
   ════════════════════════════════════════════════════════════════ */
.guia-metas-card {
  margin-bottom: 1.5rem;
  padding: 0.85rem 0.9rem 0.85rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 14px !important;
  border-left: 3px solid var(--racing) !important;
  box-shadow: none !important;
}
.guia-metas-card__title {
  margin: 0 0 0.65rem 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--racing);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: var(--font-ui);
}
.guia-metas-card__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1rem;
  align-items: start;
}
@media (min-width: 380px) {
  .guia-metas-card__body {
    grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 11.5rem);
  }
}
.guia-metas-card__copy { min-width: 0; }
.guia-metas-card__text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.guia-metas-card__viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.guia-metas-card__chart-container {
  position: relative;
  width: min(100%, 9.5rem);
  max-width: 10.5rem;
  aspect-ratio: 1;
  margin: 0 auto;
}
.guia-metas-card__chart-container canvas { display: block; width: 100% !important; height: 100% !important; }
.guia-metas-card__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.guia-metas-card__legend li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}
.guia-metas-card__legend li:last-child { margin-bottom: 0; }
.guia-metas-card__swatch {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
}
/* Colores teal para el donut */
.guia-metas-card__swatch--nec { background: var(--teal-800); }
.guia-metas-card__swatch--des { background: var(--teal-400); }
.guia-metas-card__swatch--aho { background: var(--teal-100); }
.guia-metas-card__legend-text strong { font-weight: 500; color: var(--text-primary); }

/* Filas de metas */
#analisisMetasProgresoList .analisis-meta-progreso-fila {
  user-select: none;
  pointer-events: none;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--card-border);
}

/* Metas input */
.meta-input {
  text-align: right;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum', 'ss01';
}
.dq-meta-monto-wrap {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  border: 0.5px solid var(--card-border) !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}
.dq-meta-monto-wrap .dq-meta-monto__sym {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
  background: #f1f5f9 !important;
  border-right: 0.5px solid var(--card-border) !important;
}
.dq-meta-monto-wrap .meta-input {
  border: none !important;
  border-radius: 0 !important;
  flex: 1;
  min-width: 0;
}

/* ════════════════════════════════════════════════════════════════
   PLANIFICACIÓN — botón nueva planificación
   ════════════════════════════════════════════════════════════════ */
#btnMostrarFormProg {
  background: transparent !important;
  border: 1.5px dashed var(--teal-400) !important;
  color: var(--teal-600) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
#btnMostrarFormProg:hover {
  background: var(--teal-50) !important;
}

/* ════════════════════════════════════════════════════════════════
   FAVORITOS / ACCESOS RÁPIDOS
   ════════════════════════════════════════════════════════════════ */
#favoritosPlaceholder {
  color: var(--text-secondary);
  font-size: 13px;
  border: 1.5px dashed var(--card-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
}

/* Cards de favorito existentes (generadas por JS) */
.dq-favorito-card {
  background: var(--teal-50) !important;
  border: 0.5px solid var(--teal-100) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   SUGERENCIAS DE HÁBITOS (Zero-UI)
   ════════════════════════════════════════════════════════════════ */
#habitosSugerenciasWrap > div,
.habito-sugerencia-item {
  background: var(--teal-50) !important;
  border: 0.5px solid var(--teal-100) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}
.habito-icono-wrap {
  width: 36px !important;
  height: 36px !important;
  background: var(--cream) !important;
  border-radius: 11px !important;
  border: 1px solid var(--hairline) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--racing) !important;
  flex-shrink: 0 !important;
}
.habito-concepto {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}
.habito-frecuencia {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
}
.habito-monto {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════════
   CÍRCULOS DE COLORES DE PERFIL
   ════════════════════════════════════════════════════════════════ */
.dq-color-option.selected,
.dq-color-option[data-selected="true"] {
  outline: 2px solid var(--teal-950) !important;
  outline-offset: 2px !important;
}

/* ════════════════════════════════════════════════════════════════
   ASESOR / ONBOARDING / ASISTENTE PANELS
   ════════════════════════════════════════════════════════════════ */
#asesorPanel {
  border-radius: var(--card-radius) !important;
  border: 0.5px solid var(--card-border) !important;
  box-shadow: none !important;
}
#asistentePanel {
  border-radius: var(--card-radius) !important;
  border: 0.5px solid var(--card-border) !important;
  box-shadow: none !important;
}
#asistentePanel > div:first-child {
  background: linear-gradient(145deg, var(--teal-950) 0%, var(--teal-800) 100%) !important;
}
#onboardingOverlay > div {
  border-radius: var(--card-radius) !important;
  border: 0.5px solid var(--card-border) !important;
  box-shadow: none !important;
}

/* Botón onboarding */
#onboardingNextBtn {
  background: linear-gradient(135deg, var(--teal-950) 0%, var(--teal-800) 100%) !important;
  color: white !important;
  border-radius: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   AGENDA / ITEMS GENÉRICOS
   ════════════════════════════════════════════════════════════════ */
#agendaWrap > div {
  border-radius: var(--card-radius) !important;
  border: 0.5px solid var(--card-border) !important;
  box-shadow: none !important;
}
#agendaWrap > div > div:first-child {
  background: var(--teal-50) !important;
  border-bottom: 0.5px solid var(--card-border) !important;
}

/* ════════════════════════════════════════════════════════════════
   ANIMACIONES
   ════════════════════════════════════════════════════════════════ */
@keyframes ia-flash {
  0%   { box-shadow: 0 0 0 3px rgba(143,212,184,0.40), inset 0 0 0 1px rgba(143,212,184,0.20); }
  100% { box-shadow: 0 0 0 0 transparent, inset 0 0 0 0 transparent; }
}
.ia-flash-once { animation: ia-flash 0.55s ease-out; }

@keyframes ia-flash-llm {
  0%   { box-shadow: 0 0 0 3px rgba(11,59,46,0.35), inset 0 0 0 1px rgba(11,59,46,0.18); }
  100% { box-shadow: 0 0 0 0 transparent, inset 0 0 0 0 transparent; }
}
.ia-flash-llm-once { animation: ia-flash-llm 0.65s ease-out; }

@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#asistentePanel { animation: slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
#asistenteOverlay.hidden #asistentePanel { animation: none; }

/* ════════════════════════════════════════════════════════════════
   CHART BOXES
   ════════════════════════════════════════════════════════════════ */
#statsCatChartBox,
#statsCompChartBox,
#statsEvolChartBox,
#statsStackedChartBox {
  background: var(--paper-2) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 14px !important;
}
.dark #statsCatChartBox,
.dark #statsCompChartBox,
.dark #statsEvolChartBox,
.dark #statsStackedChartBox {
  background: var(--cream) !important;
  border-color: var(--hairline) !important;
}
#statsCatChartBox,
#statsCompChartBox { height: 220px; }
#statsEvolChartBox  { height: 190px; }
#statsStackedChartBox { height: 200px; }

/* ── KPI cards en el grid inteligente ─────────────────────────── */
#statsKpisSmartGrid .stats-kpi-card {
  align-items: flex-start !important;
  gap: 0;
}
/* Análisis (light): composición editorial como referencia racing */
html:not(.dark) #tabPanelAnalisis #statsKpisSmartGrid .stats-kpi-card {
  background: var(--cream) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}
html:not(.dark) #tabPanelAnalisis #statsKpisSmartGrid .stats-kpi-card--ahorro {
  background: var(--racing) !important;
  border-color: var(--racing-2) !important;
}
html:not(.dark) #tabPanelAnalisis #statsKpisSmartGrid .stats-kpi-card--ahorro .num-meta {
  color: rgba(244,239,230,0.72) !important;
}
html:not(.dark) #tabPanelAnalisis #statsKpisSmartGrid .stats-kpi-card--ahorro #kpiAhorro {
  color: var(--mint) !important;
}
html:not(.dark) #tabPanelAnalisis #statsKpisSmartGrid .stats-kpi-card--ahorro #kpiAhorroDelta {
  color: rgba(168,223,199,0.92) !important;
}
html:not(.dark) #tabPanelAnalisis #statsKpisSmartGrid .stats-kpi-card--proyec #kpiProyeccion {
  color: var(--champagne-deep) !important;
}

/* ── KPI icon pill ──────────────────────────────────────────── */
.kpi-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.kpi-icon-wrap--gasto  { background: rgba(168,68,64,0.10);  color: var(--danger); }
.kpi-icon-wrap--ahorro { background: rgba(143,212,184,0.18); color: var(--moss); }
.kpi-icon-wrap--diario { background: var(--cream);           color: var(--racing); }
.kpi-icon-wrap--proyec { background: rgba(200,178,115,0.15); color: var(--champagne-deep); }
html:not(.dark) #tabPanelAnalisis #statsKpisSmartGrid .stats-kpi-card--ahorro .kpi-icon-wrap--ahorro {
  background: rgba(244,239,230,0.12) !important;
  color: var(--mint) !important;
}
.dark .kpi-icon-wrap--gasto  { background: rgba(212,162,159,0.15); color: var(--danger); }
.dark .kpi-icon-wrap--ahorro { background: rgba(143,212,184,0.15); color: var(--mint); }
.dark .kpi-icon-wrap--diario { background: rgba(244,239,230,0.06); color: var(--racing); }
.dark .kpi-icon-wrap--proyec { background: rgba(200,178,115,0.12); color: var(--champagne); }

/* ── Barra de presupuesto mejorada ──────────────────────────── */
#kpiPresupuestoBar {
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease-standard);
}
.presupuesto-bar-track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: #f1f5f9;
  overflow: hidden;
}
.dark .presupuesto-bar-track {
  background: #334155;
}
.presupuesto-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: rgba(0,0,0,0.15);
}

/* ── Análisis — header oscuro ───────────────────────────────── */
.analisis-header {
  background: var(--racing);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  position: relative;
  overflow: hidden;
}
.analisis-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50%;
  height: 120%;
  background: radial-gradient(circle, rgba(200,178,115,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.analisis-header::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 40%;
  height: 80%;
  background: radial-gradient(circle, rgba(143,212,184,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Sección de card con título premium ─────────────────────── */
.analisis-section-card {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: hidden;
}
.dark .analisis-section-card {
  background: var(--cream);
  border-color: var(--hairline);
}
.analisis-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--hairline);
}
.analisis-section-title {
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--muted);
}
.analisis-section-body {
  padding: 14px 16px 16px;
}

/* ── Alerta con acento izquierdo ────────────────────────────── */
.alerta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  border-left: 3px solid transparent;
}
.alerta-item--ok   { background: rgba(143,212,184,0.12); border-left-color: var(--mint); }
.alerta-item--warn { background: rgba(200,178,115,0.10); border-left-color: var(--champagne); }
.alerta-item--info { background: rgba(11,59,46,0.06);   border-left-color: var(--racing); }

.dark .alerta-item--warn { background: rgba(200,178,115,0.12); border-left-color: var(--champagne); }
.dark .alerta-item--info { background: rgba(143,212,184,0.10); border-left-color: var(--mint); }

/* ── Metas — estado vacío ──────────────────────────────────── */
.metas-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  text-align: center;
}
.metas-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--teal-50);
  border: 1.5px solid var(--teal-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-400);
}

/* ── Miembro chip (en header oscuro) ────────────────────────── */
.stats-miembro-btn {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.85) !important;
}
.stats-miembro-btn.active-chip {
  background: var(--cream) !important;
  border-color: var(--cream) !important;
  color: var(--racing) !important;
  box-shadow: var(--shadow-xs);
  font-weight: 600 !important;
}

/* Rango de análisis usa el segmented control de tokens */
#tabPanelAnalisis .stats-rango-btn {
  background: var(--paper-2) !important;
  border-color: var(--hairline) !important;
  color: var(--muted) !important;
}
#tabPanelAnalisis .stats-rango-btn.active {
  background: var(--racing) !important;
  border-color: var(--racing) !important;
  color: var(--cream) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-xs);
}
#tabPanelAnalisis .stats-rango-btn:hover:not(.active) {
  background: var(--paper) !important;
  border-color: var(--hairline) !important;
  color: var(--ink-2) !important;
}

html:not(.dark) #tabPanelAnalisis .analisis-header p.text-white,
html:not(.dark) #tabPanelAnalisis .analisis-header .text-white {
  color: var(--cream) !important;
}
html:not(.dark) #tabPanelAnalisis .analisis-header p[style*="rgba(255,255,255,0.75)"] {
  color: rgba(244,239,230,0.78) !important;
}
html:not(.dark) #tabPanelAnalisis .analisis-header [data-i18n="nav_analysis"] {
  color: var(--champagne) !important;
}
html:not(.dark) #tabPanelAnalisis #btnAnalisisVistaToggle,
html:not(.dark) #tabPanelAnalisis #btnAbrirInformeMensual {
  background: color-mix(in srgb, var(--paper) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--paper) 24%, transparent) !important;
  color: var(--cream) !important;
}
html:not(.dark) #tabPanelAnalisis #btnAnalisisVistaToggle:hover,
html:not(.dark) #tabPanelAnalisis #btnAbrirInformeMensual:hover {
  background: color-mix(in srgb, var(--paper) 18%, transparent) !important;
}
html:not(.dark) #tabPanelAnalisis #statsRangoBtns .stats-rango-btn {
  background: color-mix(in srgb, var(--paper) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--paper) 24%, transparent) !important;
  color: rgba(244,239,230,0.82) !important;
}
html:not(.dark) #tabPanelAnalisis #statsRangoBtns .stats-rango-btn.active {
  background: var(--cream) !important;
  border-color: var(--cream) !important;
  color: var(--racing) !important;
}
html:not(.dark) #tabPanelAnalisis #statsRangoBtns .stats-rango-btn:hover:not(.active) {
  background: color-mix(in srgb, var(--paper) 18%, transparent) !important;
  color: var(--cream) !important;
}

/* ── Alertas ─────────────────────────────────────────────────── */
#statsAlertasList > div {
  transition: background 0.2s ease;
}

/* ════════════════════════════════════════════════════════════════
   MISC — asesor cita, textos de estado
   ════════════════════════════════════════════════════════════════ */
#asesorMensaje .asesor-cita-autor {
  font-weight: 500;
  color: var(--racing);
}
.text-flujo-good { color: var(--mint) !important; }
.text-flujo-bad  { color: var(--danger) !important; }

/* Details/summary de metas */
details.dq-metas-otros > summary { list-style: none; }
details.dq-metas-otros > summary::-webkit-details-marker { display: none; }

/* Centering wrapper */
body > div:first-child { position: relative; }

/* Progreso planificaciones */
#formProgWrap {
  background: var(--teal-50) !important;
  border: 0.5px solid var(--teal-100) !important;
  border-radius: var(--card-radius) !important;
}

/* Botones de tipo Gasto/Ingreso en programaciones */
.prog-tipo-btn {
  border-radius: 10px !important;
  font-weight: 500 !important;
  border-width: 1.5px !important;
}
.prog-tipo-active.prog-tipo-btn {
  box-shadow: none !important;
}

/* Footer */
footer {
  background: var(--surface) !important;
  border-top: 0.5px solid var(--card-border) !important;
}

.dark footer {
  background: var(--surface) !important;
  border-top-color: var(--card-border) !important;
}

/* Ver más actividad */
#btnActividadMas {
  background: white !important;
  border: 0.5px solid var(--card-border) !important;
  border-radius: 14px !important;
  color: var(--teal-600) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   GRUPOS DE GASTO — Shared Expenses
   ════════════════════════════════════════════════════════════════ */

/* Modales de grupos: slide-up desde el bottom */
#modalGrupo,
#modalGastoGrupo,
#modalGrupoSettings {
  align-items: flex-end;
}

#modalGrupo > div:last-child,
#modalGastoGrupo > div:last-child,
#modalGrupoSettings > div:last-child {
  animation: slideUpModal 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideUpModal {
  from { transform: translateY(100%); opacity: 0.7; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Emoji activo en el selector */
.grupo-emoji-btn.border-teal-500 {
  border-color: var(--teal-600) !important;
  background: var(--teal-50) !important;
}

/* Grupo card hover */
.grupo-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ── Dark-mode utility bridges — editorial tokens ───────────────── */
.dark .bg-white         { background-color: var(--cream)   !important; }
.dark .bg-slate-800,
.dark .bg-slate-900     { background-color: var(--paper)   !important; }
.dark .bg-slate-50,
.dark .bg-slate-50\/60,
.dark .bg-slate-50\/80,
.dark .bg-slate-50\/70  { background-color: var(--paper-2) !important; }
.dark .bg-slate-100,
.dark .bg-slate-100\/80 { background-color: var(--cream)   !important; }
.dark .bg-slate-700     { background-color: var(--paper-2) !important; }

.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700   { color: var(--ink)   !important; }
.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-slate-400   { color: var(--muted) !important; }
.dark .text-slate-300   { color: var(--muted-2) !important; }
.dark .text-white       { color: var(--ink) !important; }

.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .border-slate-600,
.dark .border-slate-700 { border-color: var(--hairline) !important; }
.dark .ring-slate-100,
.dark .ring-slate-700   { --tw-ring-color: var(--hairline) !important; }
.dark .divide-slate-100,
.dark .divide-slate-200,
.dark .divide-slate-700 { border-color: var(--hairline) !important; }

.dark input,
.dark select,
.dark textarea {
  background-color: var(--paper-2) !important;
  color: var(--ink) !important;
  border-color: var(--hairline) !important;
}

/* Overrides específicos de inputs con bg tailwind inline que se resisten */
.dark input[class*="bg-slate-50"],
.dark input[class*="bg-white"],
.dark select[class*="bg-slate-50"],
.dark select[class*="bg-white"],
.dark textarea[class*="bg-slate-50"],
.dark textarea[class*="bg-white"] {
  background-color: var(--paper-2) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--muted-2) !important;
}

/* === Correcciones definitivas modo oscuro === */

/* 1. Botones Gasto/Ingreso: tab activo en modo oscuro */
.dark #tabTipoGasto[aria-selected="true"],
.dark #tabTipoIngreso[aria-selected="true"] {
  background-color: var(--racing) !important;
  color: var(--cream) !important;
  box-shadow: none !important;
}
.dark #tabTipoGasto[aria-selected="false"],
.dark #tabTipoIngreso[aria-selected="false"] {
  background-color: transparent !important;
  color: var(--muted) !important;
}

/* 2. Asistente de pagos pendientes: input de monto variable */
.dark #asistenteItems input[type="number"] {
  background-color: var(--paper-2) !important;
  color: var(--ink) !important;
  border-color: var(--hairline) !important;
}

/* 3. Modal Crear/Editar Grupo y Modal Gasto de Grupo: texto visible */
.dark #modalGrupo input,
.dark #modalGrupo textarea,
.dark #modalGastoGrupo input,
.dark #modalGastoGrupo textarea {
  background-color: var(--paper-2) !important;
  color: var(--ink) !important;
  border-color: var(--hairline) !important;
}

/* Calendario financiero */
.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}
.cal-dia {
  min-height: 5.1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.cal-dia:hover { background: var(--surface-hover); }
.cal-dia.is-hoy { background: var(--mint-soft); border-color: var(--mint); }
.dark .cal-dia.is-hoy { background: rgba(143,212,184,0.15); border-color: rgba(143,212,184,0.4); }
.cal-dia.is-out { opacity: 0.4; cursor: default; }
.cal-dia.is-selected { outline: 2px solid var(--champagne); outline-offset: 1px; }
.cal-dots { display: inline-flex; align-items: center; gap: 0.2rem; }
.cal-dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; }
.cal-dot.gasto { background: var(--color-expense); }
.cal-dot.ingreso { background: var(--color-income); }
.cal-prog { border-style: dashed; border-color: #f59e0b; }

@media (max-width: 640px) {
  .cal-dia { min-height: 3.8rem; padding: 0.35rem; }
  .cal-dia .cal-monto { display: none; }
}

/* Balance colores */
.balance-positivo { color: var(--racing); }
.balance-negativo { color: var(--danger); }
.balance-neutro   { color: var(--muted); }

.tag-chip-remove {
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.actividad-tag-badge {
  transition: transform .12s ease, filter .12s ease;
}
.actividad-tag-badge:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* Splash screen */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--racing) 0%, var(--racing-2) 40%, var(--moss) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity .5s ease, transform .5s ease;
}
.splash-screen.fade-out { opacity: 0; transform: scale(1.05); pointer-events: none; }
.splash-content { text-align: center; color: #fff; }
.splash-icon { font-size: 64px; margin-bottom: 16px; animation: splash-bounce 1s ease-in-out infinite alternate; }
.splash-title { font-size: 32px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 4px; }
.splash-subtitle { font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 32px; }
.splash-loader { width: 120px; height: 3px; background: rgba(255,255,255,.2); border-radius: 3px; margin: 0 auto; overflow: hidden; }
.splash-loader-bar { width: 40%; height: 100%; background: #fff; border-radius: 3px; animation: splash-loading 1.2s ease-in-out infinite; }
@keyframes splash-bounce { from { transform: translateY(0);} to { transform: translateY(-8px);} }
@keyframes splash-loading { 0% { transform: translateX(-100%);} 100% { transform: translateX(350%);} }

/* Tabs and micro interactions */
.tab-panel {
  opacity: 0;
  transform: translateY(12px);
}
.tab-panel.tab-content-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease;
}

.kpi-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.kpi-card.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes nav-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.bottom-nav-btn.bottom-nav-btn--active i {
  animation: nav-bounce .3s ease;
}

.card-interactive {
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.card-interactive:active {
  transform: translateY(0) scale(.98);
}

@keyframes success-check {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
.success-check { animation: success-check .5s ease forwards; }

/* Toast enhanced animation */
.toast {
  transform: translateY(100%) scale(.95);
  opacity: 0;
  transition:
    transform .3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
    opacity .3s var(--ease-standard, cubic-bezier(0.4,0,0.2,1));
}
.toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.toast.hide {
  transform: translateY(100%) scale(.95);
  opacity: 0;
}

/* Onboarding guide */
.onboarding-guide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(2px);
  z-index: 90000;
}
.onboarding-highlight {
  position: relative;
  z-index: 90002 !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .65), 0 0 0 9999px rgba(15,23,42,.65);
  border-radius: var(--radius-lg);
}
.onboarding-tooltip {
  position: fixed;
  z-index: 90003;
  max-width: 320px;
  background: #fff;
  color: #0f172a;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 14px;
}
.dark .onboarding-tooltip {
  background: #1e293b;
  color: #f1f5f9;
}

/* ════════════════════════════════════════════════════════════════
   INFORME MENSUAL — preview dark mode override
   ════════════════════════════════════════════════════════════════ */
.dark #informePreviewHtml [style*="background:#ffffff"],
.dark #informePreviewHtml [style*="background: #ffffff"],
.dark #informePreviewHtml [style*="background:#f8fafc"],
.dark #informePreviewHtml [style*="background:#f0fdfa"],
.dark #informePreviewHtml [style*="background:#fffbeb"],
.dark #informePreviewHtml [style*="background:#f1f5f9"],
.dark #informePreviewHtml [style*="background:#f8fafb"] {
  background: #1e293b !important;
}
.dark #informePreviewHtml [style*="color:#0f172a"],
.dark #informePreviewHtml [style*="color: #0f172a"],
.dark #informePreviewHtml [style*="color:#334155"],
.dark #informePreviewHtml [style*="color: #334155"],
.dark #informePreviewHtml [style*="color:#64748b"],
.dark #informePreviewHtml [style*="color: #64748b"],
.dark #informePreviewHtml [style*="color:#94a3b8"],
.dark #informePreviewHtml [style*="color: #94a3b8"] {
  color: #cbd5e1 !important;
}

/* ════════════════════════════════════════════════════════════════
   GRUPOS — balances de miembros dark mode
   ════════════════════════════════════════════════════════════════ */
.dark .grupo-balance-item-yo {
  background-color: rgba(20, 78, 74, 0.3) !important;
}
.dark .grupo-balance-item {
  background-color: rgba(30, 41, 59, 0.4) !important;
}
.dark .grupo-balance-item .text-slate-800,
.dark .grupo-balance-item-yo .text-slate-800 {
  color: #f1f5f9 !important;
}
.dark .grupo-balance-item .text-slate-400,
.dark .grupo-balance-item-yo .text-slate-400 {
  color: #64748b !important;
}
.dark .grupo-transfer-item {
  background-color: rgba(30, 41, 59, 0.5) !important;
  border-color: #334155 !important;
}
.dark .grupo-transfer-item .text-slate-600,
.dark .grupo-transfer-item .text-slate-800 {
  color: #cbd5e1 !important;
}
.dark .grupo-transfer-confirmed {
  background-color: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

/* ── Focus states globales — champagne ring premium ────────────── */
:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
}
/* Inputs/selects ya tienen ring propio vía Tailwind focus:ring-* */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}
/* Color swatches ya tienen focus:ring-2 — suprimir outline global */
.perfil-color-opt:focus-visible {
  outline: none;
}

/* ── Accesibilidad: sin animaciones si el usuario las desactivó ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FASE 2 — Tipografía editorial + Sistema de iconos unificado
   ════════════════════════════════════════════════════════════════ */

/* ── Grano sutil global (textura editorial imperceptible) ───────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* ── Lucide: stroke unificado 1.5 en toda la app ────────────────── */
svg.lucide {
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* ── Contenedor de icono estándar ───────────────────────────────── */
.dq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  color: var(--racing);
  flex-shrink: 0;
}
/* Variante ingresos */
.dq-icon--income {
  background: rgba(143,212,184,0.18);
  border-color: rgba(143,212,184,0.4);
  color: var(--moss);
}
/* Variante compartido/grupo */
.dq-icon--group {
  background: rgba(200,178,115,0.15);
  border-color: rgba(200,178,115,0.3);
  color: var(--champagne-deep);
}
/* Variante gasto */
.dq-icon--expense {
  background: rgba(168,68,64,0.10);
  border-color: rgba(168,68,64,0.18);
  color: var(--danger);
}
.dark .dq-icon {
  background: rgba(244,239,230,0.06);
  border-color: rgba(244,239,230,0.08);
  color: var(--racing);
}
.dark .dq-icon--income {
  background: rgba(143,212,184,0.12);
  border-color: rgba(143,212,184,0.2);
}
.dark .dq-icon--group {
  background: rgba(200,178,115,0.10);
  border-color: rgba(200,178,115,0.18);
}

/* ── Importes: Fraunces + tnum ──────────────────────────────────── */
.dq-amount {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum', 'ss01';
}
/* Parte decimal: tamaño menor + opacidad reducida */
.dq-amount .dq-decimal {
  font-size: 60%;
  color: var(--muted);
  font-weight: 400;
}
/* Signo positivo en mint/racing */
.dq-amount--positive { color: var(--racing); }
/* Signo negativo en borgoña */
.dq-amount--negative { color: var(--danger); }
/* Neutro */
.dq-amount--neutral  { color: var(--muted); }

/* Delta chip — "+12,4% vs marzo" */
.dq-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dq-delta--up   { background: rgba(143,212,184,0.15); color: var(--moss); }
.dq-delta--down { background: rgba(168,68,64,0.10);   color: var(--danger); }
.dq-delta--flat { background: rgba(107,122,115,0.10); color: var(--muted); }

/* ── EyebrowLabel — label uppercase tipo revista ────────────────── */
.dq-eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ── SectionHead — título + link "Ver todo" ─────────────────────── */
.dq-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.dq-section-head h3 {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dq-section-head .dq-sh-link {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--racing);
  text-decoration: none;
  white-space: nowrap;
}

/* ── Brand dot pulsante junto al logo ──────────────────────────── */
.dq-brand-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--racing);
  box-shadow: 0 0 0 3px rgba(143,212,184,0.25);
  animation: dq-pulse 2s ease-in-out infinite;
}
@keyframes dq-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(143,212,184,0.25); }
  50%       { box-shadow: 0 0 0 5px rgba(143,212,184,0.10); }
}

/* ── Números mono (códigos, IDs, hashes) ────────────────────────── */
.dq-mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════
   FASE 3 — Componentes base: Card, Button, Input label, Chips
   ════════════════════════════════════════════════════════════════ */

/* ── Card ────────────────────────────────────────────────────────── */
.dq-card {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: none;
}
/* Variante feature — card destacada (Ahorro Neto, Unidad Familiar…) */
.dq-card--feature {
  background: var(--racing);
  border-color: transparent;
  color: var(--cream);
}
.dq-card--feature .dq-eyebrow { color: rgba(244,239,230,0.6); }
.dark .dq-card {
  background: var(--cream);
  border-color: var(--hairline);
}

/* ── Buttons ─────────────────────────────────────────────────────── */

/* Primary — racing con overlay gradient luz */
.dq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  background: var(--racing);
  color: var(--cream);
  border: none;
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 200ms var(--ease-standard), transform 100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.dq-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}
.dq-btn:hover  { background: var(--racing-2); }
.dq-btn:active { transform: scale(0.98); }

/* Secondary — contorno hairline */
.dq-btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.dq-btn--secondary::before { display: none; }
.dq-btn--secondary:hover { background: var(--paper-2); }

/* Ghost link — uppercase pequeño */
.dq-btn--ghost {
  background: transparent;
  color: var(--racing);
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}
.dq-btn--ghost::before { display: none; }

/* Premium CTA — champagne (solo 3 lugares permitidos) */
.dq-btn--premium {
  background: var(--champagne);
  color: var(--ink);
  border: none;
}
.dq-btn--premium:hover { background: var(--champagne-deep); }

/* Tailwind: override bg-teal en botones primarios existentes */
button.bg-teal-700,
a.bg-teal-700 {
  background: var(--racing) !important;
  color: var(--cream) !important;
  border-radius: 12px !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
  overflow: hidden !important;
}
button.bg-teal-700::before,
a.bg-teal-700::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}
button.bg-teal-700:hover,
a.bg-teal-700:hover { background: var(--racing-2) !important; }
button.bg-teal-800,
a.bg-teal-800 { background: var(--racing-2) !important; }

/* ── Input labels uppercase ──────────────────────────────────────── */
.dq-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 5px;
}
/* Apply to Tailwind labels que ya existen en el HTML */
label.text-xs.font-semibold.uppercase,
label.block.text-xs.font-semibold {
  font-family: var(--font-ui) !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* ── Chips / Pills ───────────────────────────────────────────────── */
.dq-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 200ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
/* Activo */
.dq-chip--active,
.dq-chip[aria-selected="true"] {
  background: var(--cream);
  border: 1px solid var(--cream);
  color: var(--racing);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(11,59,46,0.08);
}
/* Inactivo */
.dq-chip--inactive,
.dq-chip:not([aria-selected="true"]) {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--muted);
}
.dq-chip:hover:not([aria-selected="true"]) { background: var(--paper-2); }

/* ── Tablist genérico (pills horizontales) ───────────────────────── */
.dq-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dq-tabs::-webkit-scrollbar { display: none; }

/* ── Input inside card: usar paper-2 como bg ─────────────────────── */
.dq-card input,
.dq-card select,
.bg-white input,
.bg-white select {
  background: var(--paper) !important;
}

/* ════════════════════════════════════════════════════════════════
   FASE 4 — Pantallas principales
   ════════════════════════════════════════════════════════════════ */

/* Balance hero: tipografía vía .num-hero en el HTML */
/* Brand mark en header: dot racing */
.flujo-header-panel [style*="background:var(--teal-400)"],
.flujo-header-panel [style*="background: var(--teal-400)"] {
  background: var(--mint) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(143,212,184,0.25) !important;
}
/* Avatar chip en header */
#userAvatarCircle {
  background: rgba(200,178,115,0.15) !important;
  border-color: rgba(200,178,115,0.3) !important;
  color: var(--champagne) !important;
  border-radius: 10px !important;
  font-family: var(--font-ui) !important;
}
/* Botones circulares header */
#darkModeToggleBtn,
#globalSearchBtn {
  border-color: rgba(244,239,230,0.2) !important;
  background: rgba(244,239,230,0.06) !important;
}
/* Botón logout — más sutil */
#headerLogoutBtn {
  border-color: rgba(168,68,64,0.3) !important;
  background: rgba(168,68,64,0.10) !important;
  color: var(--danger-soft) !important;
  border-radius: 8px !important;
}
/* KPI mini-cards: mismo “lift” que IQ Score — capa clara sutil sobre racing */
.flujo-header-panel .kpi-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(244, 239, 230, 0.1) !important;
  border-radius: 14px !important;
}
/* Dot ingresos/gastos en mini-cards */
.flujo-header-panel [style*="background:#f87171"],
.flujo-header-panel [style*="background: #f87171"] {
  background: var(--danger-soft) !important;
}
/* Ver patrimonio button */
#btnAbrirPatrimonio {
  border-color: rgba(244,239,230,0.2) !important;
  background: rgba(244,239,230,0.08) !important;
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: rgba(244,239,230,0.75) !important;
}
/* Label mes en header (BALANCE DE …) */
.flujo-header-panel [style*="text-transform:uppercase"][style*="opacity:0.5"],
.flujo-header-panel p[style*="letter-spacing:1.5px"] {
  font-family: var(--font-ui) !important;
  letter-spacing: 0.2em !important;
  font-size: 10px !important;
}
/* Agenda próximos 7 días */
#agendaWrap .bg-white {
  background: var(--cream) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
#agendaWrap .bg-slate-50\/70 {
  background: var(--paper-2) !important;
  border-bottom-color: var(--hairline) !important;
}

/* KPIs análisis: .num-kpi-md en index.html */
/* Gastadores barras */
.dq-gastador-bar--fernando { background: var(--racing); }
.dq-gastador-bar--danielys { background: var(--champagne); }

/* ── GESTIÓN: iconos h3 → racing ────────────────────────────────── */
#tabPanelGestion h3 i[style*="color:var(--teal-600)"],
#tabPanelGestion h3 [style*="color:var(--teal-600)"] {
  color: var(--racing) !important;
}
/* Save buttons → racing */
#btnGuardarPerfil {
  background: var(--racing) !important;
  color: var(--cream) !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}
#btnGuardarPerfil::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}
#btnGuardarPerfil:hover { background: var(--racing-2) !important; }
#btnRepetirTutorial {
  background: transparent !important;
  border-color: var(--hairline) !important;
  color: var(--muted) !important;
  border-radius: 12px !important;
}
/* Metas: save button */
#btnGuardarMetas {
  background: var(--racing) !important;
  box-shadow: 0 4px 12px rgba(11,59,46,0.2) !important;
  color: var(--cream) !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}
#btnGuardarMetas::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}

/* ── GRUPOS: header ink + botón champagne ───────────────────────── */
#gruposListaView > .flujo-header-panel {
  background: var(--ink) !important;
}
#gruposListaView > .flujo-header-panel::before {
  background: radial-gradient(circle, rgba(143,212,184,0.10) 0%, transparent 70%) !important;
}
#gruposListaView > .flujo-header-panel::after {
  background: radial-gradient(circle, rgba(200,178,115,0.08) 0%, transparent 70%) !important;
}
#gruposListaView h2 {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
/* CTA champagne — único en toda la app */
#btnNuevoGrupo {
  background: var(--champagne) !important;
  border-color: var(--champagne) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border-radius: 12px !important;
}
#btnNuevoGrupo:hover { background: var(--champagne-deep) !important; }

/* ── LOGIN / AUTH OVERLAY ───────────────────────────────────────── */
#authOverlay {
  background: rgba(10,22,18,0.85) !important;
}
/* Auth card */
#authOverlay > div {
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-floating) !important;
}
/* Auth header */
#authOverlay > div > div:first-child {
  background: var(--cream) !important;
  border-bottom-color: var(--hairline) !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}
/* Tagline debajo del logo */
#authOverlay .text-xs.text-slate-500 {
  font-family: var(--font-ui) !important;
  font-style: italic !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}
/* Auth tab container */
#authOverlay .flex.border-b {
  background: var(--cream) !important;
  border-bottom-color: var(--hairline) !important;
}
/* Auth tab active underline */
#authTabEntrar.border-b-2:not(.border-transparent),
#authTabRegistrar.border-b-2:not(.border-transparent) {
  border-bottom-color: var(--racing) !important;
  color: var(--ink) !important;
}
/* Auth body scroll area */
#authOverlay .p-5 { background: var(--paper) !important; }
/* Auth inputs */
#loginEmail, #loginPassword,
#registerEmail, #registerPassword, #registerPasswordConfirm,
#registerNombre {
  background: var(--paper-2) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
/* Login button override (bg-teal-700 ya está capturado, pero forzamos por ID) */
#btnLogin, #btnRegister {
  background: var(--racing) !important;
  color: var(--cream) !important;
  border-radius: 12px !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
}
/* Forgot password link */
#btnForgotPassword {
  color: var(--racing) !important;
  font-family: var(--font-ui) !important;
  font-style: italic !important;
}

/* ── METAS: h3 iconos → racing ──────────────────────────────────── */
#tabPanelMetas h3 [style*="color:var(--teal-600)"],
#tabPanelMetas i[style*="color:var(--teal-600)"] {
  color: var(--racing) !important;
}

/* ════════════════════════════════════════════════════════════════
   FASE 5 — Micro-detalles: tnum global, dots calendario,
   remaining color cleanup, transiciones calmas
   ════════════════════════════════════════════════════════════════ */

/* ── Tabular numbers: toda clase con números financieros ────────── */
.tabular-nums,
[class*="monto"],
[class*="importe"],
[class*="balance"],
[class*="amount"],
[class*="precio"],
[id*="Num"],
[id*="kpi"],
[id*="flujo"] {
  font-feature-settings: 'tnum' !important;
}

/* ── Transición calma en todos los interactivos ─────────────────── */
a, button, [role="button"] {
  transition:
    color 200ms var(--ease-standard),
    background-color 200ms var(--ease-standard),
    border-color 200ms var(--ease-standard),
    opacity 200ms var(--ease-standard) !important;
}

/* ── Calendario: dot dots con colores nuevos ────────────────────── */
.cal-dot.gasto   { background: var(--danger); }
.cal-dot.ingreso { background: var(--mint); }
.cal-monto {
  font-family: var(--font-ui);
  font-weight: 600;
  font-feature-settings: 'tnum', 'ss01';
}

/* ── Textos teal sueltos no capturados en otras fases ───────────── */
[style*="color:var(--teal-600)"],
[style*="color: var(--teal-600)"] { color: var(--racing) !important; }
[style*="color:var(--teal-400)"],
[style*="color: var(--teal-400)"] { color: var(--mint) !important; }
[style*="color:var(--teal-950)"],
[style*="color: var(--teal-950)"] { color: var(--racing) !important; }

/* ── Background teal en elementos inline no capturados ─────────── */
[style*="background:var(--teal-600)"],
[style*="background: var(--teal-600)"] { background: var(--racing) !important; }
[style*="background:var(--teal-950)"],
[style*="background: var(--teal-950)"] { background: var(--racing) !important; }

/* ── Color picker perfil: selected outline → champagne ─────────── */
.dq-color-option.selected,
.dq-color-option[data-selected="true"],
.perfil-color-opt.selected,
.perfil-color-opt[aria-pressed="true"] {
  outline: 2px solid var(--champagne) !important;
  outline-offset: 2px !important;
}

/* ── Dropdowns combo (país / moneda) ────────────────────────────── */
#perfilCountryDropdown,
#perfilCurrencyDropdown {
  background: var(--cream) !important;
  border-color: var(--hairline) !important;
  border-radius: var(--radius-md) !important;
}

/* ── Metas barra de presupuesto ─────────────────────────────────── */
.meta-progress-bar-fill { background: var(--racing) !important; }
.meta-progress-bar-fill--warn { background: var(--champagne) !important; }
.meta-progress-bar-fill--over { background: var(--danger) !important; }

/* ── Letter-spacing negativo en Fraunces >24px ───────────────────── */
.text-2xl, .text-3xl, .text-4xl,
[style*="font-size:32px"],
[style*="font-size: 32px"],
[style*="font-size:28px"] {
  letter-spacing: -0.02em;
}

/* ── Retos: colores y tipografía editorializada ─────────────────── */
.reto-card-title,
.reto-titulo { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.01em; }
.reto-dificultad-facil  { color: var(--moss); }
.reto-dificultad-medio  { color: var(--champagne-deep); }
.reto-dificultad-dificil{ color: var(--danger); }
/* Liga shield: champagne */
.liga-shield-icon { color: var(--champagne) !important; }
.liga-xp-bar-fill { background: linear-gradient(to right, var(--mint), var(--champagne)) !important; }

/* Retos — hero de progresión estilo racing */
#retosPanel {
  border: 1px solid var(--hairline);
  box-shadow: none !important;
}
.retos-hero {
  background: var(--racing);
  border-radius: var(--radius-xl);
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  position: relative;
  overflow: hidden;
}
.retos-hero::before {
  content: '';
  position: absolute;
  right: -14%;
  top: -25%;
  width: 56%;
  height: 100%;
  background: radial-gradient(circle, rgba(143,212,184,0.22) 0%, transparent 72%);
  pointer-events: none;
}
.retos-hero::after {
  content: '';
  position: absolute;
  left: -12%;
  bottom: -35%;
  width: 52%;
  height: 90%;
  background: radial-gradient(circle, rgba(200,178,115,0.20) 0%, transparent 70%);
  pointer-events: none;
}
.retos-hero > * { position: relative; z-index: 1; }
.retos-hero-league {
  display: flex;
  align-items: center;
  gap: 10px;
}
.retos-hero-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.retos-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: var(--champagne);
}
.retos-hero-subtitle {
  margin: 2px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(244,239,230,0.8);
}
.retos-hero-xp-meta {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(244,239,230,0.82);
}
.retos-hero-xp-track {
  margin-top: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 22%, transparent);
  overflow: hidden;
}
.retos-hero-xp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to right, var(--champagne), var(--mint));
}
.retos-hero-kpis-slot { margin-top: 12px; }
.retos-hero-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.retos-hero-kpi-card {
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}
.retos-hero-kpi-value {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
  font-feature-settings: 'tnum';
}
.retos-hero-kpi-value-hot { color: var(--champagne); }
.retos-hero-kpi-label {
  margin: 5px 0 0;
  color: rgba(244,239,230,0.82);
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.retos-catalogo-header {
  margin: 14px 2px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.retos-catalogo-title {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
}
.retos-catalogo-link {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--racing);
  font-weight: 700;
}

.dark .retos-hero-title { color: var(--paper); }
.dark .retos-hero-subtitle,
.dark .retos-hero-xp-meta,
.dark .retos-hero-kpi-label { color: rgba(10,22,18,0.78); }
.dark .retos-hero-kpi-value { color: var(--paper); }
.dark .retos-hero-kpi-value-hot { color: var(--champagne-deep); }
.dark .retos-catalogo-title { color: var(--ink); }

/* ── Recurrentes alert lines ─────────────────────────────────────── */
.recurrente-alerta-badge { background: rgba(200,178,115,0.15); color: var(--champagne-deep); border-color: rgba(200,178,115,0.3); }

/* ── Modal / Sheet floating surfaces ────────────────────────────── */
.modal-sheet,
.dq-modal,
[role="dialog"] > div,
.fixed.inset-0 + div {
  box-shadow: var(--shadow-floating) !important;
}

/* ── Scrollbar editorial (webkit) ──────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ════════════════════════════════════════════════════════════════
   DARK MODE — correcciones editoriales completas
   ════════════════════════════════════════════════════════════════ */

/* Surface base */
.dark body { background: var(--paper) !important; }

/* Modales y paneles flotantes */
.dark #authOverlay > div,
.dark #asistentePanel,
.dark #asesorPanel,
.dark #onboardingOverlay > div {
  background: var(--paper) !important;
  border-color: var(--hairline) !important;
}
.dark #authOverlay > div > div:first-child {
  background: var(--paper-2) !important;
  border-bottom-color: var(--hairline) !important;
}

/* Tooltips / dropdowns */
.dark [role="tooltip"],
.dark .absolute.bg-slate-900,
.dark [class*="dropdown"],
.dark [class*="Dropdown"] {
  background: var(--paper-2) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}

/* Agenda próximos días */
.dark #agendaWrap .bg-white,
.dark #agendaWrap .bg-slate-50\/70 {
  background: var(--cream) !important;
}

/* Skeletons */
.dark .animate-pulse .bg-slate-100,
.dark .animate-pulse [class*="bg-slate"] {
  background: var(--paper-2) !important;
}

/* Tags, badges, chips */
.dark .bg-teal-50   { background: rgba(143,212,184,0.10) !important; }
.dark .text-teal-700 { color: var(--mint) !important; }
.dark .border-teal-200 { border-color: rgba(143,212,184,0.25) !important; }

/* Botones outline en dark */
.dark button[class*="border-slate"],
.dark button[class*="border-white"] {
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
  background: transparent !important;
}

/* Bottom nav dark — ya en tokens, refuerzo */
.dark #bottomNav { background: rgba(10,22,18,0.92) !important; }

/* Análisis header dark — ink profundo */
.dark .analisis-header { background: var(--cream) !important; }
.dark #tabPanelAnalisis .analisis-header p.text-white,
.dark #tabPanelAnalisis .analisis-header .text-white {
  color: var(--ink) !important;
}
.dark #tabPanelAnalisis .analisis-header p[style*="rgba(255,255,255,0.75)"] {
  color: var(--muted) !important;
}
.dark #tabPanelAnalisis #btnAnalisisVistaToggle,
.dark #tabPanelAnalisis #btnAbrirInformeMensual {
  background: var(--paper-2) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}
.dark #tabPanelAnalisis #btnAnalisisVistaToggle:hover,
.dark #tabPanelAnalisis #btnAbrirInformeMensual:hover {
  background: var(--paper) !important;
}
.dark #tabPanelAnalisis #statsRangoBtns .stats-rango-btn {
  background: var(--paper-2) !important;
  border-color: var(--hairline) !important;
  color: var(--muted) !important;
}
.dark #tabPanelAnalisis #statsRangoBtns .stats-rango-btn.active {
  background: var(--racing) !important;
  border-color: var(--racing) !important;
  color: var(--cream) !important;
}
.dark #tabPanelAnalisis #statsRangoBtns .stats-rango-btn:hover:not(.active) {
  background: var(--paper) !important;
  color: var(--ink-2) !important;
}

/* Stats rango btns dark */
.dark .stats-rango-btn {
  background: var(--paper-2) !important;
  border-color: var(--hairline) !important;
  color: var(--muted) !important;
}
.dark .stats-rango-btn.active {
  background: var(--racing) !important;
  border-color: var(--racing) !important;
  color: var(--cream) !important;
  font-weight: 600 !important;
}

/* Inicio — mini KPIs: texto claro sobre tarjeta cristal (cabecera racing) */
.flujo-header-panel .kpi-card .flujo-kpi-label {
  color: rgba(244, 239, 230, 0.72) !important;
  font-feature-settings: 'ss01';
}
.flujo-header-panel .kpi-card .num-list-lg {
  font-size: 17px !important;
  font-weight: 600 !important;
}
.flujo-header-panel .kpi-card .flujo-monto-eur {
  color: rgba(248, 250, 252, 0.78) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.dark #tabPanelInicio .flujo-header-panel .kpi-card .flujo-kpi-label {
  color: var(--ink-2) !important;
  opacity: 1 !important;
}
.dark #tabPanelInicio .flujo-header-panel .kpi-card .flujo-monto-eur {
  color: var(--ink-2) !important;
}

/*
 * Inicio — modo oscuro: la cabecera mantiene primario mint (--racing en dark)
 * y el texto usa tonos oscuros para conservar contraste sobre ese fondo.
 */
.dark #tabPanelInicio .flujo-header-panel {
  background: var(--racing) !important;
  color: var(--text-on-brand);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}
.dark #tabPanelInicio .flujo-header-panel::before,
.dark #tabPanelInicio .flujo-header-panel::after {
  opacity: 0.2;
}
.dark #tabPanelInicio .flujo-header-panel .durantiq-wordmark,
.dark #tabPanelInicio .flujo-header-panel .durantiq-wordmark.text-white {
  color: var(--text-on-brand) !important;
}
.dark #tabPanelInicio .flujo-header-panel #userEmailLabel,
.dark #tabPanelInicio .flujo-header-panel .text-white\/85 {
  color: var(--text-on-brand) !important;
  opacity: 0.86 !important;
}
.dark #tabPanelInicio .flujo-header-panel p[style*="letter-spacing:1.5px"] {
  color: var(--text-on-brand) !important;
  opacity: 1 !important;
}
/* Balance principal: evita mint sobre mint, mantiene alto contraste */
.dark #tabPanelInicio #flujoDiferenciaNum.text-flujo-good {
  color: var(--text-on-brand) !important;
}
.dark #tabPanelInicio #flujoDiferenciaNum.text-flujo-bad {
  color: var(--danger) !important;
}
.dark #tabPanelInicio #flujoDiferenciaNum:not(.text-flujo-good):not(.text-flujo-bad) {
  color: var(--text-on-brand) !important;
}
.dark #tabPanelInicio .flujo-header-panel .flujo-monto-eur {
  color: var(--text-on-brand) !important;
  opacity: 0.94 !important;
}
.dark #tabPanelInicio .flujo-header-panel .flujo-kpi-label {
  color: var(--ink-2) !important;
  opacity: 1 !important;
}
.dark #tabPanelInicio #darkModeToggleBtn,
.dark #tabPanelInicio #globalSearchBtn {
  color: var(--text-on-brand) !important;
  border-color: color-mix(in srgb, var(--paper) 24%, transparent) !important;
  background: color-mix(in srgb, var(--paper) 10%, transparent) !important;
}
.dark #tabPanelInicio #darkModeToggleBtn:hover,
.dark #tabPanelInicio #globalSearchBtn:hover {
  background: color-mix(in srgb, var(--paper) 16%, transparent) !important;
}
/* Inicio (modo claro): tarjetas flotantes premium sobre racing */
html:not(.dark) #tabPanelInicio .flujo-header-panel .kpi-card {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--racing) 82%, var(--mint) 18%) 0%,
    color-mix(in srgb, var(--racing) 74%, var(--mint) 26%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--mint) 26%, transparent) !important;
  box-shadow:
    0 12px 28px rgba(6, 26, 20, 0.22),
    inset 0 1px 0 rgba(244,239,230,0.08) !important;
  backdrop-filter: blur(8px);
}
html:not(.dark) #tabPanelInicio .dq-salud-hero-inner {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--racing) 84%, var(--mint) 16%) 0%,
    color-mix(in srgb, var(--racing) 76%, var(--mint) 24%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--mint) 26%, transparent) !important;
  box-shadow:
    0 14px 32px rgba(6, 26, 20, 0.22),
    inset 0 1px 0 rgba(244,239,230,0.08) !important;
}
html:not(.dark) #tabPanelInicio #btnAbrirPatrimonio {
  border-color: color-mix(in srgb, var(--mint) 30%, transparent) !important;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--racing) 76%, var(--mint) 24%) 0%,
    color-mix(in srgb, var(--racing) 68%, var(--mint) 32%) 100%) !important;
  color: var(--cream) !important;
  box-shadow:
    0 10px 22px rgba(6, 26, 20, 0.22),
    inset 0 1px 0 rgba(244,239,230,0.09) !important;
}
html:not(.dark) #tabPanelInicio #btnAbrirPatrimonio:hover {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--racing) 70%, var(--mint) 30%) 0%,
    color-mix(in srgb, var(--racing) 62%, var(--mint) 38%) 100%) !important;
}
.dark #tabPanelInicio .flujo-header-panel .kpi-card {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--racing) 78%, var(--paper) 22%) 0%,
    color-mix(in srgb, var(--racing) 70%, var(--paper) 30%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--mint) 16%, transparent) !important;
  box-shadow:
    0 10px 24px rgba(5, 14, 11, 0.2),
    inset 0 1px 0 rgba(244,239,230,0.06) !important;
  backdrop-filter: blur(10px);
}
.dark #tabPanelInicio .flujo-header-panel .flujo-monto-num--hero-ing {
  color: var(--mint) !important;
}
.dark #tabPanelInicio .flujo-header-panel .flujo-monto-num--hero-gas {
  color: var(--danger) !important;
}
/* IQ Score — caja y tipografía legibles sobre cabecera oscura */
.dark #tabPanelInicio .dq-salud-hero-inner {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--racing) 80%, var(--paper) 20%) 0%,
    color-mix(in srgb, var(--racing) 72%, var(--paper) 28%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--mint) 16%, transparent) !important;
  box-shadow:
    0 12px 30px rgba(5, 14, 11, 0.22),
    inset 0 1px 0 rgba(244,239,230,0.06) !important;
}
.dark #tabPanelInicio .dq-salud-hero-inner svg circle:first-of-type {
  stroke: var(--hairline) !important;
}
.dark #tabPanelInicio #saludFinScoreTipBtn {
  color: var(--ink) !important;
  opacity: 1 !important;
}
.dark #tabPanelInicio #saludFinScoreTipBtn:hover {
  background: var(--paper-2) !important;
}
.dark #tabPanelInicio #saludFinScoreTipBtn .rounded-full {
  background: var(--paper-2) !important;
  border-color: var(--hairline) !important;
  --tw-ring-color: var(--hairline) !important;
}
.dark #tabPanelInicio #saludFinScoreTipBtn [data-lucide] {
  color: var(--ink-2) !important;
}
.dark #tabPanelInicio .dq-salud-hero-msg--muted {
  color: var(--ink-2) !important;
}
.dark #tabPanelInicio .dq-salud-hero-msg--ok {
  color: var(--champagne) !important;
}
.dark #tabPanelInicio .dq-salud-hero-msg--mid {
  color: var(--champagne-deep) !important;
}
.dark #tabPanelInicio .dq-salud-hero-msg--bad {
  color: var(--danger) !important;
}
.dark #tabPanelInicio #saludFinancieraWrap [data-i18n="salud_fin_subtitle"] {
  color: var(--ink-2) !important;
  opacity: 1 !important;
}
.dark #tabPanelInicio #btnAbrirPatrimonio {
  border-color: color-mix(in srgb, var(--mint) 20%, transparent) !important;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--racing) 74%, var(--paper) 26%) 0%,
    color-mix(in srgb, var(--racing) 66%, var(--paper) 34%) 100%) !important;
  color: var(--ink) !important;
  box-shadow:
    0 8px 18px rgba(5, 14, 11, 0.18),
    inset 0 1px 0 rgba(244,239,230,0.07) !important;
}
.dark #tabPanelInicio #btnAbrirPatrimonio:hover {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--racing) 68%, var(--paper) 32%) 0%,
    color-mix(in srgb, var(--racing) 60%, var(--paper) 40%) 100%) !important;
}
/* Variación mes anterior: chips legibles sobre fondo paper */
.dark #tabPanelInicio .vs-mes-ant-pill--neutral {
  color: var(--ink) !important;
  background: var(--paper-2) !important;
}
.dark #tabPanelInicio .flujo-var-neutral {
  color: var(--ink) !important;
  background: var(--paper-2) !important;
}

/* Grupos — cabeceras y subtítulos legibles en dark/light */
#tabPanelGrupos .flujo-header-panel {
  background: var(--cream) !important;
  color: var(--ink) !important;
}
#tabPanelGrupos .flujo-header-panel h2,
#tabPanelGrupos .flujo-header-panel #grupoDetalleNombre {
  color: var(--ink) !important;
}
#tabPanelGrupos .flujo-header-panel p.text-white\/60,
#tabPanelGrupos .flujo-header-panel #grupoDetalleDesc,
#tabPanelGrupos .flujo-header-panel #grupoMiBalanceLabel {
  color: var(--muted) !important;
}
#tabPanelGrupos #grupoDetalleHeader [style*="background:rgba(255,255,255,0.1)"] {
  background: var(--paper-2) !important;
  border-color: var(--hairline) !important;
}

/* Scrollbar dark */
.dark ::-webkit-scrollbar-thumb { background: rgba(244,239,230,0.10); }