:root {
    /* Color Palette - Light Theme (identidad Seguros SURA) */
    --primary: #0033A0;
    --primary-hover: #002277;
    --secondary: #00AEC7;
    --accent: #e3e829; /* Dorado/Amarillo SURA solicitado */

    /* Backgrounds */
    --background: #F8FAFC;
    --surface: rgba(255, 255, 255, 0.85);
    --surface-hover: rgba(255, 255, 255, 0.98);
    --border: rgba(0, 51, 160, 0.12); /* Borde sutil basado en primario */
    
    /* Text */
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    
    /* Semantic Colors */
    --success: #10B981;
    --danger: #EF4444;
    --warning: var(--accent);
    --info: var(--secondary);

    /* Effects */
    /* Blur reducido de 24px a 8px: backdrop-filter con radio alto obliga a recalcular
       continuamente todo lo que hay detrás del panel (sidebar, KPIs) en cada frame de
       scroll/animación. En equipos sin GPU dedicada (gráficos integrados) esto es la
       causa más común de lag general de la interfaz, no solo del panel en sí. */
    --glass-blur: blur(8px);
    --shadow: 0 4px 20px -2px rgba(0, 51, 160, 0.08);
    --shadow-hover: 0 10px 25px -5px rgba(0, 51, 160, 0.12);
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   ACCESIBILIDAD Y ESTADOS DE INTERACCIÓN (auditoría de UI)
   Antes: solo los <input>/<textarea>/<select> tenían estilo de foco visible; ningún
   botón, checkbox, link de menú o fila clicable lo tenía. Alguien navegando con
   teclado (Tab) no podía ver qué elemento estaba seleccionado. Se usa :focus-visible
   (no :focus) para no mostrar el anillo en clics de mouse, solo en navegación real
   por teclado — no cambia el look habitual de la app al usarla con mouse.
   ============================================ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Estado deshabilitado consistente para TODOS los botones (antes solo existía
   para .btn-danger; el resto de botones deshabilitados —ej. "Guardando...",
   "Subiendo...", export de PDF en curso— se veían igual que uno activo, sin
   ninguna señal visual de que no se podía volver a hacer clic). */
button:disabled,
.btn-action:disabled,
.icon-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.3);
}
button:disabled:hover,
.btn-action:disabled:hover,
.icon-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Red de seguridad para CUALQUIER <button> de la app (causa raíz #4 de la auditoría de
   clics: varios botones quedaron fuera de la ronda anterior de arreglos por no llevar las
   clases .icon-btn/.btn-action — los de la lista de Hallazgos/Acciones, el toggle del
   índice en Ejecución, paginación, el chevron de alcance...). Baja especificidad a
   propósito (selector de tipo, sin clase): las reglas .icon-btn/.btn-action/.cumplimiento-btn
   etc. de más abajo, con mayor especificidad, siguen ganando la cascada y no se tocan.
   "all" queda descartado: solo se anima lo que puede cambiar al presionar, nunca layout. */
button {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
    transition-duration: 0.12s;
    transition-timing-function: ease;
}
button:active {
    transform: scale(0.96);
}

body {
    font-family: 'Inter', sans-serif;
    background: radial-gradient(circle at top left, #F1F5F9, #E2E8F0);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}

/* Typography */
h1, h2, h3, h4 {
    font-weight: 600;
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Antes "Glassmorphism Utilities": usaba backdrop-filter (blur en tiempo real de lo que
   hay detrás del panel). Es de las operaciones más caras que existen en CSS, y en equipos
   sin GPU dedicada (gráficos integrados) el costo recae sobre el mismo CPU — el sidebar
   permanece visible todo el tiempo que la app está abierta, así que su costo era continuo.
   Se reemplaza por un fondo sólido casi opaco: mismo look general, cero costo de desenfoque. */
.glass-panel {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 16px;
    transition: var(--transition);
}
.glass-panel:hover {
    box-shadow: var(--shadow-hover);
}

/* Layout */
#app {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    /* pointer-events aparte de la transición (a propósito, ver nota en .modal-overlay más
       abajo): así deja de aceptar clics DE INMEDIATO al cerrar, en vez de esperar a que
       termine el fundido y seguir tapando invisible-pero-clicable la pantalla de debajo. */
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    display: flex;
}
.screen.active {
    pointer-events: auto;
}

.screen.active {
    opacity: 1;
    visibility: visible;
}

/* Connection Screen */
#connection-screen {
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.connection-box {
    text-align: center;
    padding: 3rem;
    max-width: 500px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border);
    backdrop-filter: var(--glass-blur);
    transform: translateY(20px);
    animation: slideUp 0.6s ease forwards;
}

.connection-box h1 {
    font-size: 2rem;
    margin: 1rem 0 0.5rem;
    color: var(--primary);
}

.connection-box .subtitle {
    margin: 1.5rem 0 2rem;
    font-size: 0.95rem;
}

/* Mensaje de la pantalla de conexión: vacío no ocupa espacio. */
.connection-message {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 1.25rem 0 0;
}

.connection-message:empty {
    display: none;
}

.connection-message.error {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    color: #991B1B;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    text-align: left;
}

.icon-container {
    display: inline-flex;
    padding: 1.5rem;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
    margin-bottom: 1rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.brand-logo {
    max-width: 220px;
    width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
}

/* Buttons */
.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    /* Antes: transition: all (var(--transition)) — mismo caso que .icon-btn/.btn-action. */
    transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 4px 15px rgba(0, 51, 160, 0.25);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 51, 160, 0.35);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 51, 160, 0.25);
}

