/**
 * PROYECTO BASE DJANGO - Configuracion de Tema Principal
 * ===================================================
 *
 * Este archivo centraliza todos los colores del tema del sistema.
 * Para cambiar el tema, solo necesitas modificar las variables en :root
 *
 * TEMA ACTUAL: Navy (Azul Oscuro) - #13304D
 * TEMA ANTERIOR: Orange (Naranja) - #EF7E56 / #e6603a
 *
 * Para volver al tema naranja, cambiar:
 *   --theme-primary: #13304D  ->  --theme-primary: #e6603a
 *   --theme-primary-dark: #0d2339  ->  --theme-primary-dark: #d55532
 *   --theme-primary-light: #1a4166  ->  --theme-primary-light: #f08a6a
 */

:root {
    /* =====================================================
       FUENTE DE VERDAD — VARIABLES --c-* (WHITE-LABEL)
       -----------------------------------------------------
       Estas variables son las que el Context Processor de
       Branding (ConfiguracionVisual) sobreescribira en runtime
       via <style>:root{...}</style> en el <head> de base.html.
       TODO el CSS del sistema debe consumir estas var(--c-*).
       Los alias --theme-* siguen existiendo abajo como
       capa de compatibilidad con CSS legacy.
       ===================================================== */

    /* ---- Marca principal (navy institucional por defecto) ---- */
    --c-primary:         #13304D;
    --c-primary-dark:    #0d2339;
    --c-primary-light:   #1a4166;
    --c-primary-lighter: #e8eef4;
    --c-primary-rgb:     19, 48, 77;

    /* ---- Acentos (naranjas legacy del tema anterior)
           Se conservan parametrizados para no perder contraste
           en componentes que dependen del naranja historico. ---- */
    --c-accent:          #e6603a;   /* Naranja legacy principal */
    --c-accent-dark:     #d55532;
    --c-accent2:         #EF7E56;   /* Naranja brillante (variante clara) */
    --c-accent2-dark:    #e65312;
    --c-accent-rgb:      230, 96, 58;

    /* ---- Semanticos (estados) ---- */
    --c-success:         #28a745;
    --c-success-dark:    #218838;
    --c-success-light:   #d4edda;
    --c-success-bg:      #f0fff4;   /* Fondo verde muy tenue */
    --c-success-bg2:     #e8f5e9;   /* Fondo verde suave */
    --c-success-text:    #155724;   /* Texto sobre fondo verde claro */
    --c-teal:            #20c997;   /* Verde-cian (gradientes completada) */

    --c-danger:          #dc3545;
    --c-danger-dark:     #c82333;
    --c-danger-light:    #f8d7da;
    --c-danger-bg:       #fff5f5;   /* Fondo rojo muy tenue */
    --c-danger-bg2:      #ffe3e3;   /* Fondo rojo suave */
    --c-danger-bg3:      #f1c1c6;   /* Fondo rojo hover */
    --c-danger-text:     #721c24;   /* Texto sobre fondo rojo claro */

    --c-warning:         #ffc107;
    --c-warning-dark:    #e0a800;
    --c-warning-light:   #fff3cd;
    --c-warning-bg:      #fffcf0;   /* Fondo amarillo muy tenue */
    --c-warning-bg2:     #ffe69c;   /* Fondo amarillo medio */
    --c-warning-bg3:     #ffe9a0;   /* Fondo amarillo hover */
    --c-warning-bg4:     #fff8e6;   /* Fondo amarillo bloqueado */
    --c-warning-text:    #856404;   /* Texto sobre fondo amarillo claro */

    --c-info:            #17a2b8;
    --c-info-dark:       #138496;
    --c-info-light:      #d1ecf1;
    --c-info-bg:         #cce5ff;   /* Fondo azul claro (en-proceso) */
    --c-info-bg2:        #e8f4fd;   /* Fondo azul muy tenue */
    --c-info-bg3:        #bee5eb;   /* Fondo azul hover */
    --c-info-text:       #004085;   /* Texto sobre fondo azul-en-proceso */
    --c-info-text2:      #0c5460;   /* Texto sobre fondo azul-info */

    /* ---- Extras semanticos (prioridades, tipologias) ---- */
    --c-orange:          #fd7e14;   /* Naranja alerta (prioridad alta) */
    --c-orange-dark:     #e76a00;
    --c-purple:          #9c27b0;   /* Violeta (caso_creado) */
    --c-purple-dark:     #7b1fa2;
    --c-purple-bg:       #faf3fc;   /* Fondo violeta muy tenue */
    --c-purple-bg2:      #f3e5f5;   /* Fondo violeta suave */
    --c-purple-bg3:      #e1bee7;   /* Fondo violeta medio */
    --c-purple-bg4:      #ce93d8;   /* Fondo violeta hover */

    /* ---- Neutros (superficies, texto, bordes) ---- */
    --c-bg:              #f4f7f6;   /* Fondo general */
    --c-bg-card:         #ffffff;   /* Superficies (cards, modales) */
    --c-bg-subtle:       #f8f9fa;   /* Fondo gris muy tenue (hover rows, etc.) */
    --c-border:          #dee2e6;
    --c-border-soft:     #f0f0f0;
    --c-border-light:    #eeeeee;   /* Bordes tenues (separadores) */
    --c-border-lighter:  #dddddd;   /* Bordes muy tenues */
    --c-text:            #212529;   /* Texto principal */
    --c-text-strong:     #333333;   /* Texto destacado (titulos internos) */
    --c-text-soft:       #555555;   /* Texto de cuerpo secundario */
    --c-text-faint:      #666666;   /* Texto meta */
    --c-muted:           #6c757d;   /* Texto secundario */
    --c-text-placeholder:#888888;   /* Placeholders y labels tenues */
    --c-text-disabled:   #999999;   /* Texto muy tenue / deshabilitado */

    /* ---- Secundario neutro (botones outline, etc.) ---- */
    --c-secondary:       #6c757d;
    --c-secondary-dark:  #5a6268;
    --c-secondary-bg:    #e9ecef;   /* Fondo gris botones disabled */

    /* =====================================================
       ALIASES DE COMPATIBILIDAD --theme-*
       -----------------------------------------------------
       Mantenidos para no romper CSS legacy que ya los usa.
       Se actualizan en cascada porque referencian --c-*.
       NO agregar colores hardcoded aqui; modificarlos
       arriba en el bloque --c-*.
       ===================================================== */

    --theme-primary:         var(--c-primary);
    --theme-primary-dark:    var(--c-primary-dark);
    --theme-primary-light:   var(--c-primary-light);
    --theme-primary-lighter: var(--c-primary-lighter);
    --theme-primary-rgb:     var(--c-primary-rgb);

    --theme-secondary:       var(--c-secondary);
    --theme-secondary-dark:  var(--c-secondary-dark);

    --theme-success:         var(--c-success);
    --theme-success-dark:    var(--c-success-dark);
    --theme-success-light:   var(--c-success-light);
    --theme-danger:          var(--c-danger);
    --theme-danger-dark:     var(--c-danger-dark);
    --theme-danger-light:    var(--c-danger-light);
    --theme-warning:         var(--c-warning);
    --theme-warning-dark:    var(--c-warning-dark);
    --theme-warning-light:   var(--c-warning-light);
    --theme-info:            var(--c-info);
    --theme-info-dark:       var(--c-info-dark);
    --theme-info-light:      var(--c-info-light);

    /* =====================================================
       GRADIENTES (derivados — se actualizan solos)
       ===================================================== */

    --theme-gradient:         linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    --theme-gradient-reverse: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
    --theme-gradient-light:   linear-gradient(135deg, var(--c-primary-light) 0%, var(--c-primary) 100%);
    --c-gradient:             var(--theme-gradient);
    --c-gradient-reverse:     var(--theme-gradient-reverse);
    --c-accent-gradient:      linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);

    /* =====================================================
       BRIDGE — Variables legacy de main.css → sistema --c-*
       -----------------------------------------------------
       main.css consume --primary-color, --card-color,
       --body-color, --border-color y --text-color para
       renderizar el navbar, sidebar y metismenu.
       Como theme-config.css carga DESPUÉS de main.css,
       estas declaraciones !important ganan en el cascade
       (misma especificidad :root, fuente posterior = gana).
       Resultado: cuando el Branding cambia --c-primary,
       TODO el sistema visual (incluyendo main.css) lo refleja.
       ===================================================== */
    --primary-color:  var(--c-primary)  !important;
    --body-color:     var(--c-bg)       !important;
    --card-color:     var(--c-bg-card)  !important;
    --border-color:   var(--c-border)   !important;
    --text-color:     var(--c-text)     !important;
}

/* =====================================================
   ESTILOS DE COMPONENTES CON EL TEMA
   ===================================================== */

/* ----- Headers de Modales ----- */
.modal-header-orange,
.modal-header-themed {
    background: var(--theme-gradient) !important;
    color: white !important;
    border-radius: 0;
    padding: 1rem 1.5rem;
}

.modal-header-orange h5,
.modal-header-orange h6,
.modal-header-themed h5,
.modal-header-themed h6 {
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: white !important;
}

.modal-header-orange .close,
.modal-header-themed .close {
    color: white !important;
    opacity: 0.8;
    text-shadow: none;
}

.modal-header-orange .close:hover,
.modal-header-themed .close:hover {
    opacity: 1;
    color: white !important;
}

/* ----- Botones Principales ----- */
.btn-orange,
.btn-themed,
.btn-primary-themed,
.btn-custom-primary,
button.btn-orange,
a.btn-orange {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
    background: var(--theme-primary) !important;
}

.btn-orange:hover,
.btn-orange:active,
.btn-orange:focus,
.btn-orange:focus:not(.disabled),
.btn-custom-primary:hover,
.btn-custom-primary:active,
.btn-custom-primary:focus,
button.btn-orange:hover,
button.btn-orange:active,
button.btn-orange:focus,
.button.btn-orange:active,
.btn-themed:hover,
.btn-themed:focus,
.btn-primary-themed:hover,
.btn-primary-themed:focus {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    background: var(--theme-primary-dark) !important;
    color: white !important;
}

.btn-outline-orange,
.btn-outline-themed {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    background-color: transparent !important;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus,
.btn-outline-themed:hover,
.btn-outline-themed:focus {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

/* ----- Titulos de Secciones ----- */
.section-title,
.section-title-ver {
    color: var(--theme-primary) !important;
}

.section-title i,
.section-title-ver i {
    color: var(--theme-primary) !important;
}

/* ----- Labels de Formularios ----- */
.form-group-styled label i {
    color: var(--theme-primary) !important;
}

/* ----- Info Box ----- */
.info-box {
    background-color: var(--theme-primary-lighter) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.2) !important;
}

.info-box p,
.info-box i {
    color: var(--theme-primary) !important;
}

/* ----- Focus de Inputs ----- */
.form-group-styled .form-control:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--theme-primary-rgb), 0.15) !important;
}

/* ----- Tablas con Header Themed ----- */
.adjuntos-table thead,
table thead.bg-themed {
    background: var(--theme-gradient) !important;
    color: white !important;
}

/* ----- Botones de Accion ----- */
.btn-preview,
.btn-adjunto-ver {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

.btn-preview:hover,
.btn-adjunto-ver:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: white !important;
}

/* ----- Iconos de Archivos ----- */
.file-icon,
.adjunto-item-info i {
    color: var(--theme-primary) !important;
}

/* ----- Info Labels ----- */
.info-label i {
    color: var(--theme-primary) !important;
}

/* ----- SweetAlert2 Customization ----- */
.swal2-confirm.swal2-styled {
    background-color: var(--theme-primary) !important;
}

/* ----- DataTables Buttons ----- */
.dt-btn-orange,
.dt-button.dt-btn-orange,
.dataTables_wrapper .btn-verMas {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

.dt-btn-orange:hover,
.dt-btn-orange:active,
.dt-btn-orange:focus,
.dt-button.dt-btn-orange:hover,
.dt-button.dt-btn-orange:active,
.dt-button.dt-btn-orange:focus,
.dt-button.dt-btn-orange:focus:not(.disabled),
.dataTables_wrapper .btn-verMas:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: white !important;
}

/* ----- Cards y Paneles ----- */
.card-header.bg-themed,
.panel-header.bg-themed,
.accordion-header-themed {
    background: var(--theme-gradient) !important;
    color: white !important;
}

/* ----- Badges ----- */
.badge-themed,
.badge.bg-themed {
    background-color: var(--theme-primary) !important;
    color: white !important;
}

/* ----- Links ----- */
a.text-themed {
    color: var(--theme-primary) !important;
}

a.text-themed:hover {
    color: var(--theme-primary-dark) !important;
}

/* ----- Borders ----- */
.border-themed {
    border-color: var(--theme-primary) !important;
}

