/* =============================================================
   tabla_posiciones.css  —  Mobile-first
   Breakpoints: 480 | 640 | 768 | 992 | 1200
   Paleta: --primary:#094c79  --secondary:#0b1138  --accent:#ffd700
   ============================================================= */

/* =============================================================
   1. CONTENEDOR
   ============================================================= */
.posiciones-container {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

@media (min-width: 640px)  { .posiciones-container { padding: 0 1.5rem; } }
@media (min-width: 1200px) { .posiciones-container { margin: 2.5rem auto; } }

/* =============================================================
   2. TÍTULO
   ============================================================= */
.titulo-container {
    text-align: center;
    margin-bottom: 1.75rem;
}

.titulo-container h1 {
    color: #fff;
    font-size: clamp(1.5rem, 5vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 0.35rem;
    letter-spacing: -0.3px;
}

.subtitle {
    color: rgba(255,255,255,0.6);
    font-size: clamp(0.82rem, 2.5vw, 1rem);
    margin: 0;
}

.actualizacion-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    margin-top: 0.6rem;
    font-weight: 400;
}

.actualizacion-info i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #007bff; /* Fondo vivo solo para el icono */
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
}

/* =============================================================
   3. FILTROS
   ============================================================= */
.filtros-card {
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    border: 1px solid #eef2f7;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

@media (min-width: 768px) {
    .filtros-card { padding: 1.25rem 1.5rem; gap: 1rem; }
}

.filtros-group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.filtro-group { display: flex; flex-direction: column; gap: 0.5rem; }

.filtro-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #094c79;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.filtro-label i { font-size: 0.85rem; }

.filtro-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.filtro-btn {
    display: inline-block;
    background: #f0f7ff;
    border: 1.5px solid #c7dff0;
    color: #094c79;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}

.filtro-btn:hover {
    background: #dbeeff;
    border-color: #094c79;
}

.filtro-btn.active {
    background: #094c79;
    border-color: #094c79;
    color: #fff;
    box-shadow: 0 3px 10px rgba(9,76,121,0.25);
}

/* =============================================================
   4. CAMPEONATO CARD
   ============================================================= */
.tablas-contenedor { display: flex; flex-direction: column; gap: 1.5rem; }

.campeonato-card {
    background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    border: 0px solid #eef2f7;
}

.campeonato-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, #094c79 0%, #0b1138 100%);
    color: #fff;
    flex-wrap: wrap;
}

.campeonato-header i {
    font-size: 1.6rem;
    color: #ffd700;
    flex-shrink: 0;
}

.campeonato-header h2 {
    margin: 0;
    font-size: clamp(0.95rem, 3vw, 1.2rem);
    font-weight: 800;
    flex: 1;
    min-width: 0;
}

.campeonato-header span {
    font-size: 0.72rem;
    opacity: 0.8;
    white-space: nowrap;
}

/* =============================================================
   5. SERIE SECTION
   ============================================================= */
.serie-section {
    margin: 0.9rem 1rem 1rem;
    border: 1px solid #dfe8f1;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(9, 76, 121, 0.06);
}

.serie-section:first-of-type { margin-top: 0.9rem; }

.serie-section:last-of-type { margin-bottom: 1rem; }

.serie-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    background: linear-gradient(90deg, #f7fbff 0%, #eef5fb 100%);
    border-bottom: 1px solid #dfe8f1;
    border-left: 4px solid #094c79;
    flex-wrap: wrap;
}

.serie-header h3 {
    margin: 0;
    color: #094c79;
    font-size: clamp(0.82rem, 2.5vw, 0.98rem);
    font-weight: 700;
}

.serie-header span {
    font-size: 0.65rem;
    color: #6b7280;
    white-space: nowrap;
}

/* =============================================================
   6. TABLA DE POSICIONES
   ============================================================= */
.table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 12px 12px;
    border: 1px solid #dfe8f1;
    border-top: none;
    background: #fff;
    box-shadow: 0 12px 24px rgba(9, 76, 121, 0.20);
}