/* Main Layout */
#main-layout {
    padding: 1.5rem;
    gap: 1.5rem;
    transition: padding 0.2s ease, gap 0.2s ease;
}

.sidebar {
    width: 280px;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    height: calc(100vh - 3rem);
    transition: transform 0.3s ease, width 0.3s ease, height 0.2s ease, border-radius 0.2s ease;
}

/* Modo de pantalla completa: aplica a todos los módulos, sin márgenes/gaps inútiles. */
body.view-fullbleed #main-layout {
    padding: 0;
    gap: 0;
}
body.view-fullbleed .sidebar {
    height: 100vh;
    border-radius: 0;
}
body.view-fullbleed .content-area {
    height: 100vh;
}
body.view-fullbleed .view {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.sidebar.collapsed {
    transform: translateX(-120%);
    position: absolute;
    /* Un sidebar colapsado (oculto) no debe capturar clics. Sin esto, durante los 0.3s que
       tarda en deslizarse hacia afuera (transition: transform) sigue estando encima de la
       zona donde aparece el botón flotante "Mostrar menú", y un clic hecho en ese instante
       lo captura el sidebar en vez del botón — el síntoma de "a veces necesita dos clics".
       Con pointer-events: none el clic siempre pasa al botón, esté o no terminando la
       animación. Al expandirse (sin .collapsed) el sidebar vuelve a capturar normalmente. */
    pointer-events: none;
}

/* Botón flotante para mostrar sidebar */
.btn-show-sidebar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 100;
    background: var(--primary);
    color: white;
    border: none;
    padding: 1.2rem 0.5rem;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    box-shadow: 2px 0 15px rgba(0, 51, 160, 0.25);
    /* Antes: transition: all (var(--transition)). En la práctica ya quedaba corregido en
       cascada por .icon-btn (misma especificidad, declarada después en el archivo — este
       botón lleva ambas clases), pero se deja explícito aquí para no depender del orden. */
    transition: background-color 0.12s ease, padding-left 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.btn-show-sidebar:hover {
    background: var(--primary-hover);
    padding-left: 0.8rem;
}

/* Contenedor de la esquina superior izquierda: agrupa "Volver" y Deshacer/Rehacer en una
   sola fila flex, para que no se superpongan sin importar cuál de los dos esté visible
   (el botón "Volver" se oculta/muestra según el historial de navegación, ver AppNav en
   app.js; Deshacer/Rehacer no depende de eso, ver modules/undo-manager.js). */
.top-left-controls {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* En vistas fullbleed con .audit-topbar (Ejecución/Detalle de auditoría) ese topbar ocupa
   la misma esquina superior izquierda con su propio botón (el "hamburguesa" que
   muestra/oculta el índice) y tiene menor z-index (20) que estos controles (90): sin este
   ajuste, la caja de Volver/Deshacer/Rehacer queda flotando ENCIMA del topbar y se queda
   con los clics dirigidos a ese botón, aunque visualmente parezca que el clic "no hizo
   nada". 4.75rem baja los controles por debajo de la altura real del topbar (~4.5rem con
   su padding + botones de 2.2-2.6rem). */
body.view-fullbleed .top-left-controls {
    top: 4.75rem;
    left: 1.25rem;
}

/* Botón "Volver a la pantalla anterior": ya no se posiciona solo, es un hijo flex de
   .top-left-controls (ver arriba). */
.btn-app-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 51, 160, 0.25);
    /* Antes: transition: all (var(--transition)). Mismo caso que .btn-show-sidebar arriba:
       ya quedaba corregido en cascada por .icon-btn, se deja explícito por robustez. */
    transition: background-color 0.12s ease, transform 0.12s ease;
}

.btn-app-back:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

/* Controles de Deshacer/Rehacer: hijo flex de .top-left-controls, junto a "Volver". */
.undo-redo-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.undo-redo-status {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.undo-redo-status.visible {
    opacity: 1;
}


.logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.logo-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.brand-logo-sidebar {
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

.logo-container h2 {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    color: var(--primary);
}

.toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-btn:hover {
    background: rgba(0,0,0,0.05);
    color: var(--text-primary);
}

.nav-links {
    list-style: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}

.nav-link {
    display: block;
    padding: 0.875rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 12px;
    /* Antes: transition: all (var(--transition)) — mismo caso que .icon-btn/.btn-action.
       Son <a>, no <button>: la red de seguridad global de más arriba no los cubre. */
    transition: background-color 0.12s ease, color 0.12s ease;
    font-weight: 500;
}

.nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.nav-link:active {
    background: rgba(0, 0, 0, 0.09);
}

.nav-link.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 51, 160, 0.3);
    border-left: 4px solid var(--accent);
    padding-left: calc(1.25rem - 4px);
}

.connection-status {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
}

.status-indicator.online {
    background: var(--success);
    box-shadow: 0 0 10px var(--success);
}

.content-area {
    flex: 1;
    position: relative;
    height: calc(100vh - 3rem);
    transition: margin-left 0.3s ease;
}

.content-area.expanded {
    margin-left: 0;
}

