/**
 * =====================================================================
 * SIACOP · identidad.css — LA CAPA DE IDENTIDAD VISUAL (e142, 1-sep-2026)
 * =====================================================================
 * Manual de identidad v3 · variante C («todo»), decisión del usuario.
 *
 * REGLA DE ORO: ningún color de marca se escribe a mano en una vista.
 * Se usa la variable. Si aquí cambia un valor, cambia en todo el sistema.
 *
 * Qué es DEL MANUAL y qué es DERIVADO está marcado en cada bloque. Los
 * estados (falta / error / completo) NO están en el manual: SIACOP los
 * necesita para hablar, así que se derivaron para convivir con el azul
 * institucional y para pasar contraste AA (todos los pares medidos ≥ 4.5).
 *
 * Se carga DESPUÉS de bootstrap.min.css y de siacop.css: redefine lo que
 * Bootstrap pinta de azul (#0d6efd) y lo que el sistema pintaba de morado.
 * =====================================================================
 */

:root {
    /* ----- DEL MANUAL ----- */
    --id-azul:           #1F4E79;   /* azul institucional */
    --id-azul-medio:     #2E75B6;   /* azul medio */
    --id-verde:          #17A398;   /* verde núcleo — 3.12:1 sobre blanco: NUNCA para texto pequeño */
    --id-gris:           #5A6B7B;   /* gris texto */
    /* dentro de los archivos del logo (versión negativa e icono) */
    --id-verde-claro:    #5FD3C6;   /* el núcleo sobre azul (4.79:1 sobre el azul) */
    --id-azul-palido:    #C9DCEF;   /* texto secundario sobre azul (6.17:1) */

    /* ----- DERIVADOS del azul institucional ----- */
    --id-azul-oscuro:    #17406A;   /* hover de acción */
    --id-azul-hover:     #2A5C8A;   /* hover en la barra */
    --id-azul-suave:     #E8F0F7;   /* fondo de pestaña activa, ícono de sección, hover de fila */
    /* e146: el azul medio como TEXTO da 4.21:1 sobre el azul suave y 4.25:1 sobre el tinte al
       10 % (cabeceras «Responsable», pills «Supervisor»/«cesionario»). Igual que el verde se
       oscureció para «completo», el azul medio se oscurece para texto: 5.34:1 sobre el suave,
       6.15:1 el blanco sobre él. Es lo que alimenta a --bs-info-rgb (text-info, bg-info). */
    --id-info-texto:     #2764A0;
    --id-foco:           rgba(46, 117, 182, .35);
    --id-foco-suave:     rgba(46, 117, 182, .18);

    /* ----- ESTADOS (derivados; no están en el manual) ----- */
    --id-ok-texto:       #0F6E67;   --id-ok-fondo:    #E3F5F3;   /* completo · hecho */
    --id-falta-texto:    #8A5A00;   --id-falta-fondo: #FDF3E0;   /* falta · atención */
    --id-error-texto:    #A32020;   --id-error-fondo: #FBEAEA;   /* error · no permitido */
    --id-dato-texto:     #3F4B57;   --id-dato-fondo:  #EEF0F3;   /* el DATO identificador (e110) */

    /* ----- LIENZO ----- */
    --id-lienzo:         #F4F7FA;   /* nivel 0: la página */
    /* e147 · GRAMÁTICA DE SUPERFICIES (decisión del usuario: variante C). Cuatro niveles que
       se alternan: página (lienzo) → tarjeta (blanca, borde, sombra) → bloque dentro de la
       tarjeta (hundido: lienzo-2, sin sombra) → control (blanco, borde 3:1). Medido antes:
       tarjeta contra página 1.01:1, borde de campo 1.21:1 — todo se mezclaba. */
    --id-lienzo-2:       #EEF2F6;   /* nivel 2: filtros, indicadores, tarjeta anidada, bg-light, riel de pestañas, cabecera de tabla */
    --id-superficie:     #FFFFFF;   /* nivel 1 y 3: tarjeta y control */
    --id-borde:          #C4CFDA;   /* contorno de tarjeta y bloque (1.58:1 sobre blanco; antes #DDE4EB, 1.28) */
    --id-borde-suave:    #DDE4EB;   /* líneas entre filas, separadores decorativos */
    --id-borde-control:  #7A8B9B;   /* contorno de campo, select, casilla: 3.50:1 sobre blanco, 3.26 sobre lienzo, 3.11 sobre lienzo-2 (WCAG 1.4.11) */
    --id-sombra:         0 1px 3px rgba(31, 78, 121, .08);
    --id-texto:          #212529;
    --id-texto-2:        #5A6B7B;

    /* ----- las variables VIEJAS del sistema, redirigidas a la capa -----
       (main.php, siacop.css y varias vistas las leen; así todo lo que ya
       usaba variables cambia solo) */
    --primary-color:          var(--id-azul);
    /* e144: el avatar lleva iniciales BLANCAS en 14 px — sobre el verde núcleo puro daban
       3.12:1. Va sobre el verde núcleo OSCURECIDO (6.09:1), el mismo de «completo». */
    --avatar-gradient-start:  var(--id-ok-texto);
    --avatar-gradient-end:    var(--id-ok-texto);
    --siacop-primary:         var(--id-azul);
    --siacop-avatar-start:    var(--id-ok-texto);
    --siacop-avatar-end:      var(--id-ok-texto);
    --siacop-sidebar-start:   var(--id-azul);
    --siacop-sidebar-end:     var(--id-azul);
    --sidebar-bg:             var(--id-azul);
    --sidebar-border:         var(--id-azul-oscuro);
    --sidebar-text:           #FFFFFF;
    --sidebar-text-muted:     var(--id-azul-palido);
    --sidebar-hover-bg:       var(--id-azul-hover);

    /* ----- Bootstrap 5: su «primary» pasa a ser el azul institucional ----- */
    --bs-primary:            #1F4E79;
    --bs-primary-rgb:        31, 78, 121;
    --bs-link-color:         #1F4E79;
    --bs-link-color-rgb:     31, 78, 121;
    --bs-link-hover-color:   #17406A;
    --bs-link-hover-color-rgb: 23, 64, 106;
    --bs-primary-bg-subtle:  #E8F0F7;
    --bs-primary-border-subtle: #C9DCEF;
    --bs-primary-text-emphasis: #17406A;
    --bs-success:            #0F6E67;
    --bs-success-rgb:        15, 110, 103;
    --bs-success-bg-subtle:  #E3F5F3;
    --bs-success-text-emphasis: #0F6E67;
    --bs-warning-bg-subtle:  #FDF3E0;
    --bs-warning-text-emphasis: #8A5A00;
    --bs-danger:             #A32020;
    --bs-danger-rgb:         163, 32, 32;
    --bs-danger-bg-subtle:   #FBEAEA;
    --bs-danger-text-emphasis: #A32020;
    --bs-info:               #2764A0;   /* e146: azul info para texto (ver --id-info-texto) */
    --bs-info-rgb:           39, 100, 160;
    --bs-info-bg-subtle:     #E8F0F7;
    --bs-info-text-emphasis: #17406A;
    --bs-secondary-rgb:      90, 107, 123;
    /* e147: --bs-body-bg vuelve a BLANCO. Bootstrap deriva de esta variable el fondo de 22
       componentes (card, form-control, form-select, table, dropdown, modal, list-group,
       nav-tabs…): con el lienzo aquí, todos salían del color de la página (1.01:1) y solo
       lo que traía bg-white a mano quedaba blanco. El lienzo se pinta en `body`, abajo. */
    --bs-body-bg:            #FFFFFF;
    --bs-border-color:       #DDE4EB;
    --bs-light-rgb:          238, 242, 246;   /* bg-light = lienzo-2 (nivel 2) */
    --bs-tertiary-bg:        #EEF2F6;         /* campos readonly/disabled, filas alternas */
    --bs-secondary-bg:       #E3E9EF;
    --bs-secondary-color:    #5A6B7B;
}