/* ----- File Upload Styled ----- */
.file-upload-styled input[type="file"]:hover {
    border-color: var(--theme-primary) !important;
    background-color: var(--theme-primary-lighter) !important;
}

/* ----- Select2 Custom ----- */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--theme-primary) !important;
}

/* ----- Progress Bars ----- */
.progress-bar.bg-themed {
    background-color: var(--theme-primary) !important;
}

/* ----- Hover en filas de tabla ----- */
.adjuntos-table tbody tr:hover {
    background-color: var(--theme-primary-lighter) !important;
}

/* =====================================================
   OVERRIDE PARA COLORES HARDCODEADOS EN TEMPLATES
   Estos estilos sobrescriben los colores inline
   ===================================================== */

/* Headers de modales con background inline */
[style*="background-color: #e6603a"],
[style*="background-color:#e6603a"],
[style*="background: #e6603a"],
div.modal-header[style*="#e6603a"] {
    background-color: var(--theme-primary) !important;
    background: var(--theme-gradient) !important;
}

/* Accordion headers y card headers con gradiente naranja inline */
[style*="linear-gradient(135deg, #e6603a"],
[style*="linear-gradient(135deg,#e6603a"],
.card-header[style*="#e6603a"],
.accordion-header[style*="#e6603a"],
[style*="#d55532"] {
    background: var(--theme-gradient) !important;
}

/* Elementos con color de texto inline */
[style*="color: #e6603a"],
[style*="color:#e6603a"] {
    color: var(--theme-primary) !important;
}

/* Elementos con border-color inline */
[style*="border-color: #e6603a"],
[style*="border-color:#e6603a"],
[style*="border-bottom: 2px solid #e6603a"] {
    border-color: var(--theme-primary) !important;
}

/* =====================================================
   UTILIDADES
   ===================================================== */

.bg-theme-primary {
    background-color: var(--theme-primary) !important;
}

.bg-theme-gradient {
    background: var(--theme-gradient) !important;
}

.text-theme-primary {
    color: var(--theme-primary) !important;
}

.border-theme-primary {
    border-color: var(--theme-primary) !important;
}

/* =====================================================
   NAVBAR & SIDEBAR — Branding dinámico (White-Label)
   Estas reglas se aplican siempre (no dependen del data-theme)
   porque todo el sistema usa --c-primary vía el bridge.
   ===================================================== */

/* Navbar: siempre usa el gradiente de marca */
.navbar-fixed-top,
[data-theme="theme-navy"] .navbar {
    background: var(--c-gradient) !important;
    border-bottom: none !important;
}

/* Sidebar: fondo claro configurable */
#left-sidebar {
    background-color: var(--c-bg) !important;
    border-right: 1px solid var(--c-border) !important;
}

/* Metismenu: iconos y active states con color de marca */
.sidebar-nav .metismenu > li i {
    color: var(--c-primary) !important;
}
.sidebar-nav .metismenu > li.active > a {
    border-left-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}
.sidebar-nav .metismenu > li.active > a,
.sidebar-nav .metismenu > li > a:hover {
    background-color: var(--c-primary-lighter) !important;
}

/* Nav tabs del sidebar */
#left-sidebar .nav-tabs .nav-link.active {
    color: var(--c-primary) !important;
    border-bottom-color: var(--c-primary) !important;
}

/* User account: nombre del usuario */
.user-account .user-name strong {
    color: var(--c-primary) !important;
}

/* =====================================================
   MAPA MODAL (escuela_verMapa)
   ===================================================== */

/* Barra de info superior del mapa (tipo de escuela, localidad, domicilio) */
.mapa-info-bar {
    padding: 0.75rem 1.25rem;
    background: var(--c-bg-subtle);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--c-text);
}

/* Barra de coordenadas inferior del mapa */
.mapa-coord-bar {
    padding: 0.5rem 1.25rem;
    background: var(--c-bg-subtle);
    border-top: 1px solid var(--c-border);
    font-size: 0.75rem;
    color: var(--c-muted);
    display: flex;
    gap: 1.5rem;
}

/* =====================================================
   CALLOUTS INFORMATIVOS (info / warning)
   Reemplazan divs con estilos inline hardcodeados.
   Usados en parametros_administracion y otros modales.
   ===================================================== */

.callout-info {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--c-info-bg2);
    border-left: 3px solid var(--c-info);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--c-info-text2);
}

.callout-warning {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--c-warning-bg);
    border-left: 3px solid var(--c-warning-dark);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--c-warning-text);
}

.callout-success {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--c-success-bg2);
    border-left: 3px solid var(--c-success);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--c-success-text);
}

/* =====================================================
   PAGINATOR Y DATATABLES
   ===================================================== */

.page-item.active .page-link {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.page-link {
    color: var(--theme-primary) !important;
}

.page-link:hover {
    color: var(--theme-primary-dark) !important;
}

/* DataTables selected row */
table.dataTable tbody tr.selected {
    background-color: var(--theme-primary-lighter) !important;
}

/* =====================================================
   CARDS CON BORDES DE ACENTO
   ===================================================== */

.card.border-primary {
    border-color: var(--theme-primary) !important;
}

/* Excluye bg-opacity-*: esas combinaciones quieren un tinte claro
   (fondo suave, texto oscuro legible), no el navy solido de marca. */
.card .card-header.bg-primary:not([class*="bg-opacity"]) {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* =====================================================
   BOTONES ADICIONALES
   ===================================================== */

/* Boton primary de Bootstrap */
.btn-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
}

.btn-outline-primary {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

/* =====================================================
   FORMULARIOS
   ===================================================== */

.form-control:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* =====================================================
   LINKS Y TEXTOS
   ===================================================== */

/* Enlaces dentro de botones deben mantener color blanco.

   `a.btn` NO es ese caso y estaba en la misma lista: es el enlace que ES el
   boton, no uno adentro de uno. En un boton relleno el blanco corresponde; en
   un `btn-outline-*`, un `btn-light` o un `btn-link` el fondo es claro y el
   blanco lo deja INVISIBLE. Medido el 2026-09-08 con el CDP: 47 enlaces en 35
   plantillas salian blanco sobre blanco, entre ellos el boton de volver de los
   15 reportes -que se veia como un cuadrado vacio-. El `!important` de aca le
   ganaba a `.btn-outline-secondary { color: #6c757d }` de Bootstrap.

   El :hover de los outline lo sigue rellenando Bootstrap con su propio
   `color: #fff`, asi que ahi el texto vuelve a estar bien sin esta regla. */
.btn a,
a.btn:not([class*="btn-outline-"]):not(.btn-link):not(.btn-light):not(.btn-white),
.btn-orange a,
.btn-primary a,
.btn-themed a,
.btn-custom-primary a,
.btn-volver a {
    color: white !important;
}

/* Enlaces generales usan color del tema */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.btn-volver) {
    color: var(--theme-primary);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.btn-volver):hover {
    color: var(--theme-primary-dark);
}

.text-primary {
    color: var(--theme-primary) !important;
}

/* =====================================================
   LOADING / SPINNER
   ===================================================== */

.spinner-border.text-primary {
    color: var(--theme-primary) !important;
}

/* =====================================================
   DROPDOWN MENUS
   ===================================================== */

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--theme-primary) !important;
}

/* =====================================================
   TABS Y NAV
   ===================================================== */

.nav-pills .nav-link.active {
    background-color: var(--theme-primary) !important;
}

.nav-tabs .nav-link.active {
    border-color: var(--theme-primary) var(--theme-primary) #fff !important;
    color: var(--theme-primary) !important;
}

/* =====================================================
   TOOLTIPS Y POPOVERS
   ===================================================== */

.tooltip-primary .tooltip-inner,
.bs-tooltip-primary .tooltip-inner {
    background-color: var(--theme-primary) !important;
}

.popover-primary .popover-header {
    background-color: var(--theme-primary) !important;
    color: white !important;
}

/* =====================================================
   LOGIN PAGE - Pagina de autenticacion
   ===================================================== */

/* Fondo del login */
.auth-main {
    background: var(--theme-gradient) !important;
}

.auth-main::before {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%) !important;
}

.auth-main:after {
    background: var(--theme-gradient) !important;
}

/* Contenedor principal de login con gradiente - SOLO para pagina de login */
[data-theme="theme-navy"] .vertical-align-middle.auth-main {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%) !important;
}

[data-theme="theme-navy"] .auth-main::before {
    background: transparent !important;
}

[data-theme="theme-navy"] .auth-main:after {
    background: transparent !important;
}

/* Fondo para la pagina de login solamente */
[data-theme="theme-navy"] .vertical-align-wrap {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%) !important;
    min-height: 100vh;
}

/* Excluir el wrapper principal del sistema (solo aplica en login) */
[data-theme="theme-navy"] .vertical-align-wrap .auth-main {
    background: transparent !important;
}

/* Page loader: color gestionado por Branding — regla definitiva en el bloque PAGE LOADER */

/* Ocultar h2 con boton toggle-fullwidth de todos los block-header */
.block-header h2 { display: none !important; }

/* =====================================================
   BLOCK-HEADER STICKY (global)
   Mantiene el titulo + breadcrumb visibles bajo la
   topbar mientras el usuario hace scroll vertical en
   cualquier template del sistema.

   --navbar-height la sincroniza un pequeño script en
   base.html con el alto real del .navbar-fixed-top (que
   cambia segun el tamaño del logo en cada breakpoint).
   Fallback: 85px (el valor de #main-content margin-top).

   z-index: 90 — debajo del .navbar-fixed-top (z-index: 99)
   para que el breadcrumb pase POR DEBAJO del navbar, no
   por encima. Asi no se ven solapamientos en el borde.
   ===================================================== */
.block-header {
    position: sticky;
    top: var(--navbar-height, 85px);
    z-index: 90;
    background-color: var(--body-color, #f8f9fa);
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    padding: 12px 0 8px;
}

/* =====================================================
   FIX PARA SELECT2 DENTRO DE MODALES
   Evita que Select2 bloquee el scroll del modal
   ===================================================== */

/* Posicionar correctamente el dropdown de Select2 dentro de modales */
.modal .select2-container--open .select2-dropdown {
    z-index: 1060 !important;
}

/* Evitar que Select2 capture eventos fuera del dropdown */
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    pointer-events: auto;
}

/* Fix para el contenedor de Select2 dentro de modales */
.modal .select2-container {
    z-index: 1050;
}

/* =====================================================
   FIX PARA MODALES CON SCROLL Y FOOTER VISIBLE
   ===================================================== */

/* Modal scrollable con footer fijo */
.modal-dialog-scrollable {
    max-height: calc(100vh - 1rem) !important;
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem) !important;
    display: flex;
    flex-direction: column;
}

/* Cuando el form envuelve todo el contenido del modal */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body,
.modal-dialog-scrollable .modal-content > .modal-body {
    flex: 1 1 auto;
    overflow-y: auto !important;
    min-height: 0;
}

.modal-dialog-scrollable .modal-content > form > .modal-footer,
.modal-dialog-scrollable .modal-content > .modal-footer {
    flex-shrink: 0;
}

.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > .modal-header {
    flex-shrink: 0;
}

/* =====================================================
   CLASES DE TEXTO CON COLOR DEL TEMA
   ===================================================== */

/* Convertir text-orange al color del tema */
.text-orange {
    color: var(--theme-primary) !important;
}

/* =====================================================
   FIX PARA DROPDOWN DE NOTIFICACIONES EN NAVBAR
   ===================================================== */

/* Asegurar que el navbar y sus contenedores permitan overflow */
.navbar-fixed-top {
    overflow: visible !important;
}

.navbar-fixed-top .container-fluid {
    overflow: visible !important;
}

.navbar-fixed-top .navbar-right {
    overflow: visible !important;
    position: relative;
}

.navbar-fixed-top #navbar-menu {
    overflow: visible !important;
}

/* Dropdown de notificaciones - posicionamiento correcto */
.navbar-nav .dropdown {
    position: relative;
}

