/* ============================================================================
   PENCA MUNDIAL 2026 — Responsive v2.0
   ============================================================================ */

/* Breakpoints */
:root {
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* Imágenes y videos */
img, video, iframe { max-width: 100%; height: auto; }

/* Contenedor responsive */
.container {
    width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ── Match cards responsive ── */
@media (max-width: 480px) {
    .match-card__body { padding: 12px 14px; }
    .match-team__name { font-size: .82rem; }
    .match-center { padding: 8px 10px; min-width: 56px; }
    .match-center__score { font-size: 1.5rem; }
    .prono-input { width: 34px; height: 30px; font-size: .9rem; }
}

/* ── Rank rows responsive ── */
@media (max-width: 480px) {
    .rank-row { padding: 9px 12px; gap: 9px; }
    .rank-name { font-size: .82rem; }
    .rank-pts { font-size: 1.2rem; }
}

/* ── Podio responsive ── */
@media (max-width: 480px) {
    .podio { gap: 4px; }
    .podio__item--1 .podio__avatar { width: 56px; height: 56px; font-size: 18px; }
    .podio__item--1 .podio__bar { width: 68px; height: 64px; }
    .podio__item--2 .podio__bar, .podio__item--3 .podio__bar { width: 56px; }
}

/* ── Countdown responsive ── */
@media (max-width: 400px) {
    .countdown { gap: 6px; }
    .countdown__box { min-width: 52px; padding: 10px 10px; }
    .countdown__num { font-size: 2rem; }
}

/* ── Form responsive ── */
@media (max-width: 520px) {
    .form-box { padding: 28px 20px; border-radius: var(--r-lg); }
    .field-row-2 { grid-template-columns: 1fr; }
}

/* ── Section titles responsive ── */
@media (max-width: 480px) {
    .section-title { font-size: 1.8rem; }
}

/* ── Stat cards grid responsive ── */
@media (max-width: 480px) {
    .stat-card__num { font-size: 1.7rem; }
}

/* ── Tables responsive ── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Botones responsive ── */
@media (max-width: 380px) {
    .btn--lg { padding: 11px 20px; font-size: .9rem; }
    .btn { padding: 9px 16px; font-size: .82rem; }
}

/* ── Footer responsive ── */
@media (max-width: 768px) {
    .site-footer { padding: 32px 16px 20px; margin-top: 48px; }
    .site-footer__inner { flex-direction: column; gap: 20px; }
}

/* ── Group cards responsive ── */
@media (max-width: 480px) {
    .group-table th:nth-child(n+5),
    .group-table td:nth-child(n+5) { display: none; }
}

/* ── Live dot animation ── */
@keyframes pulse-live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,.5); }
    50% { box-shadow: 0 0 0 5px rgba(230,57,70,0); }
}
.live-dot { animation: pulse-dot 1.2s ease-in-out infinite, pulse-live 2s ease-in-out infinite; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-border); }

/* ══════════════════════════════════════════════════════════════
   PENCA MUNDIAL 2026 — Responsive v3.0 (PWA update)
   ══════════════════════════════════════════════════════════════ */

/* ── Ajuste body top cuando hay ticker sticky ── */
body { overflow-x: hidden; }

/* ── Safe area para iOS (notch/home bar) ── */
@supports (padding: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .site-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ── Grids responsive generales ── */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns"] {
        /* No override inline, solo los que usen las clases */
    }
}

/* ── Pronosticos page ── */
@media (max-width: 600px) {
    .match-card__body { padding: 12px 10px; gap: 8px; }
    .match-team { gap: 7px; }
    .match-team__name { font-size: .8rem; }
    .match-flag { width: 32px; height: 22px; font-size: 18px; }
    .match-center { padding: 8px 10px; min-width: 60px; }
    .match-center__score { font-size: 1.5rem; }
    .prono-input { width: 34px; height: 30px; font-size: .9rem; }
    .match-card__header { padding: 5px 10px; font-size: .65rem; }
}

/* ── Clasificacion / Ranking ── */
@media (max-width: 600px) {
    .rank-row { padding: 9px 10px; gap: 8px; }
    .rank-name { font-size: .8rem; }
    .rank-pts { font-size: 1.1rem; }
    .rank-pos { font-size: 1rem; min-width: 28px; }
}

/* ── Grupos: tabla simplificada en mobile ── */
@media (max-width: 540px) {
    .group-table th:nth-child(n+5),
    .group-table td:nth-child(n+5) { display: none; }
    .group-table th, .group-table td { padding: 7px 8px; font-size: .75rem; }
}
@media (max-width: 380px) {
    .group-table th:nth-child(n+4),
    .group-table td:nth-child(n+4) { display: none; }
}

