/* ─── Design tokens ─────────────────────────────────────── */
:root {
    --shell-red:            #FF002D;
    --shell-red-light:      #fef2f2;
    --shell-border:         #f3f4f6;
    --shell-text:           #111827;
    --shell-text-muted:     #374151;
    --shell-text-faint:     #9ca3af;
    --shell-bg:             #f9fafb;
    --shell-white:          #fff;
    --shell-radius:         10px;
    --shell-topbar-h:       70px;
    --shell-sidebar-w:      300px;
    --shell-sidebar-w-col:  82px;
    --shell-font:           "Nunito Sans", "Segoe UI", sans-serif;
    --shell-vh:             100vh;
}

/* En moviles la barra de direcciones cambia el alto real del viewport:
   dvh evita que el footer quede tapado o que aparezca scroll fantasma. */
@supports (height: 100dvh) {
    :root {
        --shell-vh: 100dvh;
    }
}

/* ─── Container query anchor ────────────────────────────── */
.shell-host {
    container-type: inline-size;
}

/* ─── Shared button used across multiple components ─────── */
.shell-icon-button {
    border: 1px solid #e5e7eb;
    background: transparent;
    cursor: pointer;
    color: var(--shell-text-faint);
    border-radius: 7px;
    font-size: 0.75rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shell-icon-button:hover {
    background: var(--shell-bg);
    border-color: #d1d5db;
    color: var(--shell-text-muted);
}

/* ════════════════════════════════════════════════════════
   ShellHost
   ════════════════════════════════════════════════════════ */

/* ─── Host wrapper ──────────────────────────────────────── */
.shell-host {
    height: var(--shell-vh);
    min-height: var(--shell-vh);
    overflow: hidden;
    background: var(--shell-bg);
    color: var(--shell-text);
    font-family: var(--shell-font);
    font-size: 15px;
}

.shell-frame {
    height: var(--shell-vh);
    min-height: var(--shell-vh);
    display: grid;
    grid-template-columns: auto 1fr;
    overflow: hidden;
}

/* ─── Sidebar ───────────────────────────────────────────── */
.shell-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--shell-sidebar-w);
    height: var(--shell-vh);
    min-height: var(--shell-vh);
    border-right: 1px solid var(--shell-border);
    background: var(--shell-white);
    transition: width 0.22s ease;
    flex-shrink: 0;
    overflow: hidden;
}

.shell-sidebar.collapsed {
    width: var(--shell-sidebar-w-col);
    overflow: visible;
}

.shell-sidebar.collapsed .shell-menu-panel {
    display: none;
}

.shell-sidebar.collapsed .shell-icon-rail {
    display: flex;
}

.shell-sidebar.collapsed .shell-nav-wrap {
    overflow: visible;
    position: relative;
}

/* ─── Brand block ───────────────────────────────────────── */
.shell-brand-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.8rem 0 1.1rem;
    height: var(--shell-topbar-h);
    border-bottom: 1px solid var(--shell-border);
    flex-shrink: 0;
}

.shell-brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    max-width: 190px;
}

.shell-brand-img-full {
    height: 28px;
    width: auto;
    display: block;
}

.shell-brand-img-icon {
    height: 42px;
    width: auto;
    display: none;
}

.shell-sidebar.collapsed .shell-brand-img-full {
    display: none;
}

.shell-sidebar.collapsed .shell-brand-img-icon {
    display: block;
}

.shell-sidebar.collapsed .shell-brand-block {
    justify-content: center;
    padding: 0;
}

.shell-sidebar.collapsed .sidebar-toggle {
    display: none;
}

.sidebar-toggle {
    width: 28px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #d5d9df;
    color: #a3a9b3;
    font-size: 0.72rem;
}

.sidebar-toggle:hover {
    color: #68707b;
    border-color: #c3c9d2;
    background: #f8fafc;
}

