/* Navegación escritorio (2026-10-27), cargada en index.php para todo el sitio.
   Botón "Categorías" en el header con menú desplegable + páginas a ancho completo. Móvil (<=768px) no cambia:
   ahí .desktop-only oculta el header y el menú hamburguesa es includes/mobile_menu.php. */

.navcat { flex: 0 0 auto; }
.navcat-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px; border: 0; border-radius: 20px;
    background: #6a017f; color: #fff; cursor: pointer;
    font: 600 14px var(--font-body, Inter), system-ui, sans-serif; white-space: nowrap;
    transition: background .15s;
}
.navcat-btn:hover, .navcat-btn[aria-expanded="true"] { background: #4a0059; }
.navcat-btn:focus-visible { outline: 2px solid #f19908; outline-offset: 2px; }
.navcat-caret { font-size: 11px; transition: transform .2s; }
.navcat-btn[aria-expanded="true"] .navcat-caret { transform: rotate(180deg); }

/* El panel se posiciona respecto a .main-nav (sticky = posicionado), justo debajo del header */
.navcat-panel {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    width: min(1240px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow-y: auto;
    display: grid; grid-template-columns: 220px 1fr;
    background: #fff; border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 40px rgba(30, 41, 59, .16); z-index: 1001;
}
.navcat-panel[hidden] { display: none; }

.navcat-quick { background: #faf5fb; padding: 20px 12px; border-radius: 0 0 0 16px; display: flex; flex-direction: column; gap: 2px; }
.navcat-quick a, .navcat-list a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    color: #1e293b; font-size: 14px; line-height: 1.25;
}
.navcat-quick a { font-weight: 600; }
.navcat-quick a i { width: 18px; text-align: center; color: #f19908; }
.navcat-quick a:hover, .navcat-list a:hover, .navcat-quick a:focus-visible, .navcat-list a:focus-visible { background: #f3e8f5; color: #6a017f; outline: none; }

.navcat-main { padding: 20px 24px 24px; min-width: 0; }
.navcat-title { font: 700 13px var(--font-heading, Outfit), sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin: 0 0 10px 10px; }
.navcat-list { columns: 4 190px; column-gap: 12px; }
.navcat-list li { break-inside: avoid; }
.navcat-list a i { width: 18px; text-align: center; color: #6a017f; opacity: .75; }
.navcat-list a.active { color: #6a017f; font-weight: 600; }
.navcat-loading { color: #94a3b8; font-size: 13px; padding: 8px 10px; }

/* Header: el buscador se estira con el espacio libre. "Inicio" sobra (lo hace el logo) y "Clubes" ya está en el menú. */
.nav-v2 .main-nav .nav-container { max-width: min(97vw, 1600px); }
.nav-v2 .nav-left .search-bar { flex: 1 1 auto; max-width: 620px; min-width: 200px; }
.nav-v2 .nav-right { gap: 20px; }
.nav-v2 .nav-right .nav-home, .nav-v2 .nav-right .nav-clubs { display: none; }

/* Laptops: los enlaces secundarios (los que traen title) quedan solo con ícono; el title hace de tooltip */
@media (max-width: 1366px) {
    .nav-v2 .nav-right { gap: 18px; }
    .nav-v2 .nav-right .nav-item[title] { font-size: 0; gap: 0; }
    .nav-v2 .nav-right .nav-item[title] i { font-size: 18px; }
}

/* Header más angosto (tablets / laptops pequeñas): solo el ícono para no empujar el resto */
@media (max-width: 1180px) {
    .navcat-btn-label { display: none; }
    .navcat-btn { padding: 0 14px; }
    .navcat-panel { grid-template-columns: 1fr; }
    .navcat-quick { flex-direction: row; flex-wrap: wrap; border-radius: 0; }
}

/* Todas las páginas a ancho completo en escritorio: la vieja columna izquierda (Explorar/Categorías/Comunidades)
   ya está en el menú del header; los listados traen sus propios filtros a la izquierda (includes/genre_listing.php).
   La <aside class="sidebar"> se quitó de index.php (2026-10-27); el móvil usa includes/mobile_menu.php. */
@media (min-width: 769px) {
    body.nav-v2 .sidebar { display: none !important; }
    body.nav-v2 .container.main-layout { grid-template-columns: 1fr !important; }
}

/* .content-area trae overflow-x:hidden (app.min.css), que la vuelve contenedor de scroll y anula el position:sticky
   de la columna de filtros de los listados; clip recorta igual sin ese efecto. */
body.nav-v2 .content-area { overflow-x: clip; }