/* /Shared/MainLayout.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   MainLayout.razor.css — scoped al MainLayout
   Topbar fijo + TelerikDrawer abajo con altura explícita.
   Glassmorphism, bordes translúcidos, glows premium estilo landing.
   ───────────────────────────────────────────────────────────── */

.azhum-app[b-ujskfwb1cx] {
    height: 100vh;
    width: 100vw;
    background: var(--az-bg);
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
}

/* ── Topbar con glassmorphism ─────────────────────────────── */
/* Gap = 0: el rail y el brand-zone alinean pixel-perfect con el
   sidebar (mini y expandido respectivamente). El resto de elementos
   tras el brand-zone usa margin-left propio para crear separación. */
.azhum-topbar[b-ujskfwb1cx] {
    height: var(--az-topbar-height);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 20px 0 0;
    gap: 0;
    background: var(--az-topbar-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--az-border-subtle);
    position: relative;
    z-index: 20;
    box-shadow: var(--az-inset-hi);
    color: var(--az-topbar-text);
}

/* Rail: columna del ancho del sidebar mini (56px).
   El hamburger queda centrado → eje vertical idéntico al de los
   iconos del sidebar (mini y expandido). */
.azhum-topbar-rail[b-ujskfwb1cx] {
    width: var(--az-rail-width);
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--az-border-subtle);
}

.azhum-topbar-rail[b-ujskfwb1cx]  .azhum-topbar-toggle {
    color: var(--az-topbar-text);
}

/* Brand zone: columna del ancho restante del sidebar expandido.
   Width = sidebar_width − rail_width. Su border-right cae sobre el
   borde derecho del sidebar expandido → línea vertical continua. */
.azhum-topbar-brand-zone[b-ujskfwb1cx] {
    width: calc(var(--az-sidebar-width) - var(--az-rail-width));
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 18px;
    box-sizing: border-box;
    border-right: 1px solid var(--az-border-subtle);
}

.azhum-topbar-brand[b-ujskfwb1cx] {
    display: flex;
    align-items: center;
    height: 30px;
    color: var(--az-topbar-text);
    text-decoration: none;
    transition: opacity var(--az-transition-fast);
}

.azhum-topbar-brand:hover[b-ujskfwb1cx] {
    opacity: 0.85;
}

.azhum-topbar-brand svg[b-ujskfwb1cx] {
    height: 28px;
    width: auto;
    display: block;
}

.azhum-topbar-tenant[b-ujskfwb1cx] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin-left: 18px;
}

.azhum-topbar-tenant .tenant-name[b-ujskfwb1cx] {
    font-weight: 600;
    color: var(--az-text);
    font-size: 14px;
    letter-spacing: -0.005em;
}

.azhum-topbar-tenant .tenant-meta[b-ujskfwb1cx] {
    font-size: 11px;
    color: var(--az-text-muted);
    font-family: var(--az-font-mono);
    letter-spacing: 0.01em;
}

.azhum-topbar-actions[b-ujskfwb1cx] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.azhum-freshness[b-ujskfwb1cx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.azhum-freshness .muted[b-ujskfwb1cx] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--az-text-muted);
    font-weight: 500;
}

.azhum-freshness .value[b-ujskfwb1cx] {
    font-size: 12px;
    color: var(--az-text);
    font-family: var(--az-font-mono);
}

.user-chip[b-ujskfwb1cx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--az-surface-2);
    color: var(--az-text);
    font-weight: 700;
    font-size: 11px;
    font-family: var(--az-font-mono);
    border: 1px solid var(--az-border);
    cursor: default;
    user-select: none;
    box-shadow: var(--az-inset-hi), var(--az-elev-1);
}

/* ── Drawer (altura explícita = viewport − topbar) ────────── */
.azhum-app[b-ujskfwb1cx]  .azhum-drawer {
    height: calc(100vh - 56px);
    width: 100%;
    background: var(--az-bg);
}

.azhum-app[b-ujskfwb1cx]  .azhum-drawer .k-drawer-wrapper {
    background: var(--az-sidebar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--az-border-subtle);
}

.azhum-app[b-ujskfwb1cx]  .k-drawer-content {
    background: transparent;
    color: var(--az-text);
    overflow: auto;
    height: 100%;
}

/* ── Sidebar items (en el Template) ───────────────────────── */
/* Padding diseñado para que el icono (20px) quede centrado en una
   columna de 56px = mismo eje que el hamburger del topbar.
   (56 - 20) / 2 = 18px de padding-left en cada item. */
.azhum-drawer-list[b-ujskfwb1cx] {
    display: flex;
    flex-direction: column;
    padding: 14px 8px;
    gap: 3px;
}

.azhum-drawer-item[b-ujskfwb1cx] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 11px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--az-text-muted);
    font-family: var(--az-font-ui);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: background-color var(--az-transition-fast),
                color var(--az-transition-fast),
                border-color var(--az-transition-fast);
}

.azhum-drawer-item:hover[b-ujskfwb1cx] {
    background: rgba(255, 255, 255, 0.04);
    color: var(--az-text);
}

.azhum-drawer-item.selected[b-ujskfwb1cx] {
    background:
        linear-gradient(180deg, rgba(79, 124, 255, 0.12), rgba(79, 124, 255, 0.06));
    color: var(--az-text);
    border-color: rgba(79, 124, 255, 0.30);
    box-shadow:
        var(--az-inset-hi),
        0 4px 12px -6px rgba(79, 124, 255, 0.35);
}

.azhum-drawer-item.selected[b-ujskfwb1cx]::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--az-blue);
    box-shadow: 0 0 12px rgba(79, 124, 255, 0.6);
}

.azhum-drawer-icon[b-ujskfwb1cx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.azhum-drawer-label[b-ujskfwb1cx] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mini mode: forzamos 56px en el wrapper (la columna del sidebar),
   NUNCA en el container — eso aplastaría el content area.
   Labels ocultos, iconos centrados en la columna de 56px = alineado
   pixel-perfect con el rail del topbar. */
.azhum-app[b-ujskfwb1cx]  .k-drawer-mini .k-drawer-wrapper,
.azhum-app[b-ujskfwb1cx]  .k-drawer-mini .k-drawer-items-wrapper {
    width: 56px !important;
    min-width: 56px !important;
}

.azhum-app[b-ujskfwb1cx]  .k-drawer-mini .azhum-drawer-list {
    padding: 14px 0;
}

.azhum-app[b-ujskfwb1cx]  .k-drawer-mini .azhum-drawer-label {
    display: none;
}

.azhum-app[b-ujskfwb1cx]  .k-drawer-mini .azhum-drawer-item {
    justify-content: center;
    padding: 11px 0;
    border-radius: 0;
}

.azhum-app[b-ujskfwb1cx]  .k-drawer-mini .azhum-drawer-item.selected::before {
    left: 0;
    border-radius: 0 2px 2px 0;
}

/* ── Content ──────────────────────────────────────────────── */
.azhum-content[b-ujskfwb1cx] {
    padding: 32px 40px;
    box-sizing: border-box;
    min-height: 100%;
    position: relative;
}