.posiciones-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.posiciones-table thead {
    background: linear-gradient(90deg, #094c79 0%, #0b1138 100%);
}

.posiciones-table th {
    color: #fff;
    padding: 0.6rem 0.5rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
}

.posiciones-table td {
    padding: 0.55rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid #f0f4f8;
    color: #333;
}

.posiciones-table tbody tr:nth-child(even) td {
    background: #f7f9fc;
}

.posiciones-table tbody tr:last-child td { border-bottom: none; }

.posiciones-table tbody tr:hover td { background: #eef4fa; }

/* Columna equipo: alineada a la izquierda */
.posiciones-table td.equipo,
.posiciones-table th:nth-child(2) {
    text-align: left;
    padding-left: 0.85rem;
    width: var(--equipo-col-width);
    min-width: var(--equipo-col-width);
}

.posiciones-table td.equipo {
    white-space: nowrap;
    font-weight: 600;
    vertical-align: middle;
}

.team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 0.4rem;
    border-radius: 3px;
}



/* Puntos destacados */
.puntos {
    font-weight: 800;
    color: #094c79;
    font-size: 0.88rem;
}

/* Diferencia de goles */
.posiciones-table td.positivo { color: #16a34a; }
.posiciones-table td.negativo { color: #dc2626; }
.posiciones-table td.neutro { color: #4b5563; }

/* Ocultar columnas secundarias en móvil */
@media (max-width: 479px) {
    /* Anchos de columnas para celular (editable en un solo lugar) */
    .posiciones-table {
        --col-pos-mobile: 20px;
        --col-equipo-mobile: 140px;
        --col-pj-mobile: 20px;
        --col-g-mobile: 20px;
        --col-e-mobile: 20px;
        --col-p-mobile: 20px;
        --col-dg-mobile: 20px;
        --col-pts-mobile: 30px;

        min-width: calc(
            var(--col-pos-mobile) +
            var(--col-equipo-mobile) +
            var(--col-pj-mobile) +
            var(--col-g-mobile) +
            var(--col-e-mobile) +
            var(--col-p-mobile) +
            var(--col-dg-mobile) +
            var(--col-pts-mobile)
        );

        /* Respeta anchos definidos por columna en pantallas angostas */
        table-layout: fixed;
    }

    .posiciones-table th,
    .posiciones-table td {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .posiciones-table th:nth-child(1),
    .posiciones-table td:nth-child(1) {
        width: var(--col-pos-mobile);
        min-width: var(--col-pos-mobile);
    }

    .posiciones-table th:nth-child(2),
    .posiciones-table td:nth-child(2) {
        width: var(--col-equipo-mobile);
        min-width: var(--col-equipo-mobile);
        max-width: var(--col-equipo-mobile);
    }

    .posiciones-table td.equipo {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .posiciones-table th:nth-child(3),
    .posiciones-table td:nth-child(3) {
        width: var(--col-pj-mobile);
        min-width: var(--col-pj-mobile);
    }

    .posiciones-table th:nth-child(4),
    .posiciones-table td:nth-child(4) {
        width: var(--col-g-mobile);
        min-width: var(--col-g-mobile);
    }

    .posiciones-table th:nth-child(5),
    .posiciones-table td:nth-child(5) {
        width: var(--col-e-mobile);
        min-width: var(--col-e-mobile);
    }

    .posiciones-table th:nth-child(6),
    .posiciones-table td:nth-child(6) {
        width: var(--col-p-mobile);
        min-width: var(--col-p-mobile);
    }

    .posiciones-table th:nth-child(10),
    .posiciones-table td:nth-child(10) {
        width: var(--col-pts-mobile);
        min-width: var(--col-pts-mobile);
    }

    .posiciones-table th:nth-child(9),
    .posiciones-table td:nth-child(9) {
        width: var(--col-dg-mobile);
        min-width: var(--col-dg-mobile);
    }

    /* GF y GC ocultos en pantallas muy pequeñas */
    .posiciones-table th:nth-child(7),
    .posiciones-table td:nth-child(7),
    .posiciones-table th:nth-child(8),
    .posiciones-table td:nth-child(8) {
        display: none;
    }
}



/* =============================================================
   8. SIN DATOS
   ============================================================= */
.no-data {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
    color: rgba(255,255,255,0.55);
}

.no-data i {
    font-size: 2.8rem;
    display: block;
    margin-bottom: 0.85rem;
    opacity: 0.5;
}

.no-data h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}