:root {
    /* --- PALETA DE VERDES INSTITUCIONALES (CHIVILCOY) --- */
    --primary-950: #022c22;
    --primary-900: #064e3b;
    --primary-800: #065f46;
    --primary-700: #047857;
    --primary-600: #059669;
    --primary-500: #10b981;
    --primary-400: #34d399;
    --primary-300: #6ee7b7;
    --primary-200: #a7f3d0;
    --primary-100: #d1fae5;
    --primary-50:  #f0fdf4;

    /* Gradientes refinados */
    --gradient-primary: linear-gradient(135deg, #065f46 0%, #059669 60%, #10b981 100%);
    --gradient-primary-hover: linear-gradient(135deg, #047857 0%, #047857 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
    --gradient-card: linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%);
    --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    /* --- SUPERFICIES Y FONDOS --- */
    --bg-app: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #ffffff;
    --bg-surface-muted: #f8fafc;
    --bg-surface-active: #f1f5f9;
    --bg-nav-pill: rgba(15, 23, 42, 0.035);

    /* --- BORDES --- */
    --border-subtle: #e2e8f0;
    --border-strong: #cbd5e1;
    --border-accent: rgba(5, 150, 105, 0.25);
    --border-focus: #059669;

    /* --- TIPOGRAFÍA --- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-white: #ffffff;
    --text-accent: #047857;

    /* --- ESTADOS Y FEEDBACK --- */
    --danger: #ef4444;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --danger-text: #b91c1c;

    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;
    --warning-text: #b45309;

    --info: #0284c7;
    --info-bg: #f0f9ff;
    --info-border: #bae6fd;
    --info-text: #0369a1;

    --success: #10b981;
    --success-bg: #f0fdf4;
    --success-border: #bbf7d0;
    --success-text: #15803d;

    /* --- SOMBRAS (ELEVACIÓN) --- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
    --shadow-primary: 0 4px 14px rgba(5, 150, 105, 0.25);
    --shadow-primary-lg: 0 10px 25px -5px rgba(5, 150, 105, 0.35);

    /* --- RADIOS DE BORDE --- */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-full: 9999px;

    /* --- TRANSICIONES Y MICRO-ANIMACIONES --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s var(--ease-out);
    --transition-base: 0.25s var(--ease-out);
    --transition-smooth: 0.35s var(--ease-out);

    /* --- DIMENSIONES --- */
    --header-height: 126px;
    --container-max-width: 1180px;
}

@media (min-width: 640px) {
    :root {
        --header-height: 122px;
    }
}

/* ==========================================================================
   MODO OSCURO (DARK MODE)
   Activado mediante el atributo [data-theme="dark"] en <html>
   ========================================================================== */
[data-theme="dark"] {
    /* --- PALETA DE VERDES EN MODO OSCURO (LUMINOSOS Y LEGIBLES SOBRE FONDO OSCURO) --- */
    --primary-950: #a7f3d0;
    --primary-900: #a7f3d0;
    --primary-800: #6ee7b7;
    --primary-700: #34d399;
    --primary-600: #10b981;
    --primary-500: #10b981;
    --primary-400: #34d399;
    --primary-300: #6ee7b7;
    --primary-200: #a7f3d0;
    --primary-100: rgba(16, 185, 129, 0.22);
    --primary-50:  rgba(16, 185, 129, 0.14);

    /* Gradientes refinados para modo oscuro */
    --gradient-primary: linear-gradient(135deg, #047857 0%, #059669 60%, #10b981 100%);
    --gradient-primary-hover: linear-gradient(135deg, #059669 0%, #047857 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.05) 100%);
    --gradient-card: linear-gradient(180deg, #1e293b 0%, #172033 100%);
    --gradient-dark: linear-gradient(135deg, #090d16 0%, #0f172a 100%);

    /* --- SUPERFICIES Y FONDOS --- */
    --bg-app: #0b1120;
    --bg-surface: #1e293b;
    --bg-surface-elevated: #243247;
    --bg-surface-muted: #131c2e;
    --bg-surface-active: #2b394f;
    --bg-nav-pill: rgba(255, 255, 255, 0.04);

    /* --- BORDES --- */
    --border-subtle: #2d3b4f;
    --border-strong: #3f516a;
    --border-accent: rgba(52, 211, 153, 0.35);
    --border-focus: #10b981;

    /* --- TIPOGRAFÍA --- */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-white: #ffffff;
    --text-accent: #34d399;

    /* --- ESTADOS Y FEEDBACK (Ajustados con alto contraste sobre oscuro) --- */
    --danger: #f87171;
    --danger-bg: rgba(239, 68, 68, 0.16);
    --danger-border: rgba(239, 68, 68, 0.35);
    --danger-text: #fca5a5;

    --warning: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.16);
    --warning-border: rgba(245, 158, 11, 0.35);
    --warning-text: #fde68a;

    --info: #38bdf8;
    --info-bg: rgba(2, 132, 199, 0.16);
    --info-border: rgba(56, 189, 248, 0.35);
    --info-text: #bae6fd;

    --success: #34d399;
    --success-bg: rgba(16, 185, 129, 0.16);
    --success-border: rgba(52, 211, 153, 0.35);
    --success-text: #a7f3d0;

    /* --- SOMBRAS (ELEVACIÓN EN DARK MODE) --- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-primary: 0 4px 14px rgba(16, 185, 129, 0.3);
    --shadow-primary-lg: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
}