.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    /* pointer-events fuera de la transición a propósito: la vista que se está ocultando
       deja de aceptar clics DE INMEDIATO, no cuando termina de desvanecerse (250ms
       después). Sin esto, las dos vistas quedan superpuestas y clicables durante ese
       tiempo al navegar, y el primer clic en la vista nueva puede "perderse" contra la
       vieja que sigue ahí encima/debajo — el efecto exacto de "necesita doble clic". */
    pointer-events: none;
    /* Antes: transition: all — aquí solo cambian opacity/visibility al navegar. */
    transition: opacity 0.25s ease;
    /* Sin backdrop-filter: este contenedor ES el área con scroll de cada vista
       (Municipios con 1.122 filas, la lista completa de criterios de auditoría, etc.).
       Blur + scroll sobre el mismo elemento obliga al navegador a mantener una capa
       compuesta y difuminada mientras se scrollea/renderiza contenido grande — el
       causante más probable del lag general de la app en equipos sin GPU dedicada.
       Se sube la opacidad del fondo para compensar visualmente la falta de blur. */
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    overflow-y: auto;
}

.view.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Mismo caso que .modal-overlay: se quita backdrop-filter (era blur(10px), más
       pesado aún) y se compensa subiendo la opacidad del fondo. */
    background: rgba(255,255,255,0.92);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    /* Mismo caso que .modal-overlay/.view: pointer-events fuera de la transición
       para no seguir bloqueando clics 300ms después de que termina de cargar. */
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#loading-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Form Elements */
input, select, textarea {
    color: var(--text-primary);
    background: white;
}
input::placeholder, textarea::placeholder {
    color: var(--text-secondary);
}

/* Accordion Styles */
.accordion-toggle.open .chevron { transform: rotate(180deg); }
.accordion-content .nav-link { font-size: 0.9rem; padding: 0.75rem 1rem; }

/* ============================================
   DATA TABLE STYLES
   ============================================ */
.module-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.module-header .header-info h2 {
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}
.module-header .header-info p {
    font-size: 0.85rem;
}
.module-header .header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    /* La transición real vive en la otra regla ".btn-action" más abajo (ver comentario
       ahí): esta la duplicaba con "all" (var(--transition)) y, aunque la de abajo gana en
       cascada por ir después, es confuso mantener dos declaraciones. Se deja sin
       transition aquí para que solo exista una fuente de verdad. */
}
.btn-add {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 51, 160, 0.25);
}
.btn-add:hover {
    background: var(--primary-hover);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 15px rgba(0, 51, 160, 0.35);
}
.btn-import {
    background: white;
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-import:hover {
    background: #F1F5F9;
    border-color: var(--primary);
    color: var(--primary);
}
.btn-edit {
    background: var(--accent);
    color: #1E293B; /* Dark text for contrast against bright yellow */
}
.btn-edit:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
}
.btn-save {
    background: var(--success);
    color: white;
}
.btn-save:hover {
    filter: brightness(1.1);
}
.btn-cancel {
    background: #E2E8F0;
    color: var(--text-primary);
}
.btn-cancel:hover {
    background: #CBD5E1;
}

/* Data Table */
.data-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 14rem);
    border-radius: 12px;
    border: 1px solid var(--border);
    background: white;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.data-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}
.data-table thead th {
    background: #F1F5F9;
    padding: 0.7rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.data-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.04);
    cursor: pointer;
    /* Antes: transition: all (obligaba a vigilar TODAS las propiedades animables
       en cada una de las filas, cientos/miles en tablas como Municipios). Se limita
       a background-color, la única propiedad que realmente cambia en el hover. */
    transition: background-color 0.15s ease;
}
.data-table tbody tr:hover {
    /* Antes: transform: scale()+translateX() y box-shadow inset en el hover — obligan
       a repintar/componer capa por fila al mover el mouse sobre una tabla grande.
       Un simple cambio de color logra el mismo feedback visual sin ese costo. */
    background: rgba(0, 174, 199, 0.09);
}
.data-table tbody td {
    padding: 0.65rem 0.75rem;
    color: var(--text-primary);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.record-count {
    font-size: 0.8rem;
    background: var(--primary);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 8px;
    font-weight: 500;
}

/* ============================================
   MODAL STYLES
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Antes tenía backdrop-filter: blur(4px) (ver .glass-panel más arriba: es de las
       operaciones más caras de CSS). Se anima la opacidad de este overlay en CADA
       apertura/cierre de modal —y esta app abre modales todo el tiempo (agregar/editar
       en cualquier tabla, hallazgos, acciones, evidencias...)— por encima de vistas que
       pueden tener cientos de tarjetas detrás (ejecución de auditoría). Se sube la
       opacidad del fondo oscuro para compensar visualmente y se quita el desenfoque. */
    background: rgba(15, 23, 42, 0.62);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    /* pointer-events fuera de "transition: all": con "all", el navegador retrasa el
       cambio de visibility (y por lo tanto la posibilidad de clic) hasta que TERMINA
       el fundido de 250ms al cerrar. Mientras tanto el overlay de pantalla completa
       sigue ahí, invisible pero capturando clics — si el usuario hace clic justo
       después de cerrar un modal, ese clic se pierde contra el overlay fantasma y
       parece que el botón de abajo "necesitó dos clics". Al sacar pointer-events de
       la transición, deja de capturar clics EN EL INSTANTE en que se cierra. */
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.modal {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    width: 95%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.25s ease;
}
.modal-overlay.active .modal {
    transform: translateY(0) scale(1);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 {
    font-size: 1.1rem;
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.25rem;
    line-height: 1;
    border-radius: 6px;
    /* Antes: transition: all (var(--transition)) — las instancias con clase .icon-btn
       adicional (table-ui.js) ya quedaban corregidas por esa regla, pero los cierres "×"
       de hallazgos.js (modules/hallazgos.js) solo llevan .modal-close y se quedaban con la
       transición lenta y sin :active. */
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.1s ease;
}
.modal-close:hover {
    background: #F1F5F9;
    color: var(--text-primary);
}
.modal-close:active {
    transform: scale(0.9);
    background: #E2E8F0;
}
.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
}

/* Modal Form Fields */
.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s;
    outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-group input[readonly] {
    background: #F8FAFC;
    color: var(--text-secondary);
}

/* Import Modal */
.import-instructions {
    background: #F1F5F9;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.import-instructions strong {
    color: var(--text-primary);
}
.import-paste-zone {
    width: 100%;
    height: 160px;
    padding: 1rem;
    border-radius: 10px;
    border: 2px dashed var(--primary);
    background: rgba(59, 130, 246, 0.03);
    color: var(--text-primary);
    resize: none;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
}
.import-paste-zone:focus {
    border-color: var(--primary-hover);
    background: rgba(59, 130, 246, 0.06);
}

/* Detail View - Key Value Pairs */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.detail-row {
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 0.6rem 0;
}
.detail-row:last-child {
    border-bottom: none;
}
.detail-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: 40%;
    flex-shrink: 0;
}
.detail-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    word-break: break-word;
}
.ref-code {
    color: var(--text-secondary);
    font-size: 0.85em;
}

