/* Portal del jugador: en móvil el menú (Inicio / Mis Turnos / Torneos) pasa a
   una barra fija abajo, estilo app. Arriba quedan marca, idioma, tema y usuario.
   Es un <nav> aparte (fuera de .p-navbar): .p-navbar tiene backdrop-filter, que
   ataría cualquier hijo position:fixed a la barra en vez de a la pantalla.
   Solo lo carga jugador/header.php (portal.css lo comparten otros portales). */

:root { --jn-alto: 4.1rem; }

.jugador-bottom-nav { display: none; }

@media (max-width: 820px) {
    .p-navbar-jugador .p-nav-toggle,
    .p-navbar-jugador .p-nav-links { display: none !important; }

    /* Sin menú arriba, la barra superior entra en una sola fila: si el nombre
       no entra, se corta con "…" en vez de mandar los botones a otra línea. */
    .p-navbar-jugador .container-fluid {
        flex-wrap: nowrap !important;
        gap: .5rem !important;
        height: 58px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .p-navbar-jugador .p-nav-brand { min-width: 0; flex: 1 1 auto; }
    .p-navbar-jugador .container-fluid > .d-flex { flex-shrink: 0; }

    .jugador-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        height: calc(var(--jn-alto) + env(safe-area-inset-bottom));
        padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
        justify-content: space-around;
        align-items: stretch;
        gap: .25rem;
        background: rgba(15, 23, 42, .94);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
        border-top: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 -10px 28px rgba(0, 0, 0, .35);
    }

    .jugador-bottom-nav a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        padding: .25rem;
        border-radius: .9rem;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .01em;
        color: var(--p-muted, #94a3b8);
        text-decoration: none;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s ease, transform .12s ease;
    }

    .jugador-bottom-nav a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .jugador-bottom-nav a:hover { color: var(--p-text, #f1f5f9); }
    .jugador-bottom-nav a:active { transform: scale(.94); }
    .jugador-bottom-nav a:focus-visible { outline: 2px solid var(--p-green); outline-offset: -2px; }

    /* Ícono dentro de una "píldora"; la activa se llena con el degradé del complejo. */
    .jugador-bottom-nav a i {
        font-size: 1.25rem;
        line-height: 1;
        width: 3.2rem;
        height: 1.95rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50rem;
        transition: background .2s ease, color .2s ease;
    }

    .jugador-bottom-nav a.active { color: var(--p-text, #f1f5f9); font-weight: 700; }

    .jugador-bottom-nav a.active i {
        color: #fff;
        background: linear-gradient(135deg, var(--p-green), #0d4c94);
        box-shadow: 0 6px 16px -6px var(--p-green);
    }

    html[data-bs-theme="light"] .jugador-bottom-nav {
        background: rgba(255, 255, 255, .95);
        border-top-color: rgba(15, 23, 42, .08);
        box-shadow: 0 -10px 28px rgba(15, 23, 42, .1);
    }

    html[data-bs-theme="light"] .jugador-bottom-nav a { color: #64748b; }
    html[data-bs-theme="light"] .jugador-bottom-nav a:hover,
    html[data-bs-theme="light"] .jugador-bottom-nav a.active { color: #0f172a; }

    body.jugador-nav-abajo { padding-bottom: calc(var(--jn-alto) + env(safe-area-inset-bottom)); }
}

/* Ficha del complejo: sus pestañas también son barra inferior en móvil
   (ver assets/css/cd-tabs-movil.css). Van apiladas justo arriba del menú. */
@media (max-width: 767.98px) {
    body.jugador-nav-abajo .cd-tabs {
        bottom: calc(var(--jn-alto) + env(safe-area-inset-bottom)) !important;
        padding-bottom: 0 !important;
        box-shadow: none !important;
    }

    body.jugador-nav-abajo.cd-tabs-abajo {
        padding-bottom: calc(var(--jn-alto) + 4.25rem + env(safe-area-inset-bottom));
    }
}