/*! SUMMA UI v1.3.0 · estilos · Red SUMMA Education
 *  Sistema de diseño central de la plataforma SUMMA. NO editar este archivo: se construye con
 *  tools/ui_build.php desde assets/ui/src/. Contrato v1 en docs/SISTEMA_DE_DISENO.md. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ---- 00_tokens.css ---- */
/* =====================================================================
   SUMMA UI v1 · Tokens de diseño · origen: UI 2026 del SGI
   ---------------------------------------------------------------------
   Fuente única del diseño de TODOS los aplicativos de la plataforma SUMMA
   (decisión 28-sep-2026): SUMMA publica /ui/v1/summa-ui.css y cada
   aplicativo lo enlaza; un cambio aquí llega a todos sin tocarlos.

   Contrato de la v1: los nombres de tokens y de clases NO se renombran ni
   se retiran. Se pueden cambiar valores (colores, radios, fuentes) y agregar
   tokens o clases nuevas. Un cambio que rompa el contrato va a /ui/v2/ y
   convive con la v1 hasta que todos los aplicativos migren.

   Los tokens conservan el prefijo --sgi-* porque SGI, SGD, SEVCO, SGAC y CI
   ya los usan (lotes *_ui_2026). Para código nuevo existen los alias
   --summa-* al final del bloque. Los --cua-* y --color-* son alias
   históricos de las vistas del SGI.
   ===================================================================== */

:root {
    /* === Marca === */
    --sgi-carbon: #302F2A;
    --sgi-carbon-2: #3A3934;
    --sgi-carbon-3: #24231E;
    --sgi-amarillo: #EBE100;
    --sgi-amarillo-hover: #D9CF00;
    --sgi-amarillo-claro: #F5EC2A;
    --sgi-amarillo-suave: #F7F4C8;
    --sgi-amarillo-borde: #E9E28A;

    /* === Neutros cálidos === */
    --sgi-bg: #F4F2EA;
    --sgi-surface: #FFFFFF;
    --sgi-surface-2: #FDFCF6;
    --sgi-surface-3: #F7F5EE;
    --sgi-border: #E4DFD2;
    --sgi-border-2: #EBE8DC;
    --sgi-border-3: #DCD7C7;
    --sgi-border-row: #F1EEE4;
    --sgi-text: #24231D;
    --sgi-text-2: #3D3C36;
    --sgi-text-3: #57534A;
    --sgi-muted: #6D695C;
    --sgi-muted-2: #8E8A7C;
    --sgi-on-dark: #CFCBBE;
    --sgi-on-dark-2: #DAD6C9;
    --sgi-on-dark-3: #B7B3A6;

    /* === Estados (fondo / texto / punto / borde) === */
    --sgi-ok-bg: #E8F2EA;      --sgi-ok-tx: #1F5133;      --sgi-ok-dot: #2F8A55;      --sgi-ok-bd: #B9D8C2;
    --sgi-warn-bg: #FFF4DE;    --sgi-warn-tx: #6E4700;    --sgi-warn-dot: #D19A1F;    --sgi-warn-bd: #F1D08E;
    --sgi-err-bg: #FBEAE7;     --sgi-err-tx: #8A2E1F;     --sgi-err-dot: #C9533F;     --sgi-err-bd: #F0C4BC;
    --sgi-info-bg: #EDEBF7;    --sgi-info-tx: #3B3570;    --sgi-info-dot: #6A62B8;    --sgi-info-bd: #CFCBEA;
    --sgi-neutral-bg: #EBE8DC; --sgi-neutral-tx: #57534A; --sgi-neutral-dot: #8E8A7C; --sgi-neutral-bd: #DCD7C7;
    --sgi-success: #2F6B45;    --sgi-success-hover: #275A3A;
    --sgi-danger: #A33A2A;     --sgi-danger-hover: #8A2E1F;

    /* === Forma === */
    --sgi-r-xl: 22px;
    --sgi-r-lg: 18px;
    --sgi-r: 16px;
    --sgi-r-md: 14px;
    --sgi-r-sm: 10px;
    --sgi-r-xs: 8px;
    --sgi-r-pill: 999px;
    --sgi-shadow-hover: 0 0 0 1px var(--sgi-amarillo), 0 20px 40px -24px rgba(48, 47, 42, .45);
    --sgi-shadow-float: 0 20px 40px -20px rgba(36, 35, 30, .6);
    --sgi-focus: 0 0 0 3px rgba(235, 225, 0, .45);
    --sgi-focus-err: 0 0 0 3px rgba(201, 83, 63, .12);

    /* === Tipografía === */
    --sgi-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sgi-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

    /* === Medidas del marco === */
    --sgi-sidebar-w: 272px;
    --sgi-sidebar-w-min: 68px;

    /* === Alias de compatibilidad: nombres que ya usan las vistas === */
    --cua-gris: var(--sgi-carbon);
    --cua-gris-oscuro: var(--sgi-carbon-3);
    --cua-gris-suave: var(--sgi-text-3);
    --cua-amarillo: var(--sgi-amarillo);
    --cua-amarillo-hover: var(--sgi-amarillo-hover);
    --cua-amarillo-suave: var(--sgi-amarillo-suave);
    --cua-amarillo-borde: var(--sgi-amarillo-borde);

    --color-primary: var(--sgi-carbon);
    --color-primary-hover: var(--sgi-carbon-3);
    --color-on-primary: #FFFFFF;
    --color-accent: var(--sgi-amarillo);
    --color-accent-hover: var(--sgi-amarillo-hover);
    --color-on-accent: var(--sgi-carbon);

    --color-bg: var(--sgi-bg);
    --color-bg-muted: var(--sgi-surface-3);
    --color-surface: var(--sgi-surface);
    --color-surface-alt: var(--sgi-surface-2);
    --color-surface-soft: var(--sgi-surface-3);
    --color-border: var(--sgi-border);
    --color-border-strong: var(--sgi-border-3);
    --color-border-soft: var(--sgi-border-row);
    --color-text: var(--sgi-text);
    --color-text-muted: var(--sgi-muted);
    --color-text-soft: var(--sgi-muted);
    --color-text-faint: var(--sgi-muted-2);

    --color-success-bg: var(--sgi-ok-bg);
    --color-success-text: var(--sgi-ok-tx);
    --color-success-border: var(--sgi-ok-bd);
    --color-warn-bg: var(--sgi-warn-bg);
    --color-warn-text: var(--sgi-warn-tx);
    --color-warn-border: var(--sgi-warn-bd);
    --color-error-bg: var(--sgi-err-bg);
    --color-error-text: var(--sgi-err-tx);
    --color-error-border: var(--sgi-err-bd);

    --shadow-sm: 0 1px 2px rgba(36, 35, 30, .05);
    --shadow-md: 0 12px 28px -18px rgba(48, 47, 42, .4);
    --shadow-lg: var(--sgi-shadow-float);
    --shadow-yellow: none;
    --shadow-yellow-hover: none;

    /* === Alias SUMMA para código nuevo (apuntan a los tokens v1) === */
    --summa-carbon: var(--sgi-carbon);
    --summa-acento: var(--sgi-amarillo);
    --summa-acento-hover: var(--sgi-amarillo-hover);
    --summa-bg: var(--sgi-bg);
    --summa-surface: var(--sgi-surface);
    --summa-border: var(--sgi-border);
    --summa-text: var(--sgi-text);
    --summa-muted: var(--sgi-muted);
    --summa-font: var(--sgi-font);
    --summa-mono: var(--sgi-mono);
    --summa-r: var(--sgi-r);
}

/* ---- 10_base.css ---- */

/* ============== Base ============== */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sgi-font);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--sgi-text);
    background: var(--sgi-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--sgi-amarillo); color: var(--sgi-carbon); }

input::placeholder, textarea::placeholder { color: var(--sgi-muted-2); opacity: 1; }

/* El foco visible es el mismo en toda la aplicación: anillo amarillo de 3 px. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--sgi-amarillo);
    outline-offset: 2px;
}

/* Botones, campos y listas desplegables heredan la fuente: sin esto el navegador pone la suya. */
button, input, select, textarea { font-family: inherit; }

/* Cifras alineadas en tablas y contadores. */
table { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============== Marco de las páginas sin menú (layout default y errores) ============== */

.sgi-container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.sgi-header { background: var(--sgi-carbon); color: #fff; border-bottom: 3px solid var(--sgi-amarillo); }
.sgi-header .sgi-container { padding-top: 16px; padding-bottom: 16px; }
.sgi-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sgi-brand-mark { flex: none; width: 36px; height: 36px; border-radius: var(--sgi-r-xs); overflow: hidden; background: var(--sgi-amarillo); }
.sgi-brand-mark svg { display: block; width: 100%; height: 100%; }
/* El logotipo se dibuja con los colores de la marca aunque la vista traiga otros en el SVG
   (las páginas de error todavía lo traen en azul). */
.sgi-brand-mark svg rect { fill: var(--sgi-amarillo); }
.sgi-brand-mark svg path { fill: var(--sgi-carbon); }
.sgi-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sgi-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
.sgi-brand-sub { font-family: var(--sgi-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sgi-on-dark-3); }

.sgi-main { padding: 36px 0 56px; min-height: calc(100vh - 150px); }

.sgi-footer { border-top: 1px solid var(--sgi-border); background: var(--sgi-surface-2); color: var(--sgi-muted); font-size: 12.5px; }
.sgi-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.sgi-footer-meta { font-family: var(--sgi-mono); font-size: 11px; letter-spacing: .06em; color: var(--sgi-muted-2); }
.sgi-palette-bar { height: 3px; background: var(--sgi-amarillo); }

/* Aviso de «ver como» en las páginas sin menú: paleta ámbar del estado de advertencia */
.sgi-viendo-como {
    position: sticky; top: 0; z-index: 9999;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 10px 24px; border-bottom: 1px solid var(--sgi-warn-bd);
    background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); font-size: 13px;
}
.sgi-viendo-como-meta { opacity: .85; margin-left: 6px; }
.sgi-viendo-como-salir {
    padding: 6px 12px; border-radius: var(--sgi-r-xs); border: 1px solid var(--sgi-warn-bd);
    background: var(--sgi-surface); color: var(--sgi-warn-tx); font-size: 12.5px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.sgi-viendo-como-salir:hover { border-color: var(--sgi-warn-tx); }

/* Páginas de error (403, 404, 500, mantenimiento) */
.sgi-error {
    max-width: 560px; margin: 24px auto; padding: 40px 36px; text-align: center;
    background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-xl);
}
.sgi-error-code {
    display: block; font-family: var(--sgi-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em;
    color: var(--sgi-muted); margin-bottom: 10px;
}
.sgi-error-code::before { content: "ERROR "; }
.sgi-error-code-plain::before { content: ""; }
.sgi-error-code-plain { text-transform: uppercase; }
.sgi-error-code-bad { color: var(--sgi-err-tx); }
.sgi-error-title { margin: 0 0 12px; font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--sgi-text); }
.sgi-error-desc { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--sgi-muted); }
.sgi-error-desc-small { font-size: 13px; }

