/* =====================================================
   VARIABLES DE TEMA — EFQM Autoevaluación
   Identidad visual: Colombia Excelente
   Paleta: Teal oscuro → Turquesa → Menta
   ===================================================== */

:root {
    /* ── Colores primarios (Teal oscuro — base de marca) ── */
    --primary: #0B5E6F;
    --primary-light: #0E7C8E;
    --primary-dark: #083D4A;
    --primary-bg: #E6F4F6;

    /* ── Colores secundarios (Turquesa — acento principal) ── */
    --secondary: #00A89D;
    --secondary-light: #2EC4B6;
    --secondary-bg: #E5F7F5;

    /* ── Colores de acento (Menta clara — highlights) ── */
    --accent: #4DD0C8;
    --accent-light: #80DEEA;
    --accent-bg: #E0F7FA;

    /* ── Gradiente de marca ── */
    --gradient-brand: linear-gradient(135deg, #083D4A 0%, #0B5E6F 30%, #00A89D 70%, #4DD0C8 100%);
    --gradient-brand-soft: linear-gradient(135deg, #E6F4F6 0%, #E5F7F5 50%, #E0F7FA 100%);

    /* ── Neutros ── */
    --text: #1A2B32;
    --text-secondary: #4A6572;
    --text-light: #7B919C;
    --border: #CBD5D9;
    --border-light: #E8EDEF;
    --bg: #F5F8F9;
    --bg-white: #FFFFFF;

    /* ── Estados ── */
    --success: #27AE60;
    --success-bg: #E8F8F0;
    --warning: #F39C12;
    --warning-bg: #FEF5E7;
    --danger: #E74C3C;
    --danger-bg: #FDEDEC;
    --info: #0E7C8E;
    --info-bg: #E6F4F6;

    /* ── Tipografía ── */
    --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

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

    /* ── Bordes ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* ── Sombras ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* ── Sidebar ── */
    --sidebar-width: 260px;
    --sidebar-bg: var(--primary-dark);
    --sidebar-text: #ECF0F1;
    --sidebar-hover: rgba(255, 255, 255, 0.1);
    --sidebar-active: rgba(77, 208, 200, 0.2);

    /* ── Transiciones ── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}