/*
 * Identidad visual Grupo Vertice.
 * Capa exclusivamente visual: no altera estructura, estados ni comportamiento.
 */
:root {
    --vertice-olive: #545a34;
    --vertice-olive-dark: #363b21;
    --vertice-wine: #67262c;
    --vertice-wine-dark: #47181d;
    --vertice-sand: #dbc4a5;
    --vertice-sand-soft: #efe4d3;
    --vertice-canvas: #f7f4ee;
    --vertice-ink: #25271e;
    --vertice-muted: #686b5d;

    --navy: var(--vertice-olive-dark);
    --blue: var(--vertice-wine);
    --steel: var(--vertice-olive);
    --neutral: #f1ece2;
    --bg: var(--vertice-canvas);
    --surface: #ffffff;
    --surface-soft: #f4f0e8;
    --text: var(--vertice-ink);
    --muted: var(--vertice-muted);
    --success: #3f6b45;
    --warning: #a76524;
    --danger: #a2343d;
    --accent: var(--vertice-wine);
    --color-accent: var(--vertice-wine);
    --border: rgba(84, 90, 52, .20);
    --shadow: 0 14px 36px rgba(54, 59, 33, .08);
    --shadow-lg: 0 22px 58px rgba(54, 59, 33, .16);
    --focus: 0 0 0 3px rgba(103, 38, 44, .22);
    --table-hover: #faf7f1;
    color-scheme: light;
}

html[data-theme="dark"] {
    --navy: #252916;
    --blue: #a85b62;
    --steel: #aeb58d;
    --neutral: #343827;
    --bg: #171a11;
    --surface: #232719;
    --surface-soft: #2d3121;
    --text: #f7f3ea;
    --muted: #c2c5b4;
    --success: #82b88a;
    --warning: #e1ad68;
    --danger: #ed8c94;
    --accent: #d2848b;
    --color-accent: #d2848b;
    --border: rgba(219, 196, 165, .20);
    --shadow: 0 16px 42px rgba(0, 0, 0, .25);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .38);
    --focus: 0 0 0 3px rgba(219, 196, 165, .28);
    --table-hover: #303524;
    color-scheme: dark;
}

body,
.login-page,
.operational-body,
.guard-portal-body {
    background: var(--bg);
    color: var(--text);
}

/* Marca y navegacion */
.sidebar,
.guard-portal-sidebar,
.login-brand,
.wizard-head {
    background: var(--vertice-olive-dark);
}

.brand img,
.brand-lockup img,
.guard-portal-brand img,
.wizard-head img {
    content: url("../images/logo-grupo-vertice.jpeg");
    object-fit: cover;
    object-position: center 18%;
    border-color: rgba(219, 196, 165, .42);
    background: var(--vertice-sand);
    mix-blend-mode: normal;
}

.brand img,
.guard-portal-brand img {
    width: 50px;
    height: 50px;
    padding: 4px;
    border-radius: 14px;
}

.brand-lockup img {
    width: 58px;
    height: 58px;
    padding: 4px;
}

.brand strong,
.brand-lockup strong,
.guard-portal-brand strong {
    letter-spacing: .025em;
}

.brand small,
.brand-lockup small,
.guard-portal-brand small,
.sidebar-foot,
.guard-scope-mini small {
    color: var(--vertice-sand);
}

.sidebar nav,
.guard-portal-sidebar nav {
    scrollbar-color: rgba(219, 196, 165, .44) transparent;
}

.sidebar nav::-webkit-scrollbar-thumb,
.guard-portal-sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(219, 196, 165, .44);
}

.sidebar nav a,
.guard-portal-sidebar nav button {
    color: #d9deca;
}

.sidebar nav a > span:first-child,
.guard-portal-sidebar nav button > span {
    color: var(--vertice-sand);
}

.sidebar nav a:hover,
.sidebar nav a:focus-visible,
.sidebar nav a.active,
.guard-portal-sidebar nav button:hover,
.guard-portal-sidebar nav button.active {
    background: rgba(239, 228, 211, .12);
    color: #fff;
}

.sidebar nav a.active,
.guard-portal-sidebar nav button.active {
    box-shadow: inset 3px 0 var(--vertice-sand);
}

.collapse,
.guard-collapse {
    border-color: rgba(84, 90, 52, .24);
    background: var(--surface);
    color: var(--vertice-olive-dark);
}

/* Cabeceras y superficies */
.topbar,
.guard-portal-top {
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
}

.eyebrow,
.hero-kicker,
.guard-welcome .eyebrow,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .phase11-table th {
    color: var(--vertice-olive);
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .hero-kicker,
html[data-theme="dark"] .guard-welcome .eyebrow {
    color: var(--vertice-sand);
}

.hero,
.guard-welcome {
    background:
        radial-gradient(circle at 88% 10%, rgba(219, 196, 165, .12), transparent 34%),
        var(--vertice-olive-dark);
    box-shadow: var(--shadow-lg);
}

.hero:before,
.hero:after {
    border-color: rgba(219, 196, 165, .13);
}

.hero p,
.guard-welcome p,
.login-brand-copy p {
    color: #d8dccb;
}

.hero > img {
    content: url("../images/logo-grupo-vertice.jpeg");
    width: 142px;
    height: 142px;
    padding: 10px;
    object-fit: cover;
    object-position: center 18%;
    border: 1px solid rgba(219, 196, 165, .36);
    border-radius: 26px;
    background: var(--vertice-sand);
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .25));
}

.login-brand:before,
.login-brand:after {
    border-color: rgba(219, 196, 165, .12);
}

.brand-values {
    color: #d8dccb;
}

.brand-values li:before,
.step.active {
    background: var(--vertice-sand);
}

.page-intro,
.module-intro {
    background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--vertice-sand) 18%, var(--surface)));
}

.module-icon,
.profile-avatar,
.user-chip > span,
.guard-identity > span,
.page-title-icon {
    background: var(--vertice-olive);
    color: #fff;
}

