/**
 * ===================================================================
 * 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-06-16 21:04:10 * 
 * 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: #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;

    /* Texto base de cuerpo (alias central de texto oscuro dinamico).
     * Se USA en ~498 lugares como fallback inline var(--color-texto-base, #212529).
     * Antes NUNCA definida -> siempre fallback. Aqui toma el texto oscuro del
     * tema activo (BD). Sigue el tema dinamico igual que --color-texto-oscuro. */
    --color-texto-base: #000000;
    
    /* Colores de fondo */
    --color-fondo-claro: #F5F5F5;
    --color-fondo-medio: #E0E0E0;

    /* ========================================
     * 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: #000000;
    --contraste-icono: #666666;

    /* ========================================
     * 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: #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 (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: #384152;
    --color-secundario-1-seguro: #00AAA7;
    --color-secundario-2-seguro: #829208;

    /* 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=oscuro, sec1=medio_oscuro, sec2=claro) */
    /* Ratios de contraste principal: blanco=10.26:1, negro=1.59: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: #666666;

    /* ========================================
     * COLOR SEMANTICO DE ADVERTENCIA
     * Para borradores, alertas, estados que requieren atencion
     * Contraste WCAG calculado automaticamente
     * ======================================== */
    --color-advertencia: #FFA500;
    --color-texto-sobre-advertencia: #000000;
    --color-advertencia-hover: #FFB326;
    --color-advertencia-fondo-suave: rgba(255, 165, 0, 0.12);

    /* 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);

    /* ========================================
     * 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(0, 170, 167, 0.08);
    --color-secundario-1-alpha-015: rgba(0, 170, 167, 0.15);
    --color-secundario-1-alpha-020: rgba(0, 170, 167, 0.2);
    --color-principal-alpha-008: rgba(56, 65, 82, 0.08);
    --color-principal-alpha-015: rgba(56, 65, 82, 0.15);
    --color-principal-alpha-020: rgba(56, 65, 82, 0.2);

    /* Gradientes predefinidos (solidificados: fondos planos solidos, sistema gubernamental) */
    --gradiente-principal: var(--color-principal);
    --gradiente-turquesa: var(--color-secundario-1);
    --gradiente-hover: var(--color-principal-hover);
    
    /* ========================================
     * 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-fondo-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,
.visor-pdf-btn,
.btn-visor-accion,
.btn-visor-nav,
.btn-visor-cerrar,
.anexos-btn-zip,
.anexos-btn-restablecer,
.anexos-btn-eliminar-seleccionados,

/* 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,
.modal-visor-pdf-header,
.modal-visor-pdf-toolbar,
.modal-visor-cv-header,
.modal-visor-cv-footer,
.modal-versionamiento-header,
.modal-ia-header,
.ia-modal-header,
.modal-tramites-header,
.form-reasignar-header,
.validar-bodega-header,
.bancom-admin-header,
.perfil-dropdown-header,
.anexos-tabla-header,

/* NOTA: los 4 selectores de TABLA (.borde_tab th, .tw-borde-tab th, y los dos
 * wildcards [class*="-tabla"]/[class*="-table"]) FUERON MOVIDOS fuera de este
 * bloque (2026-06-07, fix-raiz thead). Ya NO comparten el #FFFFFF fijo de los
 * badges/headers semanticos. Ahora viven en su propio bloque mas abajo
 * ("WILDCARD TABLAS — DEFAULT DINAMICO") con --contraste-texto:
 * var(--color-texto-sobre-principal). Razon: el default REAL de una tabla
 * QUIPUX es fondo --color-principal (dinamico), no un oscuro fijo. Con #FFFFFF
 * fijo, cualquier tabla con tema principal CLARO quedaba blanco-sobre-claro =
 * invisible. Regla inamovible .claude/rules/contraste-institucional.md. */