.sgi-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 16px; border-radius: var(--sgi-r-sm); border: 1px solid transparent;
    font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.sgi-btn-primary { background: var(--sgi-carbon); color: #fff; }
.sgi-btn-primary:hover { background: var(--sgi-carbon-3); color: #fff; }

.sgi-error-acciones { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sgi-btn-secondary { background: var(--sgi-surface); color: var(--sgi-carbon); border-color: var(--sgi-border-3); }
.sgi-btn-secondary:hover { border-color: var(--sgi-carbon); }

@media (max-width: 640px) {
    .sgi-container { padding: 0 16px; }
    .sgi-error { padding: 28px 20px; }
    .sgi-error-title { font-size: 23px; }
}

/* ---- 20_app.css ---- */
/* =====================================================================
   SGI · Aplicación autenticada (menú lateral + contenido) · [SGI-UI-2026]
   Rediseño solo visual: mismas clases, nuevos valores. Los tokens viven
   en sgi.css, que los tres layouts cargan antes que esta hoja.

   Reglas del lote:
   - Ninguna clase existente se retira ni cambia de significado: las vistas
     siguen funcionando sin tocarlas.
   - Clases nuevas: .btn-accent, .btn-outline, .btn-sm, .badge, .estado-pill,
     .eyebrow, .text-muted, .sticky-actions, .section-nav, .form-section-num,
     y las del marco (.sidebar-brand-mark, .topbar-crumbs, .topbar-btn…).
   - El amarillo es de acento: una acción principal por pantalla (.btn-accent),
     el elemento activo del menú y el foco.
   ===================================================================== */

.app-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sgi-font);
    color: var(--sgi-text);
    background: var(--sgi-bg);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ============== Utilidades ============== */

.eyebrow, .page-eyebrow {
    display: block;
    font-family: var(--sgi-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sgi-muted);
}
.text-muted { color: var(--sgi-muted); }
.mono { font-family: var(--sgi-mono); }

/* Enlaces sueltos del contenido: :where() deja la especificidad en cero para que
   cualquier regla de una vista siga mandando. */
:where(.app-main) a:where(:not([class])) {
    color: var(--sgi-text);
    text-decoration: underline;
    text-decoration-color: var(--sgi-amarillo-hover);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
:where(.app-main) a:where(:not([class])):hover { text-decoration-color: var(--sgi-carbon); }

/* ============== Menú lateral ============== */

.app-sidebar {
    width: var(--sgi-sidebar-w);
    flex-shrink: 0;
    background: var(--sgi-carbon);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    /* min-height: 0 garantiza que la navegación se desplace dentro del contenedor flex */
    min-height: 0;
    /* [B7-SIDEBAR-Z] Por encima del contenido (paneles sticky de las vistas) y por debajo de los modales. */
    z-index: 500;
    transition: width .2s;
}
.app-sidebar > * { min-height: 0; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Logotipo antiguo (SVG) mientras conviva con el layout anterior */
.sidebar-brand > svg { flex: none; width: 30px; height: 30px; border-radius: var(--sgi-r-xs); }
.sidebar-brand > svg rect { fill: var(--sgi-amarillo); stroke: none; }
.sidebar-brand > svg path { fill: var(--sgi-carbon); }
.sidebar-brand-mark {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--sgi-r-xs);
    background: var(--sgi-amarillo);
    color: var(--sgi-carbon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sgi-mono);
    font-size: 11px;
    font-weight: 600;
}
.sidebar-brand-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}
.sidebar-brand-name { font-weight: 600; font-size: 14px; color: #fff; }
.sidebar-brand-sub {
    font-family: var(--sgi-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sgi-on-dark-3);
}

.sidebar-collapse-btn {
    flex: none;
    margin-left: auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: transparent;
    color: var(--sgi-on-dark-2);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .2s;
}
.sidebar-collapse-btn:hover { border-color: var(--sgi-amarillo); color: var(--sgi-amarillo); }

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .35); }

/* Rótulo suelto de sección (uso antiguo; las secciones actuales son filas con panel) */
.sidebar-section {
    font-family: var(--sgi-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sgi-on-dark-3);
    margin: 16px 12px 6px;
}

/* Fila de primer nivel: enlace directo o sección con panel */
.sidebar-link,
.sidebar-section-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    margin: 0;
    border: 0;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    color: var(--sgi-on-dark-2);
    transition: background .15s, color .15s;
}
.sidebar-section-toggle { cursor: pointer; user-select: none; }
.sidebar-link:hover,
.sidebar-section-toggle:hover,
.sidebar-section-toggle.open {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}
/* Activo de primer nivel y sección que contiene la página actual: barra interna amarilla */
.sidebar-nav > .sidebar-link.active,
.sidebar-section-toggle.has-active {
    background: rgba(235, 225, 0, .12);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--sgi-amarillo);
}

.sidebar-icon,
.sidebar-section-icon {
    flex: none;
    width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: var(--sgi-on-dark-3);
    /* Los íconos del menú son datos (Menu.php) y algunos son emoji: se pintan en un solo tono */
    font-variant-emoji: text;
    filter: grayscale(1);
}
.sidebar-icon svg,
.sidebar-section-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sidebar-nav > .sidebar-link.active .sidebar-icon,
.sidebar-section-toggle.has-active .sidebar-section-icon,
.sidebar-section-toggle.open .sidebar-section-icon { color: var(--sgi-amarillo); filter: none; }

.sidebar-section-name { flex: 1; min-width: 0; text-align: left; }
.sidebar-label { min-width: 0; }
.sidebar-caret {
    font-size: 14px;
    color: var(--sgi-muted-2);
    transition: transform .2s, color .2s;
}
.sidebar-section-toggle.open .sidebar-caret,
.sidebar-section-toggle:hover .sidebar-caret { transform: translateX(3px); color: var(--sgi-amarillo); }

/* Contadores del menú [PERMISOS-2026] (antes en sistema.css) */
.sidebar-badge-num {
    flex: none;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--sgi-r-pill);
    background: var(--sgi-amarillo);
    color: var(--sgi-carbon);
    font-family: var(--sgi-mono);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-badge-derecha { margin-left: auto; }

/* --- Panel flotante de la sección --- */
.sidebar-section-content {
    display: none;
    position: fixed;
    left: var(--sgi-sidebar-w);   /* recalculado por JS según el ancho real del menú */
    top: 0;                       /* recalculado por JS */
    margin-left: 8px;
    width: 300px;
    max-width: calc(100vw - var(--sgi-sidebar-w-min) - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 12px;
    background: var(--sgi-carbon-2);
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid var(--sgi-amarillo);
    border-radius: 0 var(--sgi-r) var(--sgi-r) 0;
    box-shadow: 24px 24px 60px -20px rgba(0, 0, 0, .55);
    z-index: 1200;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.sidebar-section-content.open { display: block; }
.sidebar-section-content.is-wide { width: 520px; }

.sidebar-fly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sidebar-fly-title {
    font-family: var(--sgi-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sgi-amarillo);
}
.sidebar-fly-count { font-family: var(--sgi-mono); font-size: 10.5px; color: var(--sgi-muted-2); white-space: nowrap; }
.sidebar-fly-grid { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.sidebar-section-content.is-wide .sidebar-fly-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Panel ancho con históricos: la opción a la izquierda y su histórico a la derecha, en la misma fila */
.sidebar-section-content.is-wide.has-subs .sidebar-link { grid-column: 1; }
.sidebar-section-content.is-wide.has-subs .sidebar-sublink { grid-column: 2; }

.sidebar-section-content .sidebar-link {
    align-items: flex-start;
    padding: 9px 12px;
    color: #E9E5D6;
}
.sidebar-section-content .sidebar-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-section-content .sidebar-link.active {
    background: var(--sgi-amarillo);
    color: var(--sgi-carbon);
    font-weight: 600;
    box-shadow: none;
}
.sidebar-section-content .sidebar-icon { display: none; }
.sidebar-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.sidebar-link-desc { font-size: 11.5px; font-weight: 400; line-height: 1.35; color: var(--sgi-muted-2); }
.sidebar-link.active .sidebar-link-desc { color: var(--sgi-text-3); }
.sidebar-section-content .sidebar-link.active .sidebar-badge-num { background: var(--sgi-carbon); color: var(--sgi-amarillo); }

/* Enlaces secundarios (históricos): guion a la izquierda */
.sidebar-sublink { padding-left: 28px !important; font-size: 12.5px !important; position: relative; }
.sidebar-sublink::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 18px;
    width: 8px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}

/* Ítems «Próximamente» (Bloque 6F) */
.sidebar-link.sidebar-link-soon { opacity: .62; position: relative; }
.sidebar-link.sidebar-link-soon:hover { opacity: .78; }
.sidebar-link.sidebar-link-soon.active { opacity: 1; }
.sidebar-badge-soon {
    display: inline-block;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--sgi-r-pill);
    font-family: var(--sgi-mono);
    font-size: 9.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(235, 225, 0, .14);
    color: var(--sgi-amarillo);
    line-height: 1.6;
}
.sidebar-link.sidebar-link-soon.active .sidebar-badge-soon { background: rgba(0, 0, 0, .18); color: var(--sgi-carbon); }

/* Pie del menú: usuario y salida */
.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-user { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; }
.sidebar-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--sgi-r-sm);
    background: var(--sgi-amarillo);
    color: var(--sgi-carbon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}
.sidebar-user-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role { font-size: 11.5px; color: var(--sgi-on-dark-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-logout-form { margin: 0; flex: none; }
.sidebar-logout-btn {
    padding: 6px 9px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--sgi-r-xs);
    color: var(--sgi-on-dark-2);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.sidebar-logout-btn:hover { border-color: var(--sgi-amarillo); color: var(--sgi-amarillo); }

/* --- Menú colapsado: riel de íconos (el panel flotante sigue funcionando) --- */
.app-shell.sidebar-collapsed .app-sidebar { width: var(--sgi-sidebar-w-min); }
.app-shell.sidebar-collapsed .sidebar-label,
.app-shell.sidebar-collapsed .sidebar-brand-text,
.app-shell.sidebar-collapsed .sidebar-caret,
.app-shell.sidebar-collapsed .sidebar-user-info,
.app-shell.sidebar-collapsed .sidebar-logout-form,
.app-shell.sidebar-collapsed .sidebar-nav .sidebar-badge-num { display: none; }
.app-shell.sidebar-collapsed .sidebar-brand { flex-direction: column; gap: 10px; padding: 18px 0 12px; }
.app-shell.sidebar-collapsed .sidebar-collapse-btn { margin-left: 0; transform: rotate(180deg); }
.app-shell.sidebar-collapsed .sidebar-nav > .sidebar-link,
.app-shell.sidebar-collapsed .sidebar-section-toggle { justify-content: center; padding: 10px 0; }
.app-shell.sidebar-collapsed .sidebar-footer { justify-content: center; padding: 14px 0; }
.app-shell.sidebar-collapsed .sidebar-user { flex: none; }
/* En el riel el panel flotante conserva sus textos */
.app-shell.sidebar-collapsed .sidebar-section-content .sidebar-label,
.app-shell.sidebar-collapsed .sidebar-section-content .sidebar-badge-num { display: inline-flex; }
.app-shell.sidebar-collapsed .sidebar-section-content .sidebar-link-text { display: flex; }

/* ============== Contenido ============== */

.app-main-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 28px;
    min-height: 63px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sgi-border);
}
.topbar-menu-btn {
    display: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--sgi-r-sm);
    border: 1px solid var(--sgi-border);
    background: var(--sgi-surface);
    color: var(--sgi-carbon);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.topbar-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--sgi-text); }
.topbar-crumbs {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--sgi-muted);
}
.topbar-crumb { color: var(--sgi-muted); text-decoration: none; }
a.topbar-crumb:hover { color: var(--sgi-text); }
.topbar-crumb.is-current { color: var(--sgi-text); font-weight: 600; }
.topbar-crumb-sep { color: #B0AB9B; }
.topbar-user { display: inline-flex; align-items: center; gap: 10px; }
.topbar-user-name { font-size: 13px; color: var(--sgi-muted); }
.topbar-btn {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sgi-r-sm);
    border: 1px solid var(--sgi-border);
    background: var(--sgi-surface);
    color: var(--sgi-carbon);
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s;
}
.topbar-btn:hover { border-color: var(--sgi-carbon); }
.topbar-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.topbar-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--sgi-r-pill);
    background: var(--sgi-carbon);
    color: var(--sgi-amarillo);
    font-family: var(--sgi-mono);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-main {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 28px 64px;
}

/* Aviso de «ver como»: paleta ámbar del estado de advertencia */
.app-viendo-como {
    position: sticky;
    top: 0;
    z-index: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: -12px 0 18px;
    padding: 12px 16px;
    border-radius: var(--sgi-r-sm);
    border: 1px solid var(--sgi-warn-bd);
    background: var(--sgi-warn-bg);
    color: var(--sgi-warn-tx);
    font-size: 13px;
    line-height: 1.4;
}
.app-viendo-como-meta { opacity: .85; margin-left: 6px; }
.app-viendo-como-salir {
    padding: 7px 12px;
    border-radius: var(--sgi-r-xs);
    border: 1px solid var(--sgi-warn-bd);
    background: var(--sgi-surface);
    color: var(--sgi-warn-tx);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.app-viendo-como-salir:hover { border-color: var(--sgi-warn-tx); }

/* ============== Avisos ============== */

.app-alert,
.alert {
    padding: 12px 14px;
    border-radius: var(--sgi-r-sm);
    border: 1px solid var(--sgi-border);
    margin-bottom: 18px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    background: var(--sgi-surface);
    color: var(--sgi-text-2);
}
.app-alert-error,   .alert-error   { background: var(--sgi-err-bg);  color: var(--sgi-err-tx);  border-color: var(--sgi-err-bd); }
.app-alert-success, .alert-success { background: var(--sgi-ok-bg);   color: var(--sgi-ok-tx);   border-color: var(--sgi-ok-bd); }
.app-alert-warn,    .alert-warn    { background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); border-color: var(--sgi-warn-bd); }
.app-alert-info,    .alert-info    { background: var(--sgi-info-bg); color: var(--sgi-info-tx); border-color: var(--sgi-info-bd); }
.alert-info strong { color: inherit; }
.app-alert a, .alert a { color: inherit; }