/* Registros de otras tablas que referencian el que se está viendo en detalle. */
.detail-usedby {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.detail-usedby h4 {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}
.usedby-group {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.6rem;
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
}
.usedby-title {
    font-weight: 600;
    font-size: 0.82rem;
}
.usedby-list {
    margin: 0.3rem 0 0 1.1rem;
    padding: 0;
    font-size: 0.8rem;
}
.usedby-list li {
    margin-bottom: 0.15rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}
.empty-state svg {
    margin-bottom: 1rem;
    opacity: 0.4;
}

/* ============================================
   EJECUCIÓN DE AUDITORÍA — Árbol + Tarjetas
   ============================================ */

/* Esta vista va a bordes (sin el padding/borde/radio del resto de las vistas):
   la barra superior y los dos paneles ocupan todo el content-area, cada panel
   con su propio scroll independiente. */
#view-auditoria-ejecucion {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
}

.audit-topbar {
    flex-shrink: 0;
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 20;
}
.btn-menu-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: none;
    background: rgba(0, 174, 199, 0.1);
    color: var(--primary);
    cursor: pointer;
    /* Antes: transition: all (var(--transition)) — mismo caso que .icon-btn/.btn-action:
       botón muy usado (toggle del índice en Ejecución) que se quedó fuera de esa ronda. */
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-menu-toggle:hover {
    background: var(--secondary);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 174, 199, 0.3);
}
.btn-menu-toggle:active {
    transform: scale(0.93);
    box-shadow: none;
}
.audit-topbar-info {
    flex: 1;
    min-width: 0;
}
.audit-topbar-info h2 {
    font-size: 1.25rem;
    margin-bottom: 0.15rem;
}
.audit-topbar-info p {
    font-size: 0.82rem;
}
.audit-topbar-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
#btn-save-audit {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-secondary);
    cursor: default;
}
#btn-save-audit.is-dirty {
    background: var(--warning);
    color: #1E293B; /* Mejor contraste contra el fondo amarillo */
    font-weight: 600;
    cursor: pointer;
    animation: save-pulse 1.6s ease-in-out infinite;
}
#btn-save-audit.is-dirty:hover {
    filter: brightness(0.95);
}
@keyframes save-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(227, 232, 41, 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(227, 232, 41, 0); }
}

.split-view {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

/* Cada panel maneja su propio scroll vertical, independiente uno del otro. */
.tree-panel {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    min-width: 0;
    height: 100%;
    border-right: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.4);
}
.tree-panel.collapsed {
    display: none;
}

/* Divisor arrastrable entre el índice y las tarjetas: amplía/reduce el panel a voluntad. */
.tree-resizer {
    flex: 0 0 5px;
    cursor: col-resize;
    background: transparent;
    position: relative;
}
.tree-resizer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 1px;
    background: var(--border);
}
.tree-resizer:hover::after,
.tree-resizer:active::after {
    left: 1px;
    width: 3px;
    background: var(--primary);
}

.tree-panel-header {
    flex-shrink: 0;
    margin-bottom: 0.75rem;
}
.tree-panel-header h3 {
    font-size: 1rem;
}

#tree-container {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.cards-panel {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

#criteria-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Títulos/subtítulos de sección en la vista de calificación, imitando la
   estructura de la norma (Grupo > Estándar > Capítulo > Subtítulo > Categoría). */
