/**
 * Menú principal (index.php): iconos, títulos de grupo, dos columnas (el club y el calendario), enlaces externos marcados,
 * el botón de boletas y la sección actual resaltada (en su enlace y en su menú). En móvil (hasta 991px) los menús se
 * abren dentro de la hamburguesa, sobre fondo oscuro.
 * @author Aris Mota <soy@aris.do>
 * @version 1.0
 * @date 2026-10-26
 */

/* ------------------------------------------------------------------ Escritorio */
.navbar .dropdown-menu { padding: 8px 0; border: 0; border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.navbar .dropdown-menu > li > a, .navbar .menu-columna > li > a { display: flex; align-items: center; padding: 7px 20px 7px 16px; color: #222; font-size: 14px; line-height: 1.4; white-space: nowrap; transition: background .15s, color .15s; }
.navbar .menu-columna { margin: 0; padding: 0; list-style: none; }
.navbar .dropdown-menu > li > a:hover, .navbar .dropdown-menu > li > a:focus, .navbar .menu-columna > li > a:hover, .navbar .menu-columna > li > a:focus { background: #fd3f00; color: #fff; text-decoration: none; }
.menu-icono { flex: 0 0 18px; width: 18px; margin-right: 10px; color: #fd3f00; font-size: 13px; text-align: center; transition: color .15s; }
.navbar .dropdown-menu a:hover .menu-icono, .navbar .dropdown-menu a:focus .menu-icono { color: #fff; }
.menu-externo { margin-left: 6px; font-size: 9px; opacity: .45; }
.navbar .dropdown-menu .dropdown-header { padding: 12px 20px 4px 16px; color: #999; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.navbar .dropdown-menu .divider { margin: 6px 0; background: #eee; }

/* La sección actual */
.navbar .dropdown-menu > li.active > a, .navbar .menu-columna > li.active > a { background: #fff3ec; color: #fd3f00; font-weight: 700; box-shadow: inset 3px 0 0 #fd3f00; }
.navbar .dropdown-menu > li.active > a:hover, .navbar .menu-columna > li.active > a:hover { background: #fd3f00; color: #fff; }
.navbar-inverse .navbar-nav > li.active > a, .navbar-inverse .navbar-nav > li.active > a:hover, .navbar-inverse .navbar-nav > li.active > a:focus { background: transparent; color: #fff; box-shadow: inset 0 -3px 0 #fd3f00; }

/* Dos columnas: el club y el calendario */
.navbar .menu-columnas { display: flex; gap: 6px; }
.navbar .menu-columna { flex: 1 1 0; min-width: 220px; }

/* Comprar boletas o abonarse */
.navbar .dropdown-menu > li.menu-boletas { padding: 4px 10px 6px; }
.navbar .dropdown-menu > li.menu-boletas > a { justify-content: center; padding: 9px 16px; border-radius: 8px; background: #fd3f00; color: #fff; font-weight: 700; letter-spacing: .02em; }
.navbar .dropdown-menu > li.menu-boletas > a:hover, .navbar .dropdown-menu > li.menu-boletas > a:focus { background: #000; color: #fff; }
.navbar .menu-boletas .menu-icono { flex: 0 0 auto; width: auto; color: #fff; }

/* ------------------------------------------------------------------ Móvil: dentro de la hamburguesa */
@media (max-width: 991px) {
    #navbar .pull-left, #navbar .navbar-nav { width: 100%; }
    .navbar-nav > li > .dropdown-menu { width: 100%; }
    .navbar .dropdown-menu { border-radius: 0; box-shadow: none; }
    .navbar .menu-columnas { display: block; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .menu-columna > li > a { padding: 8px 15px 8px 25px; color: #bbb; white-space: normal; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .menu-columna > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-inverse .navbar-nav .open .menu-columna > li > a:focus { background: rgba(255, 255, 255, .06); color: #fff; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li.active > a, .navbar-inverse .navbar-nav .open .menu-columna > li.active > a { background: rgba(253, 63, 0, .15); color: #fff; }
    .navbar .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 12px 15px 4px 25px; color: #777; }
    .navbar .dropdown-menu .divider { background: rgba(255, 255, 255, .1); }
    .navbar .dropdown-menu > li.menu-boletas { padding: 6px 15px 8px 25px; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li.menu-boletas > a { padding: 10px 16px; color: #fff; }
    .navbar-inverse .navbar-nav > li.active > a { box-shadow: inset 3px 0 0 #fd3f00; }
}