/* ============== Cabecera de página ============== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.page-title {
    margin: 0 0 6px;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--sgi-text);
}
.page-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sgi-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ============== Indicadores (KPI) ============== */

/* La cuadrícula no usa separación sobre un fondo de color (deja huecos cuando la última
   fila queda incompleta): cada celda dibuja su propio borde con box-shadow. */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 24px;
    padding: 1px;
    border-radius: var(--sgi-r-lg);
    overflow: hidden;
    background: var(--sgi-surface);
    box-shadow: inset 0 0 0 1px var(--sgi-border);
}
.kpi-grid-2 { grid-template-columns: repeat(2, 1fr); }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }

.kpi-card {
    padding: 20px 22px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r);
    min-width: 0;
}
.kpi-grid > .kpi-card {
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--sgi-border);
}
.kpi-card-label {
    font-family: var(--sgi-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sgi-muted);
}
.kpi-card-value {
    margin-top: 8px;
    font-size: 31px;
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.05;
    color: var(--sgi-text);
}
.kpi-card-hint { margin-top: 6px; font-size: 12.5px; color: var(--sgi-muted); }

.kpi-card-info  { background: var(--sgi-info-bg); }
.kpi-card-info  .kpi-card-label, .kpi-card-info  .kpi-card-value, .kpi-card-info  .kpi-card-hint { color: var(--sgi-info-tx); }
.kpi-card-warn  { background: var(--sgi-warn-bg); }
.kpi-card-warn  .kpi-card-label, .kpi-card-warn  .kpi-card-value, .kpi-card-warn  .kpi-card-hint { color: var(--sgi-warn-tx); }
.kpi-card-ok    { background: var(--sgi-ok-bg); }
.kpi-card-ok    .kpi-card-label, .kpi-card-ok    .kpi-card-value, .kpi-card-ok    .kpi-card-hint { color: var(--sgi-ok-tx); }
.kpi-card-error { background: var(--sgi-err-bg); }
.kpi-card-error .kpi-card-label, .kpi-card-error .kpi-card-value, .kpi-card-error .kpi-card-hint { color: var(--sgi-err-tx); }

/* ============== Estado vacío ============== */

.empty-state {
    padding: 44px 24px;
    text-align: center;
    background: var(--sgi-surface);
    border: 1px dashed var(--sgi-border-3);
    border-radius: var(--sgi-r-lg);
}
.empty-state-icon  { font-size: 34px; opacity: .45; margin-bottom: 8px; filter: grayscale(1); }
.empty-state-title { margin: 6px 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--sgi-text); }
.empty-state-text  { margin: 0; font-size: 13.5px; color: var(--sgi-muted); }

/* ============== Tarjeta de ayuda (instrucciones bajo las bandejas) ============== */

.help-card {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--sgi-surface-2);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r-md);
    font-size: 13px;
    line-height: 1.55;
    color: var(--sgi-muted);
}
.help-card strong { color: var(--sgi-text); }
.help-card ol     { margin: 6px 0 0; padding-left: 20px; }
.help-card li     { margin-bottom: 3px; }

/* ============== Estados: píldora con punto ============== */

.badge,
.status-badge,
.percent-pill,
.estado-pill,
.dash-badge,
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: var(--sgi-r-pill);
    border: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--sgi-neutral-bg);
    color: var(--sgi-neutral-tx);
}
.badge::before,
.status-badge::before,
.percent-pill::before,
.estado-pill::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sgi-dot, currentColor);
}

.status-ok, .status-activo, .percent-pill-ok, .badge-ok, .badge-success, .estado-nuevo {
    background: var(--sgi-ok-bg); color: var(--sgi-ok-tx); --sgi-dot: var(--sgi-ok-dot);
}
.status-warn, .status-warn-soft, .status-pendiente_activacion, .percent-pill-warn, .badge-warn, .badge-warning {
    background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); --sgi-dot: var(--sgi-warn-dot);
}
.status-error, .status-bloqueado, .percent-pill-error, .badge-error, .badge-danger {
    background: var(--sgi-err-bg); color: var(--sgi-err-tx); --sgi-dot: var(--sgi-err-dot);
}
.status-info, .badge-info {
    background: var(--sgi-info-bg); color: var(--sgi-info-tx); --sgi-dot: var(--sgi-info-dot);
}
.status-neutral, .status-inactivo, .badge-neutral, .estado-anterior {
    background: var(--sgi-neutral-bg); color: var(--sgi-neutral-tx); --sgi-dot: var(--sgi-neutral-dot);
}
.status-warn-soft { margin-left: 4px; }

/* Insignias de marca: rol y novedad del panel */
.dash-badge, .role-badge { background: var(--sgi-amarillo-suave); color: var(--sgi-text-2); box-shadow: inset 0 0 0 1px var(--sgi-amarillo-borde); }
.role-badges-list, .form-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============== Modal ============== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    /* Por encima de cualquier elemento fijo: menú (500), panel del menú (1200) y ayuda (1100) */
    z-index: 2000;
    padding: 16px;
    background: rgba(36, 35, 30, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
}
.modal-card {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 520px;
    max-height: 84vh;
    overflow: auto;
    background: var(--sgi-surface);
    border-radius: 20px;
    box-shadow: var(--sgi-shadow-float);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: var(--sgi-carbon);
    color: #fff;
    border-radius: 20px 20px 0 0;
}
.modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.modal-header .eyebrow { color: var(--sgi-amarillo); margin-bottom: 4px; }
.modal-close {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--sgi-r-xs);
    border: 1px solid rgba(255, 255, 255, .18);
    background: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover { color: var(--sgi-amarillo); border-color: var(--sgi-amarillo); }
.modal-body { padding: 20px 22px; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--sgi-border);
    background: var(--sgi-surface-3);
    border-radius: 0 0 20px 20px;
}

/* ============== Filas seleccionables (modales y formularios) ============== */

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border-2);
    border-radius: var(--sgi-r-sm);
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.check-row:hover { background: var(--sgi-surface-2); border-color: var(--sgi-carbon); }
.check-row input[type="checkbox"] { margin: 0; accent-color: var(--sgi-carbon); }
.check-row strong { color: var(--sgi-text); }
.check-row small { color: var(--sgi-muted); font-size: 11.5px; margin-left: 4px; }

/* ============== Tarjeta resumen (métrica grande) ============== */

.summary-card {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px 20px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r-lg);
}
.summary-card-metric {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.03em;
    background: var(--sgi-neutral-bg);
    color: var(--sgi-neutral-tx);
}
.summary-card-metric-ok    { background: var(--sgi-ok-bg);   color: var(--sgi-ok-tx); }
.summary-card-metric-warn  { background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); }
.summary-card-metric-error { background: var(--sgi-err-bg);  color: var(--sgi-err-tx); }
.summary-card-body { flex: 1; min-width: 0; }
.summary-card-title { display: block; margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--sgi-text); }
.summary-card-text { margin: 0; font-size: 13.5px; color: var(--sgi-muted); }
.summary-card-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--sgi-muted-2); }

/* ============== Lista de verificación por secciones (revisión, ética…) ============== */

.section-check {
    margin-bottom: 8px;
    padding: 12px 14px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r-sm);
}
.section-check-ok    { background: var(--sgi-ok-bg);  border-color: var(--sgi-ok-bd); }
.section-check-fail  { background: var(--sgi-err-bg); border-color: var(--sgi-err-bd); }
.section-check-head  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-check-icon  { font-size: 17px; font-weight: 700; }
.section-check-icon-ok   { color: var(--sgi-ok-dot); }
.section-check-icon-fail { color: var(--sgi-err-dot); }
.section-check-title { flex: 1; font-size: 13.5px; font-weight: 600; }
.section-check-msg   { margin: 6px 0 0 28px; font-size: 12px; color: var(--sgi-muted); }
.section-check-comment { margin-top: 12px; width: 100%; }
.section-check-comment label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--sgi-text-2); }
.section-check-comment textarea {
    display: block;
    width: 100%;
    min-height: 72px;
    padding: 11px 12px;
    border: 1px solid var(--sgi-border-3);
    border-radius: var(--sgi-r-sm);
    background: var(--sgi-surface);
    color: var(--sgi-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}
.section-check-comment textarea:focus { outline: none; border-color: var(--sgi-carbon); box-shadow: var(--sgi-focus); }

/* ============== Botones ============== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: var(--sgi-r-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Primario: carbón. Es el botón de confirmación habitual. */
.btn-primary, .btn-dark {
    background: var(--sgi-carbon);
    color: #fff;
    border-color: var(--sgi-carbon);
    box-shadow: none;
}
.btn-primary:hover, .btn-dark:hover { background: var(--sgi-carbon-3); border-color: var(--sgi-carbon-3); color: #fff; }

/* Acento: amarillo. UNA por pantalla, la acción principal (Guardar, Generar, Firmar). */
.btn-accent {
    background: var(--sgi-amarillo);
    color: var(--sgi-carbon);
    border-color: var(--sgi-amarillo);
}
.btn-accent:hover { background: var(--sgi-amarillo-hover); border-color: var(--sgi-amarillo-hover); color: var(--sgi-carbon); }

.btn-secondary, .btn-outline {
    background: var(--sgi-surface);
    color: var(--sgi-carbon);
    border-color: var(--sgi-border-3);
}
.btn-secondary:hover, .btn-outline:hover { border-color: var(--sgi-carbon); color: var(--sgi-carbon); background: var(--sgi-surface); }

.btn-success { background: var(--sgi-success); color: #fff; border-color: var(--sgi-success); }
.btn-success:hover { background: var(--sgi-success-hover); border-color: var(--sgi-success-hover); color: #fff; }

.btn-danger { background: var(--sgi-danger); color: #fff; border-color: var(--sgi-danger); }
.btn-danger:hover { background: var(--sgi-danger-hover); border-color: var(--sgi-danger-hover); color: #fff; }

.btn-warning { background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); border-color: var(--sgi-warn-bd); }
.btn-warning:hover { border-color: var(--sgi-warn-tx); }

.btn-link {
    display: inline;
    padding: 2px 0;
    border: 0;
    border-bottom: 2px solid var(--sgi-amarillo);
    border-radius: 0;
    background: none;
    color: var(--sgi-carbon);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
}
.btn-link:hover { border-bottom-color: var(--sgi-carbon); background: none; color: var(--sgi-carbon); }
/* Dos enlaces de acción seguidos no se pegan */
:where(td, p, li) > .btn-link + .btn-link { margin-left: 12px; }

.btn-small, .btn-sm { padding: 7px 12px; border-radius: var(--sgi-r-xs); font-size: 12.5px; }
.btn-link.btn-small, .btn-link.btn-sm { padding: 2px 0; border-radius: 0; }

/* ============== Panel de inicio ============== */

.dash-greeting {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 34px 36px;
    border-radius: var(--sgi-r-xl);
    background:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px,
        var(--sgi-carbon);
    color: #fff;
    border: 0;
}
.dash-greeting .eyebrow { color: var(--sgi-amarillo); margin-bottom: 8px; }
.dash-h1 { margin: 0 0 8px; font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.dash-greeting-text { margin: 0; max-width: 720px; font-size: 15px; line-height: 1.55; color: var(--sgi-on-dark); opacity: 1; }

.dash-section-title {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--sgi-text);
}

.dash-stats { margin-bottom: 28px; }
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
    padding: 1px;
    border-radius: var(--sgi-r-lg);
    overflow: hidden;
    background: var(--sgi-surface);
    box-shadow: inset 0 0 0 1px var(--sgi-border);
}
.dash-stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: var(--sgi-surface);
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--sgi-border);
    color: inherit;
    text-decoration: none;
    transition: background .15s;
}
.dash-stat-card:hover { transform: none; background: var(--sgi-surface-2); box-shadow: 0 0 0 1px var(--sgi-border); border-color: transparent; }
.dash-stat-label {
    font-family: var(--sgi-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sgi-muted);
}
.dash-stat-value { font-size: 31px; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; color: var(--sgi-text); }
.dash-stat-value-text { margin-top: 2px; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--sgi-text); }
.dash-stat-sub { font-size: 12.5px; font-style: normal; color: var(--sgi-muted); }
.dash-stat-ok   { color: var(--sgi-ok-tx); }
.dash-stat-warn { color: var(--sgi-warn-tx); }

.dash-actions { margin-bottom: 28px; }
.dash-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.dash-action-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
.dash-action-card:hover:not(.dash-action-disabled) {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: var(--sgi-shadow-hover);
}
.dash-action-icon { margin-bottom: 6px; font-size: 20px; color: var(--sgi-carbon); filter: grayscale(1); }
.dash-action-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--sgi-text); }
.dash-action-desc  { font-size: 13px; line-height: 1.45; color: var(--sgi-muted); }
.dash-action-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

