/**
 * ===================================================================
 * COLORES INSTITUCIONALES - FALLBACK ESTATICO
 * ===================================================================
 * Nombre: colores-institucionales.css
 * Proposito: Definir variables CSS con valores fallback estaticos
 * Fecha: 2026-01-11
 * 
 * IMPORTANTE:
 * Este archivo define variables CSS :root con valores POR DEFECTO.
 * El archivo colores-institucionales.php SOBRESCRIBE estos valores
 * con los colores dinamicos desde la base de datos.
 * 
 * ORDEN DE CARGA:
 * 1. colores-institucionales.css (este archivo - fallbacks)
 * 2. colores-institucionales.php (sobrescribe con valores de BD)
 * 
 * Si el .php no carga (error, etc), el sistema usa estos valores.
 * ===================================================================
 */

/* ========================================
 * VARIABLES CSS ROOT - FALLBACK
 * Estos valores se usan SOLO si .php no carga
 * ======================================== */
:root {
    /* ========================================
     * PALETA GUBERNAMENTAL SOBRIA Y PROFESIONAL
     * Colores principales institucionales (fallback estatico)
     * ======================================== */
    --color-principal: #1e3a5f;      /* Azul navy oscuro - serio, gubernamental */
    --color-secundario-1: #2d4a6f;   /* Azul slate - botones sobrios */
    --color-secundario-2: #4a5568;   /* Gris neutro - badges discretos */

    /* Alias semanticos (mantener para compatibilidad) */
    --color-turquesa: #2d4a6f;       /* Ahora es azul slate */
    --color-verde-lima: #4a5568;     /* Ahora es gris neutro */

    /* Colores de texto */
    --color-texto-oscuro: #1a202c;   /* Casi negro */
    --color-texto-claro: #FFFFFF;    /* Blanco */
    --color-texto-gris: #4a5568;     /* Gris medio */
    --color-texto-gris-claro: #718096; /* Gris suave */

    /* Colores de fondo */
    --color-fondo-claro: #F7FAFC;    /* Gris muy claro con tinte azul */
    --color-fondo-medio: #E2E8F0;    /* Gris claro slate */

    /* ========================================
     * COLORES DE CONTRASTE DINAMICO (fallback)
     * Todos los colores gubernamentales son oscuros -> texto blanco
     * ======================================== */
    --color-texto-sobre-principal: #FFFFFF;
    --color-texto-sobre-secundario-1: #FFFFFF;
    --color-texto-sobre-secundario-2: #FFFFFF;

    /* Alias para modales y headers */
    --color-texto-sobre-turquesa: var(--color-texto-sobre-secundario-1);
    --color-texto-sobre-verde-lima: var(--color-texto-sobre-secundario-2);

    /* Flags booleanos para JS (todos oscuros) */
    --principal-es-claro: false;
    --secundario-1-es-claro: false;
    --secundario-2-es-claro: false;

    /* Estados hover y active (paleta gubernamental) */
    --color-principal-hover: #2d4a6f;   /* Azul slate mas claro */
    --color-principal-active: #162c47;  /* Azul navy mas oscuro */
    --color-secundario-1-hover: #3d5a7f; /* Azul slate hover */
    --color-secundario-1-active: #1d3a5f; /* Azul slate active */
    --color-secundario-2-hover: #5a6578; /* Gris neutro hover */
    --color-secundario-2-active: #3a4558; /* Gris neutro active */

    /* Colores con transparencia */
    --color-principal-sombra: rgba(30, 58, 95, 0.3);
    --color-secundario-1-sombra: rgba(45, 74, 111, 0.3);

    /* Gradientes predefinidos (tonos azul sobrios) */
    --gradiente-principal: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    --gradiente-turquesa: linear-gradient(135deg, #2d4a6f 0%, #1d3a5f 100%);
    --gradiente-hover: linear-gradient(135deg, #2d4a6f 0%, #3d5a7f 100%);

    /* ========================================
     * COLORES PARA FUNCIONALIDADES DE IA
     * Gradiente morado/indigo distintivo para IA
     * ======================================== */
    --color-ia-primario: #667eea;
    --color-ia-secundario: #764ba2;
    --color-ia-primario-hover: #7b8ff0;
    --color-ia-secundario-hover: #8a5cb8;
    --gradiente-ia: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradiente-ia-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    --color-ia-sombra: rgba(102, 126, 234, 0.3);
}

/* ========================================
 * ESTILOS ADICIONALES QUE NO ESTAN EN .PHP
 * Estos se aplican siempre, no dependen del .php
 * ======================================== */

/* Scrollbars personalizadas (navegadores Webkit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-fondo-claro);
}

::-webkit-scrollbar-thumb {
    background: var(--color-texto-gris-claro);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-secundario-1);
}

/* Seleccion de texto */
::selection {
    background: var(--color-secundario-1);
    color: var(--color-texto-claro);
}

::-moz-selection {
    background: var(--color-secundario-1);
    color: var(--color-texto-claro);
}

/* Focus visible para accesibilidad */
:focus-visible {
    outline: 2px solid var(--color-secundario-1);
    outline-offset: 2px;
}

/* ========================================
 * CLASES PARA TRANSICIONES SUAVES
 * ======================================== */
.transicion-color {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.transicion-todo {
    transition: all 0.3s ease;
}

/* ========================================
 * CLASES PARA SOMBRAS INSTITUCIONALES
 * ======================================== */
.sombra-principal {
    box-shadow: 0 2px 8px var(--color-principal-sombra);
}

.sombra-turquesa {
    box-shadow: 0 2px 8px var(--color-secundario-1-sombra);
}

.sombra-suave {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sombra-media {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.sombra-fuerte {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* ========================================
 * CLASES PARA SEPARADORES
 * ======================================== */
.separador-horizontal {
    height: 1px;
    background: var(--color-fondo-medio);
    margin: 15px 0;
}

.separador-vertical {
    width: 1px;
    background: var(--color-fondo-medio);
    margin: 0 15px;
    display: inline-block;
    height: 100%;
}

.separador-decorativo {
    height: 3px;
    background: var(--gradiente-principal);
    margin: 20px 0;
    border-radius: 2px;
}

/* ========================================
 * ESTADOS DE ELEMENTOS INTERACTIVOS
 * ======================================== */
.interactivo {
    cursor: pointer;
    transition: all 0.2s ease;
}

.interactivo:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.interactivo:active {
    transform: translateY(0);
}

.deshabilitado, [disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
 * CLASES DE POSICIONAMIENTO DE ICONOS
 * ======================================== */
.icono-izquierda {
    margin-right: 8px;
    vertical-align: middle;
}

.icono-derecha {
    margin-left: 8px;
    vertical-align: middle;
}

.icono-centrado {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
 * CLASES PARA TEXTO
 * ======================================== */
.texto-truncado {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.texto-mayusculas {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.texto-pequeno {
    font-size: 0.875em;
    color: var(--color-texto-gris);
}

.texto-muy-pequeno {
    font-size: 0.75em;
    color: var(--color-texto-gris-claro);
}

/* ========================================
 * PRINT STYLES
 * Colores se imprimen correctamente
 * ======================================== */
@media print {
    .bg-principal,
    .bg-turquesa,
    .bg-secundario-1 {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .titulo-institucional,
    .titulo-institucional-gradiente {
        background: #1e3a5f !important; /* Azul navy gubernamental */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ========================================
 * ACCESIBILIDAD - MODO ALTO CONTRASTE
 * ======================================== */
@media (prefers-contrast: high) {
    :root {
        --color-principal: #000000;
        --color-secundario-1: #0066CC;
        --color-secundario-2: #FFD700;
        --color-fondo-claro: #FFFFFF;
        --color-fondo-medio: #CCCCCC;
    }
}

/* ========================================
 * MODO OSCURO (si se implementa en futuro)
 * ======================================== */
@media (prefers-color-scheme: dark) {
    /* Descomentrar cuando se implemente modo oscuro
    :root {
        --color-fondo-claro: #1A1A1A;
        --color-fondo-medio: #2D2D2D;
        --color-texto-oscuro: #E0E0E0;
    }
    */
}

/* ========================================
 * COMPATIBILIDAD IE11 (si es necesario)
 * IE11 no soporta CSS variables
 * ======================================== */
/* 
@supports not (--css: variables) {
    .bg-principal { background-color: #384152 !important; }
    .bg-turquesa { background-color: #00AAA7 !important; }
    .bg-verde-lima { background-color: #BAD00C !important; }
    .text-principal { color: #384152 !important; }
    .text-turquesa { color: #00AAA7 !important; }
}
*/