/* ==========================================================================
   ElecafFinanzas - Sistema de Diseño & Estilos Globales
   Gastos Familiares Semanales | Mobile-First (375px)
   Sin Frameworks | Material Design 3 "Índigo" (extraído del proyecto Stitch
   16067208372106283129 — paleta real "Gastos en Familia Índigo": primario
   índigo #004AC6, secundario esmeralda #006C49, terciario ámbar #784B00,
   superficies tonales azuladas, tipografía Plus Jakarta Sans)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Importación de Tipografía (Google Fonts)
   - Plus Jakarta Sans: única familia tipográfica de la app (igual que las
     pantallas "Índigo" de Stitch: títulos, cuerpo, cifras y controles)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Variables CSS del Sistema de Diseño (Design Tokens — Material 3)
   Roles tomados tal cual del tailwind.config de las pantallas Índigo de
   Stitch (home/reportes "Índigo", login, carga de gasto, estados vacíos,
   config de presupuesto) y de la variante "Modo Oscuro" (misma semilla de
   color, tonos M3 invertidos).
   -------------------------------------------------------------------------- */
:root {
  /* ---- Superficies (Modo Claro) ---- */
  --bg-body: #F8F9FF;
  --surface: #F8F9FF;
  --surface-dim: #CBDBF5;
  --surface-bright: #F8F9FF;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #EFF4FF;
  --surface-container: #E5EEFF;
  --surface-container-high: #DCE9FF;
  --surface-container-highest: #D3E4FE;
  --surface-mint: #EFF4FF; /* alias retrocompatible, ya no "menta": tono azulado */
  --surface-alt: #E5EEFF;

  /* ---- Color de texto sobre superficie ---- */
  --on-surface: #0B1C30;
  --on-surface-variant: #434655;
  --outline: #737686;
  --outline-variant: #C3C6D7;
  --border-color: rgba(0, 74, 198, 0.10);
  --border-divider: #E2E8F0;
  --input-border: #C3C6D7;

  /* ---- Primario: Índigo #004AC6 ---- */
  --color-primary: #004AC6;
  --color-primary-hover: #003EA8;
  --color-primary-active: #00327E;
  --color-primary-contrast: #FFFFFF;
  --color-primary-container: #2563EB;
  --on-primary-container: #EEEFFF;
  --primary-fixed: #DBE1FF;
  --on-primary-fixed: #00174B;
  --primary-fixed-dim: #B4C5FF;
  --on-primary-fixed-variant: #003EA8;

  /* ---- Secundario: Esmeralda #006C49 (estado "sano" / sincronizado) ---- */
  --color-secondary: #006C49;
  --color-secondary-hover: #00714D;
  --color-secondary-tint: rgba(0, 108, 73, 0.12);
  --secondary-container: #6CF8BB;
  --on-secondary-container: #00714D;
  --secondary-fixed: #6FFBBE;
  --secondary-fixed-dim: #4EDEA3;
  --on-secondary-fixed: #002113;
  --on-secondary-fixed-variant: #005236;

  /* ---- Terciario: Ámbar #784B00 (acentos, alertas suaves) ---- */
  --color-tertiary: #784B00;
  --tertiary-container: #996100;
  --on-tertiary-container: #FFEEDD;
  --tertiary-fixed: #FFDDB8;
  --tertiary-fixed-dim: #FFB95F;
  --on-tertiary-fixed: #2A1700;
  --on-tertiary-fixed-variant: #653E00;

  /* ---- Error ---- */
  --color-error: #BA1A1A;
  --on-error: #FFFFFF;
  --error-container: #FFDAD6;
  --on-error-container: #93000A;

  /* ---- Compat: nombres usados por el resto de los estilos ---- */
  --color-tertiary-muted: var(--on-surface-variant);
  --color-tertiary-subtle: var(--outline);

  /* ---- Estados Semánticos de Salud Presupuestaria ---- */
  --budget-sano: var(--color-secondary);
  --budget-sano-bg: var(--secondary-container);
  --budget-sano-border: rgba(0, 108, 73, 0.35);
  --budget-sano-text: var(--on-secondary-container);

  --budget-cerca-limite: var(--color-tertiary);
  --budget-cerca-limite-bg: var(--tertiary-fixed);
  --budget-cerca-limite-border: rgba(120, 75, 0, 0.35);
  --budget-cerca-limite-text: var(--on-tertiary-fixed-variant);

  --budget-excedido: var(--color-error);
  --budget-excedido-bg: var(--error-container);
  --budget-excedido-border: rgba(186, 26, 26, 0.35);
  --budget-excedido-text: var(--on-error-container);

  /* ---- Tarjeta Hero de Presupuesto (gradiente índigo, constante en ambos
     temas — igual que la pantalla "1. Home Principal Semanal (Índigo)") ---- */
  --budget-hero-grad: linear-gradient(135deg, #0048C8 0%, #2F66E8 55%, #00327E 100%);
  --budget-hero-text: #FFFFFF;
  --budget-hero-text-dim: rgba(255, 255, 255, 0.78);

  /* ---- Sombras (tinte azul índigo, tomadas de los shadow-[...] de Stitch) ---- */
  --shadow-xs: 0px 1px 3px 0px rgba(100, 116, 139, 0.08);
  --shadow-sm: 0px 2px 8px -2px rgba(37, 99, 235, 0.05), 0px 1px 3px 0px rgba(100, 116, 139, 0.08);
  --shadow-md: 0px 4px 16px -4px rgba(37, 99, 235, 0.10), 0px 2px 6px -1px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0px 16px 32px -8px rgba(15, 23, 42, 0.14), 0px 4px 8px -2px rgba(15, 23, 42, 0.05);
  --shadow-hero: 0px 12px 28px -6px rgba(0, 74, 198, 0.30), 0px 4px 10px -2px rgba(0, 74, 198, 0.16);
  --shadow-fab: 0px 14px 28px -6px rgba(0, 74, 198, 0.38), 0px 4px 10px -2px rgba(0, 74, 198, 0.22);

  /* ---- Tipografías (una sola familia, igual que Stitch Índigo) ---- */
  --font-family-title: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Escala tipográfica M3 (rem @ 16px) ---- */
  --fs-display-lg-mobile: 2.125rem;   /* 34px */
  --fs-headline-lg-mobile: 1.5rem;    /* 24px */
  --fs-headline-lg: 1.875rem;         /* 30px */
  --fs-headline-md: 1.25rem;          /* 20px */
  --fs-title-lg: 1.125rem;            /* 18px */
  --fs-title-md: 1rem;                /* 16px */
  --fs-body-lg: 1rem;                 /* 16px */
  --fs-body-md: 0.875rem;             /* 14px */
  --fs-body-sm: 0.75rem;              /* 12px */
  --fs-label-lg: 0.875rem;            /* 14px */
  --fs-label-md: 0.75rem;             /* 12px */
  --fs-label-sm: 0.6875rem;           /* 11px */

  /* ---- Bordes y Curvaturas (M3: DEFAULT 4px / lg 8px / xl 12px / full) ---- */
  --radius-xs: 0.25rem;      /* 4px */
  --radius-sm: 0.5rem;       /* 8px  — iconos pequeños */
  --radius-md: 0.75rem;      /* 12px — inputs, items de lista */
  --radius-card: 1rem;       /* 16px — tarjetas estándar */
  --radius-card-sm: 0.75rem; /* 12px — tarjetas/items compactos */
  --radius-card-lg: 1.5rem;  /* 24px — hero de presupuesto, monto grande */
  --radius-pill: 9999px;
  --radius-button: 9999px;
  --radius-chip: 9999px;
  --radius-input: 0.75rem;   /* 12px — M3 filled text field */

  /* ---- Escala de Espaciado (M3: xs 4 / sm 8 / md 16 / lg 24 / xl 32) ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* ---- Transiciones ---- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   2. Modo Oscuro (Tokens M3 invertidos — misma semilla de color índigo,
   tomados de la pantalla "8. Home Principal Semanal (Modo Oscuro)")
   Activable por:
   - Atributo HTML: [data-theme="dark"]
   - Clase: .dark o .dark-theme en <html> o <body>
   - Fallback automático si el SO prefiere dark y no se forzó "light"
   -------------------------------------------------------------------------- */
[data-theme="dark"],
.dark,
.dark-theme {
  --bg-body: #0D1322;
  --surface: #0D1322;
  --surface-dim: #0D1322;
  --surface-bright: #33394A;
  --surface-container-lowest: #080E1D;
  --surface-container-low: #151B2B;
  --surface-container: #191F2F;
  --surface-container-high: #242A3A;
  --surface-container-highest: #2F3445;
  --surface-mint: #151B2B;
  --surface-alt: #191F2F;

  --on-surface: #DDE2F8;
  --on-surface-variant: #C2C6D6;
  --outline: #8C909F;
  --outline-variant: #424754;
  --border-color: rgba(173, 198, 255, 0.14);
  --border-divider: #242A3A;
  --input-border: #424754;

  --color-primary: #ADC6FF;
  --color-primary-hover: #D8E2FF;
  --color-primary-active: #8CB0F2;
  --color-primary-contrast: #002E6A;
  --color-primary-container: #4D8EFF;
  --on-primary-container: #00285D;
  --primary-fixed: #D8E2FF;
  --on-primary-fixed: #001A42;
  --primary-fixed-dim: #ADC6FF;
  --on-primary-fixed-variant: #004395;

  --color-secondary: #4EDEA3;
  --color-secondary-hover: #6FFBBE;
  --color-secondary-tint: rgba(78, 222, 163, 0.15);
  --secondary-container: #00A572;
  --on-secondary-container: #00311F;
  --secondary-fixed: #6FFBBE;
  --secondary-fixed-dim: #4EDEA3;
  --on-secondary-fixed: #002113;
  --on-secondary-fixed-variant: #005236;

  --color-tertiary: #FFB95F;
  --tertiary-container: #CA8100;
  --on-tertiary-container: #3E2400;
  --tertiary-fixed: #FFDDB8;
  --tertiary-fixed-dim: #FFB95F;
  --on-tertiary-fixed: #2A1700;
  --on-tertiary-fixed-variant: #653E00;

  --color-error: #FFB4AB;
  --on-error: #690005;
  --error-container: #93000A;
  --on-error-container: #FFDAD6;

  /* Presupuesto en Dark (tonos "fixed", legibles sobre fondo oscuro) */
  --budget-sano: var(--color-secondary);
  --budget-sano-bg: rgba(0, 165, 114, 0.28);
  --budget-sano-border: rgba(78, 222, 163, 0.40);
  --budget-sano-text: #6FFBBE;

  --budget-cerca-limite: var(--color-tertiary);
  --budget-cerca-limite-bg: rgba(202, 129, 0, 0.28);
  --budget-cerca-limite-border: rgba(255, 185, 95, 0.40);
  --budget-cerca-limite-text: #FFDDB8;

  --budget-excedido: var(--color-error);
  --budget-excedido-bg: rgba(147, 0, 10, 0.35);
  --budget-excedido-border: rgba(255, 180, 171, 0.40);
  --budget-excedido-text: #FFDAD6;

  --budget-hero-grad: linear-gradient(135deg, #0B3FA8 0%, #2E5FD9 55%, #082C7A 100%);

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(173, 198, 255, 0.08);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(173, 198, 255, 0.12);
  --shadow-hero: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(173, 198, 255, 0.12);
  --shadow-fab: 0 12px 28px rgba(173, 198, 255, 0.30), 0 4px 10px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --bg-body: #0D1322;
    --surface: #0D1322;
    --surface-dim: #0D1322;
    --surface-bright: #33394A;
    --surface-container-lowest: #080E1D;
    --surface-container-low: #151B2B;
    --surface-container: #191F2F;
    --surface-container-high: #242A3A;
    --surface-container-highest: #2F3445;
    --surface-mint: #151B2B;
    --surface-alt: #191F2F;

    --on-surface: #DDE2F8;
    --on-surface-variant: #C2C6D6;
    --outline: #8C909F;
    --outline-variant: #424754;
    --border-color: rgba(173, 198, 255, 0.14);
    --border-divider: #242A3A;
    --input-border: #424754;

    --color-primary: #ADC6FF;
    --color-primary-hover: #D8E2FF;
    --color-primary-active: #8CB0F2;
    --color-primary-contrast: #002E6A;
    --color-primary-container: #4D8EFF;
    --on-primary-container: #00285D;
    --primary-fixed: #D8E2FF;
    --on-primary-fixed: #001A42;
    --primary-fixed-dim: #ADC6FF;
    --on-primary-fixed-variant: #004395;

    --color-secondary: #4EDEA3;
    --color-secondary-hover: #6FFBBE;
    --color-secondary-tint: rgba(78, 222, 163, 0.15);
    --secondary-container: #00A572;
    --on-secondary-container: #00311F;
    --secondary-fixed: #6FFBBE;
    --secondary-fixed-dim: #4EDEA3;
    --on-secondary-fixed: #002113;
    --on-secondary-fixed-variant: #005236;

    --color-tertiary: #FFB95F;
    --tertiary-container: #CA8100;
    --on-tertiary-container: #3E2400;
    --tertiary-fixed: #FFDDB8;
    --tertiary-fixed-dim: #FFB95F;
    --on-tertiary-fixed: #2A1700;
    --on-tertiary-fixed-variant: #653E00;

    --color-error: #FFB4AB;
    --on-error: #690005;
    --error-container: #93000A;
    --on-error-container: #FFDAD6;

    --budget-sano: var(--color-secondary);
    --budget-sano-bg: rgba(0, 165, 114, 0.28);
    --budget-sano-border: rgba(78, 222, 163, 0.40);
    --budget-sano-text: #6FFBBE;

    --budget-cerca-limite: var(--color-tertiary);
    --budget-cerca-limite-bg: rgba(202, 129, 0, 0.28);
    --budget-cerca-limite-border: rgba(255, 185, 95, 0.40);
    --budget-cerca-limite-text: #FFDDB8;

    --budget-excedido: var(--color-error);
    --budget-excedido-bg: rgba(147, 0, 10, 0.35);
    --budget-excedido-border: rgba(255, 180, 171, 0.40);
    --budget-excedido-text: #FFDAD6;

    --budget-hero-grad: linear-gradient(135deg, #0B3FA8 0%, #2E5FD9 55%, #082C7A 100%);

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(173, 198, 255, 0.08);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(173, 198, 255, 0.12);
    --shadow-hero: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(173, 198, 255, 0.12);
    --shadow-fab: 0 12px 28px rgba(173, 198, 255, 0.30), 0 4px 10px rgba(0, 0, 0, 0.45);
  }
}

/* --------------------------------------------------------------------------
   3. Reseteo y Base Tipográfica
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-body);
  color: var(--on-surface);
  font-family: var(--font-family-body);
  font-size: var(--fs-body-md);
  line-height: 1.5;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-title);
  color: var(--on-surface);
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-headline-lg-mobile); font-weight: 800; }
h2 { font-size: var(--fs-headline-md); }
h3 { font-size: var(--fs-title-lg); }
h4 { font-size: var(--fs-title-md); }

p {
  color: var(--on-surface-variant);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
  user-select: none;
}

/* --------------------------------------------------------------------------
   4. Cifras Numéricas y Monetarias Tabulares (font-variant-numeric: tabular-nums)
   -------------------------------------------------------------------------- */
.tabular-nums,
.num,
.amount,
.currency,
.stat-value,
.budget-amount,
.budget-health__value,
.expense-amount,
input[type="number"] {
  font-family: var(--font-family-title);
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   5. Contenedor de la Aplicación (Mobile-First 375px)
   -------------------------------------------------------------------------- */
.app-container {
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 1rem 6.5rem 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 375px) {
  .app-container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   6. Encabezado (.header)
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.25rem 0.75rem 0.25rem;
  background-color: rgba(248, 249, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 8px rgba(0, 25, 90, 0.04);
  transition: background-color var(--transition-normal);
}

[data-theme="dark"] .header,
.dark .header,
.dark-theme .header {
  background-color: rgba(13, 19, 34, 0.86);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) .header {
    background-color: rgba(13, 19, 34, 0.86);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  }
}

.header__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.header__brand {
  font-family: var(--font-family-title);
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: -0.02em;
}

.header__subtitle {
  font-size: var(--fs-label-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header__btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.header__btn-icon:active {
  transform: scale(0.92);
}

/* --------------------------------------------------------------------------
   7. Tarjetas (.card) — M3 rounded-2xl (16px), sombra tonal sutil
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background-color: var(--surface-container-lowest);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              background-color var(--transition-normal);
  overflow: hidden;
}

.card--mint,
.card-mint {
  background-color: var(--surface-container-low);
  border-color: rgba(0, 74, 198, 0.16);
}

.card--interactive {
  cursor: pointer;
}

.card--interactive:active {
  transform: scale(0.985);
  box-shadow: var(--shadow-xs);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.card__title {
  font-size: var(--fs-title-lg);
  font-weight: 700;
  color: var(--on-surface);
}

.card__caption {
  font-size: var(--fs-body-sm);
  color: var(--on-surface-variant);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card__footer {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-body-sm);
  color: var(--on-surface-variant);
}

/* --------------------------------------------------------------------------
   8. Botón Primario (.btn-primary) — Índigo #004AC6, rounded-full
   -------------------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-button);
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-family-title);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-md);
  border: 1px solid transparent;
  transition: all var(--transition-normal);
  text-align: center;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--color-primary-active);
  transform: scale(0.97);
  box-shadow: var(--shadow-xs);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary--inline {
  width: auto;
  padding: 0.6rem 1.15rem;
  font-size: var(--fs-label-lg);
}

/* --------------------------------------------------------------------------
   9. Floating Action Button (.fab) — gradiente índigo
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  right: max(1.25rem, calc((100vw - 480px) / 2 + 1.25rem));
  z-index: 50;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-fab);
  border: 2px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform var(--transition-bounce), box-shadow var(--transition-normal);
  outline: none;
}

.fab:hover {
  transform: translateY(-3px) scale(1.05);
}

.fab:active {
  transform: translateY(0) scale(0.92);
}

.fab svg,
.fab .icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 2.4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. Píldoras y Chips de Categoría (.chip)
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-chip);
  background-color: var(--surface-container);
  color: var(--on-surface);
  font-family: var(--font-family-body);
  font-size: var(--fs-label-lg);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  user-select: none;
}

.chip:hover {
  background-color: var(--surface-container-high);
}

.chip:active {
  transform: scale(0.95);
}

.chip.active,
.chip--active {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px -2px rgba(0, 74, 198, 0.35);
}

.chip__icon {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
}

.chips-scroll {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.75rem 0.25rem;
  margin: 0 -0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chips-scroll::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------------------------------
   11. Salud Presupuestaria (.budget-health) — tarjeta Hero con gradiente
   índigo cuando hay datos (igual que la sección "Disponible Esta Semana" de
   Stitch Índigo); tarjeta neutra cuando todavía no hay presupuesto cargado.
   Estados: .sano (esmeralda) / .cerca-limite (ámbar) / .excedido (error)
   se aplican sobre el badge, la barra de progreso y el detalle — el fondo
   del hero se mantiene índigo constante, igual que la referencia.
   -------------------------------------------------------------------------- */
.budget-health {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem;
  border-radius: var(--radius-card-lg);
  background-color: var(--surface-container-low);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.budget-health.sano,
.budget-health.cerca-limite,
.budget-health.excedido {
  background: var(--budget-hero-grad);
  border-color: transparent;
  color: var(--budget-hero-text);
  box-shadow: var(--shadow-hero);
}

.budget-health.sano::before,
.budget-health.cerca-limite::before,
.budget-health.excedido::before {
  content: "";
  position: absolute;
  width: 11rem;
  height: 11rem;
  top: -4rem;
  right: -3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(30px);
  pointer-events: none;
}

.budget-health.sano::after,
.budget-health.cerca-limite::after,
.budget-health.excedido::after {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  bottom: -3rem;
  left: -2.5rem;
  border-radius: 50%;
  background: rgba(111, 251, 190, 0.14);
  filter: blur(22px);
  pointer-events: none;
}

.budget-health__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.budget-health__label {
  font-size: var(--fs-label-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}

.budget-health.sano .budget-health__label,
.budget-health.cerca-limite .budget-health__label,
.budget-health.excedido .budget-health__label {
  color: var(--budget-hero-text-dim);
}

.budget-health__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-family-title);
  font-size: var(--fs-label-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  background-color: var(--surface-container-high);
  color: var(--on-surface-variant);
}

.budget-health__badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: currentColor;
}

.budget-health.sano .budget-health__badge {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
}

.budget-health.cerca-limite .budget-health__badge {
  background-color: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed-variant);
}

.budget-health.excedido .budget-health__badge {
  background-color: var(--error-container);
  color: var(--on-error-container);
}

.budget-health__track {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 0.7rem;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.budget-health.sano .budget-health__track,
.budget-health.cerca-limite .budget-health__track,
.budget-health.excedido .budget-health__track {
  background-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.budget-health__progress {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  background-color: var(--outline-variant);
  transition: width 600ms cubic-bezier(0.34, 1.2, 0.64, 1),
              background-color var(--transition-normal);
}

.budget-health.sano .budget-health__progress {
  background: linear-gradient(90deg, var(--secondary-fixed-dim), var(--secondary-fixed));
}

.budget-health.cerca-limite .budget-health__progress {
  background: linear-gradient(90deg, var(--tertiary-fixed-dim), var(--tertiary-fixed));
}

.budget-health.excedido .budget-health__progress {
  background: linear-gradient(90deg, #FF8A80, #FFCDD2);
}

.budget-health__numbers {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.budget-health__spent {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

.budget-health.sano .budget-health__spent,
.budget-health.cerca-limite .budget-health__spent,
.budget-health.excedido .budget-health__spent {
  color: var(--budget-hero-text);
}

.budget-health__limit {
  font-size: var(--fs-body-md);
  font-weight: 600;
  color: var(--on-surface-variant);
}

.budget-health.sano .budget-health__limit,
.budget-health.cerca-limite .budget-health__limit,
.budget-health.excedido .budget-health__limit {
  color: var(--budget-hero-text-dim);
}

/* --------------------------------------------------------------------------
   12. Elementos de Formulario — M3 Filled Text Field (sin borde, fondo tonal)
   -------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.form-label {
  font-size: var(--fs-label-md);
  font-weight: 700;
  color: var(--on-surface-variant);
  letter-spacing: 0.01em;
}

.form-control,
.input {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: var(--surface-container-low);
  border: 1.5px solid transparent;
  border-radius: var(--radius-input);
  color: var(--on-surface);
  font-family: var(--font-family-body);
  font-size: var(--fs-body-md);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.form-control:focus,
.input:focus {
  background-color: var(--surface-container);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 74, 198, 0.16);
}

.form-control::placeholder,
.input::placeholder {
  color: var(--outline);
}

/* Campo de monto grande (Bottom Sheet de carga de gasto) */
.amount-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  margin-bottom: 1.1rem;
  background-color: var(--surface-container-low);
  border-radius: var(--radius-card-lg);
  box-shadow: inset 0 0 0 1px var(--border-color);
}

.amount-field__label {
  font-size: var(--fs-label-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
}

.input-amount {
  font-family: var(--font-family-title);
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  padding: 0.25rem;
  border: none;
  background: transparent;
  color: var(--on-surface);
  letter-spacing: -0.02em;
  width: 100%;
}

.input-amount:focus {
  outline: none;
  box-shadow: none;
}

.input-amount::placeholder {
  color: var(--outline);
}

/* --------------------------------------------------------------------------
   13. Lista y Tarjetas de Gastos (.expense-item) — M3 list item (rounded-xl)
   -------------------------------------------------------------------------- */
.expense-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.expense-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.9rem;
  background-color: var(--surface-container-lowest);
  border-radius: var(--radius-card-sm);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.expense-item:active {
  transform: scale(0.985);
  background-color: var(--surface-container-low);
}

.expense-item__left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.expense-item__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.expense-item__details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.expense-item__title {
  font-size: var(--fs-body-md);
  font-weight: 700;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-item__meta {
  font-size: var(--fs-label-sm);
  color: var(--on-surface-variant);
}

.expense-item__amount {
  font-family: var(--font-family-title);
  font-size: var(--fs-title-md);
  font-weight: 800;
  color: var(--on-surface);
  text-align: right;
  flex-shrink: 0;
  padding-left: 0.5rem;
}

/* --------------------------------------------------------------------------
   14. Barra de Navegación Inferior Móvil (.nav-bottom) — indicador M3
   -------------------------------------------------------------------------- */
.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-divider);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) 0.5rem;
  z-index: 30;
}

[data-theme="dark"] .nav-bottom,
.dark .nav-bottom,
.dark-theme .nav-bottom {
  background-color: rgba(13, 19, 34, 0.92);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) .nav-bottom {
    background-color: rgba(13, 19, 34, 0.92);
  }
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.65rem;
  color: var(--on-surface-variant);
  font-size: var(--fs-label-sm);
  font-weight: 700;
  transition: color var(--transition-fast);
}

.nav-item.active,
.nav-item--active {
  color: var(--color-primary);
}

.nav-item svg {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0.4rem;
  box-sizing: content-box;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-item.active svg {
  background-color: var(--primary-fixed);
  color: var(--on-primary-fixed-variant);
}

/* --------------------------------------------------------------------------
   15. Clases de Utilidad y Helpers
   -------------------------------------------------------------------------- */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-muted { color: var(--on-surface-variant) !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.bg-mint { background-color: var(--surface-container-low) !important; }
.bg-surface { background-color: var(--surface-container-lowest) !important; }

.rounded-full { border-radius: var(--radius-pill) !important; }
.rounded-card { border-radius: var(--radius-card) !important; }

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

/* ==========================================================================
   16. Pantallas de Auth/Onboarding, Toast, Bottom-Sheet, Estados Vacíos/
   Error, Switch, Tabs y utilidades de layout — adaptadas al sistema M3
   Índigo (tarjeta M3 Filled, inputs sin borde, segmented buttons).
   ========================================================================== */

/* -- Pantallas de pantalla completa (Login / Onboarding) -- */
.full-screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background-color: var(--bg-body);
}
.full-screen.active { display: flex; }

.auth-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--surface-container-lowest);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  padding: 2rem 1.75rem;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-family-title);
  font-size: var(--fs-headline-md);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
  text-align: center;
}

.auth-subtitle {
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--on-surface-variant);
  margin-bottom: 1.5rem;
}

.auth-switch {
  text-align: center;
  margin-top: 1.25rem;
  font-size: var(--fs-body-sm);
  color: var(--on-surface-variant);
}
.auth-switch button {
  color: var(--color-primary);
  font-weight: 700;
}

.auth-tabs {
  display: flex;
  background-color: var(--surface-container-low);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
  margin-bottom: 1.5rem;
  gap: 0.25rem;
}
.auth-tabs button {
  flex: 1;
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label-lg);
  font-weight: 700;
  color: var(--on-surface-variant);
  text-align: center;
}
.auth-tabs button.active {
  background-color: var(--surface-container-lowest);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.family-code-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--surface-container-low);
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-input);
  padding: 0.65rem 0.85rem;
}
.family-code-box code {
  flex: 1;
  font-family: var(--font-family-title);
  font-size: var(--fs-body-sm);
  word-break: break-all;
  color: var(--on-surface);
}

/* -- Toast -- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 6.5rem;
  transform: translate(-50%, 1rem);
  background-color: var(--on-surface);
  color: var(--surface-container-lowest);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  z-index: 100;
  max-width: calc(100% - 2.5rem);
  text-align: center;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* -- Bottom Sheet (Carga Rápida de Gasto, FAB expandido) -- */
.sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(11, 28, 48, 0.45);
  z-index: 60;
  align-items: flex-end;
  justify-content: center;
}
.sheet-overlay.open { display: flex; }

