/* M11: bandeja alternativa. Alcance exclusivo de /11_2/. */
.ac2-workspace .ac2-metric {
    background: var(--isg-surface);
    border: 1px solid var(--isg-border);
    transition: border-color .15s ease, transform .15s ease;
}
.ac2-workspace .ac2-metric:hover {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
}
.ac2-workspace a:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 3px;
}
.ac2-workspace .ac2-title { min-width: 16rem; width: 34%; }
.ac2-workspace .ac2-progress { width: 7rem; height: .5rem; accent-color: var(--bs-primary); }
@media (prefers-reduced-motion: reduce) {
    .ac2-workspace .ac2-metric { transition: none; }
    .ac2-workspace .ac2-metric:hover { transform: none; }
}

/* ================================================================
   ISORGA DUAL THEME — HUD (oscuro) + Blueprint (claro)
   ----------------------------------------------------------------
   Dos modos con el mismo lenguaje geométrico:
   • Blueprint (default): azul técnico #0b6db5, fondo #eef3f9, líneas finas
   • HUD (dark):          cian #2dd4ee, fondo #0a0a0b, glows de cabina

   Arquitectura de cascada:
     vendor.min.css + app.min.css (Studio compilado, intocable)
       ↓ override por este archivo
     :root / html:not([dark])  → tokens Blueprint
     html[data-bs-theme="dark"] → tokens HUD
       ↓ override en sidebar_3.php <style> para el drawer

   Switching: data-bs-theme="dark" en <html> (Bootstrap 5 nativo).
   Aplicado server-side en language.php (sin flash al cargar).
   Persiste en usuarios.oscuro (0/1) vía /app/ajax/toggle_theme.php.

   Regla clave: lo que en HUD brilla, en Blueprint se traza.
   El glow es una variable; en HUD es box/text-shadow real,
   en Blueprint es none o sombra neutra mínima.
   ================================================================ */


/* ================================================================
   1. TOKENS — BLUEPRINT (claro, por defecto)
   ================================================================ */

:root,
html:not([data-bs-theme="dark"]) {

    /* — Paleta principal — */
    --isg-bg:               #eef3f9;
    --isg-surface:          #ffffff;
    --isg-accent:           #0b6db5;
    --isg-accent-rgb:       11, 109, 181;
    --isg-accent-strong:    #085a97;
    --isg-text:             #13202d;
    --isg-text-muted:       #5a6b78;
    --isg-border:           rgba(11, 109, 181, 0.22);
    --isg-border-solid:     #c5d8ee;

    /* — Interacción — */
    --isg-hover-bg:         rgba(11, 109, 181, 0.07);
    --isg-active-bg:        rgba(11, 109, 181, 0.14);
    --isg-active-shadow:    0 .35rem .85rem rgba(11, 109, 181, 0.28);

    /* — Efectos: Blueprint solo traza, sin glow — */
    --isg-glow-accent:      0 1px 4px rgba(11, 109, 181, 0.12);
    --isg-glow-text:        none;
    --isg-glow-border:      none;

    /* — Tipografía (igual que HUD para consistencia visual) — */
    --isg-font-display: "Orbitron", "Inter", system-ui, sans-serif;
    --isg-font-mono:    "Share Tech Mono", "Courier New", monospace;

    /* — Estructura — */
    --isg-sidebar-bg:       #f1f5fb;
    --isg-header-bg:        #ffffff;
    --isg-card-bg:          #ffffff;
    --isg-table-header-bg:  #d8e8f7;
    --isg-input-bg:         #ffffff;
    --isg-input-border:     rgba(11, 109, 181, 0.30);

    /* — Override Bootstrap 5 primary — */
    --bs-primary:           #0b6db5;
    --bs-primary-rgb:       11, 109, 181;
    --bs-link-color:        #0b6db5;
    --bs-link-color-rgb:    11, 109, 181;
    --bs-link-hover-color:  #085a97;

    /* — Override Bootstrap body — */
    --bs-body-bg:           #eef3f9;
    --bs-body-bg-rgb:       238, 243, 249;
    --bs-body-color:        #13202d;
    --bs-body-color-rgb:    19, 32, 45;

    /* — Override Bootstrap surfaces — */
    --bs-secondary-bg:      #f0f5fb;
    --bs-secondary-bg-rgb:  240, 245, 251;
    --bs-tertiary-bg:       #e6eef8;
    --bs-tertiary-bg-rgb:   230, 238, 248;

    /* — Override Bootstrap borders — */
    --bs-border-color:               #c5d8ee;
    --bs-border-color-translucent:   rgba(11, 109, 181, 0.15);

    /* — Studio app vars — */
    --bs-app-sidebar-border-color:       #d0e2f3;
    --bs-app-sidebar-content-mobile-bg:  #f1f5fb;
    --bs-app-header-bg:                  #ffffff;
    --bs-app-header-input-bg:            #f0f5fb;
    --bs-app-header-input-border:        #c5d8ee;
    --bs-app-top-nav-bg:                 #eef3f9;
}


/* ================================================================
   2. TOKENS — HUD (oscuro, data-bs-theme="dark")
   ================================================================ */

html[data-bs-theme="dark"] {

    /* — Paleta principal — */
    --isg-bg:               #0a0a0b;
    --isg-surface:          #161618;
    --isg-accent:           #2dd4ee;
    --isg-accent-rgb:       45, 212, 238;
    --isg-accent-strong:    #22b8d0;
    --isg-text:             #dceef4;
    --isg-text-muted:       #5d7a8a;
    --isg-border:           rgba(45, 212, 238, 0.22);
    --isg-border-solid:     rgba(45, 212, 238, 0.28);

    /* — Interacción — */
    --isg-hover-bg:         rgba(45, 212, 238, 0.07);
    --isg-active-bg:        rgba(45, 212, 238, 0.14);
    --isg-active-shadow:    0 .35rem .85rem rgba(45, 212, 238, 0.35);

    /* — Efectos HUD: glows reales — */
    --isg-glow-accent:      0 0 14px rgba(45, 212, 238, 0.45);
    --isg-glow-text:        0 0 10px rgba(45, 212, 238, 0.35);
    --isg-glow-border:      0 0 6px rgba(45, 212, 238, 0.22);

    /* — Estructura — */
    --isg-sidebar-bg:       #0a0a0b;
    --isg-header-bg:        #0f0f11;
    --isg-card-bg:          #161618;
    --isg-table-header-bg:  #1c1c1f;
    --isg-input-bg:         #111113;
    --isg-input-border:     rgba(45, 212, 238, 0.25);

    /* — Override Bootstrap 5 primary → cyan — */
    --bs-primary:           #2dd4ee;
    --bs-primary-rgb:       45, 212, 238;
    --bs-link-color:        #2dd4ee;
    --bs-link-color-rgb:    45, 212, 238;
    --bs-link-hover-color:  #22b8d0;

    /* — Override Bootstrap body — */
    --bs-body-bg:           #0a0a0b;
    --bs-body-bg-rgb:       10, 10, 11;
    --bs-body-color:        #dceef4;
    --bs-body-color-rgb:    220, 238, 244;

    /* — Override Bootstrap surfaces — */
    --bs-secondary-bg:      #161618;
    --bs-secondary-bg-rgb:  22, 22, 24;
    --bs-tertiary-bg:       #111113;
    --bs-tertiary-bg-rgb:   17, 17, 19;

    /* — Override Bootstrap borders — */
    --bs-border-color:               rgba(45, 212, 238, 0.22);
    --bs-border-color-translucent:   rgba(45, 212, 238, 0.10);

    /* — Override Bootstrap emphasis/secondary text — */
    --bs-emphasis-color:        #dceef4;
    --bs-emphasis-color-rgb:    220, 238, 244;
    --bs-secondary-color:       #5d7a8a;
    --bs-secondary-color-rgb:   93, 122, 138;
    --bs-tertiary-color:        rgba(220, 238, 244, 0.50);

    /* — Studio app vars — */
    --bs-app-sidebar-border-color:       rgba(45, 212, 238, 0.10);
    --bs-app-sidebar-content-mobile-bg:  #0a0a0b;
    --bs-app-header-bg:                  #0f0f11;
    --bs-app-header-input-bg:            #111113;
    --bs-app-header-input-border:        rgba(45, 212, 238, 0.20);
    --bs-app-top-nav-bg:                 #0a0a0b;
    --bs-dark-bg-subtle:                 #0a0a0b;

    /* — Tipografía HUD (Orbitron + Share Tech Mono vía Google Fonts en head.php) — */
    --isg-font-display: "Orbitron", "Inter", system-ui, sans-serif;
    --isg-font-mono:    "Share Tech Mono", "Courier New", monospace;

    /* — Clip-path angular (de JOFER/JARVIS): corte diagonal 12 px en 2 esquinas —
       Usar solo con la clase .isg-clip en cards sin dropdowns/popovers. */
    --isg-clip-card: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}


/* ================================================================
   3. BODY Y CONTENEDORES PRINCIPALES
   ================================================================ */

body {
    background-color: var(--isg-bg) !important;
    color: var(--isg-text) !important;
}

#app,
#content,
.app-content {
    background-color: var(--isg-bg) !important;
}

/* HUD: rejilla de fondo (aurora grid). Fuente: Jarvis STYLE_GUIDE.md.
   Los contenedores pasan a transparent para que la rejilla del body se filtre
   en los espacios entre cards y en los márgenes de página. */
html[data-bs-theme="dark"] body {
    background-image:
        linear-gradient(rgba(45, 212, 238, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 212, 238, 0.028) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
}

html[data-bs-theme="dark"] #app,
html[data-bs-theme="dark"] #content,
html[data-bs-theme="dark"] .app-content {
    background-color: transparent !important;
}


/* ================================================================
   4. HEADER
   ================================================================ */

/* Blueprint */
.app-header {
    background-color: var(--isg-header-bg) !important;
    border-bottom: 1px solid var(--isg-border-solid) !important;
    box-shadow: 0 2px 8px rgba(11, 109, 181, 0.08) !important;
}

/* HUD */
html[data-bs-theme="dark"] .app-header {
    background-color: var(--isg-header-bg) !important;
    border-bottom: 1px solid rgba(45, 212, 238, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(45, 212, 238, 0.07) !important;
}

/* Inputs en header */
.app-header .app-header-input {
    background-color: var(--isg-input-bg) !important;
    border-color: var(--isg-input-border) !important;
    color: var(--isg-text) !important;
}


/* ================================================================
   5. SIDEBAR
   ================================================================ */

/* Blueprint */
.app-sidebar {
    background-color: var(--isg-sidebar-bg) !important;
    border-right: 1px solid var(--isg-border-solid) !important;
    box-shadow: 2px 0 8px rgba(11, 109, 181, 0.07) !important;
}

/* HUD */
html[data-bs-theme="dark"] .app-sidebar {
    background-color: var(--isg-sidebar-bg) !important;
    border-right: 1px solid rgba(45, 212, 238, 0.08) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.65),
                1px 0 0 rgba(45, 212, 238, 0.06) !important;
}

.app-top-nav {
    background-color: var(--isg-bg) !important;
}


/* ================================================================
   6. CARDS
   ================================================================ */

/* Blueprint */
.card {
    background-color: var(--isg-card-bg) !important;
    border: 1px solid var(--isg-border-solid) !important;
}

.card-body {
    background-color: var(--isg-card-bg) !important;
}

.card-footer {
    background-color: var(--isg-bg) !important;
    border-top-color: var(--isg-border-solid) !important;
}

.shadow-sm {
    box-shadow: 0 1px 6px rgba(11, 109, 181, 0.10) !important;
}

/* HUD */
html[data-bs-theme="dark"] .card {
    background-color: var(--isg-card-bg) !important;
    border: 1px solid rgba(45, 212, 238, 0.13) !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(45, 212, 238, 0.04) !important;
}

html[data-bs-theme="dark"] .card-body {
    background-color: var(--isg-card-bg) !important;
}

html[data-bs-theme="dark"] .card-footer {
    background-color: rgba(10, 10, 11, 0.60) !important;
    border-top-color: rgba(45, 212, 238, 0.10) !important;
}

html[data-bs-theme="dark"] .shadow-sm {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55),
                0 0 8px rgba(45, 212, 238, 0.05) !important;
}

/* Card headers ($CARD_HEADER = 'bg-primary bg-opacity-10 border-bottom p-3')
   Bootstrap calcula el color automáticamente con --bs-primary-rgb.
   En Blueprint: rgba(11,109,181,0.10) = azul suave.
   En HUD: rgba(45,212,238,0.10) = cian suave + glow sutil. */
html[data-bs-theme="dark"] .card > .bg-primary.bg-opacity-10,
html[data-bs-theme="dark"] .card-header.bg-primary,
html[data-bs-theme="dark"] .card > [class*="bg-"][class*="bg-opacity-10"].border-bottom {
    border-bottom-color: rgba(45, 212, 238, 0.15) !important;
    box-shadow: inset 0 -1px 0 rgba(45, 212, 238, 0.10);
}


/* ================================================================
   7. TABLAS — Bootstrap + DataTables
   ================================================================ */

/* Blueprint: $TABLE_HEADER = 'table-light' */
.table-light,
.table > thead.table-light > tr > th,
.table > thead > tr > th.table-light {
    --bs-table-bg:           #d8e8f7;
    --bs-table-color:        #13202d;
    --bs-table-border-color: #c5d8ee;
    background-color: #d8e8f7 !important;
    color: #13202d !important;
}

.table {
    --bs-table-border-color: #c5d8ee;
}

/* HUD: table-light → azul profundo con texto cyan */
html[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .table > thead.table-light > tr > th,
html[data-bs-theme="dark"] .table > thead > tr > th.table-light {
    --bs-table-bg:           #1c1c1f !important;
    --bs-table-color:        #2dd4ee !important;
    --bs-table-border-color: rgba(45, 212, 238, 0.16) !important;
    background-color: #1c1c1f !important;
    color: #2dd4ee !important;
}

html[data-bs-theme="dark"] .table {
    --bs-table-bg:           transparent;
    --bs-table-border-color: rgba(45, 212, 238, 0.10);
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] .table td,
html[data-bs-theme="dark"] .table th {
    border-color: rgba(45, 212, 238, 0.08) !important;
}

html[data-bs-theme="dark"] .table tbody tr:hover {
    --bs-table-hover-bg: rgba(45, 212, 238, 0.05);
    background-color: rgba(45, 212, 238, 0.05) !important;
}

/* DataTables — Blueprint */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-color: var(--isg-input-border) !important;
    background-color: var(--isg-input-bg) !important;
    color: var(--isg-text) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}

/* DataTables — HUD */
html[data-bs-theme="dark"] .dataTables_wrapper {
    color: var(--isg-text) !important;
    background: transparent !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--isg-input-bg) !important;
    border: 1px solid var(--isg-input-border) !important;
    color: var(--isg-text) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    outline: none !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--isg-accent) !important;
    box-shadow: 0 0 0 2px rgba(45, 212, 238, 0.18),
                var(--isg-glow-border) !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--isg-text-muted) !important;
}

html[data-bs-theme="dark"] .dt-buttons .btn,
html[data-bs-theme="dark"] .dataTables_wrapper .btn {
    background-color: var(--isg-surface) !important;
    border-color: var(--isg-border) !important;
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] .dt-buttons .btn:hover,
html[data-bs-theme="dark"] .dataTables_wrapper .btn:hover {
    background-color: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] table.dataTable thead th,
html[data-bs-theme="dark"] table.dataTable thead td {
    background-color: var(--isg-table-header-bg) !important;
    color: var(--isg-accent) !important;
    border-bottom: 1px solid rgba(45, 212, 238, 0.18) !important;
}

html[data-bs-theme="dark"] table.dataTable tbody tr {
    background-color: var(--isg-card-bg) !important;
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] table.dataTable tbody tr:hover {
    background-color: rgba(45, 212, 238, 0.05) !important;
}

html[data-bs-theme="dark"] table.dataTable tbody td,
html[data-bs-theme="dark"] table.dataTable tbody tr {
    border-color: rgba(45, 212, 238, 0.08) !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--isg-table-header-bg) !important;
    border-color: rgba(45, 212, 238, 0.35) !important;
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--isg-hover-bg) !important;
    border-color: var(--isg-border) !important;
    color: var(--isg-accent) !important;
}

/* DataTables: table-light override en modo dark */
html[data-bs-theme="dark"] table.dataTable.table-light thead,
html[data-bs-theme="dark"] .table-light {
    --bs-table-bg:           #1c1c1f !important;
    --bs-table-color:        #2dd4ee !important;
    --bs-table-border-color: rgba(45, 212, 238, 0.16) !important;
}


/* ================================================================
   8. TABULATOR (módulos nuevos: M1, M4, M28, etc.)
   ================================================================ */

/* Blueprint */
.tabulator {
    border: 1px solid var(--isg-border-solid) !important;
    background-color: var(--isg-card-bg) !important;
}

.tabulator .tabulator-header {
    background-color: var(--isg-table-header-bg) !important;
    border-bottom: 1px solid var(--isg-border-solid) !important;
}

.tabulator .tabulator-header .tabulator-col {
    background-color: var(--isg-table-header-bg) !important;
    border-right-color: var(--isg-border-solid) !important;
    color: var(--isg-accent) !important;
    font-weight: 600;
}

.tabulator .tabulator-row {
    background-color: var(--isg-card-bg) !important;
    border-bottom: 1px solid var(--isg-border-solid) !important;
    color: var(--isg-text) !important;
}

.tabulator .tabulator-row:hover {
    background-color: var(--isg-hover-bg) !important;
}

.tabulator .tabulator-footer,
.tabulator-paginator {
    background-color: var(--isg-bg) !important;
    border-top: 1px solid var(--isg-border-solid) !important;
    color: var(--isg-text-muted) !important;
}

/* HUD */
html[data-bs-theme="dark"] .tabulator {
    border: 1px solid rgba(45, 212, 238, 0.14) !important;
    background-color: var(--isg-card-bg) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-header {
    background-color: var(--isg-table-header-bg) !important;
    border-bottom: 1px solid rgba(45, 212, 238, 0.18) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col {
    background-color: var(--isg-table-header-bg) !important;
    border-right-color: rgba(45, 212, 238, 0.10) !important;
    color: var(--isg-accent) !important;
    text-shadow: var(--isg-glow-text) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-row {
    background-color: var(--isg-card-bg) !important;
    color: var(--isg-text) !important;
    border-bottom: 1px solid rgba(45, 212, 238, 0.07) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-row:hover {
    background-color: rgba(45, 212, 238, 0.05) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer,
html[data-bs-theme="dark"] .tabulator-paginator {
    background-color: var(--isg-surface) !important;
    border-top: 1px solid rgba(45, 212, 238, 0.10) !important;
    color: var(--isg-text-muted) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-selected,
html[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-selected:hover {
    background-color: var(--isg-active-bg) !important;
}


/* ================================================================
   9. BOTONES
   ================================================================ */

/* Blueprint — btn-primary */
.btn-primary {
    --bs-btn-bg:                  #0b6db5;
    --bs-btn-border-color:        #0b6db5;
    --bs-btn-color:               #ffffff;
    --bs-btn-hover-bg:            #085a97;
    --bs-btn-hover-border-color:  #085a97;
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-active-bg:           #064d82;
    --bs-btn-active-border-color: #064d82;
    --bs-btn-active-color:        #ffffff;
    --bs-btn-focus-shadow-rgb:    11, 109, 181;
}

/* Blueprint — btn-outline-primary */
.btn-outline-primary {
    --bs-btn-color:               #0b6db5;
    --bs-btn-border-color:        #0b6db5;
    --bs-btn-hover-bg:            #0b6db5;
    --bs-btn-hover-border-color:  #0b6db5;
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-focus-shadow-rgb:    11, 109, 181;
}

/* Blueprint — btn-outline-secondary ($BTN_SECONDARY, $BTN_DANGER) */
.btn-outline-secondary {
    --bs-btn-color:               #5a6b78;
    --bs-btn-border-color:        #c5d8ee;
    --bs-btn-hover-bg:            var(--isg-hover-bg);
    --bs-btn-hover-color:         #0b6db5;
    --bs-btn-hover-border-color:  #0b6db5;
}

/* Blueprint — btn-sm ($BTN_SM) */
.btn-sm {
    letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------------------
   Botones más pequeños en TODA la aplicación — petición de Juan Miguel (2026-09-30).

   🔴 Se hace AQUÍ, en el CSS propio de la app, y NO en las pantallas: las pantallas se
      GENERAN desde su módulo de ISORGA por `scripts/<pfx>_portar.php`, así que cualquier
      clase que se les cambiara a mano se perdería en el siguiente porte. Y tampoco se
      toca el CSS de ISORGA: allí no se ha pedido.

   ⚠️ Este comentario NO nombra un módulo ni un porteador concretos A PROPÓSITO: el
      fichero se copia tal cual a cada app que nace del molde, y la primera versión decía
      «desde `19/*.php`» — cierto aquí y falso en las otras cuatro, que son los módulos
      8, 3, 18 y 42. Un comentario que miente es peor que no tener ninguno.

   🔴 Se tocan las VARIABLES de Bootstrap (`--bs-btn-*`), no `padding`/`font-size`
      directos: así siguen ganando las reglas más específicas que ya existen —en
      particular `table.isg-excel .btn-sm` (más abajo), que deja los botones de
      dentro de las rejillas todavía más pequeños— en vez de pelearse con ellas.

   🔴 Y como esta app es además el MOLDE del que `satelite_crear.php` saca las nuevas, los
      botones pequeños los heredan todas las que nazcan a partir de ahora.
   --------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-y:  .25rem;     /* Bootstrap: .375rem */
    --bs-btn-padding-x:  .65rem;     /* Bootstrap: .75rem  */
    --bs-btn-font-size:  .8125rem;   /* Bootstrap: 1rem (16px) → 13px */
    --bs-btn-border-radius: .3rem;
}

.btn-sm {
    --bs-btn-padding-y:  .15rem;     /* Bootstrap: .25rem */
    --bs-btn-padding-x:  .45rem;     /* Bootstrap: .5rem  */
    --bs-btn-font-size:  .75rem;     /* Bootstrap: .875rem → 12px */
}

/* Los iconos sueltos dentro de un botón no deben crecer por su cuenta. */
.btn > i, .btn > .bi { font-size: 1em; line-height: 1; }

/* HUD — btn-primary → cian con glow */
html[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg:                  #2dd4ee;
    --bs-btn-border-color:        #2dd4ee;
    --bs-btn-color:               #0a0a0b;
    --bs-btn-hover-bg:            #22b8d0;
    --bs-btn-hover-border-color:  #22b8d0;
    --bs-btn-hover-color:         #0a0a0b;
    --bs-btn-active-bg:           #1a9ab2;
    --bs-btn-active-border-color: #1a9ab2;
    --bs-btn-active-color:        #0a0a0b;
    --bs-btn-focus-shadow-rgb:    45, 212, 238;
    box-shadow: var(--isg-glow-accent) !important;
}

html[data-bs-theme="dark"] .btn-primary:hover {
    box-shadow: 0 0 20px rgba(45, 212, 238, 0.55) !important;
}

/* HUD — btn-outline-primary */
html[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color:               #2dd4ee;
    --bs-btn-border-color:        #2dd4ee;
    --bs-btn-hover-bg:            rgba(45, 212, 238, 0.12);
    --bs-btn-hover-color:         #2dd4ee;
    --bs-btn-hover-border-color:  #2dd4ee;
    --bs-btn-active-bg:           rgba(45, 212, 238, 0.20);
    --bs-btn-active-color:        #2dd4ee;
    box-shadow: 0 0 6px rgba(45, 212, 238, 0.22) !important;
}

/* HUD — btn-outline-secondary */
html[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color:               #5d7a8a;
    --bs-btn-border-color:        rgba(45, 212, 238, 0.22);
    --bs-btn-hover-bg:            var(--isg-hover-bg);
    --bs-btn-hover-color:         #2dd4ee;
    --bs-btn-hover-border-color:  rgba(45, 212, 238, 0.45);
}

/* HUD — btn-secondary */
html[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-bg:            #162033;
    --bs-btn-border-color:  rgba(45, 212, 238, 0.20);
    --bs-btn-color:         #dceef4;
    --bs-btn-hover-bg:      #1c2d47;
    --bs-btn-hover-color:   #2dd4ee;
}

/* HUD — btn-sm */
html[data-bs-theme="dark"] .btn-sm {
    letter-spacing: 0.04em;
}


/* ================================================================
   10. FORMULARIOS
   ================================================================ */

/* Blueprint */
.form-control,
.form-select {
    background-color: var(--isg-input-bg) !important;
    border-color: var(--isg-input-border) !important;
    color: var(--isg-text) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--isg-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--isg-accent-rgb), 0.15) !important;
}

/* HUD */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-control-plaintext {
    background-color: var(--isg-input-bg) !important;
    border-color: var(--isg-input-border) !important;
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--isg-input-bg) !important;
    border-color: var(--isg-accent) !important;
    color: var(--isg-text) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 238, 0.16),
                var(--isg-glow-border) !important;
}

html[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--isg-text-muted) !important;
    opacity: 0.65;
}

html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] label {
    color: var(--isg-text-muted) !important;
}

html[data-bs-theme="dark"] .input-group-text {
    background-color: var(--isg-surface) !important;
    border-color: var(--isg-input-border) !important;
    color: var(--isg-text-muted) !important;
}

html[data-bs-theme="dark"] .form-check-input {
    background-color: var(--isg-input-bg) !important;
    border-color: var(--isg-input-border) !important;
}

html[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--isg-accent) !important;
    border-color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] select option {
    background-color: var(--isg-surface) !important;
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] .form-text {
    color: var(--isg-text-muted) !important;
}