/* =====================================================================
   BOOTSTRAP — lo que pinta de azul Bootstrap pasa al azul institucional.
   Solo las clases que el sistema usa; nada especulativo.
   ===================================================================== */
.btn-primary {
    --bs-btn-bg: var(--id-azul);            --bs-btn-border-color: var(--id-azul);
    --bs-btn-hover-bg: var(--id-azul-oscuro); --bs-btn-hover-border-color: var(--id-azul-oscuro);
    --bs-btn-active-bg: var(--id-azul-oscuro); --bs-btn-active-border-color: var(--id-azul-oscuro);
    --bs-btn-disabled-bg: var(--id-azul);   --bs-btn-disabled-border-color: var(--id-azul);
    --bs-btn-focus-shadow-rgb: 46, 117, 182;
}
.btn-outline-primary {
    --bs-btn-color: var(--id-azul);         --bs-btn-border-color: var(--id-azul);
    --bs-btn-hover-bg: var(--id-azul);      --bs-btn-hover-border-color: var(--id-azul);
    --bs-btn-active-bg: var(--id-azul);     --bs-btn-active-border-color: var(--id-azul);
    --bs-btn-focus-shadow-rgb: 46, 117, 182;
}
.btn-success {
    --bs-btn-bg: var(--id-ok-texto);        --bs-btn-border-color: var(--id-ok-texto);
    --bs-btn-hover-bg: #0B5852;             --bs-btn-hover-border-color: #0B5852;
    --bs-btn-active-bg: #0B5852;            --bs-btn-active-border-color: #0B5852;
}
.btn-outline-success { --bs-btn-color: var(--id-ok-texto); --bs-btn-border-color: var(--id-ok-texto);
    --bs-btn-hover-bg: var(--id-ok-texto);  --bs-btn-hover-border-color: var(--id-ok-texto); }