.sheet {
  width: 100%;
  max-width: 480px;
  background-color: var(--surface-container-lowest);
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) 1.25rem;
  box-shadow: var(--shadow-lg);
  max-height: 88vh;
  overflow-y: auto;
  animation: sheet-up var(--transition-bounce);
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sheet__handle {
  width: 2.5rem;
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background-color: var(--outline-variant);
  margin: 0 auto 1.25rem auto;
}

.sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* -- Estados vacíos / error / alertas -- */
.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--on-surface-variant);
  font-size: var(--fs-body-md);
}
.empty-state__icon {
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
  display: block;
}
.empty-state__title {
  font-family: var(--font-family-title);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
  font-size: var(--fs-title-md);
}

.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-card-sm);
  margin-bottom: 1rem;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  border: 1px solid var(--budget-cerca-limite-border);
  background-color: var(--budget-cerca-limite-bg);
  color: var(--budget-cerca-limite-text);
}
.alert-banner.excedido {
  border-color: var(--budget-excedido-border);
  background-color: var(--budget-excedido-bg);
  color: var(--budget-excedido-text);
}
.alert-banner.info {
  border-color: var(--border-color);
  background-color: var(--surface-container-low);
  color: var(--on-surface);
}

.error-card {
  text-align: center;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-card-sm);
  background-color: var(--error-container);
  border: 1px solid var(--budget-excedido-border);
  color: var(--on-error-container);
  font-size: var(--fs-body-md);
  font-weight: 600;
}

/* -- Switch (toggle) — M3 (48x28, perilla 24px) -- */
.switch {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--outline-variant);
  border-radius: var(--radius-pill);
  transition: var(--transition-fast);
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background-color: var(--surface-container-lowest);
  border-radius: 50%;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.switch input:checked + .slider { background-color: var(--color-primary); }
.switch input:checked + .slider::before {
  transform: translateX(1.25rem);
  background-color: #FFFFFF;
}

/* -- Tabs segmentadas genéricas (Historial, Config) -- */
.tabs-segmented {
  display: flex;
  background-color: var(--surface-container-low);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.tabs-segmented button {
  flex: 1;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label-lg);
  font-weight: 700;
  color: var(--on-surface-variant);
}
.tabs-segmented button.active {
  background-color: var(--surface-container-lowest);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* -- Estadísticas en grilla (Reportes) -- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.chart-card {
  position: relative;
  height: 220px;
}

/* -- Semana (historial, acordeón) -- */
.week-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  cursor: pointer;
}
.week-row__detail {
  display: none;
  padding: 0 1rem 1rem 1rem;
}
.week-row__detail.open { display: block; }

/* -- Loading skeleton simple -- */
.skeleton {
  border-radius: var(--radius-card-sm);
  background: linear-gradient(90deg, var(--surface-container-low) 25%, var(--surface-container-high) 50%, var(--surface-container-low) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s ease infinite;
  height: 4.5rem;
  margin-bottom: 0.75rem;
}
@keyframes skeleton-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -- Header: toggle de tema -- */
.theme-toggle-icon .icon-sun { display: none; }
.theme-toggle-icon .icon-moon { display: inline-flex; }
[data-theme="dark"] .theme-toggle-icon .icon-sun,
.dark .theme-toggle-icon .icon-sun,
.dark-theme .theme-toggle-icon .icon-sun { display: inline-flex; }
[data-theme="dark"] .theme-toggle-icon .icon-moon,
.dark .theme-toggle-icon .icon-moon,
.dark-theme .theme-toggle-icon .icon-moon { display: none; }

.field-hint {
  font-size: var(--fs-body-sm);
  color: var(--on-surface-variant);
  margin-top: 0.3rem;
}

.form-control:disabled,
.input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-divider);
  font-size: var(--fs-body-md);
}
.member-row:last-child { border-bottom: none; }

/* -- Badges de estado (historial) -- */
.badge.sano {
  background-color: var(--secondary-container) !important;
  color: var(--on-secondary-container) !important;
}
.badge.cerca-limite {
  background-color: var(--tertiary-fixed) !important;
  color: var(--on-tertiary-fixed-variant) !important;
}
.badge.excedido {
  background-color: var(--error-container) !important;
  color: var(--on-error-container) !important;
}