.cards-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.cards-section-title {
    margin: 0;
    /* Gris mientras falten criterios por calificar; pasa a negro (.is-complete) cuando
       todos los criterios/subcriterios de esta jerarquía ya fueron marcados. */
    color: var(--text-secondary);
    font-weight: 700;
    line-height: 1.3;
    transition: color 0.2s ease;
}
.cards-section.is-complete > .cards-section-title {
    color: var(--text-primary);
}
.cards-section-grupo > .cards-section-title {
    font-size: 1.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--primary);
}
.cards-section-estandar > .cards-section-title {
    font-size: 1.05rem;
}
.cards-section-capitulo > .cards-section-title {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cards-section-subcapitulo > .cards-section-title {
    font-size: 0.88rem;
    font-style: italic;
    font-weight: 600;
}
.cards-section-categoria > .cards-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.85;
}
.cards-section[data-depth="0"] {
    margin-top: 0;
}

/* Árbol */
.tree-group {
    margin-bottom: 2px;
}
.tree-group-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem 0.15rem 0.15rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}
/* La flecha expande/contrae; el resto de la fila navega hasta el segmento en las tarjetas. */
.tree-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    transition: transform 0.15s ease;
    color: var(--text-secondary);
    font-size: 0.75em;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
}
.tree-chevron:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}
.tree-chevron.open {
    transform: rotate(90deg);
}
.tree-group-main,
.tree-leaf-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    padding: 0.25rem 0.25rem;
    border-radius: 6px;
}
.tree-group-main:hover,
.tree-leaf-main:hover {
    background: rgba(59, 130, 246, 0.06);
}
.tree-group-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.tree-group-label.is-complete {
    color: var(--text-primary);
}
.tree-group-count {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.tree-group-body {
    padding-left: 1rem;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    margin-left: 0.6rem;
}
.progress-ring {
    flex-shrink: 0;
}

.tree-leaf {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 400;
}
.tree-leaf:hover {
    background: rgba(59, 130, 246, 0.06);
}
.tree-leaf-icon {
    flex-shrink: 0;
    font-size: 0.85em;
}
.tree-leaf-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-leaf-sub {
    opacity: 0.9;
}
.tree-group-criterio > .tree-group-header {
    font-weight: 400;
}
.tree-subcriterios {
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
}

/* Tarjetas de criterio / subcriterio */
.criterion-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.criterion-card.sub {
    margin-left: 1.5rem;
    border-left: 3px solid rgba(59, 130, 246, 0.3);
}
.criterion-card.summary {
    background: #F8FAFC;
}
.criterion-card.card-highlight {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Una sola fila compacta: texto + botones de cumplimiento + evidencias.
   Las observaciones van debajo, a lo ancho, y solo ocupan una línea hasta que
   el usuario decide ampliarlas (resize: vertical). */
.card-main-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.card-crit-text {
    flex: 1 1 220px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-primary);
    min-width: 0;
}
.card-subtext {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.card-cumplimiento, .card-cumplimiento-locked {
    flex: 0 0 auto;
}

/* Botones Cumple / No Cumple / No Aplica: grises por defecto, toman el color e
   ícono del estado correspondiente en cuanto se marcan (mismo color que el índice). */
.cumplimiento-buttons {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.cumplimiento-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    /* transition: all (var(--transition)) obliga al navegador a vigilar TODAS las
       propiedades animables de este botón; con cientos de tarjetas de criterio pintadas
       a la vez (la vista de ejecución no pagina), eso se multiplica. Solo cambian
       background/border/color entre estados, así que se acota a esas 3 y se acelera. */
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}
.cumplimiento-btn:hover {
    background: rgba(148, 163, 184, 0.25);
}
/* Son los botones más clicados de toda la app (uno por criterio, decenas por auditoría) y
   no tenían NINGÚN feedback de :active — el cambio real (guardado, recálculo de KPIs) tarda
   lo suyo, así que sin esto el clic se sentía "no registrado". */
.cumplimiento-btn:active {
    transform: scale(0.94);
}
.cumplimiento-btn.btn-cumple.active {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.cumplimiento-btn.btn-nocumple.active {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.cumplimiento-btn.btn-noaplica.active {
    background: var(--info);
    border-color: var(--info);
    color: #fff;
}
.cumplimiento-btn-icon {
    font-size: 0.9em;
}
.card-obs-row {
    margin-top: 0.4rem;
}
.card-obs-row textarea {
    width: 100%;
    min-height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
    resize: vertical;
    font-family: inherit;
}
.card-evidence-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
}
.card-evidence-btn.has-evidence {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 700;
}
.evidence-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.evidence-open {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.evidence-open:hover {
    color: var(--primary-hover);
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-cumple { background: rgba(16, 185, 129, 0.12); color: #047857; }
.badge-nocumple { background: rgba(239, 68, 68, 0.12); color: #B91C1C; }
.badge-noaplica { background: rgba(59, 130, 246, 0.12); color: #1D4ED8; }
.badge-pending { background: rgba(148, 163, 184, 0.2); color: var(--text-secondary); }
.badge-sm {
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    white-space: nowrap;
}

/* Resalte breve al navegar desde el índice hasta un título de sección en las tarjetas. */
.section-highlight {
    animation: section-flash 1.2s ease;
}
@keyframes section-flash {
    0% { color: var(--primary); }
    100% { color: inherit; }
}

.evidence-panel {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
}
.evidence-upload {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.evidence-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.evidence-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}
.evidence-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85em;
    margin-left: auto;
    opacity: 0.7;
}
.evidence-delete:hover {
    opacity: 1;
}

/* ==========================================================================
   Módulo Auditoría — asistente de creación (sede buscable, servicios,
   estándares), vista de detalle/estadísticas y exportación PDF.
   ========================================================================== */

.modal-lg {
    max-width: 820px;
}
.modal-xl {
    max-width: 1180px;
    width: 95vw;
}
.modal-xl .modal-body {
    max-height: 75vh;
}

.scope-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0;
}
.scope-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: -0.15rem 0 0.5rem;
}

/* Combo buscable de Sede */
.sede-autocomplete {
    position: relative;
}
.sede-autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 50;
}
.sede-autocomplete-item {
    padding: 0.55rem 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.sede-autocomplete-item:hover {
    background: rgba(0, 61, 165, 0.06);
}
.sede-autocomplete-item span {
    color: var(--text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}
.sede-autocomplete-create {
    color: var(--primary);
    font-weight: 600;
    justify-content: flex-start;
}

/* Checklists de Servicios / Estándares: usados también por TableFilters (modules/table-filters.js)
   para las opciones de sus popovers de filtro, así que el estilo del ítem se mantiene genérico. */
.check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    cursor: pointer;
}
.check-item input {
    width: auto;
    flex: 0 0 auto;
}

/* Selector de alcance (Servicios/Estándares al crear o editar una auditoría): árbol
   jerárquico de un solo contenedor (sin "recuadros dentro de recuadros"); cada grupo es
   una fila con chevron + checkbox, y su contenido se indenta con una guía vertical en
   vez de anidar otra caja con borde. */
.scope-tree {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    background: rgba(0, 0, 0, 0.015);
}
.scope-tree-group {
    margin: 0.1rem 0;
}
.scope-tree-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
}
.scope-tree-group-header:hover {
    background: rgba(0, 0, 0, 0.03);
}
.scope-tree-group-header input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
}
.scope-tree-collapse {
    background: none;
    border: none;
    padding: 0;
    width: 1.4em;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.7rem;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.scope-tree-collapse.open {
    transform: rotate(90deg);
}
.scope-tree-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scope-tree-count {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.scope-tree-suggested-tag {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(0, 174, 199, 0.12);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.scope-tree-group-body {
    margin-left: 1.3rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
/* El atributo [hidden] por sí solo NO ganaba contra la regla de arriba (misma
   especificidad aproximada, y el orden en la hoja definía el ganador) — por eso
   colapsar un grupo no ocultaba realmente su contenido. */
.scope-tree-group-body[hidden] {
    display: none;
}
.scope-tree-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    padding: 0.25rem 0.35rem;
    cursor: pointer;
    border-radius: 6px;
}
.scope-tree-item:hover {
    background: rgba(0, 0, 0, 0.03);
}
.scope-tree-item input {
    width: auto;
    flex: 0 0 auto;
}
.scope-tree-empty {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.4rem 0.25rem;
}

/* Vista de Detalle / Estadísticas (pantalla completa) */
.detail-body {
    padding: 1.5rem 2rem;
}
.detail-group-block {
    margin-top: 0.5rem;
}
.detail-group-block:first-of-type {
    margin-top: 0.25rem;
}
.detail-group-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .stats-grid { grid-template-columns: 1fr; }
}
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.chart-card h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--text-primary);
}
.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.chart-card-header h3 {
    margin: 0;
}
.chart-card-header select {
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.82rem;
}
.chart-card canvas {
    max-height: 420px;
}

/* Botón de peligro (eliminar) */
.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover {
    filter: brightness(1.1);
}
.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Barra de búsqueda + filtros por encabezado en el listado de auditorías */
.audit-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.audit-search-input {
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    min-width: 280px;
    font-family: inherit;
}
.data-table thead th {
    position: relative;
}
.th-label {
    margin-right: 0.3rem;
}
.th-filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    font-size: 0.75rem;
    padding: 0 0.15rem;
}
.th-filter-btn:hover,
.th-filter-btn.is-active {
    opacity: 1;
    color: var(--primary);
}
.th-filter-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 0.6rem;
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.th-filter-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
.th-filter-actions button {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    cursor: pointer;
}
.th-filter-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.th-filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 160px;
    overflow-y: auto;
}

/* Buscador + botón "Filtros" universal (TableFilters, modules/table-filters.js),
   usado tanto por table-ui.js (tablas de referencia) como por dashboard.js. */
.tf-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.tf-search-input {
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    min-width: 260px;
    font-family: inherit;
}
.tf-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    font-size: 0.82rem;
    color: inherit;
}
.tf-filter-toggle-btn:hover,
.tf-filter-toggle-btn.is-open {
    border-color: var(--primary);
    color: var(--primary);
}
.tf-filter-toggle-btn.has-active {
    background: rgba(0, 174, 199, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}
.tf-clear-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
}
.tf-popover-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tf-text-filter-input,
.tf-option-search {
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 0.8rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.tf-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.tf-pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.tf-page-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    color: inherit;
}
.tf-page-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}
.tf-page-btn:disabled {
    opacity: 0.45;
    cursor: default;
}
.tf-date-tree {
    max-height: 220px;
    overflow-y: auto;
}
.tf-date-year,
.tf-date-month {
    margin-bottom: 0.15rem;
}
.tf-date-year-toggle,
.tf-date-month-toggle {
    font-weight: 600;
}
.tf-date-months {
    padding-left: 1rem;
}
.tf-date-days {
    padding-left: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.6rem;
}
.tf-date-day {
    min-width: 44px;
}

