/* ============================================================================
   ChatPlus · Navegación principal: dos modos (cookie cp_nav, Navegacion/NavegacionPreferencia.cs)
   ----------------------------------------------------------------------------
   A · "barra de íconos" (cp-nav-rail, predeterminado): el sidebar del template en modo
       `app-sidebar-minified` (4.0625rem). Al pasar el mouse (o con foco de teclado) se despliega
       a 15rem SOBRE el contenido (cp-rail-flotante: el contenido no se corre). El botón hamburguesa
       la fija desplegada (cp-rail-fija = el sidebar clásico que empuja el contenido).
   B · "menú en el encabezado" (cp-nav-header): sin sidebar en escritorio; el menú vive en el
       header (_MenuEncabezado.cshtml): links, paneles por hub y "Más" para lo que no entra.
   En pantallas < 992px (corte del template) los dos modos usan el sidebar off-canvas de siempre.
   Carga después de liquid-glass.css. Lógica en js/navegacion.js.
   ============================================================================ */

:root {
    --cp-rail-ancho: 4.0625rem;
    --cp-rail-desplegado: 15rem;
    --cp-nav-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Foco visible (teclado) en los dos menús ─────────────────────────────── */
.app-sidebar .menu .menu-item .menu-link:focus-visible,
.cp-topnav-link:focus-visible,
.cp-mega .dropdown-item:focus-visible,
.cp-mas-menu .dropdown-item:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* ============================================================================
   A · Barra de íconos
   ============================================================================ */
@media (min-width: 992px) {
    .cp-nav-rail .app-sidebar {
        overflow-x: hidden;
        transition: width 0.22s var(--cp-nav-ease), box-shadow 0.22s ease, background-color 0.22s ease;
    }
    .cp-nav-rail .app-content { transition: margin-left 0.22s var(--cp-nav-ease); }

    /* Misma grilla que desplegada: el ícono no "salta" al abrir/cerrar la barra. */
    .cp-nav-rail.app-sidebar-minified .app-sidebar .menu .menu-item { padding: 0 0.625rem; }

    /* Encabezados ("INICIO", "SISTEMA"…): una línea fina del mismo alto que el texto. */
    .cp-nav-rail.app-sidebar-minified .app-sidebar .menu .menu-header {
        position: relative;
        color: transparent;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: clip;
        margin-left: 1.15rem;
        margin-right: 1.15rem;
        user-select: none;
    }
    .cp-nav-rail.app-sidebar-minified .app-sidebar .menu .menu-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc(50% + 0.2rem);
        height: 1px;
        background: rgba(15, 23, 42, 0.12);
    }

    /* El template oculta el texto con display:none: queda solo para lectores de pantalla (nombre accesible). */
    .app.cp-nav-rail.app-sidebar-minified .app-sidebar .menu .menu-link .menu-text {
        display: block !important;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .cp-nav-rail.app-sidebar-minified .app-sidebar .menu > .menu-header:first-child::after { display: none; }

    /* Badges sobre el ícono: contador chico arriba a la derecha. */
    .cp-nav-rail.app-sidebar-minified .app-sidebar .menu .menu-link .sidebar-badge {
        position: absolute;
        top: 0.1rem;
        right: 0.05rem;
        margin: 0;
        min-width: 1.05rem;
        padding: 0.2em 0.38em;
        font-size: 0.6rem;
        line-height: 1;
        box-shadow: 0 0 0 2px rgba(232, 240, 246, 0.95), 0 2px 5px rgba(220, 38, 38, 0.35);
    }

    /* Desplegada por hover/foco: flota sobre el contenido. */
    .cp-nav-rail.cp-rail-flotante .app-content { margin-left: var(--cp-rail-ancho); }
    .cp-nav-rail.cp-rail-flotante .app-sidebar {
        background: rgba(236, 243, 248, 0.94);
        box-shadow:
            1px 0 0 rgba(255, 255, 255, 0.6) inset,
            22px 0 48px -20px rgba(15, 23, 42, 0.38),
            6px 0 16px -10px rgba(10, 124, 147, 0.25);
    }

    /* Botón hamburguesa = fijar la barra desplegada. */
    #cpNavFijar[aria-pressed="true"] .bar { background: var(--bs-primary); }
}

/* Tooltip de cada ícono con la barra colapsada (lo posiciona navegacion.js). */
.cp-rail-tip {
    position: fixed;
    z-index: 1090;
    pointer-events: none;
    padding: 0.35rem 0.65rem;
    border-radius: 9px;
    background: rgba(13, 15, 22, 0.92);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(13, 15, 22, 0.55);
    opacity: 0;
    transform: translate(-4px, -50%);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.cp-rail-tip.visible { opacity: 1; transform: translate(0, -50%); }
.cp-rail-tip::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 1px;
}

/* ============================================================================
   B · Menú en el encabezado
   ============================================================================ */
.cp-topnav { display: none; }

@media (min-width: 992px) {
    .cp-nav-header .app-sidebar { display: none; }
    .cp-nav-header .app-content { margin-left: 0; }

    .cp-nav-header .app-header { flex-wrap: nowrap; }
    .cp-nav-header .app-header > .brand {
        width: auto;
        flex: 0 0 auto;
        padding: 0 1.1rem 0 1.25rem;
    }
    .cp-nav-header .app-header > .menu { flex: 0 0 auto; margin-left: 0 !important; }

    .cp-topnav {
        display: flex;
        align-items: center;
        flex: 1 1 0;
        min-width: 0;
        height: 100%;
        padding: 0 0.5rem 0 0.75rem;
    }
    .cp-topnav-lista {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.125rem;
        width: max-content;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .cp-topnav-item { position: relative; flex: 0 0 auto; }
    .cp-topnav-item[hidden] { display: none; }

    .cp-topnav-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        height: 2.4rem;
        padding: 0 0.8rem;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #475569;
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: -0.005em;
        white-space: nowrap;
        text-decoration: none;
        transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }
    .cp-topnav-link > i:first-child {
        font-size: 1rem;
        opacity: 0.85;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }
    .cp-topnav-link:hover {
        background: linear-gradient(180deg, rgba(20, 169, 194, 0.14) 0%, rgba(10, 124, 147, 0.06) 100%);
        color: #0a7c93;
        box-shadow: 0 0 0 1px rgba(20, 169, 194, 0.2) inset;
    }
    .cp-topnav-link:hover > i:first-child { opacity: 1; transform: scale(1.06); }

    /* Activo: la píldora de vidrio del sidebar + subrayado cian → magenta pegado al borde del header. */
    .cp-topnav-link.active {
        background: linear-gradient(180deg, rgba(20, 169, 194, 0.26) 0%, rgba(10, 124, 147, 0.12) 100%);
        color: #075766;
        font-weight: 600;
        box-shadow:
            0 0 0 1px rgba(10, 124, 147, 0.32) inset,
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 6px 16px -8px rgba(10, 124, 147, 0.45);
    }
    .cp-topnav-link.active > i:first-child {
        color: var(--cp-magenta);
        opacity: 1;
        filter: drop-shadow(0 1px 3px rgba(var(--cp-magenta-rgb), 0.4));
    }
    .cp-topnav-link.active::after {
        content: "";
        position: absolute;
        left: 0.9rem;
        right: 0.9rem;
        bottom: calc((2.4rem - 3.75rem) / 2);
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: linear-gradient(90deg, var(--bs-primary), var(--cp-cyan) 60%, var(--cp-magenta));
        box-shadow: 0 0 10px rgba(var(--cp-cyan-rgb), 0.55);
    }

    .cp-topnav-item.show > .cp-topnav-link,
    .cp-topnav-link[aria-expanded="true"] {
        background: rgba(10, 124, 147, 0.14);
        color: #075766;
        box-shadow: 0 0 0 1px rgba(10, 124, 147, 0.24) inset;
    }

    .cp-topnav-caret {
        font-size: 0.6rem;
        opacity: 0.55;
        margin-left: -0.1rem;
        transition: transform 0.22s var(--cp-nav-ease);
    }
    .cp-topnav-link[aria-expanded="true"] .cp-topnav-caret { transform: rotate(180deg); opacity: 0.85; }

    .cp-topnav-link .badge {
        font-size: 0.65rem;
        font-weight: 700;
        padding: 0.25em 0.45em;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 6px rgba(220, 38, 38, 0.35);
    }

    /* "Más": punto rojo si adentro quedó algo con pendientes. */
    .cp-topnav-mas:has(.cp-mas-grupo:not([hidden]) .js-badge:not([style*="none"])) > .cp-topnav-link::before {
        content: "";
        position: absolute;
        top: 0.45rem;
        left: 1.55rem;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: #dc2626;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
    }

    /* Separador de grupos (lo que en el sidebar son los encabezados). */
    .cp-topnav-sep {
        flex: 0 0 auto;
        width: 1px;
        height: 1.4rem;
        margin: 0 0.4rem;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0));
    }
    .cp-topnav-sep[hidden] { display: none; }

    /* El nombre del usuario cede lugar al menú en anchos medianos (queda el avatar). */
    @media (max-width: 1399.98px) {
        .cp-nav-header .app-header .menu .menu-item .menu-img + .menu-text { display: none; }
    }
}

