/* ====================================================================== */
/* RESPONSIVO (mobile) — carregar por último para sobrepor as regras acima */
/* ====================================================================== */

/* ===== TABLET (≤ 768px) ===== */
@media (max-width: 768px) {
    body { overflow-x: hidden; }

    .mobile-menu-toggle {
        display: block;
        box-shadow: var(--shadow-md);
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        z-index: 99;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.open { left: 0; }

    .main-content {
        padding: 1rem;
        padding-top: 60px;
        max-height: none;
        overflow-y: visible;
    }

    .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .page-header h2 { font-size: 18px; }
    .page-header .subtitle { font-size: 11px; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card { padding: 12px 14px; }
    .stat-card .stat-val { font-size: 22px; }

    .live-card-premium { padding: 14px 16px; }
    .live-card-premium .live-teams { flex-direction: column; text-align: center; gap: 6px; }
    .live-card-premium .live-team.right { text-align: center; }
    .live-card-premium .live-top { flex-direction: column; align-items: stretch; gap: 6px; }
    .live-card-premium .live-score { align-self: center; font-size: 16px; }
    .live-card-premium .lines-grid { flex-direction: column; gap: 4px; }

    .live-card-player-over .po-header { flex-direction: column; align-items: flex-start; gap: 2px; }
    .live-card-player-over .po-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .live-card-player-over .po-cells { justify-content: space-between; grid-template-columns: repeat(4, 1fr); }

    .goals-grid { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
    .goals-col:nth-child(3)::before { display: none; }
    .goals-head { flex-direction: column; align-items: flex-start; gap: 2px; }

    .match-card-future .mf-teams { flex-direction: column; text-align: center; gap: 4px; }
    .match-card-future .mf-team.right { text-align: center; }
    .match-card-future .mf-top { flex-direction: column; gap: 4px; }
    .match-card-future .mf-predictions { flex-wrap: wrap; gap: 4px; }

    .bet-form { grid-template-columns: 1fr; }
    .bets-table { font-size: 11px; }
    .bets-table th, .bets-table td { padding: 6px 8px; }

    .skeleton-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .skeleton-grid-cards { grid-template-columns: repeat(2, 1fr); }
    .skeleton-grid-matches { grid-template-columns: 1fr; }
}

/* ===== MOBILE PEQUENO (≤ 480px) ===== */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .stat-card { padding: 10px 12px; }
    .stat-card .stat-val { font-size: 18px; }
    .stat-card .stat-lbl { font-size: 9px; }
    .stat-card .stat-icon { font-size: 16px; }

    .live-card-premium .live-team-name { font-size: 14px; }
    .match-card-future .mf-team-name { font-size: 12px; }
    .match-card-future { padding: 10px 12px; }

    .btn { font-size: 12px; padding: 8px 14px; min-height: 40px; }
    .btn-sm { font-size: 10px; padding: 6px 10px; min-height: 32px; }

    .page-header h2 { font-size: 16px; }
    .page-header .subtitle { font-size: 11px; }

    .sidebar { width: 260px; left: -260px; }

    .live-filters { gap: 4px; }
    .live-filter-btn { padding: 5px 10px; font-size: 10px; }

    .filter-btn { padding: 5px 10px; font-size: 10px; }

    .analysis-panel { padding: 1rem; }
    .analysis-panel .prob-row { flex-direction: column; gap: 6px; }
    .analysis-panel .prob-box { padding: 8px; }
    .analysis-panel .prob-val { font-size: 18px; }
    .analysis-panel .prob-lbl { font-size: 9px; }
    .analysis-header { flex-direction: column; }
    .analysis-header .ah-actions { align-self: flex-end; }
    .prob-grid { grid-template-columns: 1fr; gap: 6px; }
    .player-lines { grid-template-columns: 1fr; }

    .players-table, .bets-table { display: block; overflow-x: auto; white-space: nowrap; font-size: 11px; }
    .players-table th, .players-table td, .bets-table th, .bets-table td { padding: 6px 8px; font-size: 10px; }

    .h2h-selector { flex-direction: column; gap: 8px; }
    .h2h-selector .form-group { min-width: 100%; }

    .bet-form { grid-template-columns: 1fr !important; gap: 8px; padding: 12px !important; }
    .bet-form > div { grid-column: 1 !important; }

    .welcome-banner { padding: 1rem; }
    .welcome-banner h1 { font-size: 16px; }
    .dash-hub { grid-template-columns: 1fr; gap: 10px; }
    .dash-actions { margin-bottom: 12px; }
    .dash-onboarding { grid-column: 1 / -1; }

    .tabs-container { overflow-x: auto; flex-wrap: nowrap; }
    .tab { font-size: 11px; padding: 6px 12px; white-space: nowrap; }

    .ad-modal-box { padding: 1.5rem; width: 95%; }
    .ad-modal-box .ad-icon { font-size: 36px; }
    .ad-modal-box h3 { font-size: 16px; }
    .ad-modal-box p { font-size: 12px; }

    .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
    .pricing-card.featured { transform: none; }

    .profile-stat-card { padding: 10px; }

    .skeleton-grid-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
    .skeleton-grid-cards { grid-template-columns: 1fr; }
    .skeleton-grid-matches { grid-template-columns: 1fr; }
    .skeleton-stat-card { padding: 12px; }
    .skeleton-live-card { min-height: 200px; padding: 14px; }
}

/* ===== TOUCH TARGETS ===== */
@media (pointer: coarse) {
    .nav-item { min-height: 44px; }
    .btn { min-height: 40px; }
    .filter-btn { min-height: 36px; }
    .live-filter-btn { min-height: 36px; }
}