/*! SUMMA UI v1.5.2 · 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; } }

/* ---------------------------------------------------------------------
   Verificación en dos pasos · [MFA]
   --------------------------------------------------------------------- */
.summa-otp { font-family: var(--sgi-mono) !important; font-size: 22px !important; letter-spacing: .35em; text-align: center; }
.summa-pasos { margin: 6px 0 12px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: var(--sgi-text-2); }
.summa-pasos li { margin: 6px 0; }
.summa-qr {
    width: 196px; height: 196px; margin: 4px auto 14px; padding: 8px; background: #fff;
    border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-sm);
}
.summa-qr svg { width: 100%; height: 100%; display: block; }
.summa-clave-manual { margin: 0 0 12px; font-size: 13px; color: var(--sgi-text-3); }
.summa-clave-manual summary { cursor: pointer; font-weight: 600; }
.summa-clave {
    display: block; margin-top: 6px; padding: 8px 10px; border-radius: var(--sgi-r-xs); background: var(--sgi-amarillo-suave);
    font: 600 14px/1.5 var(--sgi-mono); letter-spacing: .08em; word-break: break-all; user-select: all; color: var(--sgi-carbon);
}
.summa-codigos { list-style: none; margin: 10px 0 14px; padding: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    background: var(--sgi-surface-3); border: 1px dashed var(--sgi-border-3); border-radius: var(--sgi-r-sm); }
.summa-codigos code { font: 600 15px/1.4 var(--sgi-mono); letter-spacing: .06em; color: var(--sgi-carbon); }
.summa-codigos-acc { display: flex; gap: 8px; margin-bottom: 14px; }
.summa-continuar { display: block; text-align: center; text-decoration: none; }
@media print { .auth-hero, .summa-codigos-acc, .summa-continuar, .summa-entorno { display: none !important; } }

/* ---------------------------------------------------------------------
   Ficha de persona: dos columnas amplias, campos con etiqueta arriba, filas y casillas en tarjeta
   --------------------------------------------------------------------- */
.persona-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.persona-sub code { font-family: var(--sgi-mono); font-size: 12.5px; }
.persona-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.persona-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.persona-card { background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-lg); padding: 22px 24px; }
.persona-card-tit { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--sgi-border-row); font-size: 17px; font-weight: 600; color: var(--sgi-text); }
.persona-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.persona-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.persona-campo-ancho { grid-column: 1 / -1; }
.persona-et { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sgi-muted); }
.persona-val { font-size: 14.5px; color: var(--sgi-text); line-height: 1.45; overflow-wrap: anywhere; }
.persona-val .status-badge { margin-right: 6px; }
.persona-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sgi-border-row); }
.persona-acciones form { margin: 0; }
.persona-estado { display: flex; gap: 8px; align-items: center; }
.persona-estado select { height: 40px; border-radius: var(--sgi-r-xs); border: 1px solid var(--sgi-border-3); padding: 0 10px; font: inherit; background: var(--sgi-surface); }
.persona-fila { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sgi-border-row); }
.persona-fila:last-of-type { border-bottom: 0; }
.persona-fila form { margin: 0 0 0 auto; }
.persona-fila-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; font-size: 14px; color: var(--sgi-text-2); }
.persona-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.persona-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--sgi-surface-3); border: 1px solid var(--sgi-border-2); color: var(--sgi-text-3); }
.persona-asignar { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sgi-border-row); }
.persona-asignar-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.persona-asignar-campos .form-row { margin: 0; }
.persona-asignar-campos label small { font-weight: 400; color: var(--sgi-muted); }
.persona-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.persona-app {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-sm);
    background: var(--sgi-surface); cursor: pointer; transition: border-color .15s, background .15s; min-width: 0;
}
.persona-app:hover { border-color: var(--sgi-border-3); }
.persona-app.is-on { border-color: var(--sgi-amarillo-borde); background: var(--sgi-amarillo-suave); }
.persona-app input { margin: 0; flex: none; accent-color: var(--sgi-carbon); }
.persona-app-cod { font: 700 11.5px/1 var(--sgi-mono); letter-spacing: .03em; padding: 5px 7px; border-radius: 6px; background: var(--sgi-carbon); color: var(--sgi-amarillo); flex: none; }
.persona-app-nom { font-size: 13px; color: var(--sgi-text-2); line-height: 1.3; min-width: 0; }
.persona-app-nom small { color: var(--sgi-muted); }
.summa-ajustes { margin-bottom: 18px; }
.summa-ajustes-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.summa-confirmar { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--sgi-border-3); }
.summa-probar { margin-top: 10px; }
@media (max-width: 1180px) { .persona-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .persona-campos, .persona-apps, .persona-asignar-campos { grid-template-columns: 1fr; } }

