/**
 * ===================================================================
 * 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-02-15 17:29:26 * 
 * 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: #6a809c;
    --color-secundario-1: #15aad7;
    --color-secundario-2: #e9b102;
    
    /* Componentes RGB para usar con rgba() - sintaxis moderna */
    --color-principal-rgb: 106 128 156;
    --color-secundario-1-rgb: 21 170 215;
    --color-secundario-2-rgb: 233 177 2;
    
    /* Alias semanticos (turquesa = secundario-1, verde-lima = secundario-2) */
    --color-turquesa: #15aad7;
    --color-verde-lima: #e9b102;
    
    /* 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;

    /* ========================================
     * COLORES DE CONTRASTE DINAMICO MEJORADO
     * Calculados automaticamente segun ratio de contraste WCAG 2.1
     * USO: Para texto/iconos sobre fondos de color institucional
     * NOTA: El sistema selecciona automaticamente blanco o negro
     *       segun cual tenga mejor ratio de contraste (minimo 4.5:1)
     * ======================================== */
    --color-texto-sobre-principal: #000000;
    --color-texto-sobre-secundario-1: #000000;
    --color-texto-sobre-secundario-2: #000000;

    /* Contraste suave para textos secundarios (no tan extremo) */
    --color-texto-suave-sobre-principal: #e2e8f0;
    --color-texto-suave-sobre-secundario-1: #4a5568;
    --color-texto-suave-sobre-secundario-2: #4a5568;

    /* ========================================
     * COLORES INSTITUCIONALES SEGUROS (NUEVO 2026-01-30)
     * Garantizan contraste sobre fondos BLANCOS/CLAROS
     * USO: Para textos/iconos institucionales sobre fondos blancos
     * NOTA: Si el color institucional es claro (beige, amarillo, etc.),
     *       se reemplaza automaticamente por texto oscuro
     * ======================================== */
    --color-principal-seguro: #6a809c;
    --color-secundario-1-seguro: #15aad7;
    --color-secundario-2-seguro: #000000;

    /* 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 (si necesita logica condicional) */
    --principal-es-claro: false;
    --secundario-1-es-claro: false;
    --secundario-2-es-claro: true;

    /* Niveles de luminosidad (debug: principal=medio_oscuro, sec1=medio_claro, sec2=medio_claro) */
    /* Ratios de contraste principal: blanco=4.05:1, negro=4.03:1 */

    /* ========================================
     * COLORES PARA ICONOS EN TABLAS (DINAMICOS)
     * Calculados para contrastar con fondos de filas de tabla
     * USO: Para iconos de accion en listados (.listado1, .listado2)
     * ======================================== */
    --color-icono-tabla: #6a809c;
    --color-icono-tabla-hover: #15aad7;
    --color-icono-tabla-gris: #6a809c;
    --color-icono-tabla-gris-hover: #15aad7;

    /* Colores semanticos para iconos de estado en tablas */
    --color-icono-exito: #388e3c;
    --color-icono-firma: #f57c00;
    --color-icono-error: #d32f2f;
    --color-icono-pendiente: #666666;

    /* Estados hover y active (derivados automaticos) */
    --color-principal-hover: #8093AB;
    --color-principal-active: #5F738C;
    --color-secundario-1-hover: #38B7DD;
    --color-secundario-1-active: #1399C2;
    --color-secundario-2-hover: #ECBD28;
    --color-secundario-2-active: #D29F02;
    
    /* Colores con transparencia para sombras */
    --color-principal-sombra: rgba(106, 128, 156, 0.3);
    --color-secundario-1-sombra: rgba(21, 170, 215, 0.3);

    /* ========================================
     * COLORES CON TRANSPARENCIA DINAMICA (NUEVO 2026-01-31)
     * Para fondos sutiles que usan colores institucionales
     * USO: Para items activos, badges, overlays, etc.
     * ======================================== */
    --color-secundario-1-alpha-008: rgba(21, 170, 215, 0.08);
    --color-secundario-1-alpha-015: rgba(21, 170, 215, 0.15);
    --color-secundario-1-alpha-020: rgba(21, 170, 215, 0.2);
    --color-principal-alpha-008: rgba(106, 128, 156, 0.08);
    --color-principal-alpha-015: rgba(106, 128, 156, 0.15);
    --color-principal-alpha-020: rgba(106, 128, 156, 0.2);

    /* Gradientes predefinidos */
    --gradiente-principal: linear-gradient(135deg, #6a809c 0%, #15aad7 100%);
    --gradiente-turquesa: linear-gradient(135deg, #15aad7 0%, #1291B7 100%);
    --gradiente-hover: linear-gradient(135deg, #8093AB 0%, #38B7DD 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-sobre-principal) !important;
}
.bg-turquesa, .bg-secundario-1 {
    background-color: var(--color-secundario-1) !important;
    color: var(--color-texto-sobre-secundario-1) !important;
}
.bg-verde-lima, .bg-secundario-2 {
    background-color: var(--color-secundario-2) !important;
    color: var(--color-texto-sobre-secundario-2) !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-sobre-principal) !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-sobre-secundario-1);
    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-sobre-principal);
    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-sobre-secundario-1);
}