.dash-activity { margin-bottom: 28px; }

.dash-info-card {
    margin-bottom: 24px;
    padding: 16px 20px;
    border-radius: var(--sgi-r-md);
    border: 1px solid var(--sgi-amarillo-borde);
    background: var(--sgi-amarillo-suave);
}
.dash-info-warn { background: var(--sgi-warn-bg); border-color: var(--sgi-warn-bd); }
.dash-info-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--sgi-text); }
.dash-info-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sgi-text-2); }

.dash-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r-lg);
}
.dash-table th, .dash-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 13.5px;
    border-bottom: 1px solid var(--sgi-border-row);
}
.dash-table th {
    background: var(--sgi-surface-3);
    font-family: var(--sgi-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sgi-muted);
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-mono { font-family: var(--sgi-mono); font-size: 12.5px; color: var(--sgi-muted); }

/* ============== Filtros y tablas ============== */

.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.filter-input, .filter-select {
    padding: 11px 12px;
    border: 1px solid var(--sgi-border-3);
    border-radius: var(--sgi-r-sm);
    background-color: var(--sgi-surface);
    color: var(--sgi-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
}
.filter-input { flex: 1; min-width: 200px; }
.filter-select { min-width: 160px; }
.filter-input:focus, .filter-select:focus {
    outline: none;
    border-color: var(--sgi-carbon);
    background-color: var(--sgi-surface);
    box-shadow: var(--sgi-focus);
}

.table-card {
    overflow-x: auto;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r-lg);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: var(--sgi-text);
}
.data-table th, .data-table td {
    /* Densidad de trabajo: las listas del SGI son largas y con muchas columnas */
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--sgi-border-row);
}
.data-table th {
    background: var(--sgi-surface-3);
    font-family: var(--sgi-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sgi-muted);
    line-height: 1.35;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--sgi-surface-2); }
.data-table-compact th, .data-table-compact td { padding: 8px 10px; font-size: 13px; }
.data-table-compact th { font-size: 10.5px; }
.td-mono { font-family: var(--sgi-mono); font-size: 12.5px; color: var(--sgi-muted); }
.td-actions { text-align: right; white-space: nowrap; }
/* Acciones seguidas (enlaces y formularios de un botón) con el mismo aire entre ellas */
.td-actions .btn-link + .btn-link,
.td-actions .btn-link + form,
.td-actions form + form,
.td-actions form + .btn-link { margin-left: 12px; }
/* Enlaces sueltos dentro de una tabla: subrayado fino para no recargar filas de varias líneas */
:where(.data-table, .dash-table) a:where(:not([class])) {
    font-weight: 500;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--sgi-border-3);
}
:where(.data-table, .dash-table) a:where(:not([class])):hover { text-decoration-color: var(--sgi-amarillo-hover); text-decoration-thickness: 2px; }
.td-empty { padding: 36px; text-align: center; font-style: normal; color: var(--sgi-muted-2); }

/* Celda principal de un listado: el nombre arriba y sus datos de apoyo debajo, en renglones propios.
   Evita una columna por cada dato y es lo que impide que las tablas anchas desborden. */
.td-main { min-width: 220px; }
.td-main strong { display: block; font-weight: 600; color: var(--sgi-text); }
.td-sub { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--sgi-muted); overflow-wrap: anywhere; }
.td-sub.td-mono { font-size: 12px; }
/* Acciones en varios renglones cuando son muchas: sin esto la celda no parte línea */
.td-actions-wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; max-width: 240px; margin-left: auto; white-space: normal; }
.td-actions-wrap .btn-link, .td-actions-wrap form { margin-left: 0 !important; }

.doc-temp, .email-temp { color: var(--sgi-warn-tx); font-style: italic; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    font-size: 13px;
}
.page-link {
    padding: 7px 12px;
    border-radius: var(--sgi-r-xs);
    border: 1px solid var(--sgi-border-3);
    background: var(--sgi-surface);
    color: var(--sgi-carbon);
    font-weight: 600;
    text-decoration: none;
}
.page-link:hover { border-color: var(--sgi-carbon); background: var(--sgi-surface); color: var(--sgi-carbon); }
.page-current { font-family: var(--sgi-mono); font-size: 12px; color: var(--sgi-muted); }

/* ============== Formularios ============== */

.form-card {
    padding: 24px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r-lg);
}
.form-narrow { max-width: 580px; }
.form-section { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--sgi-border-row); }
.form-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 16px; }
.form-section-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--sgi-text);
}
/* Número de sección (01, 02…): se pone a mano en la vista porque muchos títulos no son pasos */
.form-section-num {
    display: block;
    margin-bottom: 4px;
    font-family: var(--sgi-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sgi-muted);
}
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label { font-size: 13px; font-weight: 600; color: var(--sgi-text-2); }
.form-row input:where(:not([type="checkbox"]):not([type="radio"])),
.form-row select,
.form-row textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--sgi-border-3);
    border-radius: var(--sgi-r-sm);
    background-color: var(--sgi-surface);
    color: var(--sgi-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    transition: border-color .15s, box-shadow .15s;
}
.form-row input:where(:not([type="checkbox"]):not([type="radio"])):focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--sgi-carbon);
    background-color: var(--sgi-surface);
    box-shadow: var(--sgi-focus);
}
.form-row input[readonly], .form-row textarea[readonly],
.form-row input:disabled, .form-row select:disabled, .form-row textarea:disabled,
.form-row-readonly input {
    background-color: var(--sgi-surface-3);
    color: var(--sgi-text-3);
    cursor: not-allowed;
}
.form-row input[aria-invalid="true"], .form-row select[aria-invalid="true"], .form-row textarea[aria-invalid="true"],
.form-row .is-invalid, .form-row-error input, .form-row-error select, .form-row-error textarea {
    border-color: var(--sgi-err-dot);
    box-shadow: var(--sgi-focus-err);
}
.form-row input[type="checkbox"], .form-row input[type="radio"] { accent-color: var(--sgi-carbon); }
.form-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}
.form-grid-2 > .form-row { min-width: 0; }
.form-help { font-size: 12px; line-height: 1.45; color: var(--sgi-muted); }
.form-help-warn { color: var(--sgi-warn-tx); font-weight: 500; }
.form-help-error, .form-error { font-size: 12px; color: var(--sgi-danger); }
.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--sgi-border-row);
}
.required { color: var(--sgi-danger); }

.form-checkboxes { display: flex; flex-direction: column; gap: 8px; }
.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r-sm);
    background: var(--sgi-surface);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.checkbox-row:hover { background: var(--sgi-surface-2); border-color: var(--sgi-carbon); }
.checkbox-row input[type="checkbox"] { margin-top: 3px; cursor: pointer; accent-color: var(--sgi-carbon); }
.checkbox-content { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.checkbox-content strong { font-size: 13.5px; font-weight: 600; color: var(--sgi-text); }
.checkbox-content small { font-size: 12px; line-height: 1.45; color: var(--sgi-muted); }
.checkbox-row-prominent { background: var(--sgi-warn-bg); border-color: var(--sgi-warn-bd); }

/* Barra de acciones fija al pie de un formulario largo */
.sticky-actions {
    position: sticky;
    bottom: 16px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 12px 14px 12px 18px;
    border-radius: var(--sgi-r-md);
    background: rgba(48, 47, 42, .96);
    color: var(--sgi-on-dark-2);
    font-size: 13px;
    box-shadow: var(--sgi-shadow-float);
}
.sticky-actions .btn-secondary, .sticky-actions .btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .22);
}
.sticky-actions .btn-secondary:hover, .sticky-actions .btn-outline:hover { border-color: var(--sgi-amarillo); color: var(--sgi-amarillo); }
.sticky-actions-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* Índice lateral de secciones: solo se fija cuando el contenido tiene ancho de sobra */
.section-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r);
    font-size: 13.5px;
}
.section-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--sgi-r-sm);
    color: var(--sgi-text-2);
    font-weight: 500;
    text-decoration: none;
}
.section-nav a:hover { background: var(--sgi-surface-3); }
.section-nav a.active, .section-nav a[aria-current] { background: var(--sgi-surface-3); color: var(--sgi-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--sgi-carbon); }
@media (min-width: 1380px) {
    .section-nav { position: sticky; top: 84px; }
}

/* ============== Página de detalle ============== */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}
.detail-card {
    min-width: 0;
    overflow: hidden;
    padding: 22px 24px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r-lg);
}
.detail-card-wide { grid-column: 1 / -1; }
.detail-title {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sgi-border-row);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--sgi-text);
}
.detail-subtitle {
    margin: 18px 0 8px;
    font-family: var(--sgi-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sgi-muted);
}
.detail-list {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 10px 14px;
    margin: 0;
    min-width: 0;
}
.detail-list dt {
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--sgi-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.detail-list dd {
    min-width: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--sgi-text);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.detail-list dd a { overflow-wrap: anywhere; word-break: break-word; }
.detail-list dd .status-badge { flex-shrink: 0; margin-left: 0; white-space: nowrap; }
.detail-grid-2 { grid-template-columns: 200px 1fr 200px 1fr; gap: 10px 16px; }
.detail-grid-2 dt, .detail-grid-2 dd { min-width: 0; }
.detail-empty { margin: 0; font-size: 13px; font-style: normal; color: var(--sgi-muted-2); }
.detail-collapse {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--sgi-surface-3);
    border-radius: var(--sgi-r-sm);
}
.detail-collapse summary { font-size: 13px; font-weight: 600; color: var(--sgi-text); cursor: pointer; }
.perm-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.perm-tag {
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--sgi-border-3);
    background: var(--sgi-surface);
    font-family: var(--sgi-mono);
    font-size: 11.5px;
    color: var(--sgi-text-2);
}

/* ============== Página de error dentro de la aplicación (403, mantenimiento) ============== */

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: var(--sgi-bg);
}
.error-card {
    max-width: 500px;
    padding: 40px 44px;
    text-align: center;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r-xl);
    box-shadow: none;
}
.error-code {
    margin: 0 0 10px;
    font-family: var(--sgi-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--sgi-muted);
}
.error-title { margin: 0 0 14px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--sgi-text); }
.error-message { margin-bottom: 24px; font-size: 14.5px; line-height: 1.6; color: var(--sgi-muted); }
.error-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ============== Wizard de productos [B7-WIZ-COMPACT] ==============
   Solo reduce márgenes verticales para evitar desplazamiento excesivo; no comprime la letra. */

.wiz-compact .page-header { margin-bottom: 16px !important; }
.wiz-compact .page-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
.wiz-compact .wizard-content .form-row { margin-bottom: 12px !important; }
.wiz-compact .wizard-content .form-card { padding: 16px 20px !important; margin-bottom: 12px !important; }
.wiz-compact .wizard-content .form-grid-2 { gap: 14px !important; }
.wiz-compact .wizard-content .form-section { margin-bottom: 18px !important; padding-bottom: 14px !important; }

/* ============== Pantallas angostas ============== */