/* ================================================================
   11. BADGES Y ESTADOS
   ================================================================ */

/* HUD: badges primarios/info → cian */
html[data-bs-theme="dark"] .badge.bg-primary {
    background-color: rgba(45, 212, 238, 0.14) !important;
    color: #2dd4ee !important;
    border: 1px solid rgba(45, 212, 238, 0.30) !important;
    box-shadow: 0 0 6px rgba(45, 212, 238, 0.22) !important;
}

html[data-bs-theme="dark"] .badge.bg-info {
    background-color: rgba(45, 212, 238, 0.10) !important;
    color: #2dd4ee !important;
    border: 1px solid rgba(45, 212, 238, 0.22) !important;
}

html[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: #162033 !important;
    color: #8aa8bc !important;
    border: 1px solid rgba(45, 212, 238, 0.12) !important;
}


/* ================================================================
   12. ALERTS
   ================================================================ */

/* Blueprint */
.alert-info {
    background-color: rgba(11, 109, 181, 0.08) !important;
    border-color: rgba(11, 109, 181, 0.28) !important;
    color: #085a97 !important;
}

.alert-primary {
    background-color: rgba(11, 109, 181, 0.08) !important;
    border-color: rgba(11, 109, 181, 0.28) !important;
}

/* HUD */
html[data-bs-theme="dark"] .alert-info,
html[data-bs-theme="dark"] .alert-primary {
    background-color: rgba(45, 212, 238, 0.07) !important;
    border-color: rgba(45, 212, 238, 0.25) !important;
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.09) !important;
    border-color: rgba(255, 193, 7, 0.30) !important;
    color: #ffe69c !important;
}

html[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.09) !important;
    border-color: rgba(220, 53, 69, 0.30) !important;
    color: #f5c2c7 !important;
}

html[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.09) !important;
    border-color: rgba(25, 135, 84, 0.30) !important;
    color: #a3cfbb !important;
}


/* ================================================================
   13. MODALES
   ================================================================ */

/* Blueprint */
.modal-content {
    background-color: var(--isg-surface) !important;
    border: 1px solid var(--isg-border-solid) !important;
    box-shadow: 0 8px 32px rgba(11, 109, 181, 0.12) !important;
}

.modal-header {
    border-bottom-color: var(--isg-border-solid) !important;
}

.modal-footer {
    border-top-color: var(--isg-border-solid) !important;
    background-color: var(--isg-bg) !important;
}

/* HUD */
html[data-bs-theme="dark"] .modal-content {
    background-color: var(--isg-surface) !important;
    border: 1px solid rgba(45, 212, 238, 0.20) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.75),
                0 0 24px rgba(45, 212, 238, 0.07) !important;
}

html[data-bs-theme="dark"] .modal-header {
    border-bottom-color: rgba(45, 212, 238, 0.14) !important;
}

html[data-bs-theme="dark"] .modal-footer {
    border-top-color: rgba(45, 212, 238, 0.14) !important;
    background-color: rgba(10, 10, 11, 0.50) !important;
}


/* ================================================================
   14. DROPDOWN
   ================================================================ */

/* Blueprint */
.dropdown-menu {
    background-color: var(--isg-surface) !important;
    border: 1px solid var(--isg-border-solid) !important;
    box-shadow: 0 4px 16px rgba(11, 109, 181, 0.12) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

/* HUD */
html[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--isg-surface) !important;
    border: 1px solid rgba(45, 212, 238, 0.20) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65) !important;
}

html[data-bs-theme="dark"] .dropdown-item {
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: rgba(45, 212, 238, 0.10) !important;
}


/* ================================================================
   15. NAV — PILLS Y TABS
   ================================================================ */

/* Blueprint nav-pills */
.nav-pills .nav-link.active {
    background-color: #0b6db5 !important;
    color: #ffffff !important;
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

/* Blueprint nav-tabs */
.nav-tabs {
    border-bottom-color: var(--isg-border-solid) !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--isg-card-bg) !important;
    border-color: var(--isg-border-solid) var(--isg-border-solid) var(--isg-card-bg) !important;
    color: var(--isg-accent) !important;
}

/* HUD nav-pills */
html[data-bs-theme="dark"] .nav-pills .nav-link {
    color: var(--isg-text-muted) !important;
}

html[data-bs-theme="dark"] .nav-pills .nav-link.active {
    background-color: rgba(45, 212, 238, 0.14) !important;
    color: var(--isg-accent) !important;
    box-shadow: var(--isg-glow-accent) !important;
    border: 1px solid rgba(45, 212, 238, 0.30) !important;
}

html[data-bs-theme="dark"] .nav-pills .nav-link:hover:not(.active) {
    background-color: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

/* HUD nav-tabs */
html[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: rgba(45, 212, 238, 0.14) !important;
}

html[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--isg-text-muted) !important;
    border-color: transparent !important;
}

html[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--isg-card-bg) !important;
    border-color: rgba(45, 212, 238, 0.20)
                  rgba(45, 212, 238, 0.20)
                  var(--isg-card-bg) !important;
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] .nav-tabs .nav-link:hover:not(.active) {
    border-color: rgba(45, 212, 238, 0.08) !important;
    color: var(--isg-text) !important;
}


/* ================================================================
   16. LIST GROUP
   ================================================================ */

/* HUD */
html[data-bs-theme="dark"] .list-group-item {
    background-color: var(--isg-card-bg) !important;
    border-color: rgba(45, 212, 238, 0.10) !important;
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] .list-group-item:hover {
    background-color: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] .list-group-item.active {
    background-color: rgba(45, 212, 238, 0.14) !important;
    border-color: rgba(45, 212, 238, 0.30) !important;
    color: var(--isg-accent) !important;
}


/* ================================================================
   17. OFFCANVAS (ayuda contextual §24)
   ================================================================ */

/* Blueprint */
.offcanvas {
    background-color: var(--isg-surface) !important;
    border-left: 1px solid var(--isg-border-solid) !important;
}

.offcanvas-header {
    border-bottom-color: var(--isg-border-solid) !important;
}

/* HUD */
html[data-bs-theme="dark"] .offcanvas {
    background-color: var(--isg-surface) !important;
    border-left: 1px solid rgba(45, 212, 238, 0.18) !important;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.6),
                -1px 0 0 rgba(45, 212, 238, 0.08) !important;
}

html[data-bs-theme="dark"] .offcanvas-header {
    border-bottom-color: rgba(45, 212, 238, 0.12) !important;
}


/* ================================================================
   18. ACCORDION
   ================================================================ */

html[data-bs-theme="dark"] .accordion-item {
    background-color: var(--isg-card-bg) !important;
    border-color: rgba(45, 212, 238, 0.12) !important;
}

html[data-bs-theme="dark"] .accordion-button {
    background-color: var(--isg-surface) !important;
    color: var(--isg-text) !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(45, 212, 238, 0.07) !important;
    color: var(--isg-accent) !important;
    box-shadow: inset 0 -1px 0 rgba(45, 212, 238, 0.12) !important;
}

html[data-bs-theme="dark"] .accordion-body {
    background-color: var(--isg-card-bg) !important;
    color: var(--isg-text) !important;
}


/* ================================================================
   19. PAGINACIÓN
   ================================================================ */

/* Blueprint */
.page-link {
    background-color: var(--isg-surface) !important;
    border-color: var(--isg-border-solid) !important;
    color: var(--isg-accent) !important;
}

.page-link:hover {
    background-color: var(--isg-hover-bg) !important;
    color: var(--isg-accent-strong) !important;
}

.page-item.active .page-link {
    background-color: var(--isg-accent) !important;
    border-color: var(--isg-accent) !important;
    color: #ffffff !important;
}

/* HUD */
html[data-bs-theme="dark"] .page-link {
    background-color: var(--isg-surface) !important;
    border-color: rgba(45, 212, 238, 0.18) !important;
    color: var(--isg-text) !important;
}

html[data-bs-theme="dark"] .page-link:hover {
    background-color: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: rgba(45, 212, 238, 0.16) !important;
    border-color: rgba(45, 212, 238, 0.40) !important;
    color: var(--isg-accent) !important;
    box-shadow: var(--isg-glow-accent) !important;
}

html[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--isg-surface) !important;
    border-color: rgba(45, 212, 238, 0.08) !important;
    color: var(--isg-text-muted) !important;
}


/* ================================================================
   20. BREADCRUMB Y TÍTULOS
   ================================================================ */

html[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--isg-text-muted) !important;
}

html[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--isg-text-muted) !important;
}


/* ================================================================
   21. PROGRESS BARS
   ================================================================ */

html[data-bs-theme="dark"] .progress {
    background-color: rgba(45, 212, 238, 0.07) !important;
    border: 1px solid rgba(45, 212, 238, 0.10) !important;
}

html[data-bs-theme="dark"] .progress-bar {
    background-color: var(--isg-accent) !important;
    box-shadow: var(--isg-glow-accent) !important;
}

html[data-bs-theme="dark"] .progress-bar.bg-success {
    background-color: #20c997 !important;
    box-shadow: 0 0 8px rgba(32, 201, 151, 0.40) !important;
}

html[data-bs-theme="dark"] .progress-bar.bg-warning {
    background-color: #ffc107 !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.35) !important;
}

html[data-bs-theme="dark"] .progress-bar.bg-danger {
    background-color: #dc3545 !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.35) !important;
}


/* ================================================================
   22. UTILIDADES — TEXTO Y BORDES
   ================================================================ */

/* text-primary respeta el accent de cada modo */
.text-primary {
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] .text-primary {
    color: var(--isg-accent) !important;
    text-shadow: var(--isg-glow-text) !important;
}

/* text-muted */
.text-muted,
.text-body-secondary {
    color: var(--isg-text-muted) !important;
}

/* HUD: grandes KPIs (display-*, fs-1, fs-2) — glow en números */
html[data-bs-theme="dark"] .display-1,
html[data-bs-theme="dark"] .display-2,
html[data-bs-theme="dark"] .display-3,
html[data-bs-theme="dark"] .display-4,
html[data-bs-theme="dark"] .display-5,
html[data-bs-theme="dark"] .display-6,
html[data-bs-theme="dark"] .fs-1,
html[data-bs-theme="dark"] .fs-2 {
    text-shadow: var(--isg-glow-text) !important;
}

/* hr */
hr {
    border-color: var(--isg-border-solid) !important;
    opacity: 1;
}

html[data-bs-theme="dark"] hr {
    border-color: rgba(45, 212, 238, 0.10) !important;
    opacity: 1;
}

/* HUD: bordes utilitarios */
html[data-bs-theme="dark"] .border {
    border-color: rgba(45, 212, 238, 0.18) !important;
}

html[data-bs-theme="dark"] .border-bottom {
    border-bottom-color: rgba(45, 212, 238, 0.12) !important;
}

html[data-bs-theme="dark"] .border-top {
    border-top-color: rgba(45, 212, 238, 0.12) !important;
}


/* ================================================================
   23. PURPLE — Grupo Estratégico (ambos modos)
   ================================================================ */

.text-purple { color: var(--bs-purple) !important; }
.bg-purple   { background-color: var(--bs-purple) !important; color: #fff !important; }
.bg-purple.bg-opacity-10 { background-color: rgba(102, 16, 242, 0.10) !important; }

/* HUD: drawer activo Estratégico */
html[data-bs-theme="dark"] .drawer-rail .drawer-trigger.active[style*="purple"],
html[data-bs-theme="dark"] .drawer-rail .drawer-trigger.active .text-purple {
    text-shadow: 0 0 10px rgba(180, 120, 255, 0.45) !important;
}


/* ================================================================
   24. DRAWER RAIL (sidebar lateral)
   ================================================================ */

/* Blueprint — drawer card */
.drawer-rail .card {
    background-color: var(--isg-sidebar-bg) !important;
    border: 1px solid var(--isg-border-solid) !important;
    box-shadow: 2px 0 8px rgba(11, 109, 181, 0.07) !important;
}

/* Blueprint — triggers */
.drawer-rail .drawer-trigger:hover:not(.active) {
    background: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

.drawer-rail .drawer-trigger.active {
    background: var(--isg-accent) !important;
    color: #ffffff !important;
    box-shadow: var(--isg-active-shadow) !important;
}

.drawer-rail .drawer-trigger.active .drawer-icon,
.drawer-rail .drawer-trigger.active .drawer-label {
    color: #ffffff !important;
}

/* Blueprint — popover */
.drawer-popover .card {
    border: 1px solid var(--isg-border-solid) !important;
    box-shadow: 0 1rem 2rem rgba(11, 109, 181, 0.12) !important;
}

.drawer-popover .list-group-item:hover {
    background: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

.drawer-popover .modulo-header:hover {
    background: var(--isg-hover-bg) !important;
}

.drawer-popover .sub-item:hover {
    background: var(--isg-hover-bg) !important;
    padding-left: 1rem !important;
    color: var(--isg-accent) !important;
}

/* HUD — drawer card */
html[data-bs-theme="dark"] .drawer-rail .card {
    background-color: #0f0f11 !important;
    border: 1px solid rgba(45, 212, 238, 0.09) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(45, 212, 238, 0.04) !important;
}

/* HUD — triggers */
html[data-bs-theme="dark"] .drawer-rail .drawer-trigger {
    color: var(--isg-text-muted) !important;
}

html[data-bs-theme="dark"] .drawer-rail .drawer-trigger:hover:not(.active) {
    background: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] .drawer-rail .drawer-trigger.active {
    background: rgba(45, 212, 238, 0.13) !important;
    color: var(--isg-accent) !important;
    box-shadow: var(--isg-active-shadow) !important;
    border: 1px solid rgba(45, 212, 238, 0.28) !important;
}

html[data-bs-theme="dark"] .drawer-rail .drawer-trigger.active .drawer-icon,
html[data-bs-theme="dark"] .drawer-rail .drawer-trigger.active .drawer-label {
    color: var(--isg-accent) !important;
    text-shadow: var(--isg-glow-text) !important;
}

/* HUD — popover */
html[data-bs-theme="dark"] .drawer-popover .card {
    background-color: var(--isg-surface) !important;
    border: 1px solid rgba(45, 212, 238, 0.18) !important;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.65),
                0 0 20px rgba(45, 212, 238, 0.06) !important;
}

html[data-bs-theme="dark"] .drawer-popover .list-group-item:hover {
    background: var(--isg-hover-bg) !important;
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] .drawer-popover .modulo-header:hover {
    background: var(--isg-hover-bg) !important;
}

html[data-bs-theme="dark"] .drawer-popover .sub-item:hover {
    background: var(--isg-hover-bg) !important;
    padding-left: 1rem !important;
    color: var(--isg-accent) !important;
}


/* ================================================================
   25. TOGGLE LUNA / SOL
   ================================================================ */

#studio-theme-toggle {
    transition: all 0.3s ease;
    border-radius: 8px;
}

#studio-theme-toggle:hover {
    background-color: var(--isg-hover-bg) !important;
    transform: scale(1.05);
}

#studio-theme-icon {
    transition: all 0.4s ease;
    color: var(--isg-accent) !important;
}

#studio-theme-toggle:hover #studio-theme-icon {
    transform: rotate(-20deg);
    text-shadow: var(--isg-glow-text);
    color: var(--isg-accent) !important;
}

html[data-bs-theme="dark"] #studio-theme-toggle:hover #studio-theme-icon {
    transform: rotate(20deg);
}

#studio-theme-toggle:active {
    transform: scale(0.95);
}

#studio-theme-icon.fa-spinner {
    animation: isg-spin 1s linear infinite;
}

@keyframes isg-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.app-header .menu-item {
    display: flex;
    align-items: center;
}

.app-header .menu-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.app-header .menu-item:hover .menu-link {
    background-color: var(--isg-hover-bg) !important;
}


/* ================================================================
   26. SCROLLBAR CUSTOM
   ================================================================ */

::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--isg-bg); }
::-webkit-scrollbar-thumb        { background: rgba(var(--isg-accent-rgb), 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(var(--isg-accent-rgb), 0.45); }


/* ================================================================
   27. CHART.JS — re-themed via handleCssVariable() en JS
        (los charts leen CSS vars; al hacer toggle dispara 'theme-reload')
   ================================================================ */

/* Los gráficos Chart.js en los módulos usan variables inyectadas
   por app.js de Studio. Al disparar 'theme-reload' en el toggle,
   Studio recalcula los colores. No se necesita CSS adicional aquí. */


/* ================================================================
   28. RESPONSIVE — AJUSTES MÓVIL
   ================================================================ */

@media (max-width: 768px) {
    html[data-bs-theme="dark"] .modal-content {
        border: 1px solid rgba(45, 212, 238, 0.15) !important;
    }
}


/* ================================================================
   29. HUD AVANZADO — Bracket corners, animaciones, utilidades
       Adaptado de Jarvis STYLE_GUIDE.md (repositorio hermano)
   ================================================================ */

/* — Bracket corners: esquinas en L sobre cards HUD —
   Patrón .dash-frame de Jarvis: pseudo-elementos 10×10 px con
   solo dos lados de borde, dando el efecto de "corchete técnico".
   No usar clip-path para no romper dropdowns que sobresalgan. */
html[data-bs-theme="dark"] .card::before,
html[data-bs-theme="dark"] .card::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(45, 212, 238, 0.40);
    pointer-events: none;
    z-index: 10;
}

html[data-bs-theme="dark"] .card::before {
    top:  -1px;
    left: -1px;
    border-right:  none;
    border-bottom: none;
}

html[data-bs-theme="dark"] .card::after {
    bottom: -1px;
    right:  -1px;
    border-left: none;
    border-top:  none;
}

/* — Animación de entrada: dashIn (Jarvis) —
   Fade + slide-up de 6 px al aparecer una card en HUD. */
@keyframes hud-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

html[data-bs-theme="dark"] .card {
    animation: hud-enter 0.22s ease both;
}

/* Sin animación si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    html[data-bs-theme="dark"] .card { animation: none !important; }
}

/* — Selección de texto en HUD — */
html[data-bs-theme="dark"] ::selection {
    background: rgba(45, 212, 238, 0.28);
    color: #ffffff;
}

