/* ============================================================
   NOVA — estilos propios de navegación (no tocar app.min.css,
   que es del vendor y se regenera desde el tema).
   ============================================================ */

/* --- Buscador del sidebar --- */
.sidenav-search .form-control {
    background: var(--highdmin-menu-bg);
    border-color: var(--highdmin-border-color);
    color: var(--highdmin-menu-item-color);
}

.sidenav-search #sidenavSearchClear {
    background: transparent;
    border: 0;
    color: var(--highdmin-menu-item-color);
    opacity: .6;
}

.sidenav-search #sidenavSearchClear:hover {
    opacity: 1;
}

/* Resultados de búsqueda: fuerza visibilidad sin pasar por la API de Bootstrap
   Collapse, para no disparar el acordeón exclusivo de app.js (show.bs.collapse) */
#sidenavTree.search-active .side-nav-item.search-hidden,
#sidenavTree.search-active .side-nav-title.search-hidden {
    display: none !important;
}

#sidenavTree.search-active .collapse.search-force-open {
    display: block !important;
    height: auto !important;
}

#sidenavTree .search-match > a {
    background: rgba(2, 192, 206, .12);
    border-radius: 6px;
}

/* ============================================================
   Conmutador de menú lateral / horizontal
   ============================================================ */
html:not([data-layout="topnav"]) .topnav {
    display: none !important;
}

html[data-layout="topnav"] .sidenav-menu {
    display: none !important;
}

html[data-layout="topnav"] .app-topbar,
html[data-layout="topnav"] .page-content {
    margin-left: 0 !important;
}

/* app.min.css limita .page-container a max-width:85% en modo horizontal
   (desde 1500px de ancho), dejando franjas vacías a los lados del topbar,
   el nav y el contenido. Se amplía para que las vistas operacionales
   (tablas, filtros) aprovechen el ancho real de la pantalla. */
html[data-layout="topnav"] .page-container {
    max-width: 98%;
}

/* El nombre de usuario + cerrar sesión del topbar solo tiene sentido en modo
   horizontal: en vertical esa misma acción ya vive en el sidebar (con más
   contexto: nombre, rol y avatar), duplicarla en el topbar es ruido. */
html:not([data-layout="topnav"]) .topbar-user-account {
    display: none !important;
}

/* ============================================================
   Distinción visual: módulo de negocio vs sección fija del sistema
   ============================================================ */

/* Sidebar: el icono de un módulo lleva el acento de marca; una sección
   fija (Utilidades, Configuración, Administración, Ayuda) queda neutra. */
.side-nav-link-module .menu-icon i {
    color: #02c0ce;
}

.side-nav-link-module .menu-text {
    font-weight: 600;
}

/* Menú horizontal: los módulos llevan un acento inferior; una línea
   vertical separa el bloque de módulos de las secciones fijas. */
html[data-layout="topnav"] .topnav .nav-item.is-module > .nav-link {
    box-shadow: inset 0 -2px 0 rgba(2, 192, 206, .4);
}

html[data-layout="topnav"] .topnav .topnav-divider {
    width: 1px;
    height: 22px;
    align-self: center;
    background: var(--highdmin-border-color);
    margin: 0 8px;
    flex: 0 0 auto;
}

/* ============================================================
   Títulos largos: elipsis en vez de corte abrupto o envoltura fea
   ============================================================ */
.side-nav-link .menu-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Estos <a> ahora pueden llevar un botón de pin al final: se vuelven flex
   para que el texto trunque con elipsis SIN comprimir ni tapar el botón. */
.side-nav-second-level > li > a,
.side-nav-third-level > li > a {
    display: flex;
    align-items: center;
    gap: 2px;
}

.side-nav-second-level > li > a .menu-item-label,
.side-nav-third-level > li > a .menu-item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Ítems fijados ("Frecuentes")
   ============================================================ */
.pin-toggle-btn {
    flex: 0 0 auto;
    margin-left: auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 5px;
    color: inherit;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: opacity .12s ease, background-color .12s ease;
}

.side-nav-item-pinnable:hover .pin-toggle-btn,
.side-nav-link-pinned .pin-toggle-btn,
.pin-toggle-btn:focus-visible {
    opacity: 1;
}

.pin-toggle-btn:hover {
    background: rgba(2, 192, 206, .15);
}

.pin-toggle-btn.pin-toggle-btn-active {
    opacity: .85;
    color: #02c0ce;
}

.pin-toggle-btn.pin-toggle-btn-active:hover {
    opacity: 1;
}

/* ============================================================
   Toast simple para errores del toggle de pin (ej. máximo alcanzado)
   ============================================================ */
.nova-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 12px);
    background: #1f242b;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .4);
    opacity: 0;
    z-index: 2000;
    transition: opacity .25s ease, transform .25s ease;
    max-width: min(90vw, 360px);
}

.nova-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.nova-toast-error {
    background: #b3352c;
}

/* El menú horizontal no envuelve texto a varias líneas: cada ítem mide su
   ancho real y topnav-overflow.js decide cuáles no caben. IMPORTANTE: nunca
   poner overflow-x/overflow-y en .navbar-nav — por spec CSS, un overflow
   distinto de "visible" en un eje fuerza al otro eje a dejar de ser
   "visible" también, y eso recorta los dropdown-menu (position:absolute)
   que cuelgan de sus <li>. Por eso el overflow se resuelve ocultando ítems
   (topnav-overflow.js), no con scroll ni con clipping del contenedor. */
html[data-layout="topnav"] .topnav .navbar-nav {
    flex-wrap: nowrap;
}

html[data-layout="topnav"] .topnav .navbar-nav > .nav-item {
    flex: 0 0 auto;
}

html[data-layout="topnav"] .topnav .navbar-nav .nav-link,
html[data-layout="topnav"] .topnav .navbar-nav .menu-text {
    white-space: nowrap;
}

html[data-layout="topnav"] .topnav .navbar-nav .menu-text {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* Dropdown "Más": contenido normal, con su propio scroll si crece mucho */
html[data-layout="topnav"] #topnavMoreMenu {
    max-height: 70vh;
    overflow-y: auto;
}