@media (max-width: 1100px) {
    /* Columnas de apoyo: se ocultan para que la tabla quepa sin desplazamiento lateral */
    .col-optional { display: none; }
    .app-topbar { padding: 12px 20px; }
    .app-main { padding: 24px 20px 56px; }
    .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .sidebar-section-content.is-wide { width: 420px; }
}

@media (max-width: 768px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        left: calc(-1 * var(--sgi-sidebar-w) - 8px);
        height: 100vh;
        transition: left .25s;
        box-shadow: var(--sgi-shadow-float);
    }
    .app-sidebar.open { left: 0; }
    /* En el teléfono el menú siempre va completo, aunque en el escritorio se dejara colapsado */
    .app-shell.sidebar-collapsed .app-sidebar { width: var(--sgi-sidebar-w); }
    .sidebar-collapse-btn { display: none; }
    .topbar-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
    .topbar-user-name { display: none; }
    .app-topbar { padding: 10px 16px; }
    .app-main { padding: 18px 16px 50px; }
    .page-title { font-size: 24px; }
    .kpi-grid, .kpi-grid-2, .kpi-grid-4 { grid-template-columns: 1fr; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .detail-list { grid-template-columns: 1fr; gap: 4px 0; }
    .detail-list dd { margin-bottom: 8px; }
    .detail-grid-2 { grid-template-columns: 1fr; }
    .dash-greeting { padding: 24px 22px; }

    /* El panel flotante pasa a acordeón dentro del menú */
    .sidebar-section-content,
    .sidebar-section-content.is-wide {
        position: static;
        width: auto;
        max-width: none;
        max-height: none;
        margin: 2px 4px 6px;
        border-radius: var(--sgi-r-sm);
        box-shadow: none;
    }
    .sidebar-section-content.is-wide .sidebar-fly-grid { grid-template-columns: minmax(0, 1fr); }
    .sidebar-section-content.is-wide.has-subs .sidebar-sublink { grid-column: 1; }
    .sidebar-fly-head { display: none; }
}

@media print {
    .app-sidebar, .app-topbar, .sticky-actions, .app-viendo-como { display: none !important; }
    .app-main { max-width: none; padding: 0; }
    .app-body { background: #fff; }
}

/* =====================================================================
   PANELES DE INICIO · [SGI-UI-2026] Fase 2
   Antes cada panel traía su propio bloque de estilos con las mismas reglas
   y otro prefijo (dd-, dc-, da-). Ahora comparten las clases dash-*; los
   componentes propios del panel directivo (dv-), del de consulta (av-) y de
   «Mi producción» (mp-) conservan su nombre.
   ===================================================================== */

/* Banda de bienvenida: la red de nodos va debajo del texto */
.dash-greeting > *:not(.dash-greeting-red) { position: relative; z-index: 1; }
.dash-greeting-red { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.dash-greeting::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(48, 47, 42, .88) 0%, rgba(48, 47, 42, .55) 55%, rgba(48, 47, 42, .15) 100%);
}
.dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: var(--sgi-r-pill);
    background: var(--sgi-amarillo);
    color: var(--sgi-carbon);
    font-family: var(--sgi-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}
.dash-section-title { display: flex; align-items: center; gap: 8px; margin-top: 28px; }
.dash-section-title .dash-pill { margin-left: 0; }

/* Indicadores: acento superior por tipo y tarjeta enlazada */
.dash-stat-link { cursor: pointer; }
.dash-stat-link:hover { background: var(--sgi-surface-2); }
.dash-stat-link .dash-stat-label::after { content: " \2192"; color: var(--sgi-muted-2); }
.dash-stat-card.k-yel  { box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-amarillo); }
.dash-stat-card.k-amb  { box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-warn-dot); }
.dash-stat-card.k-grn  { box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-ok-dot); }
.dash-stat-card.k-red  { box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-err-dot); }
.dash-stat-card.k-blue,
.dash-stat-card.k-pur  { box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-info-dot); }

/* Tarjetas de contenido en dos columnas */
.dash-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.dash-card {
    min-width: 0;
    padding: 20px 22px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r);
}
.dash-card > h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sgi-border-row);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--sgi-text);
}
.dash-card > h3 small { font-weight: 400; font-size: 12px; color: var(--sgi-muted); }
.dash-card-warn { background: var(--sgi-warn-bg); border-color: var(--sgi-warn-bd); color: var(--sgi-warn-tx); }
.dash-card-warn > h3 { color: var(--sgi-warn-tx); border-bottom-color: var(--sgi-warn-bd); }
.dash-card-warn p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* Aviso de una tarea: estado por el punto y el borde, no por un ícono de color */
.dash-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px 14px;
    border-radius: var(--sgi-r-sm);
    border: 1px solid var(--sgi-border-2);
    background: var(--sgi-surface-2);
}
.dash-note:last-child { margin-bottom: 0; }
.dash-note.km { background: var(--sgi-warn-bg); border-color: var(--sgi-warn-bd); }
.dash-note.kr { background: var(--sgi-err-bg);  border-color: var(--sgi-err-bd); }
.dash-note.kg { background: var(--sgi-ok-bg);   border-color: var(--sgi-ok-bd); }
.dash-note-icon {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 0;
    background: var(--sgi-neutral-dot);
}
.dash-note.km .dash-note-icon { background: var(--sgi-warn-dot); }
.dash-note.kr .dash-note-icon { background: var(--sgi-err-dot); }
.dash-note.kg .dash-note-icon { background: var(--sgi-ok-dot); }
.dash-note-body { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--sgi-text-2); overflow-wrap: anywhere; }
.dash-note-body strong { color: var(--sgi-text); font-weight: 600; }
.dash-note-body .meta { margin-top: 3px; font-size: 12px; color: var(--sgi-muted); }
.dash-note-body a { color: var(--sgi-text); font-weight: 600; }

.dash-empty { padding: 26px 12px; text-align: center; font-size: 13.5px; color: var(--sgi-muted); }
.dash-empty-icon { display: none; }

/* Tabla sencilla dentro de una tarjeta */
.dash-list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dash-list th {
    padding: 9px 10px;
    text-align: left;
    background: var(--sgi-surface-3);
    font-family: var(--sgi-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sgi-muted);
}
.dash-list td { padding: 10px; border-bottom: 1px solid var(--sgi-border-row); vertical-align: top; }
.dash-list tr:last-child td { border-bottom: 0; }
.dash-list .td-sub { font-size: 12px; }

.dash-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--sgi-r-pill);
    background: var(--sgi-neutral-bg);
    color: var(--sgi-neutral-tx);
    font-family: var(--sgi-mono);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
/* Categorías MinCiencias: misma convención en todos los paneles y en «Mi producción» */
.dash-cat.GNC, .mp-badge.cat-GNC { background: var(--sgi-carbon); color: var(--sgi-amarillo); }
.dash-cat.DTI, .mp-badge.cat-DTI { background: var(--sgi-text-3); color: #fff; }
.dash-cat.ASC, .mp-badge.cat-ASC { background: var(--sgi-amarillo); color: var(--sgi-carbon); }
.dash-cat.DPC, .mp-badge.cat-DPC { background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); }
.dash-cat.FRH, .mp-badge.cat-FRH { background: var(--sgi-neutral-bg); color: var(--sgi-neutral-tx); }

@media (max-width: 900px) {
    .dash-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Panel directivo (dv-) ---------- */
.dv-queue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0 0 8px; }
.dv-queue-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
    border-radius: var(--sgi-r);
    box-shadow: inset 4px 0 0 var(--sgi-neutral-dot);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.dv-queue-card:hover { transform: translateY(-2px); border-color: transparent; box-shadow: inset 4px 0 0 var(--sgi-amarillo), var(--sgi-shadow-hover); }
.dv-queue-label { font-family: var(--sgi-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sgi-muted); }
.dv-queue-desc  { margin-top: 4px; font-size: 13px; color: var(--sgi-muted); }
.dv-queue-desc strong { color: var(--sgi-warn-tx); }
.dv-queue-num   { font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--sgi-text); }
.dv-queue-warn  { box-shadow: inset 4px 0 0 var(--sgi-warn-dot); }
.dv-queue-info  { box-shadow: inset 4px 0 0 var(--sgi-carbon); }
.dv-queue-viol  { box-shadow: inset 4px 0 0 var(--sgi-info-dot); }
.dv-queue-gray  { box-shadow: inset 4px 0 0 var(--sgi-neutral-dot); }
.dv-ok-note {
    margin: 0 0 8px;
    padding: 14px 18px;
    border-radius: var(--sgi-r-sm);
    border: 1px solid var(--sgi-ok-bd);
    background: var(--sgi-ok-bg);
    color: var(--sgi-ok-tx);
    font-size: 13.5px;
}

.dv-pipe { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 0 0 8px; }
.dv-pipe-stage {
    position: relative;
    flex: 1;
    min-width: 130px;
    padding: 16px 14px;
    text-align: center;
    background: var(--sgi-surface);
    border: 1px solid var(--sgi-border);
}
.dv-pipe-stage:first-child { border-radius: var(--sgi-r) 0 0 var(--sgi-r); }
.dv-pipe-stage.dv-pipe-last { border-radius: 0 var(--sgi-r) var(--sgi-r) 0; }
.dv-pipe-stage + .dv-pipe-stage { border-left: none; }
.dv-pipe-stage::after {
    content: "\203A";
    position: absolute;
    right: -6px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--sgi-muted-2);
}
.dv-pipe-stage.dv-pipe-last::after { content: ""; }
.dv-pipe-num { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.04em; color: var(--sgi-text); }
.dv-pipe-lbl { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--sgi-muted); }
.dv-pipe-hist { display: block; margin-top: 3px; font-size: 11px; color: var(--sgi-warn-tx); }
.dv-pipe-stage.dv-pipe-aval .dv-pipe-num { color: var(--sgi-ok-tx); }
.dv-pipe-rej {
    min-width: 110px;
    margin-left: 12px;
    padding: 16px 14px;
    text-align: center;
    background: var(--sgi-err-bg);
    border: 1px solid var(--sgi-err-bd);
    border-radius: var(--sgi-r);
}
.dv-pipe-rej .dv-pipe-num { color: var(--sgi-err-tx); }

.dv-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 0 0 8px; }
.dv-card { padding: 20px 22px; background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r); }
.dv-card h3 { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--sgi-text); }
.dv-card h3 small { font-weight: 400; font-size: 12px; color: var(--sgi-muted); }

.dv-bar-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 12.5px; }
.dv-bar-key { flex-shrink: 0; width: 36px; font-family: var(--sgi-mono); font-size: 11.5px; font-weight: 500; color: var(--sgi-text-2); }
.dv-bar-track { position: relative; flex: 1; height: 14px; overflow: hidden; border-radius: var(--sgi-r-pill); background: var(--sgi-border-2); }
.dv-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--sgi-r-pill); background: var(--sgi-border-3); }
.dv-bar-aval { position: absolute; inset: 0 auto 0 0; border-radius: var(--sgi-r-pill); background: var(--sgi-carbon); }
.dv-bar-val { flex-shrink: 0; width: 90px; text-align: right; font-family: var(--sgi-mono); font-size: 11.5px; color: var(--sgi-muted); }

.dv-cols { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 8px; }
.dv-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.dv-col-bar { width: 100%; max-width: 46px; min-height: 3px; border-radius: 6px 6px 0 0; background: var(--sgi-carbon); border-bottom: 3px solid var(--sgi-amarillo); }
.dv-col-num { font-family: var(--sgi-mono); font-size: 11px; font-weight: 500; color: var(--sgi-text); }
.dv-col-year { font-family: var(--sgi-mono); font-size: 10.5px; color: var(--sgi-muted); }

.dv-prog-row { display: flex; align-items: center; gap: 10px; margin: 9px 0; font-size: 13px; }
.dv-prog-rank {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sgi-carbon);
    color: var(--sgi-amarillo);
    font-family: var(--sgi-mono);
    font-size: 10.5px;
    font-weight: 600;
}
.dv-prog-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sgi-text-2); }
.dv-prog-bar { flex-shrink: 0; width: 110px; height: 8px; overflow: hidden; border-radius: var(--sgi-r-pill); background: var(--sgi-border-2); }
.dv-prog-fill { height: 100%; border-radius: var(--sgi-r-pill); background: var(--sgi-amarillo-hover); }
.dv-prog-num { flex-shrink: 0; width: 40px; text-align: right; font-family: var(--sgi-mono); font-size: 12px; font-weight: 500; color: var(--sgi-text); }