/* — color-scheme: dark para date pickers y select nativos del navegador — */
html[data-bs-theme="dark"] input,
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] textarea {
    color-scheme: dark;
}

/* — Firefox: scrollbar nativa (scrollbar-color) —
   Webkit ya cubierto en §26; esto añade Firefox y otros. */
html[data-bs-theme="dark"] * {
    scrollbar-color: rgba(45, 212, 238, 0.25) transparent;
    scrollbar-width: thin;
}

html:not([data-bs-theme="dark"]) * {
    scrollbar-color: rgba(11, 109, 181, 0.20) transparent;
    scrollbar-width: thin;
}


/* ================================================================
   30. HUD TIPOGRAFÍA + CLIP-PATH
       Orbitron / Share Tech Mono — inspirado en JOFER + JARVIS
   ================================================================ */

/* — Orbitron: para h1 (títulos de página) en ambos temas.
   Hardcodeado para evitar dependencia de resolución de custom property en cascade. — */
h1 {
    font-family: "Orbitron", "Inter", system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* — Share Tech Mono: valores numéricos grandes (KPIs, displays, contadores).
   Las clases display-* y fs-1/fs-2 se usan en cuadros de mando para cifras. — */
html[data-bs-theme="dark"] .display-1,
html[data-bs-theme="dark"] .display-2,
html[data-bs-theme="dark"] .display-3,
html[data-bs-theme="dark"] .display-4,
html[data-bs-theme="dark"] .display-5,
html[data-bs-theme="dark"] .display-6,
html[data-bs-theme="dark"] .fs-1,
html[data-bs-theme="dark"] .fs-2 {
    font-family: var(--isg-font-mono);
    letter-spacing: 0.03em;
}

/* — Clip-path angular (JOFER: clip-path:var(--clip-card)).
   Corte diagonal en esquinas top-right + bottom-left = look de cabina.
   ⚠️  Usar SOLO en cards de solo-lectura (KPIs, stats, métricas).
   NO usar en cards con dropdowns, date-pickers o popovers — los cortará. — */
html[data-bs-theme="dark"] .isg-clip {
    clip-path: var(--isg-clip-card);
    overflow: visible;
}

/* Override bracket corners en cards con clip (redundante visualmente) */
html[data-bs-theme="dark"] .isg-clip::before,
html[data-bs-theme="dark"] .isg-clip::after {
    display: none;
}

/* =============================================================================
   Object Status (punto de color + texto) — alternativa a los badges rellenos.
   Uso: <span class="isg-ostat"><span class="isg-dot" style="background:#..."></span>Texto</span>
   Más limpio y estilo Fiori. Los colores del punto son semánticos (por tipo).
   ============================================================================= */
.isg-ostat { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; line-height: 1.2; }
.isg-dot   { width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; display: inline-block; box-shadow: 0 0 0 2px rgba(0,0,0,.04); }
.isg-code  { font-weight: 700; font-size: .95rem; letter-spacing: .02em; color: var(--isg-accent, #0b6db5); }
.isg-rev   { font-weight: 600; color: var(--isg-text-muted, #6c757d); }

/* =============================================================================
   Tabla estilo "Excel": rejilla, filas finas de una sola línea, densa.
   Uso: añade class="isg-excel" a una <table> (Bootstrap/DataTables). Reutilizable.
   ============================================================================= */
table.isg-excel { font-size: .8rem; border: 1px solid var(--isg-border-solid, #d0d7de); }
table.isg-excel thead th {
    text-transform: uppercase; letter-spacing: .02em; font-size: .72rem; font-weight: 700;
    padding: .35rem .6rem !important; border: 1px solid var(--isg-border-solid, #d0d7de);
    white-space: nowrap; vertical-align: middle;
}
table.isg-excel tbody td {
    padding: .15rem .6rem !important; line-height: 1.55;
    border: 1px solid var(--isg-border, rgba(0,0,0,.08));
    white-space: nowrap; vertical-align: middle;
}
table.isg-excel tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .02); }
table.isg-excel .btn-sm { --bs-btn-padding-y: .05rem; --bs-btn-padding-x: .35rem; --bs-btn-font-size: .72rem; }
/* Fila clicable (patrón canónico de listado: onclick="window.location=…").
   Utilidad global para no repetir un <style> con cursor:pointer en cada página. */
table.isg-excel tbody tr[onclick] { cursor: pointer; }

/* Celda que SÍ se parte en varias líneas dentro de una tabla .isg-excel.
   🔴 Por defecto .isg-excel pone white-space:nowrap en TODOS los td —es lo que
   le da el aspecto de rejilla densa—, así que una columna de texto libre (un
   título, una descripción) crece hasta donde haga falta y saca la tabla de la
   pantalla: aparece scroll horizontal y el resto de columnas se van fuera.
   Marcando esa columna con .isg-wrap el texto baja de línea y la tabla cabe.
   Se corta por espacios; solo parte una palabra si por sí sola no cabe. */
table.isg-excel td.isg-wrap {
    white-space: normal; overflow-wrap: break-word; max-width: 32rem; line-height: 1.35;
}
/* Texto secundario dentro de una tabla .isg-excel (títulos largos multilínea):
   un punto por debajo del .8rem de la tabla, sin bajar de lo legible. */
table.isg-excel .isg-td-sm { font-size: .74rem; }

/* Variante "Excel" para tablas Tabulator (divs, no <table>): añade rejilla
   VERTICAL + zebra + densidad al estilo base .tabulator (que ya trae bordes
   horizontales). Uso: class="isg-excel" en el contenedor Tabulator
   (<div id="..." class="isg-excel">; Tabulator le añade la clase .tabulator). */
.tabulator.isg-excel { font-size: .8rem; }
.tabulator.isg-excel .tabulator-header .tabulator-col {
    border-right: 1px solid var(--isg-border-solid, #d0d7de) !important;
    text-transform: uppercase; letter-spacing: .02em; font-size: .72rem;
}
.tabulator.isg-excel .tabulator-cell {
    border-right: 1px solid var(--isg-border, rgba(0,0,0,.08)) !important;
    padding: .2rem .55rem !important;
}
.tabulator.isg-excel .badge-mod {
    display: inline-block; margin: .05rem .15rem .05rem 0; padding: .05rem .35rem;
    border: 1px solid var(--isg-border); border-radius: .15rem;
    background: var(--isg-hover-bg); color: var(--isg-accent);
    font-size: .72rem; line-height: 1.35;
}
.tabulator.isg-row-clickable .tabulator-row { cursor: pointer; }
.tabulator.isg-excel .tabulator-row:nth-child(even) .tabulator-cell { background: rgba(0, 0, 0, .02); }
html[data-bs-theme="dark"] .tabulator.isg-excel .tabulator-row:nth-child(even) .tabulator-cell { background: rgba(255, 255, 255, .03); }
/* Columnas congeladas (frozen) en .isg-excel: fondo OPACO. Sin él, al desplazar
   en horizontal se ve por debajo el texto de las columnas que pasan (la zebra de
   arriba es semitransparente). La zebra se reaplica encima con un degradado.
   Visto en la tabla de valores de indicadores (M12), columnas Total/Mensual. */
.tabulator.isg-excel .tabulator-cell.tabulator-frozen { background-color: var(--isg-card-bg); }
.tabulator.isg-excel .tabulator-row:nth-child(even) .tabulator-cell.tabulator-frozen {
    background: linear-gradient(rgba(0, 0, 0, .02), rgba(0, 0, 0, .02)), var(--isg-card-bg);
}
html[data-bs-theme="dark"] .tabulator.isg-excel .tabulator-row:nth-child(even) .tabulator-cell.tabulator-frozen {
    background: linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .03)), var(--isg-card-bg);
}

/* ── Celda editable en línea ──────────────────────────────────────────────
   Marca una celda de tabla que se puede cambiar con un clic, sin abrir la
   ficha (M40: ITV y seguro del vehículo). Solo se pinta cuando el usuario
   tiene permiso: el PHP decide si añade la clase.
   Utilidad reutilizable, no estilo de una página (CLAUDE.md §0.3 / §7). */
td.celda-fecha { cursor: pointer; }
td.celda-fecha .valor {
    border-bottom: 1px dashed var(--isg-border-solid, #d0d7de);
    padding-bottom: 1px;
}
td.celda-fecha:hover { background: var(--isg-hover-bg, rgba(0, 0, 0, .04)); }
td.celda-fecha:hover .valor { border-bottom-color: var(--bs-primary); }
td.celda-fecha input.form-control-sm { min-width: 9rem; }

/* ── ISORGI vivo: la mascota animada de la cabecera del chat ──────────────
   Usa la misma imagen canónica que el icono (`isorgi_3d_sin.png`) y le da vida
   con un movimiento suave. Cabecera, panel y respuestas muestran siempre el
   recurso elegido.

   El estado se cambia desde JS con `window.isorgiEstado('pensando'|'reposo')`,
   que escribe `data-estado` en TODOS los búhos de la página: el del panel
   lateral y el de la cabecera son el mismo personaje y no pueden discrepar.
   Marcado en `isorgi_avatar_vivo()` (app/config/funciones.php), fuente única.

   El tamaño se da por fuera con `--isg-isorgi-vivo-tam`.
   Utilidad reutilizable, no estilo de una página (CLAUDE.md §0.3 / §7). */
.isg-isorgi-vivo {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: var(--isg-isorgi-vivo-tam, 2.8rem);
    height: var(--isg-isorgi-vivo-tam, 2.8rem);
    transform-origin: 50% 85%;
    animation: isg-isorgi-flota 3.8s ease-in-out infinite;
}
.isg-isorgi-vivo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Mientras el chat consulta se mueve más deprisa. */
.isg-isorgi-vivo[data-estado="pensando"] { animation-duration: 1.5s; }

@keyframes isg-isorgi-flota {
    0%, 100% { transform: translateY(5%)  rotate(-2.5deg); }
    50%      { transform: translateY(-5%) rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
    .isg-isorgi-vivo { animation: none; }
}

/* ── Icono de ISORGI en la barra superior ─────────────────────────────────
   El botón del chat lleva la MASCOTA (`assets/img/isorgi_3d_sin.png`), no un
   glifo de Font Awesome. `.menu-icon` mide 1.25rem, que para una cara con orejas
   y gafas es demasiado poco: a ese tamaño no se reconoce nada. Se le da algo más
   de caja y `object-fit: contain` para que no se deforme; el flex de `.menu-icon`
   lo sigue centrando aunque sobresalga.

   El render completo necesita algo más de caja: 2.25rem es la medida que la
   plantilla reserva para imágenes de la barra (`--bs-app-header-menu-img-height`).

   No lleva color: es una imagen y se ve igual en Blueprint y en HUD, que es
   justo el motivo de que el PNG tenga fondo transparente.
   Utilidad reutilizable, no estilo de una página (CLAUDE.md §0.3 / §7). */
.isg-isorgi-icono {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    display: block;
}

/* «Acciones» se distingue suavemente de «Mis centros», sin borde ni sombra. */
.app-header .isg-acciones-cabecera {
    background-color: var(--isg-hover-bg) !important;
}

.app-header .menu-item:hover .isg-acciones-cabecera {
    background-color: rgba(var(--isg-accent-rgb), 0.12) !important;
}
/* Organigrama RRHH: árbol server-rendered de unidades, puestos y ocupantes. */
.isg-org-tree > .isg-org-branch { margin-left: 0; }
.isg-org-branch .isg-org-branch {
  margin: .75rem 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--isg-border, var(--bs-border-color));
}
.isg-org-unit { border-left: 4px solid var(--isg-primary, var(--bs-primary)); }
.isg-org-position {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding: .45rem .65rem;
  border-radius: var(--bs-border-radius);
  background: var(--isg-surface-soft, var(--bs-tertiary-bg));
  color: inherit;
  text-decoration: none;
}
.isg-org-position:hover { color: var(--isg-primary, var(--bs-primary)); }
.isg-org-position small { color: var(--bs-secondary-color); text-align: right; }
@media (max-width: 575.98px) {
  .isg-org-branch .isg-org-branch { margin-left: .5rem; padding-left: .5rem; }
  .isg-org-position { flex-direction: column; gap: .15rem; }
  .isg-org-position small { text-align: left; }
}
/* UX navegación: usuario 7 Y centro 1858. No afecta consumidores sin clase piloto. */
.isg-ux-navigation[hidden] { display: none !important; }
.isg-ux-navigation { display: none; }
@media (max-width: 767.98px) {
    #app.isg-ux-pilot {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: var(--isg-ux-header-height, 110px) !important;
    }
    #app.isg-ux-pilot #drawerRail,
    #app.isg-ux-pilot .drawer-popover { display: none !important; }
    #app.isg-ux-pilot > .app-content {
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 12px !important;
    }
    #app.isg-ux-pilot #header { height: auto; min-height: 56px; flex-wrap: wrap; }
    #app.isg-ux-pilot #header .mobile-toggler { display: flex; }
    #app.isg-ux-pilot #header .brand { flex: 1; min-width: 0; width: auto; }
    #app.isg-ux-pilot #header .brand-name {
        white-space: normal !important; overflow-wrap: anywhere; line-height: 1.3;
    }
    #app.isg-ux-pilot #header > .menu {
        flex-basis: 100%; flex-wrap: wrap; justify-content: flex-end; margin: 0;
    }
    #app.isg-ux-pilot #header .menu-link { min-height: 44px; padding: 8px; }
    #app.isg-ux-pilot #isgUxNavigationToggle { min-width: 44px; min-height: 44px; }
    #app.isg-ux-pilot .isg-ux-navigation:not([hidden]) {
        display: block; position: fixed;
        top: calc(var(--isg-ux-header-height, 110px) + 8px);
        right: 12px; bottom: 12px; width: min(24rem, calc(100% - 24px));
        z-index: 1050; overflow-y: auto; overscroll-behavior: contain;
        padding: 16px; background: var(--isg-surface); color: var(--isg-text);
        border: 1px solid var(--isg-border-solid); border-radius: 8px;
    }
    #app.isg-ux-pilot .isg-ux-navigation-heading {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    #app.isg-ux-pilot .isg-ux-navigation-centre { margin: 12px 0; overflow-wrap: anywhere; }
    #app.isg-ux-pilot .isg-ux-navigation summary {
        padding: 12px 4px; min-height: 44px; cursor: pointer;
        border-top: 1px solid var(--isg-border-solid);
    }
    #app.isg-ux-pilot .isg-ux-navigation ul { list-style: none; padding-left: 12px; margin: 0; }
    #app.isg-ux-pilot .isg-ux-navigation a {
        display: block; padding: 10px 8px; min-height: 44px;
        color: var(--isg-text); overflow-wrap: anywhere; font-size: 14px;
    }
    #app.isg-ux-pilot .isg-ux-navigation a:hover { background: var(--isg-hover-bg); }
    #app.isg-ux-pilot .isg-ux-navigation :focus-visible,
    #app.isg-ux-pilot #isgUxNavigationToggle:focus-visible {
        outline: 2px solid var(--isg-accent); outline-offset: 2px;
    }
}

/* M21 · ficha de formación: densidad visual sin afectar otras fichas. */
.m21-formacion-ficha {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}
.m21-formacion-ficha .card {
    overflow: hidden;
}
.m21-formacion-ficha .card .card {
    box-shadow: none !important;
}
.m21-formacion-ficha .document-item {
    min-width: 0;
}
.m21-formacion-ficha .document-item small {
    max-width: 100%;
}
.m21-formacion-ficha .m21-attendee-grid {
    max-height: 24rem;
    overflow-y: auto;
    align-content: start;
    padding-right: .25rem;
}
.m21-formacion-ficha .m21-attendee-grid .form-check {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 2rem;
    margin: 0;
}
.m21-formacion-ficha .m21-attendee-grid .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 0;
}
.m21-formacion-ficha .m21-attendee-grid .form-check-label {
    min-width: 0;
    font-size: .875rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.m21-formacion-ficha p {
    overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
    .m21-formacion-actions {
        justify-content: stretch !important;
    }
    .m21-formacion-actions > * {
        width: 100%;
    }
}

/* M21 · norma transversal: botones y títulos principales siempre en mayúsculas. */
body.isg-module-21 button,
body.isg-module-21 .btn,
body.isg-module-21 input[type="button"],
body.isg-module-21 input[type="submit"],
body.isg-module-21 input[type="reset"],
body.isg-module-21 .page-header,
body.isg-module-21 .profile-header-info > h1:first-of-type,
body.isg-module-21 .profile-header-info > h2:first-of-type,
body.isg-module-21 .profile-header-info > h3:first-of-type,
body.isg-module-21 .profile-header-info > h4:first-of-type {
    text-transform: uppercase;
}

/* M21 · dashboard de Recursos Humanos. */
.m21-rrhh-dashboard .m21-dashboard-kpi,
.m21-rrhh-dashboard .m21-dashboard-access {
    border: 1px solid var(--isg-border, var(--bs-border-color)) !important;
    background: var(--isg-surface, var(--bs-body-bg));
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.m21-rrhh-dashboard .m21-dashboard-kpi:hover,
.m21-rrhh-dashboard .m21-dashboard-access:hover {
    transform: translateY(-2px);
    border-color: var(--isg-accent, var(--bs-primary)) !important;
}
.m21-rrhh-dashboard .m21-dashboard-kpi:focus-visible,
.m21-rrhh-dashboard .m21-dashboard-access:focus-visible {
    outline: 2px solid var(--isg-accent, var(--bs-primary));
    outline-offset: 3px;
}
.m21-rrhh-dashboard .m21-dashboard-icon {
    display: inline-flex;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius-lg);
    font-size: 1.15rem;
}
.m21-rrhh-dashboard .m21-dashboard-chart {
    position: relative;
    height: 18rem;
}
.m21-rrhh-dashboard .m21-dashboard-empty {
    display: grid;
    min-height: 18rem;
    place-items: center;
    color: var(--isg-text-muted, var(--bs-secondary-color));
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .m21-rrhh-dashboard .m21-dashboard-kpi,
    .m21-rrhh-dashboard .m21-dashboard-access {
        transition: none;
    }
    .m21-rrhh-dashboard .m21-dashboard-kpi:hover,
    .m21-rrhh-dashboard .m21-dashboard-access:hover {
        transform: none;
    }
}

/* M21 · archivos propios de la persona. */
.m21-persona-documentos .m21-document-dropzone {
    display: grid;
    min-height: 9rem;
    place-content: center;
    padding: 1.25rem;
    border: 2px dashed var(--isg-border, var(--bs-border-color));
    border-radius: var(--bs-border-radius-lg);
    background: var(--isg-surface, var(--bs-body-bg));
    color: var(--isg-text-muted, var(--bs-secondary-color));
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.m21-persona-documentos .m21-document-dropzone:hover,
.m21-persona-documentos .m21-document-dropzone:focus-visible,
.m21-persona-documentos .m21-document-dropzone.is-dragging {
    border-color: var(--isg-accent, var(--bs-primary));
    background: var(--isg-surface-soft, var(--bs-tertiary-bg));
    color: var(--isg-accent, var(--bs-primary));
    outline: none;
}
.m21-persona-documentos .m21-document-queue-item {
    padding: 1rem;
    border: 1px solid var(--isg-border, var(--bs-border-color));
    border-radius: var(--bs-border-radius);
    background: var(--isg-surface, var(--bs-body-bg));
}
.m21-persona-documentos .m21-document-queue-item + .m21-document-queue-item {
    margin-top: .75rem;
}
.m21-persona-documentos .m21-document-empty {
    display: grid;
    min-height: 6rem;
    place-content: center;
    text-align: center;
}
.m21-persona-documentos .min-w-0 {
    min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
    .m21-persona-documentos .m21-document-dropzone {
        transition: none;
    }
}

/* M1 · histórico de evaluaciones en fichas de ancho completo. */
.m1-eval-section-icon {
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 2.125rem;
}
#m1-evaluaciones-historico {
    display: grid;
    gap: 1rem;
}
#m1-evaluaciones-historico .m1-eval-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--isg-border, var(--bs-border-color));
    border-radius: var(--bs-border-radius-lg);
    background: var(--isg-card-bg, var(--bs-body-bg));
    box-shadow: var(--isg-shadow-sm, 0 .25rem 1rem color-mix(in srgb, var(--bs-black) 8%, transparent));
}
#m1-evaluaciones-historico .m1-eval-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    /* Hueco a la izquierda para el botón de eliminar (a la izquierda por petición, 2026-09-17). */
    padding: .75rem 1rem .75rem 4rem;
    border-bottom: 1px solid var(--isg-border, var(--bs-border-color));
    background: var(--isg-surface-soft, var(--bs-tertiary-bg));
}
#m1-evaluaciones-historico .m1-eval-id,
#m1-evaluaciones-historico .m1-eval-result {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border: 1px solid var(--isg-border-solid, var(--bs-border-color));
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}
#m1-evaluaciones-historico .m1-eval-id {
    border-color: color-mix(in srgb, var(--isg-accent, var(--bs-primary)) 35%, transparent);
    color: var(--isg-accent, var(--bs-primary));
}
#m1-evaluaciones-historico .m1-eval-result {
    color: var(--isg-text, var(--bs-body-color));
}
#m1-evaluaciones-historico .m1-eval-actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
#m1-evaluaciones-historico .m1-eval-delete {
    position: absolute;
    top: .75rem;
    left: 1rem;
    z-index: 1;
    line-height: 1;
}
#m1-evaluaciones-historico .m1-eval-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
}
#m1-evaluaciones-historico .m1-eval-meta > div {
    display: grid;
    gap: .2rem;
    min-width: 0;
}
#m1-evaluaciones-historico .m1-eval-meta span,
#m1-evaluaciones-historico .m1-eval-comment > span {
    color: var(--isg-text-muted, var(--bs-secondary-color));
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
#m1-evaluaciones-historico .m1-eval-meta strong {
    overflow-wrap: anywhere;
    color: var(--isg-text, var(--bs-body-color));
    font-size: .875rem;
}
#m1-evaluaciones-historico .m1-eval-comment {
    margin: 0 1rem;
    padding: 1rem 0 1.1rem;
    border-top: 1px solid var(--isg-border, var(--bs-border-color));
}
#m1-evaluaciones-historico .m1-eval-comment p {
    margin: .45rem 0 0;
    color: var(--isg-text, var(--bs-body-color));
    font-size: .875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
    #m1-evaluaciones-historico .m1-eval-card-head {
        align-items: flex-start;
    }
    #m1-evaluaciones-historico .m1-eval-meta {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
}