/* ── Cards con grid ── */
@media (max-width: 640px) {
    .stat-cards-grid, .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 340px) {
    .stat-cards-grid, .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Podio responsive ── */
@media (max-width: 480px) {
    .podio { gap: 4px; }
    .podio__item--1 .podio__avatar { width: 54px; height: 54px; font-size: 18px; }
    .podio__item--1 .podio__bar { width: 70px; height: 60px; }
    .podio__item--2 .podio__bar,
    .podio__item--3 .podio__bar { width: 58px; }
    .podio__user { font-size: .68rem; }
}

/* ── Countdown responsive ── */
@media (max-width: 400px) {
    .countdown { gap: 5px; justify-content: center; }
    .countdown__box { min-width: 52px; padding: 10px 8px; }
    .countdown__num { font-size: 1.9rem; }
    .countdown__lbl { font-size: .6rem; }
}

/* ── Forms ── */
@media (max-width: 520px) {
    .form-box { padding: 24px 16px; border-radius: var(--r-lg); }
    .field-row-2 { grid-template-columns: 1fr; }
}

/* ── Campeon page ── */
@media (max-width: 480px) {
    .section-title { font-size: 1.7rem; }
    .stat-card__num { font-size: 1.6rem; }
}

/* ── Activity widget: posicion en mobile ── */
@media (max-width: 480px) {
    #activity-widget {
        bottom: 16px;
        right: 12px;
    }
    #activity-panel {
        width: calc(100vw - 24px);
        right: 0;
        position: fixed;
        bottom: 72px;
    }
}

/* ── Footer ── */
@media (max-width: 768px) {
    .site-footer { padding: 32px 16px 20px; margin-top: 48px; }
    .site-footer__inner { flex-direction: column; gap: 20px; }
}
@media (max-width: 480px) {
    .site-footer__inner { gap: 16px; }
}

/* ── Tabla responsiva general ── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
    table { min-width: 400px; }
}

/* ── Botones en mobile ── */
@media (max-width: 380px) {
    .btn--lg { padding: 11px 18px; font-size: .88rem; }
    .btn { padding: 9px 14px; font-size: .82rem; }
}

/* ── Scrollbar fino ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2,#122B5A); }
::-webkit-scrollbar-thumb { background: var(--border,rgba(45,174,247,.14)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-border,rgba(45,174,247,.4)); }

/* ══════════════════════════════════════════════════════════════
   PENCA MUNDIAL 2026 — Responsive v4.0 (Header/Footer unification fix)
   ══════════════════════════════════════════════════════════════ */

/* ── Campeon grid ── */
@media (max-width: 768px) {
    .campeon-grid { grid-template-columns: 1fr !important; }
    .equipo-select-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 420px) {
    .equipo-select-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Perfil grid ── */
@media (max-width: 768px) {
    .perfil-grid { grid-template-columns: 1fr !important; }
}

/* ── Término y condiciones (tyc-wrap) ── */
@media (max-width: 768px) {
    .tyc-wrap { grid-template-columns: 1fr !important; gap: 16px !important; }
    .tyc-nav { position: static !important; }
}

/* ── Partido hero ── */
@media (max-width: 600px) {
    .partido-teams { gap: 10px; }
    .team-flag-big { width: 60px; height: 44px; }
    .team-name-big { font-size: 1.1rem; }
    .marcador-score { font-size: 2.2rem; }
    .pronos-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Calendario ── */
@media (max-width: 640px) {
    .phase-nav { gap: 6px; }
    .phase-btn { padding: 5px 12px; font-size: .72rem; }
}

/* ── Grupos grid ── */
@media (max-width: 500px) {
    .grupos-grid { grid-template-columns: 1fr !important; }
}

/* ── Clasificacion: podio ── */
@media (max-width: 400px) {
    .podio-clasif { gap: 6px; }
}

/* ── Contenedores con padding generoso en desktop, ajustado en móvil ── */
@media (max-width: 480px) {
    .container { padding-left: 12px; padding-right: 12px; }
    [class*="__inner"] { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ── Activity panel en mobile ── */
@media (max-width: 480px) {
    #activity-panel { 
        width: calc(100vw - 24px) !important; 
        max-height: 60vh !important;
    }
}

/* ── Overflow global ── */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════════════════
   FWC 2026 UltraCondensed Bold — Aplicación global de títulos
   ══════════════════════════════════════════════════════════════ */

/* Aplicar a todos los h1-h4 del sitio */
h1, h2, h3, h4,
.section-title,
.bebas,
.form-box__title,
.form-box__sub,
[class*="section-title"],
[class*="__title"][class*="bebas"] {
    font-family: 'FWC2026', 'Bebas Neue', sans-serif;
}

/* Subtítulos específicos del diseño */
.navbar .sidebar-brand span,
.admin-topbar h1,
.admin-section-title,
.admin-card__title,
.grupo-titulo,
.section-tag,
.live-card__badge,
.proximo-card__hora,
.stat-pill__num,
.countdown__num,
.podio__pts,
.rank-pts,
.top10-pts,
.top10-pos,
.cd-num,
.marcador-score,
.live-card__num,
.score-pill__pts {
    font-family: 'FWC2026', 'Bebas Neue', sans-serif;
}