.dv-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.dv-mini { padding: 12px 14px; border-radius: var(--sgi-r-sm); border: 1px solid var(--sgi-border-2); background: var(--sgi-surface-2); }
.dv-mini-num { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--sgi-text); }
.dv-mini-lbl { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--sgi-muted); }
.dv-mini-ok .dv-mini-num { color: var(--sgi-ok-tx); }
.dv-mini-warn .dv-mini-num { color: var(--sgi-warn-tx); }

@media (max-width: 700px) {
    .dv-pipe { flex-direction: column; }
    .dv-pipe-stage { border-radius: 0 !important; border-left: 1px solid var(--sgi-border) !important; }
    .dv-pipe-stage::after { content: ""; }
    .dv-pipe-rej { margin-left: 0; margin-top: 10px; }
}

/* ---------- Panel de consulta y auditoría (av-) ---------- */
.av-wrap { max-width: 1180px; }
.av-chip {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 12px;
    border-radius: var(--sgi-r-pill);
    border: 1px solid rgba(235, 225, 0, .3);
    background: rgba(235, 225, 0, .06);
    color: #E9E5D6;
    font-family: var(--sgi-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.av-section-title { margin: 28px 0 12px; font-family: var(--sgi-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sgi-muted); }
.av-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    padding: 1px;
    overflow: hidden;
    border-radius: var(--sgi-r-lg);
    background: var(--sgi-surface);
    box-shadow: inset 0 0 0 1px var(--sgi-border);
}
.av-kpi { padding: 18px 20px; background: var(--sgi-surface); box-shadow: 0 0 0 1px var(--sgi-border); }
.av-kpi .n { font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; color: var(--sgi-text); }
.av-kpi .l { margin-top: 4px; font-size: 12.5px; color: var(--sgi-muted); }
.av-kpi.alt .n { color: var(--sgi-ok-tx); }
.av-grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.av-card { padding: 20px 22px; background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r); }
.av-card h3 { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--sgi-text); }
.av-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.av-bar-row .cat { flex-shrink: 0; width: 150px; color: var(--sgi-text-2); }
.av-bar-track { position: relative; flex: 1; height: 14px; overflow: hidden; border-radius: var(--sgi-r-pill); background: var(--sgi-border-2); }
.av-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--sgi-r-pill); background: var(--sgi-border-3); }
.av-bar-fill.aval { background: var(--sgi-carbon); }
.av-bar-num { flex-shrink: 0; width: 84px; text-align: right; font-family: var(--sgi-mono); font-size: 11.5px; color: var(--sgi-muted); }
.av-pipe { display: flex; flex-wrap: wrap; gap: 8px; }
.av-pipe-step { flex: 1; min-width: 120px; padding: 12px 14px; text-align: center; border-radius: var(--sgi-r-sm); border: 1px solid var(--sgi-border-2); background: var(--sgi-surface-2); }
.av-pipe-step .n { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--sgi-text); }
.av-pipe-step .l { margin-top: 2px; font-size: 11.5px; color: var(--sgi-muted); }
.av-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.av-link {
    display: block;
    padding: 18px 20px;
    border-radius: var(--sgi-r);
    border: 1px solid var(--sgi-border);
    background: var(--sgi-surface);
    color: var(--sgi-text-2);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.av-link:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--sgi-shadow-hover); }
.av-link .ic { font-size: 20px; filter: grayscale(1); }
.av-link .t { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--sgi-text); }
.av-link .d { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--sgi-muted); }
.av-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.av-table th { padding: 9px 10px; text-align: left; background: var(--sgi-surface-3); font-family: var(--sgi-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--sgi-muted); }
.av-table td { padding: 9px 10px; border-top: 1px solid var(--sgi-border-row); color: var(--sgi-text-2); }
.av-note { margin-top: 20px; padding: 14px 18px; border-radius: var(--sgi-r-sm); border: 1px solid var(--sgi-border); background: var(--sgi-surface-2); font-size: 13.5px; line-height: 1.6; color: var(--sgi-text-2); }
@media (max-width: 860px) { .av-grid2 { grid-template-columns: 1fr; } }

/* ---------- Mi producción (mp-) ---------- */
.mp-wrap { min-height: 0; margin: 0; padding: 0; background: none; }
.mp-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.mp-header h1 { margin: 0 0 6px; font-size: 29px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--sgi-text); }
.mp-header p { margin: 0; max-width: 760px; font-size: 14px; line-height: 1.5; color: var(--sgi-muted); }
.mp-pill-print {
    padding: 11px 16px;
    border-radius: var(--sgi-r-sm);
    border: 1px solid var(--sgi-border-3);
    background: var(--sgi-surface);
    color: var(--sgi-carbon);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.mp-pill-print:hover { border-color: var(--sgi-carbon); background: var(--sgi-surface); }

.mp-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border-radius: var(--sgi-r);
    border: 1px solid var(--sgi-border);
    background: var(--sgi-surface);
    box-shadow: none;
}
.mp-filters label { display: block; margin-bottom: 5px; font-family: var(--sgi-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--sgi-muted); }
.mp-filters select, .mp-filters input {
    min-width: 140px;
    padding: 9px 10px;
    border-radius: var(--sgi-r-xs);
    border: 1px solid var(--sgi-border-3);
    background: var(--sgi-surface);
    color: var(--sgi-text);
    font-family: inherit;
    font-size: 13px;
}
.mp-filters select:focus, .mp-filters input:focus { outline: none; border-color: var(--sgi-carbon); box-shadow: var(--sgi-focus); }
.mp-filters .mp-fil { display: flex; flex-direction: column; min-width: 170px; }
.mp-filters .mp-fil label small { margin-left: 4px; font-family: var(--sgi-font); font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sgi-muted-2); }
.mp-filters select[multiple] { min-height: 92px; padding: 4px; }
.mp-filters select[multiple] option { padding: 4px 8px; border-radius: 5px; }
.mp-filters select[multiple] option:checked { background: var(--sgi-carbon) linear-gradient(0deg, var(--sgi-carbon) 0%, var(--sgi-carbon) 100%); color: var(--sgi-amarillo); }
.mp-btn { padding: 10px 16px; border-radius: var(--sgi-r-sm); border: 1px solid transparent; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mp-btn-pri { background: var(--sgi-carbon); color: #fff; }
.mp-btn-pri:hover { background: var(--sgi-carbon-3); }
.mp-btn-sec { display: inline-block; background: var(--sgi-surface); color: var(--sgi-carbon); border-color: var(--sgi-border-3); text-decoration: none; }
.mp-btn-sec:hover { border-color: var(--sgi-carbon); }

.mp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 1px;
    margin-bottom: 16px;
    padding: 1px;
    overflow: hidden;
    border-radius: var(--sgi-r-lg);
    background: var(--sgi-surface);
    box-shadow: inset 0 0 0 1px var(--sgi-border);
}
.mp-kpi { padding: 18px 20px; border: 0; border-radius: 0; background: var(--sgi-surface); box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-carbon); }
.mp-kpi-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.mp-kpi-link:hover { background: var(--sgi-surface-2); }
.mp-kpi.k-pub, .mp-kpi.k-cat { box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-amarillo); }
.mp-kpi.k-acep { box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-amarillo-hover); }
.mp-kpi.k-som  { box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-neutral-dot); }
.mp-kpi.k-anio { box-shadow: 0 0 0 1px var(--sgi-border), inset 0 3px 0 var(--sgi-warn-dot); }
.mp-kpi-label { font-family: var(--sgi-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sgi-muted); }
.mp-kpi-val   { margin-top: 8px; font-size: 31px; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; color: var(--sgi-text); }
.mp-kpi-sub   { margin-top: 6px; font-size: 12.5px; color: var(--sgi-muted); }

.mp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-bottom: 16px; }
.mp-card { min-width: 0; padding: 20px 22px; border-radius: var(--sgi-r); border: 1px solid var(--sgi-border); background: var(--sgi-surface); box-shadow: none; }
.mp-card h3 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--sgi-border-row); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--sgi-text); }
.mp-c-6 { grid-column: span 6; }
.mp-c-4 { grid-column: span 4; }
.mp-c-8 { grid-column: span 8; }
.mp-c-12 { grid-column: span 12; }
.mp-chart-wrap { position: relative; height: 230px; }

.mp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-table thead th { padding: 9px 10px; text-align: left; background: var(--sgi-surface-3); border-bottom: 1px solid var(--sgi-border-row); font-family: var(--sgi-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--sgi-muted); }
.mp-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--sgi-border-row); vertical-align: top; }
.mp-table tbody tr:hover { background: var(--sgi-surface-2); }
.mp-badge { display: inline-block; padding: 2px 9px; border-radius: var(--sgi-r-pill); font-family: var(--sgi-mono); font-size: 11px; font-weight: 500; white-space: nowrap; }
.mp-badge.est-aval { background: var(--sgi-ok-bg); color: var(--sgi-ok-tx); }
.mp-badge.est-pub  { background: var(--sgi-amarillo-suave); color: var(--sgi-text-2); }
.mp-badge.est-acep { background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); }
.mp-badge.est-som  { background: var(--sgi-neutral-bg); color: var(--sgi-neutral-tx); }

@media (max-width: 980px) { .mp-c-6, .mp-c-4, .mp-c-8 { grid-column: span 12; } }
@media print {
    .mp-pill-print, .mp-filters, .mp-btn { display: none !important; }
    .mp-kpis, .mp-card { break-inside: avoid; }
}

/* Íconos sueltos (un emoji como único contenido): un solo tono y algo atenuados.
   .sgi-ico la pone el restilizador de la Fase 3; las demás son clases que ya usaban las vistas. */
.sgi-ico, .dash-action-icon, .empty-state-icon, .av-link .ic, .wizard-nav-icon, .asis-proceso-ico,
.linea-info-empty-icon, .icono, .ic { filter: grayscale(1) contrast(1.05); opacity: .85; }

/* ---- 30_auth.css ---- */
/* =====================================================================
   SGI · Acceso (layout minimal) · [SGI-UI-2026]
   Inicio de sesión, recuperación y cambio obligatorio de contraseña.
   Dos paneles: presentación en carbón con la red de nodos animada a la
   izquierda y formulario a la derecha; en pantallas angostas la
   presentación se reduce a una franja y conserva la animación.
   Los tokens vienen de sgi.css; cada var() lleva su valor de respaldo para
   que el acceso se vea bien aunque esa hoja no cargue.
   ===================================================================== */

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sgi-font, 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif);
    color: var(--sgi-text, #24231D);
    background: var(--sgi-bg, #F4F2EA);
    -webkit-font-smoothing: antialiased;
}

.auth-shell { min-height: 100vh; display: flex; flex-wrap: wrap; }

/* ============== Panel de presentación ============== */

.auth-hero {
    position: relative;
    overflow: hidden;
    flex: 1 1 520px;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 40px 48px;
    background: var(--sgi-carbon, #302F2A);
    color: #fff;
}
/* Red de nodos animada (assets/js/sgi-red.js): va debajo de la retícula y del velo */
.auth-hero-red { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
/* Retícula tenue y velo: dan profundidad y aseguran el contraste del texto sobre la red */
.auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 40% 50%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 70% at 40% 50%, #000 20%, transparent 80%);
}
.auth-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(235, 225, 0, .10), transparent 38%),
        linear-gradient(90deg, rgba(48, 47, 42, .2), rgba(48, 47, 42, .75));
}
.auth-hero > *:not(.auth-hero-red) { position: relative; z-index: 1; }