.btn-danger {
    --bs-btn-bg: var(--id-error-texto);     --bs-btn-border-color: var(--id-error-texto);
    --bs-btn-hover-bg: #861A1A;             --bs-btn-hover-border-color: #861A1A;
}
.btn-outline-danger { --bs-btn-color: var(--id-error-texto); --bs-btn-border-color: var(--id-error-texto);
    --bs-btn-hover-bg: var(--id-error-texto); --bs-btn-hover-border-color: var(--id-error-texto); }
.btn-link { --bs-btn-color: var(--id-azul); --bs-btn-hover-color: var(--id-azul-oscuro); }
.btn-info { --bs-btn-bg: var(--id-azul-medio); --bs-btn-border-color: var(--id-azul-medio); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--id-azul); --bs-btn-hover-border-color: var(--id-azul); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--id-azul); --bs-btn-active-border-color: var(--id-azul); --bs-btn-active-color: #fff; }
.btn-outline-info { --bs-btn-color: var(--id-azul-medio); --bs-btn-border-color: var(--id-azul-medio);
    --bs-btn-hover-bg: var(--id-azul-medio); --bs-btn-hover-border-color: var(--id-azul-medio); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--id-azul-medio); --bs-btn-active-border-color: var(--id-azul-medio); }
.btn-warning { --bs-btn-bg: #E9B949; --bs-btn-border-color: #E9B949; --bs-btn-color: #3D2F00;
    --bs-btn-hover-bg: #D9A72E; --bs-btn-hover-border-color: #D9A72E; --bs-btn-hover-color: #3D2F00; }
.btn-outline-warning { --bs-btn-color: var(--id-falta-texto); --bs-btn-border-color: #D9A72E;
    --bs-btn-hover-bg: #E9B949; --bs-btn-hover-border-color: #E9B949; --bs-btn-hover-color: #3D2F00; }

/* e145: `.bg-primary/.bg-success/.bg-info/.bg-danger` y sus `.text-*` NO se redefinen
   aquí con un color sólido. Bootstrap los pinta como rgba(var(--bs-X-rgb), var(--bs-bg-opacity)),
   y el sistema usa 142 veces el patrón «bg-X bg-opacity-10» para el cuadro TEÑIDO de un
   icono. Un sólido con !important mataba la opacidad: el cuadro quedaba macizo y el icono,
   del mismo color, desaparecía. Basta con redirigir las variables --bs-X-rgb (arriba): el
   tinte al 10 % y el icono sólido salen solos, ya con la paleta. */
.text-warning-emphasis { color: var(--id-falta-texto) !important; }
.text-warning { color: var(--id-falta-texto) !important; }   /* el amarillo de Bootstrap da 1.6:1 sobre blanco */
/* e144: el gris secundario de Bootstrap (#6c757d) da 4.36:1 sobre el lienzo — el gris
   TEXTO del manual (#5A6B7B) da 5.11:1. Es el más repetido del sistema (text-muted). */
.text-muted, .text-secondary { color: var(--id-gris) !important; }
.btn-outline-secondary { --bs-btn-color: var(--id-gris); --bs-btn-border-color: #B9C3CC;
    --bs-btn-hover-bg: var(--id-gris); --bs-btn-hover-border-color: var(--id-gris); --bs-btn-hover-color: #fff; }
.badge.bg-secondary-subtle, .badge.bg-secondary-subtle.text-secondary {
    background-color: var(--id-dato-fondo) !important; color: var(--id-dato-texto) !important; }
.bg-info-subtle { background-color: var(--id-azul-suave) !important; }
.text-info-emphasis { color: var(--id-azul-oscuro) !important; }
.border-info  { border-color: var(--id-azul-medio) !important; }
.bg-warning-subtle     { background-color: var(--id-falta-fondo) !important; }
.bg-success-subtle     { background-color: var(--id-ok-fondo) !important; }
.bg-danger-subtle      { background-color: var(--id-error-fondo) !important; }
.bg-primary-subtle     { background-color: var(--id-azul-suave) !important; }
.border-primary        { border-color: var(--id-azul) !important; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--id-azul-medio);
    box-shadow: 0 0 0 .2rem var(--id-foco-suave);
}
.form-check-input:checked { background-color: var(--id-azul); border-color: var(--id-azul); }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid,
.was-validated .form-select:invalid { border-color: var(--id-error-texto); }
.invalid-feedback { color: var(--id-error-texto); }
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    box-shadow: 0 0 0 .2rem rgba(163, 32, 32, .18);
}

.alert-primary { --bs-alert-bg: var(--id-azul-suave); --bs-alert-color: var(--id-azul-oscuro); --bs-alert-border-color: #C9DCEF; }
.alert-info    { --bs-alert-bg: var(--id-azul-suave); --bs-alert-color: var(--id-azul-oscuro); --bs-alert-border-color: #C9DCEF; }
.alert-success { --bs-alert-bg: var(--id-ok-fondo);    --bs-alert-color: var(--id-ok-texto);    --bs-alert-border-color: #BFE6E1; }
.alert-warning { --bs-alert-bg: var(--id-falta-fondo); --bs-alert-color: var(--id-falta-texto); --bs-alert-border-color: #F3DDB0; }
.alert-danger  { --bs-alert-bg: var(--id-error-fondo); --bs-alert-color: var(--id-error-texto); --bs-alert-border-color: #F0C4C4; }
.alert-link    { color: inherit; font-weight: 700; }

.badge.bg-primary { background-color: var(--id-azul) !important; }
.badge.bg-success { background-color: var(--id-ok-texto) !important; }
.badge.bg-danger  { background-color: var(--id-error-texto) !important; }
.badge.bg-info    { background-color: var(--id-info-texto) !important; }
.badge.text-bg-primary { background-color: var(--id-azul) !important; color: #fff !important; }
.badge.text-bg-success { background-color: var(--id-ok-texto) !important; color: #fff !important; }
/* e146: GUARDIÁN de las pastillas sólidas. Las vistas PAA traían «badge bg-info text-dark»
   (correcto con el cian claro de Bootstrap): con el azul de la identidad quedó texto negro sobre
   azul, 3.19:1. Toda pastilla sólida de la identidad lleva texto BLANCO, pase lo que pase con
   el text-* que traiga: dos clases pesan más que .text-dark, aun con !important. */
.badge.bg-primary, .badge.bg-success, .badge.bg-danger, .badge.bg-info, .badge.bg-secondary,
.badge.bg-primary.text-dark, .badge.bg-success.text-dark, .badge.bg-danger.text-dark,
.badge.bg-info.text-dark, .badge.bg-secondary.text-dark { color: #fff !important; }
.badge.bg-secondary { background-color: var(--id-gris) !important; }
/* e146: <code> venía en el rosa de Bootstrap (#d63384): 4.19:1 sobre el lienzo y fuera de la
   paleta. Los códigos (modalidades, NIT, variables de plantilla) van en el azul: 8.06:1. */
:root { --bs-code-color: var(--id-azul); }
code { color: var(--id-azul); }
/* e146: las filas teñidas de tabla (fila vigente en SMMLV, filas con error) seguían con los
   verdes/rojos de Bootstrap; sobre ese verde la pastilla «Activo» daba 4.13:1. Pasan a los
   fondos de estado de la identidad (5.4:1 el texto de estado sobre ellos). */
.table-success { --bs-table-bg: var(--id-ok-fondo);    --bs-table-color: var(--id-texto); --bs-table-border-color: #BFE6E1;
    --bs-table-striped-bg: #D8EFEC; --bs-table-striped-color: var(--id-texto); --bs-table-hover-bg: #D8EFEC; --bs-table-hover-color: var(--id-texto);
    --bs-table-active-bg: #CDE9E5; --bs-table-active-color: var(--id-texto); }
.table-danger  { --bs-table-bg: var(--id-error-fondo); --bs-table-color: var(--id-texto); --bs-table-border-color: #F0C4C4;
    --bs-table-striped-bg: #F5DEDE; --bs-table-striped-color: var(--id-texto); --bs-table-hover-bg: #F5DEDE; --bs-table-hover-color: var(--id-texto);
    --bs-table-active-bg: #F0D2D2; --bs-table-active-color: var(--id-texto); }
.nav-link { color: var(--id-azul); }
.nav-link:hover, .nav-link:focus { color: var(--id-azul-oscuro); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--id-azul); }
.page-link { color: var(--id-azul); }
.page-item.active .page-link { background-color: var(--id-azul); border-color: var(--id-azul); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--id-azul); }
.list-group-item.active { background-color: var(--id-azul); border-color: var(--id-azul); }
.progress-bar { background-color: var(--id-azul); }
.spinner-border.text-primary { color: var(--id-azul) !important; }
a { color: var(--id-azul); }
a:hover { color: var(--id-azul-oscuro); }

/* =====================================================================
   ESTADOS DEL SISTEMA — clases propias, para los helpers de functions.php
   (estadoBadge, personaBadge, campoEstado, indicadorCompacto) y para las
   vistas que hoy escriben el color a mano.
   ===================================================================== */
.estado-ok    { background-color: var(--id-ok-fondo)    !important; color: var(--id-ok-texto)    !important; }
.estado-falta { background-color: var(--id-falta-fondo) !important; color: var(--id-falta-texto) !important; }
.estado-error { background-color: var(--id-error-fondo) !important; color: var(--id-error-texto) !important; }
.estado-dato  { background-color: var(--id-dato-fondo)  !important; color: var(--id-dato-texto)  !important; }
.estado-info  { background-color: var(--id-azul-suave)  !important; color: var(--id-azul-oscuro) !important; }

/* el gris del DATO identificador (e110) sigue siendo el mismo valor:
   ya tiene arnés y no choca con la paleta */
.badge-dato-std.bg-dark, .badge.badge-dato-std.bg-dark {
    background-color: var(--id-dato-fondo) !important; color: var(--id-dato-texto) !important;
}

/* =====================================================================
   BARRA LATERAL — azul institucional con el logo NEGATIVO (regla del
   manual: sobre fondo azul, versión negativa)
   ===================================================================== */
.sidebar { background: var(--id-azul) !important; border-right-color: var(--id-azul-oscuro) !important; }
.sidebar-header {
    background: var(--id-azul) !important;
    border-bottom: 1px solid var(--id-azul-oscuro) !important;
    padding: 1.15rem 1.35rem 1rem !important;
    display: block !important;
}
.sidebar-marca { display: block; width: 100%; max-width: 190px; }
.sidebar-marca img { width: 100%; height: auto; display: block; }
.sidebar.collapsed .sidebar-marca { max-width: 40px; }
.sidebar.collapsed .sidebar-marca img.marca-horizontal { display: none; }
.sidebar-marca img.marca-isotipo { display: none; }
.sidebar.collapsed .sidebar-marca img.marca-isotipo { display: block; }

.sidebar-user {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
}
.sidebar-user-info:hover { background: rgba(255, 255, 255, .06) !important; }
.sidebar-user-name { color: #FFFFFF !important; }
.sidebar-user-role, .sidebar-user-toggle { color: var(--id-azul-palido) !important; }
.sidebar-avatar { background: var(--id-ok-texto) !important; color: #fff !important; }
.session-dropdown { background: #ffffff !important; border-color: var(--id-borde) !important; }
.session-option { color: var(--id-texto) !important; }
.session-option:hover { background: var(--id-azul-suave) !important; color: var(--id-texto) !important; }
.session-option.active { background: var(--id-azul) !important; color: #fff !important; }
.session-option .fa-check { color: var(--id-ok-texto) !important; }   /* el verde puro no alcanza AA sobre blanco */
.session-option-icon { background: var(--id-azul) !important; }
.session-option.active .session-option-icon { background: var(--id-ok-texto) !important; }
.nav-section-title { color: var(--id-azul-palido) !important; opacity: .9; }

/* el menú: texto claro, hover azul más claro, activo BLANCO con texto azul.
   Máxima especificidad a propósito: siacop.css y main.php traen reglas
   con !important escritas para el morado. Estas van después y ganan. */
.sidebar .sidebar-nav .nav-link,
.sidebar .sidebar-nav .nav.flex-column .nav-link,
.sidebar .sidebar-nav nav.nav .nav-link,
nav.sidebar .sidebar-nav .nav-link {
    color: #FFFFFF !important;
    background: transparent !important;
    background-color: transparent !important;
    border-left-color: transparent !important;
}
.sidebar .sidebar-nav .nav-link:hover,
.sidebar .sidebar-nav .nav.flex-column .nav-link:hover,
.sidebar .sidebar-nav nav.nav .nav-link:hover,
nav.sidebar .sidebar-nav .nav-link:hover {
    color: #FFFFFF !important;
    background: var(--id-azul-hover) !important;
    background-color: var(--id-azul-hover) !important;
    border-left-color: var(--id-verde-claro) !important;
}
.sidebar .sidebar-nav .nav-link.active,
.sidebar .sidebar-nav .nav-link.active:hover,
.sidebar .sidebar-nav .nav-link.active:focus,
.sidebar .sidebar-nav .nav.flex-column .nav-link.active,
.sidebar .sidebar-nav .nav.flex-column .nav-link.active:hover,
.sidebar .sidebar-nav nav.nav .nav-link.active,
.sidebar .sidebar-nav nav.nav .nav-link.active:hover,
.sidebar .sidebar-nav a.nav-link.active,
nav.sidebar .sidebar-nav .nav-link.active,
nav.sidebar .sidebar-nav a.nav-link.active:hover {
    color: var(--id-azul) !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    border-left-color: transparent !important;
    font-weight: 600;
}
.sidebar .sidebar-nav .nav-link.active i,
.sidebar .sidebar-nav .nav-link.active span,
nav.sidebar .sidebar-nav .nav-link.active i,
nav.sidebar .sidebar-nav .nav-link.active span { color: var(--id-azul) !important; }
.sidebar .sidebar-nav .nav-link i,
.sidebar .sidebar-nav .nav-link span { color: inherit !important; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); }
.sidebar-footer, .sidebar .sidebar-footer { border-top-color: var(--id-azul-oscuro) !important; }

/* =====================================================================
   BARRA SUPERIOR, PESTAÑAS Y SUB-PESTAÑAS (antes moradas)
   ===================================================================== */
.year-selector .btn { background: var(--id-azul) !important; box-shadow: 0 2px 6px rgba(31, 78, 121, .30) !important; }
.year-selector .btn:hover, .year-selector .btn:focus { background: var(--id-azul-oscuro) !important; box-shadow: 0 4px 12px rgba(31, 78, 121, .35) !important; }
.year-selector .dropdown-item:hover, .year-selector .dropdown-item.active { background-color: var(--id-azul) !important; color: #fff; }
.breadcrumb-item a { color: var(--id-azul) !important; }
.topbar-entity { color: var(--id-gris) !important; }

.badge.conteo-pestana-std { background-color: var(--id-azul-suave) !important; color: var(--id-azul) !important; }
/* e147: las pestañas viven en la GRAMÁTICA DE SUPERFICIES, al final del archivo */
.nav-tabs .nav-link.active .badge.conteo-pestana-std { background-color: var(--id-azul-suave) !important; color: var(--id-azul) !important; }
.nav-pills.subpestanas-std .nav-link { color: var(--id-azul) !important; }
.nav-pills.subpestanas-std .nav-link:hover, .nav-pills.subpestanas-std .nav-link:focus { background: var(--id-azul-suave) !important; color: var(--id-azul-oscuro) !important; }
.nav-pills.subpestanas-std .nav-link.active, .nav-pills.subpestanas-std a.nav-link.active,
.nav-pills.subpestanas-std a.nav-link.active:hover, .nav-pills.subpestanas-std a.nav-link.active:focus {
    color: var(--id-azul) !important; background: var(--id-azul-suave) !important;
}
.nav-pills.subpestanas-std .nav-link.active i, .nav-pills.subpestanas-std .nav-link.active span { color: var(--id-azul) !important; }

/* =====================================================================
   UTILIDADES DE siacop.css QUE ERAN MORADAS
   ===================================================================== */
.gradient-primary { background: var(--id-azul) !important; }
.gradient-sidebar { background: var(--id-azul) !important; }
.avatar { background: var(--id-ok-texto) !important; }
.btn-gradient { background: var(--id-azul) !important; color: #fff; }
.btn-gradient:hover { background: var(--id-azul-oscuro) !important; color: #fff; }
.table-siacop tbody tr:hover { background-color: var(--id-azul-suave) !important; }
.form-control-icon:focus-within .icon { color: var(--id-azul-medio) !important; }
.status-active  { background-color: var(--id-ok-fondo);    color: var(--id-ok-texto); }
.status-pending { background-color: var(--id-falta-fondo); color: var(--id-falta-texto); }
.form-label-required::after { color: var(--id-error-texto); }
body { background-color: var(--id-lienzo); }

/* =====================================================================
   e147 · GRAMÁTICA DE SUPERFICIES (variante C)
   Ninguna vista escribe fondos ni bordes: la profundidad se decide aquí por
   la POSICIÓN del elemento. Los valores de pestañas, tarjeta, tabla y campos
   del layout (main.php) leen estas mismas variables.
   ===================================================================== */
/* nivel 1 · tarjeta (el contorno lo decide la gramática: 21 vistas escribían «card border-0» como variante de estilo) */
.card, .card.border-0 { background-color: var(--id-superficie); border: 1px solid var(--id-borde) !important; box-shadow: var(--id-sombra); }
/* nivel 2 · un bloque DENTRO de una tarjeta se hunde: lienzo-2, borde, sin sombra */
.card .card, .pestanas-tarjeta > .card-body .card, .pestanas-tarjeta > .pestanas-panel .card {
    background-color: var(--id-lienzo-2); border: 1px solid var(--id-borde) !important; box-shadow: none !important; }
.card .card > .card-header, .card .card > .card-header.bg-white { background-color: transparent !important; }
/* …pero una tabla dentro de un bloque hundido se lee sobre blanco */
.card .card .table { --bs-table-bg: var(--id-superficie); }
.card .card > .table-responsive, .card .card > .card-body.p-0, .card .card > .card-body:has(> .table-responsive),
.card .card > .card-body:has(> .table) { background-color: var(--id-superficie); }
.card .card > .card-header.cab-tabla-std { background-color: var(--id-superficie) !important; }
/* nivel 3 · controles: blancos, contorno 3:1 */
.form-control, .form-select, .input-group-text { border-color: var(--id-borde-control); background-color: var(--id-superficie); }
.form-control[readonly], .form-control:disabled, .form-select:disabled { background-color: var(--bs-tertiary-bg); }
.form-check-input { border-color: var(--id-borde-control); }
.input-group-text { background-color: var(--id-lienzo-2); }
/* cabeceras de tarjeta: UNA voz (blanca, título azul oscuro, línea azul pálida)… */
.card-header { color: var(--id-azul-oscuro); border-bottom: 2px solid var(--id-azul-palido); }
.card-header h4, .card-header h5, .card-header h6, .card-header .card-title { color: var(--id-azul-oscuro); font-weight: 600; }
/* …los tintes de estado se quedan en su fondo de estado… */
.card-header.bg-info:not([class*="bg-opacity"]), .card-header.bg-secondary:not([class*="bg-opacity"]) {
    background-color: var(--id-azul-suave) !important; color: var(--id-azul-oscuro) !important; }
.card-header.bg-warning:not([class*="bg-opacity"]) { background-color: var(--id-falta-fondo) !important; color: var(--id-falta-texto) !important; border-bottom-color: #F3DDB0; }
.card-header.bg-warning:not([class*="bg-opacity"]) * { color: var(--id-falta-texto) !important; }
.card-header.bg-danger:not([class*="bg-opacity"]) { background-color: var(--id-error-fondo) !important; color: var(--id-error-texto) !important; border-bottom-color: #F0C4C4; }
.card-header.bg-danger:not([class*="bg-opacity"]) * { color: var(--id-error-texto) !important; }
.card-header.bg-info:not([class*="bg-opacity"]) *, .card-header.bg-secondary:not([class*="bg-opacity"]) * { color: var(--id-azul-oscuro) !important; }
/* …y las SÓLIDAS azul/verde se conservan como «destacado» (variante C): texto blanco, sin línea */
.card-header.bg-primary:not([class*="bg-opacity"]), .card-header.bg-dark:not([class*="bg-opacity"]) {
    background-color: var(--id-azul) !important; color: #fff !important; border-bottom: 0; }
.card-header.bg-success:not([class*="bg-opacity"]) { background-color: var(--id-ok-texto) !important; color: #fff !important; border-bottom: 0; }
.card-header.bg-primary:not([class*="bg-opacity"]) *:not(.btn):not(.badge):not(.form-control):not(.form-select):not(option),
.card-header.bg-dark:not([class*="bg-opacity"]) *:not(.btn):not(.badge):not(.form-control):not(.form-select):not(option),
.card-header.bg-success:not([class*="bg-opacity"]) *:not(.btn):not(.badge):not(.form-control):not(.form-select):not(option) { color: #fff !important; }
/* riel de pestañas: la tira va sobre lienzo-2 y la solapa activa, blanca, se funde con el cuerpo */
.pestanas-tarjeta > .card-header, .pestanas-tarjeta > .card-header.bg-white {
    background-color: var(--id-lienzo-2) !important; border-bottom: 1px solid var(--id-borde); padding-top: .6rem; }
.nav-tabs { border-bottom-color: var(--id-borde) !important; }
.nav-tabs .nav-link { color: var(--id-gris) !important; font-weight: 500; }
.nav-tabs .nav-link i, .nav-tabs .nav-link span { color: inherit; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { background: var(--id-azul-suave) !important; color: var(--id-azul-oscuro) !important; }
.nav-tabs .nav-link.active, .nav-tabs a.nav-link.active,
.nav-tabs .nav-link.active:hover, .nav-tabs .nav-link.active:focus {
    color: var(--id-azul) !important; background: var(--id-superficie) !important; font-weight: 600;
    border-color: var(--id-borde) var(--id-borde) var(--id-superficie) !important;
    border-top: 3px solid var(--id-azul) !important;
}
/* encabezado de tabla: lienzo-2, gris, línea azul pálida */
.table thead th, .tabla-std thead th { background-color: var(--id-lienzo-2); color: var(--id-gris); border-bottom: 2px solid var(--id-azul-palido); }
.table > :not(caption) > * > * { border-bottom-color: var(--id-borde-suave); }
/* e149 · fase 3 · EL BLOQUE DE FORMULARIO: la sección con título de
   un formulario largo. Es el nivel 2 de la gramática hecho componente: se identifica de un vistazo
   (pedido del usuario), los campos dentro son nivel 3 (blancos con contorno). Marcado:
     <div class="bloque-form">
       <div class="bloque-form-titulo"><i class="fa-solid fa-…"></i>Nombre
         <span class="bloque-form-ayuda">nota corta opcional</span></div>
       …campos…
     </div>
   Un bloque que se muestra u oculta por JS (p. ej. el oferente de numeración) lleva la clase en el
   MISMO div que se alterna, con su título dentro: así el título se va con él. */
.bloque-form {
    background-color: var(--id-lienzo-2); border: 1px solid var(--id-borde);
    border-radius: 10px; padding: 1rem 1.1rem .35rem; margin-bottom: 1rem;
}
.bloque-form-titulo {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    font-weight: 600; font-size: .92rem; color: var(--id-azul-oscuro);
    padding-bottom: .5rem; margin-bottom: .85rem; border-bottom: 1px solid var(--id-borde-suave);
}
.bloque-form-titulo i { color: var(--id-azul-medio); }
.bloque-form-ayuda { margin-left: auto; font-weight: 400; font-size: .76rem; color: var(--id-gris); }

/* título de página: una sola jerarquía */
.page-title { font-size: 1.5rem; font-weight: 600; color: var(--id-azul-oscuro); }
.form-label { color: var(--id-dato-texto); font-weight: 600; font-size: .86rem; }
/* la sombra grande del sistema viejo, acotada */
.shadow-sm { box-shadow: var(--id-sombra) !important; }

/* =====================================================================
   e187 · RIEL DE PANELES (.riel-exige / .panel-exige)
   Pestañas que cambian de PANEL dentro de un bloque, no de pantalla (esas
   son las del layout, arriba). Nació en la ficha «Lo que el proceso exige»
   (e180) dentro de la vista, y el usuario vio lo que faltaba: sobre el fondo
   del bloque (lienzo-2) el riel subrayado y el panel no se distinguían del
   fondo. Sube aquí como componente y adopta la MISMA gramática que las
   pestañas del sistema: la tira va sobre lienzo-2, la solapa activa es
   blanca con el borde superior azul y se funde con el cuerpo, que es una
   superficie blanca con contorno. Marcado (los botones NAVEGAN, regla e164):
     <div class="riel-exige" role="tablist">
       <button type="button" role="tab" aria-selected="true"><i class="fa-solid fa-…"></i>Nombre<span class="cuenta">5</span></button>
     </div>
     <div class="panel-exige" role="tabpanel"><div class="panel-rotulo">Nombre</div>…</div>
   Sin JavaScript (clase .sin-js en el contenedor) el riel no se dibuja y los
   paneles quedan todos a la vista, cada uno con su rótulo.
   ===================================================================== */
.riel-exige { display: flex; flex-wrap: wrap; gap: .25rem; align-items: flex-end;
    padding: 0 .35rem; margin-bottom: 0; border-bottom: 1px solid var(--id-borde); }
.riel-exige button { font: inherit; cursor: pointer; font-size: .85rem; color: var(--id-gris);
    background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
    padding: .5rem .95rem; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .4rem; }
.riel-exige button:hover { background: var(--id-azul-suave); color: var(--id-azul-oscuro); }
.riel-exige button:focus-visible { outline: 2px solid var(--id-azul); outline-offset: -2px; }
.riel-exige button[aria-selected="true"] { background: var(--id-superficie); color: var(--id-azul); font-weight: 600;
    border-color: var(--id-borde); border-top: 3px solid var(--id-azul); padding-top: calc(.5rem - 2px); }
.riel-exige .cuenta { font-size: .72rem; border-radius: 20px; padding: .05rem .42rem; font-variant-numeric: tabular-nums;
    background: rgba(31, 78, 121, .08); color: var(--id-gris); }
.riel-exige button[aria-selected="true"] .cuenta { background: var(--id-azul-suave); color: var(--id-azul); }
/* El panel es la superficie blanca a la que se pega la solapa. Tiene TECHO —lo
   largo, como un cronograma de veinte hitos, se desplaza por dentro en vez de
   estirar la pantalla— y un suelo CORTO: evita el brinco al cambiar de
   pestaña, pero se queda bajo a propósito: un suelo alto le devolvería a esta pantalla el hueco blanco
   que la e180 vino a quitar, ahora dentro del panel. La regla del techo y el suelo va SOLA en su línea: la vigila un
   guardián (arnes_evaluacion, e180). */
.panel-exige { min-height: 120px; max-height: 320px; overflow-y: auto; }
.panel-exige { background: var(--id-superficie); border: 1px solid var(--id-borde); border-top: 0;
    border-radius: 0 0 10px 10px; padding: .85rem 1rem; margin-bottom: .65rem; }
.panel-exige::-webkit-scrollbar { width: 8px; }
.panel-exige::-webkit-scrollbar-thumb { background: var(--id-borde); border-radius: 4px; }
.panel-rotulo { display: none; font-weight: 600; color: var(--id-azul-oscuro); font-size: .85rem; margin-bottom: .4rem; }
/* SIN JAVASCRIPT: se lee entero. Sin riel, cada panel es una tarjeta con su rótulo. */
.sin-js .riel-exige { display: none; }
.sin-js .panel-exige { max-height: none; min-height: 0; margin-bottom: 1rem; border-top: 1px solid var(--id-borde); border-radius: 10px; }
.sin-js .panel-rotulo { display: block; }