/* Vista de Detalle: información general y tarjetas KPI */
.detail-section {
    margin-bottom: 1.75rem;
}
.detail-section > h3 {
    margin: 0 0 1rem;
}
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.info-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
}
.info-value {
    font-size: 0.92rem;
    color: var(--text-primary);
}
.info-lists {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
@media (max-width: 900px) {
    .info-lists { grid-template-columns: 1fr; }
}

/* Estándares aplicados: botón "+ hallazgo" junto a cada estándar de la lista */
.detail-estandar-list {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.detail-estandar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.detail-estandar-add-hallazgo {
    flex: 0 0 auto;
    padding: 0.2rem;
    width: 1.6rem;
    height: 1.6rem;
}

/* Anexos del informe (REPS): fotos de soporte + observaciones generales */
.reps-anexos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .reps-anexos-grid { grid-template-columns: 1fr; }
}
.reps-anexo-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.reps-anexo-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kpi-row {
    display: flex;
    gap: 1rem;
}
.kpi-row .kpi-card {
    flex: 1;
    padding: 1.25rem;
    border-radius: 12px;
}
.kpi-value {
    font-size: 1.9rem;
    font-weight: bold;
    color: var(--primary);
}

/* Premium Action Buttons */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    /* Antes: transition: all 0.35s — cada clic tardaba 350ms en "subir" al hacer hover y
       otros 350ms en "bajar" al soltar (transform+box-shadow), lo que se sentía como que
       el botón no respondía de inmediato aunque el evento click ya se había disparado.
       Se acota a las 2 propiedades que realmente cambian y se acelera a 120ms. */
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    background-color: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 51, 160, 0.1);
}

