/**
 * ===================================================================
 * 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-03-24 09:39:57 * 
 * DOCTRINA DE COLORES (REGLA ABSOLUTA):
 *   - Colores institucionales → SOLO para fondos, bordes y decoracion
 *   - Fondo claro/blanco/transparente → texto e iconos NEGROS o GRISES
 *   - Fondo oscuro/negro/opaco → texto e iconos BLANCOS
 *   - NUNCA usar colores institucionales como color de texto o iconos
 *
 * USO CORRECTO:
 *   background: var(--color-principal);
 *   color: var(--color-texto-sobre-principal);  -- blanco o negro segun fondo
 *
 * USO INCORRECTO (PROHIBIDO):
 *   color: var(--color-principal);     -- NUNCA institucional como texto
 *   color: var(--color-secundario-1);  -- NUNCA institucional como texto
 *
 * 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: #1e3a5f;
    --color-secundario-1: #2d4a6f;
    --color-secundario-2: #4a5568;
    
    /* Componentes RGB para usar con rgba() - sintaxis moderna */
    --color-principal-rgb: 30 58 95;
    --color-secundario-1-rgb: 45 74 111;
    --color-secundario-2-rgb: 74 85 104;
    
    /* Alias semanticos (turquesa = secundario-1, verde-lima = secundario-2) */
    --color-turquesa: #2d4a6f;
    --color-verde-lima: #4a5568;
    
    /* Colores de texto */
    --color-texto-oscuro: #1a202c;
    --color-texto-claro: #FFFFFF;
    --color-texto-gris: #4a5568;
    --color-texto-gris-claro: #718096;
    
    /* Colores de fondo */
    --color-fondo-claro: #F7FAFC;
    --color-fondo-medio: #E2E8F0;

    /* ========================================
     * SISTEMA INTELIGENTE DE CONTRASTE (CENTRAL)
     * Variables que se HEREDAN por cascada CSS.
     * Default: fondo claro → texto oscuro, iconos gris.
     * Elementos con fondo oscuro REDEFINEN estas variables
     * y todos sus hijos heredan automaticamente.
     * ======================================== */
    --contraste-texto: #1a202c;
    --contraste-icono: #4a5568;

    /* ========================================
     * 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: #FFFFFF;
    --color-texto-sobre-secundario-1: #FFFFFF;
    --color-texto-sobre-secundario-2: #FFFFFF;

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

    /* ========================================
     * COLORES INSTITUCIONALES SEGUROS (para fondos y bordes)
     * Garantizan visibilidad del color institucional.
     * Si el institucional es muy claro, se oscurece automaticamente.
     * USO: background, border, decoracion. NUNCA como color de texto.
     * ======================================== */
    --color-principal-seguro: #1e3a5f;
    --color-secundario-1-seguro: #2d4a6f;
    --color-secundario-2-seguro: #4a5568;

    /* 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: false;

    /* Niveles de luminosidad (debug: principal=oscuro, sec1=oscuro, sec2=medio_oscuro) */
    /* Ratios de contraste principal: blanco=11.5:1, negro=1.42: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: #4a5568;
    --color-icono-tabla-hover: #1a202c;
    --color-icono-tabla-gris: #4a5568;
    --color-icono-tabla-gris-hover: #1a202c;

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

    /* Estados hover y active (derivados automaticos) */
    --color-principal-hover: #405877;
    --color-principal-active: #1B3456;
    --color-secundario-1-hover: #4D6585;
    --color-secundario-1-active: #294364;
    --color-secundario-2-hover: #656F7F;
    --color-secundario-2-active: #434D5E;
    
    /* Colores con transparencia para sombras */
    --color-principal-sombra: rgba(30, 58, 95, 0.3);
    --color-secundario-1-sombra: rgba(45, 74, 111, 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(45, 74, 111, 0.08);
    --color-secundario-1-alpha-015: rgba(45, 74, 111, 0.15);
    --color-secundario-1-alpha-020: rgba(45, 74, 111, 0.2);
    --color-principal-alpha-008: rgba(30, 58, 95, 0.08);
    --color-principal-alpha-015: rgba(30, 58, 95, 0.15);
    --color-principal-alpha-020: rgba(30, 58, 95, 0.2);

    /* Gradientes predefinidos */
    --gradiente-principal: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    --gradiente-turquesa: linear-gradient(135deg, #2d4a6f 0%, #263F5E 100%);
    --gradiente-hover: linear-gradient(135deg, #405877 0%, #4D6585 100%);
    
    /* ========================================
     * VARIABLES PARA ICONOS MATERIAL ICONS
     * Usadas en material-icons-universal.css
     * ======================================== */
    
    /* Estado normal de iconos - NEUTROS (nunca institucional) */
    --icon-color: var(--color-texto-gris);
    --text-color: var(--color-texto-oscuro);

    /* Estado hover de iconos */
    --hover-color: var(--color-texto-oscuro);
    --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
 * DOCTRINA: Texto SIEMPRE neutro. NUNCA institucional.
 * Fondo claro → texto oscuro. Fondo oscuro → texto blanco.
 * ======================================== */
.text-principal { color: var(--color-texto-oscuro) !important; }
.text-turquesa, .text-secundario-1 { color: var(--color-texto-oscuro) !important; }
.text-verde-lima, .text-secundario-2 { color: var(--color-texto-oscuro) !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-texto-oscuro);
    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-texto-oscuro);
    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-texto-oscuro);
    text-decoration: none;
    transition: color 0.2s ease;
}
a.enlace-institucional:hover {
    color: var(--color-texto-oscuro);
    text-decoration: underline;
}
a.enlace-institucional:visited {
    color: var(--color-texto-gris);
}