/* ========================================
 * TITULOS Y HEADERS
 * Usar: <h1 class="titulo-institucional">
 * ======================================== */
.titulo-institucional {
    background: var(--color-principal);
    color: var(--color-texto-sobre-principal);
    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-sobre-principal);
    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-sobre-secundario-2);
    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-sobre-secundario-1);
    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-sobre-principal);
    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-sobre-principal);
}

.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-sobre-principal);
    padding: 10px 15px;
}

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

/* ========================================
 * ICONOS MATERIAL ICONS SOBRE FONDOS
 * CONTRASTE DINAMICO: Los iconos heredan el color de texto
 * contrastante calculado automaticamente segun luminosidad
 * ======================================== */
.bg-principal .material-icons,
.btn-institucional-principal .material-icons,
.titulo-institucional .material-icons,
.titulo-institucional-gradiente .material-icons,
.badge-institucional-principal .material-icons,
.card-institucional-header .material-icons {
    color: var(--color-texto-sobre-principal) !important;
}

.bg-turquesa .material-icons,
.bg-secundario-1 .material-icons,
.btn-institucional .material-icons,
.badge-institucional-turquesa .material-icons {
    color: var(--color-texto-sobre-secundario-1) !important;
}

.bg-verde-lima .material-icons,
.bg-secundario-2 .material-icons,
.badge-institucional .material-icons {
    color: var(--color-texto-sobre-secundario-2) !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;
}

/* ========================================
 * CONTRASTE DINAMICO GLOBAL
 * Reglas centralizadas para TODOS los elementos con fondos institucionales
 * Esto evita tener que definir contraste en cada archivo CSS individual
 * ======================================== */

/* --- HEADERS Y TITULOS CON FONDO PRINCIPAL --- */
[class*="-header"],
[class*="-titulo"],
[class*="-title"] {
    /* Si tiene fondo principal, aplica contraste */
}