.btn-action:active {
    transform: translateY(0);
}

.btn-save, .btn-import {
    background-color: var(--primary);
    color: white;
    border: none;
}

.btn-save:hover, .btn-import:hover {
    background-color: var(--primary-hover);
    color: white;
}

.btn-cancel {
    background-color: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
}

.btn-cancel:hover {
    background-color: #E2E8F0;
    color: #1E293B;
}

/* Stylized Table Icon Buttons */
.btn-table-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(0, 174, 199, 0.1);
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Antes: transition: all — mismo caso que .icon-btn/.btn-action (ver comentarios ahí):
       "all" hace que el navegador vigile todas las propiedades animables en cada clic. */
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-table-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-table-icon:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 51, 160, 0.2);
}

.btn-table-icon:active {
    transform: scale(0.95);
    box-shadow: none;
}

/* ============================================
   HALLAZGOS / ACCIONES (modules/hallazgos.js)
   ============================================ */

/* Botón de hallazgo en la tarjeta de criterio: gris/apagado por defecto, toma color de
   alerta (ámbar/verde) en hover o cuando ya tiene hallazgos ligados. */
.card-hallazgo-btn {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    cursor: pointer;
    /* Mismo caso que .cumplimiento-btn: se acota de "all" a lo que realmente cambia. */
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.card-hallazgo-btn:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: #F59E0B;
    color: #B45309;
}
.card-hallazgo-btn.has-hallazgo {
    background: rgba(245, 158, 11, 0.15);
    border-color: #F59E0B;
    color: #B45309;
}
.hallazgo-icon-warning {
    color: #F59E0B;
    opacity: 0.55;
    transition: opacity 0.2s;
}
.card-hallazgo-btn:hover .hallazgo-icon-warning,
.card-hallazgo-btn.has-hallazgo .hallazgo-icon-warning {
    opacity: 1;
}
.hallazgo-badge-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
}
.hallazgo-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: inherit;
}

/* Editor de texto enriquecido (contenteditable) usado en la descripción del Hallazgo */
.rte-wrapper {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.4rem;
    background: #F8FAFC;
    border-bottom: 1px solid var(--border);
}
/* Nota: existía una segunda regla ".rte-toolbar button" más abajo (junto a los estilos de
   icon-buttons) que ya pisaba el look de esta (transparente, sin borde, icon-only — así se
   ven realmente estos botones en pantalla). Se elimina esta versión duplicada/obsoleta: su
   único efecto real que sobrevivía era "transition: all" (var(--transition)), que por tener
   la MISMA especificidad que la otra regla y venir ANTES en el archivo, silenciosamente
   anulaba la transición rápida de .icon-btn en estos botones (bold/cursiva/lista/tabla/
   imagen del editor de hallazgos) sin que se notara en el resto de sus estilos. */
.rte-sep {
    width: 1px;
    background: var(--border);
    margin: 0 0.15rem;
}
.rte-content {
    min-height: 160px;
    max-height: 360px;
    overflow-y: auto;
    padding: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    outline: none;
}
/* Aplica a cualquier tabla dentro del editor/vista de hallazgos, no solo a las creadas con
   el botón "Insertar tabla" (.rte-table): al pegar desde Excel el HTML del portapapeles trae
   sus propias <table> sin esa clase, y sin bordes se veían como texto suelto. El
   normalizador de pegado (createRichEditor en hallazgos.js) además limpia los estilos
   en línea de borde que traen esas tablas, que si no ganarían sobre estas reglas. */
