/* ═══ LA CAPA VIAJA CON LA HOJA ══════════════════════════════════════════════
   Esta hoja declara su @layer adentro, así cae en su capa se cargue como se
   cargue (lo que no tiene capa le gana a todo lo que la tiene), y el <head>
   puede usar <link> (paralelo; un fallo se ve en Network) en vez de @import
   (serial, bloqueante y falla en silencio: el shell se quedaría sin
   `container-type` y el layout caería a flujo plano).
   ═════════════════════════════════════════════════════════════════════════ */
@layer lib {
/*
 * Az: piel global de la capa de aplicación (el shell).
 *
 * .az-nav-item vive aquí (no scoped) porque AzNavItem tiene como raíz un <NavLink>: el CSS scoped del
 * .razor no se aplica al <a> que renderiza un componente hijo. Global + prefijo az- = sin colisiones.
 *
 * Sólo consume tokens --mx-*. Los ítems del rail leen el juego --mx-color-sidebar-* (bg/fg/hover/active),
 * oscuro en ambos modos (MxThemeGen.EmitRichTokens).
 */

.az-nav-item {
    display: flex;
    align-items: center;
    gap: var(--mx-space-2);
    padding: var(--mx-space-2) var(--mx-space-3);
    border-radius: var(--mx-radius-sm);
    /* sobre el rail oscuro: fg atenuado del sidebar (cae a text-muted fuera del rail) */
    color: var(--mx-color-sidebar-muted, var(--mx-color-text-muted, var(--mx-color-text)));
    text-decoration: none;
    font-size: var(--mx-text-sm);
    line-height: 1.4;
    white-space: nowrap;
    transition: background var(--mx-transition-fast, .12s) ease, color var(--mx-transition-fast, .12s) ease;
    /* reset para el modo acción (raíz <button>) — luce idéntico al modo router (<a>) */
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.az-nav-item:hover {
    background: var(--mx-color-sidebar-hover, var(--mx-color-surface-2));
    color: var(--mx-color-sidebar-fg, var(--mx-color-text));
}

/* activo (router por URL, o Active manual en modo acción) — tint del acento + texto acento */
.az-nav-item--active {
    background: var(--mx-color-sidebar-active-bg, var(--mx-color-primary-light));
    color: var(--mx-color-sidebar-active-fg, var(--mx-color-primary-text, var(--mx-color-primary)));
    font-weight: var(--mx-font-weight-semibold);
    box-shadow: inset 3px 0 0 var(--mx-color-primary);   /* barra de acento a la izquierda */
}
.az-nav-item--active:hover { background: var(--mx-color-sidebar-active-bg, var(--mx-color-primary-light)); }

.az-nav-item__icon {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.az-nav-item__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.az-nav-item__badge {
    flex: none;
    min-width: 18px;
    padding: 1px var(--mx-space-1);
    text-align: center;
    border-radius: var(--mx-radius-full);
    background: var(--mx-color-primary);
    color: var(--mx-color-primary-on, var(--mx-color-surface));
    font-size: var(--mx-text-xs);
    line-height: 1.4;
}

/* icon-rail: sólo icono, centrado; label y badge ocultos */
.az-nav-item--collapsed {
    justify-content: center;
    padding: var(--mx-space-2);
}
.az-nav-item--collapsed .az-nav-item__label,
.az-nav-item--collapsed .az-nav-item__badge { display: none; }

/* ── tablet (641–1024px del shell): icon-rail AUTOMÁTICO vía @container ── */
@container (min-width: 641px) and (max-width: 1024px) {
    .az-nav-item { justify-content: center; padding: var(--mx-space-2); }
    .az-nav-item__label,
    .az-nav-item__badge { display: none; }
    /* activo en icon-rail: highlight contenido, SIN la barra de acento (sólo va con label) */
    .az-nav-item--active { box-shadow: none; }

    /* dentro del flyout de un grupo SÍ se muestran labels, alineados a la izquierda */
    .az-nav-group__sub .az-nav-item { justify-content: flex-start; padding: var(--mx-space-2) var(--mx-space-3); }
    .az-nav-group__sub .az-nav-item__label { display: block; }
}

/* ═══ AzNavGroup — item con sub-items: acordeón (desktop) / flyout a la derecha (icon-rail) ═══ */
.az-nav-group { display: flex; flex-direction: column; }
.az-nav-group__chevron {
    margin-left: auto; flex: none; display: inline-flex; align-items: center;
    color: var(--mx-color-sidebar-muted, var(--mx-color-text-muted)); transition: transform .15s ease;
}
.az-nav-group--open > .az-nav-group__trigger .az-nav-group__chevron { transform: rotate(180deg); }
.az-nav-group--active > .az-nav-group__trigger {
    color: var(--mx-color-sidebar-active-fg, var(--mx-color-primary-text, var(--mx-color-primary)));
    font-weight: var(--mx-font-weight-semibold);
}

/* desktop: acordeón inline (oculto salvo --open) */
.az-nav-group__sub {
    display: none; flex-direction: column; gap: 2px;
    margin: 2px 0 2px var(--mx-space-5);
}
.az-nav-group--open > .az-nav-group__sub { display: flex; }

/* icon-rail (tablet): el sub-list pasa a flyout popover a la derecha, en hover/focus */
@container (min-width: 641px) and (max-width: 1024px) {
    .az-nav-group { position: relative; }
    .az-nav-group__chevron { display: none; }   /* en icon-rail el chevron sobra (el flyout es la pista) */
    .az-nav-group__sub {
        margin: 0; padding: var(--mx-space-1);
        position: absolute; left: calc(100% + 8px); top: 0;
        min-width: 188px;
        background: var(--mx-color-surface);
        border: var(--mx-border-width, 1px) solid var(--mx-color-border);
        border-radius: var(--mx-radius-md);
        box-shadow: var(--mx-shadow-lg, 0 10px 30px rgba(0, 0, 0, .14));
        z-index: 60;
    }
    .az-nav-group:hover > .az-nav-group__sub,
    .az-nav-group:focus-within > .az-nav-group__sub { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   AzShell — el grid del shell (topbar / [rail | main]), global para que viaje siempre con el kit (un CSS
   scoped sólo iría en el bundle {app}.styles.css del consumidor). El skin (@layer skin) lo refina encima.
   ⚠ El grid .az-shell vive sólo aquí: un test lo exige, no se duplica en ningún otro CSS del kit.
   Responsive por @container, no @media. ═══════════════════════════════════════════════════════ */

/* el host es el contenedor de @container (mide el ancho disponible). El grid .az-shell va adentro para que
   las @container queries puedan colapsarlo (un contenedor no se consulta a sí mismo). */
.az-shell-host {
    container-type: inline-size;
    height: 100dvh;
    min-height: 0;
}

.az-shell {
    --az-rail-w: 248px;
    --az-rail-collapsed-w: 60px;
    --az-topbar-h: 56px;

    display: grid;
    grid-template-columns: var(--az-rail-w) minmax(0, 1fr);
    grid-template-rows: var(--az-topbar-h) minmax(0, 1fr);
    grid-template-areas:
        "topbar topbar"
        "rail   main";
    height: 100%;
    min-height: 0;
    /* el patrón del tema (gradientes radiales derivados del seed); sin patrón, --mx-color-bg plano. */
    background: var(--mx-bg-pattern, var(--mx-color-bg));
    color: var(--mx-color-text);
    font-family: var(--mx-font-sans);
    font-size: var(--mx-text-base);
    line-height: var(--mx-line-height-normal);
    text-shadow: var(--mx-text-shadow);
    -webkit-font-smoothing: antialiased;
    transition: grid-template-columns var(--mx-transition-base, .2s) ease;
}

.az-shell--collapsed {
    grid-template-columns: var(--az-rail-collapsed-w) minmax(0, 1fr);
}

.az-shell__topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: var(--mx-space-3);
    padding: 0 var(--mx-space-4);
    border-bottom: var(--mx-border-width, 1px) solid color-mix(in srgb, var(--mx-color-border) 60%, transparent);
    /* vidrio: topbar semitransparente con blur; el fondo decorativo se ve a través. */
    background: color-mix(in srgb, var(--mx-color-surface) 72%, transparent);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    position: sticky;
    top: 0;
    z-index: var(--mx-z-sticky, 20);
}

.az-shell__rail {
    grid-area: rail;
    min-height: 0;
    overflow-y: auto;
    border-right: var(--mx-border-width, 1px) solid color-mix(in srgb, var(--mx-color-border) 50%, transparent);
    /* rail oscuro con vidrio sutil: casi opaco (legibilidad) y con blur, el fondo apenas asoma. */
    background: color-mix(in srgb, var(--mx-color-sidebar-bg, var(--mx-color-surface)) 88%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: var(--mx-color-sidebar-fg, var(--mx-color-text));
}

.az-shell__main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: var(--mx-space-5);
}

.az-shell__backdrop { display: none; }

/* ── tablet (641–1024px): icon-rail automático (sólo iconos) ── */
@container (min-width: 641px) and (max-width: 1024px) {
    .az-shell { grid-template-columns: var(--az-rail-collapsed-w) minmax(0, 1fr); }
    /* el rail no debe recortar el flyout de los grupos (sale hacia la derecha) */
    .az-shell__rail { overflow: visible; }
}

/* ── mobile (≤640px): el rail pasa a drawer off-canvas + hamburguesa ── */
@container (max-width: 640px) {
    .az-shell,
    .az-shell--collapsed {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "main";
    }

    .az-shell__rail {
        position: fixed;
        /* top:0 y no var(--az-topbar-h): el skin pone --az-topbar-h:auto, y top:auto rompería el fixed. El drawer
           ocupa todo el alto y trae su propia cabecera (marca). */
        inset: 0 auto 0 0;
        height: 100%;
        width: var(--az-rail-w);
        transform: translateX(-100%);
        width: var(--az-rail-w);
        transform: translateX(-100%);
        transition: transform var(--mx-transition-base, .2s) ease;
        z-index: var(--mx-z-fixed, 1200);
    }

    .az-shell--mobile-open .az-shell__rail { transform: translateX(0); }

    .az-shell--mobile-open .az-shell__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--mx-color-overlay, rgba(0, 0, 0, .4));
        z-index: var(--mx-z-sticky, 1020);
    }
}

@media (prefers-reduced-motion: reduce) {
    .az-shell,
    .az-shell__rail { transition: none; }
}

/* El pin del rail (header) refleja el estado visual desde el CSS: derecho = fijado, inclinado 45° = suelto
   (icon-rail). El markup emite siempre el mismo ícono y el CSS lo gira, para el colapso C# (.az-shell--collapsed)
   y para el icon-rail por @container. La regla vive en AzSidebar.razor.css (aplicativo e IDE) y en mx-skin.css
   (preview y sitio, sin bundle scoped). */

}