/* ========================================
 * 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-texto-oscuro);
    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;
}

/* =============================================
 * SISTEMA INTELIGENTE DE CONTRASTE (CENTRALIZADO)
 * =============================================
 * COMO FUNCIONA:
 *   1. :root define --contraste-texto (oscuro) y --contraste-icono (gris)
 *   2. Elementos con FONDO OSCURO redefinen: --contraste-texto: blanco, --contraste-icono: blanco
 *   3. Hijos heredan automaticamente por cascada CSS
 *   4. .material-icons usa var(--contraste-icono) por defecto
 *   5. Elementos con FONDO CLARO resetean al default
 *
 * RESULTADO: Ningun otro CSS necesita preocuparse por contraste.
 *            Solo poner el fondo, el texto/iconos se ajustan solos.
 *
 * PARA AGREGAR NUEVOS ELEMENTOS:
 *   - Fondo oscuro → agregarlo a la lista "FONDO OSCURO"
 *   - Fondo claro despues de oscuro → agregarlo a la lista "RESET CLARO"
 * ============================================= */

/* --- MATERIAL ICONS: color por defecto desde variable de contraste --- */
.material-icons {
    color: var(--contraste-icono);
}

/* ===========================================
 * FONDO OSCURO → CONTRASTE BLANCO
 * Cualquier elemento aqui hereda texto/iconos blancos a TODOS sus hijos
 * =========================================== */

/* Fondos institucionales */
.bg-principal,
.bg-turquesa, .bg-secundario-1,
.bg-verde-lima, .bg-secundario-2,
.bg-gradiente-principal,

/* Componentes con fondo principal */
.titulo-institucional,
.titulo-institucional-gradiente,
.card-institucional-header,
.tabla-institucional thead,
.badge-institucional-principal,
.badge-institucional-turquesa,
.badge-institucional,

/* Botones con fondo institucional */
.btn-institucional,
.btn-institucional-principal,
.btn-institucional-outline:hover,
[class*="btn-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,

/* Headers con fondo institucional */
.usuarios-menu-header,
.usuarios-menu-header-icon,
.usuarios-sinarea-header,
.usuarios-busqueda-header,
.seccion-listado-header,
.ciudadanos-header,
.ciudadano-form-header,
.ciudadano-form-header-icon,
.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,

/* Tablas con header oscuro */
.respaldo-tabla thead,
.borde_tab th,
.tw-borde-tab th,
[class*="-tabla"] th,
[class*="-table"] th,

/* Cards con iconos institucionales */
.adm-option-icon,
.usuarios-menu-card-icon,

/* Admin components */
.adm-btn-primary,
.adm-btn-primary:hover,
.adm-btn-success,
.adm-btn-success:hover,
.adm-btn-danger:hover,
.adm-badge-success,
.adm-badge-danger,
.adm-badge-principal,
.adm-sidebar-title,
.adm-sidebar-header,
.adm-nav-item.activo:hover,

/* Badges */
.badge-nuevo,
.badge-pendiente,
[class*="badge-institucional"],

/* Botones de accion con fondo oscuro */
.historico-btn-accion,
.historico-btn-accion.btn-secundario,

/* Hover que agrega fondo oscuro */
.ciudadano-historico-toggle:hover,
.log-toggle-btn:hover,
.usuarios-menu-card:hover .usuarios-menu-card-icon {
    --contraste-texto: #FFFFFF;
    --contraste-icono: #FFFFFF;
    color: var(--contraste-texto) !important;
}

/* Links dentro de fondos oscuros heredan blanco */
.borde_tab th a,
.tw-borde-tab th a,
[class*="-tabla"] th a,
[class*="-table"] th a {
    color: #FFFFFF;
}

/* ===========================================
 * RESET CLARO → CONTRASTE OSCURO
 * Elementos con fondo claro que estan DENTRO de un contexto oscuro
 * Resetean al comportamiento por defecto
 * =========================================== */
.bg-claro,
.bg-medio,
.card-institucional-body,
.alerta-institucional,
.alerta-institucional-info,
.adm-btn,
.adm-btn:hover,
.adm-btn-danger,
.adm-badge-muted,
.adm-badge-warning,
.adm-nav-item,
.adm-alert {
    --contraste-texto: #1a202c;
    --contraste-icono: #4a5568;
    color: var(--contraste-texto);
}

/* Nav activo: fondo claro, texto oscuro, indicador de borde */
.adm-nav-item.activo,
.adm-nav-item.activo .material-icons {
    --contraste-texto: #1a202c;
    --contraste-icono: #1a202c;
    color: var(--contraste-texto) !important;
    border-bottom: 2px solid var(--color-secundario-1, #00AAA7);
}