/**
 * PALETA DE COLORES INSTITUCIONALES - IESTP CHINCHA
 * Última actualización: Diciembre 2025
 * 
 * Esta paleta proporciona una identidad visual elegante y profesional
 * para toda la institución educativa.
 */

:root {
    /* ============================================
       COLORES PRINCIPALES
       ============================================ */
    --primary-color: #1a4d7a;
    /* Azul profundo académico - Color principal */
    --secondary-color: #2c5f8d;
    /* Azul medio elegante - Color secundario */
    --accent-color: #0077b6;
    /* Azul vibrante - Para botones y CTAs */
    --dark-color: #0a2540;
    /* Azul muy oscuro - Para textos y fondos oscuros */
    --light-color: #f0f7fb;
    /* Azul muy claro - Para fondos sutiles */

    /* ============================================
       COLORES DE TEXTO
       ============================================ */
    --text-dark: #1a252f;
    /* Texto oscuro principal */
    --text-light: #5a6c7d;
    /* Texto claro secundario */
    --text-white: #ffffff;
    /* Texto blanco */

    /* ============================================
       COLORES NEUTROS
       ============================================ */
    --border-color: #d1dce5;
    /* Bordes suaves */
    --gray-light: #f8f9fa;
    /* Gris muy claro */
    --gray-medium: #e9ecef;
    /* Gris medio */
    --gray-dark: #6c757d;
    /* Gris oscuro */

    /* ============================================
       COLORES DE ESTADO
       ============================================ */
    --success-color: #28a745;
    /* Verde - Éxito */
    --warning-color: #ffc107;
    /* Amarillo - Advertencia */
    --danger-color: #dc3545;
    /* Rojo - Error */
    --info-color: #17a2b8;
    /* Cyan - Información */

    /* ============================================
       DEGRADADOS PREDEFINIDOS
       ============================================ */
    --gradient-primary: linear-gradient(135deg, #1a4d7a 0%, #2c5f8d 100%);
    --gradient-dark: linear-gradient(135deg, #0a2540 0%, #1a4d7a 100%);
    --gradient-light: linear-gradient(135deg, #f0f7fb 0%, #ffffff 100%);

    /* ============================================
       SOMBRAS
       ============================================ */
    --shadow-sm: 0 2px 4px rgba(26, 77, 122, 0.1);
    --shadow-md: 0 4px 8px rgba(26, 77, 122, 0.15);
    --shadow-lg: 0 8px 16px rgba(26, 77, 122, 0.2);
    --shadow-xl: 0 12px 24px rgba(26, 77, 122, 0.25);
}

/* ============================================
   CLASES AUXILIARES DE COLORES
   ============================================ */

/* Colores de fondo */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-accent {
    background-color: var(--accent-color) !important;
}

.bg-dark {
    background-color: var(--dark-color) !important;
}

.bg-light {
    background-color: var(--light-color) !important;
}

/* Gradientes de fondo */
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

.bg-gradient-dark {
    background: var(--gradient-dark) !important;
}

.bg-gradient-light {
    background: var(--gradient-light) !important;
}

/* Colores de texto */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.text-dark {
    color: var(--text-dark) !important;
}

.text-light {
    color: var(--text-light) !important;
}

/* Bordes */
.border-primary {
    border-color: var(--primary-color) !important;
}

.border-secondary {
    border-color: var(--secondary-color) !important;
}

/* Sombras */
.shadow-primary-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-primary-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-primary-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-primary-xl {
    box-shadow: var(--shadow-xl) !important;
}

/* ============================================
   ESTILOS DE BOTONES CON LA NUEVA PALETA
   ============================================ */
.btn-primary-custom {
    background: var(--gradient-primary);
    border: none;
    color: var(--text-white);
    padding: 10px 25px;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.btn-primary-custom:hover {
    background: var(--gradient-dark);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.btn-outline-primary-custom {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 25px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-outline-primary-custom:hover {
    background: var(--primary-color);
    color: var(--text-white);
}

/* ============================================
   COMPATIBILIDAD CON NOMBRES ANTIGUOS
   ============================================ */
.color-primario {
    background: var(--primary-color);
}

.color-secundario {
    background: var(--secondary-color);
}