@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&display=swap');

#sv-sched-wrapper {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    max-width: 1000px;
    margin: 0 auto;
    color: #1e293b;
}
#sv-sched-wrapper * { box-sizing: border-box; }

/* --- FILTROS --- */
.sv-sched-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    background: #ffffff;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.sv-filter-input {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: #334155;
    background: #f8fafc;
    outline: none;
    flex: 1;
    min-width: 140px;
    transition: border-color 0.2s;
}
.sv-filter-input:focus {
    border-color: #003968;
    background: #ffffff;
}

/* --- CARDS HORIZONTALES --- */
.sv-sched-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sv-sched-card {
    display: flex;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}
.sv-sched-card:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}

/* Sección 1: Info (Izquierda) */
.sv-sched-info {
    background: #f1f5f9;
    padding: 8px 12px;
    min-width: 140px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sv-info-date { font-weight: 800; color: #0f172a; font-size: 13px; margin-bottom: 2px; }
.sv-info-time { font-weight: 900; color: #003968; font-size: 16px; margin-bottom: 2px; }
.sv-info-badge { 
    display: inline-block; padding: 2px 6px; background: #e2e8f0; color: #475569; 
    font-size: 10px; font-weight: 700; border-radius: 4px; margin-bottom: 2px; width: fit-content;
}
.sv-info-meta { font-size: 11px; color: #64748b; font-weight: 600; margin-bottom: 1px; }

/* Sección 2: Scoreboard Integrado (Derecha) */
.sv-sched-main {
    flex: 1;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sv-sched-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.sv-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Separa equipo y puntos */
    gap: 8px;
    margin-bottom: 6px;
}
.sv-team-row:last-child {
    margin-bottom: 0;
}

.sv-team-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0; /* Para permitir elipsis si el nombre es largo */
}
.sv-team-logo {
    width: 24px; height: 24px;
    border-radius: 50%; object-fit: contain; background: #f8fafc; border: 1px solid #e2e8f0; flex-shrink: 0;
}
.sv-team-name {
    font-size: 14px; font-weight: 700; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv-team-winner {
    font-weight: 900; color: #003968;
}
.sv-winner-icon {
    color: #eab308; font-size: 12px; margin-left: 4px; flex-shrink: 0;
}

/* --- SCORES Y BADGES --- */
.sv-badge-pending {
    color: #94a3b8; font-size: 10px; font-weight: 800; display: flex; align-items: center; gap: 4px; text-transform: uppercase;
}
.sv-badge-pending svg { width: 14px; height: 14px; stroke: currentColor; }

.sv-live-badge {
    color: #ef4444; font-size: 10px; font-weight: 900; display: flex; align-items: center; gap: 4px; text-transform: uppercase;
}
.sv-live-dot {
    width: 5px; height: 5px; background: #ef4444; border-radius: 50%; animation: pulse-live 1.5s infinite;
}
@keyframes pulse-live {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    70% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.sv-finished-badge {
    color: #10b981; font-size: 10px; font-weight: 900; text-transform: uppercase;
}

.sv-score-line { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; }

.sv-sets-big { font-size: 15px; font-weight: 900; color: #0f172a; background: #f1f5f9; padding: 1px 6px; border-radius: 4px; min-width: 24px; text-align: center;}
.sv-points-small { font-size: 12px; font-weight: 700; color: #64748b; width: 16px; text-align: center; }

.sv-finished-sets { font-size: 16px; font-weight: 900; color: #003968; background: #f1f5f9; padding: 1px 6px; border-radius: 4px; min-width: 24px; text-align: center; }
.sv-finished-loser { color: #94a3b8; font-weight: 600; }

.sv-empty-board {
    text-align: center; padding: 30px 15px; background: #ffffff; border-radius: 8px; border: 1px solid #e2e8f0;
}
.sv-empty-board h3 { color: #0f172a; margin-top: 0; margin-bottom: 5px; font-size: 16px;}
.sv-empty-board p { color: #64748b; margin: 0; font-size: 14px; }

/* Movil */
@media (max-width: 768px) {
    .sv-sched-card { flex-direction: column; }
    .sv-sched-info { 
        border-right: none; border-bottom: 1px solid #e2e8f0; 
        flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 10px 15px;
    }
    .sv-info-time { margin-bottom: 0; font-size: 14px; }
    .sv-info-date { margin-bottom: 0; font-size: 12px; }
    .sv-info-badge { margin-bottom: 0; }
    .sv-sched-main {
        padding: 10px 15px;
    }
}