.auth-hero-brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.auth-hero-mark {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sgi-amarillo, #EBE100);
    box-shadow: 0 0 28px rgba(235, 225, 0, .45);
}
.auth-hero-body { display: flex; flex-direction: column; gap: 22px; max-width: 520px; }
.auth-hero-eyebrow {
    align-self: flex-start;
    padding: 7px 14px;
    border: 1px solid rgba(235, 225, 0, .3);
    border-radius: 999px;
    background: rgba(235, 225, 0, .06);
    font-family: var(--sgi-mono, 'Geist Mono', ui-monospace, Consolas, monospace);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #E9E5D6;
}
.auth-hero-title {
    margin: 0;
    font-size: clamp(36px, 4.4vw, 58px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.04em;
}
.auth-hero-title span { color: var(--sgi-amarillo, #EBE100); }
.auth-hero-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--sgi-on-dark, #CFCBBE); }
.auth-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.auth-hero-chips li {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--sgi-on-dark-2, #DAD6C9);
}
.auth-hero-foot {
    font-family: var(--sgi-mono, 'Geist Mono', ui-monospace, Consolas, monospace);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sgi-on-dark-3, #B7B3A6);
}

/* ============== Panel del formulario ============== */

.auth-panel {
    flex: 1 1 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}
.login-card {
    width: 100%;
    max-width: 400px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.login-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    color: var(--sgi-muted, #6D695C);
    font-size: 12.5px;
}
.login-header svg { display: none; }
.login-header h1 {
    margin: 0;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--sgi-amarillo, #EBE100);
    color: var(--sgi-carbon, #302F2A);
    font-family: var(--sgi-mono, 'Geist Mono', ui-monospace, Consolas, monospace);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
}
.login-mark {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--sgi-amarillo, #EBE100);
    color: var(--sgi-carbon, #302F2A);
    font-family: var(--sgi-mono, 'Geist Mono', ui-monospace, Consolas, monospace);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
}
.login-header small { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--sgi-muted, #6D695C); }
.login-body { padding: 0; }
.login-title, .auth-title {
    margin: 0 0 22px;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.15;
    text-align: left;
    color: var(--sgi-text, #24231D);
}
.auth-subtitle { margin: -12px 0 22px; font-size: 14px; line-height: 1.55; color: var(--sgi-muted, #6D695C); }

.form-group, .auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label, .auth-field label { font-size: 13px; font-weight: 600; color: var(--sgi-text-2, #3D3C36); }
.form-group input, .auth-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sgi-border-3, #DCD7C7);
    border-radius: 10px;
    background: #fff;
    color: var(--sgi-text, #24231D);
    font-family: inherit;
    font-size: 14.5px;
    transition: border-color .15s, box-shadow .15s;
}
.form-group input::placeholder, .auth-field input::placeholder { color: var(--sgi-muted-2, #8E8A7C); }
.form-group input:focus, .auth-field input:focus {
    outline: none;
    border-color: var(--sgi-carbon, #302F2A);
    box-shadow: 0 0 0 3px rgba(235, 225, 0, .45);
}
.auth-help-text { font-size: 12px; line-height: 1.45; color: var(--sgi-muted, #6D695C); }

/* Acción principal del acceso: la única amarilla de la pantalla */
.btn-login, .auth-btn-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 6px;
    padding: 14px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--sgi-amarillo, #EBE100);
    color: var(--sgi-carbon, #302F2A);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-login::after, .auth-btn-primary::after { content: "\2192"; font-weight: 400; }
.btn-login:hover, .auth-btn-primary:hover { background: var(--sgi-amarillo-hover, #D9CF00); }
.auth-btn { font-family: inherit; cursor: pointer; }
.auth-form-secondary { margin-top: 10px; }
.auth-btn-secondary {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--sgi-border-3, #DCD7C7);
    border-radius: 10px;
    background: #fff;
    color: var(--sgi-carbon, #302F2A);
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .15s;
}
.auth-btn-secondary:hover { border-color: var(--sgi-carbon, #302F2A); }

a:focus-visible, button:focus-visible {
    outline: 3px solid var(--sgi-amarillo, #EBE100);
    outline-offset: 2px;
}

.alert { margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; font-size: 13.5px; line-height: 1.5; }
.alert-error   { background: var(--sgi-err-bg, #FBEAE7);  color: var(--sgi-err-tx, #8A2E1F);  border-color: var(--sgi-err-bd, #F0C4BC); }
.alert-success { background: var(--sgi-ok-bg, #E8F2EA);   color: var(--sgi-ok-tx, #1F5133);   border-color: var(--sgi-ok-bd, #B9D8C2); }
.alert-warn    { background: var(--sgi-warn-bg, #FFF4DE); color: var(--sgi-warn-tx, #6E4700); border-color: var(--sgi-warn-bd, #F1D08E); }

.login-help {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    text-align: left;
    color: var(--sgi-muted, #6D695C);
}
.login-help-top { margin: -10px 0 18px; }
.login-help a {
    color: var(--sgi-text, #24231D);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--sgi-amarillo-hover, #D9CF00);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.login-help a:hover { text-decoration-color: var(--sgi-carbon, #302F2A); }

.login-footer {
    margin-top: 28px;
    padding: 16px 0 0;
    border-top: 1px solid var(--sgi-border, #E4DFD2);
    background: none;
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sgi-muted, #6D695C);
}
.login-footer strong { color: var(--sgi-text-2, #3D3C36); }

@media (max-width: 900px) {
    .auth-hero { flex-basis: 100%; min-height: 0; padding: 28px 24px; gap: 20px; }
    .auth-hero-title { font-size: 32px; }
    .auth-hero-text, .auth-hero-chips, .auth-hero-foot { display: none; }
    .auth-panel { flex-basis: 100%; align-items: flex-start; padding: 32px 20px 48px; }
}

/* ---- 40_sistema.css ---- */
/* SGI · [SISTEMA-2026] Configuración del sistema: pestañas, lotes y detalle de migraciones.
   [SGI-UI-2026] Solo cambia el aspecto: usa los tokens de sgi.css. Los contadores del menú lateral
   (.sidebar-badge-num) pasaron a sgi-app.css, junto al resto del menú. */
.sis-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 20px; border-bottom: 1px solid var(--sgi-border); }
.sis-tab { padding: 10px 14px; font-size: 13.5px; font-weight: 500; color: var(--sgi-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.sis-tab:hover { color: var(--sgi-text); }
.sis-tab.active { color: var(--sgi-text); font-weight: 600; border-bottom-color: var(--sgi-carbon); }

.sis-lotes { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--sgi-border); border-radius: var(--sgi-r); background: var(--sgi-surface); }
.sis-lotes-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; }
.sis-lotes-pct { font-family: var(--sgi-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--sgi-muted); }
.sis-lotes-barra { height: 8px; margin: 12px 0; border-radius: var(--sgi-r-pill); background: var(--sgi-border-2); overflow: hidden; }
.sis-lotes-barra > span { display: block; height: 100%; width: 0; border-radius: var(--sgi-r-pill); background: var(--sgi-carbon); transition: width .3s ease; }
.sis-lotes-activo .sis-lotes-barra > span { background-image: linear-gradient(90deg, rgba(235,225,0,0) 0, rgba(235,225,0,.55) 50%, rgba(235,225,0,0) 100%); background-size: 200% 100%; animation: sis-brillo 1.2s linear infinite; }
@keyframes sis-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sis-lotes-msg { font-size: 13px; color: var(--sgi-muted); min-height: 18px; }
.sis-lotes-msg.sis-lotes-error { color: var(--sgi-err-tx); font-weight: 600; }
.sis-lotes-log { margin: 10px 0 0; max-height: 260px; overflow: auto; padding: 12px 14px; font-family: var(--sgi-mono); font-size: 12px; line-height: 1.55; background: var(--sgi-carbon-3); color: var(--sgi-on-dark-2); border-radius: var(--sgi-r-sm); white-space: pre-wrap; }

.sis-code { margin: 8px 0; padding: 12px 14px; font-family: var(--sgi-mono); font-size: 12px; line-height: 1.5; background: var(--sgi-surface-3); border: 1px solid var(--sgi-border-2); border-radius: var(--sgi-r-sm); overflow: auto; white-space: pre-wrap; word-break: break-word; }
.sis-fallida { box-shadow: inset 3px 0 0 var(--sgi-err-dot); }
.sis-igual td { color: var(--sgi-muted-2); }

/* ---- 50_summa.css ---- */
/* =====================================================================
   SUMMA UI v1 · Componentes nuevos de la plataforma SUMMA
   Solo consumen tokens de 00_tokens.css; cualquier aplicativo puede usarlos.
   ===================================================================== */

/* Franja de entorno: pruebas y local nunca se confunden con producción. */
.summa-entorno {
    position: sticky; top: 0; z-index: 1000;
    background: repeating-linear-gradient(135deg, var(--sgi-amarillo) 0 14px, #E0D600 14px 28px);
    color: var(--sgi-carbon); font: 600 11px/1.4 var(--sgi-mono); letter-spacing: .08em; text-transform: uppercase;
    text-align: center; padding: 4px 12px;
}

/* Portal: tarjetas de aplicativos. */
.summa-apps .dash-action-card { position: relative; min-height: 168px; }
.summa-app-code {
    font: 600 13px/1 var(--sgi-mono); letter-spacing: .02em;
    min-width: 56px; padding: 0 8px; width: auto;
}
.summa-app-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.dash-action-card.dash-action-disabled { cursor: default; opacity: .72; }

.summa-pie { margin: 32px 0 8px; color: var(--sgi-muted-2); font: 12px/1.4 var(--sgi-mono); text-align: right; }

/* Estructura: una tarjeta por institución con su tabla de hubs. */
.summa-bloque { margin-bottom: 20px; }
.summa-bloque-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.summa-bloque-acc { display: flex; align-items: center; gap: 12px; }

/* Ficha de persona. */
.summa-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sgi-border-row); }
.summa-inline { display: flex; gap: 8px; align-items: center; }
.summa-asignar { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sgi-border-row); }
.summa-temporal-clave {
    display: inline-block; margin: 4px 0; padding: 4px 10px; border-radius: var(--sgi-r-xs);
    background: var(--sgi-surface); border: 1px dashed var(--sgi-warn-bd); font: 600 16px/1.4 var(--sgi-mono); letter-spacing: .06em;
    user-select: all;
}

/* Instalador: lista de requisitos. */
.summa-requisitos { list-style: none; margin: 0 0 18px; padding: 0; font-size: 13px; }
.summa-requisitos li { padding: 6px 0; border-bottom: 1px solid var(--sgi-border-row); }
.summa-requisitos li.ok { color: var(--sgi-ok-tx); }
.summa-requisitos li.falla { color: var(--sgi-err-tx); }
.summa-requisitos li.aviso { color: var(--sgi-warn-tx); }
.summa-requisitos small { display: block; color: var(--sgi-muted); margin-left: 18px; word-break: break-all; }

.pagination { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 18px 0; }

/* Enlace sobre fondos oscuros (bandas de bienvenida): amarillo subrayado, sin fondo. */
.summa-enlace-claro { color: var(--sgi-amarillo); text-decoration: underline; text-underline-offset: 3px; background: none; }
.summa-enlace-claro:hover { color: #fff; background: none; }

@media (max-width: 900px) { .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------------
   Indicadores (stat tiles) · [SUMMA-UI-2026]
   Etiqueta en tipo normal, valor 30px seminegrita con cifras proporcionales, contexto en tinta
   secundaria y, si aplica, una barra de proporción (relleno acento sobre una pista del mismo tono).
   El estado de alerta usa el ámbar reservado y siempre va con ícono + texto, nunca solo color.
   --------------------------------------------------------------------- */
.summa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.summa-stat {
    display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; min-height: 148px;
    background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-md);
    transition: border-color .2s, box-shadow .2s;
}
.summa-stat:hover { border-color: var(--sgi-border-3); box-shadow: 0 12px 28px -22px rgba(48, 47, 42, .45); }
.summa-stat-cab { display: flex; align-items: center; gap: 10px; }
.summa-stat-ico {
    width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center;
    background: var(--sgi-amarillo-suave); color: var(--sgi-carbon);
}
.summa-stat-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.summa-stat-label { font-size: 13px; font-weight: 500; color: var(--sgi-text-3); }
.summa-stat-valor { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--sgi-text); }
.summa-stat-valor small { font-size: 14px; font-weight: 500; color: var(--sgi-muted); letter-spacing: 0; margin-left: 4px; }
.summa-stat-sub { margin-top: auto; font-size: 12.5px; color: var(--sgi-muted); display: flex; align-items: center; gap: 6px; }
.summa-stat-barra { height: 6px; border-radius: 999px; background: var(--sgi-amarillo-suave); overflow: hidden; }
.summa-stat-barra span { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: var(--sgi-carbon); }
.summa-stat.is-alerta { border-color: var(--sgi-warn-bd); }
.summa-stat.is-alerta .summa-stat-ico { background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); }
.summa-stat.is-alerta .summa-stat-barra { background: var(--sgi-warn-bg); }
.summa-stat.is-alerta .summa-stat-barra span { background: var(--sgi-warn-dot); }
.summa-stat.is-alerta .summa-stat-sub { color: var(--sgi-warn-tx); font-weight: 500; }
.summa-stat-ok { color: var(--sgi-ok-tx); }
@media (max-width: 1100px) { .summa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .summa-stats { grid-template-columns: 1fr; } }

/* ---- 60_selector.css ---- */
/* =====================================================================
   SUMMA UI v1 · Selector de aplicativos (suite) · [SUMMA-UI-2026]
   Pantalla completa sobre carbón: red de nodos, velo radial, cabecera, tarjetas de vidrio con estados,
   tarjeta única con redirección y caso vacío. Handoff: SUMMA/design_handoff_summa_selector.
   Cualquier aplicativo puede reutilizarlo: solo depende de estas clases (.sel-*) y de los tokens.
   ===================================================================== */

:root {
    --summa-amarillo: var(--sgi-amarillo);
    --summa-on-dark: #CFCBBE;
    --summa-on-dark-2: #DAD6C9;
    --summa-on-dark-3: #B7B3A6;
    --summa-muted-dark: #8E8A7C;
    --summa-dim: #6F6B5E;
    --summa-ok-glow: #8FD1A6;
    --summa-glass: rgba(255, 255, 255, .05);
    --summa-glass-border: rgba(255, 255, 255, .12);
}

@keyframes selSube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.sel-body { margin: 0; background: var(--sgi-carbon); }
.sel-body ::selection { background: var(--sgi-amarillo); color: var(--sgi-carbon); }

.sel {
    position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column;
    background: var(--sgi-carbon); color: #fff; font-family: var(--sgi-font); -webkit-font-smoothing: antialiased;
}
.sel a { color: inherit; text-decoration: none; }
.sel a:focus-visible, .sel button:focus-visible { outline: 3px solid var(--sgi-amarillo); outline-offset: 3px; }

.sel-red { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sel-velo {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, rgba(48, 47, 42, .92) 0%, rgba(48, 47, 42, .55) 60%, rgba(48, 47, 42, .2) 100%);
}
.sel-entorno { position: relative; }

/* Cabecera */
.sel-cab { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 36px; }
.sel-marca { display: flex; align-items: center; gap: 12px; }
.sel-marca-s {
    width: 34px; height: 34px; border-radius: 9px; background: var(--sgi-amarillo); color: var(--sgi-carbon);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
    box-shadow: 0 0 26px rgba(235, 225, 0, .45);
}
.sel-marca-txt { display: flex; flex-direction: column; line-height: 1.15; }
.sel-marca-nom { font-weight: 700; font-size: 15px; letter-spacing: .03em; }
.sel-marca-sub { font-family: var(--sgi-mono); font-size: 10px; letter-spacing: .1em; color: var(--summa-on-dark-3); }
.sel-persona { display: flex; align-items: center; gap: 12px; }
.sel-persona-txt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.sel-persona-nom { font-size: 13px; font-weight: 600; }
.sel-persona-rol { font-size: 11.5px; color: var(--summa-on-dark-3); }
.sel-avatar {
    width: 38px; height: 38px; border-radius: 11px; background: var(--sgi-amarillo); color: var(--sgi-carbon);
    font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.sel-salir { margin: 0; }
.sel-btn {
    cursor: pointer; font-family: inherit; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
    color: var(--summa-on-dark-2); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 600;
    transition: border-color .2s, color .2s; display: inline-block; line-height: 1.2;
}
.sel-btn:hover { border-color: var(--sgi-amarillo); color: var(--sgi-amarillo); }

/* Centro */
.sel-main {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 40px; padding: 24px 32px 64px;
}
.sel-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: selSube .5s ease-out both; }
.sel-eyebrow { font-family: var(--sgi-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--sgi-amarillo); }
.sel-h1 { margin: 0; font-size: clamp(34px, 4.6vw, 58px); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; color: #fff; }
.sel-sub { margin: 0; font-size: 15px; color: var(--summa-on-dark); }

.sel-aviso {
    background: #fff; color: var(--sgi-text); font-size: 13.5px; font-weight: 500; padding: 12px 18px;
    border-radius: 12px; border-left: 4px solid var(--sgi-amarillo); max-width: 640px;
}
.sel-aviso-error { border-left-color: var(--sgi-err-dot); }

/* Grilla de tarjetas */
.sel-grilla {
    width: 100%; max-width: 1120px; display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.sel-card {
    position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 200px; padding: 22px;
    border-radius: 20px; background: var(--summa-glass); border: 1px solid var(--summa-glass-border); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: transform .25s, border-color .25s, background .25s, box-shadow .25s;
    animation: selSube .45s ease-out both;
}
a.sel-card:hover, a.sel-card:focus-visible {
    transform: translateY(-5px); border-color: var(--sgi-amarillo); background: rgba(235, 225, 0, .07);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px var(--sgi-amarillo);
}
.sel-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sel-cod {
    font-family: var(--sgi-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: 6px 11px;
    border-radius: 8px; background: var(--sgi-amarillo); color: var(--sgi-carbon);
}
.sel-flecha { font-size: 15px; color: var(--sgi-amarillo); transition: transform .25s; }
a.sel-card:hover .sel-flecha { transform: translate(2px, -2px); }
.sel-card-txt { display: flex; flex-direction: column; gap: 6px; }
.sel-card-nom { font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.sel-card-desc { font-size: 13px; line-height: 1.5; color: var(--summa-on-dark); }
.sel-estado {
    margin-top: auto; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    font-size: 11.5px; font-weight: 600; color: var(--summa-on-dark-2);
}
.sel-punto { width: 7px; height: 7px; border-radius: 999px; background: var(--summa-ok-glow); box-shadow: 0 0 8px var(--summa-ok-glow); }

/* No disponibles: ni enlace, ni hover, ni flecha */
.sel-card-off {
    cursor: default; background: rgba(255, 255, 255, .02); border: 1px dashed rgba(255, 255, 255, .14); color: var(--summa-muted-dark);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sel-card-off .sel-cod { background: rgba(255, 255, 255, .06); color: var(--summa-muted-dark); }
.sel-card-off .sel-card-desc { color: var(--summa-dim); }
.sel-card-off .sel-estado { color: var(--summa-muted-dark); }
.sel-card-off .sel-punto { background: var(--summa-dim); box-shadow: none; }

/* Un solo aplicativo */
.sel-unico-wrap { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 14px; animation: selSube .5s .15s ease-out both; }
.sel-unico {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: 30px; border-radius: 24px;
    background: var(--summa-glass); border: 1px solid rgba(235, 225, 0, .45); color: #fff;
    box-shadow: 0 0 0 1px rgba(235, 225, 0, .15), 0 40px 80px -40px rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .25s, background .25s;
}
.sel-unico:hover, .sel-unico:focus-visible { border-color: var(--sgi-amarillo); background: rgba(235, 225, 0, .07); }
.sel-unico-halo {
    position: absolute; right: -90px; top: -110px; width: 300px; height: 300px; border-radius: 999px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(235, 225, 0, .25), transparent);
}
.sel-unico-top { position: relative; display: flex; justify-content: space-between; align-items: center; }
.sel-unico-top .sel-estado { margin-top: 0; font-size: 12px; }
.sel-cod-lg { font-size: 16px; padding: 8px 14px; border-radius: 10px; box-shadow: 0 0 30px rgba(235, 225, 0, .4); }
.sel-unico-txt { position: relative; display: flex; flex-direction: column; gap: 8px; }
.sel-unico-nom { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.sel-unico-desc { font-size: 14.5px; line-height: 1.55; color: var(--summa-on-dark); }
.sel-entrar {
    position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: var(--sgi-amarillo); color: var(--sgi-carbon); border-radius: 12px; padding: 15px 18px; font-size: 15px; font-weight: 600;
    transition: background .2s;
}
.sel-unico:hover .sel-entrar { background: var(--sgi-amarillo-hover); }
.sel-mono { font-family: var(--sgi-mono); }

.sel-auto {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
}
.sel-auto[hidden] { display: none; }
.sel-auto-barra { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sel-auto-lleno { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--sgi-amarillo); transition: width 1s linear; }
.sel-auto-txt { font-size: 13px; color: var(--summa-on-dark); white-space: nowrap; }
.sel-auto-cancelar {
    cursor: pointer; font-family: inherit; background: none; border: none; border-bottom: 1px solid var(--summa-muted-dark);
    padding: 0; font-size: 12.5px; font-weight: 600; color: var(--summa-on-dark-2);
}
.sel-auto-cancelar:hover { color: var(--sgi-amarillo); border-bottom-color: var(--sgi-amarillo); }

/* Vacío */
.sel-vacio {
    max-width: 520px; text-align: center; padding: 26px 30px; border-radius: 20px;
    background: var(--summa-glass); border: 1px dashed rgba(255, 255, 255, .18); color: var(--summa-on-dark);
    font-size: 15px; line-height: 1.55; animation: selSube .5s .15s ease-out both;
}
.sel-vacio p { margin: 0; }

.sel-pie {
    position: relative; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 0 32px 26px;
    font-family: var(--sgi-mono); font-size: 11px; letter-spacing: .06em; color: var(--summa-muted-dark); text-align: center;
}

@media (max-width: 640px) {
    .sel-cab { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
    .sel-persona { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
    .sel-main { padding: 16px 20px 48px; gap: 28px; }
    .sel-h1 { font-size: 34px; }
    .sel-grilla { grid-template-columns: 1fr; }
    .sel-auto { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .sel-intro, .sel-card, .sel-unico-wrap, .sel-vacio { animation: none; }
    .sel-card, .sel-flecha, .sel-auto-lleno { transition: none; }
    a.sel-card:hover, a.sel-card:focus-visible { transform: none; }
}

/* ---- 70_carga.css ---- */
/* =====================================================================
   SUMMA UI v1 · Indicador de carga · [SUMMA-UI-2026]
   Capa que pone summa-ui.js cuando una navegación o un envío tarda más de 250 ms.
   ===================================================================== */

.summa-carga {
    position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
    background: rgba(48, 47, 42, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
}
.summa-carga.is-visible { opacity: 1; visibility: visible; transition: opacity .2s ease; }

.summa-carga-caja {
    display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 240px; max-width: 360px;
    padding: 28px 30px 24px; border-radius: 20px; text-align: center;
    background: rgba(48, 47, 42, .92); border: 1px solid rgba(235, 225, 0, .35);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(235, 225, 0, .08);
    color: #fff; font-family: var(--sgi-font);
    transform: translateY(8px) scale(.98); transition: transform .25s ease;
}
.summa-carga.is-visible .summa-carga-caja { transform: none; }

.summa-carga-marca { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.summa-carga-s {
    width: 40px; height: 40px; border-radius: 11px; background: var(--sgi-amarillo); color: var(--sgi-carbon);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
    box-shadow: 0 0 28px rgba(235, 225, 0, .5); animation: summaLatido 1.2s ease-in-out infinite;
}
.summa-carga-anillo {
    position: absolute; inset: 0; border-radius: 999px;
    border: 2px solid rgba(235, 225, 0, .15); border-top-color: var(--sgi-amarillo);
    animation: summaGiro .9s linear infinite;
}
.summa-carga-txt { font-size: 14px; font-weight: 600; color: #DAD6C9; line-height: 1.45; }
.summa-carga-barra { width: 100%; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.summa-carga-barra span {
    display: block; width: 40%; height: 100%; border-radius: 999px; background: var(--sgi-amarillo);
    animation: summaBarrido 1.1s ease-in-out infinite;
}
.summa-carga.is-lenta .summa-carga-txt { color: var(--sgi-amarillo); font-weight: 500; font-size: 13px; }

@keyframes summaGiro { to { transform: rotate(360deg); } }
@keyframes summaLatido { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }
@keyframes summaBarrido { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

@media (prefers-reduced-motion: reduce) {
    .summa-carga-s, .summa-carga-anillo, .summa-carga-barra span { animation: none; }
    .summa-carga-barra span { width: 100%; opacity: .5; }
}

/* Campo trampa antibots: fuera de la vista y del lector de pantalla, pero presente para los bots. */
.summa-trampa { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }