/* /Shared/LoadingOverlay.razor.rz.scp.css */
.loading-overlay[b-jfthhue99k] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: lo-fade-in-b-jfthhue99k 0.2s ease-out;
    backdrop-filter: blur(2px);
}

.loading-box[b-jfthhue99k] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0f1f3;
}

.loading-gif[b-jfthhue99k] {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
}

@keyframes lo-fade-in-b-jfthhue99k {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   App shell
   ══════════════════════════════════════════════════════════ */
.app-shell[b-rij8bvhu94] {
    display: flex;
    height: 100vh;
    background: var(--bg-tertiary);
}

/* ══════════════════════════════════════════════════════════
   Sidebar
   ══════════════════════════════════════════════════════════ */
.sidebar-nav[b-rij8bvhu94] {
    width: 224px;
    background: var(--pal-teal-dark);      /* #1e3d3a — fijo, no hereda brand */
    flex-shrink: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
    z-index: var(--z-sidebar);
    box-shadow: var(--shadow-sidebar);
}

/* Desktop: colapsar reduciendo el ancho a 0 */
.sidebar-collapsed .sidebar-nav[b-rij8bvhu94] {
    width: 0;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   Overlay — oculto en desktop, visible en tablet/mobile
   ══════════════════════════════════════════════════════════ */
.sidebar-overlay[b-rij8bvhu94] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: calc(var(--z-sidebar) - 1);
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════
   Main area
   ══════════════════════════════════════════════════════════ */
.main[b-rij8bvhu94] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   Topbar  — Opción 5: blanco + borde inferior naranja
   ══════════════════════════════════════════════════════════ */
.topbar[b-rij8bvhu94] {
    background: var(--bg-primary);
    border-bottom: 3px solid var(--pal-orange);
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: var(--shadow-topbar);
    flex-shrink: 0;
    z-index: var(--z-topbar);
    gap: 12px;
}

.topbar-left[b-rij8bvhu94] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* "io" naranja · "Clock" teal oscuro */
.topbar-brand[b-rij8bvhu94] {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.4px;
    user-select: none;
    line-height: 1;
}

.brand-io[b-rij8bvhu94]    { color: var(--pal-orange); font-weight: 800; }
.brand-clock[b-rij8bvhu94] { color: var(--pal-teal-dark); font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   Hamburger
   ══════════════════════════════════════════════════════════ */
.hamburger-btn[b-rij8bvhu94] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.hamburger-btn:hover[b-rij8bvhu94] {
    background: var(--pal-orange-bg);
}

.hamburger-btn span[b-rij8bvhu94] {
    display: block;
    width: 17px;
    height: 1.8px;
    background: var(--pal-gray-dk);
    border-radius: 2px;
    transition: background var(--transition-fast);
}

.hamburger-btn:hover span[b-rij8bvhu94] {
    background: var(--pal-orange-dk);
}

/* ══════════════════════════════════════════════════════════
   Content scrollable area
   ══════════════════════════════════════════════════════════ */
.content-area[b-rij8bvhu94] {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px;
    background: var(--bg-tertiary);
}

.page-enter[b-rij8bvhu94] {
    animation: page-fade-slide-b-rij8bvhu94 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-fade-slide-b-rij8bvhu94 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══════════════════════════════════════════════════════════
   TABLET  769px – 1024px
   El sidebar pasa a ser overlay fijo (no afecta el layout)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sidebar-nav[b-rij8bvhu94] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: var(--z-sidebar);
        width: 224px !important;
        transform: translateX(0);
        transition: transform 0.25s ease;
    }

    .sidebar-collapsed .sidebar-nav[b-rij8bvhu94] {
        transform: translateX(-100%);
        pointer-events: none;
    }

    .app-shell:not(.sidebar-collapsed) .sidebar-overlay[b-rij8bvhu94] {
        display: block;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .topbar[b-rij8bvhu94] {
        padding: 0 14px;
    }

    .content-area[b-rij8bvhu94] {
        padding: 14px;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/* ── Sidebar brand ─────────────────────────────────────────── */
.sidebar-brand[b-bnaqx9l88u] {
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.brand-link[b-bnaqx9l88u] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    letter-spacing: -0.3px;
    line-height: 1;
    white-space: nowrap;
}

.brand-link:hover[b-bnaqx9l88u] {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

/* Cuadrado naranja con "io" */
.brand-mark[b-bnaqx9l88u] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--pal-orange);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.brand-link:hover .brand-mark[b-bnaqx9l88u] {
    background: var(--pal-orange-dk);
}

/* "io" blanco · "Clock" naranja */
.brand-link .brand-name-io[b-bnaqx9l88u]    { color: rgba(255, 255, 255, 0.90); }
.brand-link .brand-name-clock[b-bnaqx9l88u] { color: var(--pal-orange); font-weight: 800; }

/* ── Sidebar menu ──────────────────────────────────────────── */
.sidebar-menu[b-bnaqx9l88u] {
    padding: 6px 0 16px;
    flex: 1;
    overflow-y: auto;
}

.sidebar-group[b-bnaqx9l88u] {
    margin-bottom: 2px;
}

.sidebar-group-label[b-bnaqx9l88u] {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.28);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 12px 16px 3px;
    pointer-events: none;
}

/* ── Nav links ─────────────────────────────────────────────── */
[b-bnaqx9l88u] .sidebar-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    margin: 1px 8px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.58);
    font-size: var(--font-size-base);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
    border-left: 2px solid transparent;
}

[b-bnaqx9l88u] .sidebar-link .oi {
    font-size: 13px;
    width: 15px;
    text-align: center;
    flex-shrink: 0;
    vertical-align: middle;
    opacity: 0.75;
}

[b-bnaqx9l88u] .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.90);
    text-decoration: none;
}

[b-bnaqx9l88u] .sidebar-link:hover .oi {
    opacity: 1;
}

/* Ítem activo — sky blue (Opción 5) */
[b-bnaqx9l88u] .sidebar-link.active {
    background: rgba(66, 195, 255, 0.14);
    color: var(--pal-sky);
    border-left-color: var(--pal-sky);
    font-weight: 600;
}

[b-bnaqx9l88u] .sidebar-link.active .oi {
    opacity: 1;
}

/* ── Divider ───────────────────────────────────────────────── */
.sidebar-divider[b-bnaqx9l88u] {
    border: none;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
    margin: 8px 8px;
}

/* ── Sidebar footer (logo io it systems) ─────────────────── */
.sidebar-footer[b-bnaqx9l88u] {
    padding: 14px 16px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-footer-logo[b-bnaqx9l88u] {
    width: 130px;
    opacity: 0.30;
    filter: brightness(0) invert(1);
    transition: opacity var(--transition-std);
}

.sidebar-footer:hover .sidebar-footer-logo[b-bnaqx9l88u] {
    opacity: 0.55;
}