/* ===== Tipografia LASO — Tw Cen MT (corporativa) =====
   Solo se usa en el wordmark "NetOffice" (title bar, login y tapiz).
   El resto del shell sigue con Segoe UI heredado. */
@font-face {
    font-family: 'Tw Cen MT';
    src: url('fonts/TwCenMT-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tw Cen MT';
    src: url('fonts/TwCenMT-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Tw Cen MT';
    src: url('fonts/TwCenMT-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tw Cen MT';
    src: url('fonts/TwCenMT-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Tw Cen MT Condensed';
    src: url('fonts/TwCenMT-Condensed.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tw Cen MT Condensed';
    src: url('fonts/TwCenMT-CondensedBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tw Cen MT Condensed Extra Bold';
    src: url('fonts/TwCenMT-CondensedExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

html, body {
    height: 100%;
    margin: 0;
    /* El shell NUNCA debe producir scroll horizontal de página (filosofía
       §2.18 aplicada al chrome). En pantallas estrechas el contenido del
       title-bar (logo + wordmark + N categorías + escudo/inicio/buscar/
       vídeos/usuario/salir) podía desbordar el ancho de la ventana y crear
       un scroll horizontal del documento; al desplazarlo, el <iframe>
       (ancho = viewport) quedaba recortado a la izquierda y aparecía un
       hueco blanco a la derecha. El fix real es que el menú de categorías
       se comprima (ver `.shell-menu` / `.menu-item`); esto es la red de
       seguridad. Cliente interno LASO 2026-06-22. */
    overflow-x: hidden;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 13px;
    color: #1f2937;
    background: #eef1f6;
}

a, a:visited { color: #1b3a6c; text-decoration: none; }
a:hover { text-decoration: underline; }

h1:focus { outline: none; }

/* ===== Shell layout ===== */
.shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #fff;
}

/* ===== Title bar (azul) con menú integrado ===== */
.shell-titlebar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    background: linear-gradient(#3b78c0, #1f4a87);
    color: #fff;
    border-bottom: 1px solid #143562;
    height: 44px;          /* fijo: los desplegables NO modifican el alto */
    flex-shrink: 0;
    position: relative;
    z-index: 30;
}
.shell-logo {
    height: 28px;
    background: #fff;
    border-radius: 3px;
    padding: 1px;
}
.shell-product {
    /* Wordmark NetOffice — tipografía corporativa LASO. */
    font-family: 'Tw Cen MT', "Segoe UI", system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.shell-spacer { flex: 1; }
.shell-user {
    font-size: 12.5px;
    opacity: 0.95;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.shell-user i { font-size: 16px; }
.shell-logout {
    color: #fff;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.45);
    font-size: 18px;
    margin-left: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.shell-logout:hover {
    background: #e74c3c;
    border-color: #c0392b;
    color: #fff;
    text-decoration: none;
}
/* Boton "Cerrar todas las pestañas" (junto al usuario, antes del Salir).
   Mismo aspecto base que el Salir; al hover se pone naranja para distinguirlo
   semanticamente del Salir (rojo). Se desactiva si no hay pestañas abiertas. */
.shell-close-all {
    color: #fff;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.45);
    font-size: 18px;
    margin-right: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.shell-close-all:hover:not(:disabled) {
    background: #f08c00;
    border-color: #c46d00;
}
.shell-close-all:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ===== Menu horizontal (plano, sin caja, dentro del titlebar) =====
   Vuelve al esquema azul original: solo cambia que los iconos PNG
   pasan a iconos Bootstrap (vectoriales, nítidos), del mismo tamaño
   16px que la PNG ocupaba. SIN cápsula. */
.shell-menu {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 12px;
    gap: 4px;
    /* `min-width: 0` permite que el menú se ENCOJA por debajo de su
       contenido cuando el title-bar no cabe en pantallas estrechas. Sin
       esto, el `min-width: auto` (= min-content) de este flex-item impedía
       el shrink y el title-bar desbordaba la ventana (scroll horizontal de
       página). Con min-width:0 el menú absorbe la falta de ancho
       comprimiendo los `.menu-item` (que tienen el mayor flex-basis) antes
       de tocar los controles de la derecha. Cliente interno LASO 2026-06-22. */
    min-width: 0;
}
/* ===== Categorías top del menú — diseño "botón cuadrado" (2026-05-17) =====
   Cada categoría top es un cuadrado 36×36 estilo `.shell-home-btn`, con
   icono centrado coloreado por la paleta de §"Paleta categórica" más abajo
   y tooltip nativo (atributo `title=` en el Razor) con el nombre completo.
   El label visible queda en el dropdown que se despliega al click. */
.menu-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Mismas dimensiones que `.shell-search-btn` (pill "Buscar" de la
       derecha) — los botones del menú top y los iconos del lado derecho
       quedan visualmente alineados en una misma fila de "chips". */
    height: 30px;
    width: 80px;
    /* Suelo de compresión: en pantallas anchas el flex-basis (80px) manda y
       el aspecto es idéntico al de siempre; cuando el title-bar no cabe, el
       menú se comprime hasta este mínimo (el icono de categoría son 22px, así
       que 36px sigue siendo holgado y clicable) en vez de forzar scroll
       horizontal de página. Cliente interno LASO 2026-06-22. */
    min-width: 36px;
    padding: 0;
    cursor: pointer;
    color: #fff;
    user-select: none;
    font-size: 13px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 6px;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
/* IMPORTANTE: usar combinador `>` (hijo DIRECTO) para que NO afecte a
   los `.menu-label` / `.caret` que viven DENTRO del dropdown — esos son
   los leafs/folders y SÍ deben mostrar su texto. */
.menu-item > .menu-label,
.menu-item > .caret { display: none; }
.menu-item:hover {
    background: rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.45);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.menu-item.open {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.55);
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.20);
}

/* ===== Wrapper del icono (.menu-cap) — sin frame, solo dimensiones ====
   Mantiene los selectores que ya consume el Razor (menu-cap-cat /
   menu-cap-leaf / menu-cap-folder / menu-cap-tab). El span no pinta:
   sólo da tamaño y centra el <i> de Bootstrap Icons.

   Nítido: vector + sin transform/filter/box-shadow que difumine.
*/
.menu-cap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: inherit;
    background: transparent;
    border: 0;
    line-height: 1;
}
.menu-cap i {
    font-size: 16px;
    line-height: 1;
    color: inherit;
}

/* Cápsula de categoría top — un poco más grande para reforzar la
   jerarquía visual con respecto a las hojas/carpetas del dropdown. */
.menu-cap-cat { width: 22px; height: 22px; }
.menu-cap-cat i { font-size: 20px; }

/* ===== Paleta categórica del title bar (top-level) =====
   Colores VIVOS — pensados para contrastar sobre el azul oscuro del
   gradient (#3b78c0 → #1f4a87). Se aplican al icono dentro de
   .menu-cap-cat de cada botón de categoría. Un color distinto por
   categoría ayuda a reconocer cada botón sin leer (ya que el botón
   es icon-only). */

.menu-item i.bi-truck            { color: #f59e0b; }  /* Transporte — naranja ámbar (vehículos) */
.menu-item i.bi-receipt          { color: #34d399; }  /* Facturas directas — verde menta (factura emitida) */
.menu-item i.bi-cash-coin        { color: #fb923c; }  /* Gastos — naranja brillante (salida de caja) */
.menu-item i.bi-coin             { color: #fbbf24; }  /* Contabilidad — dorado ámbar (moneda = finanzas) */
.menu-item i.bi-arrow-left-right { color: #c084fc; }  /* Cartera — púrpura (flujo cobros↔pagos) */
.menu-item i.bi-journal-text     { color: #f87171; }  /* Registros ventas/compras — rojo coral (libro registro) */
.menu-item i.bi-people-fill      { color: #a3e635; }  /* Personal — verde lima (RRHH) */
.menu-item i.bi-database-fill    { color: #22d3ee; }  /* Datos base — cian claro (matiz datos) */
.menu-item i.bi-mailbox2         { color: #60a5fa; }  /* Mailing — azul claro (correo) */

/* Halo sutil sobre el icono cuando la categoría está abierta, para
   reforzar el estado activo sin perder el color. */
.menu-item.open .menu-cap-cat i {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.55));
}

/* Tabs — mismo tamaño que la PNG histórica. */
.menu-cap-tab { width: 14px; height: 14px; opacity: 0.75; transition: opacity 0.08s ease; }
.menu-cap-tab i { font-size: 14px; }

/* ===== Dropdown que cuelga del titlebar (absolute → no afecta al alto) ===== */
.menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    min-width: 0;
    background: #fff;
    border: 1px solid #d4dbe6;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    padding: 4px 0;
    z-index: 40;
}
.menu-dropdown.menu-dropdown-sub {
    top: -5px;
    left: 100%;
}

/* Filas dentro del dropdown: transparente, texto NEGRO, icono + texto */
.menu-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    color: #000;
    background: transparent;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}
/* Color base — fallback. Las reglas categóricas de abajo lo sobrescriben
   por icono concreto para romper el monocromo del dropdown. */
.menu-row .menu-cap-leaf   { color: #1f4a87; }
.menu-row .menu-cap-folder { color: #4a5566; }

/* ===== Paleta categórica del dropdown =====
   Cada familia de icono recibe un tono que casa con su semántica. La
   regla apunta por nombre de icono Bootstrap (.bi-...) dentro de un
   .menu-cap, así no hay que tocar el Razor para ajustarla. */

/* Entidades base / contabilidad / esquemas → azul corporativo (default) */
.menu-row i.bi-building-fill,
.menu-row i.bi-building,
.menu-row i.bi-building-dash,
.menu-row i.bi-buildings,
.menu-row i.bi-buildings-fill,
.menu-row i.bi-diagram-3-fill,
.menu-row i.bi-diagram-2-fill,
.menu-row i.bi-collection-fill,
.menu-row i.bi-clipboard-data-fill,
.menu-row i.bi-clipboard2-data-fill,
.menu-row i.bi-list-columns-reverse,
.menu-row i.bi-card-list,
.menu-row i.bi-tag-fill            { color: #1f4a87; }

/* Geografía / ubicación → verde bosque */
.menu-row i.bi-globe-europe-africa,
.menu-row i.bi-geo-alt-fill,
.menu-row i.bi-mailbox2            { color: #1d6f42; }

/* Fiscal / dinero / banca / mercancía → naranja ámbar */
.menu-row i.bi-percent,
.menu-row i.bi-currency-exchange,
.menu-row i.bi-receipt,
.menu-row i.bi-receipt-cutoff,
.menu-row i.bi-bank,
.menu-row i.bi-bank2,
.menu-row i.bi-credit-card-2-front-fill,
.menu-row i.bi-cash-coin,
.menu-row i.bi-truck               { color: #c2410c; }

/* Comunicación / mensajes / correo / idiomas → púrpura */
.menu-row i.bi-translate,
.menu-row i.bi-chat-square-text-fill,
.menu-row i.bi-envelope-fill,
.menu-row i.bi-envelope-at-fill,
.menu-row i.bi-envelope-paper-fill,
.menu-row i.bi-microsoft,
.menu-row i.bi-bell-fill,
.menu-row i.bi-send-fill           { color: #6f42c1; }

/* Documentos → rojo coral */
.menu-row i.bi-file-earmark-text-fill,
.menu-row i.bi-file-earmark-medical-fill,
.menu-row i.bi-file-earmark-pdf-fill,
.menu-row i.bi-bookmark-star-fill,
.menu-row i.bi-archive-fill        { color: #b91c1c; }

/* Datos / analítica / gráficos / técnico → cian intenso */
.menu-row i.bi-cloud-arrow-down-fill,
.menu-row i.bi-bar-chart-fill,
.menu-row i.bi-bar-chart-line-fill,
.menu-row i.bi-pie-chart-fill,
.menu-row i.bi-graph-up,
.menu-row i.bi-graph-up-arrow,
.menu-row i.bi-activity,
.menu-row i.bi-sliders,
.menu-row i.bi-search-heart-fill,
.menu-row i.bi-upc-scan            { color: #0891b2; }

/* Usuarios / permisos / personas → magenta */
.menu-row i.bi-person-fill,
.menu-row i.bi-people-fill,
.menu-row i.bi-person-workspace,
.menu-row i.bi-person-gear,
.menu-row i.bi-person-badge-fill,
.menu-row i.bi-shield-lock-fill,
.menu-row i.bi-shield-check        { color: #be185d; }

/* Calendario / tiempo → azul cobalto medio */
.menu-row i.bi-calendar-event-fill,
.menu-row i.bi-calendar-week-fill  { color: #3b82f6; }

/* Carpetas (Generales, Correos, EnvíoMail, UsuariosPermisos…) →
   cada agrupador con su tonal. Reemplazan al gris #4a5566 por defecto. */
.menu-row i.bi-grid-3x3-gap-fill   { color: #1d6f42; }  /* Generales */
.menu-row i.bi-database-fill-gear  { color: #1f4a87; }  /* Cont datos base */
/* (envelope-fill / send-fill ya van en púrpura arriba) */
/* (shield-lock-fill ya en magenta arriba) */
.menu-row:hover {
    background: rgba(31, 74, 135, 0.10);
}
.menu-row.folder { padding-right: 28px; }
.menu-row .folder-caret {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: #6c7787;
}
.menu-row.folder.open {
    background: rgba(31, 74, 135, 0.10);
}

.shell-overlay {
    position: fixed;
    inset: 0;
    z-index: 25;
}

/* ===== Tabs ===== */
.shell-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 6px 10px 0;
    background: #eef1f6;
    border-bottom: 1px solid #d4dbe6;
    flex-shrink: 0;
    overflow: hidden;
    min-width: 0;
}
.shell-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #c5d0e1;
    border: 1px solid #aab7cb;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 12.5px;
    color: #5a6478;
    max-width: 240px;
    min-width: 60px;
    flex: 0 1 auto;
    user-select: none;
    transition: background-color 0.08s ease, color 0.08s ease;
}
.shell-tab .menu-cap { flex-shrink: 0; color: #5a6478; }
.shell-tab-close { flex-shrink: 0; }
.shell-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shell-tab:hover { background: #d6dfee; color: #2a3147; }
.shell-tab:hover .menu-cap { opacity: 1; color: #2a3147; }
.shell-tab.active {
    background: #fff;
    border-color: #aab7cb;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    font-weight: 600;
    color: #1b3a6c;
    box-shadow: inset 0 3px 0 #3874cb, 0 -1px 4px rgba(56, 116, 203, 0.18);
}
.shell-tab.active .menu-cap { opacity: 1; color: #1b3a6c; }
.shell-tab-close {
    border: none;
    background: transparent;
    color: #6c7787;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shell-tab-close:hover {
    background: #c62828;
    color: #fff;
}

/* ===== Reordenar pestañas (drag & drop) ===== */
/* Espejo del patrón de los accesos directos de la home
   (.shell-home-card-fav.dragging / .drag-target). */
.shell-tab[draggable="true"] { cursor: grab; }
.shell-tab[draggable="true"]:active { cursor: grabbing; }

/* Pestaña en arrastre — semi-transparente. opacity, NO transform, para no
   romper la drag image nativa del navegador. */
.shell-tab.dragging {
    opacity: 0.45;
    cursor: grabbing;
}

/* Pestaña destino — barra azul a la izquierda indicando dónde caería. */
.shell-tab.drag-target {
    border-color: #1f4a87;
    box-shadow:
        inset 3px 0 0 #3874cb,
        0 -1px 6px rgba(31, 74, 135, 0.22);
}

/* ===== Body / iframes / splash ===== */
.shell-body {
    flex: 1;
    position: relative;
    background: #fff;
    min-height: 0;
    overflow: hidden;
}
.shell-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: none;
}
.shell-iframe.active { display: block; }

/* ===== Home dashboard (sustituye al splash centrado) =====
   3 zonas: cabecera (saludo + tenant + fecha) / body central en SPLIT
   (tarjetas a la izquierda + branding NetOffice a la derecha) / footer
   compacto. Fondo "papel iluminado" con la misma paleta del title bar.
   El logotipo "NetOffice" usa la tipografía global (Segoe UI) en
   font-weight 800 para que pese sin recurrir a un display font fino. */
.shell-home {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background:
        radial-gradient(circle at 100% 0%, rgba(95,140,200,0.12) 0%, transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(31,74,135,0.08) 0%, transparent 50%),
        linear-gradient(135deg, #f6f9fd 0%, #dbe5f1 100%);
    color: #1f2937;
    overflow: auto;
}

/* Body central — split izquierda (paneles de tarjetas) / derecha
   (buscador + brand). El aside queda fijo entre 320 y 420px. */
.shell-home-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 20px;
    padding: 18px 28px 18px;
    align-items: stretch;
    min-height: 0;
}

.shell-home-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    min-height: 0;
}

/* ===== Panel base (tarjeta "papel") ==========================
   Aplica a las 3 zonas (Continuar / Accesos directos / Buscador) para
   que se distingan del fondo gradient como hojas iluminadas. Borde
   sutil + sombra ligera; nada de líneas duras. */
.shell-home-panel {
    background: #fff;
    border: 1px solid #dbe5f1;
    border-radius: 12px;
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    box-shadow:
        0 1px 2px rgba(15,30,55,0.04),
        0 4px 14px rgba(31,74,135,0.06);
}

.shell-home-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Sin border-bottom — el padding propio del panel ya separa. */
}

.shell-home-panel-title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #4a5566;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.shell-home-panel-title i { color: #1f4a87; font-size: 15px; }

/* --- Cabecera --- */
.shell-home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 36px 12px;
}
.shell-home-greeting {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.shell-home-hello {
    font-size: 22px;
    font-weight: 700;
    color: #1b3a6c;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.shell-home-hello i {
    color: #f59e0b;
    font-size: 22px;
    filter: drop-shadow(0 1px 2px rgba(245,158,11,0.35));
}
.shell-home-fecha {
    font-size: 13px;
    color: #4a5566;
}

/* --- Stack vertical: continuar (panel) + favoritos (panel) ---
   El stack ocupa el alto completo del body. El panel "continuar" mantiene
   el alto que necesita por su contenido, y el panel "favoritos" se estira
   para ocupar el resto — visualmente equilibra el aside derecho y deja
   espacio "preparado" para que el usuario fije más accesos directos sin
   que se descuadre nada. */
.shell-home-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    min-height: 0;
}
.shell-home-panel-continuar {
    flex: 0 0 auto;
}
.shell-home-panel-favoritos {
    flex: 1 1 auto;
    min-height: 0;
}

.shell-home-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    min-width: 0;
}
.shell-home-section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #4a5566;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.shell-home-section-title i { color: #1f4a87; font-size: 15px; }

/* Grid de tarjetas. La densidad y el número de columnas la decide
   cada panel — ver .shell-home-panel-continuar / -favoritos abajo. */
.shell-home-cards {
    display: grid;
    gap: 10px;
    align-content: start;
}

/* Continuar: fijado a 4 cols (8 tiles cap → 2 filas exactas).
   En viewports ≤1300 baja a 3 cols, ≤900 a 2 cols. */
.shell-home-panel-continuar .shell-home-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Accesos directos: fijado a 5 cols (15 tiles cap → 3 filas exactas).
   Más apretadas que las de continuar — el usuario las escoge a propósito
   y son las que más usa, así que conviene densidad alta. En viewports
   ≤1300 baja a 4 cols, ≤900 a 3 cols. */
.shell-home-panel-favoritos .shell-home-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1300px) {
    .shell-home-panel-continuar .shell-home-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .shell-home-panel-favoritos .shell-home-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .shell-home-panel-continuar .shell-home-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .shell-home-panel-favoritos .shell-home-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* === Botón biblioteca de videos en titlebar (CLAUDE.md §2.25) === */

.shell-videos-btn {
    background: linear-gradient(135deg, #7a3ba8 0%, #5e2a99 100%);
    border: 1px solid #4a1d7a;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: transform 0.1s, box-shadow 0.1s;
}

.shell-videos-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(94, 42, 153, 0.4);
}

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

.shell-videos-btn i {
    font-size: 18px;
    color: #ffffff;
}

/* === Botón "Validación crítica" en titlebar (CLAUDE.md feedback_aprobaciones_criticas_inter_sesion) ===
   Sólo visible para AD-users que figuran en gnet.sys_validadores_criticos.
   Tono ámbar/dorado para destacar de los azules/morados del resto de
   botones — es una "alerta administrativa", no un acceso rápido normal.
   Badge rojo con número cuando hay pendientes. */

.shell-validacion-btn {
    position: relative;
    background: linear-gradient(135deg, #f0a83a 0%, #d6850c 100%);
    border: 1px solid #b56a00;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: transform 0.1s, box-shadow 0.1s;
}

.shell-validacion-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(214, 133, 12, 0.45);
}

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

.shell-validacion-btn.active {
    background: linear-gradient(135deg, #c87800 0%, #a05f00 100%);
    border-color: #804c00;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}

.shell-validacion-btn i {
    font-size: 18px;
    color: #ffffff;
}

.shell-validacion-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    background: #d32f2f;
    color: #fff;
    border-radius: 9px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #1f4a87;
    pointer-events: none;
}

/* === Pantalla "Validación crítica" (panel sustituye a la home cuando
       se pulsa el botón ámbar). CLAUDE.md feedback_aprobaciones_criticas_inter_sesion. */

.vc-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(180deg, #f6f9fd 0%, #dbe5f1 100%);
    padding: 14px 20px;
    gap: 12px;
    box-sizing: border-box;
}

.vc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.vc-head-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-head-title h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1f4a87;
    margin: 0;
}

.vc-head-title i {
    font-size: 22px;
    color: #d6850c;
}

.vc-counter {
    color: #555;
    font-size: 13px;
}

.vc-head-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.vc-tab {
    background: #fff;
    border: 1px solid #c5cdd9;
    color: #1f4a87;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.vc-tab.active {
    background: #1f4a87;
    color: #fff;
    border-color: #1f4a87;
}

.vc-tab i {
    font-size: 13px;
}

.vc-refresh {
    background: #fff;
    border: 1px solid #c5cdd9;
    color: #1f4a87;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vc-refresh:hover { background: #eef3f9; }

.vc-close {
    background: #fff;
    border: 1px solid #c5cdd9;
    color: #b22a2a;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.vc-close:hover {
    background: #fdecec;
    border-color: #b22a2a;
}

.vc-body {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 1px minmax(380px, 1fr);
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    border: 1px solid #c5cdd9;
    border-radius: 6px;
    overflow: hidden;
}

.vc-body::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    background: #d8dee6;
}

.vc-grid-panel {
    grid-column: 1;
    overflow: auto;
    background: #fff;
    position: relative;
}

/* === Filtros por columna (patrón canónico CLAUDE.md §2.7/§2.8) ============
   Fila bajo el thead con un input por columna. Sintaxis "contiene…"
   multi-término AND/OR vía && y ||  (FiltroContiene.Match). */

.vc-grid-filter-row th {
    background: #f7f9fd;
    padding: 4px 6px;
    border-bottom: 1px solid #c5cdd9;
    position: sticky;
    top: 28px; /* alto aprox. del thead título */
    z-index: 1;
}

.vc-grid-filter-inp {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c5cdd9;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
    background: #fff;
    outline: none;
}

.vc-grid-filter-inp:focus {
    border-color: #3874cb;
    box-shadow: inset 0 0 0 1px #3874cb;
}

.vc-grid-filter-inp::placeholder {
    color: #aab2bd;
    font-style: italic;
}

/* Resumen "Mostrando X de Y · Limpiar todos" cuando hay filtro activo. */
.vc-grid-filter-summary {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, #fff7e1 0%, #fff0c4 100%);
    border-top: 1px solid #d6b96a;
    padding: 5px 10px;
    font-size: 11px;
    color: #5a4108;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.vc-grid-filter-summary i { color: #b07b09; }
.vc-grid-filter-summary strong { color: #2e3a4f; }

.vc-grid-filter-clear-link {
    margin-left: auto;
    background: transparent;
    border: 1px solid #d6b96a;
    color: #5a4108;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.vc-grid-filter-clear-link:hover {
    background: #fff;
    border-color: #b07b09;
}

/* Empty state dentro del tbody cuando no hay resultados. */
.vc-empty-row td {
    padding: 0;
    background: #fff;
}

.vc-empty-row .vc-empty {
    padding: 30px 16px;
}

.vc-grid-clear-filtros {
    margin-top: 8px;
    background: #1f4a87;
    border: none;
    color: #fff;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}

.vc-grid-clear-filtros:hover { background: #2f6ec1; }

.vc-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.vc-grid thead th {
    background: linear-gradient(180deg, #f3f6fb 0%, #e2e8f1 100%);
    color: #2e3a4f;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid #c5cdd9;
    position: sticky;
    top: 0;
    font-weight: 600;
    z-index: 1;
}

.vc-grid tbody tr {
    cursor: pointer;
    border-bottom: 1px solid #eef1f6;
}

.vc-grid tbody tr:hover { background: #f4f8fd; }
.vc-grid tbody tr.selected { background: #cfe0f3; }

.vc-grid td {
    padding: 6px 10px;
    vertical-align: middle;
}

.vc-col-fecha  { width: 90px; white-space: nowrap; color: #555; }
.vc-col-quien  { width: 150px; }
.vc-col-area   { width: 80px; }
.vc-col-desc   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.vc-col-estado { width: 90px; }

.vc-area-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    background: #e8edf5;
    color: #2e3a4f;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.vc-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.vc-pill-p { background: #d6850c; }       /* pendiente — ámbar */
.vc-pill-a { background: #1d6f42; }       /* aprobado — verde */
.vc-pill-r { background: #c62828; }       /* rechazado — rojo */
.vc-pill-x { background: #6c757d; }       /* cancelado — gris */

.vc-detail-panel {
    grid-column: 3;
    overflow: auto;
    background: #fafbfd;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
}

.vc-detail-head h3 {
    font-size: 14px;
    color: #1f4a87;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.vc-meta {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 8px;
    margin: 0 0 12px 0;
    font-size: 12px;
}

.vc-meta dt { color: #555; font-weight: 600; }
.vc-meta dd { margin: 0; color: #2e3a4f; }
.vc-meta dd small { color: #888; font-weight: normal; }
.vc-meta dd code { background: #eef1f6; padding: 0 4px; border-radius: 3px; font-size: 11px; }

.vc-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.vc-detail-body h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    margin: 6px 0 4px 0;
    flex: 0 0 auto;
}

.vc-detail-text {
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 5px;
    padding: 10px 12px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 11.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin: 0;
}

.vc-detail-actions {
    margin-top: 10px;
    border-top: 1px solid #d8dee6;
    padding-top: 10px;
}

.vc-comment {
    width: 100%;
    min-height: 64px;
    border: 1px solid #c5cdd9;
    border-radius: 5px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}

.vc-error {
    margin-top: 8px;
    color: #c62828;
    font-size: 12px;
    background: #fdecea;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #f5b9b5;
}

.vc-action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.vc-btn {
    border: none;
    padding: 7px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.vc-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.vc-btn-aprobar {
    background: linear-gradient(180deg, #29a663 0%, #1a6b3d 100%);
    color: #fff;
}

.vc-btn-aprobar:hover:not(:disabled) {
    background: linear-gradient(180deg, #2bbb6c 0%, #1d7944 100%);
}

.vc-btn-rechazar {
    background: linear-gradient(180deg, #d94f4f 0%, #a31f1f 100%);
    color: #fff;
}

.vc-btn-rechazar:hover:not(:disabled) {
    background: linear-gradient(180deg, #e15858 0%, #b32424 100%);
}

.vc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #777;
    text-align: center;
    padding: 40px 20px;
    height: 100%;
    box-sizing: border-box;
}

.vc-empty i {
    font-size: 36px;
    color: #b8c0cc;
    margin-bottom: 10px;
}

.vc-empty p { margin: 0; font-size: 13px; }

.vc-already-decided {
    color: #555;
    font-size: 12px;
    background: #eef3f9;
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #c5cdd9;
}

.vc-already-decided i { color: #1f4a87; margin-right: 4px; }

.shell-home-card {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: transform 0.12s ease,
                box-shadow 0.12s ease,
                border-color 0.12s ease;
    box-shadow: 0 1px 2px rgba(15,30,55,0.04);
    min-height: 56px;
}
.shell-home-card:hover {
    transform: translateY(-2px);
    border-color: #7ba4d6;
    box-shadow: 0 6px 18px rgba(31,74,135,0.15);
}
.shell-home-card:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(15,30,55,0.10);
}
.shell-home-card:focus-visible {
    outline: none;
    border-color: #1f4a87;
    box-shadow: 0 0 0 3px rgba(31,74,135,0.20);
}
.shell-home-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #eff5fc, #d6e4f5);
    color: #1f4a87;
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.shell-home-card-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.shell-home-card-label {
    font-size: 13px;
    font-weight: 600;
    color: #1b3a6c;
    line-height: 1.25;
    overflow-wrap: anywhere;
    /* Truncar a 2 líneas máx — evita que un label largo descuadre el grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shell-home-card-sub {
    font-size: 11px;
    color: #6c7787;
}

/* ===== Paleta categórica de los iconos en las tarjetas =====
   Reusa los mismos colores que .menu-row del dropdown del menú top
   para que el ojo del usuario asocie cada pantalla con su familia
   sin tener que aprender una segunda paleta. Las reglas apuntan al
   <i> dentro del .shell-home-card-icon. */

/* Entidades base / contabilidad / esquemas → azul corporativo (default) */
.shell-home-card-icon i.bi-building-fill,
.shell-home-card-icon i.bi-building,
.shell-home-card-icon i.bi-building-dash,
.shell-home-card-icon i.bi-buildings,
.shell-home-card-icon i.bi-buildings-fill,
.shell-home-card-icon i.bi-diagram-3-fill,
.shell-home-card-icon i.bi-diagram-2-fill,
.shell-home-card-icon i.bi-collection-fill,
.shell-home-card-icon i.bi-clipboard-data-fill,
.shell-home-card-icon i.bi-clipboard2-data-fill,
.shell-home-card-icon i.bi-list-columns-reverse,
.shell-home-card-icon i.bi-card-list,
.shell-home-card-icon i.bi-tag-fill            { color: #1f4a87; }

/* Geografía / ubicación → verde bosque */
.shell-home-card-icon i.bi-globe-europe-africa,
.shell-home-card-icon i.bi-geo-alt-fill,
.shell-home-card-icon i.bi-mailbox2            { color: #1d6f42; }

/* Fiscal / dinero / banca / mercancía → naranja ámbar */
.shell-home-card-icon i.bi-percent,
.shell-home-card-icon i.bi-currency-exchange,
.shell-home-card-icon i.bi-receipt,
.shell-home-card-icon i.bi-receipt-cutoff,
.shell-home-card-icon i.bi-bank,
.shell-home-card-icon i.bi-bank2,
.shell-home-card-icon i.bi-credit-card-2-front-fill,
.shell-home-card-icon i.bi-cash-coin,
.shell-home-card-icon i.bi-truck               { color: #c2410c; }

/* Comunicación / mensajes / correo / idiomas → púrpura */
.shell-home-card-icon i.bi-translate,
.shell-home-card-icon i.bi-chat-square-text-fill,
.shell-home-card-icon i.bi-envelope-fill,
.shell-home-card-icon i.bi-envelope-at-fill,
.shell-home-card-icon i.bi-envelope-paper-fill,
.shell-home-card-icon i.bi-microsoft,
.shell-home-card-icon i.bi-bell-fill,
.shell-home-card-icon i.bi-send-fill           { color: #6f42c1; }

/* Documentos → rojo coral */
.shell-home-card-icon i.bi-file-earmark-text-fill,
.shell-home-card-icon i.bi-file-earmark-medical-fill,
.shell-home-card-icon i.bi-file-earmark-pdf-fill,
.shell-home-card-icon i.bi-bookmark-star-fill,
.shell-home-card-icon i.bi-archive-fill        { color: #b91c1c; }

/* Datos / analítica / gráficos / técnico → cian intenso */
.shell-home-card-icon i.bi-cloud-arrow-down-fill,
.shell-home-card-icon i.bi-bar-chart-fill,
.shell-home-card-icon i.bi-bar-chart-line-fill,
.shell-home-card-icon i.bi-pie-chart-fill,
.shell-home-card-icon i.bi-graph-up,
.shell-home-card-icon i.bi-graph-up-arrow,
.shell-home-card-icon i.bi-activity,
.shell-home-card-icon i.bi-sliders,
.shell-home-card-icon i.bi-search-heart-fill,
.shell-home-card-icon i.bi-upc-scan            { color: #0891b2; }

/* Usuarios / permisos / personas → magenta */
.shell-home-card-icon i.bi-person-fill,
.shell-home-card-icon i.bi-people-fill,
.shell-home-card-icon i.bi-person-workspace,
.shell-home-card-icon i.bi-person-gear,
.shell-home-card-icon i.bi-person-badge-fill,
.shell-home-card-icon i.bi-shield-lock-fill,
.shell-home-card-icon i.bi-shield-check        { color: #be185d; }

/* Calendario / tiempo → azul cobalto medio */
.shell-home-card-icon i.bi-calendar-event-fill,
.shell-home-card-icon i.bi-calendar-week-fill  { color: #3b82f6; }

/* Botón "+ Añadir" en la cabecera del panel de favoritos. Va PEGADO al
   título (no margin-left:auto) — el cliente lo prefiere a la izquierda
   junto al heading, para que sea evidente que actúa sobre esa sección. */
.shell-home-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: linear-gradient(#3b78c0, #1f4a87);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(31,74,135,0.30);
    transition: filter 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.shell-home-add-btn:hover  { filter: brightness(1.06); box-shadow: 0 4px 10px rgba(31,74,135,0.40); }
.shell-home-add-btn:active { transform: translateY(1px); filter: brightness(0.96); }
.shell-home-add-btn i      { font-size: 13px; }

/* Tarjeta favorita — igual que .shell-home-card pero con un botón "X"
   superpuesto en la esquina al hover y soporte de drag & drop nativo
   para reordenar (HTML5 draggable). */
.shell-home-card-fav {
    position: relative;
    cursor: grab;
}
.shell-home-card-fav:active { cursor: grabbing; }

/* Mientras se arrastra esta tarjeta — semi-transparente, "agarrada".
   Usamos opacity y NO transform para que el drag image nativo del
   browser siga apareciendo en el cursor. */
.shell-home-card-fav.dragging {
    opacity: 0.45;
    cursor: grabbing;
}

/* Tarjeta destino del drag — borde azul resaltado para indicar dónde
   caería si soltamos ahora. */
.shell-home-card-fav.drag-target {
    border-color: #1f4a87;
    box-shadow:
        0 0 0 2px rgba(31,74,135,0.20),
        0 6px 14px rgba(31,74,135,0.18);
    transform: translateY(-2px);
}
.shell-home-card-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(198,40,40,0.10);
    color: #c62828;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.shell-home-card-fav:hover .shell-home-card-remove,
.shell-home-card-fav:focus-within .shell-home-card-remove {
    opacity: 1;
}
.shell-home-card-remove:hover {
    background: #c62828;
    color: #fff;
}

/* Estado vacío de la sección de favoritos — versión "CTA": clicable
   entera para abrir el modal de selección. Reusa .shell-home-empty
   pero con borde discontinuo y hover marcado. */
.shell-home-empty-cta {
    background: transparent;
    border: 2px dashed #b9c6d6;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    width: 100%;
    font: inherit;
    color: #6c7787;
}
.shell-home-empty-cta:hover {
    background: rgba(31,74,135,0.05);
    border-color: #7ba4d6;
    color: #1f4a87;
}
.shell-home-empty-cta:hover i { color: #1f4a87; }
.shell-home-empty-cta strong  { color: #1b3a6c; font-weight: 700; }

/* ===== Modal selector de favoritos ============================
   Overlay sobre TODA la pantalla (z-index alto). Diálogo centrado con
   árbol del menú permitido y checkbox por hoja. Persiste cada toggle
   inmediatamente (no hay botón "Guardar"); Hecho cierra. ESC cierra. */
.shell-fav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,30,55,0.40);
    z-index: 100;
    backdrop-filter: blur(2px);
}
.shell-fav-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 92vw);
    max-height: 80vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.30),
                0 2px 4px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    z-index: 110;
    overflow: hidden;
}
.shell-fav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(#3b78c0, #1f4a87);
    color: #fff;
}
.shell-fav-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.shell-fav-head h2 i { color: #ffd54a; }
.shell-fav-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shell-fav-close:hover { background: rgba(255,255,255,0.30); }

.shell-fav-hint {
    margin: 0;
    padding: 12px 18px 10px;
    background: #f6f9fd;
    border-bottom: 1px solid #e1e8f0;
    font-size: 12.5px;
    color: #4a5566;
}

/* Buscador del modal de accesos directos. Mismo lenguaje visual que el
   buscador del aside derecho (icono lupa + input grande), pero compacto
   para no comerse el espacio del árbol. */
.shell-fav-search {
    position: relative;
    padding: 10px 18px;
    background: #f6f9fd;
    border-bottom: 1px solid #e1e8f0;
}
.shell-fav-search input {
    width: 100%;
    height: 34px;
    padding: 0 36px 0 36px;
    border: 1px solid #b9c6d6;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.10s ease, box-shadow 0.10s ease;
}
.shell-fav-search input:focus {
    border-color: #3874cb;
    box-shadow: 0 0 0 3px rgba(56,116,203,0.20);
}
.shell-fav-search input::placeholder { color: #8895a8; }
.shell-fav-search-icon {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7a90;
    font-size: 14px;
    pointer-events: none;
}
.shell-fav-search-clear {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(31,74,135,0.10);
    color: #1f4a87;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shell-fav-search-clear:hover { background: rgba(31,74,135,0.18); }
.shell-fav-search-clear i { font-size: 11px; }

.shell-fav-tree {
    flex: 1;
    overflow: auto;
    padding: 10px 18px;
    background: #fff;
}

/* Resaltado del término encontrado dentro del label de la hoja. Amarillo
   suave compatible con el fondo blanco y con la fila marcada (fondo azul
   tenue). */
.fav-hl {
    background: #fff3a3;
    color: #1f2937;
    border-radius: 2px;
    padding: 0 2px;
    font-weight: 600;
}
.shell-fav-leaf.marcado .fav-hl {
    background: #ffe566;
    color: #1b3a6c;
}

/* Empty state cuando ninguna pantalla coincide con la búsqueda. */
.shell-fav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 16px;
    color: #6b7a90;
    font-size: 13px;
    text-align: center;
}
.shell-fav-empty i {
    font-size: 28px;
    color: #b9c6d6;
}
.shell-fav-empty strong { color: #1f4a87; }
.shell-fav-cat + .shell-fav-cat { margin-top: 14px; }
.shell-fav-cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #1b3a6c;
    border-bottom: 1px solid #d4dbe6;
    margin-bottom: 4px;
}
.shell-fav-cat-head i { font-size: 14px; }

.shell-fav-folder {
    margin: 4px 0 6px 8px;
}
.shell-fav-folder-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #4a5566;
}
.shell-fav-folder-head i { color: #4a5566; font-size: 13px; }
.shell-fav-folder-body { margin-left: 14px; }

.shell-fav-leaf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.10s ease;
}
.shell-fav-leaf:hover { background: rgba(31,74,135,0.08); }
.shell-fav-leaf.marcado { background: rgba(31,74,135,0.06); }
.shell-fav-leaf input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #1f4a87;
    cursor: pointer;
}
.shell-fav-leaf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #1f4a87;
    font-size: 14px;
    flex-shrink: 0;
}
/* Reusar la paleta categórica también dentro del modal — el ojo asocia
   cada pantalla con su familia. Apuntamos al <i> dentro de
   .shell-fav-leaf-icon con los mismos selectores que .menu-row. */
.shell-fav-leaf-icon i.bi-globe-europe-africa,
.shell-fav-leaf-icon i.bi-geo-alt-fill,
.shell-fav-leaf-icon i.bi-mailbox2            { color: #1d6f42; }
.shell-fav-leaf-icon i.bi-percent,
.shell-fav-leaf-icon i.bi-currency-exchange,
.shell-fav-leaf-icon i.bi-receipt,
.shell-fav-leaf-icon i.bi-receipt-cutoff,
.shell-fav-leaf-icon i.bi-bank,
.shell-fav-leaf-icon i.bi-bank2,
.shell-fav-leaf-icon i.bi-credit-card-2-front-fill,
.shell-fav-leaf-icon i.bi-cash-coin,
.shell-fav-leaf-icon i.bi-truck               { color: #c2410c; }
.shell-fav-leaf-icon i.bi-translate,
.shell-fav-leaf-icon i.bi-chat-square-text-fill,
.shell-fav-leaf-icon i.bi-envelope-fill,
.shell-fav-leaf-icon i.bi-envelope-at-fill,
.shell-fav-leaf-icon i.bi-envelope-paper-fill,
.shell-fav-leaf-icon i.bi-microsoft,
.shell-fav-leaf-icon i.bi-bell-fill,
.shell-fav-leaf-icon i.bi-send-fill           { color: #6f42c1; }
.shell-fav-leaf-icon i.bi-file-earmark-text-fill,
.shell-fav-leaf-icon i.bi-file-earmark-medical-fill,
.shell-fav-leaf-icon i.bi-file-earmark-pdf-fill,
.shell-fav-leaf-icon i.bi-bookmark-star-fill,
.shell-fav-leaf-icon i.bi-archive-fill        { color: #b91c1c; }
.shell-fav-leaf-icon i.bi-cloud-arrow-down-fill,
.shell-fav-leaf-icon i.bi-bar-chart-fill,
.shell-fav-leaf-icon i.bi-bar-chart-line-fill,
.shell-fav-leaf-icon i.bi-pie-chart-fill,
.shell-fav-leaf-icon i.bi-graph-up,
.shell-fav-leaf-icon i.bi-graph-up-arrow,
.shell-fav-leaf-icon i.bi-activity,
.shell-fav-leaf-icon i.bi-sliders,
.shell-fav-leaf-icon i.bi-search-heart-fill,
.shell-fav-leaf-icon i.bi-upc-scan            { color: #0891b2; }
.shell-fav-leaf-icon i.bi-person-fill,
.shell-fav-leaf-icon i.bi-people-fill,
.shell-fav-leaf-icon i.bi-person-workspace,
.shell-fav-leaf-icon i.bi-person-gear,
.shell-fav-leaf-icon i.bi-person-badge-fill,
.shell-fav-leaf-icon i.bi-shield-lock-fill,
.shell-fav-leaf-icon i.bi-shield-check        { color: #be185d; }
.shell-fav-leaf-icon i.bi-calendar-event-fill,
.shell-fav-leaf-icon i.bi-calendar-week-fill  { color: #3b82f6; }

.shell-fav-leaf-label {
    font-size: 13px;
    color: #1f2937;
}
.shell-fav-leaf.marcado .shell-fav-leaf-label {
    color: #1b3a6c;
    font-weight: 600;
}

.shell-fav-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #f6f9fd;
    border-top: 1px solid #d4dbe6;
}
.shell-fav-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #4a5566;
}
.shell-fav-counter i { color: #1f4a87; font-size: 14px; }
.shell-fav-done {
    padding: 6px 18px;
    background: linear-gradient(#3b78c0, #1f4a87);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.shell-fav-done:hover { filter: brightness(1.06); }

/* --- Buscador del aside derecho ---
   Input grande con icono lupa a la izquierda + lista de resultados que
   se rellena dinámicamente según el query. Cada resultado lleva icono,
   label y breadcrumb (categoría → carpeta) para desambiguar. Enter
   abre el primero, ESC vacía el input.

   El panel se estira (flex:1) para ocupar el alto sobrante del aside —
   el brand abajo conserva su altura fija. La lista de resultados toma
   el resto del panel y hace scroll interno si hay muchos. */
.shell-home-panel-search {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.shell-home-search-box {
    position: relative;
    display: flex;
    align-items: center;
}
.shell-home-search-icon-left {
    position: absolute;
    left: 12px;
    color: #6c7787;
    font-size: 15px;
    pointer-events: none;
}
.shell-home-search-input {
    flex: 1;
    height: 40px;
    padding: 6px 38px 6px 36px;
    border: 1px solid #c5cdda;
    border-radius: 8px;
    background: #f9fbfe;
    font-size: 14px;
    font-family: inherit;
    color: #1f2937;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.shell-home-search-input:hover { border-color: #9aa6b8; background: #fff; }
.shell-home-search-input:focus {
    outline: none;
    border-color: #3874cb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(56,116,203,0.18);
}
.shell-home-search-clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(108,119,135,0.12);
    color: #4a5566;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.shell-home-search-clear:hover { background: #c62828; color: #fff; }

.shell-home-search-results {
    margin-top: 4px;
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}
.shell-home-search-hint,
.shell-home-search-empty {
    margin: 0;
    padding: 12px 6px;
    font-size: 12.5px;
    color: #6c7787;
    text-align: center;
}
.shell-home-search-empty strong { color: #1b3a6c; }

.shell-home-search-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: background 0.10s ease, border-color 0.10s ease;
}
.shell-home-search-item:hover {
    background: #f6f9fd;
    border-color: #c9d6e8;
}
.shell-home-search-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #1f4a87;
    font-size: 16px;
}
/* Misma paleta categórica también dentro del buscador (selectores
   alineados con .menu-row / .shell-home-card-icon). */
.shell-home-search-item-icon i.bi-globe-europe-africa,
.shell-home-search-item-icon i.bi-geo-alt-fill,
.shell-home-search-item-icon i.bi-mailbox2            { color: #1d6f42; }
.shell-home-search-item-icon i.bi-percent,
.shell-home-search-item-icon i.bi-currency-exchange,
.shell-home-search-item-icon i.bi-receipt,
.shell-home-search-item-icon i.bi-receipt-cutoff,
.shell-home-search-item-icon i.bi-bank,
.shell-home-search-item-icon i.bi-bank2,
.shell-home-search-item-icon i.bi-credit-card-2-front-fill,
.shell-home-search-item-icon i.bi-cash-coin,
.shell-home-search-item-icon i.bi-truck               { color: #c2410c; }
.shell-home-search-item-icon i.bi-translate,
.shell-home-search-item-icon i.bi-chat-square-text-fill,
.shell-home-search-item-icon i.bi-envelope-fill,
.shell-home-search-item-icon i.bi-envelope-at-fill,
.shell-home-search-item-icon i.bi-envelope-paper-fill,
.shell-home-search-item-icon i.bi-microsoft,
.shell-home-search-item-icon i.bi-bell-fill,
.shell-home-search-item-icon i.bi-send-fill           { color: #6f42c1; }
.shell-home-search-item-icon i.bi-file-earmark-text-fill,
.shell-home-search-item-icon i.bi-file-earmark-medical-fill,
.shell-home-search-item-icon i.bi-file-earmark-pdf-fill,
.shell-home-search-item-icon i.bi-bookmark-star-fill,
.shell-home-search-item-icon i.bi-archive-fill        { color: #b91c1c; }
.shell-home-search-item-icon i.bi-cloud-arrow-down-fill,
.shell-home-search-item-icon i.bi-bar-chart-fill,
.shell-home-search-item-icon i.bi-bar-chart-line-fill,
.shell-home-search-item-icon i.bi-pie-chart-fill,
.shell-home-search-item-icon i.bi-graph-up,
.shell-home-search-item-icon i.bi-graph-up-arrow,
.shell-home-search-item-icon i.bi-activity,
.shell-home-search-item-icon i.bi-sliders,
.shell-home-search-item-icon i.bi-search-heart-fill,
.shell-home-search-item-icon i.bi-upc-scan            { color: #0891b2; }
.shell-home-search-item-icon i.bi-person-fill,
.shell-home-search-item-icon i.bi-people-fill,
.shell-home-search-item-icon i.bi-person-workspace,
.shell-home-search-item-icon i.bi-person-gear,
.shell-home-search-item-icon i.bi-person-badge-fill,
.shell-home-search-item-icon i.bi-shield-lock-fill,
.shell-home-search-item-icon i.bi-shield-check        { color: #be185d; }
.shell-home-search-item-icon i.bi-calendar-event-fill,
.shell-home-search-item-icon i.bi-calendar-week-fill  { color: #3b82f6; }

.shell-home-search-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.shell-home-search-item-label {
    font-size: 13px;
    font-weight: 600;
    color: #1b3a6c;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shell-home-search-item-bc {
    font-size: 11px;
    color: #6c7787;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shell-home-search-item-go {
    color: #aab7cb;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.10s ease, color 0.10s ease;
}
.shell-home-search-item:hover .shell-home-search-item-go {
    opacity: 1;
    color: #1f4a87;
}

/* --- Branding del aside (abajo, sobre el tapiz) ---
   Sin fondo propio — se posa directamente sobre el gradient del
   .shell-home, sin borde ni sombra de caja. Logo + wordmark + tagline
   en colores oscuros (azul corporativo) sobre el tapiz claro. Altura
   FIJA — el alto sobrante del aside se lo queda el buscador. */
.shell-home-brand {
    flex: 0 0 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 18px;
    color: #1b3a6c;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.shell-home-brand img {
    width: 86px;
    height: auto;
    /* Sin caja blanca — el logo SVG va directo sobre el tapiz. La
       sombra suave da algo de profundidad sin recurrir a un frame. */
    filter: drop-shadow(0 6px 16px rgba(15,30,55,0.22));
}
.shell-home-brand h1 {
    margin: 0;
    /* Wordmark NetOffice — tipografía corporativa LASO. */
    font-family: 'Tw Cen MT', "Segoe UI", system-ui, sans-serif;
    font-weight: 700;           /* Tw Cen MT solo tiene 700; el peso máximo de la familia */
    font-size: 38px;
    letter-spacing: 0.8px;
    line-height: 1;
    color: #1b3a6c;
    text-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.shell-home-brand p {
    display: block;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #2a3147;
    opacity: 0.78;
    max-width: 260px;
}

/* En viewports estrechos el aside completo se oculta — las pantallas
   de "continuar" + "favoritos" son las que aportan valor accionable. */
@media (max-width: 1100px) {
    .shell-home-body {
        grid-template-columns: 1fr;
    }
    .shell-home-aside { display: none; }
}

/* Estado vacío — sin recientes y sin sugerencias resueltas (ej. menú
   completamente filtrado por permisos). Mantiene la home navegable. */
.shell-home-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #6c7787;
    text-align: center;
}
.shell-home-empty i {
    font-size: 38px;
    color: #aab7cb;
}
.shell-home-empty p { margin: 0; font-size: 14px; }

/* --- Footer compacto con marca --- */
.shell-home-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 36px 18px;
    color: #5a6478;
    font-size: 12px;
    letter-spacing: 0.3px;
    border-top: 1px solid rgba(31,74,135,0.10);
}
.shell-home-foot img {
    height: 22px;
    opacity: 0.85;
}
.shell-home-foot span {
    font-weight: 700;
    color: #1b3a6c;
    /* Wordmark NetOffice — tipografía corporativa LASO. */
    font-family: 'Tw Cen MT', "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.3px;
}

#blazor-error-ui {
    background: #b32121;
    color: #fff;
    padding: 0.8rem 1rem;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: none;
    z-index: 1000;
    font-size: 13px;
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss {
    color: #fff;
    margin-left: 12px;
    cursor: pointer;
    text-decoration: underline;
}
.blazor-error-boundary {
    background: #b32121; padding: 1rem; color: #fff;
}
.blazor-error-boundary::after {
    content: "Se ha producido un error.";
}

/* ===== Login — split panel 50/50 (hero a la izquierda, formulario a la derecha) =====
   El logotipo "NetOffice" usa la tipografía global (Segoe UI) en
   font-weight 800 — pidieron explícitamente NO usar un display font
   fino, sólo la negrita máxima de la familia heredada. */
.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #eef1f6;
}

/* --- Hero (panel izquierdo con marca) --- */
.login-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18) 0%, transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(0,0,0,0.25) 0%, transparent 60%),
        linear-gradient(135deg, #3b78c0 0%, #1f4a87 60%, #143562 100%);
    overflow: hidden;
}
.login-hero::before {
    /* Trama decorativa muy sutil — puntos blancos con baja opacidad
       que dan textura sin distraer del contenido. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    opacity: 0.6;
}
.login-hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 480px;
    margin-top: auto;
    margin-bottom: auto;
}
.login-hero-logo {
    width: 96px;
    height: auto;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.30);
}
.login-hero-title {
    margin: 6px 0 0;
    /* Wordmark NetOffice — tipografía corporativa LASO. */
    font-family: 'Tw Cen MT', "Segoe UI", system-ui, sans-serif;
    font-weight: 700;            /* Tw Cen MT solo tiene 700; el peso máximo de la familia */
    font-size: 72px;
    letter-spacing: 2px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 4px 14px rgba(0,0,0,0.30);
}
.login-hero-tagline {
    margin: 0;
    font-size: 17px;
    line-height: 1.45;
    color: rgba(255,255,255,0.92);
    max-width: 440px;
}
.login-hero-features {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.login-hero-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,0.90);
}
.login-hero-features li i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}
.login-hero-foot {
    position: relative;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.65);
    margin-top: 28px;
}

/* --- Main (panel derecho con tarjeta) ---
   Mismo tratamiento "papel enmarcado" que el form-panel de los
   formularios master-detail (CLAUDE.md §2.20):
     · Gradiente diagonal blanco-frío → azul-grisáceo tenue
     · Radial sutil en la esquina inferior-derecha
     · Sombra interior en el borde izquierdo (junto al splitter)
     · Hairline blanca en el borde superior
   Coherencia visual con el resto de la app — el ojo lee el panel
   como una "superficie distinta" sin necesitar borde explícito. */
.login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    background:
        radial-gradient(circle at 100% 100%, rgba(95,140,200,0.10) 0%, transparent 55%),
        linear-gradient(135deg, #f6f9fd 0%, #dbe5f1 100%);
    box-shadow:
        inset 14px 0 18px -14px rgba(15,30,55,0.18),
        inset 0 1px 0 rgba(255,255,255,0.7);
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid #d4dbe6;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15,30,55,0.18),
                0 1px 2px rgba(15,30,55,0.06);
    padding: 30px 32px 24px;
    display: flex;
    flex-direction: column;
}
.login-card-head {
    margin-bottom: 18px;
}
.login-card-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1b3a6c;
    letter-spacing: 0.2px;
}
.login-card-head p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6c7787;
}
.login-lbl {
    font-size: 12px;
    color: #4a5566;
    margin: 12px 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.login-lbl i {
    color: #1f4a87;
    font-size: 13px;
}
.login-inp {
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #c5cdda;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.login-inp:hover { border-color: #9aa6b8; }
.login-inp:focus {
    outline: none;
    border-color: #3874cb;
    box-shadow: 0 0 0 3px rgba(56,116,203,0.20);
}
.login-error {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fde8e8;
    border: 1px solid #f5b1b1;
    border-left: 4px solid #c62828;
    border-radius: 6px;
    color: #991b1b;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.login-error i { font-size: 14px; color: #c62828; flex-shrink: 0; }
.login-btn {
    margin-top: 20px;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(#3b78c0, #1f4a87);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(31,74,135,0.30);
    transition: filter 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.login-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 18px rgba(31,74,135,0.40);
}
.login-btn:active {
    transform: translateY(1px);
    filter: brightness(0.96);
    box-shadow: 0 2px 6px rgba(31,74,135,0.30);
}
.login-btn i { font-size: 17px; }
.login-foot {
    margin-top: 16px;
    text-align: center;
    color: #8a96a8;
    font-size: 12px;
}
.login-foot a {
    color: #1f4a87;
    font-weight: 600;
}

/* ===== Login: selector de base de datos (dentro del form, sólo si hay 2+ tenants) ===== */
.login-tenant-select {
    background-color: #f5f9ff;
    cursor: pointer;
}

/* Responsive: en viewports estrechos colapsamos a un solo panel
   (sólo la tarjeta), igual que el patrón histórico. */
@media (max-width: 900px) {
    .login-shell {
        grid-template-columns: 1fr;
        background: linear-gradient(180deg, #f6f9fd 0%, #e6edf6 100%);
    }
    .login-hero { display: none; }
    .login-main { min-height: 100vh; }
}

/* ===== Responsive: viewport-narrow shell title bar (norma NetOffice §2.13) =====
   El menú principal se compacta a viewport <= 1300px para que no apriete
   contra el nombre del usuario / botón de salir cuando la ventana es estrecha. */
@media (max-width: 1300px) {
    .shell-titlebar {
        gap: 8px;
        padding: 0 8px;
    }
    .shell-product {
        font-size: 16px;
        letter-spacing: 0.3px;
    }
    .shell-menu {
        margin-left: 6px;
    }
    .menu-item {
        padding: 0 8px;
        gap: 4px;
    }
    .shell-tab {
        max-width: 180px;
        padding: 5px 8px;
    }
}

/* A viewport muy estrecho ocultamos la marca textual (queda el logo). */
@media (max-width: 900px) {
    .shell-product {
        display: none;
    }
    .menu-item span {
        font-size: 12px;
    }
}

/* ===== Botón Inicio (titlebar) ===== */
.shell-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 6px;
    color: rgba(255,255,255,0.70);
    font-size: 15px;
    cursor: pointer;
    margin-right: 6px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.shell-home-btn:hover {
    background: rgba(255,255,255,0.20);
    color: #fff;
    border-color: rgba(255,255,255,0.45);
}
.shell-home-btn.active {
    background: rgba(255,255,255,0.22);
    color: #fff;
    border-color: rgba(255,255,255,0.50);
}

/* ===== Botón de búsqueda global (titlebar) — CLAUDE.md §shell-cmd-palette =====
   Pill semi-transparente en la barra de título. Siempre visible aunque
   haya pestañas abiertas. Click abre el command palette (no hay atajo
   global de teclado — Ctrl+K chocaba con el atajo nativo del navegador). */
.shell-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 6px;
    color: rgba(255,255,255,0.88);
    font-size: 12.5px;
    height: 30px;
    padding: 0 12px;
    cursor: pointer;
    margin-right: 10px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.shell-search-btn:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.55);
    color: #fff;
}
.shell-search-btn i { font-size: 13px; }
.shell-search-btn-label { font-size: 12px; color: rgba(255,255,255,0.78); }
.shell-search-btn:hover .shell-search-btn-label { color: rgba(255,255,255,0.96); }
/* En viewports medios ocultamos el texto, sólo el icono. */
@media (max-width: 1100px) {
    .shell-search-btn-label { display: none; }
    .shell-search-btn { padding: 0 10px; gap: 0; }
}

/* ===== Command palette flotante ===== */
.shell-cmd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 200;
}
.shell-cmd-palette {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: min(580px, calc(100vw - 40px));
    background: #fff;
    border-radius: 10px;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.32),
        0 6px 20px rgba(0,0,0,0.18),
        0 0 0 1px rgba(0,0,0,0.08);
    z-index: 201;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
    animation: cmdPaletteIn 0.12s ease;
}
@keyframes cmdPaletteIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
}

/* ── Input row ── */
.shell-cmd-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e8ecf1;
    flex-shrink: 0;
}
.shell-cmd-input-wrap > i.bi {
    font-size: 17px;
    color: #6b7280;
    flex-shrink: 0;
}
.shell-cmd-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #111827;
    background: transparent;
    font-family: inherit;
    min-width: 0;
}
.shell-cmd-input::placeholder { color: #b0b7c3; }
.shell-cmd-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 3px 5px;
    line-height: 1;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
}
.shell-cmd-clear:hover { color: #374151; background: #f3f4f6; }
.shell-cmd-esc-hint {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 10.5px;
    color: #6b7280;
    font-family: inherit;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}

/* ── Results list ── */
.shell-cmd-results {
    overflow-y: auto;
    padding: 4px 0 6px;
    flex: 1;
}
.shell-cmd-section {
    padding: 8px 16px 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #a0aab4;
}
.shell-cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
    transition: background 0.08s;
    box-sizing: border-box;
}
.shell-cmd-item:hover,
.shell-cmd-item.selected {
    background: #f0f5ff;
}
.shell-cmd-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #4f7be9;
    transition: background 0.08s, color 0.08s;
}
.shell-cmd-item.selected .shell-cmd-item-icon,
.shell-cmd-item:hover .shell-cmd-item-icon {
    background: #dbeafe;
    color: #1d4ed8;
}
.shell-cmd-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.shell-cmd-item-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.shell-cmd-item.selected .shell-cmd-item-label { color: #1e3a8a; }
.shell-cmd-item-info {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.shell-cmd-badge {
    flex-shrink: 0;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}
.shell-cmd-badge-rec  { background: #fef3c7; color: #92400e; }
.shell-cmd-badge-fav  { background: #ede9fe; color: #6d28d9; }
.shell-cmd-go {
    color: #d1d5db;
    font-size: 12px;
    flex-shrink: 0;
}
.shell-cmd-item.selected .shell-cmd-go,
.shell-cmd-item:hover .shell-cmd-go { color: #93c5fd; }
.shell-cmd-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    color: #9ca3af;
    font-size: 13px;
}
.shell-cmd-empty i { font-size: 20px; }

/* ── Footer con hints de teclado ── */
.shell-cmd-footer {
    display: flex;
    gap: 16px;
    padding: 7px 16px;
    border-top: 1px solid #f0f2f5;
    font-size: 11px;
    color: #a0aab4;
    flex-shrink: 0;
}
.shell-cmd-footer kbd {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: inherit;
    color: #6b7280;
    margin-right: 2px;
}
@media (max-width: 600px) {
    .shell-cmd-palette { top: 60px; }
    .shell-cmd-footer  { display: none; }
}

/* ===== Dropdown del escudo (validación + seguimiento) =====
   El botón shell-validacion-btn ahora tiene un dropdown flotante con N
   entradas (Validación crítica + Seguimiento del proyecto). Estructura
   preparada para más entries. */
.shell-shield-menu {
    position: relative;
    display: inline-flex;
}

.shell-shield-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border: 1px solid #c5cdd9;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    min-width: 240px;
    overflow: hidden;
    z-index: 1000;
    animation: shieldDropdownFade 0.12s ease-out;
}

@keyframes shieldDropdownFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.shell-shield-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #eef0f3;
    cursor: pointer;
    font-size: 13px;
    color: #1f2937;
    text-align: left;
    transition: background 0.08s;
}

.shell-shield-dropdown-item:last-child { border-bottom: 0; }
.shell-shield-dropdown-item:hover { background: #eef3f9; }

/* Separador + cabecera de categoría dentro del dropdown del escudo
   (sección "Comercial IA preview" para super-admins). */
.shell-shield-dropdown-sep {
    height: 1px;
    background: #d8dee5;
    margin: 6px 0 0;
}
.shell-shield-dropdown-cat {
    font-size: 11px;
    font-weight: 700;
    color: #1f4a87;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 14px 4px;
    background: linear-gradient(180deg, #f6f9fd 0%, #ffffff 100%);
}
.shell-shield-dropdown-cat i.bi {
    color: #5fa8ff;
    margin-right: 4px;
}
.shell-shield-dropdown-item small {
    color: #8a96a8;
    font-weight: 400;
    margin-left: 4px;
    font-size: 11px;
}

.shell-shield-dropdown-item i.bi {
    color: #1f4a87;
    font-size: 15px;
}

.shell-shield-dropdown-item .badge-mini {
    margin-left: auto;
    background: #b22a2a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}

/* ===== Pantalla "Seguimiento del proyecto" (sg-*) =====
   Layout y tipografía paralelos al panel de Validación crítica. */
.sg-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(180deg, #f6f9fd 0%, #dbe5f1 100%);
    padding: 14px 20px;
    gap: 12px;
    box-sizing: border-box;
}

.sg-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.sg-head-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.sg-head-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f4a87;
    white-space: nowrap;
}
.sg-head-title i.bi {
    font-size: 22px;
    color: #1f4a87;
}

.sg-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #555;
}
.sg-counter-sep { color: #c5cdd9; }

.sg-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sg-resync,
.sg-refresh,
.sg-close {
    background: #fff;
    border: 1px solid #c5cdd9;
    color: #1f4a87;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    font-size: 12px;
}

.sg-resync { padding: 0 12px; font-weight: 500; }
.sg-resync:disabled { opacity: 0.55; cursor: not-allowed; }
.sg-resync:hover:not(:disabled),
.sg-refresh:hover { background: #eef3f9; }

.sg-refresh { width: 28px; padding: 0; }

.sg-close {
    width: 28px;
    padding: 0;
    color: #b22a2a;
    margin-left: 4px;
}
.sg-close:hover {
    background: #fdecec;
    border-color: #b22a2a;
}

/* Selector de vista (Pendientes / En desarrollo / Terminados / Todos) */
.sg-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;       /* mantener todo en una sola línea para que no
                                "salte" cuando cambia el ancho de la pestaña
                                activa o del tab-count */
    flex-shrink: 0;
    overflow-x: auto;        /* si la combinación tabs + lateral no cabe en
                                viewports estrechos, hay scroll horizontal
                                interno en lugar de descolocarse */
    overflow-y: hidden;
    scrollbar-width: thin;   /* Firefox: scrollbar fina */
}

.sg-tab {
    background: #fff;
    border: 1px solid #c5cdd9;
    color: #1f4a87;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;          /* tabs no se encogen — mantienen su ancho */
    white-space: nowrap;
}

.sg-tab:hover { background: #eef3f9; }

.sg-tab.active {
    background: #1f4a87;
    color: #fff;
    border-color: #1f4a87;
}

.sg-tab i { font-size: 13px; }

.sg-tab-count {
    display: inline-block;
    background: rgba(31, 74, 135, 0.12);
    color: #1f4a87;
    font-weight: 700;
    border-radius: 9px;
    padding: 0 7px;
    font-size: 10.5px;
    min-width: 16px;
    text-align: center;
}
.sg-tab.active .sg-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.sg-tabs-side {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #4b5563;
    flex-shrink: 0;          /* nunca se encoge ni salta de línea */
    white-space: nowrap;
    padding-left: 12px;
}
.sg-tabs-side > span { white-space: nowrap; }
.sg-tabs-side i { font-size: 13px; }

/* Selector de rango temporal — pill compacto a continuación de las
   pestañas de vista. "Mostrar: [Semana] [Mes] [Todo]" con la opción
   activa resaltada. Default = Semana (uso típico del cliente).
   Visualmente se separa de las pestañas para que se distinga el agrupado. */
.sg-rango {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px 10px;
    margin-left: 8px;
    border-radius: 16px;
    background: rgba(31, 74, 135, 0.06);
    border: 1px solid rgba(31, 74, 135, 0.18);
    white-space: nowrap;
}
.sg-rango-lbl {
    color: #4b5563;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sg-rango-lbl i { font-size: 12px; opacity: 0.8; color: #1f4a87; }
.sg-rango-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #1f4a87;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.sg-rango-btn i { font-size: 11px; }
.sg-rango-btn:hover { background: rgba(31, 74, 135, 0.10); }
.sg-rango-btn.active {
    background: #1f4a87;
    color: #fff;
    border-color: #1f4a87;
    font-weight: 600;
}
.sg-rango-btn.active i { color: #fff; }

.sg-banner {
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.sg-banner-ok    { background: #e6f4ea; color: #1d6f42; border: 1px solid #b7debc; }
.sg-banner-info  { background: #eaf3fb; color: #1f4a87; border: 1px solid #b8d3ea; }
.sg-banner-error { background: #fdecec; color: #b22a2a; border: 1px solid #f3b9b9; }
.sg-banner-close {
    margin-left: auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    padding: 0 4px;
    opacity: 0.6;
}
.sg-banner-close:hover { opacity: 1; }

.sg-body {
    display: grid;
    grid-template-columns: minmax(620px, 1.4fr) 1px minmax(360px, 1fr);
    grid-template-rows: 1fr;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    border: 1px solid #c5cdd9;
    border-radius: 6px;
    overflow: hidden;
}

/* CRÍTICO: forzar grid-row: 1 en TODOS los items (incluido el ::before del
   separador) para que el text-node de whitespace que Blazor inserta entre
   los <div> no autoflow-cree una fila 2 que empuja los paneles hacia abajo. */
.sg-body::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    background: #e2e6ec;
    width: 1px;
}
.sg-grid-panel,
.sg-detail-panel {
    grid-row: 1;
}

/* ===== Master grid ===== */
.sg-grid-panel {
    grid-column: 1;
    overflow: auto;
    background: #fafbfd;
}

.sg-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    color: #1f2937;
    table-layout: fixed;
}

.sg-grid thead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

.sg-grid thead th {
    text-align: left;
    font-weight: 600;
    color: #4b5563;
    padding: 0;
    background: #eef3f9;
    border-bottom: 1px solid #c5cdd9;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
}

/* Botón-cabecera clicable para sort por columna. Ocupa todo el TH,
   hereda el ancho fijo del column. Hover destaca; el indicador de sort
   (idle / active) se renderiza al lado del label. */
.sg-th-sort {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 7px 8px;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sg-th-sort:hover { background: rgba(31, 74, 135, 0.08); }
.sg-th-sort i.bi { font-size: 11px; }
.sg-th-sort-idle   { opacity: 0.30; }
.sg-th-sort-active { color: #1f4a87; opacity: 1; }

.sg-grid tbody tr {
    cursor: pointer;
}
.sg-grid tbody tr:hover { background: #f1f5fa; }
.sg-grid tbody tr.selected { background: #d8e7f6; }

.sg-grid tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #eef0f3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-col-proy   { width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-col-cli    { width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-col-tipo   { width: 80px; }
.sg-col-cat    { width: 110px; }
.sg-col-nombre { width: auto; }
.sg-col-estado { width: 130px; }
.sg-col-prog   { width: 130px; }
.sg-col-fecha  { width: 100px; }
.sg-col-min    { width: 70px; text-align: right; }

/* Chip "proyecto activo" en la cabecera del panel — al lado del título.
   Cuando hay 1 sólo proyecto activo (caso NetOfficeWeb hoy) se muestra en
   detalle (nombre · cliente · departamento). Cuando entren más, se colapsa
   a "N proyectos · M activos". */
.sg-proyecto-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(31, 74, 135, 0.10);
    color: #1f4a87;
    font-size: 12px;
    font-weight: 500;
    margin-left: 12px;
    max-width: 540px;
    overflow: hidden;
    white-space: nowrap;
}
.sg-proyecto-chip i.bi { font-size: 13px; opacity: 0.85; }
.sg-proyecto-name { font-weight: 700; }
.sg-proyecto-sep  { color: #c5cdd9; }
.sg-proyecto-dept {
    background: #fff;
    border: 1px solid #b8d3ea;
    border-radius: 9px;
    padding: 1px 7px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}

/* Filtros por columna */
.sg-grid-filter-row th {
    background: #f6f8fb !important;
    padding: 4px 6px !important;
    text-transform: none !important;
    font-weight: 400 !important;
}
.sg-grid-filter-inp {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 11px;
    background: #fff;
}
.sg-grid-filter-inp:focus {
    outline: 0;
    border-color: #1f4a87;
    box-shadow: 0 0 0 2px rgba(31, 74, 135, 0.1);
}

.sg-empty-row td {
    border-bottom: 0 !important;
}
.sg-empty {
    padding: 30px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}
.sg-empty i.bi { font-size: 32px; opacity: 0.4; }
.sg-empty p { margin: 8px 0 4px 0; }

.sg-grid-clear-filtros {
    background: #1f4a87;
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
}

.sg-grid-filter-summary {
    padding: 6px 10px;
    font-size: 11px;
    color: #4b5563;
    background: #fffbeb;
    border-top: 1px solid #f3e8a3;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sg-grid-filter-clear-link {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: #1f4a87;
    cursor: pointer;
    text-decoration: underline;
    font-size: 11px;
}

/* Pills de tipo y estado */
.sg-tipo-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #eef3f9;
    color: #1f4a87;
    border: 1px solid #b8d3ea;
}
.sg-tipo-formulario { background: #eef3f9; color: #1f4a87; border-color: #b8d3ea; }
.sg-tipo-utilidad   { background: #fff5e6; color: #a4540a; border-color: #f3c794; }
.sg-tipo-rcl        { background: #f0eafa; color: #5b3791; border-color: #cdbeea; }
.sg-tipo-api        { background: #e6f4ea; color: #1d6f42; border-color: #b7debc; }
.sg-tipo-infra      { background: #f4f6f8; color: #4b5563; border-color: #c5cdd9; }

.sg-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
}
.sg-pill-pendiente               { background: #6c757d; }   /* gris — no se ha tocado */
.sg-pill-en_desarrollo           { background: #2563eb; }   /* azul — en marcha */
.sg-pill-pendiente_revisar       { background: #d6850c; }   /* ámbar — esperando Tipo 4 */
.sg-pill-modificado_tras_revisar { background: #c62828; }   /* rojo — alerta: tocado tras revisar */
.sg-pill-modificado              { background: #c62828; }   /* alias del anterior por si se usa el nombre corto */
.sg-pill-revisado                { background: #1d6f42; }   /* verde — testeado y verificado */
.sg-pill-obsoleto                { background: #adb5bd; }   /* gris claro — fuera del proyecto */
.sg-pill-estancado               { background: #c62828; }   /* rojo, mismo lenguaje que modificado */

/* ===== Ficha detalle ===== */
.sg-detail-panel {
    grid-column: 3;
    overflow: auto;
    background: #fafbfd;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
}

.sg-detail-head h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #1f4a87;
    font-weight: 700;
}

.sg-meta {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 4px 8px;
    margin: 0 0 12px 0;
    font-size: 12px;
}
.sg-meta dt { color: #6b7280; font-weight: 500; }
.sg-meta dd { margin: 0; word-break: break-word; }
.sg-meta code {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 11px;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
}
.sg-meta small { color: #6b7280; }

.sg-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sg-detail-body h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    margin: 14px 0 6px 0;
    flex: 0 0 auto;
}

.sg-tipos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    flex: 0 0 auto;
}
.sg-tipos-grid > div {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 5px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sg-tipo-min {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}
.sg-tipo-min-rev   { color: #1d6f42; }
.sg-tipo-min-total { color: #1f4a87; font-weight: 700; }
.sg-tipo-lbl { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; }

.sg-historico,
.sg-estado-log {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    margin-bottom: 8px;
    table-layout: fixed;
}
.sg-historico thead th,
.sg-estado-log thead th {
    background: #f3f4f6;
    text-align: left;
    padding: 4px 6px;
    border-bottom: 1px solid #d1d5db;
    text-transform: uppercase;
    font-size: 10px;
    color: #6b7280;
}
.sg-historico tbody td,
.sg-estado-log tbody td {
    padding: 4px 6px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: top;
}
.sg-historico tbody tr {
    cursor: pointer;
}
.sg-historico tbody tr:hover { background: #f7fbfd; }
.sg-historico tbody tr.sg-row-rev { background: #eaf6ee; }
.sg-historico tbody tr.sg-row-rev:hover { background: #ddefe2; }

.sg-h-fecha { width: 80px;  white-space: nowrap; }
.sg-h-tipo  { width: 38px; }
.sg-h-prog  { width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-h-min   { width: 50px; text-align: right; }
.sg-h-com   { /* resto del ancho */ }

/* Fila de filtros del histórico — debajo de la cabecera, persistente. */
.sg-historico tr.sg-historico-filter-row th {
    background: #f6f8fb !important;
    padding: 3px 4px !important;
    text-transform: none !important;
    font-weight: 400 !important;
    border-bottom: 1px solid #d8dee6;
}
.sg-historico-filter-inp {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    background: #fff;
}
.sg-historico-filter-inp:focus {
    outline: 0;
    border-color: #1f4a87;
    box-shadow: 0 0 0 2px rgba(31, 74, 135, 0.1);
}
.sg-historico-filter-tipo {
    text-align: center;
}

.sg-com-short {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    vertical-align: middle;
    color: #4b5563;
}

.sg-tipo-tag {
    display: inline-block;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    background: #eef3f9;
    color: #1f4a87;
}
.sg-tipo-tag-1 { background: #eef3f9; color: #1f4a87; }
.sg-tipo-tag-2 { background: #fff5e6; color: #a4540a; }
.sg-tipo-tag-3 { background: #f0eafa; color: #5b3791; }
.sg-tipo-tag-4 { background: #e6f4ea; color: #1d6f42; }
.sg-tipo-tag-5 { background: #f4f6f8; color: #4b5563; }

.sg-empty-inline {
    color: #6b7280;
    font-size: 12px;
    font-style: italic;
    margin: 0;
}

/* ===========================================================
   Modal "Trabajo detalle" (TrabajoDetalleDialog)
   Doble-click en una fila del histórico abre este modal.
   Estructura: header + body con dl-meta + secciones del comentario.
   =========================================================== */
.td-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 50, 0.45);
    z-index: 9000;
    backdrop-filter: blur(2px);
    animation: tdFadeIn 0.12s ease-out;
}
.td-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, 92vw);
    max-height: 88vh;
    background: linear-gradient(180deg, #f6f9fd 0%, #e8eef7 100%);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32),
                0 8px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    z-index: 9001;
    animation: tdSlideIn 0.18s ease-out;
    overflow: hidden;
}
@keyframes tdFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tdSlideIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.td-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(180deg, #1f4a87 0%, #163a6c 100%);
    color: #fff;
    flex-shrink: 0;
}
.td-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.td-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-head .sg-tipo-tag {
    font-size: 11px;
    padding: 2px 8px;
}
.td-fecha-chip {
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 2px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.td-fecha-chip i.bi { font-size: 12px; }

.td-close {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.td-close:hover {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(255, 255, 255, 0.55);
}

.td-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.td-meta-grid {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr minmax(140px, auto) 1fr;
    gap: 6px 14px;
    margin: 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: 6px;
    font-size: 12.5px;
}
.td-meta-grid dt {
    color: #4b5563;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.td-meta-grid dt i.bi {
    font-size: 13px;
    color: #1f4a87;
    opacity: 0.8;
}
.td-meta-grid dd {
    margin: 0;
    color: #1f2937;
    word-break: break-word;
}
.td-meta-grid dd strong { font-weight: 600; }
.td-meta-grid dd small { color: #6b7280; margin-left: 4px; }
.td-meta-grid dd code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: Consolas, Monaco, monospace;
    font-size: 11px;
}
.td-abierto { color: #d6850c; font-weight: 500; font-style: italic; }
.td-badge-transversal {
    display: inline-block;
    padding: 1px 9px;
    background: #c62828;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Secciones del comentario (Tarea / Solución / Tiempo / Versión …)
   Cada una con su acento de color e icono propio. El cuerpo se renderiza
   en <pre> con whitespace pre-wrap para preservar saltos de línea. */
.td-seccion {
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: 6px;
    overflow: hidden;
    /* Sin esto, en .td-body (flex column) las secciones se encogen
       proporcionalmente para caber y el overflow:hidden del border-radius
       corta el texto sin scroll visible. Forzamos altura por contenido y
       dejamos que .td-body haga el scroll global. */
    flex-shrink: 0;
}
.td-seccion h4 {
    margin: 0;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: #4b5563;
}
.td-seccion h4 i.bi { font-size: 14px; }
.td-seccion-cuerpo {
    margin: 0;
    padding: 12px 16px;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
    background: #fafbfd;
    max-height: 420px;       /* secciones largas (TAREA / SOLUCIÓN / COMENT.) */
    overflow-y: auto;        /* scroll vertical interno */
    overflow-x: auto;        /* y horizontal si la línea no rompe */
}
/* Acentos por tipo de sección */
.td-seccion-tarea h4      { background: #1f4a87; }                /* azul institucional */
.td-seccion-solucion h4   { background: #1d6f42; }                /* verde — completed */
.td-seccion-tiempo h4     { background: #d6850c; }                /* ámbar — métricas */
.td-seccion-version h4    { background: #5b3791; }                /* morado — release */
.td-seccion-materiales h4 { background: #a4540a; }                /* naranja oscuro */
.td-seccion-desplaz h4    { background: #2563eb; }                /* azul info */
.td-seccion-notas h4      { background: #6c757d; }                /* gris — info menor */
.td-seccion-resumen h4    { background: #1f4a87; }
.td-seccion-contexto h4   { background: #4b5563; }
.td-seccion-neutro h4     { background: #4b5563; }
.td-seccion-comentario h4 { background: #5b3791; }                /* morado — comentario técnico */
.td-seccion-vacia {
    padding: 12px 16px;
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
    margin: 0;
    background: #fafbfd;
}
.td-seccion-vacia-block {
    padding: 16px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.td-loading {
    padding: 14px 18px;
    color: #4b5563;
    font-size: 12px;
    text-align: center;
    background: #f3f4f6;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.td-loading i.bi { animation: tdSpin 1s linear infinite; }
@keyframes tdSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.td-id {
    font-family: Consolas, Monaco, monospace;
    background: rgba(255,255,255,0.15);
    padding: 1px 7px;
    border-radius: 4px;
    margin-left: 4px;
    font-size: 13px;
    font-weight: 600;
}

.td-estado-tag {
    display: inline-block;
    padding: 1px 8px;
    background: #6c757d;
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Para Tarea y Solución, monospace ligero para que el código y los
   bullets de carácter '•' encajen visualmente. */
.td-seccion-tarea .td-seccion-cuerpo,
.td-seccion-solucion .td-seccion-cuerpo {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.td-seccion-version .td-seccion-cuerpo {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 12px;
    background: #1e1e1e;
    color: #d4d4d4;
}

.td-foot {
    padding: 10px 18px;
    border-top: 1px solid #d8dee6;
    background: #f6f8fb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.td-btn-primary {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    border: 0;
    padding: 7px 18px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.td-btn-primary:hover { background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%); }

/* ============================================================
   Estadisticas (CLAUDE.md - paneles de stats Programadores /
   Proyectos / Clientes). Layout comun: header con rango + KPIs +
   sidebar de seleccion + main con tarjetas de graficos.
   ============================================================ */

.st-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #f4f6fa;
    overflow: hidden;
}

.st-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%);
    border-bottom: 1px solid #d2dbe6;
    box-shadow: 0 1px 3px rgba(15, 30, 55, 0.06);
}
.st-head-title {
    display: flex; align-items: center; gap: 10px; color: #1f2c3d;
}
.st-head-title h2 { margin: 0; font-size: 18px; font-weight: 700; }
.st-head-title i { font-size: 22px; color: #1f4a87; }
.st-prog .st-head-title i { color: #1f4a87; }
.st-proy .st-head-title i { color: #2f6ec1; }
.st-cli  .st-head-title i { color: #29a663; }

.st-loading {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff8d0; padding: 3px 8px; border-radius: 10px;
    font-size: 12px; color: #856e1e;
}
.st-spin { animation: st-spin 0.8s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

.st-head-actions { display: flex; align-items: center; gap: 12px; }

.st-rango {
    display: flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #c9ced4;
    border-radius: 6px; padding: 4px 10px;
}
.st-rango-lbl {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: #4a5566; font-weight: 600;
}
.st-rango-inp {
    border: 1px solid #c9ced4; border-radius: 4px;
    padding: 2px 6px; font-size: 12px; height: 24px;
    background: #fff; color: #1f2c3d; font-family: inherit;
}
.st-rango-inp:focus {
    outline: none; border-color: #3874cb;
    box-shadow: 0 0 0 1px #3874cb;
}
.st-rango-presets {
    display: flex; gap: 4px; margin-left: 6px;
    border-left: 1px solid #d8dde4; padding-left: 8px;
}
.st-rango-preset {
    background: #f4f7fb; border: 1px solid #c9d1de;
    color: #1f4a87; border-radius: 4px;
    padding: 2px 8px; font-size: 11px; font-weight: 600;
    cursor: pointer;
}
.st-rango-preset:hover { background: #e6eef9; border-color: #1f4a87; }

.st-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #c9d1de;
    color: #1f4a87; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.st-back:hover { background: #eef3fa; border-color: #1f4a87; }

.st-empty-page {
    flex: 1 1 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #6c7787; padding: 40px;
}
.st-empty-page i { font-size: 48px; color: #b9c1cd; margin-bottom: 12px; }
.st-empty-page p { margin: 0; font-size: 14px; }

/* === KPIs === */
.st-kpis {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 12px 18px 0;
}
.st-kpi {
    background: #fff;
    border: 1px solid #d8dde4;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(15, 30, 55, 0.06);
    border-left: 4px solid #c9d1de;
    transition: transform 0.15s, box-shadow 0.15s;
}
.st-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(15, 30, 55, 0.10);
}
.st-kpi-val {
    font-size: 22px; font-weight: 800;
    color: #1f2c3d; line-height: 1;
}
.st-kpi-lbl {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: #4a5566; font-weight: 600;
}
.st-kpi-lbl i { font-size: 13px; }
.st-kpi-blue   { border-left-color: #1f4a87; }
.st-kpi-blue   .st-kpi-lbl i { color: #1f4a87; }
.st-kpi-green  { border-left-color: #29a663; }
.st-kpi-green  .st-kpi-lbl i { color: #29a663; }
.st-kpi-purple { border-left-color: #a83279; }
.st-kpi-purple .st-kpi-lbl i { color: #a83279; }
.st-kpi-orange { border-left-color: #d6850c; }
.st-kpi-orange .st-kpi-lbl i { color: #d6850c; }
.st-kpi-slate  { border-left-color: #3a4754; }
.st-kpi-slate  .st-kpi-lbl i { color: #3a4754; }

/* === Body: side + main === */
.st-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
    padding: 12px 18px 18px;
    overflow: hidden;
    min-height: 0;
}

.st-side {
    background: #fff;
    border: 1px solid #d8dde4;
    border-radius: 8px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 3px rgba(15, 30, 55, 0.06);
}
.st-side-title {
    margin: 0; padding: 10px 12px;
    background: linear-gradient(180deg, #f6f9fd 0%, #e6eef9 100%);
    border-bottom: 1px solid #d2dbe6;
    font-size: 13px; font-weight: 700; color: #1f2c3d;
    display: inline-flex; align-items: center; gap: 6px;
}
.st-side-list {
    list-style: none; margin: 0; padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.st-side-list li { border-bottom: 1px solid #f0f3f7; }
.st-side-row {
    width: 100%; text-align: left;
    background: transparent; border: 0;
    padding: 8px 12px; cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
    transition: background 0.1s;
}
.st-side-row:hover { background: #f4f8fd; }
.st-side-row.active {
    background: #d8e6f6;
    box-shadow: inset 3px 0 0 #1f4a87;
}
.st-side-name {
    font-size: 12.5px; font-weight: 700; color: #1f2c3d;
    display: flex; align-items: center; gap: 6px;
}
.st-side-meta {
    display: flex; gap: 10px;
    font-size: 11px; color: #6c7787;
}
.st-side-meta span {
    display: inline-flex; align-items: center; gap: 3px;
    font-variant-numeric: tabular-nums;
}
.st-side-meta i { color: #8a93a3; font-size: 10px; }
.st-side-sub {
    font-size: 10.5px; color: #6c7787;
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 1px;
}
.st-side-sub i { color: #8a93a3; }

.st-pill-mini {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.st-pill-mini-off { background: #ffe2e2; color: #a31f1f; }

.st-main {
    overflow-y: auto;
    display: flex; flex-direction: column;
    gap: 12px;
    padding-right: 4px;
}

.st-card {
    background: #fff;
    border: 1px solid #d8dde4;
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 0 1px 3px rgba(15, 30, 55, 0.06);
}
.st-card-detail { background: linear-gradient(180deg, #f6f9fd 0%, #ffffff 60%); }
.st-card-tip {
    text-align: center; color: #6c7787; padding: 26px;
    font-size: 13px;
}
.st-card-tip i {
    font-size: 28px; color: #b9c1cd;
    display: block; margin-bottom: 8px;
}
.st-card-tip p { margin: 0; }

.st-card-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eef1f6;
    padding-bottom: 8px;
}
.st-card-head h3 {
    margin: 0; font-size: 14px; font-weight: 700; color: #1f2c3d;
}
.st-card-head h3 small {
    font-weight: 500; color: #6c7787; font-size: 12px;
}
.st-card-head i { color: #1f4a87; font-size: 16px; }

.st-card h4 {
    margin: 0 0 8px 0;
    font-size: 12.5px; font-weight: 700; color: #4a5566;
    display: inline-flex; align-items: center; gap: 6px;
}
.st-card h4 i { color: #1f4a87; font-size: 12px; }

.st-detail-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.st-mini {
    background: #fff; border: 1px solid #e3e8ef;
    border-radius: 6px; padding: 8px 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.st-mini-val {
    font-size: 16px; font-weight: 800; color: #1f4a87;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.st-mini-lbl {
    font-size: 10.5px; color: #6c7787;
    text-transform: uppercase; letter-spacing: 0.4px;
}

.st-card-row {
    display: grid;
    gap: 16px;
    margin-top: 14px;
}
.st-card-row:has(.st-card-half) { grid-template-columns: 1fr 1fr; }
.st-card-row:has(.st-card-third) { grid-template-columns: 1fr 1fr 1fr; }
.st-card-row:has(.st-card-full) { grid-template-columns: 1fr; }

.st-card-half, .st-card-third, .st-card-full {
    min-width: 0;
}

/* Bloque inferior: ranking (mas ancho) + distribucion global (donut estrecho).
   Pone los 2 elementos lado a lado para no obligar a scrollear toda la
   pagina hacia abajo. El donut, que es pequeno, va a la derecha; el ranking,
   que necesita anchura para etiqueta+barra+valor, va a la izquierda con 1.6 fr. */
.st-bottom-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
    min-width: 0;
}
.st-bottom-row > .st-card { min-width: 0; }

/* Responsive: en pantallas estrechas colapsamos a 1 columna */
@media (max-width: 1280px) {
    .st-body { grid-template-columns: 220px 1fr; }
    .st-kpis { grid-template-columns: repeat(3, 1fr); }
    .st-detail-grid { grid-template-columns: repeat(3, 1fr); }
    .st-card-row:has(.st-card-half) { grid-template-columns: 1fr; }
    .st-card-row:has(.st-card-third) { grid-template-columns: 1fr; }
    .st-rango-presets { display: none; }
}

/* En viewports realmente estrechos (<1100px, p.ej. tablet horizontal o
   ventana muy reducida) el bottom-row colapsa a 1 columna para que el
   donut y el ranking no se aprieten más allá de lo legible. */
@media (max-width: 1100px) {
    .st-bottom-row { grid-template-columns: 1fr; }
}

/* === Botones de la zona red en SeguimientoPanel header === */
.sg-shortcut-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
    border: 1px solid #c9d1de;
    border-radius: 6px;
    padding: 4px 6px;
    box-shadow: 0 1px 2px rgba(15, 30, 55, 0.05);
    margin-right: 8px;
}
.sg-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #c9d1de;
    color: #1f4a87;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    white-space: nowrap;
}
.sg-shortcut:hover {
    background: #eef3fa;
    border-color: #1f4a87;
}
.sg-shortcut:active { transform: translateY(1px); }
.sg-shortcut i { font-size: 13px; }

.sg-shortcut-trabajos { color: #1f4a87; }
.sg-shortcut-trabajos:hover i { color: #1f4a87; }

.sg-shortcut-stats-prog  { color: #2f6ec1; border-color: #cad8e8; }
.sg-shortcut-stats-prog:hover { background: #eaf2fb; border-color: #2f6ec1; }
.sg-shortcut-stats-prog i { color: #2f6ec1; }

.sg-shortcut-stats-proy  { color: #a83279; border-color: #e6c9da; }
.sg-shortcut-stats-proy:hover { background: #fbeef5; border-color: #a83279; }
.sg-shortcut-stats-proy i { color: #a83279; }

.sg-shortcut-stats-cli   { color: #1a6b3d; border-color: #c5e0d2; }
.sg-shortcut-stats-cli:hover { background: #eaf6ee; border-color: #1a6b3d; }
.sg-shortcut-stats-cli i { color: #1a6b3d; }

/* ===== Banner "restaurar pestañas" (CLAUDE.md §2.34) ===================
   Aparece encima de la barra de tabs cuando hay un snapshot persistido
   de la sesión anterior. Una sola decisión (Restaurar / Empezar limpio)
   y se oculta. Tono "papel iluminado" del shell, NO los gradientes
   slate del toolbar §2.12.1 — esto es banner informativo, no botonera. */
.shell-restore-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: linear-gradient(180deg, #fff8e1 0%, #fff3c4 100%);
    border-bottom: 1px solid #e0c97a;
    border-top: 1px solid #f0dca2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    font-size: 13px;
    color: #5a4400;
}
.shell-restore-banner > i.bi-clock-history {
    font-size: 16px;
    color: #c9a700;
}
.shell-restore-text {
    flex: 1 1 auto;
    min-width: 0;
}
.shell-restore-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #b9c6d6;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
    color: #1f4a87;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.shell-restore-btn:hover {
    background: linear-gradient(180deg, #f5fbff 0%, #d8ecff 100%);
    border-color: #1f4a87;
}
.shell-restore-btn:active { transform: translateY(1px); }
.shell-restore-btn.primary {
    background: linear-gradient(180deg, #2f6ec1 0%, #1f4a87 100%);
    border-color: #1f4a87;
    color: #ffffff;
}
.shell-restore-btn.primary:hover {
    background: linear-gradient(180deg, #3a83d6 0%, #2a5a9d 100%);
    border-color: #1f4a87;
}
.shell-restore-btn.primary i { color: #ffffff; }
.shell-restore-btn i { font-size: 11px; }