/* Botones, controles y estados */
.submit,
.primary,
.login-submit,
.site-dialog-actions .submit,
html[data-theme="dark"] .submit {
    border-color: var(--vertice-wine);
    background: var(--vertice-wine);
    color: #fff;
    box-shadow: 0 8px 18px rgba(71, 24, 29, .18);
}

.submit:hover:not(:disabled),
.primary:hover:not(:disabled),
.login-submit:hover:not(:disabled) {
    background: var(--vertice-wine-dark);
}

.primary-button {
    background: var(--vertice-wine);
    color: #fff;
}

.primary-button:hover {
    background: var(--vertice-wine-dark);
}

.ghost-button:hover,
.guard-view-more:hover {
    border-color: var(--vertice-olive);
    color: var(--vertice-wine);
}

button,
a,
input,
select,
textarea {
    accent-color: var(--vertice-wine);
}

input:focus,
select:focus,
textarea:focus,
.setting-input input:focus,
.p8-form input:focus,
.p8-form select:focus,
.p8-form textarea:focus,
#roundOpenActions textarea:focus {
    border-color: var(--vertice-wine) !important;
    box-shadow: var(--focus) !important;
}

.notification-button span,
.guard-notification-bell b,
.guard-portal-sidebar nav button b,
.alert-count {
    background: var(--vertice-wine);
    color: #fff;
}

.notification-item.unread i,
.camera-capture > strong:before {
    background: var(--vertice-wine);
}

.notification-item.critical i {
    background: var(--danger);
}

.badge.success {
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    color: var(--success);
}

.badge.warning {
    background: color-mix(in srgb, var(--warning) 14%, var(--surface));
    color: var(--warning);
}

.badge.neutral,
.pin-reveal,
.phase4-note,
.scope-notice,
.validation-banner {
    background: color-mix(in srgb, var(--vertice-sand) 36%, var(--surface));
    color: var(--vertice-olive-dark);
}

