/* MISQUAD · MENÚ LATERAL V22 · La V18 con cada BLOQUE claro, SIN contenedores. Va sobre menu_v2.css + menu_v18.css.
   Ni tarjetas ni fondos: cada bloque (Panel de control, Licencias, Equipos del club…) se distingue
   por su título —en blanco, algo mayor, con un punto cian luminoso y una línea que se desvanece
   hasta el borde—, por una raya fina que lo separa del anterior y por el aire entre bloques. Las
   opciones, como en la V18. Solo CSS: el HTML del menú (includes/menu.php) no cambia. */

/* El título del bloque: punto, nombre y la línea que se apaga hacia la derecha */
body .app-sidebar.app-navigation nav > ul > li.title {
    gap: 10px;
    margin: 0 !important;
    padding: 20px 18px 8px !important;
    border-top: 1px solid rgba(126, 138, 163, .16) !important;
    color: #F3F6FB !important;
    font-size: 11.5px !important;
    letter-spacing: .14em;
}
body .app-sidebar.app-navigation nav > ul > li.title::before {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22D3EE, #4DABF7) !important;
    box-shadow: 0 0 10px rgba(34, 211, 238, .9);
}
body .app-sidebar.app-navigation nav > ul > li.title::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    flex: 1 1 auto;
    min-width: 12px;
    height: 2px;
    border-radius: 2px;
    border: 0 !important;
    background: linear-gradient(90deg, rgba(34, 211, 238, .75), rgba(77, 171, 247, .25) 55%, transparent) !important;
}
/* El primer bloque, sin raya arriba (debajo del buscador) */
body .app-sidebar.app-navigation nav > ul > li.title:first-child,
body .app-sidebar.app-navigation nav > ul > li.title#mis-areas-privadas + li.title {
    padding-top: 10px !important;
    border-top: 0 !important;
}
/* Aire al final de cada bloque, antes de la raya del siguiente */
body .app-sidebar.app-navigation nav > ul > li:not(.title):has(+ li.title),
body .app-sidebar.app-navigation nav > ul > li:not(.title):last-child { padding-bottom: 12px !important; }

/* El separador de rol no es un bloque */
body .app-sidebar.app-navigation nav > ul > li.title:has(> .fa-arrow-down) { display: none !important; }

/* Menú plegado: sin títulos; la raya basta para separar */
.app-navigation-minimized nav > ul > li.title { display: none !important; }