/* ─── Nav wrap ──────────────────────────────────────────── */
.shell-nav-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ─── Collapsed icon rail ───────────────────────────────── */
.shell-icon-rail {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 0.65rem 0;
    gap: 0.5rem;
    width: var(--shell-sidebar-w-col);
    border-right: 1px solid var(--shell-border);
    /* Con muchos grupos los iconos de abajo quedaban fuera de pantalla. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.rail-toggle {
    width: 32px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #d5d9df;
    background: transparent;
    color: #a3a9b3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}

.rail-toggle:hover {
    border-color: #c3c9d2;
    color: #68707b;
    background: #f8fafc;
}

.rail-divider {
    width: 34px;
    border-top: 1px solid #e6e8ec;
    margin: 0.1rem 0 0.15rem;
}

.rail-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #8f96a2;
    font-size: 1.03rem;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background 0.12s, color 0.12s;
}

.rail-icon:hover {
    background: var(--shell-border);
    color: var(--shell-text);
}

.rail-icon.active {
    background: var(--shell-red-light);
    color: var(--shell-red);
}

/* ─── Collapsed flyout menu ────────────────────────────── */
.shell-rail-flyout {
    /* ShellHost define --rail-flyout-top segun el grupo abierto. Se acota para
       que el panel nunca arranque por debajo del borde inferior del rail. */
    --rail-flyout-top: 11.2rem;
    --rail-flyout-gap: 0.7rem;
    --rail-flyout-min-h: 12rem;
    --rail-flyout-y: clamp(
        var(--rail-flyout-gap),
        var(--rail-flyout-top),
        max(var(--rail-flyout-gap), 100% - var(--rail-flyout-min-h) - var(--rail-flyout-gap))
    );

    position: absolute;
    left: calc(100% + 0.65rem);
    top: var(--rail-flyout-y);
    width: 330px;
    max-width: calc(100vw - var(--shell-sidebar-w-col) - 1.9rem);
    max-height: calc(100% - var(--rail-flyout-y) - var(--rail-flyout-gap));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.4rem;
    border: 1px solid #e7eaee;
    background: var(--shell-white);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    z-index: 20;
    padding: 0.55rem;
}

.rail-flyout-header {
    width: 100%;
    flex-shrink: 0;
    border: none;
    background: var(--shell-red-light);
    border-radius: 0.45rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--shell-red);
    font-weight: 700;
    font-size: 0.97rem;
    padding: 0 0.85rem;
    text-align: left;
    cursor: pointer;
}

.rail-flyout-badge {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.rail-flyout-badge i {
    font-size: 0.9rem;
}

.rail-flyout-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rail-flyout-arrow {
    font-size: 0.7rem;
    flex-shrink: 0;
}

.rail-flyout-items {
    /* La cabecera queda fija y la lista de submenus scrollea dentro del panel. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    margin-top: 0.65rem;
    border-left: 1px solid #e8ebef;
    margin-left: 0.85rem;
    padding-left: 0.95rem;
    padding-right: 0.25rem;
}

/* ─── Menu panel ────────────────────────────────────────── */
.shell-menu-panel {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0.75rem 1.5rem;
}

/* ─── Home link (rendered directly in ShellHost) ────────── */
.home-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--shell-text-muted);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--shell-radius);
    padding: 0 0.85rem;
    margin-bottom: 0.5rem;
    min-height: 48px;
    transition: background 0.12s;
}

.home-link:hover {
    background: var(--shell-bg);
}

.home-link.active {
    background: var(--shell-border);
    color: var(--shell-text);
    font-weight: 600;
}

.home-link i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    color: var(--shell-text-faint);
    flex-shrink: 0;
}

/* ─── Section title separating current app from other apps ─ */
.menu-section-title {
    margin: 1rem 0.85rem 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--shell-border);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shell-text-faint);
}

.menu-section-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.home-link.active i {
    color: var(--shell-text);
}

/* ─── Main column ───────────────────────────────────────── */
.shell-main {
    height: var(--shell-vh);
    min-height: var(--shell-vh);
    display: flex;
    flex-direction: column;
    background: var(--shell-bg);
    min-width: 0;
    overflow: hidden;
}

/* ─── Page content ──────────────────────────────────────── */
.shell-content {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 1.75rem 2rem;
}

/* ─── State banners ─────────────────────────────────────── */
.shell-loading {
    font-size: 0.875rem;
    color: var(--shell-text-faint);
    padding: 1rem 0.5rem;
}

.shell-error {
    font-size: 0.875rem;
    background: #fff5f5;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: var(--shell-radius);
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
}

/* ─── Responsive: menu becomes a collapsed-by-default overlay
   that covers the content instead of stacking above it ────── */