/* Tarjetas, tablas y formularios */
.status-card,
.security-card,
.profile-card,
.metric-card,
.settings-toolbar,
.settings-runtime-card,
.settings-group,
.phase7-card,
.offline-review-card,
.storage-card,
.guard-module-grid button,
.operational-card,
.site-dialog,
.organization-dialog,
.phase7-dialog,
.phase8-dialog,
.phase9-dialog,
.login-card,
.wizard-card {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.card-icon,
.settings-group-icon,
.guard-module-grid button > span,
.module-stage > span,
.site-dialog-icon,
.page-title-icon {
    background: color-mix(in srgb, var(--vertice-sand) 45%, var(--surface));
    color: var(--vertice-olive-dark);
}

.ui-action[data-ui-icon="camera"],
.ui-action[data-ui-icon="video"],
.ui-action[data-ui-icon="qr"] {
    border-color: color-mix(in srgb, var(--vertice-wine) 36%, var(--border));
    background: color-mix(in srgb, var(--vertice-wine) 7%, var(--surface));
    color: var(--vertice-wine);
}

.ui-action[data-ui-icon="camera"]:hover,
.ui-action[data-ui-icon="video"]:hover,
.ui-action[data-ui-icon="qr"]:hover {
    border-color: var(--vertice-wine);
    background: color-mix(in srgb, var(--vertice-wine) 13%, var(--surface));
}

.data-table th,
.organization-list th,
.phase8-table th,
.phase11-table th {
    background: color-mix(in srgb, var(--vertice-sand) 34%, var(--surface));
    color: var(--vertice-olive-dark);
}

html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .organization-list th,
html[data-theme="dark"] .phase8-table th,
html[data-theme="dark"] .phase11-table th {
    background: #343827;
    color: var(--vertice-sand);
}

.organization-list tbody tr:hover,
.data-table tbody tr:hover,
.phase8-table tbody tr:hover,
.phase11-table tbody tr:hover {
    background: var(--table-hover);
}

.phase11-workspace code {
    background: var(--vertice-olive-dark);
    color: var(--vertice-sand-soft);
}

progress {
    accent-color: var(--vertice-wine) !important;
}

/* Dialogos, mensajes y carga */
.site-dialog::backdrop,
.organization-dialog::backdrop,
.phase7-dialog::backdrop,
.phase8-dialog::backdrop,
.phase9-dialog::backdrop,
.p8-capture-dialog::backdrop {
    background: rgba(37, 39, 30, .68);
}

.site-toast {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.site-spinner {
    border-color: color-mix(in srgb, var(--vertice-sand) 50%, transparent);
    border-top-color: var(--vertice-wine);
}

.toast {
    background: var(--vertice-olive-dark);
}

/* Portal y acceso del vigilante */
.guard-portal-sidebar {
    background: var(--vertice-olive-dark);
}

.guard-scope-mini {
    border-color: rgba(219, 196, 165, .18);
}

.guard-module-grid button:hover {
    border-color: var(--vertice-olive);
}

.guard-notification.unread {
    border-left-color: var(--vertice-wine);
    background: color-mix(in srgb, var(--vertice-sand) 13%, var(--surface));
}

.operational-card > header,
.guard-access-card > header {
    border-color: var(--border);
}

.p8-capture-dialog,
.phase9-camera {
    background: var(--vertice-olive-dark);
}

/* Modo oscuro: neutraliza azules heredados en componentes tardios. */
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .notification-button,
html[data-theme="dark"] .guard-notification-bell,
html[data-theme="dark"] .theme-control select,
html[data-theme="dark"] .guard-view-more,
html[data-theme="dark"] .guard-notification-dropdown-head button {
    border-color: var(--border);
    background: var(--surface-soft);
    color: var(--text);
}

html[data-theme="dark"] .scope-notice,
html[data-theme="dark"] .p8-preview-list span,
html[data-theme="dark"] .pin-reveal,
html[data-theme="dark"] .validation-banner {
    background: var(--surface-soft);
    color: var(--vertice-sand-soft);
}

html[data-theme="dark"] .ui-action[data-ui-icon="camera"],
html[data-theme="dark"] .ui-action[data-ui-icon="video"],
html[data-theme="dark"] .ui-action[data-ui-icon="qr"] {
    background: color-mix(in srgb, var(--vertice-wine) 24%, var(--surface));
    color: #fff;
}

/* Mantiene el boton movil flotante en la identidad nueva. */
@media (max-width: 900px) {
    .mobile-menu,
    .guard-portal-top .mobile-menu {
        border-color: color-mix(in srgb, #fff 22%, var(--vertice-wine));
        background: var(--vertice-wine);
        box-shadow: 0 14px 34px rgba(71, 24, 29, .32);
    }

    .mobile-menu:hover,
    .mobile-menu:focus-visible,
    .guard-portal-top .mobile-menu:hover,
    .guard-portal-top .mobile-menu:focus-visible {
        background: var(--vertice-wine-dark);
        box-shadow: 0 18px 42px rgba(71, 24, 29, .38);
    }

    .mobile-menu[aria-expanded="true"],
    .guard-portal-top .mobile-menu[aria-expanded="true"] {
        background: var(--vertice-olive-dark);
    }
}

/* Las notificaciones siempre se muestran sobre el contenido del módulo. */
.topbar,
.guard-portal-top {
    position: relative;
    z-index: 200 !important;
    isolation: isolate;
}

.notification-center,
.guard-notification-center {
    position: relative;
    z-index: 220 !important;
}

.notification-dropdown,
.guard-notification-dropdown {
    z-index: 240 !important;
    overflow: auto;
    border-color: var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    opacity: 1 !important;
    box-shadow: 0 22px 60px rgba(54, 59, 33, .3) !important;
}

.app-view,
.hero,
.page-intro {
    position: relative;
    z-index: 0;
}

@media (max-width: 560px) {
    .hero > img {
        width: 92px;
        height: 92px;
        right: 22px;
        bottom: 22px;
        opacity: .72;
    }
}

/* Ajustes de identidad en el acceso operativo del vigilante. */
.operational-brand img {
    content: url("../images/logo-grupo-vertice.jpeg");
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    padding: 5px;
    object-fit: cover;
    object-position: center 18%;
    border: 1px solid rgba(84, 90, 52, .24);
    border-radius: 18px;
    background: var(--vertice-sand);
}

html:not([data-theme="dark"]) .operational-brand,
html:not([data-theme="dark"]) .operational-brand h1 {
    color: var(--vertice-olive-dark);
}

html:not([data-theme="dark"]) .operational-brand p {
    color: var(--vertice-muted);
}

html:not([data-theme="dark"]) .operational-brand .eyebrow {
    color: var(--vertice-wine);
}

html:not([data-theme="dark"]) .guard-access-theme {
    color: var(--vertice-muted);
}

html[data-theme="dark"] .operational-brand,
html[data-theme="dark"] .operational-brand h1 {
    color: #fff;
}

html[data-theme="dark"] .operational-brand p {
    color: #d8dccb;
}

html[data-theme="dark"] .operational-brand .eyebrow {
    color: var(--vertice-sand);
}

/* Iconografia sobre superficies claras: vino institucional. */
html:not([data-theme="dark"]) .page-title-icon,
html:not([data-theme="dark"]) .settings-group-icon,
html:not([data-theme="dark"]) .card-icon,
html:not([data-theme="dark"]) .guard-module-grid button > span,
html:not([data-theme="dark"]) .module-stage > span,
html:not([data-theme="dark"]) .notification-button,
html:not([data-theme="dark"]) .guard-notification-bell {
    border-color: color-mix(in srgb, var(--vertice-wine) 22%, var(--border));
    background: color-mix(in srgb, var(--vertice-wine) 9%, var(--surface));
    color: var(--vertice-wine) !important;
}

html:not([data-theme="dark"]) .ui-action.ghost-button:not([data-ui-icon="delete"]) .ui-icon,
html:not([data-theme="dark"]) .back-link .ui-icon {
    color: var(--vertice-wine);
}

/* Salida principal con el mismo tratamiento vino de las acciones de marca. */
#logoutButton {
    border-color: var(--vertice-wine);
    background: var(--vertice-wine);
    color: #fff;
    box-shadow: 0 7px 16px rgba(71, 24, 29, .16);
}

#logoutButton:hover,
#logoutButton:focus-visible {
    border-color: var(--vertice-wine-dark);
    background: var(--vertice-wine-dark);
    color: #fff;
}

#logoutButton .ui-icon {
    color: #fff !important;
}

/* La hoja de contraste anterior usa !important; estas reglas finales fijan la marca. */
html:not([data-theme="dark"]) .sidebar nav a .ui-nav-icon,
html:not([data-theme="dark"]) .guard-portal-sidebar nav button .ui-nav-icon {
    color: var(--vertice-sand) !important;
}

html:not([data-theme="dark"]) .sidebar nav a:hover .ui-nav-icon,
html:not([data-theme="dark"]) .sidebar nav a:focus-visible .ui-nav-icon,
html:not([data-theme="dark"]) .sidebar nav a.active .ui-nav-icon,
html:not([data-theme="dark"]) .guard-portal-sidebar nav button:hover .ui-nav-icon,
html:not([data-theme="dark"]) .guard-portal-sidebar nav button:focus-visible .ui-nav-icon,
html:not([data-theme="dark"]) .guard-portal-sidebar nav button.active .ui-nav-icon {
    color: #fff !important;
}