/* ─── Paneles de hub ("mega menú") ─────────────────────────────────────────── */
.app-header .cp-topnav .menu-item.dropdown > .dropdown-menu { transform-origin: top left; }

.app-header .cp-topnav .menu-item.dropdown > .dropdown-menu.cp-mega {
    --cp-acento: var(--bs-primary);
    width: min(46rem, calc(100vw - 2rem));
    padding: 0;
    margin-top: 0.6rem;
    left: 0;
}
.cp-mega-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem 0.85rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    background: linear-gradient(120deg, color-mix(in srgb, var(--cp-acento) 13%, transparent) 0%, transparent 65%);
}
.cp-mega-icono {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    color: #fff;
    font-size: 1.05rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cp-acento) 70%, #ffffff) 0%, var(--cp-acento) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 14px -6px var(--cp-acento);
}
.cp-mega-head-texto { min-width: 0; flex: 1 1 auto; }
.cp-mega-titulo { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: #0f172a; }
.cp-mega-desc {
    font-size: 0.78rem;
    line-height: 1.35;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item.cp-mega-ver {
    flex: 0 0 auto;
    width: auto;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cp-acento) 28%, transparent);
    background: rgba(255, 255, 255, 0.7);
    color: var(--cp-acento);
    font-size: 0.8rem;
    font-weight: 600;
}
.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item.cp-mega-ver:hover,
.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item.cp-mega-ver:focus {
    background: var(--cp-acento);
    color: #fff;
}