@media (max-width: 900px) {
    .shell-frame {
        grid-template-columns: 1fr;
        position: relative;
    }

    .shell-sidebar {
        position: fixed;
        top: var(--shell-topbar-h);
        left: 0;
        width: 100%;
        height: calc(var(--shell-vh) - var(--shell-topbar-h));
        min-height: 0;
        border-right: none;
        border-bottom: none;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    }

    /* On mobile "collapsed" is repurposed to mean "the overlay is open" (the
       opposite of its desktop meaning), so the drawer starts hidden without
       depending on any JS viewport check for the very first paint. */
    .shell-sidebar.collapsed {
        width: 100%;
        transform: translateX(0);
    }

    .shell-sidebar.collapsed .shell-menu-panel {
        display: block;
    }

    .shell-brand-block,
    .shell-icon-rail {
        display: none !important;
    }

    /* Con height:auto el contenido se recortaba contra el alto del host (que
       sigue siendo 100vh con overflow hidden) y el footer quedaba fuera de la
       pantalla. Manteniendo el alto del shell, .shell-content scrollea y el
       footer queda siempre anclado abajo. */
    .shell-main {
        height: var(--shell-vh);
        min-height: 0;
        overflow: hidden;
    }

    .shell-content {
        padding: 1.25rem 1rem;
    }
}

/* ════════════════════════════════════════════════════════
   ShellTopbar
   ════════════════════════════════════════════════════════ */

/* ─── Topbar container ──────────────────────────────────── */
.shell-topbar {
    background: var(--shell-white);
    border-bottom: 1px solid var(--shell-border);
    height: var(--shell-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 2.5rem;
    flex-shrink: 0;
    position: relative;
}

.shell-topbar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.shell-topbar-left,
.shell-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ─── Mobile-only brand + menu toggle (hidden on desktop) ── */
.shell-topbar-brand {
    display: none;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.shell-topbar-brand-logo {
    display: flex;
    align-items: center;
}

.shell-topbar-brand-logo img {
    height: 32px;
    width: auto;
    display: block;
}

/* ─── Favorites button ──────────────────────────────────── */
.favorites-button {
    border: none;
    background: transparent;
    color: var(--shell-text-muted);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.12s;
}

.favorites-button:hover {
    background: var(--shell-border);
}

.favorites-caret {
    font-size: 0.68rem;
    color: #7f858f;
}

.favorites-star-icon {
    display: none;
    color: var(--shell-red);
    font-size: 1.05rem;
}

/* ─── Search ────────────────────────────────────────────── */
.shell-search-wrap {
    margin-left: auto;
    width: clamp(220px, 30vw, 316px);
    height: 42px;
    border: 1px solid #e4e6ea;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.75rem;
    background: var(--shell-white);
    transition: border-color 0.15s;
    position: relative;
}

.shell-search-wrap:focus-within {
    border-color: var(--shell-red);
}

.shell-search {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--shell-text);
    outline: none;
    min-width: 0;
}

.shell-search::placeholder {
    color: var(--shell-text-faint);
}

.shell-search-icon {
    color: var(--shell-text-faint);
    font-size: 0.9rem;
}

.shell-search-results {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    z-index: 130;
    max-height: min(330px, calc(var(--shell-vh) - var(--shell-topbar-h) - 2rem));
    overflow-y: auto;
}

.shell-search-result-item {
    border-bottom: 1px solid #eef0f4;
}

.shell-search-result-item:last-child {
    border-bottom: none;
}

.shell-search-result-item a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-decoration: none;
    padding: 0.5rem 0.45rem;
    color: inherit;
}

.shell-search-result-item a:hover {
    background: #fafbfc;
    border-radius: 6px;
}

.shell-search-result-item strong {
    color: #2d333c;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.shell-search-result-item strong i {
    color: #8f96a1;
}

.shell-search-result-item span {
    color: #7b8089;
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Profile ───────────────────────────────────────────── */
.shell-profile-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.shell-profile-toggle {
    border: none;
    border-radius: 999px;
    background: var(--shell-red-light);
    height: 42px;
    padding: 0 0.62rem 0 0.35rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
}

.shell-profile {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    background: var(--shell-red);
    color: var(--shell-white);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-caret {
    color: #989ca5;
    font-size: 0.7rem;
}

.shell-profile-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.7rem);
    width: 236px;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    padding: 0.6rem 0.5rem;
    z-index: 120;
}

.profile-menu-item {
    width: 100%;
    min-height: 46px;
    border: none;
    border-bottom: 1px solid #e6e8ec;
    background: transparent;
    color: #575c65;
    display: flex;
    align-items: center;
    gap: 0.68rem;
    text-align: left;
    font-size: 1.0625rem;
    padding: 0 0.6rem;
    cursor: pointer;
}

.profile-menu-item:hover {
    background: #fafbfc;
}

.profile-menu-item:last-child {
    border-bottom: 1px solid #e6e8ec;
}

.profile-menu-item i {
    width: 18px;
    color: #737882;
    font-size: 1rem;
}

@media (max-width: 900px) {
    .shell-topbar {
        padding: 0 1rem;
    }

    .shell-topbar-controls {
        gap: 0.5rem;
    }

    .shell-topbar-brand {
        display: flex;
    }

    .favorites-label,
    .favorites-caret {
        display: none;
    }

    .favorites-star-icon {
        display: inline-flex;
    }

    .favorites-button {
        padding: 0.45rem;
    }

    .shell-search-wrap {
        width: auto;
        min-width: 0;
        flex: 1;
        margin-left: 0;
    }
}

/* ════════════════════════════════════════════════════════
   ShellFooter
   ════════════════════════════════════════════════════════ */

/* ─── Footer bar ────────────────────────────────────────── */
.shell-footer {
    border-top: 1px solid var(--shell-border, #e5e7eb);
    background: var(--shell-white, #fff);
    color: #6b7280;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 44px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.shell-footer-copy {
    font-size: 0.69rem;
    color: #6b7280;
    white-space: nowrap;
}

/* ─── Bottom-right red corner triangle ─────────────────── */
.shell-footer::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 44px 44px;
    border-color: transparent transparent var(--shell-red) transparent;
}

/* ─── Social icons row ──────────────────────────────────── */
.shell-social {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-right: 2.2rem;
}

/* explicit color resets to defeat browser <a> blue default */
.shell-footer .social-link,
.shell-footer .social-link:link,
.shell-footer .social-link:visited,
.shell-footer .social-link:active {
    color: #1f2937 !important;
    font-size: 0.72rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 1;
    transition: opacity 0.12s;
}

.shell-footer .social-link .social-icon {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
}

.shell-footer .social-link:hover {
    opacity: 0.75;
}

@media (max-width: 900px) {
    .shell-footer {
        padding: 0 1rem;
    }

    .shell-footer-copy {
        font-size: 0.62rem;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 0.5rem;
    }

    .shell-social {
        flex-shrink: 0;
    }
}

/* ════════════════════════════════════════════════════════
   ShellMenuGroup
   ════════════════════════════════════════════════════════ */

/* ─── Group wrapper ──────────────────────────────────────── */
.menu-group {
    margin-bottom: 0.1rem;
}

/* ─── Group header button ───────────────────────────────── */
.menu-node {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--shell-text-muted);
    border-radius: var(--shell-radius);
    padding: 0 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    min-height: 48px;
    transition: background 0.12s, color 0.12s;
    text-align: left;
}

.menu-node:hover {
    background: var(--shell-bg);
}

.menu-node.active {
    background: var(--shell-red-light);
    color: var(--shell-red);
    font-weight: 600;
}

.menu-node.active .menu-node-icon {
    color: var(--shell-red);
}

.menu-node.active .group-arrow {
    color: var(--shell-red);
}

/* ─── Group label ───────────────────────────────────────── */
.group-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ─── Group icon ────────────────────────────────────────── */
i.menu-node-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    color: var(--shell-text-faint);
    flex-shrink: 0;
}

/* ─── Chevron ───────────────────────────────────────────── */
.group-arrow {
    color: var(--shell-text-faint);
    font-size: 0.65rem;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─── Children container ────────────────────────────────── */
.group-items {
    border-left: 2px solid var(--shell-border);
    margin-left: 1.45rem;
    padding: 0.2rem 0 0.35rem;
    margin-top: 0.1rem;
    margin-bottom: 0.15rem;
}

/* ════════════════════════════════════════════════════════
   ShellMenuItem
   (.menu-link / .favorite-toggle se scopean con .menu-row
   porque ShellFavoritesFlyout usa las mismas clases con otro
   estilo, scopeado con .flyout-item mas abajo)
   ════════════════════════════════════════════════════════ */

/* ─── Leaf item row ─────────────────────────────────────── */
.menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    min-height: 42px;
    padding: 0 0.6rem 0 0.75rem;
    border-radius: 8px;
    transition: background 0.1s;
}

.menu-row:hover {
    background: #fafafa;
}

.menu-row.active {
    background: var(--shell-red-light);
}

.menu-row.active .menu-link {
    color: var(--shell-red);
    font-weight: 600;
}

/* ─── Expandable sub-item row ───────────────────────────── */
.menu-subrow {
    display: flex;
    align-items: center;
    min-height: 42px;
    border-radius: 8px;
}

.menu-subrow:hover {
    background: #fafafa;
}

.menu-subrow.has-active {
    background: var(--shell-red-light);
}

