/* =====================================================================
   LaLiga Fantasy Stats — sistema de diseño "Matchday" (tema claro)
   ===================================================================== */
:root {
    --lfs-azul: #0b3d78;
    --lfs-azul-2: #1565c0;
    --lfs-azul-3: #2e8bf0;
    --lfs-verde: #16a34a;
    --lfs-ambar: #d97706;
    --lfs-azul-conf: #2563eb;
    --lfs-rojo: #dc2626;
    --lfs-oro: #d4af37;
    --lfs-plata: #9aa5b1;
    --lfs-bronce: #b06a3d;

    --lfs-fondo: #f4f7fb;
    --lfs-fondo-cabecera: #eef3fa;
    --lfs-borde: #e3e9f2;
    --lfs-texto: #16233c;
    --lfs-texto-suave: #64708a;

    --lfs-radio: 18px;
    --lfs-radio-sm: 10px;
    --lfs-sombra: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 20px 40px -22px rgba(11, 61, 120, 0.28);
    --lfs-sombra-sm: 0 8px 18px -12px rgba(11, 61, 120, 0.25);
    --lfs-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Común ---------- */
.lfs-mensaje {
    padding: 14px 16px;
    background: var(--lfs-fondo);
    border: 1px solid var(--lfs-borde);
    border-radius: var(--lfs-radio-sm);
    color: var(--lfs-texto-suave);
    font-size: 14px;
    font-family: var(--lfs-fuente);
}
.lfs-aviso-cache {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff8e8;
    border: 1px solid #f2d98a;
    color: #7a5c00;
    padding: 10px 14px;
    border-radius: var(--lfs-radio-sm);
    font-size: 13px;
    margin-bottom: 14px;
}
.lfs-nota {
    font-size: 12px;
    color: var(--lfs-texto-suave);
    margin-top: 10px;
}

/* Contenedores generales: tarjeta blanca elevada, esquinas suaves */
.lfs-clasificacion-container,
.laliga-scorers-container {
    max-width: 1200px;
    width: 100%;
    margin: 24px auto !important;
    padding: 20px;
    border-radius: var(--lfs-radio);
    background: #ffffff;
    border: 1px solid var(--lfs-borde);
    box-shadow: var(--lfs-sombra);
    box-sizing: border-box;
    display: block;
    align-self: center;
    justify-self: center;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: opacity 0.15s ease;
    font-family: var(--lfs-fuente);
    position: relative;
    overflow: hidden;
    float: none !important;
}
.laliga-scorers-container { max-width: 1000px; }

/* Resplandor de fondo muy sutil, a modo de firma visual, apenas visible */
.lfs-clasificacion-container::after,
.laliga-scorers-container::after {
    content: '';
    position: absolute;
    top: -140px;
    right: -100px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(21, 101, 192, 0.08) 0%, rgba(21, 101, 192, 0) 70%);
    pointer-events: none;
}

/* Barra de acento superior en degradado azul -> celeste -> verde */
.lfs-clasificacion-container::before,
.laliga-scorers-container::before {
    content: '';
    display: block;
    height: 4px;
    margin: -20px -20px 18px -20px;
    border-radius: var(--lfs-radio) var(--lfs-radio) 0 0;
    background: linear-gradient(90deg, var(--lfs-azul) 0%, var(--lfs-azul-3) 55%, var(--lfs-verde) 100%);
}

/* Contenedor de scroll horizontal — solo entra en juego si la tabla no
   cabe (pantallas medianas); en móvil pequeño se convierte en tarjetas. */
.lfs-tabla-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    position: relative;
}
/* La tabla siempre rellena todo el ancho de su cuadro (sin bordes en
   blanco a los lados ni al final del scroll). */
.lfs-tabla-scroll > table { width: 100%; min-width: 100%; }

/* ---------- Tablas (clasificación y goleadores) ----------
   La de clasificación tiene 8 columnas y necesita un ancho mínimo para
   no aplastarse (de ahí el min-width + scroll horizontal). La de
   goleadores/proyección tiene menos columnas y cabe bien sin forzar
   scroll, así que no lleva min-width: se ajusta de forma fluida y el
   scroll horizontal solo entraría en juego si de verdad hiciera falta. */
