/* ===== RESPONSIVE ESPECÍFICO PARA TARJETAS DE PARTIDOS ===== */

/* ===== Tablets y pantallas medianas ===== */
@media (max-width: 768px) {
    .match-card-new-design {
        padding: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 15px !important;
    }

    .match-header-new {
        flex-direction: row !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
        flex-wrap: wrap !important;
    }

    .hora-partido {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .countdown-container {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }

    .starts-in-label {
        font-size: 0.75rem !important;
    }

    .countdown-timer {
        font-size: 0.8rem !important;
    }

    /* === Layout de 3 columnas: flex en porcentajes === */
    .match-body-new {
        flex-direction: row !important;
        gap: 6px !important;
        align-items: stretch !important;
        min-height: auto !important;
        padding: 5px 2px !important;
    }

    .team-column {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 10px 5px !important;
        height: auto !important;
    }

    .center-column {
        flex: 1.2 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 10px 5px !important;
        gap: 6px !important;
    }

    .team-logo-new {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 8px !important;
    }

    .team-name-new {
        font-size: 0.85rem !important;
        margin-bottom: 8px !important;
        min-height: 28px !important;
        padding: 0 2px !important;
        word-break: break-word !important;
    }

    .odds-btn-new {
        min-width: 55px !important;
        max-width: 90px !important;
        width: auto !important;
        padding: 8px 10px !important;
        font-size: 0.9rem !important;
        min-height: 35px !important;
    }

    .section-title-new {
        font-size: 0.8rem !important;
        padding: 4px 6px !important;
        margin-bottom: 6px !important;
        white-space: nowrap !important;
    }

    /* Totals section (béisbol) */
    .totals-section-new {
        width: 100% !important;
    }

    .totals-section-new .section-title-new {
        text-align: center !important;
    }

    .totals-options-new {
        gap: 4px !important;
    }

    .totals-btn-vertical {
        min-height: 28px !important;
        padding: 5px 10px !important;
        font-size: 0.8rem !important;
        min-width: 55px !important;
        max-width: 90px !important;
    }

    .totals-line-value {
        font-size: 0.9rem !important;
        padding: 2px 0 !important;
    }

    .vs-separator {
        font-size: 1.1rem !important;
        margin: 4px 0 !important;
        padding: 4px 8px !important;
    }

    .totals-option-new {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Market cards (basketball) */
    .market-card {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        padding: 6px 4px !important;
    }

    .market-card .market-title {
        font-size: 0.6rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .market-card .market-btn,
    .totals-section-new .market-btn {
        min-width: 50px !important;
        max-width: none !important;
        width: 100% !important;
        padding: 4px 6px !important;
        font-size: 0.72rem !important;
        min-height: 24px !important;
    }

    .market-card .market-value,
    .totals-section-new .market-value {
        font-size: 0.72rem !important;
    }

    .markets-row {
        flex-direction: row !important;
        gap: 4px !important;
    }

    /* Basketball spread override */
    .match-body-new.has-spread .team-column {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    .match-body-new.has-spread .center-column {
        flex: 1.4 1 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 6px 2px !important;
    }
}

/* ===== Móviles pequeños ===== */
@media (max-width: 480px) {
    .match-card-new-design {
        padding: 10px !important;
        margin-bottom: 12px !important;
    }

    .match-header-new {
        padding: 8px 10px !important;
        margin-bottom: 10px !important;
        gap: 6px !important;
    }

    .match-body-new {
        gap: 4px !important;
        padding: 2px 0 !important;
    }

    .team-column {
        flex: 1 1 0 !important;
        padding: 8px 3px !important;
    }

    .center-column {
        flex: 1.3 1 0 !important;
        padding: 8px 3px !important;
        gap: 4px !important;
    }

    .team-logo-new {
        width: 42px !important;
        height: 42px !important;
        margin-bottom: 6px !important;
    }

    .team-name-new {
        font-size: 0.78rem !important;
        margin-bottom: 6px !important;
        min-height: 22px !important;
    }

    .odds-btn-new {
        min-width: 50px !important;
        max-width: 80px !important;
        padding: 6px 8px !important;
        font-size: 0.82rem !important;
        min-height: 30px !important;
    }

    .section-title-new {
        font-size: 0.72rem !important;
        padding: 3px 5px !important;
        margin-bottom: 4px !important;
    }

    .totals-btn-vertical {
        min-height: 24px !important;
        padding: 4px 8px !important;
        font-size: 0.72rem !important;
        min-width: 48px !important;
        max-width: 80px !important;
    }

    .totals-line-value {
        font-size: 0.82rem !important;
        padding: 2px 0 !important;
    }

    .vs-separator {
        font-size: 1rem !important;
        margin: 3px 0 !important;
        padding: 3px 6px !important;
    }

    .hora-partido {
        font-size: 0.72rem !important;
        padding: 4px 8px !important;
    }

    .countdown-container {
        padding: 4px 8px !important;
    }

    .starts-in-label {
        font-size: 0.68rem !important;
    }

    .countdown-timer {
        font-size: 0.72rem !important;
    }

    /* Market cards para basketball en móvil */
    .markets-row {
        flex-direction: row !important;
        gap: 3px !important;
    }

    .market-card {
        padding: 4px 3px !important;
    }

    .market-card .market-title {
        font-size: 0.55rem !important;
        margin-bottom: 3px !important;
        padding-bottom: 2px !important;
    }

    .market-card .market-btn,
    .totals-section-new .market-btn {
        min-width: 44px !important;
        padding: 3px 5px !important;
        font-size: 0.68rem !important;
        min-height: 22px !important;
    }

    .market-card .market-value,
    .totals-section-new .market-value {
        font-size: 0.68rem !important;
    }

    /* Basketball spread en móvil pequeño */
    .match-body-new.has-spread .center-column {
        flex: 1.5 1 0 !important;
    }
}

/* ===== Móviles muy pequeños ===== */
@media (max-width: 360px) {
    .match-card-new-design {
        padding: 8px !important;
    }

    .match-header-new {
        padding: 6px 8px !important;
    }

    .match-body-new {
        gap: 3px !important;
    }

    .team-column {
        padding: 6px 2px !important;
    }

    .center-column {
        padding: 6px 2px !important;
    }

    .team-logo-new {
        width: 36px !important;
        height: 36px !important;
    }

    .team-name-new {
        font-size: 0.7rem !important;
        min-height: 18px !important;
    }

    .odds-btn-new {
        min-width: 42px !important;
        max-width: 70px !important;
        padding: 5px 6px !important;
        font-size: 0.75rem !important;
        min-height: 28px !important;
    }

    .totals-btn-vertical {
        min-height: 22px !important;
        padding: 3px 6px !important;
        font-size: 0.68rem !important;
        min-width: 42px !important;
        max-width: 70px !important;
    }

    .market-card .market-btn,
    .totals-section-new .market-btn {
        min-width: 38px !important;
        padding: 2px 4px !important;
        font-size: 0.62rem !important;
    }

    .market-card .market-title {
        font-size: 0.5rem !important;
    }

    .market-card .market-value,
    .totals-section-new .market-value {
        font-size: 0.62rem !important;
    }
}