/* ─── Fase de Ascenso - Frontend ─── */
:root {
    --fa-primary: #003366;
    --fa-accent:  #e63c1e;
    --fa-gold:    #f5a623;
    --fa-bg:      #f8f9fa;
    --fa-border:  #dee2e6;
    --fa-text:    #212529;
    --fa-muted:   #6c757d;
    --fa-green:   #28a745;
    --fa-red:     #dc3545;
    --fa-radius:  8px;
    --fa-shadow:  0 2px 12px rgba(0,0,0,.08);
}

/* ─── Contenedores ─── */
.fa-partidos-wrap,
.fa-clasificacion-wrap {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    max-width: 760px;
    margin: 0 auto;
    color: var(--fa-text);
}

.fa-torneo-titulo {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--fa-muted);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--fa-primary);
}

/* ─── Jornadas ─── */
.fa-jornada-bloque { margin-bottom: 28px; }

.fa-jornada-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fa-primary);
    margin: 0 0 12px 0;
    padding: 6px 12px;
    background: var(--fa-bg);
    border-left: 4px solid var(--fa-primary);
    border-radius: 0 var(--fa-radius) var(--fa-radius) 0;
}

/* ─── Partido ─── */
.fa-partido {
    background: #fff;
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius);
    padding: 0;
    margin-bottom: 10px;
    box-shadow: var(--fa-shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.fa-partido:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

.fa-estado-en_juego {
    border-left: 4px solid var(--fa-red);
    border-color: var(--fa-red);
}
.fa-estado-finalizado {
    border-left: 4px solid var(--fa-green);
}

.fa-partido-fecha {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--fa-muted);
    background: var(--fa-bg);
    padding: 6px 16px;
    border-bottom: 1px solid var(--fa-border);
}

.fa-partido-marcador {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 16px;
    gap: 8px;
    overflow: hidden;
}

.fa-equipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    overflow: hidden;
    min-width: 0;
}
.fa-equipo-nombre {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fa-text);
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.fa-resultado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    width: 60px;
    text-align: center;
}
.fa-local    { align-items: center; text-align: center; }
.fa-visitante { align-items: center; text-align: center; }
.fa-local { align-items: flex-end; text-align: right; }
.fa-visitante { align-items: flex-start; text-align: left; }
.fa-vs {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--fa-muted);
    letter-spacing: 2px;
    text-align: center;
}

@media (max-width: 480px) {
    .fa-local { align-items: center; text-align: center; }
    .fa-visitante { align-items: center; text-align: center; }
}

.fa-escudo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
@media (max-width: 480px) { .fa-escudo { width: 36px; height: 36px; } }

.fa-equipo-nombre {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--fa-text);
    line-height: 1.2;
}

/* ─── Resultado / Estado central ─── */
.fa-resultado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    text-align: center;
}

.fa-goles {
    font-size: 2rem;
    font-weight: 900;
    color: var(--fa-primary);
    font-variant-numeric: tabular-nums;
}

.fa-goles + .fa-separador {
    font-size: 1.5rem;
    color: var(--fa-muted);
}

.fa-resultado > * { display: inline-block; }

/* Marcador en línea */
.fa-resultado {
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
.fa-separador {
    font-size: 1.5rem;
    color: var(--fa-muted);
    padding: 0 4px;
}

.fa-vs {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--fa-muted);
    letter-spacing: 2px;
}

/* ─── En juego ─── */
.fa-en-juego-badge {
    display: inline-block;
    background: var(--fa-red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 20px;
    animation: fa-pulse-badge 1.4s ease-in-out infinite;
}

@keyframes fa-pulse-badge {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
    50%       { opacity: 0.9; box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
}

.fa-resultado-en-juego {
    flex-direction: column !important;
    gap: 6px !important;
}

/* ─── Botón streaming ─── */
.fa-streaming-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ff0000;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    transition: background .2s, transform .15s;
    letter-spacing: 0.3px;
}
.fa-streaming-btn:hover {
    background: #cc0000;
    transform: scale(1.04);
}

/* ─── Clasificación ─── */
.fa-tabla-clasificacion {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    box-shadow: var(--fa-shadow);
    border-radius: var(--fa-radius);
    overflow: hidden;
}

.fa-tabla-clasificacion thead tr {
    background: var(--fa-primary);
    color: #fff;
}
.fa-tabla-clasificacion thead th {
    padding: 10px 8px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: default;
}
.fa-tabla-clasificacion thead th.fa-equipo-col { text-align: left; }

.fa-fila-equipo {
    background: #fff;
    transition: background .12s;
}
.fa-fila-equipo:nth-child(even) { background: #f9fafb; }
.fa-fila-equipo:hover { background: #eef3ff; }
.fa-fila-equipo.fa-lider { background: #fffbef; }

.fa-tabla-clasificacion td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--fa-border);
    vertical-align: middle;
}
.fa-tabla-clasificacion td.fa-equipo-col {
    text-align: left;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fa-tabla-clasificacion td.fa-pos { font-weight: 800; color: var(--fa-muted); }
.fa-tabla-clasificacion td.fa-pts-col { font-weight: 900; font-size: 1rem; color: var(--fa-primary); }

.fa-escudo-mini {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.fa-pos-num { color: var(--fa-green); font-weight: 700; }
.fa-neg-num { color: var(--fa-red);   font-weight: 700; }

.fa-leyenda {
    font-size: 0.72rem;
    color: var(--fa-muted);
    text-align: right;
    margin-top: 8px;
}

/* ─── Aviso ─── */
.fa-aviso {
    color: var(--fa-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* ─── Responsive ─── */
@media (max-width: 540px) {
    .fa-partido-marcador { padding: 12px 8px; }
    .fa-equipo-nombre { font-size: 0.78rem; }
    .fa-goles { font-size: 1.6rem; }
    .fa-tabla-clasificacion { font-size: 0.8rem; }
    .fa-tabla-clasificacion th,
    .fa-tabla-clasificacion td { padding: 7px 4px; }
}
@media (max-width: 540px) {
    .fa-partido-marcador { padding: 12px 8px; }
    .fa-equipo-nombre { font-size: 0.78rem; }
    .fa-goles { font-size: 1.6rem; }

    .fa-tabla-clasificacion { font-size: 0.82rem; }
    .fa-tabla-clasificacion th,
    .fa-tabla-clasificacion td { padding: 8px 5px; }

    .fa-tabla-clasificacion td.fa-equipo-col {
        max-width: 110px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fa-tabla-clasificacion th:nth-child(5),
    .fa-tabla-clasificacion td:nth-child(5),
    .fa-tabla-clasificacion th:nth-child(6),
    .fa-tabla-clasificacion td:nth-child(6),
    .fa-tabla-clasificacion th:nth-child(7),
    .fa-tabla-clasificacion td:nth-child(7) {
        display: none;
    }

    .fa-escudo-mini { width: 18px; height: 18px; }
}