/* MISQUAD · MENÚ LATERAL V18 · La V17 («Kiosko V4») sin morado. Va sobre menu_v2.css.
   Todo como la V17 (cristal sobre el azul oscuro #272C40, títulos con rayita en degradado, chapitas
   como los iconos de los servicios, la pantalla abierta con el borde holográfico girando), pero con
   el acento en CIAN y AZUL en vez de violeta y rosa: auroras cian arriba y azul abajo, chapitas y
   rayitas cian→azul, el holográfico cian, azul, verde menta y ámbar. */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700&family=Manrope:wght@500;600;700;800&display=swap");

@property --mlv18-ang {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes mlv18-gira { to { --mlv18-ang: 360deg; } }

body .app-sidebar.app-navigation {
    --mlv18-fondo: #272C40;
    --mlv18-ficha: rgba(45, 51, 73, .72);
    --mlv18-raya: rgba(126, 138, 163, .22);
    --mlv18-acento: #22D3EE;
    --mlv18-cian: #22D3EE;
    --mlv18-azul: #4DABF7;
    --mlv18-ambar: #FFB547;
    --mlv18-holo: conic-gradient(from var(--mlv18-ang), #22D3EE, #4DABF7, #3BFFB0, #FFB547, #22D3EE);
    --mq-lat-texto: #E8EDF5;
    --mq-lat-suave: #A3AFC6;
    --mq-lat-borde: rgba(126, 138, 163, .22);
    --mq-lat-c: #22D3EE !important;
    --mq-lat-fluor: #4DABF7 !important;
    --mq-lat-fluor-txt: #FFFFFF !important;
    background:
        radial-gradient(120% 38% at 0% 0%, rgba(34, 211, 238, .26), transparent 70%),
        radial-gradient(110% 34% at 100% 100%, rgba(77, 171, 247, .18), transparent 70%),
        linear-gradient(180deg, #283350 0%, #272C40 45%, #232838 100%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border-right: 1px solid rgba(126, 138, 163, .22) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04), 24px 0 60px -36px rgba(10, 12, 24, .9) !important;
    color: #E8EDF5;
    font-family: "Manrope", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, .45) transparent;
}
body .app-sidebar.app-navigation .app-navigation-logo { border-bottom: 1px solid var(--mq-lat-borde) !important; }

/* Buscador: barra de cristal; al escribir, el borde holográfico */
body .app-sidebar.app-navigation #menu_buscador { padding: 14px 16px 8px; }
body .app-sidebar.app-navigation #menu_buscador_input {
    height: 38px;
    border: 1px solid rgba(126, 138, 163, .28);
    border-radius: 14px;
    background: rgba(45, 51, 73, .72);
    color: #E8EDF5;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
body .app-sidebar.app-navigation #menu_buscador_input::placeholder { color: #7E8AA3; }
body .app-sidebar.app-navigation #menu_buscador_input:focus {
    border-color: transparent;
    outline: none;
    background: linear-gradient(rgba(51, 58, 85, .95), rgba(51, 58, 85, .95)) padding-box, var(--mlv18-holo) border-box;
    animation: mlv18-gira 4s linear infinite;
}
body .app-sidebar.app-navigation #menu_buscador .icon-magnifier { left: 28px; color: #A3AFC6; }
body .app-sidebar.app-navigation #menu_buscador_limpiar { right: 24px; }

/* Títulos de sección: el rótulo de la portada del kiosko, pequeño, con su rayita en degradado */
body .app-sidebar.app-navigation nav > ul > li.title {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px !important;
    padding: 12px 20px 6px !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #A3AFC6 !important;
    font-family: "Unbounded", "Manrope", sans-serif;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
}
body .app-sidebar.app-navigation nav > ul > li.title::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 18px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #22D3EE, #4DABF7) !important;
    position: static !important;
}

/* El título «Mis áreas privadas» viene oculto en el menú (style="display:none") y solo se enseña
   cuando toca: el display de arriba, con !important, no debe destaparlo (ni ningún título oculto así). */
body .app-sidebar.app-navigation nav > ul > li.title[style*="display:none"],
body .app-sidebar.app-navigation nav > ul > li.title[style*="display: none"] { display: none !important; }
/* El separador de rol («CLUB ↓», includes/menu.php: la barra verde con el nombre del rol cuando el
   menú junta varios): en esta versión no sale; los títulos de sección ya ordenan el menú. */
body .app-sidebar.app-navigation nav > ul > li.title:has(> .fa-arrow-down) { display: none !important; }