.cp-mega-grid {
    columns: 3 13rem;
    column-gap: 0.75rem;
    padding: 0.7rem 0.85rem 0.85rem;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}
.cp-mega-seccion { break-inside: avoid; padding-bottom: 0.5rem; }
.cp-mega-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item.cp-mega-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    white-space: normal;
}
.cp-mega-card-icono {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9px;
    font-size: 0.85rem;
    color: var(--cp-acento);
    background: color-mix(in srgb, var(--cp-acento) 11%, #ffffff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cp-acento) 16%, transparent) inset;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cp-mega-card-texto { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cp-mega-card-texto strong { font-size: 0.85rem; font-weight: 600; color: #1f2937; line-height: 1.3; }
.cp-mega-card-texto small {
    font-size: 0.74rem;
    line-height: 1.3;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cp-mega-card .badge { align-self: center; font-size: 0.65rem; }
.cp-mega-card:hover .cp-mega-card-icono,
.cp-mega-card:focus .cp-mega-card-icono { background: var(--cp-acento); color: #fff; }
.cp-mega-card:hover .cp-mega-card-texto strong,
.cp-mega-card:focus .cp-mega-card-texto strong { color: #075766; }
.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item.cp-mega-card.active {
    background: rgba(10, 124, 147, 0.12);
    box-shadow: 0 0 0 1px rgba(10, 124, 147, 0.22) inset;
}
.cp-mega-card.active .cp-mega-card-icono { background: var(--cp-magenta); color: #fff; }
.cp-mega-card.disabled { opacity: 0.55; }

/* ─── "Más" ─────────────────────────────────────────────────────────────── */
.app-header .cp-topnav .menu-item.dropdown > .dropdown-menu.cp-mas-menu {
    min-width: 16rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    transform-origin: top right;
}
.cp-mas-grupo + .cp-mas-grupo:not([hidden]) { border-top: 1px solid rgba(15, 23, 42, 0.07); margin-top: 0.25rem; padding-top: 0.25rem; }
.cp-mas-grupo[hidden] + .cp-mas-grupo { border-top: 0; }
.app-header .menu-item.dropdown > .dropdown-menu .dropdown-item.cp-mas-ver { font-size: 0.8rem; font-weight: 600; color: var(--bs-primary); }

/* ─── Selector de modo en el menú del usuario ────────────────────────────── */
.cp-nav-modos .cp-nav-modo-check { visibility: hidden; }
.cp-nav-modos [aria-pressed="true"] { font-weight: 600; }
.cp-nav-modos [aria-pressed="true"] .cp-nav-modo-check { visibility: visible; color: var(--bs-primary); }

@media (prefers-reduced-motion: reduce) {
    .cp-nav-rail .app-sidebar,
    .cp-nav-rail .app-content,
    .cp-rail-tip,
    .cp-topnav-link,
    .cp-topnav-caret { transition: none; }
}