.summa-fila-inactiva td { opacity: .55; }

.summa-ajustes .form-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 4px; }
.summa-ajustes .form-checkbox + .form-help { display: block; margin: 4px 0 16px 24px; }

/* ---------------------------------------------------------------------
   Ventana emergente interna (<dialog class="summa-modal">) · [SUMMA-UI-2026]
   --------------------------------------------------------------------- */
.summa-modal {
    width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--sgi-r-lg);
    background: var(--sgi-surface); color: var(--sgi-text); box-shadow: 0 40px 90px -30px rgba(36, 35, 30, .65), 0 0 0 1px var(--sgi-border);
    overflow: hidden;
}
.summa-modal[open] { display: flex; flex-direction: column; animation: summaModalEntra .22s ease-out; }
.summa-modal::backdrop { background: rgba(48, 47, 42, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.summa-modal form { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.summa-modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--sgi-border-row); }
.summa-modal-cab h2 { margin: 0; font-size: 18px; font-weight: 600; }
.summa-modal-x { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--sgi-muted); padding: 4px 8px; border-radius: 8px; }
.summa-modal-x:hover { background: var(--sgi-surface-3); color: var(--sgi-text); }
.summa-modal-cuerpo { padding: 18px 24px; overflow-y: auto; }
.summa-modal-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--sgi-border-row); background: var(--sgi-surface-2); }
@keyframes summaModalEntra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .summa-modal[open] { animation: none; } }

/* Tarjetas de ajustes (Configuración, Tareas, Salud) */
.summa-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.summa-tarjeta { background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.summa-tarjeta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.summa-tarjeta-cab h2 { margin: 0; font-size: 16.5px; font-weight: 600; }
.summa-tarjeta-cab p { margin: 4px 0 0; font-size: 13px; color: var(--sgi-muted); }
.summa-resumen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 14px; margin: 0; font-size: 13.5px; }
.summa-resumen dt { color: var(--sgi-muted); }
.summa-resumen dd { margin: 0; color: var(--sgi-text); overflow-wrap: anywhere; font-weight: 500; }
.summa-tarjeta-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sgi-border-row); }
.summa-tarjeta-acc form { margin: 0; }
.summa-tarjeta-ancha { grid-column: 1 / -1; }

/* Bases de los aplicativos (Configuración): una fila por base, sin tabla */
.summa-bases { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-md); overflow: hidden; }
.summa-base { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 20px; padding: 14px 16px; border-bottom: 1px solid var(--sgi-border-row); }
.summa-base:last-child { border-bottom: 0; }
.summa-base-nombre { font-family: ui-monospace, 'Geist Mono', Consolas, monospace; font-size: 13.5px; font-weight: 600; color: var(--sgi-text); overflow-wrap: anywhere; }
.summa-base-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.summa-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; background: var(--sgi-bg); border: 1px solid var(--sgi-border); color: var(--sgi-text-3); white-space: nowrap; }
.summa-chip b { color: var(--sgi-text); font-weight: 600; }
.summa-chip-alerta { background: var(--sgi-warn-bg); border-color: var(--sgi-warn-bd); color: var(--sgi-warn-tx); }
.summa-chip-alerta b { color: inherit; }
.summa-base-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--sgi-muted); text-align: right; white-space: nowrap; }
.summa-base-accion { min-width: 148px; display: flex; justify-content: flex-end; }
.summa-base-accion .btn { white-space: nowrap; }
@media (max-width: 720px) {
    .summa-base { grid-template-columns: minmax(0, 1fr); }
    .summa-base-estado { align-items: flex-start; text-align: left; }
    .summa-base-accion { justify-content: flex-start; min-width: 0; }
}