/* Headers de menu/modulos con gradiente principal */
.usuarios-menu-header,
.usuarios-menu-header-icon,
.usuarios-sinarea-header,
.usuarios-busqueda-header,
.seccion-listado-header,
.ciudadanos-header,
.ciudadano-form-header,
.resultado-header,
.modal-header,
.comparacion-header,
.comparacion-header-col,
.subrogacion-header,
.subrogacion-seccion-header,
.subrogacion-form-titulo,
.respaldo-header,
.respaldo-seccion-header,
.respaldo-tab.activo,
.respaldo-numero-solicitud,
.respaldo-tabla thead {
    color: var(--color-texto-sobre-principal, #FFFFFF);
}

.usuarios-menu-header .material-icons,
.usuarios-menu-header-icon .material-icons,
.usuarios-sinarea-header .material-icons,
.usuarios-busqueda-header .material-icons,
.seccion-listado-header .material-icons,
.ciudadanos-header .material-icons,
.ciudadano-form-header .material-icons,
.ciudadano-form-header-icon .material-icons,
.comparacion-header .material-icons,
.comparacion-header-col .material-icons,
.subrogacion-header .material-icons,
.subrogacion-seccion-header .material-icons,
.subrogacion-form-titulo .material-icons,
.respaldo-header .material-icons,
.respaldo-seccion-header .material-icons,
.respaldo-tabla thead .material-icons {
    color: var(--color-texto-sobre-principal, #FFFFFF) !important;
}

/* --- CARDS CON ICONOS INSTITUCIONALES --- */
.usuarios-menu-card-icon,
.icon-usuarios,
.icon-ciudadanos,
.icon-grupos,
.icon-subrogacion,
.icon-reportes,
.icon-backup,
.icon-config {
    color: var(--color-texto-sobre-secundario-1, #FFFFFF);
}

.usuarios-menu-card-icon .material-icons,
[class*="icon-"] .material-icons {
    color: inherit !important;
}

/* Cuando card esta en hover con fondo secundario-1 */
.usuarios-menu-card:hover .usuarios-menu-card-icon {
    background: var(--color-secundario-1, #00AAA7);
    color: var(--color-texto-sobre-secundario-1, #FFFFFF);
}

/* --- BOTONES CON FONDO INSTITUCIONAL --- */
.btn-mover-dato,
.btn-accion-ciudadano,
.btn-ciudadanos-buscar,
.btn-regresar,
.btn-asignar,
.btn-seleccionar,
.btn-subrogacion-primario,
.btn-usuarios-primario,
.btn-respaldo-primario,
.ciudadano-form-btn-primario,
.resultado-btn-primario,
[class*="btn-institucional"] {
    color: var(--color-texto-sobre-secundario-1, #FFFFFF) !important;
}

.btn-mover-dato .material-icons,
.btn-accion-ciudadano .material-icons,
.btn-ciudadanos-buscar .material-icons,
.btn-regresar .material-icons,
.btn-asignar .material-icons,
.btn-seleccionar .material-icons,
.btn-subrogacion-primario .material-icons,
.btn-usuarios-primario .material-icons,
.btn-respaldo-primario .material-icons,
.ciudadano-form-btn-primario .material-icons,
[class*="btn-institucional"] .material-icons {
    color: inherit !important;
}

/* --- TOGGLES Y ACORDEONES --- */
.ciudadano-historico-toggle,
.ciudadano-seccion-titulo,
.log-toggle-btn {
    /* Texto normal usa color principal */
}

.ciudadano-historico-toggle:hover,
.log-toggle-btn:hover {
    background: var(--color-secundario-1, #00AAA7);
    color: var(--color-texto-sobre-secundario-1, #FFFFFF);
}

.ciudadano-historico-toggle:hover .material-icons,
.log-toggle-btn:hover .material-icons {
    color: var(--color-texto-sobre-secundario-1, #FFFFFF) !important;
}

/* --- TABLAS CON HEADERS INSTITUCIONALES --- */
.borde_tab th,
.tw-borde-tab th,
[class*="-tabla"] th,
[class*="-table"] th {
    background: var(--color-principal, #384152);
    color: var(--color-texto-sobre-principal, #FFFFFF);
}

.borde_tab th a,
.tw-borde-tab th a,
[class*="-tabla"] th a,
[class*="-table"] th a {
    color: var(--color-texto-sobre-principal, #FFFFFF);
}

.borde_tab th .material-icons,
.tw-borde-tab th .material-icons {
    color: var(--color-texto-sobre-principal, #FFFFFF) !important;
}

/* --- BADGES Y ETIQUETAS --- */
.badge-nuevo,
.badge-pendiente,
[class*="badge-institucional"] {
    color: var(--color-texto-sobre-secundario-1, #FFFFFF);
}

/* --- ALERTAS INFORMATIVAS --- */
.usuarios-alerta-info,
.alerta-info {
    /* Estas usan fondo semi-transparente, no necesitan contraste forzado */
}

/* --- OVERRIDE GLOBAL PARA CUALQUIER FONDO INSTITUCIONAL --- */
[style*="background"][style*="--color-principal"],
[style*="background"][style*="--color-secundario-1"],
[style*="background"][style*="--color-secundario-2"] {
    /* Aplicar contraste segun el fondo */
}