/* Opciones: aire, letra clara, el icono a la izquierda */
body .app-sidebar.app-navigation nav ul li > a {
    position: relative;
    gap: 12px;
    margin: 2px 10px !important;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    color: #E8EDF5 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .005em;
    transition: background-color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s ease;
}
/* La chapita, como el icono de un servicio del kiosko */
body .app-sidebar.app-navigation nav ul li > a span.nav-icon-cube,
body .app-sidebar.app-navigation nav ul li > a span.nav-icon-circle {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid rgba(34, 211, 238, .35) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, .28), rgba(77, 171, 247, .16)) !important;
    color: #FFFFFF !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: box-shadow .2s ease, transform .2s ease;
}
body .app-sidebar.app-navigation nav ul li > a span.nav-icon-cube n-t { color: #FFFFFF !important; }

/* Al pasar: velo suave, se desplaza un poco y la chapita brilla */
body .app-sidebar.app-navigation nav ul li > a:hover {
    border-color: rgba(126, 138, 163, .25) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transform: translateX(3px);
}
body .app-sidebar.app-navigation nav ul li > a:hover span.nav-icon-cube {
    box-shadow: 0 0 16px -2px rgba(34, 211, 238, .8), inset 0 1px 0 rgba(255, 255, 255, .15);
}

/* La pantalla abierta: pastilla de cristal con el borde holográfico girando y la chapita encendida */
body .app-sidebar.app-navigation nav ul li > a.active,
body .app-sidebar.app-navigation nav ul li > a.active:hover {
    border: 1px solid transparent !important;
    background:
        linear-gradient(rgba(51, 58, 85, .96), rgba(51, 58, 85, .96)) padding-box,
        var(--mlv18-holo) border-box !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 14px 30px -18px rgba(34, 211, 238, .9) !important;
    transform: none;
    animation: mlv18-gira 6s linear infinite;
}
body .app-sidebar.app-navigation nav ul li > a.active i-t { color: #FFFFFF !important; }
body .app-sidebar.app-navigation nav ul li > a.active span.nav-icon-cube,
body .app-sidebar.app-navigation nav ul li > a.active:hover span.nav-icon-cube {
    border-color: transparent !important;
    background: linear-gradient(135deg, #22D3EE, #4DABF7) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 20px -4px rgba(77, 171, 247, .9) !important;
}
body .app-sidebar.app-navigation nav ul li > a.active span.nav-icon-cube n-t { color: #FFFFFF !important; }

/* Desplegables: el padre abierto, marcado; los hijos sangrados con su línea de luz */
body .app-sidebar.app-navigation nav > ul > li.openable.open > a:not(.active) {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(126, 138, 163, .2) !important;
}
body .app-sidebar.app-navigation nav > ul > li.openable > a:after { color: #A3AFC6 !important; }
body .app-sidebar.app-navigation nav ul ul {
    margin: 2px 10px 8px 36px !important;
    padding: 0 0 0 8px !important;
    border-left: 1px solid transparent;
    border-image: linear-gradient(180deg, rgba(34, 211, 238, .6), rgba(77, 171, 247, .2)) 1;
}
body .app-sidebar.app-navigation nav ul ul li > a { margin: 1px 0 !important; padding: 7px 10px !important; font-size: 13px !important; font-weight: 500 !important; }
body .app-sidebar.app-navigation nav ul ul li > a span.nav-icon-cube { width: 24px !important; height: 24px !important; border-radius: 8px !important; font-size: 10.5px !important; }

/* «Mis áreas» y el botón del login único */
body .app-sidebar.app-navigation .cr-roles a,
body .app-sidebar.app-navigation .menu-login-unico > a { color: #E8EDF5 !important; }

/* El panel del login único (lu-lat): cabecera del área y ENTRAR AL ÁREA con el degradado del kiosko */
body .lu-lat.app-sidebar.app-navigation .lu-lat__cab { border-bottom-color: var(--mq-lat-borde); }
body .lu-lat.app-sidebar.app-navigation .lu-lat__ico { background: linear-gradient(135deg, #22D3EE, #4DABF7); color: #fff; box-shadow: 0 0 22px -6px rgba(34, 211, 238, .9); border: 0; }
body .lu-lat.app-sidebar.app-navigation .lu-lat__entrar { background: linear-gradient(120deg, #22D3EE, #4DABF7); color: #fff !important; box-shadow: 0 14px 30px -14px rgba(77, 171, 247, .9); }
body .lu-lat.app-sidebar.app-navigation .lu-lat__entrar--c2 { --mv-act-bg: #22D3EE; --mv-act-txt: #fff; }

@media (prefers-reduced-motion: reduce) {
    body .app-sidebar.app-navigation nav ul li > a,
    body .app-sidebar.app-navigation nav ul li > a.active,
    body .app-sidebar.app-navigation #menu_buscador_input:focus { animation: none; transition: none; transform: none; }
}

/* La barra de desplazamiento del menú: solo un tramo corto de color (56 px en el centro del tirador),
   no el tirador entero, que con menús cortos era muy largo. Con ::-webkit-scrollbar (Chrome, Edge,
   Safari); para que Chrome lo use hay que devolver scrollbar-color/width a auto. Firefox no lo
   admite y sigue con scrollbar-color (arriba). */
@supports selector(::-webkit-scrollbar) {
    body .app-sidebar.app-navigation { scrollbar-color: auto; scrollbar-width: auto; }
    body .app-sidebar.app-navigation::-webkit-scrollbar { width: 6px; background: transparent; }
    body .app-sidebar.app-navigation::-webkit-scrollbar-track { background: transparent; }
    body .app-sidebar.app-navigation::-webkit-scrollbar-thumb {
        border-radius: 6px;
        background: linear-gradient(rgba(34, 211, 238, .45), rgba(34, 211, 238, .45)) center / 100% 56px no-repeat;
    }
    body .app-sidebar.app-navigation::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(rgba(34, 211, 238, .7), rgba(34, 211, 238, .7)) center / 100% 56px no-repeat;
    }
}