/* ============ RESPONSIVE GLOBAL ============ */

/* Tablets y móviles grandes */
@media (max-width: 768px) {
    body { padding: 8px; }

    .app-title { font-size: 18px; }

    .topnav a {
        padding: 6px 10px;
        font-size: 12px;
    }

    .titulotabla { font-size: 12px; padding: 8px 12px; }
    .titulotabla2 { font-size: 12px; padding: 6px 12px; }

    .two-cols,
    .three-cols,
    .lineups-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .team-header {
        padding: 16px;
        gap: 12px;
    }

    .team-header img.team-logo {
        width: 70px;
        height: 70px;
    }

    .team-header .info h1 { font-size: 20px; }

    .club-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .team-stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .match-detail-header { padding: 16px; }
    .match-detail-header .teams { gap: 15px; }
    .match-detail-header .team-info img { width: 55px; height: 55px; }
    .match-detail-header .team-info .name { font-size: 14px; }
    .match-detail-header .score-big { font-size: 32px; }
    .match-detail-header .score-big .sep { font-size: 24px; margin: 0 6px; }

    .h2h-summary { gap: 6px; }
    .h2h-item { padding: 8px; }
    .h2h-item .h2h-value { font-size: 20px; }

    .map-container iframe { height: 220px; }

    /* Tabla: hacerla scrolleable horizontal en móvil */
    #liga-container,
    #equipo-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table#posiciones {
        min-width: 560px;
        font-size: 11px;
    }

    table#posiciones thead th,
    table#posiciones td {
        padding: 5px 3px;
    }

    .transfer-row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 10px;
    }

    .transfer-row .club,
    .transfer-row .fee {
        font-size: 10px;
    }
}

/* Móviles chicos */
@media (max-width: 480px) {
    .topbar { gap: 6px; }
    .topnav { width: 100%; }
    .topnav a { flex: 1; text-align: center; padding: 6px 4px; font-size: 11px; }

    .club-info-grid { grid-template-columns: 1fr; }
    .team-stats-row { grid-template-columns: 1fr; }

    .match-row .time { width: 42px; font-size: 11px; }
    .match-row .score { width: 58px; font-size: 12px; padding: 3px 4px; }
    .match-row .team .name { font-size: 11px; }

    .league-selector { flex-direction: column; align-items: stretch; }
    .league-selector select,
    .league-selector button { width: 100%; min-width: 0; }

    .date-nav { flex-direction: column; align-items: stretch; }
    .date-nav .current-date { order: -1; text-align: center; }

    .filter-btn { font-size: 11px; padding: 6px 10px; }
    .filter-btn .material-icons { font-size: 14px; }

    .squad-row .pos { display: none; } /* oculta posición en pantallas muy chicas */

    .match-detail-header .team-info img { width: 45px; height: 45px; }
    .match-detail-header .team-info .name { font-size: 12px; }
    .match-detail-header .score-big { font-size: 26px; }
}