html:not([data-theme="dark"]) .module-icon.ui-nav-icon {
    border-color: color-mix(in srgb, var(--vertice-wine) 72%, #fff);
    background: var(--vertice-wine);
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(71, 24, 29, .20);
}

html:not([data-theme="dark"]) .module-icon.ui-nav-icon .ui-icon {
    color: #fff !important;
}

html:not([data-theme="dark"]) .page-title-icon .ui-icon,
html:not([data-theme="dark"]) .settings-group-icon .ui-icon,
html:not([data-theme="dark"]) .card-icon .ui-icon,
html:not([data-theme="dark"]) .guard-module-grid button > span .ui-icon,
html:not([data-theme="dark"]) .module-stage > span .ui-icon {
    color: var(--vertice-wine) !important;
}

/* Contornos de acciones secundarias en modo claro. */
html:not([data-theme="dark"]) .ghost-button:not(.danger-action):not([data-ui-icon="delete"]),
html:not([data-theme="dark"]) .ui-action.ghost-button:not([data-ui-icon="delete"]),
html:not([data-theme="dark"]) .guard-view-more,
html:not([data-theme="dark"]) .toolbar a.ui-action:not([data-ui-icon="delete"]) {
    border-color: color-mix(in srgb, var(--vertice-wine) 62%, var(--surface)) !important;
    color: var(--vertice-wine) !important;
}

html:not([data-theme="dark"]) .ghost-button:not(.danger-action):not([data-ui-icon="delete"]):hover,
html:not([data-theme="dark"]) .ghost-button:not(.danger-action):not([data-ui-icon="delete"]):focus-visible,
html:not([data-theme="dark"]) .ui-action.ghost-button:not([data-ui-icon="delete"]):hover,
html:not([data-theme="dark"]) .ui-action.ghost-button:not([data-ui-icon="delete"]):focus-visible,
html:not([data-theme="dark"]) .guard-view-more:hover,
html:not([data-theme="dark"]) .guard-view-more:focus-visible {
    border-color: var(--vertice-wine) !important;
    background: color-mix(in srgb, var(--vertice-wine) 8%, var(--surface));
    color: var(--vertice-wine-dark) !important;
}

html:not([data-theme="dark"]) .ghost-button:not(.danger-action):not([data-ui-icon="delete"]) .ui-icon,
html:not([data-theme="dark"]) .guard-view-more .ui-icon {
    color: var(--vertice-wine) !important;
}

/* Excepcion de contraste para la salida sobre fondo vino. */
html:not([data-theme="dark"]) #logoutButton,
html:not([data-theme="dark"]) #logoutButton:hover,
html:not([data-theme="dark"]) #logoutButton:focus-visible {
    border-color: var(--vertice-wine) !important;
    background: var(--vertice-wine) !important;
    color: #fff !important;
}

html:not([data-theme="dark"]) #logoutButton:hover,
html:not([data-theme="dark"]) #logoutButton:focus-visible {
    border-color: var(--vertice-wine-dark) !important;
    background: var(--vertice-wine-dark) !important;
}