.navbar-nav .dropdown-menu.notifications,
.navbar-nav ul.notifications {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1000 !important;
    display: none;
    max-height: 80vh;
    overflow-y: auto;
    min-width: 350px;
    width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* RESPONSIVE: Centrar dropdown en pantallas pequeñas */
@media (max-width: 576px) {
    .navbar-nav .dropdown-menu.notifications,
    .navbar-nav ul.notifications {
        position: fixed !important;
        top: 60px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: calc(100vw - 20px) !important;
        max-width: 400px;
        min-width: unset;
        margin: 0 auto;
        border-radius: 12px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .navbar-nav .dropdown-menu.notifications,
    .navbar-nav ul.notifications {
        position: fixed !important;
        top: 60px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: 380px;
        min-width: unset;
        border-radius: 12px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .navbar-nav .dropdown-menu.notifications,
    .navbar-nav ul.notifications {
        right: -50px !important;
        left: auto !important;
        transform: none;
    }
}

/* Mostrar dropdown cuando tiene clase show o cuando el padre tiene open */
.navbar-nav .dropdown.show > .dropdown-menu.notifications,
.navbar-nav .dropdown.open > .dropdown-menu.notifications,
.navbar-nav .dropdown.show > ul.notifications,
.navbar-nav .dropdown.open > ul.notifications,
.navbar-nav .dropdown-menu.notifications.show,
.navbar-nav ul.notifications.show {
    display: block !important;
}

/* Estilos para items de notificacion */
.navbar-nav ul.notifications li {
    border-bottom: 1px solid var(--border-color, #e9ecef);
}

.navbar-nav ul.notifications li:last-child {
    border-bottom: none;
}

/* Estilo cuando no hay notificaciones */
.navbar-nav ul.notifications:empty::after {
    content: "No hay notificaciones";
    display: block;
    padding: 20px;
    text-align: center;
    color: var(--color-500, #6c757d);
}

/* Fix adicional: asegurar que el dropdown se superponga al contenido */
.navbar-fixed-top .navbar-nav > li.dropdown {
    position: static;
}

@media (min-width: 993px) {
    .navbar-fixed-top .navbar-nav > li.dropdown {
        position: relative;
    }
}

/* Asegurar z-index alto para el dropdown */
.navbar-nav .dropdown-menu.notifications.show,
.navbar-nav ul.notifications.show,
.navbar-nav .dropdown.open .dropdown-menu.notifications,
.navbar-nav .dropdown.show .dropdown-menu.notifications {
    z-index: 9999 !important;
}

/* =====================================================
   BUSCADOR DE NOTIFICACIONES
   ===================================================== */

/* Header de notificaciones con buscador */
.navbar-nav ul.notifications .notification-header {
    position: sticky !important;
    top: 0;
    background: var(--card-color, #fff) !important;
    z-index: 10;
    padding: 12px 15px !important;
    border-bottom: 1px solid var(--border-color, #e9ecef);
}

.navbar-nav ul.notifications .notification-header strong {
    font-size: 14px;
    color: var(--theme-primary, #13304D);
}

.navbar-nav ul.notifications .notification-header .cant-badge {
    background-color: var(--theme-primary, #13304D);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
}

/* Campo de búsqueda */
.navbar-nav ul.notifications .notification-search {
    margin-top: 8px;
}

.navbar-nav ul.notifications .notification-search input {
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--border-color, #dee2e6);
    background-color: var(--body-color, #f8f9fa);
}

.navbar-nav ul.notifications .notification-search input:focus {
    border-color: var(--theme-primary, #13304D);
    box-shadow: 0 0 0 0.15rem rgba(var(--theme-primary-rgb, 19, 48, 77), 0.15);
    outline: none;
}

.navbar-nav ul.notifications .notification-search input::placeholder {
    color: #999;
    font-size: 12px;
}

/* Contenedor de lista de notificaciones */
.navbar-nav ul.notifications .notification-list-container {
    padding: 0 !important;
    border-bottom: none !important;
}

.navbar-nav ul.notifications .notification-items {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: calc(80vh - 100px);
    overflow-y: auto;
}

/* Items de notificación */
.navbar-nav ul.notifications .notification-item {
    transition: background-color 0.2s ease;
}

.navbar-nav ul.notifications .notification-item.hidden {
    display: none !important;
}

.navbar-nav ul.notifications .notification-item:hover {
    background-color: rgba(var(--theme-primary-rgb, 19, 48, 77), 0.05);
}

/* Mensaje de sin resultados */
.navbar-nav ul.notifications .notification-no-results {
    padding: 15px;
    background-color: var(--body-color, #f8f9fa);
}

.navbar-nav ul.notifications .notification-no-results p {
    margin: 0;
    font-size: 13px;
}

/* Highlight de texto encontrado */
.navbar-nav ul.notifications .notification-item .highlight {
    background-color: rgba(255, 193, 7, 0.4);
    padding: 0 2px;
    border-radius: 2px;
}

/* =====================================================
   RESPONSIVE ADICIONAL PARA NOTIFICACIONES
   ===================================================== */

/* Ajustes responsive para el header */
@media (max-width: 576px) {
    .navbar-nav ul.notifications .notification-header {
        padding: 15px !important;
        border-radius: 12px 12px 0 0;
    }

    .navbar-nav ul.notifications .notification-header strong {
        font-size: 16px;
    }

    .navbar-nav ul.notifications .notification-search input {
        padding: 10px 15px;
        font-size: 14px;
    }

    .navbar-nav ul.notifications .notification-items {
        max-height: calc(70vh - 120px);
    }

    /* Mejorar legibilidad de items en móvil */
    .navbar-nav ul.notifications .notification-item .notification-media {
        padding: 12px 15px;
    }

    .navbar-nav ul.notifications .notification-item .title {
        font-size: 14px;
        font-weight: 600;
    }

    .navbar-nav ul.notifications .notification-item .text {
        font-size: 13px;
        line-height: 1.4;
    }

    .navbar-nav ul.notifications .notification-item .timestamp {
        font-size: 11px;
    }
}

/* Flecha/indicador que apunta al icono de notificaciones */
@media (min-width: 993px) {
    .navbar-nav ul.notifications::before {
        content: '';
        position: absolute;
        top: -8px;
        right: 15px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid var(--card-color, #fff);
        z-index: 1;
    }

    .navbar-nav ul.notifications::after {
        content: '';
        position: absolute;
        top: -10px;
        right: 14px;
        width: 0;
        height: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 9px solid rgba(0, 0, 0, 0.1);
        z-index: 0;
    }
}

/* Animación de apertura del dropdown */
.navbar-nav ul.notifications {
    opacity: 0;
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar-nav ul.notifications.show,
.navbar-nav .dropdown.open ul.notifications {
    opacity: 1;
}

@media (max-width: 768px) {
    .navbar-nav ul.notifications {
        transform: translateX(-50%) scale(0.95);
    }

    .navbar-nav ul.notifications.show,
    .navbar-nav .dropdown.open ul.notifications {
        transform: translateX(-50%) scale(1);
    }
}

@media (min-width: 769px) {
    .navbar-nav ul.notifications {
        transform: translateY(-5px);
    }

    .navbar-nav ul.notifications.show,
    .navbar-nav .dropdown.open ul.notifications {
        transform: translateY(0);
    }
}

/* ========================================
   ESTILOS DE URGENCIA PARA NOTIFICACIONES
   ======================================== */

/* Notificación con urgencia ALTA (rojo) */
.notification-item.notification-urgente {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.12) 0%, rgba(220, 53, 69, 0.05) 100%) !important;
    border-left: 4px solid #dc3545 !important;
    position: relative;
}

.notification-item.notification-urgente::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent #dc3545 transparent transparent;
    opacity: 0.7;
}

.notification-item.notification-urgente:hover {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.18) 0%, rgba(220, 53, 69, 0.08) 100%) !important;
}

/* Notificación con urgencia MEDIA (amarillo/naranja) */
.notification-item.notification-media {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%) !important;
    border-left: 4px solid #ffc107 !important;
    position: relative;
}

.notification-item.notification-media::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent #ffc107 transparent transparent;
    opacity: 0.7;
}

.notification-item.notification-media:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.22) 0%, rgba(255, 193, 7, 0.10) 100%) !important;
}

/* Tags/Badges de urgencia */
.urgencia-tag {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.urgencia-tag i {
    margin-right: 3px;
    font-size: 9px;
}

/* Tag urgencia ALTA */
.urgencia-tag-alta {
    background-color: #dc3545;
    color: #fff;
    animation: pulse-urgente 2s infinite;
}

/* Tag urgencia MEDIA */
.urgencia-tag-media {
    background-color: #ffc107;
    color: #212529;
}

/* Tag urgencia NORMAL (si se necesita) */
.urgencia-tag-normal {
    background-color: #28a745;
    color: #fff;
}

/* Animación de pulso para urgencias altas */
@keyframes pulse-urgente {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.02);
    }
}

/* Ajustes para el icono de la notificación urgente */
.notification-item.notification-urgente .notification-left i {
    animation: shake-icon 0.5s ease-in-out infinite;
    animation-delay: 3s;
}

@keyframes shake-icon {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Mejorar visibilidad del título en notificaciones con urgencia */
.notification-item.notification-urgente .title,
.notification-item.notification-media .title {
    font-weight: 600;
}

/* Responsive: ajustes para móviles */
@media (max-width: 576px) {
    .urgencia-tag {
        font-size: 9px;
        padding: 1px 4px;
    }

    .notification-item.notification-urgente::before,
    .notification-item.notification-media::before {
        border-width: 0 14px 14px 0;
    }
}

/* ========================================
   NOTIFICACIONES CLICKEABLES
   ======================================== */

/* Notificación clickeable - cursor y hover */
.notification-item.notification-clickeable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.notification-item.notification-clickeable:hover {
    transform: translateX(3px);
    box-shadow: -3px 0 0 var(--theme-primary, #13304D);
}

.notification-item.notification-clickeable:hover .title {
    color: var(--theme-primary, #13304D);
}

/* Acciones de notificación (timestamp + botones) */
.notification-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.notification-actions .timestamp {
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px;
}

.notification-actions .timestamp i {
    font-size: 10px;
}

/* Contenedor de botones */
.notification-btns {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Botón Ver recurso */
.btn-ver-recurso {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff !important;
    background: linear-gradient(135deg, var(--theme-primary, #13304D) 0%, var(--theme-primary-dark, #0d2339) 100%);
    border-radius: 15px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-ver-recurso:hover,
.btn-ver-recurso:focus,
.btn-ver-recurso:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: #fff !important;
    text-decoration: none !important;
}

.btn-ver-recurso i {
    font-size: 10px;
    color: #fff !important;
}

/* Botón Marcar como leída */
.btn-marcar-leida {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff !important;
    background-color: #28a745;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-marcar-leida:hover {
    background-color: #218838;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-marcar-leida i {
    font-size: 10px;
    color: #fff !important;
}

/* Indicador visual de enlace en notificaciones clickeables */
.notification-item.notification-clickeable .notification-left::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--theme-primary, #13304D);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.notification-item.notification-clickeable:hover .notification-left::after {
    opacity: 1;
}

.notification-item .notification-left {
    position: relative;
}

/* Ajustar texto de notificación */
.notification-item .text {
    margin-bottom: 0 !important;
    font-size: 12px;
    line-height: 1.4;
    color: #555;
}

/* Responsive para botones de notificación */
@media (max-width: 576px) {
    .notification-actions {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .notification-btns {
        width: 100%;
        justify-content: flex-end;
    }

    .btn-ver-recurso,
    .btn-marcar-leida {
        padding: 6px 12px;
        font-size: 12px;
    }

    .notification-item.notification-clickeable:hover {
        transform: none;
        box-shadow: inset 3px 0 0 var(--theme-primary, #13304D);
    }
}

/* =====================================================
   DROPDOWN DE TUTORIALES EN NAVBAR
   ===================================================== */

/* Posicionamiento del dropdown */
.navbar-nav .dropdown-menu.tutorials-dropdown,
.navbar-nav ul.tutorials-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1000 !important;
    display: none;
    max-height: 80vh;
    overflow-y: auto;
    min-width: 350px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color, #e9ecef);
    background: var(--card-color, #fff);
    padding: 0;
}

@media (max-width: 576px) {
    .navbar-nav .dropdown-menu.tutorials-dropdown,
    .navbar-nav ul.tutorials-dropdown {
        position: fixed !important;
        top: 60px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: calc(100vw - 20px) !important;
        max-width: 400px;
        min-width: unset;
        margin: 0 auto;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .navbar-nav .dropdown-menu.tutorials-dropdown,
    .navbar-nav ul.tutorials-dropdown {
        position: fixed !important;
        top: 60px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: 380px;
        min-width: unset;
        border-radius: 12px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .navbar-nav .dropdown-menu.tutorials-dropdown,
    .navbar-nav ul.tutorials-dropdown {
        right: -50px !important;
        left: auto !important;
        transform: none;
    }
}

/* Mostrar dropdown de tutoriales */
.navbar-nav .dropdown.show > .dropdown-menu.tutorials-dropdown,
.navbar-nav .dropdown.open > .dropdown-menu.tutorials-dropdown,
.navbar-nav .dropdown.show > ul.tutorials-dropdown,
.navbar-nav .dropdown.open > ul.tutorials-dropdown,
.navbar-nav .dropdown-menu.tutorials-dropdown.show,
.navbar-nav ul.tutorials-dropdown.show {
    display: block !important;
}

.navbar-nav .dropdown-menu.tutorials-dropdown.show,
.navbar-nav ul.tutorials-dropdown.show,
.navbar-nav .dropdown.open .dropdown-menu.tutorials-dropdown,
.navbar-nav .dropdown.show .dropdown-menu.tutorials-dropdown {
    z-index: 9999 !important;
}

/* Items del dropdown */
.navbar-nav ul.tutorials-dropdown li {
    border-bottom: 1px solid var(--border-color, #e9ecef);
}

.navbar-nav ul.tutorials-dropdown li:last-child {
    border-bottom: none;
}

/* Header de tutoriales */
.navbar-nav ul.tutorials-dropdown .tutorial-header {
    position: sticky !important;
    top: 0;
    background: var(--card-color, #fff) !important;
    z-index: 10;
    padding: 12px 15px !important;
    border-bottom: 1px solid var(--border-color, #e9ecef);
    list-style: none;
}

.navbar-nav ul.tutorials-dropdown .tutorial-header strong {
    font-size: 14px;
    color: var(--theme-primary, #13304D);
}

.navbar-nav ul.tutorials-dropdown .tutorial-header .cant-tutorials-badge {
    background-color: var(--theme-primary, #13304D);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
}

/* Campo de busqueda */
.navbar-nav ul.tutorials-dropdown .tutorial-search {
    margin-top: 8px;
}

.navbar-nav ul.tutorials-dropdown .tutorial-search input {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 20px;
    padding: 6px 15px;
    font-size: 12px;
    background-color: var(--body-color, #f8f9fa);
    transition: all 0.2s;
    width: 100%;
}

.navbar-nav ul.tutorials-dropdown .tutorial-search input:focus {
    outline: none;
    border-color: var(--theme-primary, #13304D);
    background-color: var(--card-color, #fff);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 19, 48, 77), 0.1);
}

/* Lista de items */
.navbar-nav ul.tutorials-dropdown .tutorial-items {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: calc(80vh - 100px);
    overflow-y: auto;
}

/* Contenedor de lista */
.navbar-nav ul.tutorials-dropdown .tutorial-list-container {
    padding: 0 !important;
    border-bottom: none !important;
}

.navbar-nav ul.tutorials-dropdown .tutorial-items {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: calc(80vh - 100px);
    overflow-y: auto;
}

/* Items de tutorial - mismo patron que notification-item */
.navbar-nav ul.tutorials-dropdown .tutorial-item {
    transition: background-color 0.2s ease;
    list-style: none;
}

.navbar-nav ul.tutorials-dropdown .tutorial-item.hidden {
    display: none !important;
}

.navbar-nav ul.tutorials-dropdown .tutorial-item:hover {
    background-color: rgba(var(--theme-primary-rgb, 19, 48, 77), 0.05);
}

/* Media layout - mismo que notification-media */
.navbar-nav ul.tutorials-dropdown .tutorial-media {
    padding: 12px 15px;
    color: var(--color-600);
}

/* Icono izquierdo - mismo que notification-left */
.tutorial-left {
    width: 10%;
    min-width: 35px;
}

.tutorial-left i {
    font-size: 20px;
    color: var(--theme-primary, #13304D);
}

/* Body - mismo que notification-body */
.tutorial-body {
    width: 90%;
}

.navbar-nav ul.tutorials-dropdown .tutorial-body .title {
    width: 100%;
    font-weight: bold;
    font-size: 13px;
    color: var(--font-color, #333);
    display: block;
}

/* Acciones (badge de tipo) */
.tutorial-actions {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

/* Badges de tipo */
.tutorial-tipo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}

.tutorial-tipo-url {
    background-color: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
}

.tutorial-tipo-archivo {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

/* Item clickeable */
.navbar-nav ul.tutorials-dropdown .tutorial-item.tutorial-clickeable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.navbar-nav ul.tutorials-dropdown .tutorial-item.tutorial-clickeable:hover {
    background-color: rgba(var(--theme-primary-rgb, 19, 48, 77), 0.08);
    transform: translateX(3px);
    box-shadow: -3px 0 0 var(--theme-primary, #13304D);
}

.navbar-nav ul.tutorials-dropdown .tutorial-item.tutorial-clickeable:hover .title {
    color: var(--theme-primary, #13304D);
}

/* Sin resultados */
.navbar-nav ul.tutorials-dropdown .tutorial-no-results {
    padding: 15px;
    background-color: var(--body-color, #f8f9fa);
}

.navbar-nav ul.tutorials-dropdown .tutorial-no-results p {
    margin: 0;
    font-size: 13px;
}

/* Icono de tutoriales en navbar */
.a-tutorials i.fa-play-circle {
    font-size: 18px;
}

/* Flecha indicadora en desktop */
@media (min-width: 993px) {
    .navbar-nav ul.tutorials-dropdown::before {
        content: '';
        position: absolute;
        top: -8px;
        right: 15px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid var(--card-color, #fff);
        filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.05));
    }
}

/* Responsive mobile */
@media (max-width: 576px) {
    .navbar-nav ul.tutorials-dropdown .tutorial-header {
        padding: 15px !important;
        border-radius: 12px 12px 0 0;
    }

    .navbar-nav ul.tutorials-dropdown .tutorial-header strong {
        font-size: 16px;
    }

    .navbar-nav ul.tutorials-dropdown .tutorial-search input {
        padding: 10px 15px;
        font-size: 14px;
    }

    .navbar-nav ul.tutorials-dropdown .tutorial-items {
        max-height: calc(70vh - 120px);
    }

    .navbar-nav ul.tutorials-dropdown .tutorial-media {
        padding: 12px 15px;
    }

    .navbar-nav ul.tutorials-dropdown .tutorial-body .title {
        font-size: 14px;
        font-weight: 600;
    }

    .navbar-nav ul.tutorials-dropdown .tutorial-item.tutorial-clickeable:hover {
        transform: none;
        box-shadow: inset 3px 0 0 var(--theme-primary, #13304D);
    }
}

/* =====================================================
   PAGE LOADER - Neural Network + AI
   ===================================================== */

.page-loader-wrapper {
    background: var(--c-gradient) !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}
.page-loader-wrapper.loaded {
    opacity: 0;
    visibility: hidden;
}
#neuralCanvasLoader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    z-index: 0;
}
.loader-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}
.loader-orb-1 {
    width: 300px;
    height: 300px;
    background: rgba(59,130,246,0.5);
    top: 10%;
    left: 15%;
    animation: loaderOrbFloat 6s ease-in-out infinite;
}
.loader-orb-2 {
    width: 250px;
    height: 250px;
    background: rgba(139,92,246,0.4);
    bottom: 15%;
    right: 10%;
    animation: loaderOrbFloat 8s ease-in-out infinite reverse;
}
@keyframes loaderOrbFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -20px); }
}
.loader-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.loader-logo {
    animation: loaderLogoFloat 3s ease-in-out infinite;
}
@keyframes loaderLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.loader-logo-glow {
    width: 200px;
    height: 40px;
    background: radial-gradient(ellipse, rgba(59,130,246,0.3) 0%, transparent 70%);
    margin-top: -10px;
    animation: loaderLogoGlowPulse 3s ease-in-out infinite;
}
@keyframes loaderLogoGlowPulse {
    0%, 100% { opacity: 0.3; transform: scaleX(1); }
    50% { opacity: 0.7; transform: scaleX(1.15); }
}
.loader-separator {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(147,197,253,0.5), transparent);
    margin: 16px 0;
    animation: loaderSepGlow 2s ease-in-out infinite;
}
@keyframes loaderSepGlow {
    0%, 100% { opacity: 0.3; width: 60px; }
    50% { opacity: 0.8; width: 80px; }
}
.loader-ai-icon {
    color: rgba(147,197,253,0.8);
    font-size: 1.6rem;
    animation: loaderAiPulse 2s ease-in-out infinite;
    position: relative;
}
.loader-ai-icon i {
    position: relative;
    z-index: 1;
}
.loader-ai-ring {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid transparent;
    border-top-color: rgba(147,197,253,0.4);
    border-radius: 50%;
    animation: loaderAiRing 1.2s linear infinite;
}
@keyframes loaderAiPulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 10px rgba(59,130,246,0.3); }
    50% { transform: scale(1.12); text-shadow: 0 0 20px rgba(59,130,246,0.5), 0 0 40px rgba(139,92,246,0.3); }
}
@keyframes loaderAiRing {
    to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════
   BASE.HTML — Static layout utilities (moved from inline <style>)
   ═══════════════════════════════════════════════════════════════ */

/* Navbar logo — responsive sizing */
.navbar-logo { width: 200px; max-width: 100%; transition: width .2s; }
@media (max-width: 992px) { .navbar-logo { width: 140px; } }
@media (max-width: 600px)  { .navbar-logo { width: 110px; } }
@media (max-width: 420px)  { .navbar-logo { display: none; } }

/* DataTables — spacing fixes */
.dataTables_wrapper .row.dt-row,
.dataTables_wrapper > .row:last-child { margin-top: 16px !important; }
.dt-bootstrap4 .dataTables_info,
.dt-bootstrap4 .dataTables_paginate,
.dt-bootstrap4 .dataTables_length,
.dt-bootstrap4 .dataTables_filter { margin-top: 16px !important; padding-top: 4px; }
.dataTables_wrapper .pagination { margin-bottom: 0; }
.dataTables_wrapper > .dataTables_scroll,
.dataTables_wrapper > table.dataTable { margin-bottom: 8px; }

/* Scroll-to-top button */
#btnScrollTop {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
    color: var(--c-bg-card); font-size: 18px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), 0.35);
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.3s;
    display: flex; align-items: center; justify-content: center;
}
#btnScrollTop.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#btnScrollTop:hover {
    background: linear-gradient(135deg, var(--c-primary-light), var(--c-accent));
    box-shadow: 0 6px 20px rgba(var(--c-accent-rgb), 0.4);
    transform: translateY(-2px);
}
#btnScrollTop:active { transform: translateY(0); }
@media (min-width: 993px) { #btnScrollTop { width: 40px; height: 40px; font-size: 16px; bottom: 20px; right: 20px; } }
@media (max-width: 480px) { #btnScrollTop { bottom: 18px; right: 16px; width: 48px; height: 48px; font-size: 20px; } }

/* ═══════════════════════════════════════════════════════════════
   MODAL COMPONENTS — Unified themed modal structure
   Replaces: .modal-header-gov, -escuela, -tutorial, -api
   ═══════════════════════════════════════════════════════════════ */

/* Already defined: .modal-header-themed (see above). Additional parts: */
.modal-body-themed {
    padding: 1.25rem 1.5rem;
    background: var(--c-bg, #f8f9fa);
    max-height: 70vh;
    overflow-y: auto;
}

/* Section card inside a modal */
.modal-section {
    background: white; border-radius: 0.5rem; padding: 1rem 1.25rem;
    margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 3px solid var(--c-primary);
}
/* Flat variant — no card styling, just a logical grouping */
.modal-section--flat { background: transparent; padding: 0; margin-bottom: 1.25rem; border: none; box-shadow: none; }
.modal-section--flat + .modal-section--flat { margin-top: 0.25rem; }

.modal-section-title {
    font-size: 0.75rem; font-weight: 700; color: var(--c-primary);
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;
}
/* Underline variant used in flat sections */
.modal-section-title--underline { padding-bottom: 0.45rem; border-bottom: 1px solid #e9ecef; }
.modal-section-title--underline::after { content: ""; flex: 1; height: 0; }
.modal-section-title i { color: var(--c-accent); font-size: 0.85rem; }

.modal-footer-themed {
    background: #f1f3f5; border-top: 1px solid #e9ecef;
    padding: 0.75rem 1.5rem; display: flex;
    justify-content: space-between; align-items: center;
}
.btn-modal-save {
    background: var(--c-primary); color: white; border: none;
    padding: 0.5rem 1.5rem; border-radius: 0.4rem;
    font-weight: 600; font-size: 0.85rem; transition: all 0.2s;
}
.btn-modal-save:hover { background: var(--c-primary-dark); color: white; }
.btn-modal-cancel {
    background: transparent; color: #6c757d;
    border: 1.5px solid #dee2e6; padding: 0.5rem 1.25rem;
    border-radius: 0.4rem; font-size: 0.85rem;
}
.btn-modal-cancel:hover { background: #e9ecef; }

/* ═══════════════════════════════════════════════════════════════
   FORM GROUP — Unified modal/form field (.fg-modal)
   Replaces: .fg, .fg-e, .fg-t, .form-group-styled
   ═══════════════════════════════════════════════════════════════ */

.fg-modal { margin-bottom: 0.75rem; }
.fg-modal label { display: block; font-weight: 600; color: #2c3e50; font-size: 0.78rem; margin-bottom: 0.3rem; }
.fg-modal label i { color: #6c757d; margin-right: 0.3rem; font-size: 0.75rem; }
.fg-modal .form-control,
.fg-modal select,
.fg-modal input[type="text"],
.fg-modal input[type="email"],
.fg-modal input[type="password"],
.fg-modal textarea {
    border: 1.5px solid #dee2e6 !important; border-radius: 0.4rem !important;
    padding: 0.5rem 0.75rem !important; font-size: 0.85rem;
    transition: border-color 0.2s; width: 100%;
}
.fg-modal .form-control:focus,
.fg-modal select:focus,
.fg-modal input:focus,
.fg-modal textarea:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--c-primary-rgb), 0.12) !important;
}
.fg-modal .select2-container--default .select2-selection--single {
    border: 1.5px solid #dee2e6; border-radius: 0.4rem; height: 38px; display: flex; align-items: center;
}
.fg-modal .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--c-primary); }
.fg-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal; padding-left: 0.6rem; color: #495057; font-size: 0.85rem;
}

/* Section title inside regular (non-modal) forms */
.section-title-form {
    font-size: 0.85rem; font-weight: 600; color: var(--c-primary);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #f0f0f0;
}
.section-title-form i { margin-right: 0.5rem; color: var(--c-accent); }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION TABS — Custom themed tabs
   ═══════════════════════════════════════════════════════════════ */

.nav-tabs-custom { border-bottom: 2px solid #dee2e6; }
.nav-tabs-custom .nav-link {
    color: var(--c-primary); font-weight: 600;
    border: none; border-bottom: 3px solid transparent;
    padding: 10px 20px; transition: all 0.2s;
}
.nav-tabs-custom .nav-link:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); background: transparent; }
.nav-tabs-custom .nav-link.active { color: var(--c-accent); border-bottom-color: var(--c-accent); background: transparent; }
.nav-tabs-custom .nav-link i { margin-right: 5px; }
@media (max-width: 768px) {
    .nav-tabs-custom { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs-custom .nav-link { white-space: nowrap; padding: 8px 12px; font-size: 0.85em; }
}

/* SweetAlert + Select2 overflow fix */
.swal2-popup { overflow: visible !important; }
.swal2-html-container { overflow: visible !important; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE HELPERS — Desktop/mobile visibility toggle
   ═══════════════════════════════════════════════════════════════ */

.vista-mobile { display: none; }
@media (max-width: 768px) {
    .vista-desktop { display: none !important; }
    .vista-mobile  { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════
   USUARIO CARDS — Mobile card layout for gestion_usuarios
   ═══════════════════════════════════════════════════════════════ */

.usuarios-cards-container { padding: 10px 0; }
.usuario-card {
    background: #fff; border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 15px;
    border-left: 4px solid var(--c-primary); overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.usuario-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.usuario-card-header { padding: 12px 15px; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 8px; }
.usuario-card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.usuario-card-nombre { font-weight: 700; color: var(--c-primary); font-size: 1.1em; }
.usuario-card-estado { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; }
.usuario-card-estado.estado-activo   { background-color: #d4edda; color: #155724; }
.usuario-card-estado.estado-inactivo { background-color: #f8d7da; color: #721c24; }
.usuario-card-username { font-size: 0.9em; color: #666; background: #f0f0f0; padding: 2px 8px; border-radius: 4px; display: inline-block; }
.usuario-card-body { padding: 12px 15px; }
.usuario-card-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid #f5f5f5; }
.usuario-card-row:last-child { border-bottom: none; }
.usuario-card-label { font-size: 0.8em; color: #888; text-transform: uppercase; font-weight: 600; min-width: 80px; }
.usuario-card-value { font-size: 0.95em; color: #333; text-align: right; flex: 1; word-break: break-word; }
.usuario-card-footer { padding: 10px 15px; background: #f8f9fa; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.usuario-card-footer .btn { padding: 8px 14px; font-size: 0.85em; background-color: var(--c-primary); border-color: var(--c-primary); color: white; border-radius: 6px; }
.usuario-card-footer .btn:hover { background-color: var(--c-primary-dark); border-color: var(--c-primary-dark); color: white; }
@media (max-width: 576px) {
    .usuario-card-row { flex-direction: column; align-items: flex-start; gap: 3px; }
    .usuario-card-value { text-align: left; }
    .usuario-card-footer { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   PARAMETRO CARDS — Mobile card layout for parametros_administracion
   ═══════════════════════════════════════════════════════════════ */

.parametros-cards-container { display: flex; flex-direction: column; gap: 12px; padding: 10px 0; }
.parametro-card { background: #ffffff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid #e0e0e0; }
.parametro-card-header {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: white; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center;
}
.parametro-card-header .titulo { font-weight: 600; font-size: 1rem; margin: 0; flex: 1; }
.parametro-card-body { padding: 12px 15px; }
.parametro-card-body .dato-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.parametro-card-body .dato-row:last-child { border-bottom: none; }
.parametro-card-body .dato-label { font-weight: 600; color: #666; font-size: 0.85rem; }
.parametro-card-body .dato-value { color: #333; font-size: 0.9rem; text-align: right; max-width: 60%; word-break: break-word; }
.parametro-card-footer { padding: 10px 15px; background: #f8f9fa; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.parametro-card-footer .btn { padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; }
.parametro-card-footer .btn-editar   { background: var(--c-primary); color: white; border: none; }
.parametro-card-footer .btn-editar:hover   { background: var(--c-primary-dark); color: white; }
.parametro-card-footer .btn-eliminar { background: var(--c-danger, #dc3545); color: white; border: none; }
.parametro-card-footer .btn-eliminar:hover { background: #c82333; color: white; }
.parametro-card-footer .btn-mapa     { background: var(--c-success, #28a745); color: white; border: none; }
.parametro-card-footer .btn-mapa:hover { background: #218838; color: white; }

/* ═══════════════════════════════════════════════════════════════
   SHARED CARD UTILITIES — Pagination, empty state, back-to-top
   ═══════════════════════════════════════════════════════════════ */

.cards-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 15px 0; flex-wrap: wrap; }
.cards-pagination .btn { min-width: 100px; }
.cards-pagination .page-info { font-size: 0.9em; color: #666; padding: 0 15px; }
.cards-loading { text-align: center; padding: 40px 20px; color: #666; }
.cards-loading i { font-size: 2em; margin-bottom: 10px; display: block; }
.cards-empty { text-align: center; padding: 40px 20px; color: #888; }
.cards-empty i { font-size: 3em; margin-bottom: 15px; display: block; color: #ccc; }

.cards-paginacion { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.cards-paginacion .btn-pag {
    min-width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--c-primary); background: white; color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; cursor: pointer; transition: all 0.2s;
}
.cards-paginacion .btn-pag:hover  { background: var(--c-primary); color: white; }
.cards-paginacion .btn-pag.active { background: var(--c-primary); color: white; }
.cards-paginacion .btn-pag:disabled { opacity: 0.5; cursor: not-allowed; }
.cards-info-paginacion { text-align: center; color: #666; font-size: 0.85rem; margin-top: 8px; }
.sin-datos-card { text-align: center; padding: 30px; color: #666; font-style: italic; }

/* Mobile scroll-back-to-top */
.btn-volver-arriba {
    position: fixed; bottom: 90px; right: 20px;
    width: 45px; height: 45px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: white; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer; z-index: 1000;
    display: none; align-items: center; justify-content: center; transition: all 0.3s ease;
}
.btn-volver-arriba:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
.btn-volver-arriba i { font-size: 1.2rem; }
@media (max-width: 768px) { .btn-volver-arriba.visible { display: flex; } }

/* New-record button (mobile context) */
.btn-nuevo-mobile { display: none; margin-bottom: 15px; }
.btn-nuevo-mobile .btn {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: white; border: none; padding: 10px 20px;
    border-radius: 8px; font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-nuevo-mobile .btn:hover { background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%); color: white; }
@media (max-width: 768px) { .btn-nuevo-mobile { display: flex; justify-content: center; } }

.buscador-mobile { margin-bottom: 15px; }
.buscador-mobile input { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; }
.buscador-mobile input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.1); }

.mobile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.mobile-header .usuarios-count { font-size: 13px; color: #6c757d; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   FILTROS & BADGES — Shared across list views
   ═══════════════════════════════════════════════════════════════ */

/* Etiqueta del header de filtros */
.filtros-label {
    font-size: 0.82rem;
    color: var(--c-primary);
    font-weight: 600;
}

.filtros-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.btn-toggle-filtros {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; background-color: var(--c-primary);
    border: 1px solid var(--c-primary); color: white;
    border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.btn-toggle-filtros:hover { background-color: var(--c-primary-dark); border-color: var(--c-primary-dark); }
.btn-toggle-filtros i { font-size: 14px; }
.filtros-container { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 15px; margin-bottom: 15px; }
.filtros-container .form-control,
.filtros-container .select2-container { font-size: 13px; }
.filtros-actions { display: flex; gap: 8px; margin-top: 12px; }

/* =====================================================
   MODAL DE RESULTADO DE PRUEBA DE SERVICIO (lista.html)
   ===================================================== */

/* Tarjetas KPI dentro del modal de test */
.test-kpi-card {
    flex: 1;
    min-width: 120px;
    background: var(--c-bg-card);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 3px solid var(--c-border); /* sobreescrito vía style inline con la variable correcta */
}
.test-kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
}
.test-kpi-value {
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: 4px;
}

/* Caja de respuesta (código) */
.test-response-box {
    background: var(--c-bg-card);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.test-response-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-primary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.test-response-pre {
    background: #1e1e2e;   /* Dark editor — no usar variable: es intencional como código */
    color: #cdd6f4;
    padding: 1rem;
    border-radius: 0.4rem;
    max-height: 400px;
    overflow: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
    margin: 0;
    font-family: Consolas, monospace;
}

/* Status badges — con la anatomia del arquetipo, no con relleno solido
 *
 * `badge-activo` pintaba `#28a745` con texto BLANCO y `badge-inactivo` gris
 * solido. Eran 24 usos en 9 plantillas, y el barrido de badges del 2026-09-08
 * los dejo pasar porque busca `badge-success|danger|warning|info|primary|
 * secondary` y estos dos son nombres PROPIOS del proyecto. Se encontraron
 * mirando la captura de `embargos/detalle.html`: «Activo», «Alta» y «Positivo»
 * eran tres rellenos verdes en la misma pantalla.
 *
 * La anatomia es la de `.arq-pill`: fondo neutro, el color en el TEXTO y un aro
 * de 1px. El criterio del arquetipo es que el color distingue solo cuando hay
 * algo que mirar, y «Activo» es el estado NORMAL — el que no hay que mirar. Con
 * el verde relleno, la pantalla gastaba su contraste en lo que esta bien.
 *
 * Se redefine aca en vez de reemplazar los 24 usos en las plantillas por dos
 * razones: es una regla contra veinticuatro ediciones, y sobre todo evita que la
 * MISMA etiqueta «Activo» quede verde en `empleados/lista` y neutra en
 * `embargos/detalle`. La misma etiqueta con dos aspectos es peor que dejarla mal
 * en las dos.
 *
 * `badge-error` se queda con relleno: un error SI es algo que hay que mirar, y
 * es el unico de los tres que el arquetipo pinta.
 */
.badge-estado { display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 4px; }
.badge-activo {
    background-color: var(--c-bg-subtle);
    color: var(--c-primary);
    box-shadow: inset 0 0 0 1px var(--c-border);
}
.badge-inactivo {
    background-color: var(--c-bg-subtle);
    color: var(--c-muted);
    box-shadow: inset 0 0 0 1px var(--c-border);
}
.badge-error    { background-color: var(--c-danger, #dc3545); color: white; }

/* Tipo y Estado de Embargo — texto plano, sin recuadro.
   Fuente unica: cambiar el color acá lo cambia en todo el sistema. */
.tipo-embargo,
.estado-embargo {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tipo-embargo-litis      { color: var(--bs-primary, #0d6efd); }
.tipo-embargo-judicial   { color: var(--c-info-text2, #0c5460); }
.tipo-embargo-comercial  { color: var(--c-purple, #9c27b0); }

.estado-embargo-activo     { color: var(--c-success-text, #155724); }
.estado-embargo-suspendido { color: var(--c-danger-text, #721c24); }
.estado-embargo-cancelado  { color: var(--c-danger-text, #721c24); }

/* =====================================================
   EL OUTLINE DE ADVERTENCIA, LEGIBLE
   ===================================================== */

/* `btn-outline-warning` de Bootstrap usa `#ffc107` —el amarillo BRILLANTE— como
 * color de TEXTO sobre fondo blanco. Medido con el contraste WCAG real:
 * **ratio 1.5**, cuando el minimo para texto grande es 3.0 y para texto normal
 * 4.5. O sea: practicamente ilegible.
 *
 * El amarillo brillante funciona como FONDO (`btn-warning`, texto oscuro encima),
 * no como texto. Por eso el arquetipo tiene DOS tokens distintos y no uno:
 * `--c-warning` para pintar y `--c-warning-text` (#856404) para escribir. La
 * pildora `.arq-pill-wa` ya usa el segundo, y mide **5.2**.
 *
 * Se descubrio el 2026-09-09 al bajar la barra de acciones de
 * `embargos/detalle.html`: cambiar `btn-warning` (relleno, legible) por
 * `btn-outline-warning` bajaba el color pero rompia la lectura. Bajar el color no
 * puede costar la legibilidad — es el mismo error que el enlace blanco sobre
 * blanco, con otra cara.
 *
 * El :hover lo rellena Bootstrap con `#ffc107` y texto oscuro, que ahi si
 * contrasta; no se toca. */
.btn-outline-warning {
    color: var(--c-warning-text);
    border-color: var(--c-warning);
}

/* General purpose action buttons */
.btn-outline-orange {
    color: var(--c-accent); border-color: var(--c-accent);
    background: transparent; border-radius: 4px; padding: 4px 8px; font-size: 12px; transition: all 0.2s;
}
.btn-outline-orange:hover { background-color: var(--c-accent); color: white; }
.btn-nuevo {
    background-color: var(--c-primary); border-color: var(--c-primary);
    color: white; font-weight: 500; padding: 8px 16px; border-radius: 6px; font-size: 13px;
}
.btn-nuevo:hover { background-color: var(--c-primary-dark); color: white; }

/* Responsive DataTable column hiding */
@media (max-width: 992px) { .col-codigo, .col-token-vence { display: none !important; } }
@media (max-width: 768px) {
    .col-url-base, .col-auth, .col-ultima-consulta { display: none !important; }
    .filtros-container .row > div { margin-bottom: 8px; }
    .filtros-actions { flex-wrap: wrap; }
    .filtros-actions .btn-sm { flex: 1; }
    .dt-buttons { float: none !important; margin-bottom: 8px; }
    .dt-buttons .btn-nuevo { width: 100%; }
    div.dataTables_filter { float: none !important; text-align: left !important; }
    div.dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
}
@media (max-width: 480px) { .col-token-vence, .col-ultima-consulta, .col-codigo, .col-url-base, .col-auth { display: none !important; } }

/* Badge SUNICSU / integration indicator */
.badge-sunicsu {
    display: inline-flex; align-items: center; gap: 6px;
    background: #d4edda; color: #155724; border: 1px solid #c3e6cb;
    padding: 6px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
}
.badge-sunicsu i { color: var(--c-success, #28a745); }

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

.captcha-wrapper { margin: 0; margin-bottom: -10px; display: flex; justify-content: center; }
.g-recaptcha { transform: scale(0.75); transform-origin: center; }
@media (max-width: 400px) { .g-recaptcha { transform: scale(0.65); } }

.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 40px; }
.password-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #6c757d; padding: 5px;
}
.password-toggle:hover { color: var(--c-primary); }
.auth-box .alert { text-align: center; font-size: 13px; padding: 10px 15px; border-radius: 5px; margin-bottom: 15px; }
.auth-box .alert-danger,
.auth-box .alert.error { background-color: rgba(220, 53, 69, 0.85); border: none; color: #fff; font-weight: bold; }

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

.text-home { color: var(--c-primary); letter-spacing: -0.5px; }
.logo-hover { transition: transform 0.3s ease; filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.1)); }
.logo-hover:hover { transform: scale(1.02); }
@media (max-width: 768px) { .logo-hover { width: 180px !important; } .home-title { font-size: 1.5rem !important; } .home-subtitle { font-size: 0.9rem !important; } }
@media (max-width: 480px) { .logo-hover { width: 140px !important; } .home-title { font-size: 1.2rem !important; } .home-subtitle { font-size: 0.8rem !important; } }

/* ═══════════════════════════════════════════════════════════════
   REGISTRO CIVIL — RC service view components
   ═══════════════════════════════════════════════════════════════ */

.rc-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 768px) { .rc-kpi-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .rc-kpi-row {
        display: flex; grid-template-columns: none;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
        gap: 10px; padding: 0 4px 6px; margin-bottom: 12px; scrollbar-width: none;
    }
    .rc-kpi-row::-webkit-scrollbar { display: none; }
    .rc-kpi { flex: 0 0 88%; scroll-snap-align: center; }
}
.rc-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.rc-kpi .icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.rc-kpi .label { font-size: .72rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .4px; }
.rc-kpi .value { font-size: 1.15rem; font-weight: 700; color: var(--c-primary); }
.rc-kpi .sub   { font-size: .72rem; color: #94a3b8; }
.rc-kpi.ok   .icon { background: rgba(16,185,129,0.12); color: #10b981; }
.rc-kpi.warn .icon { background: rgba(245,158,11,0.12); color: #f59e0b; }
.rc-kpi.bad  .icon { background: rgba(239,68,68,0.12);  color: #ef4444; }
.rc-kpi.info .icon { background: rgba(59,130,246,0.12); color: #3b82f6; }

.rc-table thead th { background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.rc-table tbody td { vertical-align: middle; font-size: .87rem; }
.badge-metodo-GET  { background: #3b82f6; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.badge-metodo-POST { background: #10b981; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }

.btn-rc-icon {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 4px; font-size: 13px; cursor: pointer;
    margin-right: 4px; transition: all .15s;
}
.btn-rc-icon:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.btn-rc-icon:last-child { margin-right: 0; }
.btn-rc-probar  { background: var(--c-primary); color: #fff; }
.btn-rc-probar:hover  { background: var(--c-primary-dark); }
.btn-rc-renovar { background: var(--c-primary); color: #fff; }
.btn-rc-renovar:hover { background: var(--c-primary-dark); }
.btn-rc-logs    { background: transparent; color: var(--c-primary); border: 1px solid var(--c-primary); }
.btn-rc-logs:hover    { background: var(--c-primary); color: #fff; }
.rc-modal-form label { font-size: .8rem; font-weight: 600; color: var(--c-primary); margin-bottom: 3px; }
.rc-modal-form .form-control { font-size: .85rem; }
.rc-response-box {
    background: #0f172a; color: #e2e8f0; border-radius: 6px;
    padding: 12px; font-family: 'SF Mono', 'Consolas', monospace;
    font-size: .75rem; max-height: 380px; overflow: auto;
    white-space: pre-wrap; word-break: break-all;
}
@media (max-width: 992px) { .rc-table th.col-path, .rc-table td.col-path { display: none; } }
@media (max-width: 600px) {
    .rc-table th.col-desc, .rc-table td.col-desc { display: none; }
    .rc-table th, .rc-table td { font-size: .8rem; padding: .45rem .5rem; }
    .rc-kpi { padding: 12px; }
    .rc-kpi .icon { width: 34px; height: 34px; font-size: 14px; }
    .rc-kpi .value { font-size: 1rem; }
    .rc-kpi .label, .rc-kpi .sub { font-size: .68rem; }
    .btn-rc-icon { width: 30px; height: 30px; font-size: 12px; margin-right: 2px; }
}
@media (max-width: 768px) {
    .modal-lg { max-width: 96vw; margin: 8px auto; }
    .rc-modal-form .form-group { margin-bottom: 10px; }
    .rc-modal-form .row > [class*="col-"] { margin-bottom: 8px; }
}
@media (max-width: 600px) { .breadcrumb { flex-wrap: wrap; font-size: .78rem; padding: 6px 8px; } }

/* ═══════════════════════════════════════════════════════════════
   BRANDING PREVIEW — configuracion_visual.html
   ═══════════════════════════════════════════════════════════════ */

.branding-section-title {
    font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--c-muted); margin-bottom: .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--c-border);
}
.color-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.color-row label { flex: 1; font-size: .82rem; margin: 0; color: var(--c-text); }
.color-row input[type="color"] { width: 44px; height: 32px; padding: 2px; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.color-hint { font-size: .7rem; color: var(--c-muted); min-width: 54px; text-align: right; font-family: monospace; }
#preview-sticky { position: sticky; top: 72px; }
/* =====================================================
   CONFIGURACIÓN VISUAL — Vista previa en tiempo real
   Componentes escopados a #preview-root para no afectar
   el layout global. Usan las mismas var(--c-*) del sistema.
   ===================================================== */

#preview-root {
    border-radius: 8px; overflow: hidden; border: 1px solid var(--c-border);
    font-size: 10px; line-height: 1.4;
    font-family: var(--c-font-family, inherit);
    box-shadow: 0 4px 18px rgba(0,0,0,.10); user-select: none;
}

/* Navbar del preview */
#pv-navbar {
    display: flex; align-items: center; gap: 6px;
    padding: 0 10px; height: 32px;
    background: var(--c-gradient);
    color: #fff;
}
#preview-root .pv-hamburger {
    display: flex; flex-direction: column; gap: 2.5px; padding: 3px; cursor: default;
}
#preview-root .pv-hamburger span {
    display: block; width: 12px; height: 1.5px;
    background: rgba(255,255,255,0.85); border-radius: 1px;
}
#preview-root .pv-brand {
    flex: 1; font-weight: 700; font-size: 9px; letter-spacing: .3px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#preview-root .pv-nav-icons { display: flex; gap: 8px; }
#preview-root .pv-nav-icon {
    width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.8); font-size: 8px;
}

/* Cuerpo: sidebar + contenido */
#pv-body { display: flex; min-height: 210px; background: var(--c-bg); }

/* Sidebar del preview */
#pv-sidebar {
    width: 85px; flex-shrink: 0;
    background: var(--c-bg);
    border-right: 1px solid var(--c-border);
    overflow: hidden;
}
#preview-root .pv-user-account {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 6px 5px;
    border-bottom: 1px solid var(--c-border);
}
#preview-root .pv-user-photo {
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--c-primary-lighter); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; flex-shrink: 0;
}
#preview-root .pv-user-welcome { font-size: 5.5px; color: var(--c-muted); line-height: 1.3; }
#preview-root .pv-user-name { font-size: 7px; font-weight: 600; color: var(--c-text); }

/* Nav tabs del sidebar (Menú / ⚙ / ?) */
#preview-root .pv-nav-tabs { display: flex; border-bottom: 1px solid var(--c-border); }
#preview-root .pv-nav-tab {
    flex: 1; text-align: center; padding: 3px 1px;
    font-size: 6px; color: var(--c-muted); cursor: default;
}
#preview-root .pv-nav-tab.active {
    color: var(--c-primary); border-bottom: 2px solid var(--c-primary); font-weight: 600;
}

/* Items de menú */
#preview-root .pv-menu { padding: 3px 0; }
#preview-root .pv-menu-item {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 6px; font-size: 7px;
    color: var(--c-text); cursor: default;
}
#preview-root .pv-menu-item i { color: var(--c-primary); font-size: 7px; flex-shrink: 0; width: 10px; }
#preview-root .pv-menu-item span:not(.pv-arrow) { flex: 1; }
#preview-root .pv-menu-item .pv-arrow { color: var(--c-muted); font-size: 6px; }
#preview-root .pv-menu-item.active {
    background: var(--c-primary-lighter); color: var(--c-primary);
    border-left: 2px solid var(--c-primary); font-weight: 600;
}
#preview-root .pv-menu-item.active i { color: var(--c-primary); }
#preview-root .pv-submenu-item {
    padding: 2px 6px 2px 17px;
    font-size: 6.5px; color: var(--c-muted);
}

/* Contenido principal del preview */
#pv-content {
    flex: 1; padding: 8px; background: var(--c-bg);
    display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}

/* KPI cards */
#preview-root .pv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#preview-root .pv-kpi {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-top: 2px solid var(--c-accent);
    border-radius: 4px; padding: 5px 4px; text-align: center;
}
#preview-root .pv-kpi-num { font-size: 11px; font-weight: 700; color: var(--c-primary); }
#preview-root .pv-kpi-label {
    font-size: 5.5px; color: var(--c-muted);
    text-transform: uppercase; letter-spacing: .5px;
}

/* Mini tabla */
#preview-root .pv-table-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 4px; overflow: hidden;
}
#preview-root .pv-table-header {
    padding: 4px 7px; font-size: 6.5px; font-weight: 600;
    color: var(--c-text); border-bottom: 1px solid var(--c-border);
}
#preview-root .pv-table-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 7px; border-bottom: 1px solid var(--c-border); font-size: 6.5px;
}
#preview-root .pv-table-row:last-child { border-bottom: none; }
#preview-root .pv-table-muted { color: var(--c-muted); }
#preview-root .pv-badge {
    background: var(--c-primary-lighter); color: var(--c-primary);
    padding: 1px 5px; border-radius: 3px; font-size: 5.5px; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — inicio.html interactive spotlight components
   (Variables derivadas de --c-primary definidas en el template)
   ═══════════════════════════════════════════════════════════════ */

.dash-header {
    background: linear-gradient(135deg, var(--navy-900, color-mix(in srgb, var(--c-primary) 60%, black)) 0%,
                var(--navy-700, var(--c-primary)) 60%, var(--navy-600, var(--c-primary-light)) 100%);
    padding: 24px 32px; color: white; position: relative; overflow: hidden; border-radius: 14px;
}
.dash-header #neuralCanvasDash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; pointer-events: none; }
.dash-header .glow-orb-dash { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.1; pointer-events: none; animation: orbFloatDash 12s ease-in-out infinite; }
.dash-header .orb-d1 { width: 300px; height: 300px; background: #3b82f6; top: -40%; left: -5%; animation-delay: 0s; }
.dash-header .orb-d2 { width: 250px; height: 250px; background: #8b5cf6; bottom: -40%; right: -3%; animation-delay: -4s; }
.dash-header .orb-d3 { width: 200px; height: 200px; background: #06b6d4; top: 20%; right: 30%; animation-delay: -8s; }
@keyframes orbFloatDash {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -10px) scale(1.05); }
    66% { transform: translate(-15px, 15px) scale(0.95); }
}
.dash-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; position: relative; z-index: 1; }
.dash-title { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.dash-subtitle { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.dash-actions { display: flex; gap: 8px; }
.dash-actions button {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
    color: white; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.dash-actions button:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); }

.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; z-index: 1; }
.kpi-item {
    background: rgba(255,255,255,0.07); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px 20px;
    transition: all 0.3s; position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 14px;
}
.kpi-item:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.kpi-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
.kpi-item.money::after { background: var(--accent-money, #10b981); }
.kpi-item.count::after { background: var(--accent-count, #3b82f6); }
.kpi-item.time::after  { background: var(--accent-time, #8b5cf6); }
.kpi-item.alert::after { background: var(--accent-alert, #f59e0b); }
.kpi-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.kpi-item.money .kpi-icon { background: rgba(16,185,129,0.15); color: var(--accent-money, #10b981); }
.kpi-item.count .kpi-icon { background: rgba(59,130,246,0.15); color: var(--accent-count, #3b82f6); }
.kpi-item.time .kpi-icon  { background: rgba(139,92,246,0.15); color: var(--accent-time, #8b5cf6); }
.kpi-item.alert .kpi-icon { background: rgba(245,158,11,0.15); color: var(--accent-alert, #f59e0b); }
.kpi-info { flex: 1; min-width: 0; }
.kpi-label { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.kpi-value { font-size: 26px; font-weight: 800; color: white; line-height: 1.1; letter-spacing: -0.5px; }
.kpi-secondary { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 6px; line-height: 1.4; }
.kpi-secondary strong { color: rgba(255,255,255,0.7); font-weight: 700; }

.charts-area { padding: 20px 0; background: transparent; }
.charts-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; grid-auto-rows: minmax(80px, auto); }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.rows-2  { grid-row: span 2; }
.rows-3  { grid-row: span 3; }

.chart-card {
    background: var(--surface-card, var(--c-bg-card)); border-radius: 14px;
    box-shadow: 0 1px 3px rgba(var(--c-primary-rgb),0.06), 0 1px 2px rgba(var(--c-primary-rgb),0.04);
    overflow: hidden; transition: all 0.3s ease; position: relative;
    border: 1px solid rgba(0,0,0,0.04); display: flex; flex-direction: column;
}
.chart-card:hover { box-shadow: 0 4px 16px rgba(var(--c-primary-rgb),0.08), 0 2px 4px rgba(var(--c-primary-rgb),0.04); transform: translateY(-2px); }
.chart-card-header { padding: 16px 20px 8px; display: flex; align-items: flex-start; justify-content: space-between; }
.chart-card-title { font-size: 14px; font-weight: 700; color: var(--navy-800, var(--c-primary)); line-height: 1.3; }
.chart-card-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.chart-card-badge.bar   { background: #eff6ff; color: #3b82f6; }
.chart-card-badge.line  { background: #f5f3ff; color: #8b5cf6; }
.chart-card-badge.pie   { background: #ecfdf5; color: #10b981; }
.chart-card-badge.table { background: #f1f5f9; color: #64748b; }
.chart-card-body { padding: 8px 20px 16px; min-height: 220px; display: flex; align-items: center; justify-content: center; flex: 1; cursor: pointer; }
.chart-card-body:hover { opacity: 0.92; }
.chart-card-body > div { width: 100%; height: 100%; }

.chart-insight-block { padding: 10px 20px 14px; border-top: 1px solid #f1f5f9; display: flex; gap: 10px; align-items: flex-start; }
.chart-insight-icon { width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #fef3c7, #fde68a); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.chart-insight-icon i { font-size: 11px; color: #d97706; }
.chart-insight-text { font-size: 12px; color: #64748b; line-height: 1.55; }

.table-mini { width: 100%; font-size: 12px; }
.table-mini thead th { padding: 8px 12px; font-weight: 600; color: var(--navy-700, var(--c-primary)); border-bottom: 2px solid #e2e8f0; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.table-mini tbody td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #475569; }
.table-mini tbody tr:hover { background: #f8fafc; }
.table-mini .mono { font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 600; }
.table-mini .positive { color: #10b981; }
.mini-bar { height: 6px; border-radius: 3px; background: #e2e8f0; overflow: hidden; min-width: 60px; }
.mini-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

.chart-menu-btn { width: 28px; height: 28px; border: none; background: transparent; border-radius: 6px; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.chart-menu-btn:hover { background: #f1f5f9; color: var(--navy-700, var(--c-primary)); }

.filter-bar { background: white; border: 1px solid #e2e8f0; border-radius: 10px; margin-top: 14px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-bar-label { font-size: 12px; font-weight: 600; color: var(--navy-700, var(--c-primary)); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.filter-chip { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: 500; color: #475569; cursor: pointer; transition: all 0.2s; }
.filter-chip:hover, .filter-chip.active { background: var(--navy-700, var(--c-primary)); color: white; border-color: var(--navy-700, var(--c-primary)); }
.filter-chip i { font-size: 11px; }
.filter-chip .filter-value { color: #3b82f6; font-weight: 600; }
.filter-chip.active .filter-value { color: #ffc800; }
.filter-clear { margin-left: auto; font-size: 11px; color: #94a3b8; cursor: pointer; text-decoration: underline; }
.filter-clear:hover { color: #ef4444; }

.spotlight-backdrop { position: fixed; inset: 0; background: rgba(10,22,40,0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9990; opacity: 0; pointer-events: none; display: none; transition: opacity 0.35s ease; cursor: pointer; }
.spotlight-backdrop.active { opacity: 1; }
.spotlight-backdrop.closing { opacity: 0; pointer-events: none; }
.spotlight-chart { position: fixed; z-index: 9991; background: var(--surface-card, var(--c-bg-card)); border-radius: 16px; box-shadow: 0 20px 60px rgba(10,22,40,0.35), 0 0 0 1px rgba(255,255,255,0.1); overflow: hidden; display: none; transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); transform: scale(0.85); opacity: 0; }
.spotlight-chart.active { transform: scale(1); opacity: 1; }
.spotlight-chart.closing { transform: scale(0.85); opacity: 0; }
.spotlight-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: linear-gradient(135deg, var(--navy-900, color-mix(in srgb, var(--c-primary) 60%, black)), var(--navy-700, var(--c-primary))); color: #fff; }
.spotlight-header h6 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.spotlight-header .spotlight-badge { font-size: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.15); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.spotlight-close { background: rgba(255,255,255,0.12); border: none; color: #fff; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.spotlight-close:hover { background: rgba(255,255,255,0.25); }
.spotlight-body { padding: 16px 24px 20px; position: relative; }
.spotlight-body > div { width: 100%; height: 420px; }
.spotlight-hint { text-align: center; padding: 0 24px 14px; font-size: 11px; color: #94a3b8; display: flex; align-items: center; justify-content: center; gap: 6px; }
.spotlight-hint i { font-size: 13px; color: #3b82f6; }
.spotlight-detail { position: absolute; z-index: 9992; background: var(--surface-card, var(--c-bg-card)); border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 8px 30px rgba(10,22,40,0.18); padding: 16px 20px; min-width: 280px; max-width: 520px; max-height: 70vh; overflow-y: auto; animation: detailPop 0.25s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: auto; }
@keyframes detailPop { from { opacity: 0; transform: translateY(8px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.spotlight-detail-title { font-size: 14px; font-weight: 700; color: var(--navy-800, var(--c-primary)); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.spotlight-detail-title .color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.spotlight-detail-value { font-size: 24px; font-weight: 800; color: var(--navy-900, var(--c-primary)); margin-bottom: 6px; letter-spacing: -0.5px; }
.spotlight-detail-meta { font-size: 12px; color: #64748b; line-height: 1.5; }
.spotlight-detail-meta .pct { display: inline-block; padding: 2px 8px; border-radius: 12px; font-weight: 600; font-size: 11px; }
.spotlight-detail-close { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 12px; padding: 4px; }
.spotlight-detail-close:hover { color: var(--navy-700, var(--c-primary)); }
@keyframes pieEmphasis { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }

@media (max-width: 1200px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } .span-4, .span-5 { grid-column: span 6; } .span-7, .span-8 { grid-column: span 12; } }
@media (max-width: 768px) {
    .kpi-strip { grid-template-columns: 1fr; }
    .charts-grid { grid-template-columns: 1fr; }
    .span-4, .span-5, .span-7, .span-8, .span-12 { grid-column: span 1; }
    .dash-header { padding: 16px; }
    .dash-header-top { flex-direction: column; gap: 10px; align-items: flex-start; }
    .dash-title { font-size: 18px; }
    .charts-area { padding: 16px; }
    .filter-bar { padding: 12px 16px; }
    .kpi-item { padding: 14px; }
    .kpi-value { font-size: 22px; }
    .dash-actions { flex-wrap: wrap; }
    .dash-actions button { padding: 6px 10px; font-size: 11px; }
    .spotlight-chart { left: 2vw !important; top: 2vh !important; width: 96vw !important; height: 90vh !important; border-radius: 10px; }
    .spotlight-header { padding: 12px 16px; }
    .spotlight-header h6 { font-size: 13px; }
    .spotlight-body { padding: 10px 12px 14px; }
    .spotlight-body > div { height: 260px; }
    .spotlight-hint { font-size: 10px; padding: 0 12px 10px; }
    .spotlight-detail { min-width: 200px; max-width: 280px; padding: 12px 14px; }
    .spotlight-detail-value { font-size: 20px; }
    .spotlight-detail-title { font-size: 13px; }
}
@media (max-width: 480px) {
    .dash-header { padding: 12px; }
    .dash-title { font-size: 15px; }
    .spotlight-chart { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }
    .spotlight-body > div { height: 220px; }
    .spotlight-detail { position: fixed !important; left: 5vw !important; right: 5vw !important; bottom: 10px !important; top: auto !important; min-width: auto; max-width: none; width: auto; max-height: 45vh; border-radius: 14px; box-shadow: 0 -4px 30px rgba(10,22,40,0.25); }
}

/* ─── Utility text color aliases ─── */
.text-theme-accent { color: var(--c-accent) !important; }

/* ═══════════════════════════════════════════════════════════════
   CONTRASTE DE LAS INSIGNIAS DE ESTADO
   ═══════════════════════════════════════════════════════════════

   `main.css` define `.badge-success` con `color: #22af46` sobre fondo
   transparente. Sobre el blanco de una tabla eso da **2,88:1**, abajo del 4,5
   que hace falta para texto normal — medido en la solapa Perfiles el 2026-09-08,
   y la insignia «Sí» de la columna Activo es justo texto chico.

   Se corrige acá y no en `main.css` por dos razones: esta hoja carga DESPUÉS
   (`base.html:25` y `:28`) así que alcanza con redefinir el color, y `main.css`
   es la hoja del tema — tocarla mezcla lo propio del proyecto con lo heredado.

   El color NO se inventa: es `--c-success-text`, que el tema ya declara y
   documenta como «texto sobre fondo verde claro» (#155724 → **8,7:1** sobre
   blanco). El borde se deja en el verde de marca, así que la insignia se sigue
   viendo igual de verde y sólo el texto pasa a leerse.

   **Alcance: las 5 apariciones del proyecto**, no sólo la pantalla nueva —
   `gestion_usuarios.html` (2), `parametros_administracion.html` (2) y
   `servicios_web/registro_civil.html` (1). Arreglarlo sólo en la tabla nueva
   habría dejado dos insignias «Sí» distintas en pantallas vecinas.
   ═══════════════════════════════════════════════════════════════ */
.badge-success { color: var(--c-success-text); border-color: var(--c-success); }

/* ═══════════════════════════════════════════════════════════════
   DOS ARREGLOS QUE SON DEL TEMA, NO DE UNA PANTALLA
   ═══════════════════════════════════════════════════════════════ */

/* 1 · La casilla INDETERMINADA no estaba tematizada.
 *
 * `theme-config.css` tematiza `.form-check-input:checked` con el token, pero
 * `main.css:2430` deja `:indeterminate` con **#0d6efd escrito a mano** —el azul
 * de Bootstrap— y nada lo sobrescribe. El estado indeterminado lo estrena la
 * solapa Perfiles (la casilla de grupo cuando algunos de sus permisos están
 * elegidos), así que el hueco nunca se había visto: quedaban DOS AZULES
 * compitiendo, el institucional en los ítems y el de Bootstrap en el grupo.
 *
 * Y lo que lo hace un defecto y no un detalle: **sobrevive al cambio de
 * paleta**, que es exactamente lo que la regla del token viene a evitar. */
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}

/* 2 · El «volver arriba» global tapaba la acción principal de los modales.
 *
 * `base.html` lo pone con `z-index: 9999` (arriba, :1944) contra el `1055` del
 * modal, así que **flota por encima de todos los modales del proyecto**. Medido:
 * a 390 px `elementFromPoint` sobre la esquina del botón «Guardar» devolvía
 * `btnScrollTop`, no el botón.
 *
 * Es deuda preexistente, pero la solapa Perfiles es la que pone su acción
 * principal ahí abajo, y el arreglo correcto no es acotarlo a esta pantalla:
 * mientras un modal está abierto, un control para scrollear la página de atrás
 * no tiene ningún sentido. `body.modal-open` lo pone Bootstrap solo. */
body.modal-open #btnScrollTop { display: none !important; }

/* =====================================================
   EL PIE DE TOTALES EN EL TELEFONO
   ===================================================== */

/* `arquetipos-datatables.css` oculta la tabla entera abajo de 768 px y arma
   tarjetas — y el `<tfoot>` con el total va ADENTRO de esa tabla, asi que
   desaparecia. Antes de que hubiera tarjetas ese total se alcanzaba scrolleando
   de costado; con las tarjetas quedaba directamente invisible, que es peor: un
   reporte sin su total es otro reporte.

   Medido el 2026-09-08: 8 de los 15 reportes tienen `<tfoot>`. Se vuelve a
   mostrar SOLO el pie, como una linea al final de las tarjetas.

   El `:has(> tfoot)` es lo que hace que esto no toque las tablas SIN pie: sin
   el, `display: block` sobre cualquier tabla de la pantalla le pelearia al
   puente por nada. Va aca y no en `arquetipos-datatables.css` a proposito: ese
   archivo lo siembra el plugin y `--sembrar` lo sobreescribe. */
@media (max-width: 768px) {
    .arq-dt table.dataTable:has(> tfoot) { display: block; }

    /* Y el pie va DESPUES de las tarjetas, no antes: el puente inserta la vista
       movil con `$tabla.after(...)`, asi que en el DOM la tabla -y su pie- van
       primero, y un total arriba de los datos que resume se lee como un titulo.
       Los dos son hermanos, pero el padre NO es el `.card-body` ni el
       `.dataTables_wrapper`: la integracion bootstrap4 de DataTables anida
       `wrapper > .row > .col-sm-12 > table`, y `after()` deja la vista movil
       adentro de ese `col`. Medido en el DOM despues de que apuntarle al
       `.card-body` y al wrapper no cambiara nada — un `order` sobre un padre
       `display: block` se ignora y no avisa. */
    .arq-dt .dataTables_wrapper .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }
    .arq-dt table.dataTable:has(> tfoot) { order: 2; }
    .arq-dt .vista-mobile { order: 1; }

    .arq-dt table.dataTable:has(> tfoot) > thead,
    .arq-dt table.dataTable:has(> tfoot) > tbody,
    .arq-dt table.dataTable:has(> tfoot) > caption { display: none; }

    .arq-dt table.dataTable > tfoot { display: block; }

    /* El pie en una sola linea que envuelve: hay pies de una celda
       (`Total: 12 embargos`) y pies de cinco (`Total` + los importes). Con
       `flex-wrap` los dos casos entran sin desbordar. */
    .arq-dt table.dataTable > tfoot tr {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        padding: 10px 12px;
        border-top: 1px solid var(--c-border);
        background: var(--c-bg-subtle);
    }

    .arq-dt table.dataTable > tfoot th,
    .arq-dt table.dataTable > tfoot td {
        display: block;
        border: 0;
        padding: 0;
        text-align: left;
        background: transparent;
    }
}

/* =====================================================
   SOLAPAS Y PAGINADO EN EL TELEFONO
   ===================================================== */

/* Ninguno de los dos entra en 390 px, y no desbordaban "un poco": empujaban el
   documento a 405-456 px, o sea scroll horizontal en TODA la pantalla y no solo
   en el control. Medido el 2026-09-08 en `parametros_administracion`: los
   `li.nav-item` de las solapas iban de 377 a 871 px, y el paginado completo
   -Primero / Anterior / 1..4 / Siguiente / Ultimo- se salia por los DOS lados
   (izq=-66, der=456).

   Los dos se resuelven como lo pide el CLAUDE.md: el contenido ancho scrollea
   DENTRO de su propio contenedor. La barra de solapas scrollea de costado —una
   barra de 8 solapas no se puede apilar sin perder de vista cual esta activa— y
   el paginado, que son botones independientes, simplemente envuelve. */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Sin esto los items se comprimen hasta ilegibles en vez de scrollear */
    .nav-tabs .nav-item { flex: 0 0 auto; }

    /* La barra de scroll de las solapas se esconde: es un gesto tactil, y la
       barra visible arriba de la primera fila de contenido se lee como un borde
       roto. El scroll sigue funcionando. */
    .nav-tabs::-webkit-scrollbar { height: 0; }

    .dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =====================================================
   LA PILDORA NEUTRA — PARA LAS ETIQUETAS DE TIPO
   ===================================================== */

/* `.arq-pill` sola es solo la FORMA: no define fondo ni color, asi que una
   etiqueta suelta queda como texto pelado. Y las tres variantes del puente son
   SEMANTICAS —`-ok`, `-wa`, `-no` dicen algo del estado—, asi que ninguna sirve
   para una etiqueta de TIPO.

   Y esa distincion es la que faltaba. Un tipo no es un estado: entre «Litis»,
   «Judicial» y «Comercial» no hay uno mejor ni uno urgente. Pintarlos de azul,
   celeste y amarillo —como estaban— gasta tres colores de la paleta para decir
   nada, y despues, cuando algo de verdad hay que mirar, ya no queda contraste
   con que decirlo. Eso es exactamente lo que el arquetipo evita.

   `-tipo` es la pildora neutra: la misma forma, el gris del sistema, sin carga.
   Va en este archivo y no en `arquetipos.css` porque ese lo siembra el plugin y
   `--sembrar` lo sobreescribe. Usa los mismos tokens que las otras tres
   (`arquetipos.css` mapea `--soft: var(--c-bg-subtle)`, `--line: var(--c-border)`). */
.arq-pill-tipo {
    background: var(--c-bg-subtle);
    color: var(--c-text);
    box-shadow: inset 0 0 0 1px var(--c-border);
}

/* =====================================================
   LOS ALIAS DEL ARQUETIPO, TAMBIEN EN :root
   ===================================================== */

/* `arquetipos.css` declara sus 11 alias locales (`--soft`, `--navy`, `--warn`…)
   sobre `.arq`, `.arq-dt`, `.modal` y `.swal2-container`, NO sobre `:root`. Con
   eso una `.arq-pill` adentro de una tabla `arq-dt` se ve bien, y la MISMA
   pildora en un titulo, en una solapa o en un parrafo queda sin fondo: `var(--soft)`
   no resuelve a nada, la regla entera se descarta y el texto sale suelto. No da
   ningun error, y es exactamente lo que paso al bajar los badges de
   `novedades/exportar`, `reportes/index`, los tres de `procesos` y los contadores
   de las solapas — medido: `fondo=rgba(0, 0, 0, 0)`.

   Se declaran aca, en `:root`, para que la pildora funcione en cualquier parte de
   la pantalla. NO se toca `arquetipos.css`: ese archivo lo siembra el plugin y
   `--sembrar` lo sobreescribe.

   Y no arrastra nada: lo unico que se copia son las VARIABLES. Las reglas que
   `arquetipos.css` deja atadas a `.arq` a proposito —el `color: var(--text)`
   heredado, sobre todo— siguen atadas ahi, que es el motivo por el que el
   comentario de ese archivo eligio no globalizarlas. Su propia frase lo dice:
   «una variable que nadie usa no molesta; un `color` heredado si». */
:root {
    --navy: var(--c-primary);
    --navy2: var(--c-primary-light);
    --navy-dark: var(--c-primary-dark);
    --accent: var(--c-accent);
    --accent-dark: var(--c-accent-dark);
    --line: var(--c-border);
    --soft: var(--c-bg-subtle);
    --muted: var(--c-muted);
    --text: var(--c-text);
    --warn: var(--c-warning-text);
    --paper: var(--c-bg-card);
}

/* =====================================================
   LA TABLA ANCHA EN ESCRITORIO
   ===================================================== */

/* Arriba de 768 px no hay tarjeta —la tarjeta ES el modo movil— asi que una tabla
   de muchas columnas no tiene donde ir: empuja el documento y aparece scroll
   horizontal en TODA la pantalla. Medido el 2026-09-08 en
   `reportes/cruce_litis_noveda`, que tiene 13 columnas: la tabla mide 1476 px y
   llevaba el documento a 1760 en una ventana de 1440.

   Se resuelve como lo pide el CLAUDE.md: el contenido ancho scrollea DENTRO de su
   propio contenedor. Y esto NO es el `table-responsive` que el contrato prohibe,
   aunque el efecto en escritorio se parezca: lo prohibido era usarlo COMO
   REEMPLAZO de la tarjeta de movil —comprimir la tabla en el telefono en vez de
   cambiarla por tarjetas—. Abajo de 768 px la tabla esta oculta y esta regla no
   hace nada; arriba, donde la tarjeta no existe ni corresponde, el scroll dentro
   del contenedor es la respuesta correcta.

   Va en los DOS envoltorios que DataTables puede armar, porque no siempre arma
   el mismo: con la integracion bootstrap4 anida `wrapper > .row > .col-sm-12 >
   table`, pero con `dom: 't'` -que usa `cruce_litis_noveda` para no dibujar el
   buscador ni el paginado- el `.row` NO existe y el padre es el wrapper. Apuntar
   solo al `col` dejaba justamente a la pantalla mas ancha del sistema sin
   arreglar; medido en el navegador, no deducido.

   `overflow-x: auto` establece un contexto que tambien recorta en vertical (CSS
   computa `overflow-y: visible` a `auto` cuando el otro eje no lo es). Verificado
   antes de poner esto: NINGUNA de las plantillas con `arq-dt` tiene un
   `dropdown-menu` adentro de la tabla, asi que no hay nada que se pueda cortar. Si
   alguna lo agrega, hay que revisarlo. */
@media (min-width: 769px) {
    /* El `:not(:has(> .row))` es lo que hace que esto NO rompa las demas tablas,
       y se agrego el 2026-09-09 despues de que la primera version SI las rompiera.
       Vale la pena escribir por que, porque el sintoma no señalaba la causa:
       aparecio una barra de scroll horizontal en TODAS las tablas, incluidas las
       que entran de sobra.

       El motivo: la integracion bootstrap4 de DataTables mete una `.row` adentro
       del wrapper, y una `.row` de Bootstrap tiene MARGENES NEGATIVOS de 12 px a
       cada lado -son sus gutters-, asi que sobresale de su contenedor por diseno.
       Un contenedor con `overflow-x: auto` alrededor de eso scrollea SIEMPRE, sin
       ninguna relacion con el ancho de la tabla.

       Medido: el exceso era de 12 px exactos en las cinco pantallas revisadas
       -1090/1102, 740/752, 700/712, 1122/1134, 1084/1096-, o sea el margen, no la
       tabla. Y la unica con exceso real era `cruce_litis_noveda`: 1122 contra
       1476, sus 13 columnas.

       Esa pantalla usa `dom: 't'`, que NO arma la `.row`. Asi que la condicion
       «el wrapper no contiene una `.row`» selecciona exactamente el caso que
       necesitaba el scroll y descarta los que no. */
    .arq-dt .dataTables_wrapper:not(:has(> .row)),
    .arq-dt .dataTables_wrapper .row > [class*="col-"] {
        overflow-x: auto;
    }
}