/* Salud */
.summa-salud-global { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--sgi-r-md); border: 1px solid var(--sgi-border); background: var(--sgi-surface); font-size: 14px; }
.summa-salud-error { border-color: var(--sgi-err-bd); background: var(--sgi-err-bg); }
.summa-salud-warn { border-color: var(--sgi-warn-bd); background: var(--sgi-warn-bg); }
.summa-salud-ult { margin-left: auto; color: var(--sgi-muted); font-size: 12.5px; }
.summa-chequeos { list-style: none; margin: 0; padding: 0; }
.summa-chequeo { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--sgi-border-row); }
.summa-chequeo:last-child { border-bottom: 0; }
.summa-chequeo .status-badge { flex: none; min-width: 72px; justify-content: center; }
.summa-chequeo-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; min-width: 0; }
.summa-chequeo-txt span { color: var(--sgi-text-3); overflow-wrap: anywhere; }
.summa-chequeo-txt em { color: var(--sgi-warn-tx); font-size: 12.5px; }

.summa-confirmar-importacion { gap: 10px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Catálogos */
a.summa-tarjeta.summa-cat { color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.summa-tarjeta.summa-cat:hover { border-color: var(--sgi-amarillo-borde); box-shadow: 0 14px 30px -22px rgba(48, 47, 42, .5); transform: translateY(-2px); }
.summa-cat-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--sgi-muted); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sgi-border-row); }
.summa-cat-pie code { font-family: var(--sgi-mono); color: var(--sgi-text-2); }
.summa-cat-tabla { table-layout: fixed; width: 100%; }
.summa-cat-tabla input.summa-cat-in { width: 100%; min-width: 0; }
.summa-cat-tabla input.summa-cat-orden { width: 72px; min-width: 0; }
.summa-cat-tabla td { overflow: hidden; }
.summa-cat-acc { white-space: nowrap; }
.summa-cat-acc form { display: inline; margin: 0 0 0 8px; }

/* Pasos numerados cortos dentro de avisos y ventanas (cambio de clave de la base de datos) */
.summa-pasos-cortos { margin: 8px 0 0; padding-left: 20px; line-height: 1.55; }
.summa-pasos-cortos li { margin: 3px 0; }

/* ==========================================================================
   Sistema → Unificación de cuentas (docs/UNIFICACION.md) · [UNIFICACION-2026]
   ========================================================================== */
.summa-unif-pasos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.summa-unif-pasos > li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: 10px; }
.summa-unif-pasos > li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--sgi-muted); }
.summa-unif-pasos > li > div strong { color: var(--sgi-text); font-size: 14px; }
.summa-unif-pasos > li.actual { border-color: var(--sgi-amarillo-borde); background: var(--sgi-amarillo-suave); }
.summa-unif-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--sgi-neutral-bg); color: var(--sgi-neutral-tx); }
.summa-unif-pasos > li.hecho .summa-unif-num { background: var(--sgi-ok-bg); color: var(--sgi-ok-tx); }
.summa-unif-pasos > li.actual .summa-unif-num { background: var(--sgi-amarillo); color: var(--sgi-carbon); }
.summa-unif-filtros { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.summa-unif-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.summa-unif-tabs a { padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--sgi-text-3); text-decoration: none; border: 1px solid transparent; }
.summa-unif-tabs a b { font-weight: 600; color: var(--sgi-muted); margin-left: 2px; }
.summa-unif-tabs a.active { background: var(--sgi-carbon); color: #fff; }
.summa-unif-tabs a.active b { color: var(--sgi-amarillo); }
.summa-unif-buscar { display: flex; gap: 6px; }
.summa-unif-buscar input { min-width: 220px; }
.summa-unif-grupo { border: 1px solid var(--sgi-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--sgi-surface-2); scroll-margin-top: 80px; }
.summa-unif-grupo > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.summa-unif-grupo > header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.summa-unif-id { font-size: 12px; color: var(--sgi-muted-2); font-variant-numeric: tabular-nums; }
.summa-unif-conflictos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.summa-unif-conflictos li { font-size: 13px; padding: 6px 10px; border-radius: 6px; background: var(--sgi-info-bg); color: var(--sgi-info-tx); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.summa-unif-conflictos li.bloquea { background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); }
.summa-unif-inline { display: inline-flex; gap: 6px; }
.summa-unif-inline form, .summa-unif-acc form { display: inline; margin: 0; }
.summa-unif-cuentas { width: 100%; font-size: 13px; border-collapse: collapse; }
.summa-unif-cuentas th { text-align: left; font-weight: 600; color: var(--sgi-muted); font-size: 12px; padding: 4px 8px; border-bottom: 1px solid var(--sgi-border); }
.summa-unif-cuentas td { padding: 6px 8px; border-bottom: 1px solid var(--sgi-border-row); vertical-align: middle; overflow-wrap: anywhere; }
.summa-unif-cuentas tr.secundaria td { color: var(--sgi-muted-2); }
.summa-unif-cuentas small { color: var(--sgi-warn-tx); }
.summa-unif-acc { white-space: nowrap; text-align: right; }
.summa-unif-resolver { margin-top: 8px; font-size: 13px; }
.summa-unif-resolver summary { cursor: pointer; color: var(--sgi-text-3); font-weight: 600; }
.summa-unif-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 8px; }
.summa-unif-forms form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border: 1px dashed var(--sgi-border-3); border-radius: 8px; }
.summa-unif-forms label { width: 100%; font-size: 12px; color: var(--sgi-muted); font-weight: 600; }
.summa-unif-forms input[type=text], .summa-unif-forms input[type=email] { flex: 1; min-width: 120px; }
.summa-unif-forms input[type=number] { width: 90px; }
@media (max-width: 720px) {
    .summa-unif-pasos > li { flex-wrap: wrap; }
    .summa-unif-buscar, .summa-unif-buscar input { width: 100%; min-width: 0; }
}