/* ===========================================
 * BADGES / SIDEBAR / ICONOS — CONTRASTE DINAMICO (disuelto #FFFFFF fijo, 2026-06-07)
 * Antes este grupo compartia un { --contraste-texto:#FFFFFF !important } unico que
 * PISABA el color dinamico que cada selector ya define en su CSS propio. En tema
 * principal/secundario CLARO eso dejaba texto blanco sobre fondo claro = invisible.
 * Igual que el wildcard de tablas (validado), ahora el contraste deriva del FONDO
 * REAL de cada selector via var(--color-texto-sobre-*), que el sistema calcula
 * blanco u oscuro segun luminosidad. Tres sub-bloques segun el fondo del selector.
 * Especificidad identica a la del CSS propio de cada elemento: el !important aqui
 * sigue ganando, pero ahora con el VALOR correcto (dinamico), no #FFFFFF fijo.
 * SACADOS de este forzado (su CSS propio ya es dinamico, el !important los rompia):
 *   - [class*="badge-institucional"]  -> .badge-institucional(-turquesa/-principal)
 *     definen background + var(--color-texto-sobre-secundario-2/1/principal) propio
 *     (L893-921) y sus .material-icons (L1003-1018). 100% dinamicos.
 *   - .usuarios-menu-card-icon (+ :hover) -> base #FFFFFF para fondos FIJOS saturados
 *     oscuros (#9C27B0/#FF5722/#E91E63/#2196F3/#FF9800/#4CAF50) y override dinamico
 *     var(--color-texto-sobre-*) en variantes institucionales icon-usuarios/icon-areas
 *     (usuarios-menu.css L214/226/230). Ningun icono queda sin color.
 * ELIMINADO: .badge-nuevo (selector muerto, 0 usos en www/html, sin fondo propio).
 * Regla inamovible .claude/rules/contraste-institucional.md.
 * =========================================== */

/* SUB-BLOQUE P — fondo deriva de --color-principal (institucional) */
.adm-option-icon,            /* fondo --color-principal */
.adm-badge-danger,           /* color-mix(principal 80% + #DC3545) = oscuro */
.adm-badge-principal,        /* fondo --color-principal */
.adm-sidebar-title,          /* dentro de .adm-sidebar-header (fondo --color-principal) */
.adm-sidebar-header {        /* fondo --color-principal */
    --contraste-texto: var(--color-texto-sobre-principal);
    --contraste-icono: var(--color-texto-sobre-principal);
    color: var(--contraste-texto) !important;
}

/* SUB-BLOQUE S1 — fondo --color-secundario-1 (institucional) */
.adm-badge-success,          /* color-mix(secundario-1 85% + white) */
.historico-btn-accion,       /* fondo --color-secundario-1 */
.log-toggle-btn:hover {      /* hover -> fondo --color-secundario-1 */
    --contraste-texto: var(--color-texto-sobre-secundario-1);
    --contraste-icono: var(--color-texto-sobre-secundario-1);
    color: var(--contraste-texto) !important;
}

/* SUB-BLOQUE FONDO CLARO — fondo casi-blanco/claro -> texto OSCURO */
.adm-nav-item.activo:hover,        /* hereda .adm-nav-item.activo: rgba(sec-1, 0.08) casi blanco */
.badge-pendiente,                  /* fondo #FEF3C7 (amarillo claro) */
.ciudadano-historico-toggle:hover {/* fondo rgba/color-mix sec-1 ~10% casi blanco */
    --contraste-texto: var(--color-texto-base);
    --contraste-icono: var(--color-texto-base);
    color: var(--contraste-texto) !important;
}

/* OVERRIDE fijo-oscuro — fondo gris-azul FIJO oscuro (#607d8b/#455a64), no institucional.
 * Gana al SUB-BLOQUE S1 por especificidad doble-clase. Texto blanco siempre legible
 * porque el fondo es oscuro fijo (no cambia con el tema). */
.historico-btn-accion.btn-secundario {
    --contraste-texto: #FFFFFF;
    --contraste-icono: #FFFFFF;
    color: var(--contraste-texto) !important;
}

/* ===========================================
 * WILDCARD TABLAS — DEFAULT DINAMICO (fix-raiz thead, 2026-06-07)
 * Los 4 selectores de cabecera de tabla salieron del bloque de badges (que
 * conserva #FFFFFF fijo, correcto para sus fondos oscuros/semanticos). Aqui el
 * DEFAULT de toda cabecera de tabla es el fondo REAL de QUIPUX: --color-principal
 * (institucional DINAMICO). Por eso el contraste tambien debe ser dinamico:
 * var(--color-texto-sobre-principal), que el sistema calcula blanco u oscuro
 * segun la luminosidad del fondo. Asi NINGUNA tabla queda blanco-sobre-claro
 * cuando el tema principal es claro (antipatron erradicado). Las Familias A.1/A.2
 * (fondo principal explicito) quedan redundantes con este default pero se DEJAN
 * por seguridad (mismo valor, no estorban). Las Familias B (fondo claro) y
 * rpt-table (secundario-1) GANAN a este default por especificidad prefijo+clase.
 * IMPORTANTE: excluir familia admin (.adm-table / .adm-table-wrapper) y wrappers;
 * el substring "-table" tambien matchea "adm-table-wrapper", por eso el
 * :not([class*="adm-table"]) extra. Las cabeceras admin gestionan su propio par
 * fondo+texto mas abajo. Regla inamovible .claude/rules/contraste-institucional.md. */
