/* @import DEBE IR AL PRINCIPIO ABSOLUTO ANTES DE OTROS ESTILOS */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ========================================
   VARIABLES DE DISEÑO - NUEVA PALETA
   Instituto Superior Tecnológico Público 
   Utcubamba - Paleta Personalizada
   ======================================== */

:root {
    /* 🎨 PALETA PRINCIPAL PERSONALIZADA (TEMA CLARO) */
    --color-primary: #023059;           /* Azul marino principal */
    --color-primary-light: #0D5FA8;     /* Azul claro */
    --color-primary-dark: #011E38;      /* Azul oscuro */
    
    --color-secondary: #FFFFFF;         /* Blanco */
    --color-secondary-light: #F8F8F8;   /* Blanco roto */
    --color-secondary-dark: #E0E0E0;    /* Gris claro */
    
    --color-tertiary: #F2EFC2;          /* Amarillo suave (énfasis) */
    --color-tertiary-light: #F7F5DD;    /* Amarillo más claro */
    --color-tertiary-dark: #E8E5A0;     /* Amarillo más oscuro */
    
    /* 🎨 NEUTRALES */
    --color-white: #FFFFFF;
    --color-background: #FFFFFF;        /* Fondo blanco */
    --color-surface: #F5F5F5;           /* Superficie gris muy claro */
    --color-surface-variant: #EFEFEF;   /* Superficie variante */
    --color-outline: #CCCCCC;           /* Contorno */
    --color-outline-variant: #E0E0E0;   /* Contorno variante */
    
    /* 🔤 TEXTO */
    --color-text-primary: #023059;      /* Texto principal */
    --color-text-secondary: #555555;    /* Texto secundario */
    --color-text-tertiary: #888888;     /* Texto terciario */
    --color-text-light: #FFFFFF;        /* Texto en fondos oscuros */

    --color-card-bg: #FFFFFF;
    --color-overlay: rgba(2, 48, 89, 0.55);
    --color-muted: rgba(255, 255, 255, 0.8);

    /* 🎨 ESTADOS */
    --color-success: #10B981;           /* Verde éxito */
    --color-warning: #F59E0B;           /* Amarillo advertencia */
    --color-error: #EF4444;             /* Rojo error */
    --color-info: #3B82F6;              /* Azul info */
    
    /* 📏 ESPACIADO (4px base) */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-2xl: 4rem;     /* 64px */
    
    /* 🔤 TIPOGRAFÍA MD3 */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    --font-mono: 'Courier New', monospace;
    
    /* Tamaños de texto */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-md: 1.125rem;    /* 18px */
    --font-size-lg: 1.5rem;      /* 24px */
    --font-size-xl: 2rem;        /* 32px */
    --font-size-2xl: 2.5rem;     /* 40px */
    --font-size-3xl: 3rem;       /* 48px */
    
    /* Pesos de fuente */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* 📦 ELEVACIÓN MATERIAL DESIGN 3 */
    --shadow-none: none;
    --shadow-1: 0 1px 3px 1px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
    --shadow-2: 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.24);
    --shadow-3: 0 7px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 10px 0 rgba(0, 0, 0, 0.24);
    --shadow-4: 0 12px 22px 0 rgba(0, 0, 0, 0.13), 0 9px 17px 0 rgba(0, 0, 0, 0.24);
    --shadow-5: 0 16px 28px 0 rgba(0, 0, 0, 0.15), 0 12px 20px 0 rgba(0, 0, 0, 0.24);
    
    /* 🔄 TRANSICIONES */
    --transition-fast: 0.2s cubic-bezier(0.2, 0, 0.8, 0.1);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 🎯 RADIO DE BORDE */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;
}

/* ========================================
   VARIABLES TEMA OSCURO (DARK MODE)
   ======================================== */
body.dark-theme {
    --color-primary: #051d34;
    --color-primary-light: #143f67;
    --color-primary-dark: #020d19;

    --color-secondary: #0f172a;
    --color-secondary-light: #1f2937;
    --color-secondary-dark: #0b1220;

    --color-tertiary: #f4e9a2;
    --color-tertiary-light: #f8f0bf;
    --color-tertiary-dark: #d9d08a;

    --color-white: #ffffff;
    --color-background: #0b1220;
    --color-surface: #121d2d;
    --color-surface-variant: #1a2739;
    --color-outline: #334155;
    --color-outline-variant: #243244;

    --color-text-primary: #eaf3ff;
    --color-text-secondary: #bfd3ee;
    --color-text-tertiary: #93a9c6;
    --color-text-light: #f8fbff;

    --color-card-bg: #142133;
    --color-overlay: rgba(2, 11, 20, 0.72);
    --color-muted: rgba(255, 255, 255, 0.78);
}