/* M10 · subida manual de varios documentos. */
#modal_varios .box-document-dropzone {
    display: grid;
    min-height: 11rem;
    place-content: center;
    padding: 1.5rem;
    border: 2px dashed var(--isg-border, var(--bs-border-color));
    border-radius: var(--bs-border-radius-lg);
    background: var(--isg-surface, var(--bs-body-bg));
    color: var(--isg-text-muted, var(--bs-secondary-color));
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
#modal_varios .box-document-dropzone:hover,
#modal_varios .box-document-dropzone:focus-visible,
#modal_varios .box-document-dropzone.is-dragging {
    border-color: var(--isg-accent, var(--bs-primary));
    background: var(--isg-surface-soft, var(--bs-tertiary-bg));
    color: var(--isg-accent, var(--bs-primary));
    outline: none;
}
#modal_varios .min-w-0 {
    min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
    #modal_varios .box-document-dropzone {
        transition: none;
    }
}

/* M49 · subprocesos siempre visibles dentro de su proceso padre. */
.plr-subprocesos {
    display: grid;
    gap: .2rem;
    margin: .25rem 0 .15rem;
    padding-top: .3rem;
    border-top: 1px solid color-mix(in srgb, var(--plr-estado) 24%, var(--isg-border, var(--bs-border-color)));
}
.plr-subprocesos-t {
    color: var(--isg-text-muted, var(--bs-secondary-color));
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.plr-subproceso {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .3rem;
    padding: .2rem .3rem;
    border: 1px solid var(--isg-border, var(--bs-border-color));
    border-radius: var(--bs-border-radius-sm);
    background: var(--isg-surface, var(--bs-body-bg));
    color: var(--isg-text, var(--bs-body-color));
    font-size: .62rem;
    line-height: 1.15;
}
.plr-subproceso-cod {
    color: var(--isg-text-muted, var(--bs-secondary-color));
    font-weight: 700;
    white-space: nowrap;
}
.plr-subproceso-nom {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
/* Inicio alternativo /0/index_2.php. Ámbito local, ambos temas. */
/* Variante /0/index_3.php: dirección visual de sistema de gestión. */
.inicio2.inicio3 { --in3-deep:color-mix(in srgb,var(--isg-accent) 22%,var(--bs-black)); --in3-paper:var(--bs-white); --in3-muted:color-mix(in srgb,var(--bs-white) 68%,transparent); }
.inicio2.inicio3 .in3-hero { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:18px; margin-bottom:22px; }
.inicio2.inicio3 .in3-hero-main { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:center; position:relative; overflow:hidden; border-radius:26px; padding:38px; color:var(--in3-paper); background:radial-gradient(ellipse at 95% 25%,color-mix(in srgb,var(--isg-accent) 38%,transparent),transparent 65%),var(--in3-deep); border:1px solid var(--isg-border); }
.inicio2.inicio3 .in3-hero-main::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(color-mix(in srgb,var(--bs-white) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--bs-white) 4%,transparent) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(90deg,transparent,black); }
.inicio2.inicio3 .in3-hero-copy { position:relative; z-index:1; }
.inicio2.inicio3 .in3-kicker { display:flex; align-items:center; gap:9px; color:var(--in3-muted); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }
.inicio2.inicio3 .in3-signal { width:7px; height:7px; border-radius:50%; background:var(--in3-paper); box-shadow:0 0 0 4px color-mix(in srgb,var(--bs-white) 10%,transparent); flex-shrink:0; }
.inicio2.inicio3 #in3-hero-title { color:var(--in3-paper); font-family:inherit; font-size:clamp(2rem,3.2vw,3.6rem); font-weight:650; letter-spacing:-.055em; line-height:1.08; margin:28px 0 20px; }
.inicio2.inicio3 #in3-hero-title em { display:block; font-style:normal; color:color-mix(in srgb,var(--isg-accent) 35%,var(--bs-white)); }
.inicio2.inicio3 .in3-hero-sub { color:var(--in3-muted); font-size:.9rem; line-height:1.7; max-width:390px; }
.inicio2.inicio3 .in3-hero-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin:26px 0 30px; }
.inicio2.inicio3 .in3-hero-actions .in3-primary { display:flex; align-items:center; gap:10px; background:var(--in3-paper); color:var(--in3-deep); border:1px solid var(--in3-paper); box-shadow:none; }
.inicio2.inicio3 .in3-text-link { color:var(--in3-paper); font-size:.65rem; letter-spacing:.04em; text-decoration:none; }
.inicio2.inicio3 .in3-text-link:hover { text-decoration:underline; }
.inicio2.inicio3 .in3-hero-meta { display:flex; flex-wrap:wrap; gap:14px; color:var(--in3-muted); font-size:.68rem; }
.inicio2.inicio3 .in3-system-map { position:relative; height:320px; width:300px; }
.inicio2.inicio3 .in3-map-ring { position:absolute; border-radius:50%; border:1px solid color-mix(in srgb,var(--bs-white) 15%,transparent); left:50%; top:46%; transform:translate(-50%,-50%); }
.inicio2.inicio3 .in3-map-ring-outer { width:275px; height:275px; border-style:dashed; }
.inicio2.inicio3 .in3-map-ring-inner { width:215px; height:215px; box-shadow:0 0 0 18px color-mix(in srgb,var(--bs-white) 2%,transparent); }
.inicio2.inicio3 .in3-map-core { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:142px; height:142px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-radius:50%; background:color-mix(in srgb,var(--isg-accent) 28%,var(--in3-deep)); border:1px solid color-mix(in srgb,var(--bs-white) 35%,transparent); box-shadow:0 0 55px color-mix(in srgb,var(--isg-accent) 25%,transparent); }
.inicio2.inicio3 .in3-map-core i { font-size:1rem; color:var(--in3-muted); }.inicio2.inicio3 .in3-map-core strong { font-size:2.4rem; line-height:1; font-weight:500; }.inicio2.inicio3 .in3-map-core span { max-width:100px; text-align:center; font-size:.62rem; color:var(--in3-muted); }
.inicio2.inicio3 .in3-map-node { position:absolute; display:flex; align-items:center; gap:7px; font-size:.62rem; background:var(--in3-deep); border:1px solid color-mix(in srgb,var(--bs-white) 25%,transparent); border-radius:30px; padding:10px 12px; white-space:nowrap; }
.inicio2.inicio3 .in3-map-node-plan { top:0; left:50%; transform:translateX(-50%); }.inicio2.inicio3 .in3-map-node-do { right:-6px; top:41%; }.inicio2.inicio3 .in3-map-node-check { bottom:40px; left:50%; transform:translateX(-50%); }.inicio2.inicio3 .in3-map-node-act { left:-6px; top:41%; }
.inicio2.inicio3 .in3-map-caption { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--in3-muted); }
.inicio2.inicio3 .in3-copilot { position:relative; border:1px solid var(--isg-border); border-radius:26px; padding:24px; text-align:center; background:radial-gradient(ellipse at 50% 20%,var(--isg-active-bg),transparent 65%),var(--isg-surface); display:flex; flex-direction:column; align-items:center; }
.inicio2.inicio3 .in3-copilot-top { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; }.inicio2.inicio3 .in3-copilot .in2-beta { margin:0; }
.inicio2.inicio3 .in3-mascot { position:relative; display:grid; place-items:center; height:140px; width:100%; margin-top:8px; }.inicio2.inicio3 .in3-mascot img, .inicio2.inicio3 .in3-mascot video { position:relative; object-fit:contain; filter:drop-shadow(0 12px 18px var(--isg-border)); }.inicio2.inicio3 .in3-mascot-halo { position:absolute; width:125px; height:125px; border-radius:50%; border:1px solid var(--isg-border); box-shadow:0 0 0 16px var(--isg-hover-bg); }
.inicio2.inicio3 .in3-copilot h2 { margin:14px 0 8px; font-size:1.2rem; letter-spacing:.06em; }.inicio2.inicio3 .in3-copilot p { font-size:.78rem; color:var(--isg-text-muted); line-height:1.6; }.inicio2.inicio3 .in3-copilot>.btn { width:100%; margin-top:auto; }.inicio2.inicio3 .in3-ia-shortcuts { display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-top:8px; }.inicio2.inicio3 .in3-ia-shortcuts .btn { font-size:.58rem; padding:7px 4px; }
.inicio2.inicio3 .in3-cycle { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 38px; }
.inicio2.inicio3 .in3-stage { --in3-stage-accent:var(--isg-accent); border:1px solid var(--isg-border); border-radius:18px; background:var(--isg-surface); color:var(--isg-text); text-align:left; padding:20px 22px; position:relative; overflow:hidden; transition:transform .15s,border-color .15s; }
.inicio2.inicio3 .in3-stage::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--in3-stage-accent); }.inicio2.inicio3 .in3-stage-do { --in3-stage-accent:var(--bs-success); }.inicio2.inicio3 .in3-stage-check { --in3-stage-accent:var(--bs-purple); }.inicio2.inicio3 .in3-stage-act { --in3-stage-accent:var(--bs-orange); }
.inicio2.inicio3 .in3-stage:hover:not(:disabled),.inicio2.inicio3 .in3-stage[aria-pressed=true] { transform:translateY(-3px); border-color:var(--in3-stage-accent); background:var(--isg-hover-bg); }.inicio2.inicio3 .in3-stage:disabled { opacity:.55; cursor:default; }
.inicio2.inicio3 .in3-stage-top { display:flex; align-items:center; gap:10px; color:var(--in3-stage-accent); margin-bottom:14px; }.inicio2.inicio3 .in3-stage-step { font-size:.65rem; color:var(--isg-text-muted); letter-spacing:.1em; }.inicio2.inicio3 .in3-stage-arrow { margin-left:auto; }.inicio2.inicio3 .in3-stage strong { display:block; font-size:.85rem; letter-spacing:.06em; }.inicio2.inicio3 .in3-stage-sub { display:block; text-transform:none; color:var(--isg-text-muted); font-size:.72rem; line-height:1.5; margin:7px 0 15px; }.inicio2.inicio3 .in3-stage-count { font-size:.58rem; font-weight:600; letter-spacing:.06em; color:var(--in3-stage-accent); }
.inicio2.inicio3 .in3-attention-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }.inicio2.inicio3 .in3-attention-heading h2 { margin:6px 0 0; font-size:1.4rem; font-weight:650; letter-spacing:-.03em; }
.inicio2.inicio3 .in2-kpis { margin-top:16px; margin-bottom:28px; }.inicio2.inicio3 .in2-kpi { border-radius:16px; padding:20px 24px; border-top:3px solid var(--isg-border-solid); }.inicio2.inicio3 .in2-kpi-overdue { border-top-color:var(--bs-danger); }.inicio2.inicio3 .in2-kpi-today { border-top-color:var(--isg-accent); }.inicio2.inicio3 .in2-kpi-week { border-top-color:var(--bs-success); }.inicio2.inicio3 .in2-kpi-undated { border-top-color:var(--bs-orange); }
.inicio2.inicio3 .in2-priorities { border-top:3px solid var(--isg-accent); }.inicio2.inicio3 .in2-module { border-radius:16px; box-shadow:var(--isg-glow-accent); }.inicio2.inicio3 .in2-module-top { margin-bottom:12px; }.inicio2.inicio3 .in2-module-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }.inicio2.inicio3 .in2-module h3 { margin-bottom:0; }.inicio2.inicio3 .in2-module-stats { margin-top:12px; }
.inicio2.inicio3 .in3-module-filter { display:flex; align-items:center; gap:14px; color:var(--isg-accent); margin-bottom:14px; }.inicio2.inicio3 [id$="-title"] { scroll-margin-top:100px; }
.in3-personal-button { position:fixed; right:1.5rem; top:calc(var(--bs-app-header-height,3.75rem) + 1rem); z-index:1035; display:flex; align-items:center; gap:10px; border-radius:30px; font-size:.7rem; padding:10px 16px 10px 10px; box-shadow:var(--isg-active-shadow); }
.in3-personal-count { display:grid; place-items:center; min-width:26px; height:26px; border-radius:50%; background:var(--isg-surface); color:var(--isg-accent); font-weight:700; }
.in3-personal-panel { --bs-offcanvas-width:390px; top:var(--bs-app-header-height,3.75rem) !important; height:calc(100% - var(--bs-app-header-height,3.75rem)); }.in3-personal-panel .offcanvas-title { display:flex; align-items:center; gap:10px; }.in3-personal-line { display:flex; align-items:center; gap:14px; width:100%; border:0; border-bottom:1px solid var(--isg-border); padding:18px 0; background:transparent; color:var(--isg-text); text-align:left; text-decoration:none; font-size:.8rem; }.in3-personal-line strong { color:var(--isg-accent); font-size:1.8rem; min-width:40px; }.in3-personal-line span { flex:1; }.in3-personal-line:hover { background:var(--isg-hover-bg); }.in3-personal-modal .modal-body { padding:0; height:70vh; }.in3-personal-modal iframe { width:100%; height:100%; border:0; }
@media(min-width:901px) { body.chat-asist-shift .in3-personal-button { right:calc(var(--chat-asist-w,420px) + 1.5rem); } }
@media(max-width:1400px) { .inicio2.inicio3 .in3-hero-main { grid-template-columns:minmax(0,1fr) 245px; padding:28px; }.inicio2.inicio3 .in3-system-map { width:245px; height:290px; }.inicio2.inicio3 .in3-map-ring-outer { width:235px; height:235px; }.inicio2.inicio3 .in3-map-ring-inner { width:190px; height:190px; }.inicio2.inicio3 .in3-map-core { width:125px; height:125px; }.inicio2.inicio3 .in3-map-node { font-size:.55rem; padding:8px; } }
@media(max-width:1150px) { .inicio2.inicio3 .in3-hero { grid-template-columns:minmax(0,1fr) 250px; }.inicio2.inicio3 .in3-hero-main { grid-template-columns:1fr; }.inicio2.inicio3 .in3-system-map { display:none; }.inicio2.inicio3 .in3-stage { padding:18px; } }
@media(max-width:720px) { .inicio2.inicio3 .in3-hero { grid-template-columns:1fr; }.inicio2.inicio3 .in3-copilot { display:grid; grid-template-columns:95px minmax(0,1fr); text-align:left; gap:6px 16px; padding:20px; }.inicio2.inicio3 .in3-copilot-top { grid-column:1/-1; }.inicio2.inicio3 .in3-mascot { grid-row:2/5; height:100px; }.inicio2.inicio3 .in3-mascot img, .inicio2.inicio3 .in3-mascot video { width:100px; height:100px; }.inicio2.inicio3 .in3-mascot-halo { width:80px; height:80px; }.inicio2.inicio3 .in3-copilot h2 { margin:8px 0 0; }.inicio2.inicio3 .in3-copilot p { margin-bottom:4px; }.inicio2.inicio3 .in3-ia-shortcuts { grid-column:1/-1; }.inicio2.inicio3 .in3-cycle { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.inicio2.inicio3 .in3-stage-sub { min-height:2.8em; }.inicio2.inicio3 .in3-hero-main { padding:28px 24px; } }
@media(max-width:600px) { .in3-personal-button { position:static; margin-left:auto; font-size:.6rem; padding:6px 10px 6px 6px; }.in3-personal-button>i { display:none; }.inicio2.inicio3 .in3-hero-main { border-radius:20px; }.inicio2.inicio3 .in3-stage { padding:15px; }.inicio2.inicio3 .in3-attention-heading { align-items:flex-start; }.inicio2.inicio3 .in2-module-grid { grid-template-columns:1fr; } }
.inicio2 { --in2-accent:var(--bs-primary); max-width:1600px; margin:0 auto; color:var(--bs-body-color); padding:8px 0 36px; }
.inicio2 [hidden] { display:none !important; }
.inicio2 button { text-transform:uppercase; }
.inicio2 .in2-welcome,.inicio2 .in2-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:22px; }
.inicio2 .in2-eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-secondary-color); }
.inicio2 .in2-greeting { font-size:clamp(1.5rem,2.4vw,2.4rem); line-height:1.2; font-weight:650; letter-spacing:-.045em; margin:8px 0 12px; }
.inicio2 .in2-note { font-size:.8rem; line-height:1.5; color:var(--bs-secondary-color); margin:8px 0; }
.inicio2 .in2-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.inicio2 .in2-segment { display:flex; padding:4px; background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); border-radius:12px; }
.inicio2 .in2-segment button { border:0; background:transparent; color:var(--bs-secondary-color); border-radius:8px; padding:10px 16px; font-size:.75rem; font-weight:650; }
.inicio2 .in2-segment button[aria-pressed=true] { background:var(--isg-surface); color:var(--bs-body-color); box-shadow:var(--bs-box-shadow-sm); }
.inicio2 .in2-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:24px 0; }
.inicio2 .in2-kpi { position:relative; text-align:left; border:1px solid var(--bs-border-color); border-radius:18px; padding:22px 24px; background:var(--isg-surface); color:var(--bs-body-color); transition:transform .18s,border-color .18s; }
.inicio2 .in2-kpi:hover { transform:translateY(-3px); }
.inicio2 .in2-kpi[aria-pressed=true] { border-color:var(--bs-primary); outline:2px solid var(--bs-primary-border-subtle); }
.inicio2 .in2-kpi-label { display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--bs-secondary-color); }
.inicio2 .in2-kpi strong { display:block; font-size:2.5rem; letter-spacing:-.06em; font-weight:650; margin-top:12px; font-variant-numeric:tabular-nums; }
.inicio2 .in2-kpi-overdue strong,.inicio2 .in2-overdue-text { color:var(--bs-danger-text-emphasis); }
.inicio2 .in2-kpi-today strong { color:var(--bs-primary); }
.inicio2 .in2-kpi-arrow { position:absolute; right:24px; bottom:24px; color:var(--bs-secondary-color); }
.inicio2 .in2-isorgi { display:flex; align-items:center; flex-wrap:wrap; gap:22px; padding:22px 28px; margin:0 0 28px; border:1px solid var(--bs-primary-border-subtle); border-radius:22px; background:linear-gradient(115deg,var(--bs-primary-bg-subtle),var(--isg-surface) 75%); }
.inicio2 .in2-isorgi img { object-fit:contain; flex-shrink:0; }
.inicio2 .in2-isorgi-copy { flex:1; min-width:220px; }
.inicio2 .in2-isorgi h2 { font-size:1.35rem; letter-spacing:-.03em; margin:0 0 8px; }
.inicio2 .in2-isorgi p { color:var(--bs-secondary-color); margin:0; max-width:480px; }
.inicio2 .in2-beta { display:inline-block; margin-left:8px; font-size:.6rem; letter-spacing:.06em; vertical-align:middle; border:1px solid var(--bs-primary-border-subtle); padding:3px 6px; border-radius:5px; }
.inicio2 .in2-isorgi-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:470px; }
.inicio2 .btn { border-radius:10px; font-size:.73rem; font-weight:650; padding:10px 14px; }
.inicio2 .in2-workspace { display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:24px; }
.inicio2 .in2-panel { background:var(--isg-surface); border:1px solid var(--bs-border-color); border-radius:22px; padding:26px; min-width:0; }
.inicio2 .in2-panel-heading h2 { margin:7px 0 6px; font-size:1.35rem; font-weight:650; letter-spacing:-.025em; }
.inicio2 .in2-panel-heading p { color:var(--bs-secondary-color); margin:0; font-size:.82rem; }
.inicio2 .in2-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.inicio2 .in2-filters .form-select { width:auto; max-width:100%; font-size:.8rem; border-radius:10px; }
.inicio2 .in2-priority { display:block; width:100%; border:0; border-top:1px solid var(--bs-border-color); background:transparent; color:var(--bs-body-color); text-align:left; padding:18px 0; }
.inicio2 .in2-priority:hover { background:var(--bs-tertiary-bg); }
.inicio2 .in2-priority strong { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:.85rem; font-weight:600; line-height:1.5; margin:6px 0; }
.inicio2 .in2-priority-date { font-size:.72rem; font-weight:650; }
.inicio2 .in2-priority .in2-note { display:block; font-size:.7rem; }
.inicio2 .in2-empty { text-align:center; padding:36px 16px; color:var(--bs-secondary-color); line-height:1.6; }
.inicio2 .in2-modules { margin-top:36px; }
.inicio2 .in2-module-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.inicio2 .in2-module { min-width:0; border:1px solid var(--bs-border-color); border-radius:18px; padding:22px; background:var(--isg-surface); display:flex; flex-direction:column; }
.inicio2 .in2-group-legal { --in2-accent:var(--bs-primary); }
.inicio2 .in2-group-industrial { --in2-accent:var(--bs-success); }
.inicio2 .in2-group-gestion { --in2-accent:var(--bs-warning-text-emphasis); }
.inicio2 .in2-group-documentos { --in2-accent:var(--bs-info-text-emphasis); }
.inicio2 .in2-group-personas { --in2-accent:var(--bs-purple); }
.inicio2 .in2-module-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
.inicio2 .in2-module-icon { color:var(--in2-accent); font-size:1.2rem; background:var(--bs-tertiary-bg); border-radius:12px; width:44px; height:44px; display:grid; place-items:center; }
.inicio2 .in2-module h3 { font-size:.95rem; font-weight:650; line-height:1.5; margin-bottom:16px; }
.inicio2 .in2-module-stats { flex:1; }
.inicio2 .in2-module-metric { display:flex; align-items:baseline; gap:10px; }
.inicio2 .in2-module-metric strong { font-size:2rem; font-weight:600; letter-spacing:-.04em; }
.inicio2 .in2-module-metric span { font-size:.72rem; color:var(--bs-secondary-color); }
.inicio2 .in2-module-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--bs-border-color); padding-top:16px; margin-top:16px; font-size:.65rem; font-weight:650; }
.inicio2 .in2-module-footer a { color:var(--bs-body-color); text-decoration:none; }
.inicio2 .in2-module-footer a:hover { color:var(--bs-primary); }
.inicio2 .in2-footnote { display:flex; justify-content:space-between; gap:20px; margin-top:24px; color:var(--bs-secondary-color); font-size:.7rem; }
.inicio2 .in2-legend { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.inicio2 .in2-legend-item { border:0; background:transparent; color:var(--bs-secondary-color); font-size:.65rem; padding:4px 6px; }
.inicio2 .in2-legend-item::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--in2-accent); margin-right:6px; }
.inicio2 .fc { --fc-border-color:var(--bs-border-color); --fc-today-bg-color:var(--bs-primary-bg-subtle); --fc-neutral-bg-color:var(--bs-tertiary-bg); --fc-page-bg-color:var(--isg-surface); --fc-list-event-hover-bg-color:var(--bs-tertiary-bg); font-size:.78rem; }
.inicio2 .fc .fc-toolbar-title { font-size:1.15rem; letter-spacing:-.02em; }
.inicio2 .fc .fc-button { background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); color:var(--bs-body-color); font-size:.65rem; text-transform:uppercase; box-shadow:none; padding:8px 10px; }
.inicio2 .fc .fc-button-active { background:var(--bs-primary) !important; color:var(--bs-white) !important; border-color:var(--bs-primary) !important; }
.inicio2 .fc a { color:inherit; text-decoration:none; }
.inicio2 .fc .fc-col-header-cell-cushion { padding:10px 4px; font-weight:500; color:var(--bs-secondary-color); }
.inicio2 .fc .in2-event { border:0; border-left:3px solid var(--in2-accent); background:var(--bs-tertiary-bg); color:var(--bs-body-color); border-radius:4px; padding:3px; cursor:pointer; }
.inicio2 .fc .fc-event-main { color:var(--bs-body-color); }
.inicio2 .fc .in2-event-done { opacity:.65; }
.inicio2 .fc .fc-daygrid-day-number { padding:8px; }
.inicio2 :focus-visible { outline:2px solid var(--bs-primary); outline-offset:3px; }
@media(max-width:1200px) { .inicio2 .in2-workspace { grid-template-columns:minmax(0,1fr) 290px; gap:16px; } .inicio2 .in2-panel { padding:18px; } }
@media(max-width:950px) { .inicio2 .in2-workspace { grid-template-columns:1fr; } .inicio2 .in2-welcome { align-items:flex-start; flex-direction:column; gap:18px; } .inicio2 .in2-isorgi-actions { max-width:none; } }
/* Página sin menú lateral (`$isgSinSidebar = true` antes de inc_body.php; ver body_start.php).
   El drawer se oculta y se anula el padding-left que sidebar_3.php pone a #app. Más específico
   que el `#app { padding-left }` inline de sidebar_3 (id + clase > id). */
