@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body { font-family: 'Inter', sans-serif; background: #f0f4ff; margin: 0; }
.navbar { background: linear-gradient(135deg, #6a11cb, #2575fc); }
.navbar-brand { font-weight: 700; letter-spacing: 0.5px; }
.card { border: none; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.table th { background-color: #f8f9fa; font-weight: 600; border-top: none; }
.btn { border-radius: 10px; font-weight: 500; padding: 0.5rem 1.2rem; }
.btn-primary { background: linear-gradient(135deg, #6a11cb, #2575fc); border: none; }
.btn-success { background: linear-gradient(135deg, #00c853, #69f0ae); border: none; color: #000; }
.alert { border-radius: 12px; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.score-input { width: 80px; text-align: center; font-size: 1.2rem; font-weight: 600; border-radius: 8px; border: 1px solid #ced4da; }
.form-control:focus { border-color: #2575fc; box-shadow: 0 0 0 0.2rem rgba(37,117,252,0.25); }
.table-locked { background-color: #e6f9e6 !important; }
.table-locked input:disabled { background-color: #e6f9e6; border-color: #28a745; }
.is-invalid { border-color: #dc3545 !important; }
.puntos-exacto { background-color: #00c853; color: white; padding: 2px 8px; border-radius: 20px; font-weight: bold; }
.puntos-ganador { background-color: #ff9100; color: white; padding: 2px 8px; border-radius: 20px; font-weight: bold; }
.puntos-incorrecto { background-color: #ff1744; color: white; padding: 2px 8px; border-radius: 20px; font-weight: bold; }
.puntos-pendiente { background-color: #6c757d; color: white; padding: 2px 8px; border-radius: 20px; font-weight: bold; }
.ranking-header { background: linear-gradient(135deg, #ff6d00, #ff9100); border-radius: 16px; padding: 1.5rem; color: white; margin-bottom: 1.5rem; text-align: center; }
.ranking-gold { background: linear-gradient(135deg, #ffd700, #ffb900); font-weight: bold; color: #000; }
.ranking-silver { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); font-weight: bold; color: #000; }
.ranking-bronze { background: linear-gradient(135deg, #cd7f32, #b86b2a); font-weight: bold; color: #fff; }
.medal-icon { font-size: 1.8rem; margin-right: 5px; }
.resultado-real-badge { background-color: #e9ecef; border: 1px solid #dee2e6; border-radius: 8px; padding: 4px 12px; font-weight: 700; font-size: 1rem; display: inline-block; }
.progress { background-color: #e9ecef; border-radius: 20px; height: 12px; }
.progress-bar { border-radius: 20px; transition: width 0.5s ease; background: linear-gradient(135deg, #6a11cb, #2575fc); }
.card-header.bg-dark { background-color: #1e293b !important; }
.table thead.bg-dark th { background-color: #1e293b !important; color: white; }
.card.text-bg-primary { background: linear-gradient(135deg, #6a11cb, #2575fc) !important; }
.card.text-bg-success { background: linear-gradient(135deg, #00c853, #69f0ae) !important; color: #000 !important; }
.card.text-bg-info { background: linear-gradient(135deg, #00b0ff, #40c4ff) !important; }
.card.text-bg-warning { background: linear-gradient(135deg, #ff9100, #ffab40) !important; color: #000 !important; }
.modal-biblico .modal-content { border-radius: 20px; background: linear-gradient(145deg, #fff8e1, #ffe082); }
.modal-biblico .modal-header { background: #5d4037; color: white; border-radius: 18px 18px 0 0; }
.timer-bar { height: 6px; background: #ff5252; transition: width 0.1s linear; }
/* Tarjetas móviles */
.match-card { background: white; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 1rem; margin-bottom: 1rem; }
.match-card .match-teams { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; }
.match-card .match-info { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.9rem; color: #6c757d; }
.match-card .match-score { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
.match-card .match-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.frase-motivacional { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border-left: 5px solid #00c853; padding: 10px 15px; border-radius: 8px; margin-bottom: 20px; font-style: italic; }
@media (max-width: 768px) {
    .d-md-table { display: none !important; }
    .d-md-cards { display: block !important; }
}
@media (min-width: 769px) {
    .d-md-table { display: table !important; }
    .d-md-cards { display: none !important; }
}

/* Corrección móvil: mostrar partidos agrupados debajo de cada fecha, sin lista de fechas separada */
.fecha-hoy {
    background: #fff3cd !important;
    border-radius: 14px;
    padding: 0.75rem;
}
.mobile-date-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: #fff !important;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    margin: 1rem 0 0.75rem 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    font-weight: 700;
}
@media (max-width: 767.98px) {
    .fecha-section-desktop {
        display: none !important;
    }
    .match-card {
        margin-bottom: 0.85rem;
    }
    .match-card .match-teams {
        flex-wrap: wrap;
        text-align: center;
        line-height: 1.35;
    }
    .match-card .match-info,
    .match-card .match-actions {
        gap: 0.5rem;
    }
}