.menu-subrow.has-active .menu-subrow-trigger {
    color: var(--shell-red);
    font-weight: 600;
}

.menu-subrow.has-active .menu-item-icon {
    color: var(--shell-red);
}

.menu-subrow.has-active .menu-subrow-chevron {
    color: var(--shell-red);
}

.menu-subrow-trigger {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 0 0.6rem 0 0.75rem;
    min-height: 42px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--shell-text-muted);
    text-align: left;
    gap: 0.55rem;
}

.menu-item-icon-wrap {
    width: 16px;
    min-width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-item-icon {
    font-size: 0.86rem;
    color: var(--shell-text-faint);
}

.menu-item-icon-placeholder {
    width: 12px;
    height: 12px;
    display: inline-block;
}

.menu-subrow-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu-subrow-chevron {
    font-size: 0.6rem;
    color: var(--shell-text-faint);
    transition: transform 0.15s;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-subrow-chevron.open {
    transform: rotate(90deg);
}

/* ─── Nested sub-items ──────────────────────────────────── */
.menu-subitems {
    border-left: 2px solid var(--shell-border);
    margin-left: 1rem;
    padding: 0.1rem 0;
}

/* ─── Leaf link ─────────────────────────────────────────── */
.menu-row .menu-link {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--shell-text-muted);
    text-decoration: none;
    padding: 0;
    min-height: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-row .menu-link:hover {
    color: var(--shell-text);
}

.menu-row.active .menu-item-icon {
    color: var(--shell-red);
}

.menu-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ─── Favorite star ─────────────────────────────────────── */
.menu-row .favorite-toggle {
    border: none;
    background: transparent;
    color: #d1d5db;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: color 0.12s;
}

.menu-row .favorite-toggle:hover {
    color: var(--shell-red);
}

.menu-row .favorite-toggle .fa-solid {
    color: var(--shell-red);
}

.favorite-toggle i {
    display: inline-block;
    transition: transform 0.15s ease;
}

.favorite-toggle:hover i {
    transform: scale(1.2);
}

/* ════════════════════════════════════════════════════════
   ShellFavoritesFlyout
   (.menu-link / .favorite-toggle scopeados con .flyout-item)
   ════════════════════════════════════════════════════════ */

/* ─── Flyout panel ──────────────────────────────────────── */
.favorites-flyout {
    position: absolute;
    top: calc(var(--shell-topbar-h) + 0.55rem);
    left: 2rem;
    width: min(92vw, 350px);
    background: var(--shell-white);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(var(--shell-vh) - var(--shell-topbar-h) - 1.2rem);
    padding: 0 0.65rem 0.8rem;
}

.favorites-flyout-header {
    min-height: 54px;
    border-bottom: 1px solid var(--shell-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    color: #2d333c;
}

.flyout-close-button {
    border: none;
    background: transparent;
    color: #b9bdc5;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.favorites-section {
    padding: 0.9rem 0.25rem 0;
}

.favorites-section + .favorites-section {
    padding-top: 1.3rem;
}

.favorites-section-title {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    font-weight: 700;
    color: #2d333c;
}

.favorites-app-title {
    margin: 0.45rem 0 0.25rem;
    font-size: 0.83rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.favorite-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.favorite-context {
    display: block;
    font-size: 0.74rem;
    color: #9aa0a9;
    padding-left: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flyout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    min-height: 48px;
    padding: 0 0.3rem 0 0;
    border-bottom: 1px solid #eceef2;
    transition: background 0.1s;
}

.flyout-item:hover {
    background: #fafafa;
}

.flyout-empty {
    color: var(--shell-text-faint);
    font-size: 0.92rem;
    padding: 1rem 0.5rem;
}

.flyout-item.empty {
    color: var(--shell-text-faint);
    font-size: 0.92rem;
    padding: 1rem 0.5rem;
    border-bottom: none;
}

/* ─── Link and favorite toggle inside flyout ────────────── */
.flyout-item .menu-link {
    flex: 1;
    font-size: 1.0625rem;
    color: #6a707a;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0 0 0 0.95rem;
    min-height: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
}

.flyout-item .menu-link::before {
    content: "\2022";
    position: absolute;
    left: 0.25rem;
    color: #5e6470;
}

.flyout-item .menu-link:hover {
    color: var(--shell-red);
}

.flyout-item .favorite-toggle {
    border: none;
    background: transparent;
    color: var(--shell-red);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.flyout-item .favorite-toggle i {
    font-size: 0.95rem;
    line-height: 1;
}
/* redeploy */