body.isg-sin-sidebar #drawerRail, body.isg-sin-sidebar .drawer-popover { display:none !important; }
body.isg-sin-sidebar #app { padding-left:24px !important; padding-right:24px !important; }
@media(max-width:576px) { body.isg-sin-sidebar #app { padding-left:12px !important; padding-right:12px !important; } }
/* Inicio alternativo a página completa (0/index_2.php): módulos 70 % a la izquierda, agenda 30 % a la derecha */
.inicio2.inicio2-full { max-width:none; }
/* Hero de la portada dentro de index_2: el contenedor .inicio4 solo presta sus tokens y estilos, sin su ancho ni su padding */
.inicio2 .in2-hero.inicio4 { max-width:none; margin:0 0 20px; padding:0; }
/* index_2 va sin título de página: la barra que abre template.php (breadcrumb + h1 vacío) se colapsa para no dejar un hueco */
body.isg-sin-sidebar #app > div:has(+ main.inicio2-full) { display:none !important; }
/* ── Menú de BLOQUE (app/includes/sidebar_4.php, en 0/bloque.php): el MISMO drawer de sidebar_3 (clases, <style> y
   <script> los emite sidebar_3). Aquí solo lo que el drawer no contempla: la posición (sidebar_3 la lleva inline en
   #drawerRail), los nombres de módulo a dos líneas y el scroll del carril cuando hay muchos módulos ── */
#sidebar4 { left:12px; top:70px; bottom:20px; width:120px; z-index:1040; }
#sidebar4 .drawer-rail .card-body { overflow-y:auto !important; scrollbar-width:none !important; }
#sidebar4 .drawer-label { white-space:normal; font-size:.6rem; line-height:1.15; }
#sidebar4 .isg-sb4-vacio { font-size:.6rem; color:var(--bs-secondary-color); text-align:center; padding:.5rem .25rem; }
@media(max-width:576px) { #sidebar4 { width:88px; } }
/* Tarjetas de BLOQUES (tabla `bloques`) en index_2: color e icono según el título (0/inicio_lib.php → inicio_bloque_estilo) */
.inicio2 .in2-c-primary { --in2-accent:var(--bs-primary); }.inicio2 .in2-c-success { --in2-accent:var(--bs-success); }.inicio2 .in2-c-danger { --in2-accent:var(--bs-danger); }.inicio2 .in2-c-warning { --in2-accent:var(--bs-warning); }.inicio2 .in2-c-info { --in2-accent:var(--bs-info); }.inicio2 .in2-c-purple { --in2-accent:var(--bs-purple); }.inicio2 .in2-c-orange { --in2-accent:var(--bs-orange); }.inicio2 .in2-c-pink { --in2-accent:var(--bs-pink); }.inicio2 .in2-c-teal { --in2-accent:var(--bs-teal); }.inicio2 .in2-c-cyan { --in2-accent:var(--bs-cyan); }.inicio2 .in2-c-indigo { --in2-accent:var(--bs-indigo); }.inicio2 .in2-c-blue { --in2-accent:var(--bs-blue); }.inicio2 .in2-c-green { --in2-accent:var(--bs-green); }
.inicio2 .in2-block-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }   /* CINCO por fila (petición de Juan Miguel, 2026-09-29, antes seis); en anchos menores, 4 · 3 · 2 · 1 */
.inicio2 .in2-block { position:relative; overflow:hidden; min-height:150px; border:1px solid var(--bs-border-color); border-radius:18px; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--in2-accent) 22%,transparent),transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--in2-accent) 6%,var(--isg-surface)),var(--isg-surface) 70%); transition:transform .18s,box-shadow .18s,border-color .18s; }
.inicio2 .in2-block::before { content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--in2-accent); }
.inicio2 .in2-block:hover { transform:translateY(-4px); border-color:var(--in2-accent); box-shadow:0 16px 30px color-mix(in srgb,var(--in2-accent) 20%,transparent); }
/* Imagen de fondo de la tarjeta: el icono del bloque, grande, girado y muy tenue, asomando por la esquina */
.inicio2 .in2-block-marca { position:absolute; right:-14px; bottom:-18px; font-size:7.5rem; line-height:1; color:color-mix(in srgb,var(--in2-accent) 11%,transparent); transform:rotate(-12deg); pointer-events:none; user-select:none; transition:transform .25s,color .25s; }
.inicio2 .in2-block:hover .in2-block-marca { transform:rotate(-6deg) scale(1.06); color:color-mix(in srgb,var(--in2-accent) 16%,transparent); }
.inicio2 .in2-block-nota { margin:0; font-size:.68rem; }
.inicio2 .in2-block-icon { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:1.2rem; color:var(--bs-white); background:var(--in2-accent); box-shadow:0 8px 18px color-mix(in srgb,var(--in2-accent) 35%,transparent); position:relative; }
.inicio2 .in2-block h3 { font-size:.82rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; line-height:1.3; margin:0; padding-right:28px; overflow-wrap:anywhere; position:relative; }
.inicio2 .in2-block-mods { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.inicio2 .in2-block-mods a { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:9px; font-size:.78rem; font-weight:550; color:var(--bs-body-color); text-decoration:none; transition:background .15s,color .15s; }
.inicio2 .in2-block-mods a:hover { background:color-mix(in srgb,var(--in2-accent) 12%,transparent); color:var(--in2-accent); }
.inicio2 .in2-block-mods a > i:first-child { width:16px; text-align:center; color:var(--in2-accent); font-size:.8rem; }
.inicio2 .in2-block-mods a > span { flex:1; min-width:0; }
.inicio2 .in2-block-go { font-size:.65rem; opacity:0; transform:translateX(-4px); transition:opacity .15s,transform .15s; }
.inicio2 .in2-block-mods a:hover .in2-block-go { opacity:1; transform:none; }
/* La tarjeta disponible es un ENLACE al cuadro de mando del bloque (0/bloque.php); los módulos van como lista, no como enlaces */
.inicio2 a.in2-block { text-decoration:none; color:inherit; cursor:pointer; }
.inicio2 a.in2-block:focus-visible { outline:2px solid var(--in2-accent); outline-offset:3px; }
.inicio2 .in2-block-mods li { display:flex; align-items:center; gap:9px; padding:4px 2px; font-size:.76rem; font-weight:550; color:var(--bs-body-color); }
.inicio2 .in2-block-mods li > i { width:16px; text-align:center; color:var(--in2-accent); font-size:.8rem; }
/* Cuadro de mando de un bloque (0/bloque.php): cabecera con el icono del bloque; el carril de agenda va siempre abierto */
.inicio2 .in2-bloque-head { display:flex; align-items:center; gap:18px; min-width:0; }
.inicio2 .in2-bloque-head .in2-block-icon { width:64px; height:64px; border-radius:20px; font-size:1.7rem; flex-shrink:0; }
.inicio2.inicio2-bloque .in2-workspace-agenda { margin-top:8px; }
.inicio2.inicio2-bloque .in2-module-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.inicio2 .in2-block-count { margin-top:auto; padding-top:8px; font-size:.62rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--bs-secondary-color); }
/* Bloque NO contratado por el centro (ningún módulo suyo en centrosxmodulos): fondo rayado gris, sin color ni elevación */
.inicio2 .in2-block-off { --in2-accent:var(--bs-secondary-color); color:var(--bs-secondary-color); border-style:dashed; background:repeating-linear-gradient(135deg,var(--bs-tertiary-bg) 0 8px,var(--isg-surface) 8px 18px); }
.inicio2 .in2-block-off::before { background:var(--bs-border-color); }
.inicio2 .in2-block-off .in2-block-icon { background:var(--bs-tertiary-bg); color:var(--bs-secondary-color); box-shadow:none; border:1px solid var(--bs-border-color); }
.inicio2 .in2-block-off .in2-block-marca { color:color-mix(in srgb,var(--bs-secondary-color) 10%,transparent); }
.inicio2 .in2-block-off h3 { color:var(--bs-secondary-color); }
.inicio2 .in2-block-off:hover { transform:none; box-shadow:none; border-color:var(--bs-border-color); }
@media(max-width:1400px) { .inicio2 .in2-block-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1000px) { .inicio2 .in2-block-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .inicio2 .in2-block-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
@media(max-width:460px) { .inicio2 .in2-block-grid { grid-template-columns:1fr; } .inicio2 .in2-block { min-height:0; padding:18px; } }
.inicio2 .in2-hero .in4-scope-note[hidden] { display:none; }
/* ── Hero ESTRECHO de 0/index_2.php (`in2-hero-slim`, 2026-09-29) ─────────────
   Peticion de Juan Miguel: en la portada de bloques el hero se queda SOLO con el
   saludo. Sin titular, sin botones y sin notas, la banda de 34px de alto sobraba.
   🔴 Clase PROPIA, no un cambio en `.in4-hero`: ese hero lo comparte la portada
   `0/index.php`, que si lleva titular, anillo grande y mascota. */
.inicio2 .in2-hero-slim .in4-hero { padding:14px 28px; gap:18px; align-items:center; }
.inicio2 .in2-hero-slim .in4-hello { margin:0; font-size:clamp(1.3rem,1.9vw,1.9rem); }
.inicio2 .in2-hero-slim .in4-hero-visual { gap:16px; }
.inicio2 .in2-hero-slim .in4-ring { width:86px; height:86px; }
.inicio2 .in2-hero-slim .in4-ring-core strong { font-size:1.25rem; }
.inicio2 .in2-hero-slim .in4-ring-core span { font-size:.5rem; letter-spacing:.08em; margin-top:2px; }
.inicio2 .in2-hero-slim .in4-mascot-stage { width:86px; height:86px; box-shadow:0 0 0 5px color-mix(in srgb,var(--bs-white) 10%,transparent),0 10px 24px color-mix(in srgb,var(--bs-black) 30%,transparent); }
/* El bocadillo de la mascota es texto: fuera, que el saludo es el unico que se queda. */
.inicio2 .in2-hero-slim .in4-bubble { display:none; }
@media(max-width:600px) { .inicio2 .in2-hero-slim .in4-hero { padding:14px 18px; gap:12px; } .inicio2 .in2-hero-slim .in4-ring, .inicio2 .in2-hero-slim .in4-mascot-stage { width:64px; height:64px; } }
/* Carril del calendario plegado por defecto (columna a 0); con .in2-agenda-open pasa a 30 % y los bloques se desplazan a la izquierda, como el panel de ISORGI */
.inicio2 .in2-workspace.in2-workspace-agenda { grid-template-columns:minmax(0,1fr) 0fr; gap:0; transition:grid-template-columns .35s ease,gap .35s ease; }
.inicio2 .in2-workspace.in2-workspace-agenda.in2-agenda-open { grid-template-columns:minmax(0,7fr) minmax(0,3fr); gap:24px; }
.inicio2 .in2-workspace-agenda .in2-rail { opacity:0; transform:translateX(24px); overflow:hidden; transition:opacity .3s ease .05s,transform .35s ease; }
.inicio2 .in2-workspace-agenda.in2-agenda-open .in2-rail { opacity:1; transform:none; overflow:visible; }
.inicio2 .in2-workspace-agenda.in2-sin-anim, .inicio2 .in2-workspace-agenda.in2-sin-anim .in2-rail { transition:none !important; }
.inicio2 .in2-heading-tools { display:flex; align-items:center; gap:10px; }
.inicio2 .in2-agenda-toggle { width:42px; height:42px; padding:0; display:grid; place-items:center; border-radius:12px; font-size:1.05rem; }
.inicio2 .in2-agenda-toggle[aria-pressed=true] { background:var(--bs-primary); color:var(--bs-white); }
.inicio2 .in2-workspace-agenda .in2-modules { margin-top:0; min-width:0; }
.inicio2 .in2-workspace-agenda .in2-module-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.inicio2 .in2-rail { display:grid; gap:24px; min-width:0; align-content:start; }
@media(max-width:1200px) { .inicio2 .in2-workspace.in2-workspace-agenda.in2-agenda-open { grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:16px; } }
@media(max-width:950px) { .inicio2 .in2-workspace.in2-workspace-agenda, .inicio2 .in2-workspace.in2-workspace-agenda.in2-agenda-open { grid-template-columns:1fr; gap:16px; } .inicio2 .in2-workspace-agenda .in2-rail { order:-1; transform:none; } }
@media(max-width:600px) { .inicio2 .in2-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .inicio2 .in2-kpi { padding:16px; } .inicio2 .in2-kpi strong { font-size:2rem; } .inicio2 .in2-isorgi { padding:18px; gap:12px; } .inicio2 .in2-isorgi img { width:65px; height:65px; } .inicio2 .in2-isorgi-copy { min-width:150px; } .inicio2 .in2-panel-heading { flex-wrap:wrap; } .inicio2 .fc .fc-header-toolbar { flex-wrap:wrap; gap:12px; } .inicio2 .fc .fc-toolbar-title { font-size:.95rem; } .inicio2 .in2-footnote { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .inicio2 * { transition:none !important; scroll-behavior:auto !important; } }
/* Inicio «Tu día» (0/index_4.php) — portada candidata. Todo bajo .inicio4. */
.inicio4 { --in4-deep:color-mix(in srgb,var(--isg-accent) 24%,var(--bs-black)); --in4-paper:var(--bs-white); --in4-muted:color-mix(in srgb,var(--bs-white) 70%,transparent); --in4-overdue:var(--bs-danger); --in4-today:var(--isg-accent); --in4-week:var(--bs-success); --in4-undated:var(--bs-orange); --in4-radius:22px; max-width:1500px; margin:0 auto; padding:6px 0 40px; color:var(--bs-body-color); }
.inicio4 [hidden] { display:none !important; }
.inicio4 button { text-transform:uppercase; }
.inicio4 :focus-visible { outline:2px solid var(--isg-accent); outline-offset:3px; }
.inicio4 .in4-note { font-size:.8rem; color:var(--bs-secondary-color); margin:8px 0 0; }
.inicio4 .in4-g-legal { --in4-mod:var(--bs-primary); }.inicio4 .in4-g-industrial { --in4-mod:var(--bs-success); }.inicio4 .in4-g-gestion { --in4-mod:var(--bs-warning-text-emphasis); }.inicio4 .in4-g-documentos { --in4-mod:var(--bs-info-text-emphasis); }.inicio4 .in4-g-personas { --in4-mod:var(--bs-purple); }
@keyframes in4-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes in4-ping { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--bs-success) 60%,transparent); } 80%,100% { box-shadow:0 0 0 10px transparent; } }
@keyframes in4-dot { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
@keyframes in4-shimmer { from { background-position:-200px 0; } to { background-position:calc(200px + 100%) 0; } }
@keyframes in4-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
/* Cabecera */
.inicio4 .in4-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; padding:34px 38px; border-radius:var(--in4-radius); color:var(--in4-paper); background:radial-gradient(ellipse at 85% 10%,color-mix(in srgb,var(--isg-accent) 45%,transparent),transparent 60%),radial-gradient(ellipse at 10% 120%,color-mix(in srgb,var(--bs-purple) 30%,transparent),transparent 55%),var(--in4-deep); border:1px solid var(--isg-border); animation:in4-rise .5s ease-out both; }
.inicio4 .in4-hero::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(color-mix(in srgb,var(--bs-white) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--bs-white) 5%,transparent) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(100deg,transparent 20%,black); }
.inicio4 .in4-hero-copy, .inicio4 .in4-hero-visual { position:relative; z-index:1; min-width:0; }
.inicio4 .in4-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--in4-muted); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.inicio4 .in4-pulse { width:8px; height:8px; border-radius:50%; background:var(--bs-success); animation:in4-ping 2s infinite; }
.inicio4 .in4-hello { color:var(--in4-paper); font-size:clamp(1.6rem,2.6vw,2.7rem); font-weight:600; letter-spacing:-.04em; line-height:1.1; margin:18px 0 10px; }
.inicio4 .in4-hello strong { font-weight:700; color:color-mix(in srgb,var(--isg-accent) 35%,var(--bs-white)); }
.inicio4 .in4-headline { min-height:1.6em; font-size:clamp(1rem,1.35vw,1.3rem); line-height:1.45; color:var(--in4-paper); margin:0 0 24px; max-width:620px; }
.inicio4 .in4-headline span { animation:in4-rise .45s ease-out both; display:inline-block; }
.inicio4 .in4-dots { display:inline-flex !important; gap:4px; margin-left:8px; animation:none !important; }.inicio4 .in4-dots i { width:5px; height:5px; border-radius:50%; background:currentColor; animation:in4-dot 1.2s infinite; }.inicio4 .in4-dots i:nth-child(2) { animation-delay:.15s; }.inicio4 .in4-dots i:nth-child(3) { animation-delay:.3s; }
.inicio4 .in4-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.inicio4 .in4-segment { display:flex; padding:4px; border-radius:40px; background:color-mix(in srgb,var(--bs-white) 10%,transparent); border:1px solid color-mix(in srgb,var(--bs-white) 20%,transparent); }
.inicio4 .in4-segment button { border:0; border-radius:40px; padding:8px 16px; background:transparent; color:var(--in4-muted); font-size:.7rem; font-weight:650; letter-spacing:.04em; transition:background .2s,color .2s; }
.inicio4 .in4-segment button[aria-pressed=true] { background:var(--in4-paper); color:var(--in4-deep); }
.inicio4 .in4-waiting, .inicio4 .in4-ask { display:inline-flex; align-items:center; gap:8px; border-radius:40px; padding:6px 16px 6px 6px; font-size:.7rem; font-weight:650; border:1px solid color-mix(in srgb,var(--bs-white) 25%,transparent); color:var(--in4-paper); background:color-mix(in srgb,var(--bs-white) 8%,transparent); transition:background .2s,transform .2s; }
.inicio4 .in4-waiting:hover, .inicio4 .in4-ask:hover { background:color-mix(in srgb,var(--bs-white) 18%,transparent); color:var(--in4-paper); transform:translateY(-1px); }
.inicio4 .in4-waiting-n { display:grid; place-items:center; min-width:26px; height:26px; padding:0 6px; border-radius:20px; background:var(--bs-danger); color:var(--bs-white); font-weight:700; }
.inicio4 .in4-ask img { width:26px; height:26px; object-fit:contain; }
.inicio4 .in4-scope-note { margin:14px 0 0; font-size:.7rem; color:var(--in4-muted); }
.inicio4 .in4-hero-visual { display:flex; align-items:center; gap:26px; }
.inicio4 .in4-ring { position:relative; width:150px; height:150px; flex-shrink:0; }
.inicio4 .in4-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.inicio4 .in4-ring-track { fill:none; stroke:color-mix(in srgb,var(--bs-white) 14%,transparent); stroke-width:10; }
.inicio4 .in4-ring-arc { fill:none; stroke-width:10; stroke-linecap:round; animation:in4-rise .6s ease-out both; }
.inicio4 .in4-arc-overdue { stroke:var(--in4-overdue); }.inicio4 .in4-arc-today { stroke:color-mix(in srgb,var(--isg-accent) 60%,var(--bs-white)); }.inicio4 .in4-arc-week { stroke:var(--in4-week); }.inicio4 .in4-arc-undated { stroke:var(--in4-undated); }
.inicio4 .in4-ring-core { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.inicio4 .in4-ring-core strong { font-size:2.2rem; font-weight:650; line-height:1; letter-spacing:-.04em; }.inicio4 .in4-ring-core span { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--in4-muted); margin-top:4px; }
.inicio4 .in4-mascot { position:relative; margin:0; display:flex; flex-direction:column; align-items:center; }
.inicio4 .in4-mascot-stage { width:170px; height:170px; border-radius:50%; overflow:hidden; background:var(--in4-paper); box-shadow:0 0 0 8px color-mix(in srgb,var(--bs-white) 10%,transparent),0 18px 40px color-mix(in srgb,var(--bs-black) 35%,transparent); animation:in4-float 5s ease-in-out infinite; }
.inicio4 .in4-mascot-stage video { width:100%; height:100%; object-fit:cover; display:block; }
.inicio4 .in4-mascot[data-state=alert] .in4-mascot-stage { box-shadow:0 0 0 8px color-mix(in srgb,var(--bs-danger) 35%,transparent),0 18px 40px color-mix(in srgb,var(--bs-black) 35%,transparent); }
.inicio4 .in4-mascot[data-state=clear] .in4-mascot-stage { box-shadow:0 0 0 8px color-mix(in srgb,var(--bs-success) 35%,transparent),0 18px 40px color-mix(in srgb,var(--bs-black) 35%,transparent); }
.inicio4 .in4-bubble { position:relative; margin-top:14px; padding:7px 14px; border-radius:14px; background:var(--in4-paper); color:var(--in4-deep); font-size:.72rem; font-weight:650; white-space:nowrap; animation:in4-rise .4s ease-out both; }
.inicio4 .in4-bubble::before { content:''; position:absolute; top:-6px; left:50%; width:12px; height:12px; background:inherit; transform:translateX(-50%) rotate(45deg); }
.inicio4 .in4-coverage { margin:16px 0 0; }
/* Foco */
.inicio4 .in4-focus { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.inicio4 .in4-focus-card { --in4-c:var(--isg-accent); position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; text-align:left; padding:18px 20px 22px; border:1px solid var(--isg-border); border-radius:18px; background:var(--isg-surface); color:var(--bs-body-color); transition:transform .18s,border-color .18s,box-shadow .18s; animation:in4-rise .5s ease-out both; }
.inicio4 .in4-focus-card:nth-child(2) { animation-delay:.05s; }.inicio4 .in4-focus-card:nth-child(3) { animation-delay:.1s; }.inicio4 .in4-focus-card:nth-child(4) { animation-delay:.15s; }
.inicio4 .in4-b-overdue { --in4-c:var(--in4-overdue); }.inicio4 .in4-b-today { --in4-c:var(--in4-today); }.inicio4 .in4-b-week { --in4-c:var(--in4-week); }.inicio4 .in4-b-undated { --in4-c:var(--in4-undated); }
.inicio4 .in4-focus-card:hover { transform:translateY(-3px); border-color:var(--in4-c); box-shadow:0 10px 24px color-mix(in srgb,var(--in4-c) 18%,transparent); }
.inicio4 .in4-focus-card[aria-pressed=true] { border-color:var(--in4-c); background:color-mix(in srgb,var(--in4-c) 9%,var(--isg-surface)); box-shadow:inset 0 0 0 1px var(--in4-c); }
.inicio4 .in4-focus-icon { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; border-radius:14px; color:var(--in4-c); background:color-mix(in srgb,var(--in4-c) 13%,transparent); font-size:1.1rem; }
.inicio4 .in4-focus-text { display:flex; flex-direction:column; min-width:0; }
.inicio4 .in4-focus-text strong { font-size:2rem; font-weight:650; line-height:1; letter-spacing:-.04em; }
.inicio4 .in4-focus-text span { font-size:.72rem; letter-spacing:.06em; color:var(--bs-secondary-color); margin-top:4px; }
.inicio4 .in4-focus-bar { position:absolute; left:0; right:0; bottom:0; height:4px; background:color-mix(in srgb,var(--in4-c) 12%,transparent); }
.inicio4 .in4-focus-bar i { display:block; height:100%; background:var(--in4-c); transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.inicio4 .in4-b-overdue:not(.in4-zero) .in4-focus-text strong { color:var(--in4-overdue); }
.inicio4 .in4-zero { opacity:.72; }
/* Paneles */
.inicio4 .in4-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.inicio4 .in4-side { display:flex; flex-direction:column; gap:18px; }
.inicio4 .in4-panel { border:1px solid var(--isg-border); border-radius:var(--in4-radius); background:var(--isg-surface); padding:22px; animation:in4-rise .5s .1s ease-out both; }
.inicio4 .in4-panel-head, .inicio4 .in4-section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.inicio4 .in4-section-head { flex-direction:column; gap:2px; margin:34px 0 14px; }
.inicio4 .in4-panel h2, .inicio4 .in4-section-head h2 { font-size:1.15rem; font-weight:650; letter-spacing:-.02em; margin:0; }
.inicio4 .in4-panel-head p, .inicio4 .in4-section-head p { font-size:.78rem; color:var(--bs-secondary-color); margin:4px 0 0; }
.inicio4 .in4-filter-note { font-size:.75rem; font-weight:600; color:var(--isg-accent); margin:-4px 0 10px; text-transform:capitalize; }
.inicio4 .in4-list { display:flex; flex-direction:column; }
.inicio4 .in4-list-group { font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-secondary-color); margin:14px 0 6px; display:flex; align-items:center; gap:8px; }
.inicio4 .in4-list-group::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--bs-secondary-color); }
.inicio4 .in4-list-group:first-child { margin-top:0; }
.inicio4 .in4-lg-overdue { color:var(--in4-overdue); }.inicio4 .in4-lg-overdue::before { background:var(--in4-overdue); }.inicio4 .in4-lg-today::before { background:var(--in4-today); }.inicio4 .in4-lg-week::before { background:var(--in4-week); }.inicio4 .in4-lg-undated::before { background:var(--in4-undated); }
.inicio4 .in4-item { --in4-mod:var(--isg-accent); display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; margin:0 -12px; border-radius:14px; color:var(--bs-body-color); text-decoration:none; transition:background .15s,transform .15s; animation:in4-rise .35s ease-out both; }
.inicio4 .in4-item:hover { background:var(--isg-hover-bg); transform:translateX(3px); color:var(--bs-body-color); }
.inicio4 .in4-item-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:var(--in4-mod); background:color-mix(in srgb,var(--in4-mod) 12%,transparent); }
.inicio4 .in4-item-body { display:flex; flex-direction:column; min-width:0; }
.inicio4 .in4-item-body strong { font-size:.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inicio4 .in4-item-meta { font-size:.7rem; color:var(--bs-secondary-color); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inicio4 .in4-item-when { font-size:.7rem; font-weight:650; padding:4px 10px; border-radius:20px; background:var(--bs-tertiary-bg); color:var(--bs-secondary-color); white-space:nowrap; }
.inicio4 .in4-i-overdue .in4-item-when { background:color-mix(in srgb,var(--in4-overdue) 13%,transparent); color:var(--in4-overdue); }
.inicio4 .in4-i-today .in4-item-when { background:color-mix(in srgb,var(--in4-today) 15%,transparent); color:var(--isg-accent); }
.inicio4 .in4-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 10px; color:var(--bs-secondary-color); font-size:.85rem; }
.inicio4 .in4-empty img { animation:in4-float 4s ease-in-out infinite; margin-bottom:10px; }
.inicio4 .in4-skeleton { display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:center; padding:10px 0; }
.inicio4 .in4-skeleton i, .inicio4 .in4-skeleton span, .inicio4 .in4-tile-loading { display:block; border-radius:10px; background:linear-gradient(90deg,var(--bs-tertiary-bg) 0,var(--isg-hover-bg) 50%,var(--bs-tertiary-bg) 100%) no-repeat var(--bs-tertiary-bg); background-size:200px 100%; animation:in4-shimmer 1.3s linear infinite; }
.inicio4 .in4-skeleton i { height:38px; }.inicio4 .in4-skeleton span { height:14px; width:70%; }
.inicio4 #in4-more { margin-top:12px; }
/* 14 días */
.inicio4 .in4-days { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:4px; align-items:end; }
.inicio4 .in4-day { display:flex; flex-direction:column; align-items:center; gap:3px; border:0; border-radius:10px; padding:4px 0; background:transparent; color:var(--bs-body-color); min-width:0; transition:background .15s; }
.inicio4 .in4-day:not(:disabled):hover, .inicio4 .in4-day[aria-pressed=true] { background:var(--isg-hover-bg); }
.inicio4 .in4-day:disabled { cursor:default; }
.inicio4 .in4-day-n { font-size:.6rem; font-weight:700; min-height:1em; color:var(--isg-accent); }
.inicio4 .in4-day-bar { position:relative; width:10px; height:70px; border-radius:6px; background:var(--bs-tertiary-bg); overflow:hidden; }
.inicio4 .in4-day-bar i { position:absolute; left:0; right:0; bottom:0; border-radius:6px; background:linear-gradient(180deg,color-mix(in srgb,var(--isg-accent) 55%,var(--bs-white)),var(--isg-accent)); transition:height .7s cubic-bezier(.2,.8,.2,1); }
.inicio4 .in4-day[aria-pressed=true] .in4-day-bar i { background:var(--bs-purple); }
.inicio4 .in4-day-w { font-size:.58rem; text-transform:uppercase; color:var(--bs-secondary-color); }
.inicio4 .in4-day-d { font-size:.72rem; font-weight:650; }
.inicio4 .in4-day-weekend .in4-day-d, .inicio4 .in4-day-weekend .in4-day-w { opacity:.55; }
.inicio4 .in4-day-today .in4-day-d { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--isg-accent); color:var(--bs-white); }
/* ISORGI */
.inicio4 .in4-isorgi { background:radial-gradient(ellipse at 100% 0,var(--isg-active-bg),transparent 60%),var(--isg-surface); }
.inicio4 .in4-isorgi-head { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.inicio4 .in4-isorgi-head img { width:48px; height:48px; object-fit:contain; animation:in4-float 4s ease-in-out infinite; }
.inicio4 .in4-isorgi-head p { font-size:.74rem; color:var(--bs-secondary-color); margin:2px 0 0; line-height:1.45; }
.inicio4 .in4-beta { font-size:.55rem; letter-spacing:.1em; padding:2px 6px; border-radius:6px; background:var(--bs-tertiary-bg); color:var(--bs-secondary-color); vertical-align:middle; }
.inicio4 .in4-chips { display:flex; flex-wrap:wrap; gap:8px; }
.inicio4 .in4-chip { border:1px solid var(--isg-border); border-radius:30px; padding:7px 13px; background:var(--isg-surface); color:var(--bs-body-color); font-size:.65rem; font-weight:650; letter-spacing:.03em; transition:border-color .15s,background .15s,transform .15s; animation:in4-rise .35s ease-out both; }
.inicio4 .in4-chip:hover { border-color:var(--isg-accent); background:var(--isg-hover-bg); transform:translateY(-1px); }
/* Módulos */
.inicio4 .in4-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.inicio4 .in4-launch-few .in4-tiles { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.inicio4 .in4-tile { --in4-mod:var(--isg-accent); position:relative; display:flex; flex-direction:column; border:1px solid var(--isg-border); border-radius:18px; background:var(--isg-surface); overflow:hidden; transition:transform .18s,border-color .18s,box-shadow .18s; animation:in4-rise .45s ease-out both; }
.inicio4 .in4-tile:nth-child(2) { animation-delay:.04s; }.inicio4 .in4-tile:nth-child(3) { animation-delay:.08s; }.inicio4 .in4-tile:nth-child(4) { animation-delay:.12s; }.inicio4 .in4-tile:nth-child(n+5) { animation-delay:.16s; }
.inicio4 .in4-tile::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--in4-mod); }
.inicio4 .in4-tile:hover { transform:translateY(-4px); border-color:var(--in4-mod); box-shadow:0 14px 30px color-mix(in srgb,var(--in4-mod) 16%,transparent); }
.inicio4 .in4-tile-hot::after { content:''; position:absolute; top:14px; right:14px; width:9px; height:9px; border-radius:50%; background:var(--bs-danger); box-shadow:0 0 0 0 var(--bs-danger); animation:in4-ping 1.8s infinite; }
.inicio4 .in4-tile-main { display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-areas:"icon name" "icon stat"; gap:2px 12px; align-items:center; padding:18px 18px 14px; color:var(--bs-body-color); text-decoration:none; flex:1; }
.inicio4 .in4-launch-few .in4-tile-main { grid-template-columns:1fr; grid-template-areas:"icon" "name" "stat"; gap:10px; padding:24px 22px 18px; }
.inicio4 .in4-tile-icon { grid-area:icon; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:var(--in4-mod); background:color-mix(in srgb,var(--in4-mod) 12%,transparent); font-size:1.05rem; transition:transform .25s; }
.inicio4 .in4-launch-few .in4-tile-icon { width:54px; height:54px; font-size:1.35rem; }
.inicio4 .in4-tile:hover .in4-tile-icon { transform:rotate(-6deg) scale(1.06); }
.inicio4 .in4-tile-name { grid-area:name; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; line-height:1.3; }
.inicio4 .in4-launch-few .in4-tile-name { font-size:.9rem; }
.inicio4 .in4-tile-stat { grid-area:stat; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; min-height:1.4em; font-size:.7rem; color:var(--bs-secondary-color); }
.inicio4 .in4-tile-stat strong { font-size:1.05rem; color:var(--bs-body-color); }
.inicio4 .in4-launch-few .in4-tile-stat strong { font-size:1.6rem; letter-spacing:-.03em; }
.inicio4 .in4-tile-stat em { font-style:normal; font-weight:650; color:var(--bs-danger); }
.inicio4 .in4-tile-ok { color:var(--bs-success); font-weight:650; }.inicio4 .in4-tile-ok::before { content:'✓ '; }
.inicio4 .in4-tile-loading { width:80px; height:12px; }
.inicio4 .in4-tile-subs { display:flex; flex-wrap:wrap; gap:4px 12px; padding:10px 18px 14px; border-top:1px solid var(--isg-border); font-size:.64rem; letter-spacing:.04em; text-transform:uppercase; }
.inicio4 .in4-tile-subs a { color:var(--bs-secondary-color); text-decoration:none; }.inicio4 .in4-tile-subs a:hover { color:var(--in4-mod); }
/* Calendario plegable */
.inicio4 .in4-calendar { margin-top:22px; padding:0; }
.inicio4 .in4-calendar summary { display:flex; justify-content:space-between; align-items:center; list-style:none; cursor:pointer; padding:18px 22px; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.inicio4 .in4-calendar summary::-webkit-details-marker { display:none; }
.inicio4 .in4-calendar summary .fa-chevron-down { transition:transform .2s; }.inicio4 .in4-calendar[open] summary .fa-chevron-down { transform:rotate(180deg); }
.inicio4 .in4-calendar[open] { padding-bottom:22px; }.inicio4 .in4-calendar #in4-calendar, .inicio4 .in4-calendar #in4-calendar-state { margin:0 22px; }
.inicio4 .fc { --fc-border-color:var(--bs-border-color); --fc-today-bg-color:var(--bs-primary-bg-subtle); --fc-neutral-bg-color:var(--bs-tertiary-bg); --fc-page-bg-color:var(--isg-surface); --fc-list-event-hover-bg-color:var(--bs-tertiary-bg); font-size:.78rem; }
.inicio4 .fc .fc-toolbar-title { font-size:1.1rem; }.inicio4 .fc .fc-button { background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); color:var(--bs-body-color); font-size:.65rem; text-transform:uppercase; box-shadow:none; }.inicio4 .fc .fc-button-active { background:var(--bs-primary) !important; color:var(--bs-white) !important; }.inicio4 .fc a { color:inherit; text-decoration:none; }
.inicio4 .fc .in4-cal-event { --in4-mod:var(--isg-accent); border:0; border-left:3px solid var(--in4-mod); background:var(--bs-tertiary-bg); border-radius:4px; padding:2px 3px; }.inicio4 .fc .in4-cal-event .fc-event-main { color:var(--bs-body-color); }
.inicio4 .in4-footnote { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:22px; font-size:.72rem; color:var(--bs-secondary-color); }
@media(max-width:1200px) { .inicio4 .in4-hero { grid-template-columns:1fr; }.inicio4 .in4-hero-visual { justify-content:flex-start; } .inicio4 .in4-grid { grid-template-columns:minmax(0,1fr) 300px; } }
@media(max-width:950px) { .inicio4 .in4-grid { grid-template-columns:1fr; } .inicio4 .in4-side { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .inicio4 .in4-focus { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .inicio4 .in4-hero { padding:24px 20px; border-radius:18px; gap:18px; } .inicio4 .in4-hero-visual { gap:16px; } .inicio4 .in4-ring { width:110px; height:110px; } .inicio4 .in4-ring-core strong { font-size:1.6rem; } .inicio4 .in4-mascot-stage { width:110px; height:110px; } .inicio4 .in4-bubble { white-space:normal; text-align:center; max-width:140px; } .inicio4 .in4-focus { gap:10px; } .inicio4 .in4-focus-card { padding:14px 14px 18px; gap:10px; } .inicio4 .in4-focus-icon { width:36px; height:36px; } .inicio4 .in4-focus-text strong { font-size:1.5rem; } .inicio4 .in4-panel { padding:16px; } .inicio4 .in4-item { grid-template-columns:34px minmax(0,1fr); } .inicio4 .in4-item-when { grid-column:2; justify-self:start; } .inicio4 .in4-day-bar { width:7px; height:56px; } .inicio4 .in4-tiles, .inicio4 .in4-launch-few .in4-tiles { grid-template-columns:1fr; } .inicio4 .in4-launch-few .in4-tile-main { grid-template-columns:54px minmax(0,1fr); grid-template-areas:"icon name" "icon stat"; } }
@media(max-width:380px) { .inicio4 .in4-hero-visual { flex-direction:column; align-items:flex-start; } .inicio4 .in4-days { gap:1px; } }
@media(prefers-reduced-motion:reduce) { .inicio4 *, .inicio4 *::before, .inicio4 *::after { animation:none !important; transition:none !important; } }
/* M12 · mapa de procesos 3D (piloto). */
.mp3d-shell {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 1.5rem;
    color: var(--isg-text);
}
/* Vive en la barra del título, junto a los botones de la página: misma altura que un .btn. */
.mp3d-view-controls {
    display: flex;
    gap: .25rem;
    padding: .15rem;
    border: 1px solid var(--isg-border);
    background: var(--isg-surface);
    border-radius: var(--bs-border-radius);
}
.mp3d-view-controls button {
    min-height: 2rem;
    border: 0;
    border-radius: .55rem;
    padding: 0 .85rem;
    background: transparent;
    color: var(--isg-text-muted);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.mp3d-view-controls button[aria-pressed="true"] {
    color: var(--bs-white);
    background: var(--isg-accent);
}
.mp3d-workspace {
    position: relative;
    min-height: 43.75rem;
    border: 1px solid var(--isg-border);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--bs-info) 9%, transparent), transparent 44%),
        var(--isg-surface);
    box-shadow: var(--isg-active-shadow);
    overflow: hidden;
}
.mp3d-statusbar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--isg-border);
    color: var(--isg-text-muted);
    font-size: .72rem;
}
.mp3d-metric {
    display: flex;
    align-items: baseline;
    gap: .45rem;
}
.mp3d-metric strong {
    color: var(--isg-text);
    font-size: 1.1rem;
}
.mp3d-metric b { color: var(--bs-success); }
.mp3d-status-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.mp3d-live-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--bs-success);
    box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--bs-success) 14%, transparent);
}
.mp3d-scene {
    position: relative;
    height: 40rem;
    perspective: 90rem;
    perspective-origin: 50% 38%;
    transition: height .35s ease;
}
.mp3d-building {
    position: absolute;
    width: 56.875rem;
    height: 32.5rem;
    left: 50%;
    top: 48%;
    transform-style: preserve-3d;
    transform-origin: center;
    transform: translate(-50%, -50%) rotateX(57deg) rotateZ(-30deg);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.mp3d-floor {
    --mp3d-z: 0;
    --mp3d-accent: var(--bs-info);
    position: absolute;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    transform: translateZ(var(--mp3d-z));
    padding: .9rem;
    border: 2px solid color-mix(in srgb, var(--mp3d-accent) 88%, var(--isg-surface));
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--mp3d-accent) 7%, var(--isg-surface));
    box-shadow:
        0 0 0 .5rem color-mix(in srgb, var(--mp3d-accent) 8%, transparent),
        0 1.65rem 0 color-mix(in srgb, var(--mp3d-accent) 55%, var(--isg-border-solid)),
        0 2.2rem 2.1rem color-mix(in srgb, var(--isg-text) 22%, transparent);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .35s ease;
}
.mp3d-floor::after {
    content: "";
    position: absolute;
    left: .65rem;
    right: .65rem;
    bottom: -1.1rem;
    height: 1rem;
    border-radius: 0 0 .75rem .75rem;
    background: color-mix(in srgb, var(--mp3d-accent) 66%, var(--isg-border-solid));
    transform: rotateX(-90deg);
    transform-origin: top;
}
.mp3d-floor-support {
    --mp3d-accent: var(--bs-info);
    --mp3d-z: 0;
    width: 53.75rem;
    height: 26.25rem;
    left: 1.6rem;
    top: 5.1rem;
}
.mp3d-floor-operation {
    --mp3d-accent: var(--bs-warning);
    --mp3d-z: 5.75rem;
    width: 45.625rem;
    height: 20rem;
    left: 5.7rem;
    top: 4.9rem;
}
.mp3d-floor-strategy {
    --mp3d-accent: var(--bs-success);
    --mp3d-z: 11.5rem;
    width: 51.25rem;
    height: 13.75rem;
    left: 2.9rem;
    top: 4.75rem;
}
.mp3d-floor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-bottom: .75rem;
    color: var(--mp3d-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.mp3d-floor-head small {
    color: var(--isg-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .63rem;
    letter-spacing: 0;
}
.mp3d-rooms {
    display: grid;
    grid-template-columns: repeat(var(--mp3d-columns), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: .65rem;
    min-height: 0;
    flex: 1;
}
.mp3d-columns-1 { --mp3d-columns: 1; }
.mp3d-columns-2 { --mp3d-columns: 2; }
.mp3d-columns-3 { --mp3d-columns: 3; }
.mp3d-columns-4 { --mp3d-columns: 4; }
.mp3d-columns-5 { --mp3d-columns: 5; }
.mp3d-process {
    position: relative;
    min-width: 0;
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--bs-success) 38%, var(--isg-border));
    border-radius: .7rem;
    padding: .8rem;
    text-align: left;
    color: var(--isg-text);
    background: linear-gradient(145deg, color-mix(in srgb, var(--bs-success) 11%, var(--isg-surface)), var(--isg-surface));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bs-white) 55%, transparent), 0 .45rem .75rem color-mix(in srgb, var(--isg-text) 13%, transparent);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.mp3d-process::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: .25rem;
    background: var(--mp3d-accent);
}
.mp3d-process:hover {
    border-color: var(--mp3d-accent);
    background: color-mix(in srgb, var(--mp3d-accent) 9%, var(--isg-surface));
    transform: translateY(-.2rem);
}
.mp3d-code {
    display: block;
    margin-bottom: .55rem;
    color: var(--mp3d-accent);
    font: 600 .62rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mp3d-process strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: .76rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: uppercase;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.mp3d-pilot {
    position: absolute;
    right: .6rem;
    bottom: .5rem;
    left: .8rem;
    overflow: hidden;
    color: var(--isg-text-muted);
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp3d-empty {
    display: grid;
    place-items: center;
    min-height: 5rem;
    flex: 1;
    color: var(--isg-text-muted);
    font-size: .78rem;
}
.mp3d-scene[data-view="explode"] .mp3d-building {
    transform: translate(-50%, -50%) rotateX(59deg) rotateZ(-31deg) scale(.9);
}
.mp3d-scene[data-view="explode"] .mp3d-floor-support { transform: translate3d(-4.5rem, 4.5rem, 0); }
.mp3d-scene[data-view="explode"] .mp3d-floor-operation { transform: translate3d(0, 0, 8.75rem); }
.mp3d-scene[data-view="explode"] .mp3d-floor-strategy { transform: translate3d(4.25rem, -4.25rem, 17.5rem); }
.mp3d-scene[data-view="front"] {
    height: auto;
    min-height: 43.75rem;
    padding: 1.5rem;
}
.mp3d-scene[data-view="front"] .mp3d-building {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0 auto;
    transform: none;
    display: grid;
    gap: 1.1rem;
}
.mp3d-scene[data-view="front"] .mp3d-floor {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 10rem;
    transform: none;
    box-shadow: 0 .75rem 1.6rem color-mix(in srgb, var(--isg-text) 14%, transparent);
}
.mp3d-scene[data-view="front"] .mp3d-floor::after { display: none; }
.mp3d-scene[data-view="front"] .mp3d-floor-strategy { order: 1; }
.mp3d-scene[data-view="front"] .mp3d-floor-operation { order: 2; }
.mp3d-scene[data-view="front"] .mp3d-floor-support { order: 3; }
.mp3d-scene[data-view="front"] .mp3d-process { min-height: 7rem; }
.mp3d-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.15rem;
    padding: 1.1rem 1.25rem 1.35rem;
    border-top: 1px solid var(--isg-border);
    color: var(--isg-text-muted);
    font-size: .68rem;
}
.mp3d-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.mp3d-legend-item i {
    width: 1.1rem;
    height: .3rem;
    border-radius: .3rem;
    background: var(--mp3d-legend-color);
}
.mp3d-legend-strategy { --mp3d-legend-color: var(--bs-success); }
.mp3d-legend-operation { --mp3d-legend-color: var(--bs-warning); }
.mp3d-legend-support { --mp3d-legend-color: var(--bs-info); }
.mp3d-legend-note { margin-left: auto; }
.mp3d-list-panel { min-width: 0; scroll-margin-top: 6rem; }
.mp3d-list-panel[hidden] { display: none; }
.mp3d-list-panel .table-responsive { max-width: 100%; }
.mp3d-list-panel td { white-space: normal; overflow-wrap: anywhere; }
.mp3d-drawer {
    position: absolute;
    z-index: 10;
    top: 3.65rem;
    right: 0;
    bottom: 0;
    width: min(24.5rem, 100%);
    min-height: 0;
    max-height: min(40rem, calc(100% - 3.65rem), calc(100dvh - 8rem));
    padding: 1rem;
    box-sizing: border-box;
    background: var(--isg-surface);
    border-left: 1px solid var(--isg-border);
    box-shadow: -1.9rem 0 4.4rem color-mix(in srgb, var(--isg-text) 22%, transparent);
    transform: translateX(105%);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    overflow-wrap: anywhere;
    visibility: hidden;
    pointer-events: none;
}
.mp3d-drawer.open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
}
.mp3d-close {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-left: auto;
    border: 1px solid var(--isg-border);
    border-radius: 50%;
    color: var(--isg-text);
    background: transparent;
    cursor: pointer;
}
.mp3d-drawer-code {
    color: var(--bs-success);
    font: 600 .68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mp3d-drawer h2 {
    margin: .65rem 0 .5rem;
    font-size: 1.35rem;
    line-height: 1.08;
    letter-spacing: -.04em;
}
.mp3d-drawer p {
    color: var(--isg-text-muted);
    line-height: 1.4;
    font-size: .82rem;
}
.mp3d-detail-list {
    display: grid;
    gap: 1px;
    margin-top: .75rem;
    border-top: 1px solid var(--isg-border);
}
.mp3d-detail-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: .9rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--isg-border);
    font-size: .78rem;
}
.mp3d-detail-row span { color: var(--isg-text-muted); }
.mp3d-detail-row strong { text-align: right; }
.mp3d-drawer-actions {
    display: flex;
    align-items: stretch;
    gap: .6rem;
    margin-top: .85rem;
}
.mp3d-pdf-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.65rem;
    padding-inline: 0;
}
.mp3d-shell :focus-visible {
    outline: 3px solid var(--isg-accent);
    outline-offset: 3px;
}
@media (max-width: 61.25rem) {
    .mp3d-scene:not([data-view="front"]) .mp3d-building {
        transform: translate(-50%, -50%) rotateX(57deg) rotateZ(-30deg) scale(.77);
    }
    .mp3d-scene[data-view="explode"] .mp3d-building {
        transform: translate(-50%, -50%) rotateX(59deg) rotateZ(-31deg) scale(.68);
    }
}
@media (max-width: 43.75rem) {
    .mp3d-shell { padding: .75rem 0 1.5rem; }
    .mp3d-view-controls { width: 100%; float: none !important; }
    .mp3d-view-controls button { flex: 1; padding: 0 .3rem; }
    .mp3d-statusbar { align-items: flex-start; }
    .mp3d-status-right span { display: none; }
    .mp3d-workspace { min-height: 0; border-radius: 1.1rem; }
    .mp3d-scene,
    .mp3d-scene[data-view="explode"],
    .mp3d-scene[data-view="front"] {
        height: auto;
        min-height: 0;
        padding: .8rem;
    }
    .mp3d-scene .mp3d-building {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        margin: 0;
        transform: none;
        display: grid;
        gap: .8rem;
    }
    .mp3d-scene .mp3d-floor {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        transform: none;
        box-shadow: 0 .6rem 1.25rem color-mix(in srgb, var(--isg-text) 14%, transparent);
    }
    .mp3d-scene .mp3d-floor::after { display: none; }
    .mp3d-scene .mp3d-floor-strategy { order: 1; }
    .mp3d-scene .mp3d-floor-operation { order: 2; }
    .mp3d-scene .mp3d-floor-support { order: 3; }
    .mp3d-scene .mp3d-rooms { grid-template-columns: 1fr; }
    .mp3d-scene .mp3d-process { min-height: 5.5rem; }
    .mp3d-legend-note { width: 100%; margin-left: 0; }
    .mp3d-drawer { top: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mp3d-shell *,
    .mp3d-shell *::before,
    .mp3d-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ── «Ir a…» (Ctrl K / ⌘ K) · app/includes/ir_a.php · 2026-09-17 ───────────
   Traído de gmao.isorga.com y audit.isorga.com: botón de cabecera con la tecla
   dibujada y un diálogo nativo con el fondo desenfocado. Solo tokens del tema,
   así que vale igual en Blueprint y en HUD. Abierto a toda sesión con centro. */
.isg-ir-a-boton {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 2.25rem; padding: .3rem .7rem; margin-right: .5rem;
    background: var(--isg-surface); color: var(--isg-text-muted);
    border: 1px solid var(--isg-border); border-radius: 12px;
    font-size: .84rem; line-height: 1; cursor: pointer;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
.isg-ir-a-boton:hover, .isg-ir-a-boton:focus-visible {
    color: var(--isg-accent); border-color: var(--isg-accent);
    box-shadow: 0 4px 12px rgba(var(--isg-accent-rgb), .15); outline: none;
}
.isg-ir-a-boton kbd {
    background: var(--isg-bg); color: var(--isg-text-muted);
    border: 1px solid var(--isg-border); border-radius: 4px;
    font-family: var(--isg-font-mono); font-size: .68rem; padding: 2px 5px; box-shadow: none;
}
@media (max-width: 767.98px) { .isg-ir-a-boton-texto, .isg-ir-a-boton kbd { display: none; } }

dialog.isg-ir-a {
    width: min(560px, calc(100% - 28px)); max-height: 80dvh; padding: 24px;
    background: var(--isg-surface); color: var(--isg-text);
    border: 1px solid var(--isg-border); border-radius: 22px;
    box-shadow: 0 12px 24px rgba(20, 44, 72, .13), 0 32px 70px rgba(20, 44, 72, .08);
}
dialog.isg-ir-a[open] { display: flex; flex-direction: column; animation: isg-ir-a-entrar .16s ease-out; }
dialog.isg-ir-a::backdrop { background: rgba(18, 35, 60, .53); backdrop-filter: blur(5px); }
@keyframes isg-ir-a-entrar { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.isg-ir-a-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.isg-ir-a-cabeza h2 { font-size: 1.45rem; letter-spacing: -.03em; margin: 0; color: var(--isg-text); }
.isg-ir-a-eyebrow { font-size: .7rem; letter-spacing: .13em; font-weight: 700; color: var(--isg-accent); margin: 0 0 6px; text-transform: uppercase; }
.isg-ir-a-cerrar { min-width: 40px; min-height: 40px; border-radius: 10px; }
dialog.isg-ir-a .form-control { min-height: 48px; font-size: 1rem; border-radius: 11px; }
.isg-ir-a-resultados { display: grid; gap: 6px; margin-top: 14px; overflow-y: auto; min-height: 0; }
.isg-ir-a-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border-radius: 12px; text-decoration: none; color: var(--isg-text);
    background: var(--isg-bg); border: 1px solid transparent;
}
.isg-ir-a-item[hidden] { display: none; }
.isg-ir-a-item i { color: var(--isg-accent); }
.isg-ir-a-item small { display: block; color: var(--isg-text-muted); font-size: .72rem; }
.isg-ir-a-item:hover, .isg-ir-a-item.is-activo { background: var(--isg-hover-bg); border-color: var(--isg-accent); color: var(--isg-text); }
.isg-ir-a-vacio { margin: 16px 0 0; color: var(--isg-text-muted); }
.isg-ir-a-ayuda { margin: 16px 0 0; color: var(--isg-text-muted); font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { dialog.isg-ir-a[open] { animation: none; } }

/* M21 · organigrama por plazas. Árbol interactivo, compatible con ambos temas. */
.m21-org2 .min-w-0 { min-width: 0; }
.m21-org2-stat { display: flex; align-items: center; gap: 1rem; }
.m21-org2-stat > i {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border-radius: 14px; color: var(--isg-accent);
    background: rgba(var(--isg-accent-rgb), .1); font-size: 1.15rem;
}
.m21-org2-stat strong { display: block; color: var(--isg-text); font-size: 1.45rem; line-height: 1.1; }
.m21-org2-stat span { display: block; color: var(--isg-text-muted); font-size: .78rem; margin-top: .2rem; }
.m21-org2-tree, .m21-org2-tree ul { list-style: none; margin: 0; padding: 0; }
.m21-org2-tree ul {
    position: relative; margin-left: 1.45rem; padding-left: 1.35rem;
    border-left: 2px solid var(--isg-border);
}
.m21-org2-item { position: relative; margin: 0 0 .8rem; }
.m21-org2-tree ul > .m21-org2-item::before {
    content: ""; position: absolute; left: -1.35rem; top: 1.75rem;
    width: 1rem; border-top: 2px solid var(--isg-border);
}
.m21-org2-item[hidden], .m21-org2-item.is-collapsed > ul { display: none !important; }
.m21-org2-node {
    position: relative; padding: 1rem; border: 1px solid var(--isg-border);
    border-left: 4px solid var(--isg-accent); border-radius: 14px;
    background: var(--isg-surface); color: var(--isg-text);
    box-shadow: 0 4px 14px rgba(var(--isg-accent-rgb), .06);
}
.m21-org2-node.is-root {
    border-left-width: 6px;
    background: linear-gradient(135deg, rgba(var(--isg-accent-rgb), .09), var(--isg-surface));
}
.m21-org2-item.is-search-match > .m21-org2-node {
    border-color: var(--isg-accent);
    box-shadow: 0 0 0 3px rgba(var(--isg-accent-rgb), .12);
}
.m21-org2-node-head { display: flex; align-items: flex-start; gap: .7rem; }
.m21-org2-toggle, .m21-org2-toggle-spacer { flex: 0 0 2rem; width: 2rem; height: 2rem; }
.m21-org2-toggle {
    display: grid; place-items: center; padding: 0; color: var(--isg-accent);
    background: var(--isg-hover-bg); border: 1px solid var(--isg-border);
}
.m21-org2-toggle i { transition: transform .16s ease; }
.m21-org2-item:not(.is-collapsed) > .m21-org2-node .m21-org2-toggle i { transform: rotate(90deg); }
.m21-org2-code {
    color: var(--isg-accent); font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.m21-org2-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.m21-org2-actions .btn { white-space: nowrap; }
.m21-org2-occupants {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .55rem; margin: .85rem 0 0 2.7rem;
}
.m21-org2-person, .m21-org2-vacant {
    padding: .6rem .7rem; border-radius: 10px;
    background: var(--isg-surface-soft, var(--bs-tertiary-bg));
}
.m21-org2-person > div:first-child { font-weight: 600; }
.m21-org2-person a { color: inherit; text-decoration: none; }
.m21-org2-person a:hover { color: var(--isg-accent); }
.m21-org2-vacant { color: var(--isg-text-muted); font-style: italic; }
.m21-org2-contact { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .3rem; font-size: .76rem; }
.m21-org2-contact a { display: inline-flex; align-items: center; gap: .3rem; color: var(--isg-text-muted); }
.m21-org2-finish { display: flex; align-items: center; gap: .35rem; margin-top: .55rem; }
.m21-org2-finish .form-control { width: auto; min-width: 9rem; }
@media (max-width: 767.98px) {
    .m21-org2-tree ul { margin-left: .55rem; padding-left: .75rem; }
    .m21-org2-tree ul > .m21-org2-item::before { left: -.75rem; width: .55rem; }
    .m21-org2-node-head { flex-wrap: wrap; }
    .m21-org2-actions { width: 100%; padding-left: 2.7rem; justify-content: flex-start; }
    .m21-org2-actions .btn span { display: none; }
    .m21-org2-occupants { grid-template-columns: 1fr; margin-left: 0; }
}

/* La vista vertical reutiliza las mismas plazas y deja desplazarse por ramas amplias. */
.m21-org2-grafo .m21-org2-canvas { overflow: auto; }
.m21-org2-grafo .m21-org2-tree,
.m21-org2-grafo .m21-org2-tree ul {
    display: flex; justify-content: center; width: max-content;
    margin: 0; border: 0;
}
.m21-org2-grafo .m21-org2-tree { min-width: 100%; padding: .5rem 0 1rem; }
.m21-org2-grafo .m21-org2-tree ul { position: relative; padding: 28px 0 0; }
.m21-org2-grafo .m21-org2-tree ul::before {
    content: ""; position: absolute; top: 0; left: 50%; height: 28px;
    border-left: 2px solid var(--isg-border);
}
.m21-org2-grafo .m21-org2-item {
    display: flex; flex-direction: column; align-items: center;
    margin: 0; padding: 28px 12px 0;
}
.m21-org2-grafo .m21-org2-tree > .m21-org2-item { padding-top: 0; }
.m21-org2-grafo .m21-org2-tree ul > .m21-org2-item::before,
.m21-org2-grafo .m21-org2-tree ul > .m21-org2-item::after {
    content: ""; position: absolute; top: 0; height: 28px; width: 50%;
    border-top: 2px solid var(--isg-border);
}
.m21-org2-grafo .m21-org2-tree ul > .m21-org2-item::before {
    left: 0; border-right: 2px solid var(--isg-border);
}
.m21-org2-grafo .m21-org2-tree ul > .m21-org2-item::after { right: 0; }
.m21-org2-grafo .m21-org2-tree ul > .m21-org2-item:first-child::before,
.m21-org2-grafo .m21-org2-tree ul > .m21-org2-item:last-child::after {
    border-top: 0;
}
.m21-org2-grafo .m21-org2-node {
    box-sizing: border-box; width: 270px; height: 190px; overflow: auto;
    border-left-width: 1px; border-top: 4px solid var(--isg-accent);
    padding: .8rem; text-align: left;
}
.m21-org2-grafo .m21-org2-node.is-root { border-left-width: 1px; }
.m21-org2-grafo .m21-org2-node-head { flex-wrap: nowrap; gap: .45rem; }
.m21-org2-grafo .m21-org2-node h2 { font-size: 1rem; line-height: 1.25; }
.m21-org2-grafo .m21-org2-actions,
.m21-org2-grafo .m21-org2-contact,
.m21-org2-grafo .m21-org2-finish { display: none; }
.m21-org2-grafo .m21-org2-occupants {
    grid-template-columns: 1fr; gap: .35rem; margin: .55rem 0 0;
}
.m21-org2-grafo .m21-org2-person,
.m21-org2-grafo .m21-org2-vacant { padding: .4rem .55rem; font-size: .85rem; }


/* =====================================================================
   M26 · CAE — utilidades del panel del módulo                (2026-09-28)
   ---------------------------------------------------------------------
   🔴 POR QUÉ ESTÁ AQUÍ Y NO EN UN FICHERO SUYO: §0.3 dice que el único CSS
   personalizado permitido es este fichero. El lado centro del CAE llegó de
   cae.isorga.com con su propio `dashboard.css`, y en vez de traer un segundo
   fichero —o de reescribir la pantalla, que no era el encargo— sus reglas
   entran aquí como utilidades `.cae-*`.

   🔴 Y NO se han copiado tal cual: sus tokens estaban en el tema del CAE, que
   salió de este mismo fichero en su día. Se han remapeado uno a uno:
     --accent → --isg-accent · --bg → --isg-bg · --border → --isg-border ·
     --surface → --isg-surface · --text → --isg-text · --glow-accent → …
   Y los siete que aquí no existían, a la variable que significa lo mismo:
     --accent-soft → --isg-hover-bg · --surface-raised → --isg-card-bg ·
     --state-success → --bs-success-bg-subtle · --state-danger → …
   ⚠️ Las `subtle` de Bootstrap cambian solas con `data-bs-theme`, así que el
   modo oscuro funciona sin escribir una segunda regla para cada una.

   El único color fijo que traía el original (#d29922, el ámbar del semáforo)
   se queda: es el ámbar del CAE, no un color de marca.
   ===================================================================== */
/* Dashboard CAE: las piezas de un panel — el hero, las tarjetas de KPI y las
   cabeceras de panel.

   🔴 LA CARGAN DOS PANTALLAS, UNA POR MUNDO (v1.095): `/cae/index.php`, que es
   el panel del centro, y `/cae/portal_index.php`, que es el del contratista.
   Las dos son paneles de entrada y se pintan con las mismas piezas; mantener
   una segunda hoja que dijera lo mismo es como se acaba con dos estéticas que
   divergen. Es la misma decisión que llevó `intranet.css` al portal en la
   v1.060: se comparte la MECÁNICA, nunca el contenido (§2 de CLAUDE.md) — lo
   que cada panel enseña lo decide su fichero, y no hay aquí ni una regla que
   pregunte en qué mundo está.

   Todo cuelga de `.cae-dashboard`, así que cargarla no afecta a nada más. */
.cae-dashboard {
    --dash-amber: #d29922;
    display: grid;
    gap: 1rem;
}
.cae-dash-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 170px;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    color: var(--isg-text);
    background:
        radial-gradient(circle at 88% 15%, var(--isg-hover-bg) 0, transparent 34%),
        linear-gradient(135deg, var(--isg-surface) 0%, var(--isg-card-bg) 100%);
    border: 1px solid var(--isg-border);
    clip-path: var(--isg-clip-card);
}
.cae-dash-hero::after {
    content: "";
    position: absolute;
    right: -72px;
    bottom: -105px;
    width: 250px;
    height: 250px;
    border: 28px solid var(--isg-hover-bg);
    border-radius: 50%;
    pointer-events: none;
}
.cae-dash-hero-copy { position: relative; z-index: 1; max-width: 760px; }
.cae-dash-eyebrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
    color: var(--isg-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cae-dash-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
/* `h1` y `h2` se visten igual: el panel del centro usa `h2` porque
   `app/template.php` ya le pone un `h1` encima, y el del portal usa `h1`
   porque ahí el hero ES el título de la página (v1.095). */
.cae-dash-hero h1,
.cae-dash-hero h2 {
    margin: 0 0 .6rem;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.035em;
}
.cae-dash-hero p { max-width: 680px; margin: 0; color: var(--isg-text-muted); line-height: 1.6; }
.cae-dash-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.15rem;
}
.cae-dash-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.cae-dash-alert {
    position: relative;
    z-index: 1;
    flex: 0 0 158px;
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 116px;
    padding: 1rem;
    text-align: center;
    background: var(--isg-surface);
    border: 1px solid var(--bs-danger-border-subtle);
    box-shadow: var(--isg-glow-accent);
    clip-path: var(--isg-clip-card);
}
.cae-dash-alert.is-clear { border-color: var(--bs-success-border-subtle); }
.cae-dash-alert strong { color: var(--bs-danger-bg-subtle); font-size: 2rem; line-height: 1; }
.cae-dash-alert.is-clear strong { color: var(--bs-success-bg-subtle); }
.cae-dash-alert span { margin-top: .45rem; color: var(--isg-text-muted); font-size: .75rem; line-height: 1.35; }
.cae-dashboard .cae-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    border: 1px solid var(--isg-border) !important;
    clip-path: var(--isg-clip-card);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cae-dashboard a:hover .cae-kpi-card,
.cae-dashboard a:focus-visible .cae-kpi-card {
    border-color: var(--isg-accent) !important;
    box-shadow: var(--isg-active-shadow) !important;
    transform: translateY(-3px);
}
.cae-kpi-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0 auto .55rem;
    color: var(--kpi-color, var(--isg-accent));
    background: color-mix(in srgb, var(--kpi-color, var(--isg-accent)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--kpi-color, var(--isg-accent)) 28%, transparent);
    border-radius: 10px;
}
.cae-kpi-value { color: var(--kpi-color, var(--isg-accent)); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.cae-kpi-arrow { position: absolute; top: .8rem; right: .9rem; color: var(--isg-text-muted); font-size: .8rem; }
.cae-dashboard a:hover .cae-kpi-arrow { color: var(--isg-accent); }
.cae-dashboard .cae-panel-card {
    overflow: hidden;
    border: 1px solid var(--isg-border) !important;
    clip-path: var(--isg-clip-card);
}
.cae-dashboard .cae-panel-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 60px;
    background: var(--isg-card-bg) !important;
}
.cae-panel-heading { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cae-panel-heading > i { color: var(--isg-accent); }
.cae-panel-heading strong { display: block; font-size: .9rem; }
.cae-panel-heading small { display: block; margin-top: .15rem; color: var(--isg-text-muted); font-size: .7rem; }
.cae-panel-link { flex: 0 0 auto; color: var(--isg-accent); font-size: .75rem; font-weight: 700; text-decoration: none; }
.cae-panel-link:hover { color: var(--isg-accent-strong); }
.cae-status-wrap {
    display: grid;
    grid-template-columns: 116px 1fr;
    align-items: center;
    gap: 1.15rem;
}
.cae-status-ring {
    --green-end: 0%;
    --amber-end: 0%;
    position: relative;
    display: grid;
    place-items: center;
    width: 116px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(
        var(--bs-success-bg-subtle) 0 var(--green-end),
        var(--dash-amber) var(--green-end) var(--amber-end),
        var(--bs-danger-bg-subtle) var(--amber-end) 100%
    );
}
.cae-status-ring.is-empty { background: var(--isg-card-bg); border: 1px solid var(--isg-border); }
.cae-status-ring::before {
    content: "";
    position: absolute;
    width: 74px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--isg-surface);
}
.cae-status-ring-value { position: relative; z-index: 1; text-align: center; }
.cae-status-ring-value strong { display: block; font-size: 1.45rem; line-height: 1; }
.cae-status-ring-value small {
    color: var(--isg-text-muted);
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cae-status-list { display: grid; }
.cae-status-list > div:last-child { border-bottom: 0 !important; }
.cae-dash-tools { display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem; border-bottom: 1px solid var(--isg-border); }
.cae-dash-search { position: relative; flex: 1 1 260px; max-width: 440px; }
.cae-dash-search > i {
    position: absolute;
    left: .8rem;
    top: 50%;
    color: var(--isg-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}
.cae-dash-search input {
    width: 100%;
    min-height: 38px;
    padding: .45rem 2.3rem .45rem 2.35rem;
    color: var(--isg-text);
    background: var(--isg-bg);
    border: 1px solid var(--isg-border);
    border-radius: 8px;
    font-size: .8rem;
}
.cae-dash-search input:focus { outline: none; border-color: var(--isg-accent); box-shadow: 0 0 0 3px var(--isg-hover-bg); }
.cae-dash-search button {
    position: absolute;
    top: 50%;
    right: .45rem;
    display: none;
    padding: .2rem .35rem;
    color: var(--isg-text-muted);
    background: transparent;
    border: 0;
    transform: translateY(-50%);
}
.cae-dash-search button.is-visible { display: block; }
.cae-dash-results { margin-left: auto; color: var(--isg-text-muted); font-size: .72rem; white-space: nowrap; }
.cae-dashboard .table-responsive { overflow-x: auto; }
.cae-dashboard .table { font-size: .8rem; }
.cae-dashboard .table > :not(caption) > * > * { padding: .72rem .8rem; }
.cae-dashboard tr[data-dashboard-row] { cursor: pointer; }
.cae-dashboard tr[data-dashboard-row]:focus { outline: 2px solid var(--isg-accent); outline-offset: -2px; }
.cae-filter-empty { padding: 1.3rem; color: var(--isg-text-muted); font-size: .8rem; text-align: center; }
@media (max-width: 700px) {
    .cae-dash-hero { align-items: stretch; flex-direction: column; }
    .cae-dash-alert { display: flex; justify-content: center; gap: .55rem; min-height: auto; flex-basis: auto; }
    .cae-dash-alert span { margin-top: 0; text-align: left; }
    .cae-dash-tools { align-items: stretch; flex-direction: column; }
    .cae-dash-search { flex-basis: auto; max-width: none; }
    .cae-dash-results { margin-left: 0; }
}
@media (max-width: 420px) {
    .cae-status-wrap { grid-template-columns: 1fr; justify-items: center; }
    .cae-status-list { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cae-dashboard * { transition: none !important; }
}


/* ---------------------------------------------------------------------
   M26 · CAE — utilidades de las pantallas del lote L2        (2026-09-29)
   Mismo criterio que el bloque de arriba (§0.3): las reglas vienen de
   `accesos.css` y `cae.css` del CAE, con sus tokens remapeados a los de aquí.
   🔴 Se han traído SOLO las reglas de las clases que las pantallas usan de
   verdad, no los dos ficheros enteros: engordar el tema con CSS muerto es
   tan malo como tener un segundo fichero.
   --------------------------------------------------------------------- */
/* Vista de accesos: evacuación a la izquierda, diario a la derecha e histórico debajo. */
.cae-access-layout {
    display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(0, 1.65fr);
    grid-template-areas:
        "inside register"
        "stays stays";
    gap: 1rem;
    align-items: stretch;
}
.cae-access-layout > .card {
    min-width: 0;
    margin-bottom: 0 !important;
    border: 1px solid var(--isg-border) !important;
    clip-path: var(--isg-clip-card);
}
.cae-access-inside { grid-area: inside; }
.cae-access-register { grid-area: register; }
.cae-access-stays { grid-area: stays; }
.cae-access-layout .card-header {
    min-height: 62px;
    background: var(--isg-card-bg) !important;
}
.cae-access-title {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.cae-access-title strong { font-size: .92rem; }
.cae-access-title small { color: var(--isg-text-muted); font-size: .7rem; font-weight: 400; }
.cae-access-count {
    min-width: 2rem;
    padding: .3rem .55rem;
    color: var(--bs-body-bg);
    background: var(--isg-accent);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    text-align: center;
}
.cae-access-inside .card-body,
.cae-access-register .card-body {
    max-height: 620px;
    overflow: auto;
}
.cae-access-layout .table-responsive { overflow-x: auto; }
.cae-access-layout .table { font-size: .78rem; }
.cae-access-layout .table > :not(caption) > * > * { padding: .68rem .72rem; }
.cae-access-layout thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--isg-card-bg) !important;
}
/* En la columna izquierda cada persona se lee como una ficha compacta. No se
   oculta ningún dato operativo aunque el espacio sea estrecho. */
.cae-access-inside table,
.cae-access-inside tbody { display: block; width: 100%; }
.cae-access-inside thead { display: none; }
.cae-access-inside tbody { display: grid; gap: .6rem; padding: .35rem; }
.cae-access-inside tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .18rem .8rem;
    padding: .8rem .85rem;
    background: var(--isg-card-bg);
    border: 1px solid var(--isg-border);
    border-left: 3px solid var(--isg-accent);
}
.cae-access-inside tbody tr:has(.text-danger) { border-left-color: var(--bs-danger-bg-subtle); }
.cae-access-inside tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
    padding: .18rem 0 !important;
    background: transparent !important;
    border: 0;
}
.cae-access-inside tbody td::before {
    flex: 0 0 auto;
    color: var(--isg-text-muted);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cae-access-inside tbody td:nth-child(1),
.cae-access-inside tbody td:nth-child(2) { grid-column: 1 / -1; justify-content: flex-start; }
.cae-access-inside tbody td:nth-child(1) { color: var(--isg-text); font-size: .88rem; font-weight: 700; }
.cae-access-inside tbody td:nth-child(1)::before { content: none; }
.cae-access-inside tbody td:nth-child(2)::before { content: 'Empresa'; }
.cae-access-inside tbody td:nth-child(3)::before { content: 'Documento'; }
.cae-access-inside tbody td:nth-child(4)::before { content: 'Acceso'; }
.cae-access-inside tbody td:nth-child(5)::before { content: 'Destino'; }
.cae-access-inside tbody td:nth-child(6)::before { content: 'Entró'; }
.cae-access-inside tbody td:nth-child(7)::before { content: 'Lleva'; }
.cae-access-tabs {
    gap: .25rem;
    border: 0;
}
.cae-access-tabs .nav-link {
    padding: .45rem .75rem;
    color: var(--isg-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.cae-access-tabs .nav-link:hover { color: var(--isg-accent); border-color: var(--isg-border); }
.cae-access-tabs .nav-link.active {
    color: var(--bs-body-bg);
    background: var(--isg-accent);
    border-color: var(--isg-accent);
}
.cae-access-empty {
    padding: 2rem 1rem;
    color: var(--isg-text-muted);
    font-size: .82rem;
    text-align: center;
}
.cae-access-duration { white-space: nowrap; }
.cae-access-now {
    display: inline-block;
    min-width: 1.7rem;
    padding: .18rem .4rem;
    color: var(--bs-success-bg-subtle);
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
    border-radius: 999px;
    font-weight: 700;
    text-align: center;
}
@media (max-width: 1100px) {
    .cae-access-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "inside"
            "register"
            "stays";
    }
    .cae-access-inside .card-body,
    .cae-access-register .card-body { max-height: 520px; }
}
@media (max-width: 650px) {
    .cae-access-stays .card-header {
        align-items: stretch !important;
        flex-direction: column;
    }
    .cae-access-tabs { width: 100%; }
    .cae-access-tabs .nav-item { flex: 1; }
    .cae-access-tabs .nav-link { width: 100%; }
}
/* ── Texto con formato escrito por el usuario (v1.037) ──────────────────
   «Trabajo a realizar» admite negrita, subrayado, listas y tablas. Lo que
   se guarda está saneado con lista blanca (cae_html_seguro()), así que se
   pinta sin escapar; esto solo le da un aspecto coherente con el resto.
   El editor del modal comparte estilos: es el mismo contenido. */
.cae-texto-formato > *:first-child,
.cae-editor > *:first-child { margin-top: 0; }
.cae-texto-formato > *:last-child,
.cae-editor > *:last-child { margin-bottom: 0; }
.cae-texto-formato ul, .cae-texto-formato ol,
.cae-editor ul, .cae-editor ol { padding-left: 1.3rem; margin-bottom: .5rem; }
.cae-texto-formato table, .cae-editor table {
    width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .92em;
}
.cae-texto-formato th, .cae-texto-formato td,
.cae-editor th, .cae-editor td {
    border: 1px solid var(--isg-border); padding: 4px 7px; text-align: left;
}
.cae-texto-formato th, .cae-editor th { background: var(--isg-card-bg); font-weight: 600; }
.cae-texto-formato blockquote, .cae-editor blockquote {
    border-left: 2px solid var(--isg-accent); padding-left: .8rem; margin: .5rem 0; color: var(--isg-text-muted);
}
/* El editor tiene que parecer un campo: alto fijo y foco visible. */
.cae-editor:focus { outline: none; border-color: var(--isg-accent); box-shadow: var(--isg-glow-accent); }
/* ── Zona de arrastrar y soltar para los anexos (v1.048) ────────────────
   El <input type="file"> se esconde (`visually-hidden`, sigue accesible por
   teclado y sigue enviando los ficheros) y esto es lo que se ve. Al soltar,
   el JS mete los ficheros en el input: así el formulario los envía como
   siempre, sin AJAX y sin cambiar nada del servidor. */
.cae-soltar {
    height: 320px;
    border: 2px dashed var(--isg-border);
    background: var(--isg-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    overflow: auto;
    transition: .15s ease;
}
.cae-soltar:hover      { border-color: var(--isg-accent); }
.cae-soltar.is-encima  { border-color: var(--isg-accent); background: var(--isg-hover-bg); }
.cae-soltar-ico        { font-size: 1.8rem; color: var(--isg-accent); opacity: .7; }
.cae-soltar-txt        { font-size: 13px; line-height: 1.6; color: var(--isg-text); }
.cae-soltar-lista      { list-style: none; margin: .4rem 0 0; padding: 0; width: 100%; }
.cae-soltar-lista li {
    display: flex; align-items: center; gap: .5rem;
    font-size: 12.5px; text-align: left;
    padding: 4px 8px; margin-top: 3px;
    background: var(--isg-surface); border: 1px solid var(--isg-border);
}
.cae-soltar-lista li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cae-soltar-lista li small { color: var(--isg-text-muted); white-space: nowrap; }
/* ── Zona baja, para una sola cosa (v1.092) ─────────────────────────────
   Los 320 px de arriba son para los anexos, que se acumulan y necesitan sitio
   donde crecer. Una foto es UNA, y una caja de 320 px vacía dentro de un modal
   pequeño se come la pantalla y empuja el botón de guardar fuera de la vista. */
.cae-soltar.es-baja { height: auto; min-height: 190px; }
/* ── Recuento documental (v1.052) ───────────────────────────────────────
   Sustituye al semáforo en las pantallas de empresa y trabajador. NO es un
   juicio —«puede entrar»— sino un recuento: cuántos papeles hay y cómo
   están. El juicio solo se puede emitir dentro de una actuación. */
.cae-doc-chip {
    display: inline-block;
    border: 1px solid;
    padding: 1px 7px;
    margin: 1px 3px 1px 0;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--isg-surface);
}

/* ── Utilidades `bg-gradient-*` de ISORGA ──────────────────────────────────────
   🔴 Las páginas portadas las usan para la cabecera de sus modales
   (`class="modal-header bg-gradient-primary text-white"`), y en ISORGA viven en
   `assets/css/app.min.css` (el tema Studio), que esta app NO carga. Sin ellas la
   cabecera se queda SIN FONDO y el `text-white` deja el título **blanco sobre
   blanco**: el modal parecía vacío. Medido el 2026-09-30 en copark.isorga.com.
   En ISORGA las usan 47 ficheros, así que se traen, no se cambian las páginas.

   ⚠️ Los valores son los de ISORGA. Allí el degradado va con `-moz-linear-gradient`
   —sólo Firefox—, así que en el resto de navegadores se ve el color plano; aquí se
   añade además la forma estándar, que es la que debió escribirse. El COLOR es el
   mismo en los dos sitios, que es lo que importa para que el texto se lea. */
.bg-gradient-primary   { background-color:#1f6bff !important; background-image:linear-gradient(180deg,#528dff,#065aff) !important; }
.bg-gradient-success   { background-color:#028824 !important; background-image:linear-gradient(180deg,#03ba31,#026f1d) !important; }
.bg-gradient-danger    { background-color:#e6180d !important; background-image:linear-gradient(180deg,#f33c33,#ce150c) !important; }
.bg-gradient-warning   { background-color:#ff9500 !important; background-image:linear-gradient(180deg,#fa3,#e68600) !important; }
.bg-gradient-info      { background-color:#30beff !important; background-image:linear-gradient(180deg,#63ceff,#17b6ff) !important; }
.bg-gradient-secondary { background-color:#c9d2e3 !important; background-image:linear-gradient(180deg,#ebeef4,#b8c4da) !important; }
.bg-gradient-dark      { background-color:#212837 !important; background-image:linear-gradient(180deg,#343f57,#171c27) !important; }

/* ── Utilidades de OPACIDAD de ISORGA ─────────────────────────────────────────
   🔴 Bootstrap 5 solo trae los pasos 10/25/50/75/100. El tema de ISORGA añade
   los intermedios, y las páginas portadas los usan: p. ej. el contador de las
   pestañas de la ficha de acción es
       <span class="badge bg-primary bg-opacity-20 text-primary">
   Sin `bg-opacity-20` el fondo queda AZUL SÓLIDO y el texto es `text-primary`,
   también azul: el número no se lee. Medido el 2026-09-30 en copark.isorga.com.
   Se traen los 22 pasos de ISORGA, no solo el que falla hoy. */
.text-opacity-0 { --bs-text-opacity:0 }
.text-opacity-5 { --bs-text-opacity:0.05 }
.border-opacity-10 { --bs-border-opacity:0.1 }
.text-opacity-15 { --bs-text-opacity:0.15 }
.text-opacity-20 { --bs-text-opacity:0.2 }
.border-opacity-25 { --bs-border-opacity:0.25 }
.text-opacity-30 { --bs-text-opacity:0.3 }
.text-opacity-35 { --bs-text-opacity:0.35 }
.text-opacity-40 { --bs-text-opacity:0.4 }
.text-opacity-45 { --bs-text-opacity:0.45 }
.border-opacity-50 { --bs-border-opacity:0.5 }
.text-opacity-55 { --bs-text-opacity:0.55 }
.text-opacity-60 { --bs-text-opacity:0.6 }
.text-opacity-65 { --bs-text-opacity:0.65 }
.text-opacity-70 { --bs-text-opacity:0.7 }
.border-opacity-75 { --bs-border-opacity:0.75 }
.text-opacity-80 { --bs-text-opacity:0.8 }
.text-opacity-85 { --bs-text-opacity:0.85 }
.text-opacity-90 { --bs-text-opacity:0.9 }
.text-opacity-95 { --bs-text-opacity:0.95 }
.border-opacity-100 { --bs-border-opacity:1 }
.text-opacity-105 { --bs-text-opacity:1.05 }

/* ── …y los mismos pasos para bg-opacity (2026-10-08) ────────────────────────
   🔴 El bloque de arriba trajo 22 pasos de `text-opacity` y `border-opacity`…
   y NINGUNO de `bg-opacity`, que es justo la familia que su propio comentario
   dice que falta. Así que el fallo que describe seguía vivo: en
   legal.isorga.com/legal/estado_si_cumplimiento.php las seis etiquetas de
   estado salían con el texto del MISMO color que el fondo —contraste medido
   1.00, invisible— porque `badge bg-danger bg-opacity-15 text-danger` dejaba el
   fondo rojo sólido. Medido el 2026-10-08 en el navegador con este CSS.
   Alcance entonces: 76 usos de `bg-opacity-15`, 61 de `-20` y 6 de `-30` en
   isorga-net, legal, copark, docs, ot y waste.
   Se añaden los mismos pasos que para el texto; Bootstrap ya trae 10/25/50/75/100. */
.bg-opacity-0   { --bs-bg-opacity:0 }
.bg-opacity-5   { --bs-bg-opacity:.05 }
.bg-opacity-15  { --bs-bg-opacity:.15 }
.bg-opacity-20  { --bs-bg-opacity:.2 }
.bg-opacity-30  { --bs-bg-opacity:.3 }
.bg-opacity-35  { --bs-bg-opacity:.35 }
.bg-opacity-40  { --bs-bg-opacity:.4 }
.bg-opacity-45  { --bs-bg-opacity:.45 }
.bg-opacity-55  { --bs-bg-opacity:.55 }
.bg-opacity-60  { --bs-bg-opacity:.6 }
.bg-opacity-65  { --bs-bg-opacity:.65 }
.bg-opacity-70  { --bs-bg-opacity:.7 }
.bg-opacity-80  { --bs-bg-opacity:.8 }
.bg-opacity-85  { --bs-bg-opacity:.85 }
.bg-opacity-90  { --bs-bg-opacity:.9 }
.bg-opacity-95  { --bs-bg-opacity:.95 }