html:not([data-theme="dark"]) #logoutButton .ui-icon,
html:not([data-theme="dark"]) #logoutButton svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* Ajustes responsive: navegacion flotante, notificaciones visibles y modulos compactos. */
@media (max-width: 900px) {
    .topbar {
        position: sticky;
        z-index: 42;
        top: 0;
    }

    .sidebar,
    .sidebar.collapsed {
        z-index: 41;
        top: 96px;
        height: calc(100dvh - 96px);
    }

    .sidebar-backdrop {
        z-index: 40;
        top: 96px;
    }

    .mobile-menu,
    .topbar .mobile-menu,
    .guard-portal-top .mobile-menu {
        position: fixed !important;
        z-index: 80 !important;
        top: auto !important;
        right: auto !important;
        bottom: max(22px, env(safe-area-inset-bottom)) !important;
        left: max(18px, env(safe-area-inset-left)) !important;
        display: grid !important;
        width: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .app-view:not([data-view="inicio"]) .page-intro {
        min-height: 0;
        margin-bottom: 12px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .app-view:not([data-view="inicio"]) .organization-toolbar {
        gap: 10px;
        margin-bottom: 12px;
    }

    .app-view:not([data-view="inicio"]) .organization-toolbar > div:first-child {
        flex: 0 1 auto;
    }

    .app-view:not([data-view="inicio"]) .organization-actions {
        margin-top: 0;
    }

    .guard-portal-top {
        position: sticky;
        z-index: 42;
        top: 0;
    }

    .guard-portal-sidebar {
        z-index: 41;
        top: 82px;
        height: calc(100dvh - 82px);
    }
}

@media (max-width: 620px) {
    .sidebar,
    .sidebar.collapsed {
        top: 118px;
        height: calc(100dvh - 118px);
    }

    .sidebar-backdrop {
        top: 118px;
    }

    .app-view:not([data-view="inicio"]) .page-intro {
        margin-top: 18px;
        margin-bottom: 10px;
        padding: 18px;
    }

    .app-view:not([data-view="inicio"]) .organization-toolbar {
        gap: 8px;
    }
}

/* Correccion: el encabezado vuelve al flujo; solo el disparador acompana el scroll. */
@media (max-width: 900px) {
    .topbar,
    .guard-portal-top {
        position: relative !important;
        z-index: 5 !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: auto !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .app-shell > main,
    .guard-portal-main {
        padding-top: 0;
    }

    .sidebar,
    .sidebar.collapsed,
    .guard-portal-sidebar {
        top: 0;
        height: 100dvh;
    }

    .sidebar-backdrop {
        top: 0;
    }

    .mobile-menu,
    .topbar .mobile-menu,
    .guard-portal-top .mobile-menu {
        position: fixed !important;
        z-index: 90 !important;
        top: max(6px, env(safe-area-inset-top)) !important;
        right: max(6px, env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 21px !important;
        box-shadow: 0 12px 30px rgba(71, 24, 29, 0.28) !important;
    }

    .topbar > div:not(.top-actions),
    .guard-portal-top > div:first-of-type {
        padding-right: 54px;
    }

    .top-actions,
    .guard-top-actions {
        padding-right: 54px;
    }

    .topbar {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .topbar > div:not(.top-actions) {
        flex: 1 1 calc(100% - 54px);
    }

    .topbar .top-actions {
        width: 100%;
        padding-right: 0;
        justify-content: flex-end;
    }

    .topbar #logoutButton {
        order: 999;
        min-width: 88px;
        min-height: 40px;
    }
}

@media (max-width: 620px) {
    .topbar {
        height: auto;
        min-height: 0;
    }

    .topbar > div:not(.top-actions) {
        padding-right: 52px;
    }

    .top-actions { padding-right: 0; }

}

/* Distribucion compacta de la bienvenida en telefonos. */
@media (max-width: 560px) {
    .hero {
        min-height: 0;
        padding: 28px 24px 26px;
    }

    .hero > div {
        width: 100%;
        padding-right: 0;
    }

    .hero-kicker {
        display: block;
        max-width: calc(100% - 74px);
        font-size: 9px;
        line-height: 1.55;
    }

    .hero h2 {
        max-width: calc(100% - 68px);
        margin: 10px 0 16px;
        font-size: 30px;
        line-height: 1.05;
    }

    .hero p {
        max-width: 100%;
        margin-bottom: 18px;
        font-size: 14px;
        line-height: 1.55;
    }

    .hero .primary-button {
        gap: 10px;
        max-width: calc(100% - 82px);
        padding: 11px 14px;
        font-size: 13px;
        line-height: 1.25;
    }

    .hero > img {
        right: 14px;
        bottom: 14px;
        width: 66px;
        height: 66px;
        padding: 5px;
        border-radius: 17px;
        opacity: .88;
    }
}

/* Contraste explicito para titulos en superficies claras. */
html:not([data-theme="dark"]) .topbar h1,
html:not([data-theme="dark"]) .page-intro h2,
html:not([data-theme="dark"]) .organization-toolbar h3,
html:not([data-theme="dark"]) .settings-toolbar h3,
html:not([data-theme="dark"]) .section-head h2 {
    color: var(--vertice-olive-dark);
}

/* En escritorio las tablas ocupan y reparten todo el ancho disponible. */
@media (min-width: 901px) {
    .table-scroll,
    .phase11-table-wrap,
    .table-wrap {
        width: 100%;
        scrollbar-gutter: auto !important;
    }

    .organization-list table,
    .data-table,
    .phase8-table,
    .phase11-table {
        width: 100% !important;
        min-width: 100%;
        table-layout: fixed;
    }

    .organization-list th:last-child,
    .organization-list td:last-child,
    .data-table th:last-child,
    .data-table td:last-child,
    .phase8-table th:last-child,
    .phase8-table td:last-child {
        width: 230px;
    }

    .organization-list thead,
    .organization-list thead tr,
    .data-table thead,
    .data-table thead tr,
    .phase8-table thead,
    .phase8-table thead tr,
    .phase11-table thead,
    .phase11-table thead tr {
        width: 100%;
        background: var(--neutral);
    }

    .organization-list thead tr,
    .data-table thead tr,
    .phase8-table thead tr,
    .phase11-table thead tr {
        width: 100%;
        box-shadow: 0 0 0 100vmax var(--neutral);
        clip-path: inset(0 -100vmax);
    }

    .organization-list th,
    .data-table th,
    .phase8-table th,
    .phase11-table th {
        min-height: 44px;
        padding: 13px 12px;
        font-size: 11px;
        line-height: 1.25;
        vertical-align: middle;
    }

    .organization-list td:last-child,
    .data-table td:last-child,
    .phase8-table td:last-child {
        vertical-align: middle;
    }

    .organization-list .workforce-actions,
    .data-table td:last-child,
    .phase8-actions {
        width: 100%;
    }

    .workforce-actions,
    .phase8-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 7px;
    }

    .workforce-actions > button,
    .workforce-actions > a,
    .phase8-actions > button,
    .phase8-actions > a,
    .data-table td:last-child > button,
    .data-table td:last-child > a {
        display: inline-flex;
        width: 100%;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        padding: 7px 9px;
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }
}

/* Enlace de retorno del acceso operativo con contraste en ambos temas. */
.operational-body .back-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 42px;
    margin-top: 20px;
    padding: 9px 13px;
    border: 1px solid color-mix(in srgb, var(--vertice-wine) 42%, var(--surface));
    border-radius: 11px;
    background: color-mix(in srgb, var(--vertice-wine) 7%, var(--surface));
    color: var(--vertice-wine) !important;
    font-weight: 750;
    line-height: 1.35;
    text-decoration: none;
}

.operational-body .back-link:hover,
.operational-body .back-link:focus-visible {
    border-color: var(--vertice-wine);
    background: var(--vertice-wine);
    color: #fff !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vertice-wine) 18%, transparent);
}

html[data-theme="dark"] .operational-body .back-link {
    border-color: color-mix(in srgb, var(--vertice-sand) 48%, transparent);
    background: color-mix(in srgb, var(--vertice-sand) 8%, var(--surface));
    color: var(--vertice-sand) !important;
}

html[data-theme="dark"] .operational-body .back-link:hover,
html[data-theme="dark"] .operational-body .back-link:focus-visible {
    border-color: var(--vertice-wine);
    background: var(--vertice-wine);
    color: #fff !important;
}

/* Cada fila se presenta como una tarjeta independiente en responsivo. */
@media (max-width: 900px) {
    .organization-list.security-card {
        overflow: visible;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .organization-list > .card-heading {
        margin-bottom: 12px;
        padding: 15px 16px;
        border: 1px solid var(--border);
        border-radius: 15px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .table-scroll,
    .table-wrap,
    .phase11-table-wrap {
        width: 100%;
        margin-top: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        scrollbar-gutter: auto;
    }

    .responsive-record-table,
    .responsive-record-table tbody {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 14px;
        border: 0;
        background: transparent;
    }

    .responsive-record-table thead {
        display: none !important;
    }

    .responsive-record-table tbody tr {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 15px 17px !important;
        overflow: hidden;
        border: 1px solid var(--border) !important;
        border-radius: 17px !important;
        background: var(--surface) !important;
        box-shadow: var(--shadow);
    }

    .responsive-record-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        background: transparent !important;
        color: var(--text) !important;
        font-size: 13px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .responsive-record-table tbody td::before {
        content: attr(data-label);
        color: var(--vertice-olive);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .08em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    .responsive-record-table tbody td:first-child {
        font-weight: 700;
    }

    .responsive-record-table tbody td:last-child {
        display: block !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    .responsive-record-table tbody td:last-child::before {
        display: block;
        margin-bottom: 9px;
    }

    .responsive-record-table .workforce-actions,
    .responsive-record-table .phase8-actions,
    .responsive-record-table td:last-child {
        width: 100%;
    }

    .responsive-record-table .workforce-actions,
    .responsive-record-table .phase8-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .responsive-record-table .workforce-actions > *,
    .responsive-record-table .phase8-actions > *,
    .responsive-record-table td:last-child > button,
    .responsive-record-table td:last-child > a {
        display: inline-flex;
        width: 100%;
        min-height: 40px;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        text-align: center;
        white-space: normal;
    }

    .phase8-workspace .organization-content > .security-card,
    .phase8-workspace .phase8-card,
    .phase8-workspace .phase8-list > article {
        border: 1px solid var(--border);
        border-radius: 17px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }
}

@media (max-width: 900px) {
    .topbar,
    .guard-portal-top {
        z-index: 200 !important;
    }
}

/* Portal del vigilante: reticula, navegacion y componentes Grupo Vertice. */
.guard-portal-body {
    --guard-outline: color-mix(in srgb, var(--vertice-olive) 28%, var(--surface));
    --guard-shadow: 0 14px 34px rgba(54, 59, 33, .13);
    --guard-soft: color-mix(in srgb, var(--vertice-sand) 22%, var(--surface));
}

.guard-portal {
    grid-template-columns: 260px minmax(0, 1fr);
    background: var(--bg);
}

.guard-portal-main {
    min-width: 0;
    width: 100%;
}

.guard-portal-sidebar {
    width: 260px;
    height: 100dvh;
    padding: 20px 14px 16px;
    overflow: hidden;
    background: var(--vertice-olive-dark) !important;
    box-shadow: 10px 0 30px rgba(54, 59, 33, .16);
}

.guard-portal-brand {
    min-height: 54px;
    gap: 11px;
    padding: 0 8px 20px;
}

.guard-portal-brand img {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    object-fit: contain;
}

.guard-portal-brand small,
.guard-scope-mini small {
    color: color-mix(in srgb, var(--vertice-sand) 82%, #fff) !important;
}

.guard-portal-sidebar nav {
    display: grid;
    grid-auto-rows: minmax(46px, auto);
    align-content: start;
    gap: 7px;
    min-height: 0;
    padding: 2px 2px 12px;
    overflow-x: hidden;
    overflow-y: auto;
}

.guard-portal-sidebar nav button,
.guard-portal.sidebar-collapsed .guard-portal-sidebar nav button {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    justify-content: initial;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #f7f1e8;
    box-shadow: none;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
}

.guard-portal-sidebar nav button > span,
.guard-portal.sidebar-collapsed .guard-portal-sidebar nav button > span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--vertice-sand) !important;
    font-size: 18px;
    line-height: 1;
}

.guard-portal-sidebar nav button:hover,
.guard-portal-sidebar nav button:focus-visible {
    border-color: rgba(219, 196, 165, .4);
    background: rgba(219, 196, 165, .12) !important;
    color: #fff;
    box-shadow: none !important;
}

.guard-portal-sidebar nav button.active {
    border-color: rgba(219, 196, 165, .48);
    background: var(--vertice-wine) !important;
    color: #fff;
    box-shadow: inset 3px 0 var(--vertice-sand) !important;
}

.guard-scope-mini {
    border-top-color: rgba(219, 196, 165, .28);
}

.guard-scope-mini .sync-mini {
    border-color: rgba(219, 196, 165, .45);
    background: rgba(219, 196, 165, .1);
    color: #fff;
}

.guard-portal.sidebar-collapsed {
    grid-template-columns: 82px minmax(0, 1fr);
}

.guard-portal.sidebar-collapsed .guard-portal-sidebar {
    width: 82px;
    padding-inline: 12px;
}

.guard-portal.sidebar-collapsed .guard-portal-sidebar nav button {
    grid-template-columns: 24px;
    justify-content: center;
    gap: 0;
    padding-inline: 10px;
    font-size: 0;
}

.guard-portal-top {
    min-height: 88px;
    height: auto;
    padding: 17px clamp(20px, 3vw, 38px);
    border-bottom-color: var(--guard-outline);
    background: var(--surface);
}

.guard-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.guard-identity > span {
    background: var(--vertice-wine) !important;
    color: #fff;
    box-shadow: 0 7px 16px rgba(103, 38, 44, .2);
}

.guard-view {
    box-sizing: border-box;
    display: grid;
    gap: 20px;
    width: min(100%, 1240px);
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(22px, 3vw, 38px);
}

.guard-view[hidden] {
    display: none !important;
}

.guard-welcome {
    min-width: 0;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(219, 196, 165, .32);
    background:
        radial-gradient(circle at 88% 12%, rgba(219, 196, 165, .14), transparent 36%),
        var(--vertice-olive-dark) !important;
    box-shadow: 0 18px 40px rgba(54, 59, 33, .2) !important;
}

.guard-welcome h2,
.guard-welcome p {
    color: #fff !important;
}

.guard-welcome .eyebrow {
    color: var(--vertice-sand) !important;
}

.session-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    min-width: 0;
}

.session-metrics > *,
.guard-view > .operational-card,
.active-access-list > *,
.p8-list > article,
.p8-round-state,
.camera-capture {
    box-sizing: border-box;
    min-width: 0;
    border-color: var(--guard-outline) !important;
    background: var(--surface) !important;
    box-shadow: var(--guard-shadow) !important;
}

.guard-view > .operational-card {
    width: 100%;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--guard-outline);
    border-radius: 20px;
}

.guard-view > .operational-card > :first-child {
    margin-top: 0;
}

.guard-module-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 0;
}

.guard-module-grid button {
    box-sizing: border-box;
    align-content: start;
    min-width: 0;
    min-height: 154px;
    padding: 20px;
    border-color: var(--guard-outline) !important;
    background: var(--surface) !important;
    box-shadow: var(--guard-shadow) !important;
}

.guard-module-grid button:hover,
.guard-module-grid button:focus-visible {
    border-color: var(--vertice-wine) !important;
    background: color-mix(in srgb, var(--vertice-wine) 5%, var(--surface)) !important;
    box-shadow: 0 16px 34px rgba(103, 38, 44, .15) !important;
}

.guard-module-grid button > span,
.module-stage > span {
    border: 1px solid color-mix(in srgb, var(--vertice-wine) 24%, transparent);
    background: color-mix(in srgb, var(--vertice-wine) 11%, var(--surface)) !important;
    color: var(--vertice-wine) !important;
}

.guard-module-grid button > span .ui-icon,
.module-stage > span .ui-icon,
.guard-view .ui-icon,
.guard-view svg:not([data-preserve-color]) {
    color: var(--vertice-wine) !important;
    stroke: currentColor;
}

.scope-notice,
.p8-preview-list span {
    border: 1px solid color-mix(in srgb, var(--vertice-olive) 22%, transparent);
    background: var(--guard-soft) !important;
    color: var(--text) !important;
}

.guard-access-grid,
.p8-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.guard-view input,
.guard-view select,
.guard-view textarea {
    box-sizing: border-box;
    max-width: 100%;
    border-color: var(--guard-outline) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

.guard-view input:focus,
.guard-view select:focus,
.guard-view textarea:focus {
    border-color: var(--vertice-wine) !important;
    outline: 3px solid color-mix(in srgb, var(--vertice-wine) 15%, transparent);
}

.guard-view .submit,
.guard-view button.submit,
.p8-capture-dialog .submit {
    border-color: var(--vertice-wine) !important;
    background: var(--vertice-wine) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(103, 38, 44, .18);
}

.guard-view .submit:hover,
.guard-view button.submit:hover,
.p8-capture-dialog .submit:hover {
    background: var(--vertice-wine-dark) !important;
}

.guard-view .ghost-button,
.p8-capture-dialog .ghost-button {
    border-color: color-mix(in srgb, var(--vertice-wine) 62%, var(--surface)) !important;
    background: var(--surface) !important;
    color: var(--vertice-wine) !important;
}

.guard-view .ghost-button:hover,
.p8-capture-dialog .ghost-button:hover {
    border-color: var(--vertice-wine) !important;
    background: color-mix(in srgb, var(--vertice-wine) 8%, var(--surface)) !important;
}

.p8-capture-dialog {
    border: 1px solid rgba(219, 196, 165, .32);
    background: var(--vertice-olive-dark) !important;
}

.p8-capture-dialog::backdrop {
    background: rgba(39, 41, 25, .78);
}

html[data-theme="dark"] .guard-portal-body {
    --guard-outline: color-mix(in srgb, var(--vertice-sand) 22%, var(--surface));
    --guard-shadow: 0 15px 34px rgba(0, 0, 0, .28);
    --guard-soft: color-mix(in srgb, var(--vertice-olive) 28%, var(--surface));
}

html[data-theme="dark"] .guard-module-grid button > span,
html[data-theme="dark"] .module-stage > span,
html[data-theme="dark"] .guard-view .ui-icon,
html[data-theme="dark"] .guard-view svg:not([data-preserve-color]) {
    color: var(--vertice-sand) !important;
}

html[data-theme="dark"] .guard-view .ghost-button,
html[data-theme="dark"] .p8-capture-dialog .ghost-button {
    border-color: color-mix(in srgb, var(--vertice-sand) 48%, transparent) !important;
    background: var(--surface) !important;
    color: var(--vertice-sand) !important;
}

@media (max-width: 760px) {
    .guard-portal,
    .guard-portal.sidebar-collapsed {
        display: block;
    }

    .guard-portal-sidebar,
    .guard-portal.sidebar-collapsed .guard-portal-sidebar {
        z-index: 230;
        width: min(280px, calc(100vw - 54px));
        height: 100dvh;
        padding: 18px 14px;
        overflow: hidden;
    }

    .guard-portal-sidebar nav,
    .guard-portal.sidebar-collapsed .guard-portal-sidebar nav {
        overflow-y: auto;
    }

    .guard-portal.sidebar-collapsed .guard-portal-sidebar nav button {
        grid-template-columns: 24px minmax(0, 1fr);
        justify-content: initial;
        gap: 10px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .guard-portal-top {
        min-height: 82px;
        padding: 13px 16px;
    }

    .guard-portal-top h1 {
        font-size: clamp(18px, 5vw, 22px);
    }

    .guard-view {
        gap: 14px;
        padding: 18px 14px 30px;
    }

    .guard-welcome {
        align-items: flex-start;
        gap: 14px;
        padding: 22px 20px;
    }

    .guard-module-grid,
    .session-metrics,
    .guard-access-grid,
    .p8-form {
        grid-template-columns: 1fr;
    }

    .guard-module-grid button {
        min-height: 132px;
        padding: 18px;
    }

    .guard-view > .operational-card {
        padding: 19px 16px;
        border-radius: 17px;
    }

    .close-actions,
    .p8-capture-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .close-actions button,
    .p8-capture-actions button {
        width: 100%;
        min-height: 44px;
    }
}

/* El mapa de iconos crea dos envoltorios; ambos deben heredar la marca del menu. */
html .guard-portal-sidebar nav button .ui-nav-icon,
html .guard-portal-sidebar nav button .ui-nav-icon .ui-icon,
html .guard-portal-sidebar nav button .ui-nav-icon svg {
    color: var(--vertice-sand) !important;
}

html .guard-portal-sidebar nav button .ui-nav-icon svg,
html .guard-portal-sidebar nav button .ui-nav-icon svg * {
    fill: none !important;
    stroke: var(--vertice-sand) !important;
}

html .guard-portal-sidebar nav button:hover .ui-nav-icon,
html .guard-portal-sidebar nav button:focus-visible .ui-nav-icon,
html .guard-portal-sidebar nav button.active .ui-nav-icon,
html .guard-portal-sidebar nav button:hover .ui-nav-icon .ui-icon,
html .guard-portal-sidebar nav button:focus-visible .ui-nav-icon .ui-icon,
html .guard-portal-sidebar nav button.active .ui-nav-icon .ui-icon,
html .guard-portal-sidebar nav button:hover .ui-nav-icon svg,
html .guard-portal-sidebar nav button:focus-visible .ui-nav-icon svg,
html .guard-portal-sidebar nav button.active .ui-nav-icon svg {
    color: #fff !important;
}

html .guard-portal-sidebar nav button:hover .ui-nav-icon svg *,
html .guard-portal-sidebar nav button:focus-visible .ui-nav-icon svg *,
html .guard-portal-sidebar nav button.active .ui-nav-icon svg * {
    stroke: #fff !important;
}

/* Notificaciones del vigilante: esta capa prevalece sobre el CSS cargado dinamicamente. */
html .guard-notification-dropdown {
    border-color: color-mix(in srgb, var(--vertice-olive) 28%, var(--surface)) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: 0 18px 44px rgba(54, 59, 33, .18) !important;
}

html .guard-notification-dropdown-head {
    border-bottom: 1px solid color-mix(in srgb, var(--vertice-olive) 20%, var(--surface));
}

html .guard-notification-dropdown-head button,
html .guard-view-more {
    background: transparent !important;
    color: var(--vertice-wine) !important;
}

html .guard-notification-dropdown .guard-notification {
    border-color: color-mix(in srgb, var(--vertice-olive) 24%, var(--surface)) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

html .guard-notification-dropdown .guard-notification.unread {
    border-left-color: var(--vertice-wine) !important;
    background: color-mix(in srgb, var(--vertice-sand) 18%, var(--surface)) !important;
}

html .guard-notification-dropdown .guard-notification strong {
    color: var(--vertice-olive-dark) !important;
}

html .guard-notification-dropdown .guard-notification span,
html .guard-notification-dropdown .guard-notification small {
    color: color-mix(in srgb, var(--vertice-olive) 78%, var(--text)) !important;
}

html .guard-notification-dropdown .guard-notification:hover,
html .guard-notification-dropdown .guard-notification:focus-visible {
    border-color: var(--vertice-wine) !important;
    background: color-mix(in srgb, var(--vertice-wine) 6%, var(--surface)) !important;
}

html[data-theme="dark"] .guard-notification-dropdown .guard-notification strong {
    color: var(--vertice-sand) !important;
}

html[data-theme="dark"] .guard-notification-dropdown .guard-notification span,
html[data-theme="dark"] .guard-notification-dropdown .guard-notification small {
    color: var(--muted) !important;
}

/* Menu de escritorio replegado: un unico carril centrado y siempre visible. */
@media (min-width: 761px) {
    .guard-portal.sidebar-collapsed .guard-portal-sidebar nav {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 2px 0 12px;
        overflow-x: hidden;
    }

    .guard-portal.sidebar-collapsed .guard-portal-sidebar nav button {
        display: flex !important;
        flex: 0 0 46px;
        align-items: center;
        justify-content: center !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px;
        min-height: 46px;
        padding: 0 !important;
        overflow: visible;
        font-size: 0 !important;
    }

    .guard-portal.sidebar-collapsed .guard-portal-sidebar nav button > .ui-nav-icon,
    .guard-portal.sidebar-collapsed .guard-portal-sidebar nav button > .ui-nav-icon .ui-icon,
    .guard-portal.sidebar-collapsed .guard-portal-sidebar nav button > .ui-nav-icon svg {
        display: grid !important;
        flex: 0 0 24px !important;
        place-items: center;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .guard-portal.sidebar-collapsed .guard-portal-sidebar nav button > .ui-nav-icon svg {
        display: block !important;
        width: 21px !important;
        height: 21px !important;
    }

    .guard-portal.sidebar-collapsed .guard-portal-sidebar nav button b {
        top: -4px;
        right: -5px;
    }
}

/* Menu general replegado: oculta solo las etiquetas, nunca el SVG. */
@media (min-width: 901px) {
    .sidebar.collapsed {
        width: 80px;
        padding-inline: 12px;
    }

    .sidebar.collapsed .brand {
        min-width: 0;
        justify-content: center;
    }

    .sidebar.collapsed nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .sidebar.collapsed nav a {
        display: flex !important;
        flex: 0 0 46px;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px;
        min-height: 46px;
        padding: 0 !important;
        overflow: visible;
    }

    .sidebar.collapsed nav a > span:not(:first-child) {
        display: none !important;
    }

    .sidebar.collapsed nav a > span:first-child,
    .sidebar.collapsed nav a > span:first-child .ui-icon,
    .sidebar.collapsed nav a > span:first-child svg {
        display: grid !important;
        flex: 0 0 24px !important;
        place-items: center;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        overflow: visible !important;
        color: var(--vertice-sand) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sidebar.collapsed nav a > span:first-child svg {
        display: block !important;
        width: 21px !important;
        height: 21px !important;
    }

    .sidebar.collapsed nav a > span:first-child svg,
    .sidebar.collapsed nav a > span:first-child svg * {
        fill: none !important;
        stroke: var(--vertice-sand) !important;
    }

    .sidebar.collapsed nav a:hover > span:first-child,
    .sidebar.collapsed nav a:focus-visible > span:first-child,
    .sidebar.collapsed nav a.active > span:first-child,
    .sidebar.collapsed nav a:hover > span:first-child .ui-icon,
    .sidebar.collapsed nav a:focus-visible > span:first-child .ui-icon,
    .sidebar.collapsed nav a.active > span:first-child .ui-icon {
        color: #fff !important;
    }

    .sidebar.collapsed nav a:hover > span:first-child svg *,
    .sidebar.collapsed nav a:focus-visible > span:first-child svg *,
    .sidebar.collapsed nav a.active > span:first-child svg * {
        stroke: #fff !important;
    }
}