.rte-content-view table,
.rte-content table {
    border-collapse: collapse;
    margin: 0.5rem 0;
    max-width: 100%;
}
.rte-content-view table td, .rte-content-view table th,
.rte-content table td, .rte-content table th {
    border: 1px solid var(--border);
    padding: 0.3rem 0.5rem;
    min-width: 40px;
}
.rte-content-view table th,
.rte-content table th {
    background: #F1F5F9;
    font-weight: 600;
}
.rte-content-view img,
.rte-content img {
    max-width: 100%;
    border-radius: 6px;
}

/* Tarjetas de Hallazgo / Acción dentro de los modales de lista */
.hz-item, .acc-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
    background: #FAFBFC;
}
.hz-item-header, .acc-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.hz-item-title {
    font-size: 0.95rem;
    color: var(--text-primary);
}
.hz-item-actions, .acc-item-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.hz-item-actions .btn-action, .acc-item-actions .btn-action {
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
}
.hz-btn-acciones.has-items {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #B45309 !important;
}
.hz-item-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.acc-item-header {
    gap: 0.4rem;
}
.acc-item-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* Tabla ordenable / filtrable genérica (secciones de Hallazgos/Acciones en Detalle) */
.hz-table-toolbar {
    margin-bottom: 0.6rem;
}
.hz-filter-input {
    width: 100%;
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
}
.hz-filter-input:focus {
    border-color: var(--primary);
}
.hz-sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.hz-sortable-th:hover {
    color: var(--primary);
}
.hz-row-actions {
    white-space: nowrap;
}
.hz-mini-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    margin-right: 0.25rem;
}

/* Botón "Ver todos" bajo las tablas compactas (10 filas) de Hallazgos/Acciones en el
   Detalle de auditoría; abre la ventana flotante con la tabla completa y filtros. */
.hz-btn-vermas {
    display: block;
    margin: 0.75rem auto 0.25rem;
    font-size: 0.82rem;
    padding: 0.4rem 1rem;
}

/* Select de Estado editable directamente en la fila de la tabla de Acciones. */
.acc-inline-estado {
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background-color: #FEF3C7;
    color: #92400E;
}
.acc-inline-estado.is-cerrada {
    background-color: rgba(16, 185, 129, 0.15);
    color: #047857;
}

/* Icon Buttons minimalist design */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    width: auto;
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid transparent;
    /* Antes: transition: all 0.35s en el botón más usado de toda la app (casi todo es
       icon-btn desde la migración a íconos). Cambia background-color en hover y transform
       en :active (feedback de "presionado" inmediato, ver comentario en .icon-btn:active). */
    transition: background-color 0.12s ease, transform 0.1s ease;
    cursor: pointer;
}

.icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* .icon-btn no tenía estado :active: el único feedback al hacer clic era el efecto que
   producía la propia acción (navegar, abrir un modal...), que casi siempre tarda algo
   (render, lectura a disco). Sin una respuesta visual INMEDIATA al presionar, el clic se
   siente "no registrado" y es común volver a hacer clic — de ahí buena parte de la
   sensación de que estos botones "necesitan doble clic" aunque el primero sí funcionara.
   Con transform en la transición ya acotada (no "all"), este cambio es prácticamente gratis. */
.icon-btn:active {
    transform: scale(0.93);
    background-color: rgba(0, 0, 0, 0.08);
}
.icon-btn.btn-primary:active,
.icon-btn.btn-save:active,
.icon-btn.btn-danger:active,
.icon-btn.btn-cancel:active {
    filter: brightness(0.92);
}

.icon-btn.btn-primary {
    background-color: var(--primary);
    color: white;
}
.icon-btn.btn-primary:hover {
    background-color: var(--primary-hover);
}

.icon-btn.btn-save {
    background-color: var(--success);
    color: white;
}
.icon-btn.btn-save:hover {
    background-color: #059669; /* darker success */
}

.icon-btn.btn-danger {
    background-color: var(--danger);
    color: white;
}
.icon-btn.btn-danger:hover {
    background-color: #DC2626; /* darker danger */
}

.icon-btn.btn-cancel {
    background-color: #E2E8F0;
    color: var(--text-primary);
}
.icon-btn.btn-cancel:hover {
    background-color: #CBD5E1;
}

.icon-btn.btn-action, .icon-btn.btn-import, .icon-btn.btn-add, .icon-btn.btn-edit {
    padding: 0.5rem;
}

/* Make sure lucide icons scale correctly inside buttons */
.icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

.card-evidence-btn.icon-btn {
    width: auto;
    padding: 0.4rem;
}

/* Rich Text Editor Icon Buttons */
.rte-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-secondary);
}
.rte-toolbar button:hover {
    background: var(--border);
    color: var(--primary);
}
.rte-toolbar button svg {
    width: 1rem;
    height: 1rem;
}

/* Los íconos (lucide) dentro de cualquier botón/control no capturan el puntero: así el
   pointerdown y el pointerup siempre caen sobre el botón mismo, no sobre el <svg> interno.
   Es un blindaje contra clics perdidos si un ícono llegara a re-renderizarse justo entre
   presionar y soltar (ver el bucle de createIcons descrito en app.js). También evita que el
   :target del clic sea el <svg> en vez del botón, simplificando el manejo de eventos. */
button svg, button i[data-lucide],
.icon-btn svg, .icon-btn i[data-lucide],
.nav-link svg, .nav-link i[data-lucide],
.cumplimiento-btn svg, .cumplimiento-btn i[data-lucide] {
    pointer-events: none;
}