/**
 * ===================================================================
 * 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 {
    /* Colores principales institucionales (fallback estatico) */
    --color-principal: #384152;
    --color-secundario-1: #00AAA7;
    --color-secundario-2: #BAD00C;
    
    /* Alias semanticos */
    --color-turquesa: #00AAA7;
    --color-verde-lima: #BAD00C;
    
    /* Colores de texto */
    --color-texto-oscuro: #000000;
    --color-texto-claro: #FFFFFF;
    --color-texto-gris: #666666;
    --color-texto-gris-claro: #999999;
    
    /* Colores de fondo */
    --color-fondo-claro: #F5F5F5;
    --color-fondo-medio: #E0E0E0;
    
    /* Estados hover y active (fallback estatico) */
    --color-principal-hover: #4A5568;
    --color-principal-active: #2D3748;
    --color-secundario-1-hover: #00C4C1;
    --color-secundario-1-active: #008F8C;
    --color-secundario-2-hover: #D4E80E;
    --color-secundario-2-active: #9AB00A;
    
    /* Colores con transparencia */
    --color-principal-sombra: rgba(56, 65, 82, 0.3);
    --color-secundario-1-sombra: rgba(0, 170, 167, 0.3);
    
    /* Gradientes predefinidos */
    --gradiente-principal: linear-gradient(135deg, #384152 0%, #00AAA7 100%);
    --gradiente-turquesa: linear-gradient(135deg, #00AAA7 0%, #008F8C 100%);
    --gradiente-hover: linear-gradient(135deg, #4A5568 0%, #00C4C1 100%);
}

/* ========================================
 * 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: #384152 !important;
        -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; }
}
*/