/*
 * ============================================================
 *  SOMOSPADEL BCN — RESPONSIVE GLOBAL v1.0
 *  Garantía de dimensionado correcto de pestañas y contenido
 *  en todos los dispositivos: móvil, tablet y escritorio.
 * ============================================================
 *
 *  BREAKPOINTS:
 *    xs  → < 480px   (Móvil pequeño: iPhone SE, Galaxy A)
 *    sm  → 480–767px (Móvil grande: iPhone Pro Max, Galaxy S)
 *    md  → 768–1023px (Tablet: iPad, Galaxy Tab)
 *    lg  → ≥ 1024px  (Escritorio y portátiles)
 * ============================================================
 */

/* ────────────────────────────────────────────────────────────
   1. BASE GLOBAL – sin scroll horizontal en ningún dispositivo
   ──────────────────────────────────────────────────────────── */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* ────────────────────────────────────────────────────────────
   2. HEADER / FIXED HEADER – dimensionado consistente
   ──────────────────────────────────────────────────────────── */
.dashboard-fixed-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10001 !important;
    /* altura auto para adaptarse a ticker + cmd-bar */
    height: auto !important;
}

/* ────────────────────────────────────────────────────────────
   3. COMMAND BAR (top bar con logo y avatar)
   ──────────────────────────────────────────────────────────── */
.cmd-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* altura base escritorio */
    height: 58px !important;
    padding: 0 20px !important;
    gap: 12px !important;
}

/* ────────────────────────────────────────────────────────────
   4. HEADER TABS & FIXED HEADER HEIGHT
   Ocultar barra de tabs neon duplicada; el menú principal
   se gestiona a través de la barra inferior y submenús dedicados.
   ──────────────────────────────────────────────────────────── */
:root {
    --header-actual-height: 96px;
}

.nav-tabs-wrapper {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.header-tabs-inner {
    display: none !important;
}

.nav-tabs-handle {
    display: none !important;
}

/* ────────────────────────────────────────────────────────────
   5. CONTENT AREA – padding top dinámico
   Referencia: ticker ~28-36px + cmd-bar ~58-64px = ~96-104px base
   ──────────────────────────────────────────────────────────── */
main#content-area {
    padding-top: var(--header-actual-height, 104px) !important;
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 15px)) !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ────────────────────────────────────────────────────────────
   6. BOTTOM NAV BAR – altura y safe-area correctas
   ──────────────────────────────────────────────────────────── */
.bottom-nav-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;         /* dejar que el padding marque la altura */
    min-height: 60px !important;
    padding-top: 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
}

/* Ítem de la bottom nav: tamaño mínimo cómodo para el toque */
.nav-item {
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 2px !important;
    margin: 0 !important;
    min-width: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

.nav-item i {
    width: 28px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease !important;
}

.nav-item span {
    font-size: 0.60rem !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.35px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   MÓVIL XS (<480px) – Teléfonos pequeños
   ════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {

    .cmd-bar {
        height: 58px !important;
        padding: 0 8px !important;
        gap: 5px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* Ticker puede ser más compacto */
    .ticker-container {
        height: 24px !important;
    }

    main#content-area {
        padding-top: var(--header-actual-height, 88px) !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .bottom-nav-bar {
        min-height: 56px !important;
    }

    .nav-item span {
        font-size: 0.52rem !important;
    }

    .nav-item i {
        font-size: 1.1rem !important;
    }
}

/* ════════════════════════════════════════════════════════════
   MÓVIL SM (480–767px) – Teléfonos grandes
   ════════════════════════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 767px) {

    .cmd-bar {
        height: 56px !important;
        padding: 0 14px !important;
    }

    main#content-area {
        padding-top: var(--header-actual-height, 94px) !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .bottom-nav-bar {
        min-height: 60px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   TABLET MD (768–1023px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {

    .cmd-bar {
        height: 60px !important;
        padding: 0 24px !important;
    }

    main#content-area {
        padding-top: var(--header-actual-height, 100px) !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: 960px !important;
        margin: 0 auto !important;
    }

    .bottom-nav-bar {
        min-height: 64px !important;
        padding-top: 10px !important;
    }

    .nav-item span {
        font-size: 0.65rem !important;
    }

    .nav-item i {
        font-size: 1.35rem !important;
    }
}

/* ════════════════════════════════════════════════════════════
   ESCRITORIO LG (≥1024px)
   - Bottom-nav visible (no hay sidebar de navegación)
   - Header tabs visible
   - Contenido centrado sin sidebars
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .cmd-bar {
        height: 62px !important;
        padding: 0 32px !important;
    }

    /* Bottom nav visible en desktop: sidebars eliminados */
    .bottom-nav-bar {
        display: flex !important;
    }

    /* Content area centrado, sin padding para sidebars */
    main#content-area {
        padding-top: var(--header-actual-height, 108px) !important;
        padding-bottom: 90px !important;
        max-width: 860px !important;
        margin: 0 auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Sidebars: ocultos permanentemente */
    #desktop-left-sidebar,
    #desktop-right-sidebar {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   ESCRITORIO XL (≥1280px) – Pantallas grandes
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

    main#content-area {
        max-width: 960px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    #desktop-left-sidebar,
    #desktop-right-sidebar {
        display: none !important;
    }
}


/* ════════════════════════════════════════════════════════════
   PANTALLAS MUY ALTAS (Tablets en landscape, portátiles)
   ════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
    /* En landscape con pantalla corta reducir alturas */
    .cmd-bar {
        height: 46px !important;
    }

    .bottom-nav-bar {
        min-height: 48px !important;
        padding-top: 4px !important;
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    }

    main#content-area {
        padding-top: 76px !important;
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ────────────────────────────────────────────────────────────
   7. SUBNAV TABS (pills de sub-secciones dentro de cada pestaña)
   ──────────────────────────────────────────────────────────── */
.subnav-tabs-container {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.subnav-tabs-container::-webkit-scrollbar {
    display: none !important;
}

/* ────────────────────────────────────────────────────────────
   8. PREVENIR CONTENIDO CORTADO EN CARDS Y SECCIONES
   ──────────────────────────────────────────────────────────── */

/* Asegurar que ninguna sección desborde horizontalmente */
.dashboard-v2-container,
.ranking-global-wrapper,
.broadcast-container,
.events-list-container,
.profile-container,
.americanas-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Cards que puedan tener contenido wide */
[class*="-card"],
[class*="card-"],
.card {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Imágenes responsivas */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Excepción específica para el logo compacto interactivo de login */
#login-ball-img {
    width: 82px !important;
    max-width: 82px !important;
    height: 82px !important;
    object-fit: contain !important;
}