/* ---- 55_ayuda.css ---- */
/* =============================================================================
   SGI · Manual integrado [AYUDA-2026] (portado del SGAC): «?» de la cabecera, panel
   lateral (role="dialog"), portada con buscador, primeros pasos y secciones, artículo
   con índice lateral, pasos plegables, avisos y tabla de campos con desplazamiento
   propio. [SGI-UI-2026] Solo cambia el aspecto: usa los tokens de sgi.css.
   A 360 px nada desborda: solo las tablas se desplazan dentro de su marco y el panel
   ocupa todo el ancho.
   ============================================================================= */
:root {
    /* Nombres propios del manual, ahora alias del estado «info» del sistema */
    --ayuda-info-bg: var(--sgi-info-bg);
    --ayuda-info-text: var(--sgi-info-tx);
    --ayuda-info-border: var(--sgi-info-bd);
}
.app-alert-info { background: var(--sgi-info-bg); color: var(--sgi-info-tx); border-color: var(--sgi-info-bd); }

/* «?» de la cabecera */
.topbar-user { display: inline-flex; align-items: center; gap: 10px; }
.topbar-ayuda {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: var(--sgi-r-sm);
    border: 0; background: var(--sgi-carbon); color: var(--sgi-amarillo);
    font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none;
    transition: background .15s;
}
.topbar-ayuda:hover { background: var(--sgi-carbon-3); color: var(--sgi-amarillo); }
.topbar-ayuda:focus-visible, .ayuda-panel-cerrar:focus-visible { outline: 3px solid var(--sgi-amarillo); outline-offset: 2px; }

/* Panel lateral */
.ayuda-panel-fondo { position: fixed; inset: 0; background: rgba(36, 35, 30, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1490; }
.ayuda-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1500;
    width: min(520px, 100%); max-width: 100%;
    background: var(--sgi-surface); border-left: 1px solid var(--sgi-border); box-shadow: var(--sgi-shadow-float);
    display: flex; flex-direction: column;
}
.ayuda-panel[hidden], .ayuda-panel-fondo[hidden] { display: none; }
.ayuda-panel-cabecera { display: flex; align-items: center; gap: 10px; padding: 18px 20px; background: var(--sgi-carbon); color: #fff; border-bottom: 0; }
.ayuda-panel-titulo { margin: 0; flex: 1; min-width: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: #fff; overflow-wrap: anywhere; }
.ayuda-panel-titulo::before {
    content: "Ayuda"; display: block; margin-bottom: 4px;
    font-family: var(--sgi-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sgi-amarillo);
}
.ayuda-panel-titulo:focus { outline: none; }
.ayuda-panel-titulo:focus-visible { outline: 2px solid var(--sgi-amarillo); outline-offset: 2px; }
.ayuda-panel-cerrar { flex: 0 0 auto; width: 32px; height: 32px; background: none; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--sgi-r-xs); color: #fff; cursor: pointer; font-size: 20px; line-height: 1; }
.ayuda-panel-cerrar:hover { color: var(--sgi-amarillo); border-color: var(--sgi-amarillo); }
.ayuda-panel-cuerpo { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 28px; }
.ayuda-panel-cargando { color: var(--sgi-muted); }
.ayuda-panel-resumen { margin: 0 0 12px; color: var(--sgi-muted); }
.ayuda-panel-subtitulo { 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); }
.ayuda-panel-acciones { margin: 16px 0 0; }
.ayuda-panel-pie { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--sgi-border-row); font-size: 13px; }
body.ayuda-panel-abierto { overflow: hidden; }

