/* ═══════════════════════════════════════════════════════════════
   UMANO Design Tokens — única fuente de verdad de la paleta
   (Natalia / Design System v2.0) + tokens de modo oscuro.
   Cargar SIEMPRE antes de cualquier otra hoja del sistema.
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Root del sistema: 13px (heredado del render aprobado; Metronic lo
       fijaba y toda la plataforma fue diseñada a esa densidad). */
    --font-size: 13px;

    /* Font size scale to resolve Tailwind style variables */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Brand colors (Umano Design System v2.1) */

    /* Azul (primario / marca, agenda, cita, botones principales) */
    --color-brand-blue: #1261ab;
    --color-brand-blue-dark: #0d4580;
    /* C2: active de Trust del sistema (antes #0a3a6b) */
    --color-brand-blue-darker: #092d5a;
    --color-brand-blue-light: #e5eefa;
    --color-brand-blue-bg-card: #f7faff;
    --color-brand-blue-border-card: #dbe8fb;

    /* Morado (servicios, plan, familia) */
    --color-brand-purple: #b28cd3;
    --color-brand-purple-light: #f5eefa;
    --color-brand-purple-bg-card: #faf7fc;
    --color-brand-purple-border-card: #ecdff5;
    --color-brand-purple-border-banner: #ddd3ee;

    /* Verde (completada, terapia ocupacional, nutrición) */
    --color-brand-green: #35803f;
    --color-brand-green-light: #e9f3ee;
    --color-brand-green-border: #d9ebe0;

    /* Naranjo (alertas, CTA setup, encuestas) */
    --color-brand-orange: #f74a14;
    --color-brand-orange-dark: #e0430f;
    --color-brand-orange-gold: #ffa910;
    --color-brand-orange-bg-survey-1: #fff9ec;
    --color-brand-orange-bg-survey-2: #fff1d6;
    --color-brand-orange-border-survey: #f7e2b8;

    /* Ámbar (Profesionales: financiero/actividad física, ajustado por contraste) */
    --color-brand-amber: #d18a0f;
    --color-brand-amber-light: #fff6e6;

    /* Rojo (estado "no asistió") */
    --color-brand-red: #c0392b;
    --color-brand-red-light: #fdecea;

    /* Neutros */
    --color-neutral-white: #ffffff;
    --color-neutral-text-main: #1c1c1c;
    --color-neutral-text-nav: #5B5E6E;
    /* Contraste WCAG: general #808080 (3.95:1) → #6b6b6b (5.33:1);
       tertiary #B4B6C2 (2.02:1) → #6f7280 (~4.8:1);
       icon-inactive #9497A6 (2.90:1) → #7a7d8c (4.09:1, >=3:1 no textual) */
    --color-neutral-text-general: #6b6b6b;
    --color-neutral-icon-inactive: #7a7d8c;
    --color-neutral-text-tertiary: #6f7280;
    --color-neutral-border-1: #e5e5e5;
    --color-neutral-border-2: #ECECF0;
    --color-neutral-border-3: #f0f0f0;
    --color-neutral-50: #fafafa;

    /* Escala neutral (antes solo existía en modo oscuro: en claro los
       componentes que la usaban quedaban sin fondo/color) */
    --color-neutral-200: #e5e5e5;
    --color-neutral-500: #6b6b6b;
    --color-neutral-600: #5b5e6e;
    --color-neutral-700: #404040;
    --color-neutral-900: #1c1c1c;

    /* Formularios — WCAG 1.4.11: borde de campo >=3:1 contra el fondo */
    --input-border: #8a8f98;          /* 3.25:1 sobre #fff */
    --input-placeholder: #6b7280;     /* 4.83:1 sobre #fff */

    /* Foco — Von Restorff: el naranja queda reservado para CTA/alertas;
       el anillo de foco usa el azul de marca (6.32:1 sobre #fff) */
    --focus-ring: var(--color-brand-blue);

    /* Botones rellenos (fg sobre bg y bg-hover >=4.5:1 en ambos temas) */
    --btn-primary-bg: #1261ab;
    --btn-primary-bg-hover: #0d4580;
    --btn-primary-bg-active: #092d5a; /* C2 (13.68:1 con blanco) */
    --btn-primary-fg: #ffffff;
    --btn-success-bg: #35803f;
    /* C3: hover/active de Care = color-mix con negro 84% / 68%
       (#2d6c35 → 6.35:1 y #24572b → 8.49:1 con blanco) */
    --btn-success-bg-hover: color-mix(in srgb, #35803f 84%, black);
    --btn-success-bg-active: color-mix(in srgb, #35803f 68%, black);
    --btn-success-fg: #ffffff;
    --btn-secondary-bg: #8659b8;
    --btn-secondary-bg-hover: #6f47a0;
    --btn-secondary-fg: #ffffff;
    --btn-danger-bg: #c0392b;
    --btn-danger-bg-hover: #a3301f;
    --btn-danger-fg: #ffffff;
    --btn-info-bg: #1f6fa3;
    --btn-info-bg-hover: #145a86;
    --btn-info-fg: #ffffff;
    /* Relleno naranja con texto blanco (CTA de beneficios/alertas):
       #f74a14 con blanco da 3.53:1; esta variante da 5.76:1 y se
       mantiene igual en ambos temas */
    --btn-warning-bg: #b83a0c;
    --btn-warning-bg-hover: #9a300a;
    --btn-warning-fg: #ffffff;
    /* Texto naranja sobre blanco/tinte (btn-warning outline, links de alerta) */
    --color-warning-strong-text: #b83a0c; /* 5.76:1 sobre #fff */

    /* Modo oscuro (tokens extra — no considerados en la paleta original).
       Superficies y textos para el tema oscuro; el azul claro es el azul
       de marca elevado para conservar >=4.5:1 sobre superficies oscuras. */
    --surface-dark: #1c1c1c;
    --surface-dark-elevated: #262626;
    --border-dark: rgba(255, 255, 255, 0.14);
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #cfcfcf;
    --color-brand-blue-on-dark: #6ea9dc;
    --color-brand-orange-on-dark: #ff6a3d;
    --color-brand-gold-text: #8a5a00;

    /* Status mapping to Brand colors */
    --color-success: var(--color-brand-green);
    /* R6: warning = ámbar del sistema (#f59e0b). El naranja #f74a14 queda
       reservado para Support (--color-brand-orange). #f59e0b como texto
       sobre blanco da 2.15:1: el ámbar va solo en rellenos, bordes e
       íconos grandes/decorativos; el texto usa --color-warning-text
       (= --status-warning-text) y sobre relleno ámbar, #1c1c1c (7.94:1). */
    --color-warning: var(--status-warning);
    --color-error: var(--color-brand-red);
    --color-info: var(--color-brand-blue);

    /* Corrección de contraste: variantes oscuras de los colores de estado
       para TEXTO pequeño (>=4.5:1 sobre blanco y sobre sus tintes suaves).
       Los colores de estado originales se mantienen para rellenos, bordes
       e iconos grandes. */
    --color-success-text: #0f6a3c;
    --color-warning-text: var(--status-warning-text); /* #92400e (R6; antes #8a5a00) */
    --color-error-text: #b02a1c;
    --color-info-text: #145a86;

    /* Tintes suaves de estado para badges (patrón soft: fondo tinte +
       texto profundo del mismo matiz, igual que el badge dorado) */
    --color-success-bg-soft: var(--color-brand-green-light);
    --color-warning-bg-soft: #fef3c7; /* R6: tinte ámbar (antes #fdeeda, durazno) */
    --color-warning-on-fill: #1c1c1c;  /* texto sobre relleno ámbar: 7.94:1 */
    --color-error-bg-soft: var(--color-brand-red-light);
    --color-info-bg-soft: var(--color-brand-blue-light);

    /* Corrección de contraste: variante profunda del púrpura para
       componentes rellenos con texto blanco (>=5:1). El Púrpura Cálido
       (#b28cd3) se mantiene como acento/superficie de la paleta. */
    --color-brand-purple-strong: #8659b8;

    /* ── C1: texto de cuerpo / titulares (sistema Umano) ── */
    --text-body: #4a4a4a;             /* 8.86:1 sobre #fff, 8.49:1 sobre #fafafa */
    --text-heading: var(--color-neutral-text-main); /* #1c1c1c */

    /* ── C6: escala de estados del sistema ──
       Relleno (barra/relleno): success/warning/error/info del sistema.
       Tinte: fondo de alertas y toasts. Texto: tono oscuro >=4.5:1
       sobre el tinte. Ícono: el relleno solo donde llega a 3:1 sobre el
       tinte (error, 4.41:1); en success/warning/info el relleno queda
       en 2.1–2.6:1, así que el ícono usa el tono de texto (decisión A).
       Los badges mantienen su patrón soft (--color-*-bg-soft/-text). */
    --status-success: #22c55e;
    --status-warning: #f59e0b;
    --status-error: #dc2626;
    --status-info: #0ea5e9;
    --status-success-bg: #f0fdf4;
    --status-warning-bg: #fffbeb;
    --status-error-bg: #fef2f2;
    --status-info-bg: #f0f9ff;
    --status-success-text: #166534;   /* 6.81:1 sobre su tinte */
    --status-warning-text: #92400e;   /* 6.84:1 */
    --status-error-text: #991b1b;     /* 7.60:1 */
    --status-info-text: #075985;      /* 7.09:1 */
    --status-success-icon: var(--status-success-text);
    --status-warning-icon: var(--status-warning-text);
    --status-error-icon: var(--status-error);  /* 4.41:1 sobre su tinte */
    --status-info-icon: var(--status-info-text);

    /* ── C7: tintes de marca (solo superficies; las acciones usan
       siempre el color base) ── */
    --tint-blue-80: #4a81bd;
    --tint-blue-60: #77a0cf;
    --tint-blue-40: #a3bfe0;
    --tint-blue-20: #d1dff0;
    --tint-blue-10: #e8eff7;
    --tint-green-80: #609964;
    --tint-green-60: #87b28a;
    --tint-green-40: #afcbb0;
    --tint-green-20: #d6e5d7;
    --tint-green-10: #ebf2eb;
    --tint-orange-80: #fe7653;
    --tint-orange-60: #ff9b80;
    --tint-orange-40: #ffbdaa;
    --tint-orange-20: #ffdfd5;
    --tint-orange-10: #ffefea;
    --tint-purple-80: #c1a3dc;
    --tint-purple-60: #d0bae6;
    --tint-purple-40: #e0d1ee;
    --tint-purple-20: #efe8f7;
    --tint-purple-10: #f7f3fb;
    --tint-gold-80: #ffbb5e;
    --tint-gold-60: #ffcd8c;
    --tint-gold-40: #ffdeb4;
    --tint-gold-20: #ffefda;
    --tint-gold-10: #fff7ec;

    /* ── C9: radios (px literales: la raíz sigue en 13px) ── */
    --radius-xs: 4px;     /* tags, checkbox */
    --radius-sm: 8px;     /* inputs, alertas, toasts */
    --radius-md: 12px;    /* cards, modales, menús */
    --radius-lg: 16px;    /* sheets, footers */
    --radius-full: 999px; /* botones, badges */

    /* ── C10/C11: sombras y elevaciones (sin blur de fondo ni inner
       shadows). El sistema solo define los extremos 1 y 5; 2–4 son
       interpolación lineal (offset, blur y opacidad). ── */
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12);
    --elevation-2: 0 4px 10px rgba(0, 0, 0, 0.15);
    --elevation-3: 0 6px 18px rgba(0, 0, 0, 0.17);
    --elevation-4: 0 9px 25px rgba(0, 0, 0, 0.20);
    --elevation-5: 0 12px 32px rgba(0, 0, 0, 0.22);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-navbar: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* Sombras de color: solo premium y care */
    --shadow-care: 0 8px 24px rgba(53, 128, 63, 0.15);
    --shadow-premium: 0 8px 24px rgba(178, 140, 211, 0.18);

    /* ── C12: foco por color de acción (anillo 2px + offset 2px + halo
       4px al 18%). Anillo vs halo sobre #fff: azul 4.83, verde 3.85,
       support 4.37, premium 3.99 (>=3:1). El naranja de marca #f74a14
       quedaba en 2.80:1 contra su propio halo → se usa el naranja
       profundo de texto (decisión A). #b28cd3 da 2.77:1 → #8659b8. ── */
    --focus-ring-care: #35803f;
    --focus-ring-support: #b83a0c;
    --focus-ring-premium: #8659b8;
    --focus-ring-inverse: #ffffff;    /* sobre gradientes / superficies de color */
    --focus-halo-alpha: 18%;
    /* Campos: borde 1.5px azul + anillo interior 3px azul al 15% */
    --focus-field-inner: rgba(18, 97, 171, 0.15);

    /* ── C13: disabled uniforme (componentes inactivos: exentos de
       1.4.3; #808080 sobre #e5e5e5 = 3.14:1) ── */
    --disabled-bg: #e5e5e5;
    --disabled-fg: #808080;

    /* ── C14: motion del sistema ── */
    --motion-fast: 150ms;
    --motion-main: 300ms;
    --motion-slow: 500ms;
    --motion-shimmer: 1500ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* ── C8: alias con los nombres del sistema (apuntan a los tokens
       existentes; no se renombra nada) ── */
    --bg-surface: var(--card);
    --bg-secondary: var(--color-neutral-50);
    --text-main: var(--color-neutral-text-main);
    --text-muted: var(--color-neutral-text-general); /* #6b6b6b (A: #808080 no llega a 4.5:1) */
    --border-flat: var(--color-neutral-border-1);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Tailwind token contract */
    --background: #ffffff;
    --foreground: #1c1c1c;
    --card: #ffffff;
    --card-foreground: #1c1c1c;
    --popover: #ffffff;
    --popover-foreground: #1c1c1c;
    --primary: #1261ab;
    --primary-foreground: #ffffff;
    --secondary: #f0f5ff;
    --secondary-foreground: #1261ab;
    --muted: #fafafa;
    --muted-foreground: #6b6b6b;
    --accent: #f0f5ff;
    --accent-foreground: #1261ab;
    --destructive: #c0392b;
    --destructive-foreground: #ffffff;
    --border: #e5e5e5;
    --input: transparent;
    --input-background: #ffffff;
    --switch-background: #e5e5e5;
    --font-weight-medium: 600;
    --font-weight-normal: 400;
    --ring: #1261ab;
    --chart-1: #1261ab;
    --chart-2: #f74a14;
    --chart-3: #b28cd3;
    --chart-4: #ffa910;
    --chart-5: #35803f;
    --radius: 0.5rem;
    --sidebar: #fafafa;
    --sidebar-foreground: #1c1c1c;
    --sidebar-primary: #1261ab;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #eaf1fd;
    --sidebar-accent-foreground: #1261ab;
    --sidebar-border: #e5e5e5;
    --sidebar-ring: #1261ab;

    /* Bootstrap 5 root theme color overrides */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 18, 97, 171;
    --bs-success: var(--color-success);
    --bs-success-rgb: 53, 128, 63;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 245, 158, 11; /* R6: #f59e0b (antes 230,126,34) */
    --bs-warning-text-emphasis: var(--status-warning-text);
    --bs-warning-bg-subtle: var(--status-warning-bg);
    --bs-warning-border-subtle: color-mix(in srgb, var(--status-warning) 30%, transparent);
    --bs-danger: var(--color-error);
    --bs-danger-rgb: 231, 76, 60;
    --bs-info: var(--color-info);
    --bs-info-rgb: 52, 152, 219;

    --bs-body-bg: var(--background);
    --bs-body-color: var(--foreground);
    --bs-border-color: var(--border);
    --bs-card-bg: var(--card);
    --bs-card-border-color: var(--border);
    --bs-modal-bg: var(--card);

    /* Backward compatibility aliases */
    --color-brand-green-action: var(--color-brand-green);
    --color-brand-orange-light: var(--color-brand-red-light);
    --color-brand-orange-text: var(--color-warning-strong-text);
    --color-brand-gold: var(--color-brand-orange-gold);
}

.dark, [data-theme="dark"] {
    /* Brand colors re-scaled (Umano Design System v2.1 Dark Mode) */
    --color-brand-blue: #6ea9dc;
    --color-brand-blue-dark: #4a9eff;
    --color-brand-blue-light: rgba(110, 169, 220, 0.15);
    --color-brand-blue-bg-card: rgba(18, 97, 171, 0.1);
    --color-brand-blue-border-card: rgba(18, 97, 171, 0.25);

    --color-brand-purple: #c7a4eb;
    --color-brand-purple-light: rgba(178, 140, 211, 0.15);
    --color-brand-purple-bg-card: rgba(178, 140, 211, 0.1);
    --color-brand-purple-border-card: rgba(178, 140, 211, 0.25);
    --color-brand-purple-border-banner: #ddd3ee;

    --color-brand-green: #52ab60;
    --color-brand-green-light: rgba(53, 128, 63, 0.20);
    --color-brand-green-border: rgba(53, 128, 63, 0.30);

    --color-brand-orange: #ff7a4d;
    --color-brand-orange-dark: #ff9c80;
    --color-brand-orange-gold: #ffa910;
    --color-brand-orange-bg-survey-1: #2e210f;
    --color-brand-orange-bg-survey-2: #3e2a14;
    --color-brand-orange-border-survey: #573e1c;

    --color-brand-amber: #ffa910;
    --color-brand-amber-light: rgba(255, 169, 16, 0.15);

    --color-brand-red: #ff6b6b;
    --color-brand-red-light: rgba(255, 107, 107, 0.15);

    /* Neutros re-scaled */
    --color-neutral-white: #1c1c1c;
    --color-neutral-text-main: #ffffff;
    --color-neutral-text-nav: #cfcfcf;
    --color-neutral-text-general: #cfcfcf;
    --color-neutral-icon-inactive: #9497A6;
    --color-neutral-text-tertiary: #b4b6c2;
    --color-neutral-border-1: rgba(255, 255, 255, 0.14);
    --color-neutral-border-2: rgba(255, 255, 255, 0.14);
    --color-neutral-border-3: rgba(255, 255, 255, 0.1);
    --color-neutral-50: #141414;

    /* Superficies (alineadas al kit: canvas más oscuro que las cards
       para mantener jerarquía de elevación) */
    --background: #141414;
    --foreground: var(--text-on-dark);
    --card: var(--surface-dark);
    --card-foreground: var(--text-on-dark);
    --popover: var(--surface-dark-elevated);
    --popover-foreground: var(--text-on-dark);
    --primary: var(--color-brand-blue-on-dark);
    --primary-foreground: #10253a;
    --secondary: rgba(110, 169, 220, 0.14);
    --secondary-foreground: var(--color-brand-blue-on-dark);
    --muted: var(--surface-dark-elevated);
    --muted-foreground: var(--text-on-dark-muted);
    --accent: rgba(110, 169, 220, 0.14);
    --accent-foreground: var(--color-brand-blue-on-dark);
    --destructive: #f1948a;
    --destructive-foreground: #2b0f0b;
    --border: var(--border-dark);
    --input: var(--surface-dark-elevated);
    --input-background: var(--surface-dark-elevated);
    --ring: var(--color-brand-blue-on-dark);
    --color-brand-orange-light: rgba(255, 106, 61, 0.15);

    /* Neutrales de TEXTO: en oscuro se invierten (el shell y los
       componentes los usan como color de texto) */
    --color-neutral-500: #9a9a9a;
    --color-neutral-700: var(--text-on-dark-muted);
    --color-neutral-900: var(--text-on-dark);
    --color-neutral-200: var(--border-dark);
    --color-neutral-600: #b4b6c2;

    --color-brand-blue-darker: #3d8fd6;

    /* Estado: textos sobre sus tintes oscuros (antes heredaban los
       valores claros → 2.08:1) */
    --color-success-text: #7ce3ab;
    --color-warning-text: var(--status-warning-text); /* #f4c67d */
    --color-error-text: #f1948a;
    --color-info-text: #7cc7e8;
    --color-warning-bg-soft: rgba(245, 158, 11, 0.16); /* R6: tinte ámbar */
    --color-warning-strong-text: #ff9c80;
    --color-brand-gold-text: #f4c67d;
    --color-brand-purple-strong: #b894e0;

    /* Formularios */
    --input-border: rgba(255, 255, 255, 0.40);      /* 3.68:1 sobre #262626 */
    --input-placeholder: rgba(255, 255, 255, 0.62); /* 6.74:1 sobre #262626 */

    --focus-ring: var(--color-brand-blue-on-dark);

    /* Botones rellenos: texto oscuro sobre tonos claros */
    --btn-primary-bg: #6ea9dc;
    --btn-primary-bg-hover: #8fbde6;
    --btn-primary-bg-active: #3d8fd6;
    --btn-primary-fg: #1c1c1c;
    --btn-success-bg: #52ab60;
    --btn-success-bg-hover: #7cc58a;
    --btn-success-fg: #1c1c1c;
    --btn-secondary-bg: #a57fd0;
    --btn-secondary-bg-hover: #b894e0;
    --btn-secondary-fg: #1c1c1c;
    --btn-danger-bg: #e9776b;
    --btn-danger-bg-hover: #f1948a;
    --btn-danger-fg: #1c1c1c;
    --btn-info-bg: #5bb4dc;
    --btn-info-bg-hover: #7cc7e8;
    --btn-info-fg: #1c1c1c;

    --btn-success-bg-active: #45a055; /* C3 oscuro: 5.20:1 con #1c1c1c */

    /* C1 */
    --text-body: var(--text-on-dark-muted); /* #cfcfcf: 10.94:1 sobre #1c1c1c */
    --text-heading: var(--text-on-dark);

    /* C6 en oscuro: tinte = 14% del relleno sobre #1c1c1c; texto claro
       del mismo matiz (>=6.8:1) e ícono en relleno (>=5.6:1) */
    --status-success: #22c55e;
    --status-warning: #f59e0b;
    --status-error: #f87171;
    --status-info: #38bdf8;
    --status-success-bg: #1d3425;
    --status-warning-bg: #3a2e1a;
    --status-error-bg: #371d1d;
    --status-info-bg: #1a2f39;
    --status-success-text: #7ce3ab;
    --status-warning-text: #f4c67d;
    --status-error-text: #f1948a;
    --status-info-text: #7cc7e8;
    --status-success-icon: var(--status-success);
    --status-warning-icon: var(--status-warning);
    --status-error-icon: var(--status-error);
    --status-info-icon: var(--status-info);

    /* C7 en oscuro: mismo porcentaje del color base, mezclado hacia la
       superficie oscura (#1c1c1c) en vez de hacia blanco */
    --tint-blue-80: #14538e;
    --tint-blue-60: #164572;
    --tint-blue-40: #183855;
    --tint-blue-20: #1a2a39;
    --tint-blue-10: #1b232a;
    --tint-green-80: #306c38;
    --tint-green-60: #2b5831;
    --tint-green-40: #26442a;
    --tint-green-20: #213023;
    --tint-green-10: #1e2620;
    --tint-orange-80: #cb4116;
    --tint-orange-60: #9f3817;
    --tint-orange-40: #742e19;
    --tint-orange-20: #48251a;
    --tint-orange-10: #32211b;
    --tint-purple-80: #9476ae;
    --tint-purple-60: #765f8a;
    --tint-purple-40: #584965;
    --tint-purple-20: #3a3241;
    --tint-purple-10: #2b272e;
    --tint-gold-80: #d28d12;
    --tint-gold-60: #a47115;
    --tint-gold-40: #775417;
    --tint-gold-20: #49381a;
    --tint-gold-10: #332a1b;

    /* C10/C11 en oscuro: el negro al 8–22% no se percibe sobre
       superficies oscuras; misma geometría con más opacidad */
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.40);
    --elevation-2: 0 4px 10px rgba(0, 0, 0, 0.44);
    --elevation-3: 0 6px 18px rgba(0, 0, 0, 0.48);
    --elevation-4: 0 9px 25px rgba(0, 0, 0, 0.52);
    --elevation-5: 0 12px 32px rgba(0, 0, 0, 0.56);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.32);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.44);
    --shadow-navbar: 0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-care: 0 8px 24px rgba(82, 171, 96, 0.22);
    --shadow-premium: 0 8px 24px rgba(184, 148, 224, 0.22);

    /* C12 en oscuro (anillo vs halo sobre #1c1c1c: verde 4.48,
       support 4.92, premium 4.92) */
    --focus-ring-care: #52ab60;
    --focus-ring-support: #ff7a4d;
    --focus-ring-premium: #b894e0;
    --focus-ring-inverse: #ffffff;
    --focus-field-inner: rgba(110, 169, 220, 0.15);

    /* C13 en oscuro */
    --disabled-bg: rgba(255, 255, 255, 0.12);
    --disabled-fg: rgba(255, 255, 255, 0.45);

    /* C8: alias re-declarados para que resuelvan con los valores
       oscuros también cuando .dark se aplica debajo de :root */
    --bg-surface: var(--card);
    --bg-secondary: var(--color-neutral-50);
    --text-main: var(--color-neutral-text-main);
    --text-muted: var(--color-neutral-text-general);
    --border-flat: var(--color-neutral-border-1);

    /* Sidebar */
    --sidebar: #1c1c1c;
    --sidebar-foreground: var(--text-on-dark);
    --sidebar-primary: var(--color-brand-blue-on-dark);
    --sidebar-primary-foreground: #10253a;
    --sidebar-accent: rgba(110, 169, 220, 0.14);
    --sidebar-accent-foreground: var(--color-brand-blue-on-dark);
    --sidebar-border: var(--border-dark);
    --sidebar-ring: var(--color-brand-blue-on-dark);

    --bs-body-bg: var(--background);
    --bs-body-color: var(--foreground);
    --bs-border-color: var(--border);
    --bs-card-bg: var(--card);
    --bs-card-border-color: var(--border);
    --bs-modal-bg: var(--card);
}

/* Root font-size del sistema (antes lo imponía style.bundle.css) */
html {
    font-size: var(--font-size);
}