.la-liga-clasificacion,
.laliga-scorers {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.la-liga-clasificacion { min-width: 560px; }
.laliga-scorers { min-width: 580px; }
.la-liga-clasificacion,
.laliga-scorers {
    max-width: 100%;
    margin: 0 auto !important;
}

.la-liga-clasificacion thead th,
.laliga-scorers thead th {
    position: sticky;
    top: 0;
    background: var(--lfs-fondo-cabecera);
    color: var(--lfs-azul);
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    padding: 12px 10px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 2px solid var(--lfs-borde);
}
.la-liga-clasificacion thead th:first-child { border-top-left-radius: var(--lfs-radio-sm); }
.la-liga-clasificacion thead th:last-child { border-top-right-radius: var(--lfs-radio-sm); }
.laliga-scorers thead th:first-child { border-top-left-radius: var(--lfs-radio-sm); }
.laliga-scorers thead th:last-child { border-top-right-radius: var(--lfs-radio-sm); }

.la-liga-clasificacion .lfs-th-equipo,
.laliga-scorers th:nth-child(2) {
    text-align: left;
}

.la-liga-clasificacion td,
.laliga-scorers td {
    padding: 12px 10px;
    text-align: center;
    font-size: 13.5px;
    color: var(--lfs-texto);
    border-bottom: 1px solid var(--lfs-borde);
    background: #fff;
}
.la-liga-clasificacion tbody tr,
.laliga-scorers tbody tr {
    transition: background-color 0.15s ease;
}
.la-liga-clasificacion tbody tr:nth-child(even) td,
.laliga-scorers tbody tr:nth-child(even) td {
    background: var(--lfs-fondo);
}
.la-liga-clasificacion tbody tr:hover td,
.laliga-scorers tbody tr:hover td {
    background: #e7f0fd;
}
.la-liga-clasificacion tbody tr:last-child td,
.laliga-scorers tbody tr:last-child td {
    border-bottom: none;
}

/* Equipo / jugador (celda con escudo) */
.lfs-celda-equipo {
    text-align: left !important;
    font-weight: 700;
    color: var(--lfs-texto);
}
/* El flex va en un div interno: una <td> con display:flex deja de ser
   celda de tabla y provoca huecos/desajustes al hacer scroll lateral. */
.lfs-equipo-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.lfs-celda-equipo span { font-size: 12px; }
.lfs-celda-jugador { text-align: left !important; font-weight: 700; font-size: 12px; }
.escudo {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
.lfs-escudo-pequeno {
    width: 23px;
    height: 23px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

/* Posición: número simple o medalla top-3 */
.lfs-pos-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    color: var(--lfs-texto-suave);
    font-weight: 700;
    font-size: 13px;
}
.lfs-medalla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 12.5px;
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}
.lfs-medalla-oro { background: linear-gradient(135deg, #f6d365, var(--lfs-oro)); color: #5a4300; }
.lfs-medalla-plata { background: linear-gradient(135deg, #eef1f6, var(--lfs-plata)); color: #3a4250; }
.lfs-medalla-bronce { background: linear-gradient(135deg, #e3a26f, var(--lfs-bronce)); color: #4a2a10; }

/* Puntos: cifra destacada con degradado tipo "marcador" */
.lfs-puntos {
    display: inline-block;
    font-size: 15.5px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--lfs-azul), var(--lfs-azul-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Goles del goleador */
.lfs-goles {
    font-size: 15.5px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--lfs-azul), var(--lfs-azul-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Goles a favor / en contra: discretos, secundarios frente a Pts y DG */
.lfs-celda-gf,
.lfs-celda-gc {
    color: var(--lfs-texto-suave);
    font-weight: 600;
    font-size: 13px;
}

/* Diferencia de goles con color */
.lfs-dg-positiva { color: var(--lfs-verde); font-weight: 700; }
.lfs-dg-negativa { color: var(--lfs-rojo); font-weight: 700; }
.lfs-dg-neutra { color: var(--lfs-texto-suave); font-weight: 600; }

/* Zonas de clasificación (franja izquierda de color, en la 1ª celda
   para que se pinte de forma fiable en todos los navegadores) */
.lfs-zona-champions td:first-child { box-shadow: inset 4px 0 0 var(--lfs-verde); }
.lfs-zona-europa-league td:first-child { box-shadow: inset 4px 0 0 var(--lfs-ambar); }
.lfs-zona-conference td:first-child { box-shadow: inset 4px 0 0 var(--lfs-azul-conf); }
.lfs-zona-descenso td:first-child { box-shadow: inset 4px 0 0 var(--lfs-rojo); }

.lfs-leyenda-zonas {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--lfs-borde);
    font-size: 11.5px;
    color: var(--lfs-texto-suave);
    position: relative;
    z-index: 1;
}
.lfs-leyenda-zonas span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    background: var(--lfs-fondo);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--lfs-borde);
}
.lfs-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.lfs-punto-champions { background: var(--lfs-verde); }
.lfs-punto-europa-league { background: var(--lfs-ambar); }
.lfs-punto-conference { background: var(--lfs-azul-conf); }
.lfs-punto-descenso { background: var(--lfs-rojo); }

/* Forma reciente: puntos pequeños y compactos */
.lfs-celda-forma { white-space: nowrap; }
.lfs-forma { display: inline-flex; gap: 3px; vertical-align: middle; }
.lfs-forma-punto {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 9.5px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.lfs-forma-ganado { background: var(--lfs-verde); }
.lfs-forma-empate { background: var(--lfs-ambar); }
.lfs-forma-perdido { background: var(--lfs-rojo); }
.lfs-forma-vacia { color: #aaa; }

/* Racha actual: chip pequeño y compacto, pegado a la Forma */
.lfs-racha {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    vertical-align: middle;
    line-height: 1.6;
}
.lfs-racha-ganado { background: #e7f8ee; color: #0f7a37; border: 1px solid #b9ecc9; }
.lfs-racha-empate { background: #fff3e2; color: #a35a00; border: 1px solid #f4d29e; }
.lfs-racha-perdido { background: #fdeaea; color: #b32323; border: 1px solid #f4bcbc; }

/* Chip de proyección de goles (goles esperados a final de temporada) */
.lfs-proyeccion-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 13px;
    background: linear-gradient(90deg, #e7f0fd, #eef3fa);
    color: var(--lfs-azul);
    border: 1px solid var(--lfs-borde);
}

/* ---------- Paginación ---------- */
.pagination {
    margin: 20px 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.pagination a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--lfs-azul);
    background: #fff;
    border: 1px solid var(--lfs-azul);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.pagination a:hover {
    background: linear-gradient(90deg, var(--lfs-azul), var(--lfs-azul-3));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(11, 61, 120, 0.5);
    transform: translateY(-1px);
}
.lfs-pagina-actual {
    font-size: 11px;
    font-weight: 700;
    color: var(--lfs-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- Escritorio: tabla más grande (el móvil, abajo, no cambia) ----------
   A partir de donde termina la vista móvil (640px) se amplían tipografías,
   paddings, escudos y chips para que se lea mejor en pantallas grandes. */
@media screen and (min-width: 641px) {
    .la-liga-clasificacion thead th,
    .laliga-scorers thead th {
        font-size: 12px;
        padding: 15px 14px;
    }

    .la-liga-clasificacion td,
    .laliga-scorers td {
        padding: 16px 14px;
        font-size: 15px;
    }

    .lfs-celda-equipo span,
    .lfs-celda-jugador {
        font-size: 14px;
    }

    .escudo,
    .lfs-escudo-pequeno {
        width: 30px;
        height: 30px;
    }

    .lfs-pos-num { font-size: 14.5px; }
    .lfs-medalla { width: 30px; height: 30px; font-size: 14px; }

    .lfs-puntos,
    .lfs-goles {
        font-size: 18px;
    }

    .lfs-celda-gf,
    .lfs-celda-gc {
        font-size: 14.5px;
    }

    .lfs-forma-punto {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .lfs-racha {
        font-size: 11px;
        padding: 2px 9px;
    }

    .lfs-leyenda-zonas { font-size: 12.5px; }
    .lfs-leyenda-zonas span { padding: 6px 14px; }
}

/* ---------- Responsive: tabla real con scroll horizontal en móvil ----------
   Se mantiene el formato de tabla por filas (el habitual en clasificaciones
   de fútbol) en lugar de convertir cada fila en una tarjeta apilada. En
   pantallas estrechas la tabla se desplaza horizontalmente y las columnas
   "Pos." y "Equipo"/"Jugador" quedan fijas a la izquierda como referencia,
   igual que en apps y webs deportivas habituales. */
@media screen and (max-width: 640px) {
    .lfs-clasificacion-container,
    .laliga-scorers-container {
        padding: 14px 0 16px;
        margin: 16px auto;
        border-radius: var(--lfs-radio-sm);
    }
    .lfs-clasificacion-container::before,
    .laliga-scorers-container::before {
        margin: -14px 0 14px;
        border-radius: var(--lfs-radio-sm) var(--lfs-radio-sm) 0 0;
    }
    .lfs-mensaje,
    .lfs-aviso-cache,
    .lfs-leyenda-zonas,
    .lfs-nota,
    .pagination {
        margin-left: 14px;
        margin-right: 14px;
    }

    .lfs-tabla-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Sin máscara de difuminado: dejaba franjas blancas en los bordes. */
    }

    .la-liga-clasificacion {
        min-width: 620px;
        border-spacing: 0;
    }
    .laliga-scorers {
        min-width: 620px;
        border-spacing: 0;
    }

    .la-liga-clasificacion thead th,
    .laliga-scorers thead th {
        top: 0;
        padding: 10px 8px;
        font-size: 9.5px;
    }

    .la-liga-clasificacion td,
    .laliga-scorers td {
        padding: 11px 8px;
        font-size: 12.5px;
        white-space: nowrap;
    }

    /* Columnas fijas: Pos. + Equipo (clasificación) o Pos. + Jugador
       (goleadores) quedan visibles mientras el resto se desplaza. */
    .la-liga-clasificacion .lfs-th-pos,
    .la-liga-clasificacion .lfs-celda-pos,
    .laliga-scorers .lfs-th-pos,
    .laliga-scorers .lfs-celda-pos {
        position: sticky;
        left: 0;
        z-index: 2;
        box-sizing: border-box;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        padding-left: 6px;
        padding-right: 6px;
    }
    .la-liga-clasificacion .lfs-th-equipo,
    .la-liga-clasificacion .lfs-celda-equipo,
    .laliga-scorers thead th:nth-child(2),
    .laliga-scorers .lfs-celda-jugador {
        position: sticky;
        left: 40px;
        z-index: 2;
        box-sizing: border-box;
        width: 128px;
        min-width: 128px;
        max-width: 128px;
        white-space: normal !important;
        overflow: hidden;
        /* Sombra sutil: separa las columnas fijas del contenido que pasa por debajo */
        box-shadow: 3px 0 4px -3px rgba(11, 61, 120, 0.25);
    }
    /* El td de "Equipo" es un flex container (escudo + nombre); sin
       min-width:0 el span no puede encogerse por debajo de su contenido
       y el nombre se sale de la columna fija al hacer scroll lateral. */
    .la-liga-clasificacion .lfs-equipo-inner span {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .laliga-scorers .lfs-celda-jugador {
        text-overflow: ellipsis;
    }
    .la-liga-clasificacion thead th.lfs-th-pos,
    .la-liga-clasificacion thead th.lfs-th-equipo,
    .laliga-scorers thead th:first-child,
    .laliga-scorers thead th:nth-child(2) {
        z-index: 3;
        background: var(--lfs-fondo-cabecera);
    }
    .la-liga-clasificacion tbody td.lfs-celda-pos,
    .la-liga-clasificacion tbody td.lfs-celda-equipo,
    .laliga-scorers tbody td.lfs-celda-pos,
    .laliga-scorers tbody td.lfs-celda-jugador {
        background: #fff;
    }
    .la-liga-clasificacion tbody tr:nth-child(even) td.lfs-celda-pos,
    .la-liga-clasificacion tbody tr:nth-child(even) td.lfs-celda-equipo,
    .laliga-scorers tbody tr:nth-child(even) td.lfs-celda-pos,
    .laliga-scorers tbody tr:nth-child(even) td.lfs-celda-jugador {
        background: var(--lfs-fondo);
    }
    .la-liga-clasificacion tbody tr:hover td.lfs-celda-pos,
    .la-liga-clasificacion tbody tr:hover td.lfs-celda-equipo,
    .laliga-scorers tbody tr:hover td.lfs-celda-pos,
    .laliga-scorers tbody tr:hover td.lfs-celda-jugador {
        background: #e7f0fd;
    }
    /* La franja de color de zona se pinta sobre la columna fija de Pos.
       para que siga siendo visible al hacer scroll. */
    .lfs-zona-champions td.lfs-celda-pos { box-shadow: inset 3px 0 0 var(--lfs-verde); }
    .lfs-zona-europa-league td.lfs-celda-pos { box-shadow: inset 3px 0 0 var(--lfs-ambar); }
    .lfs-zona-conference td.lfs-celda-pos { box-shadow: inset 3px 0 0 var(--lfs-azul-conf); }
    .lfs-zona-descenso td.lfs-celda-pos { box-shadow: inset 3px 0 0 var(--lfs-rojo); }

    .escudo { width: 20px; height: 20px; }
    .lfs-escudo-pequeno { width: 20px; height: 20px; }
    .lfs-equipo-inner { gap: 7px; }
    .lfs-celda-equipo span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.2;
    }
    .lfs-celda-equipo span,
    .laliga-scorers .lfs-celda-jugador { font-size: 11px; }
    .lfs-puntos, .lfs-goles { font-size: 14px; }
    .lfs-medalla { width: 22px; height: 22px; font-size: 11px; }
    .lfs-racha { display: block; margin: 3px 0 0; }

    .lfs-leyenda-zonas { gap: 8px; font-size: 10.5px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .lfs-leyenda-zonas span { flex: 0 0 auto; }
}

@media screen and (max-width: 380px) {
    .lfs-leyenda-zonas { gap: 6px; font-size: 10px; }
    .la-liga-clasificacion .lfs-th-equipo,
    .la-liga-clasificacion .lfs-celda-equipo,
    .laliga-scorers thead th:nth-child(2),
    .laliga-scorers .lfs-celda-jugador {
        width: 96px;
        min-width: 96px;
        max-width: 96px;
    }
    .la-liga-clasificacion .lfs-celda-equipo,
    .laliga-scorers .lfs-celda-jugador { left: 40px; }
}