/**
 * ===================================================================
 * COLORES INSTITUCIONALES DINAMICOS - Generado desde Base de Datos
 * ===================================================================
 * Este CSS es generado dinamicamente por colores-institucionales.php
 * Los colores provienen del tema activo en la base de datos.
 * 
 * Fecha generacion: 2026-01-22 19:37:54 * 
 * USO:
 *   background: var(--color-principal);
 *   color: var(--color-texto-claro);
 * 
 * NO EDITAR MANUALMENTE - Los cambios se pierden al regenerar
 * Para cambiar colores, modificar en: Administracion > Temas
 * ===================================================================
 */

/* ========================================
 * VARIABLES CSS ROOT
 * Estas variables se usan en todo el sistema
 * ======================================== */
:root {
    /* Colores principales institucionales */
    --color-principal: #384152;
    --color-secundario-1: #00AAA7;
    --color-secundario-2: #BAD00C;
    
    /* Componentes RGB para usar con rgba() - sintaxis moderna */
    --color-principal-rgb: 56 65 82;
    --color-secundario-1-rgb: 0 170 167;
    --color-secundario-2-rgb: 186 208 12;
    
    /* Alias semanticos (turquesa = secundario-1, verde-lima = secundario-2) */
    --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 (derivados automaticos) */
    --color-principal-hover: #565E6C;
    --color-principal-active: #323B4A;
    --color-secundario-1-hover: #26B7B4;
    --color-secundario-1-active: #009996;
    --color-secundario-2-hover: #C4D730;
    --color-secundario-2-active: #A7BB0B;
    
    /* Colores con transparencia para sombras */
    --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%, #00918E 100%);
    --gradiente-hover: linear-gradient(135deg, #565E6C 0%, #26B7B4 100%);
    
    /* ========================================
     * VARIABLES PARA ICONOS MATERIAL ICONS
     * Usadas en material-icons-universal.css
     * ======================================== */
    
    /* Estado normal de iconos - usar color turquesa */
    --icon-color: var(--color-secundario-1);
    --text-color: var(--color-texto-oscuro);
    
    /* Estado hover de iconos */
    --hover-color: var(--color-secundario-1-hover);
    --hover-bg: rgb(var(--color-secundario-1-rgb) / 0.1);
    --hover-border: var(--color-secundario-1);
    
    /* Estado active de iconos */
    --active-color: var(--color-texto-claro);
    --active-bg: var(--color-secundario-1);
    --active-border: var(--color-secundario-1);
    
    /* Variables para tabs y UI components */
    --bg-color: var(--color-fondo-claro);
    --border-color: var(--color-fondo-medio);
    
    /* Variables semanticas especificas UEA (legacy support) */
    --uea-principal: var(--color-principal);
    --uea-apoyo: var(--color-texto-gris);
}

/* ========================================
 * CLASES UTILITARIAS - FONDOS
 * Usar: <div class="bg-principal">
 * ======================================== */
.bg-principal { 
    background-color: var(--color-principal) !important; 
    color: var(--color-texto-claro) !important;
}
.bg-turquesa, .bg-secundario-1 { 
    background-color: var(--color-secundario-1) !important;
    color: var(--color-texto-claro) !important;
}
.bg-verde-lima, .bg-secundario-2 { 
    background-color: var(--color-secundario-2) !important;
    color: var(--color-texto-oscuro) !important;
}
.bg-claro { 
    background-color: var(--color-fondo-claro) !important;
    color: var(--color-texto-oscuro) !important;
}
.bg-medio { 
    background-color: var(--color-fondo-medio) !important;
    color: var(--color-texto-oscuro) !important;
}
.bg-gradiente-principal {
    background: var(--gradiente-principal) !important;
    color: var(--color-texto-claro) !important;
}

/* ========================================
 * CLASES UTILITARIAS - TEXTOS
 * Usar: <span class="text-turquesa">
 * ======================================== */
.text-principal { color: var(--color-principal) !important; }
.text-turquesa, .text-secundario-1 { color: var(--color-secundario-1) !important; }
.text-verde-lima, .text-secundario-2 { color: var(--color-secundario-2) !important; }
.text-oscuro { color: var(--color-texto-oscuro) !important; }
.text-claro { color: var(--color-texto-claro) !important; }
.text-gris { color: var(--color-texto-gris) !important; }
.text-gris-claro { color: var(--color-texto-gris-claro) !important; }

/* ========================================
 * CLASES UTILITARIAS - BORDES
 * Usar: <div class="border-turquesa">
 * ======================================== */
.border-principal { border-color: var(--color-principal) !important; }
.border-turquesa, .border-secundario-1 { border-color: var(--color-secundario-1) !important; }
.border-verde-lima, .border-secundario-2 { border-color: var(--color-secundario-2) !important; }
.border-claro { border-color: var(--color-fondo-claro) !important; }
.border-medio { border-color: var(--color-fondo-medio) !important; }

/* Bordes izquierdos decorativos */
.borde-izq-principal { border-left: 4px solid var(--color-principal) !important; }
.borde-izq-turquesa { border-left: 4px solid var(--color-secundario-1) !important; }
.borde-izq-verde-lima { border-left: 4px solid var(--color-secundario-2) !important; }

/* ========================================
 * BOTONES INSTITUCIONALES
 * Usar: <button class="btn-institucional">
 * ======================================== */
.btn-institucional {
    background-color: var(--color-secundario-1);
    color: var(--color-texto-claro);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-institucional:hover {
    background-color: var(--color-secundario-1-hover);
    box-shadow: 0 2px 8px var(--color-secundario-1-sombra);
}
.btn-institucional:active {
    background-color: var(--color-secundario-1-active);
}

.btn-institucional-principal {
    background-color: var(--color-principal);
    color: var(--color-texto-claro);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-institucional-principal:hover {
    background-color: var(--color-principal-hover);
    box-shadow: 0 2px 8px var(--color-principal-sombra);
}
.btn-institucional-principal:active {
    background-color: var(--color-principal-active);
}

.btn-institucional-outline {
    background-color: transparent;
    color: var(--color-secundario-1);
    border: 2px solid var(--color-secundario-1);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-institucional-outline:hover {
    background-color: var(--color-secundario-1);
    color: var(--color-texto-claro);
}

/* ========================================
 * TITULOS Y HEADERS
 * Usar: <h1 class="titulo-institucional">
 * ======================================== */
.titulo-institucional {
    background: var(--color-principal);
    color: var(--color-texto-claro);
    padding: 10px 15px;
    margin: 0 0 15px 0;
    border-radius: 4px 4px 0 0;
}

.titulo-institucional-gradiente {
    background: var(--gradiente-principal);
    color: var(--color-texto-claro);
    padding: 10px 15px;
    margin: 0 0 15px 0;
    border-radius: 4px 4px 0 0;
}

.subtitulo-institucional {
    color: var(--color-principal);
    border-bottom: 2px solid var(--color-secundario-2);
    padding-bottom: 8px;
    margin-bottom: 15px;
}

/* ========================================
 * ENLACES
 * Los enlaces heredan color turquesa
 * ======================================== */
a.enlace-institucional {
    color: var(--color-secundario-1);
    text-decoration: none;
    transition: color 0.2s ease;
}
a.enlace-institucional:hover {
    color: var(--color-principal);
    text-decoration: underline;
}
a.enlace-institucional:visited {
    color: var(--color-principal);
}

/* ========================================
 * BADGES Y ETIQUETAS
 * Usar: <span class="badge-institucional">Nuevo</span>
 * ======================================== */
.badge-institucional {
    background-color: var(--color-secundario-2);
    color: var(--color-texto-oscuro);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: bold;
    display: inline-block;
}

.badge-institucional-turquesa {
    background-color: var(--color-secundario-1);
    color: var(--color-texto-claro);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: bold;
    display: inline-block;
}

.badge-institucional-principal {
    background-color: var(--color-principal);
    color: var(--color-texto-claro);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: bold;
    display: inline-block;
}

/* ========================================
 * ALERTAS Y MENSAJES
 * ======================================== */
.alerta-institucional {
    background-color: var(--color-fondo-claro);
    border-left: 4px solid var(--color-secundario-2);
    padding: 12px 15px;
    margin: 10px 0;
    border-radius: 0 4px 4px 0;
}

.alerta-institucional-info {
    background-color: rgba(0, 170, 167, 0.1);
    border-left: 4px solid var(--color-secundario-1);
    padding: 12px 15px;
    margin: 10px 0;
    border-radius: 0 4px 4px 0;
}

/* ========================================
 * FORMULARIOS
 * ======================================== */
.form-control-institucional:focus {
    border-color: var(--color-secundario-1);
    box-shadow: 0 0 0 3px var(--color-secundario-1-sombra);
    outline: none;
}

.form-label-institucional {
    color: var(--color-principal);
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

/* ========================================
 * TABLAS
 * ======================================== */
.tabla-institucional thead {
    background-color: var(--color-principal);
    color: var(--color-texto-claro);
}

.tabla-institucional tbody tr:nth-child(even) {
    background-color: var(--color-fondo-claro);
}

.tabla-institucional tbody tr:hover {
    background-color: var(--color-fondo-medio);
}

/* ========================================
 * CARDS Y PANELES
 * ======================================== */
.card-institucional {
    border: 1px solid var(--color-fondo-medio);
    border-radius: 4px;
    overflow: hidden;
}

.card-institucional-header {
    background: var(--color-principal);
    color: var(--color-texto-claro);
    padding: 10px 15px;
}

.card-institucional-body {
    padding: 15px;
    background: var(--color-texto-claro);
}

/* ========================================
 * ICONOS MATERIAL ICONS SOBRE FONDOS
 * Los iconos sobre fondos oscuros deben ser blancos
 * ======================================== */
.bg-principal .material-icons,
.bg-turquesa .material-icons,
.bg-secundario-1 .material-icons,
.btn-institucional .material-icons,
.btn-institucional-principal .material-icons,
.titulo-institucional .material-icons,
.titulo-institucional-gradiente .material-icons,
.badge-institucional-turquesa .material-icons,
.badge-institucional-principal .material-icons {
    color: var(--color-texto-claro) !important;
}

/* Iconos sobre fondos claros deben ser del color institucional */
.bg-verde-lima .material-icons,
.bg-secundario-2 .material-icons,
.badge-institucional .material-icons {
    color: var(--color-texto-oscuro) !important;
}

/* ========================================
 * RESPONSIVE
 * ======================================== */
@media (max-width: 768px) {
    .btn-institucional,
    .btn-institucional-principal,
    .btn-institucional-outline {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .titulo-institucional,
    .titulo-institucional-gradiente {
        padding: 12px;
        font-size: 16px;
    }
}

/* ========================================
 * ANIMACIONES
 * ======================================== */
@keyframes pulse-institucional {
    0% { box-shadow: 0 0 0 0 var(--color-secundario-1-sombra); }
    70% { box-shadow: 0 0 0 10px rgba(0, 170, 167, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 170, 167, 0); }
}

.pulse-turquesa {
    animation: pulse-institucional 2s infinite;
}