/* =================================================================
   12. RESPONSIVIDADE E MEDIA QUERIES
   ================================================================= */
/* --- Telas de Tablet --- */
@media (max-width: 768px) {
    :root {
        --bg-surface: rgba(255, 255, 255, 0.95);
        --bg-surface-header: rgba(255, 255, 255, 0.98);
        --bg-navbar: rgba(255, 255, 255, 0.98);
    }

    :root.dark-mode {
        --bg-surface: rgba(15, 18, 25, 0.95);
        --bg-surface-header: rgba(20, 24, 35, 0.98);
        --bg-navbar: rgba(10, 12, 18, 0.98);
    }

    .main-container, .navbar, .hero-section, .card, .stats-card, .action-card, .info-card, .partida-card, .ranking-card, .nav-tabs .nav-link, .etapa-section, .login-container, .modal-content, .alert-info, .chat-container, .classificacao-sidebar-header, .classificacao-grupo-card, .filter-bar, .pwa-offline-banner, .pwa-ios-prompt-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .chat-container {
        background-color: var(--bg-card) !important;
    }

    .page-content-top { margin-top: 60px; }
    .hero-section { padding: 1.5rem 0; margin-bottom: 1.5rem; }
    .main-container { margin: 10px; padding: 20px; border-radius: 15px; }
    .action-card { padding: 1.5rem; }
    .action-icon { font-size: 2.5rem; }
    .stats-card { padding: 1rem; }
    .chart-container {
      position: relative;
      min-height: 400px;
      width: 100%;
    }
}

/* --- Telas de Celular --- */
@media (max-width: 576px) {
    .page-content-top { margin-top: 60px; }
    .hero-section h1 { font-size: 2rem; }
    .ranking-position h2 { font-size: 1.5rem; }
    .btn-lg { padding: 10px 20px; font-size: 1rem; }

    .login-container { width: 95%; }
    .login-header, .login-body { padding: 1.5rem; }
    .login-header h3 { font-size: 1.5rem; }

    .partida-card .time-vs { flex-direction: row; gap: 10px; }
    .partida-card .vs-separator { display: block; }
    .partida-card-logo { height: 35px; }
    .alert ul.small { font-size: 0.8rem; }

    .chat-box {
        max-height: 65vh;
    }

    .chat-container.minimized {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        bottom: 15px;
        right: 15px;
    }
    .chat-container.minimized .card-header {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }
    .chat-container.minimized .card-header h5 {
        font-size: 1.5rem;
        margin: 0;
    }
    .chat-container.minimized .chat-header-text,
    .chat-container.minimized #chat-notification-badge {
        display: none;
    }
}