/* Portada y búsqueda */
.ayuda-buscador { max-width: 760px; margin: 0 0 18px; padding: 18px 20px; background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r); }
.ayuda-buscador-etiqueta { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--sgi-text-2); }
.ayuda-buscador-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.ayuda-buscador-fila input { flex: 1 1 200px; min-width: 0; max-width: 100%; padding: 11px 12px; border: 1px solid var(--sgi-border-3); border-radius: var(--sgi-r-sm); font: inherit; font-size: 14px; color: var(--sgi-text); background: var(--sgi-surface); }
.ayuda-buscador-fila input:focus { outline: none; border-color: var(--sgi-carbon); box-shadow: var(--sgi-focus); }
.ayuda-buscador .form-help { margin: 6px 0 0; }
.ayuda-buscador-panel { padding: 12px 14px; }
.ayuda-filtro-estado { margin: 6px 0 0; font-size: 13px; color: var(--sgi-muted); }
.ayuda-primeros, .ayuda-seccion { min-width: 0; margin: 0 0 16px; padding: 20px 22px; background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r); }
.ayuda-primeros { background: var(--sgi-amarillo-suave); border-color: var(--sgi-amarillo-borde); }
.ayuda-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.ayuda-secciones .ayuda-seccion { margin: 0; }
.ayuda-seccion[hidden], .ayuda-tema[hidden], .ayuda-lista li[hidden], .ayuda-filtro-vacio[hidden] { display: none; }
.ayuda-seccion-titulo { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--sgi-text); overflow-wrap: anywhere; }
.ayuda-contador { font-family: var(--sgi-mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--sgi-muted); white-space: nowrap; }
.ayuda-seccion-desc { margin: 0 0 10px; font-size: 13.5px; color: var(--sgi-muted); }
.ayuda-tema + .ayuda-tema { margin-top: 12px; }
.ayuda-tema-titulo { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--sgi-text-2); }
.ayuda-lista, .ayuda-primeros-lista, .ayuda-resultados { margin: 0; padding-left: 20px; }
.ayuda-lista li, .ayuda-primeros-lista li, .ayuda-resultados li { margin: 0 0 8px; overflow-wrap: anywhere; }
.ayuda-lista-enlace { font-weight: 600; color: var(--sgi-text); text-decoration: underline; text-decoration-color: var(--sgi-amarillo-hover); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ayuda-lista-enlace:hover { text-decoration-color: var(--sgi-carbon); }
.ayuda-lista-resumen { display: block; font-size: 13px; color: var(--sgi-muted); }
.ayuda-ubicacion { display: block; margin: 0 0 4px; font-size: 12.5px; color: var(--sgi-muted); }
.ayuda-ubicacion a { color: inherit; }
.ayuda-conteo { margin: 0 0 10px; font-weight: 600; }
.ayuda-fragmento { display: block; margin-top: 4px; padding: 6px 10px; font-size: 13px; color: var(--sgi-text); background: var(--sgi-surface-3); border-left: 3px solid var(--sgi-border-3); border-radius: 0 var(--sgi-r-xs) var(--sgi-r-xs) 0; }
.ayuda-fragmento mark { background: var(--sgi-amarillo-suave); color: inherit; box-shadow: inset 0 -2px 0 var(--sgi-amarillo); padding: 0 1px; }

/* Artículo */
.ayuda-articulo { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ayuda-articulo.is-sin-indice { grid-template-columns: minmax(0, 1fr); }
.ayuda-indice { position: sticky; top: 84px; min-width: 0; padding: 14px 16px; font-size: 13.5px; background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r); }
.ayuda-indice summary { font-family: var(--sgi-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sgi-muted); cursor: pointer; }
.ayuda-indice ol { margin: 10px 0 0; padding-left: 18px; }
.ayuda-indice li { margin: 0 0 6px; overflow-wrap: anywhere; }
.ayuda-contenido { min-width: 0; max-width: 900px; padding: 24px 28px; font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; background: var(--sgi-surface); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-lg); }
.ayuda-contenido-panel { max-width: none; padding: 0; font-size: 14px; border: 0; border-radius: 0; }
.ayuda-contenido h2 { margin: 26px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--sgi-text); scroll-margin-top: 90px; }
.ayuda-contenido h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 600; color: var(--sgi-text-2); scroll-margin-top: 90px; }
.ayuda-contenido > :first-child { margin-top: 0; }
.ayuda-contenido p { margin: 0 0 10px; }
.ayuda-contenido ul, .ayuda-contenido ol { margin: 0 0 12px; padding-left: 22px; }
.ayuda-contenido li { margin: 0 0 4px; }
.ayuda-contenido code { padding: 1px 5px; font-family: var(--sgi-mono); font-size: .9em; background: var(--sgi-surface-3); border: 1px solid var(--sgi-border-2); border-radius: 5px; overflow-wrap: anywhere; }
.ayuda-enlace { font-weight: 600; color: var(--sgi-text); text-decoration: underline; text-decoration-color: var(--sgi-amarillo-hover); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ayuda-enlace:hover { color: var(--sgi-text); background: none; text-decoration-color: var(--sgi-carbon); }
.ayuda-enlace-texto { font-weight: 600; }
.ayuda-aviso { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--sgi-r-sm); border: 1px solid; }
.ayuda-aviso > :last-child { margin-bottom: 0; }
.ayuda-aviso .ayuda-aviso-titulo { margin: 0 0 4px; font-weight: 600; }
.ayuda-aviso-nota { background: var(--sgi-info-bg); color: var(--sgi-info-tx); border-color: var(--sgi-info-bd); }
.ayuda-aviso-cuidado { background: var(--sgi-warn-bg); color: var(--sgi-warn-tx); border-color: var(--sgi-warn-bd); }
.ayuda-pasos { margin: 0 0 12px; background: var(--sgi-surface-2); border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-sm); }
.ayuda-pasos-titulo { padding: 12px 14px; font-weight: 600; cursor: pointer; border-radius: var(--sgi-r-sm); }
.ayuda-pasos-titulo:hover { background: var(--sgi-surface-3); }
.ayuda-pasos-titulo:focus-visible { outline: 2px solid var(--sgi-amarillo); outline-offset: -2px; }
.ayuda-pasos[open] > .ayuda-pasos-titulo { border-bottom: 1px solid var(--sgi-border-row); border-radius: var(--sgi-r-sm) var(--sgi-r-sm) 0 0; }
.ayuda-pasos-cuerpo { padding: 12px 14px 4px; }
.ayuda-tabla { max-width: 100%; margin: 0 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--sgi-border); border-radius: var(--sgi-r-sm); }
.ayuda-tabla:focus-visible { outline: 2px solid var(--sgi-amarillo); outline-offset: 2px; }
.ayuda-tabla-t { min-width: 600px; font-size: 13.5px; }
.ayuda-tabla-t th, .ayuda-tabla-t td { vertical-align: top; white-space: normal; overflow-wrap: normal; }
.ayuda-tabla-t tbody th[scope="row"] {
    min-width: 120px; max-width: 260px; background: transparent; color: var(--sgi-text);
    font-family: var(--sgi-font); font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; text-align: left;
}
.ayuda-relacionados { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--sgi-border-row); }
.ayuda-no-disponible { max-width: 720px; }
.ayuda-lista-simple { margin: 0 0 14px; padding-left: 20px; }
.ayuda-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
    .ayuda-articulo { grid-template-columns: minmax(0, 1fr); }
    .ayuda-indice { position: static; }
}
@media (max-width: 640px) {
    .ayuda-contenido { padding: 16px; font-size: 14px; }
    .ayuda-primeros, .ayuda-seccion { padding: 16px; }
    .ayuda-tabla-t { min-width: 560px; }
    .ayuda-panel { width: 100%; border-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .ayuda-panel:not([hidden]) { animation: ayuda-entra .18s ease-out; }
}
@keyframes ayuda-entra { from { opacity: .4; } to { opacity: 1; } }   /* solo opacidad: el panel nunca se sale del ancho */
@media (forced-colors: active) {
    .topbar-ayuda, .ayuda-panel, .ayuda-aviso, .ayuda-pasos, .ayuda-tabla { border: 1px solid CanvasText; }
}
@media print {
    .topbar-ayuda, .ayuda-panel, .ayuda-panel-fondo, .ayuda-indice, .ayuda-buscador { display: none !important; }
    .ayuda-articulo { display: block; }
    .ayuda-tabla { overflow: visible; }
}

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