.borde_tab th,
.tw-borde-tab th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper) th,
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]) th {
    --contraste-texto: var(--color-texto-sobre-principal);
    --contraste-icono: var(--color-texto-sobre-principal);
    color: var(--contraste-texto) !important;
}

/* Links dentro de cabeceras de tabla: mismo default dinamico que la cabecera.
 * Antes era #FFFFFF fijo -> link blanco-sobre-claro invisible en tema principal
 * claro. Ahora hereda el contraste calculado del fondo principal. Los overrides
 * de Familia B (fondo claro) tambien re-tintan estos links mas abajo. */
.borde_tab th a,
.tw-borde-tab th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper) th a,
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]) th a {
    color: var(--color-texto-sobre-principal);
}

/* ===========================================
 * 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,
/* NOTA: .adm-btn / .adm-btn:hover / .adm-btn-danger gestionan su color en administracion-v2.css */
.adm-badge-muted,
.adm-badge-warning,
.adm-nav-item,
.adm-alert,
.adm-table thead th,
.adm-table thead th a,
.modal-tramites-table thead th,
.modal-tramites-table thead th a {
    --contraste-texto: #000000;
    --contraste-icono: #666666;
    color: var(--contraste-texto) !important;
}

/* ===========================================
 * BLINDAJE CABECERAS ADMIN (.adm-table / .modal-tramites-table)
 * Fondo de cabecera = color-mix claro (principal 6% sobre blanco) => texto OSCURO.
 * Esta regla fija el color DIRECTO (no via custom property heredable) para que
 * jamas herede un --contraste-texto blanco contaminado por wildcards de fondo
 * oscuro. Especificidad doble-clase + !important = ultima palabra de la cascada.
 * Antecedente: cabeceras invisibles (texto blanco sobre fondo claro). Regla
 * inamovible .claude/rules/contraste-institucional.md. =========================== */
