/* =========================================================================
   SISTEMA DE DISEÑO GLOBAL - FUENTE ÚNICA DE VERDAD V3.0
   ========================================================================= */

:root {
    /*  1. IDENTIDAD Y NÚCLEO DE MARCA (PHP inyectará o usará este fallback) */
    --color-primario: #009da5;
    --primary: var(--color-primario);
    --color-primary: var(--color-primario);
    
    /* Variaciones elásticas de color basadas en la identidad */
    --color-primary-dark: color-mix(in srgb, var(--color-primario) 80%, black);
    --secondary: color-mix(in srgb, var(--color-primario) 70%, white);
    --accent: color-mix(in srgb, var(--color-primario) 85%, black);

    /*  2. ESTADOS Y ALERTAS DEL SISTEMA (Semánticos) */
    --color-success: #2ecc71;
    --color-exito: #16a34a;
    --success-color: #28a745;
    
    --color-warning: #f1c40f;
    --color-alerta: #d97706;
    --warning-color: #d4a000;
    
    --color-danger: #d63031;
    --color-peligro: #ef4444;
    --color-btn-danger: #dc3545;

    --color-info: #3498db;
    --color-info-claro: #0891b2;

    /*  3. ESTRUCTURA: FONDOS Y TEXTOS (Tema Claro por Defecto) */
    --bg-base: #f4f6f9;         /* Fondo general de la página */
    --bg-main: #f6f8fb;         /* Variación de fondo principal */
    --bg-light: #f8fbff;        /* Fondo claro atenuado */
    --bg-tarjeta: #ffffff;      /* Fondo de contenedores y tarjetas */
    --bg-white: #ffffff;
    --bg-input: #f8fafc;        /* Fondo de campos de texto */
    
    --text-dark: #2c3e50;       /* Textos oscuros base */
    --texto-principal: #1e293b; /* Texto legible de alta densidad */
    --texto-mutado: #64748b;    /* Texto secundario grisáceo */
    --text-muted: #95a5a6;      /* Texto desvanecido antiguo */
    --color-text-white: #ffffff;

    --border-subtle: #f0f2f5;   /* Bordes ligeros de layouts */
    --borde-suave: #e2e8f0;      /* Bordes divisorios */
    --borde-fuerte: #cbd5e1;     /* Conector de árbol o bordes marcados */
    --border: #e3e7ee;          /* Borde general de tablas */
    --dark: #4c4e56;

    /*  4. COMPONENTE: ESTÁNDAR SAGRADO DE BOTONES */
    --color-btn-primary: var(--color-primario);
    --color-btn-primary-dark: color-mix(in srgb, var(--color-primario) 85%, black);
    --color-btn-hover: color-mix(in srgb, var(--color-primario) 80%, black);
    --color-btn-shadow: color-mix(in srgb, var(--color-primario) 40%, transparent);
    
    --color-btn-cancel-bg: #f1f3f5;
    --color-btn-cancel-text: #6c757d;
    --color-btn-cancel-hover: #e9ecef;
    --color-btn-danger-hover: #c82333;

    /*  5. COMPONENTE: MODALES TÁCTICOS */
    --modal-bg: #ffffff;
    --modal-text: #333333;
    --modal-border: #e0e0e0;
    --modal-header-bg: rgba(0, 0, 0, 0.02);
    --modal-input-bg: #f8f9fa;
    --modal-secondary-text: #666666;
    --btn-cancel-bg: #f0f0f0;
    --btn-cancel-text: #555;

    /*  6. SUITE DE ACCENTOS ATENUADOS (Badges / Alertas) */
    --success-bg-subtle: rgba(40, 167, 69, 0.05);
    --success-border: rgba(40, 167, 69, 0.2);
    --accent-color: #00acc1;
    --accent-bg: rgba(0, 172, 193, 0.06);
    --accent-border: rgba(0, 172, 193, 0.15);
    --warning-bg: rgba(212, 160, 0, 0.08);
    --warning-border: rgba(212, 160, 0, 0.2);

    /*  7. GEOMETRÍA, EFECTOS Y TRANSICIONES */
    --r-sm: 8px;                /* Radio de esquinas pequeño */
    --r-md: 14px;               /* Radio medio (tarjetas) */
    --r-lg: 20px;               /* Radio grande */
    
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .08);
    --shadow-hover: 0 15px 30px color-mix(in srgb, var(--color-primario) 15%, transparent);

    --trs: .1s ease;            /* Transición rápida estándar */
    --transicion-tema: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}