.adm-table thead th,
.adm-table thead th a,
.modal-tramites-table thead th,
.modal-tramites-table thead th a {
    --contraste-texto: #000000;
    color: var(--color-texto-base, #000000) !important;
}

/* ===========================================
 * BLINDAJE CABECERAS FAMILIA A — fondo institucional DINAMICO (--color-principal)
 * Estas tablas declaran en su propio CSS thead con
 * background: var(--color-principal) + color: var(--color-texto-sobre-principal).
 * Eso ya contrasta bien, PERO el wildcard de fondo oscuro (mas arriba) fuerza
 * --contraste-texto:#FFFFFF con !important y ANULA su color propio. En temas
 * con --color-principal CLARO el thead queda blanco-sobre-claro = invisible.
 * Fix: re-aplicar el contraste DINAMICO con !important para ganar al wildcard.
 * NUNCA #FFFFFF fijo: var(--color-texto-sobre-principal) sirve en tema claro Y
 * oscuro (el sistema lo calcula segun el fondo). Antecedente: thead Historico
 * invisible en tema claro (Pablo). Regla .claude/rules/contraste-institucional.md.
 * Aditivo: NO modifica el wildcard ni la lista existente. =========================== */
/* Familia A.1 — clases con substring "-tabla": las pisa el wildcard de fondo
 * oscuro [class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper) th (0,3,1).
 * Para GANARLE igualamos su MISMO prefijo y agregamos la clase especifica al
 * mismo simple-selector -> (0,4,1) > (0,3,1). NO declaramos "color": redefinimos
 * --contraste-texto y dejamos que el "color: var(--contraste-texto) !important"
 * del propio wildcard tome este valor. Asi no peleamos por especificidad de
 * "color" (que el wildcard fuerza con !important), solo redefinimos la variable. */
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).historico-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).adscritas-resultado-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).tarea-historico-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).solicitud-datos-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).validar-bodega-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).notif-admin-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).notif-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).instituciones-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).sumillas-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).reasig-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).solicitud-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).buscar-depara-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).form-tabla-dinamica th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).respaldo-tabla th {
    --contraste-texto: var(--color-texto-sobre-principal, #384152);
}

/* Familia A.2 — clases con substring "-table" (fondo --color-principal): las
 * pisa el OTRO wildcard [class*="-table"]:not(.adm-table):not(.adm-table-wrapper)
 * :not([class*="adm-table"]) th (0,4,1). Igualamos su prefijo + clase -> (0,5,1)
 * > (0,4,1). Mismo principio: redefinir la variable, no el color. */
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]).usr-ext-compare-table th,
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]).usr-ext-results-table th,
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]).alertas-table th {
    --contraste-texto: var(--color-texto-sobre-principal, #384152);
}

/* Caso especial: .rpt-table thead = fondo --color-secundario-1 (no principal).
 * Tambien tiene substring "-table" -> la pisa el wildcard L1159 (0,4,1). Mismo
 * prefijo + clase -> (0,5,1). Usa la variable de contraste de ESE fondo. */
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]).rpt-table th {
    --contraste-texto: var(--color-texto-sobre-secundario-1, #384152);
}

/* ===========================================
 * BLINDAJE CABECERAS FAMILIA B — fondo CLARO dinamico (--color-fondo-claro/medio
 * o color-mix claro). Su thead propio ya pide texto OSCURO, pero el wildcard de
 * fondo oscuro las pinta blanco !important = invisibles en TODO tema (no solo
 * claro). Fix: forzar texto OSCURO igual que .adm-table. =========================== */
/* Clases con substring "-tabla" -> las pisa el wildcard de tablas (0,3,1).
 * Igualamos su prefijo + clase especifica -> (0,4,1) > (0,3,1) = GANA. Redefinimos
 * la variable a texto OSCURO (fondo claro); el "color: var(--contraste-texto)
 * !important" del wildcard tomara este valor. NO #FFFFFF: aqui el fondo es claro
 * siempre. AMPLIADO 2026-06-07 (fix-raiz thead): se agregan 9 tablas de fondo
 * claro censadas (cd/ea/gcc/log usan color-mix claro de principal; inar/inar-tpcd
 * color-mix claro; reporte usa fondo-pagina claro; modal-docs usa fondo-claro;
 * vdum usa beige fijo #F5F0E0 intencional -distintivo de validacion- y aqui se
 * asegura su texto oscuro). Todas tenian texto oscuro propio que el wildcard
 * #FFFFFF pisaba. AMPLIADO 2026-06-15: gpr-tabla y gp-hist-tabla (guia documental
 * por proceso) usan color-mix(principal 7%, white) = fondo claro; el wildcard las
 * pintaba blanco (Pablo: ratio 1.14:1 en tema oscuro). Mismo fix texto OSCURO.
 * Regla .claude/rules/contraste-institucional.md. */
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).familia-panel-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).envcert-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).cd-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).ea-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).gcc-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).log-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).inar-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).inar-tpcd-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).reporte-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).modal-docs-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).vdum-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).gpr-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).gp-hist-tabla th,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).familia-panel-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).envcert-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).cd-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).ea-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).gcc-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).log-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).inar-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).inar-tpcd-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).reporte-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).modal-docs-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).vdum-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).gpr-tabla th a,
[class*="-tabla"]:not(.admin-tabla):not(.adm-table-wrapper).gp-hist-tabla th a {
    --contraste-texto: var(--color-texto-base, #000000);
    color: var(--color-texto-base, #000000) !important;
}

/* Familia B.2 — clases con substring "-table" de fondo CLARO. Las pisa el OTRO
 * wildcard de tablas [class*="-table"]:not(.adm-table):not(.adm-table-wrapper)
 * :not([class*="adm-table"]) th (0,4,1). Igualamos su prefijo + clase -> (0,5,1)
 * > (0,4,1) = GANA. AGREGADO 2026-06-07 (fix-raiz thead): log-historico-table usa
 * --color-fondo-claro; ia-table usa fondo-pagina claro. Texto OSCURO dinamico. */
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]).log-historico-table th,
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]).ia-table th,
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]).log-historico-table th a,
[class*="-table"]:not(.adm-table):not(.adm-table-wrapper):not([class*="adm-table"]).ia-table th a {
    --contraste-texto: var(--color-texto-base, #000000);
    color: var(--color-texto-base, #000000) !important;
}

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