
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f3f6fa;
    color: #172b45;
}

.encabezado {
    background: #10253f;
    color: white;
    padding: 18px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
}

.marca-icono {
    font-size: 34px;
}

.marca strong {
    display: block;
    font-size: 20px;
}

.marca small {
    color: #b8c9db;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.menu a {
    text-decoration: none;
    color: #dce6f2;
    padding: 11px 15px;
    border-radius: 8px;
    font-size: 14px;
    transition: 0.2s;
}

.menu a:hover,
.menu a.activo {
    background: #207b56;
    color: white;
}

.contenedor {
    width: min(1200px, 94%);
    margin: 35px auto;
}

.titulo {
    margin-bottom: 25px;
}

.titulo h1 {
    margin-bottom: 8px;
}

.tarjeta {
    background: white;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.selector {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccd6e0;
    border-radius: 8px;
    font-size: 15px;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .encabezado {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu {
        width: 100%;
    }

    .menu a {
        flex: 1 1 auto;
        text-align: center;
    }
}

.pestanas-modalidad {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.pestana {
    padding: 15px 22px;
    background: #fff;
    color: #26364b;
    border: 1px solid #dce2e9;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}

.pestana:hover {
    background: #eaf2ff;
}

.pestana.seleccionada {
    border-bottom: 4px solid #1682ee;
    color: #10253f;
}

.panel-campeonato {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-top: 25px;
}

.panel-derecho {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.panel-deportivo {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 3px 12px rgba(0,0,0,.05);
}

.panel-deportivo h3 {
    margin-top: 0;
}

@media (max-width: 768px) {
    .panel-campeonato {
        grid-template-columns: 1fr;
    }
}


/* ENCABEZADO DE JORNADA */

.titulo-jornada {
    background: #eef2f6;
    color: #10253f;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 15px;
    margin: 20px 0 5px;
    border-left: 4px solid #1682ee;
    border-radius: 6px;
}

.titulo-jornada:first-child {
    margin-top: 5px;
}



/* ====================================
   MUNDOLIGAS - ENCUENTROS
   ==================================== */

.encuentros-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 22px;
}

.encuentro-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    min-width: 0;
}

.encuentro-fecha {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 10px;
}

.encuentro-equipo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 7px 0;
}

.encuentro-nombre {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    min-width: 0;
    overflow-wrap: anywhere;
}

.encuentro-marcador {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    flex-shrink: 0;
}

.titulo-jornada {
    background: #eef2f6;
    color: #10253f;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 15px;
    margin: 20px 0 5px;
    border-left: 4px solid #1682ee;
    border-radius: 6px;
}

/* En pantallas muy pequeñas,
   mostrar un encuentro por fila */

@media (max-width: 420px) {

    .encuentros-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MUNDOLIGAS - ENCUENTROS ESTILO OSCURO
   ========================================= */

.panel-encuentros {
    background: #080a0e;
    color: #ffffff;
    border-radius: 14px;
    padding: 16px;
    min-width: 0;
}

.panel-encuentros h3 {
    color: #ffffff;
}

.panel-encuentros .subtitulo-encuentros {
    color: #a7b1c1;
    font-size: 13px;
}

/* FILTROS */

.panel-encuentros .filtros-encuentros {
    display: flex;
    gap: 8px;
    margin: 14px 0;
    flex-wrap: wrap;
}

.panel-encuentros .filtro-partido {
    background: #171d27;
    color: #d6deea;
    border: 1px solid #303a49;
    border-radius: 18px;
    padding: 7px 12px;
    cursor: pointer;
}

.panel-encuentros .filtro-partido.activo {
    background: #1877f2;
    color: white;
    border-color: #1877f2;
}

/* SCROLL INTERNO */

.panel-encuentros .encuentros-scroll {
    height: 390px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #49576b #111821;
}

/* DOS ENCUENTROS POR FILA */

.panel-encuentros .encuentros-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 18px;
}

/* TARJETAS */

.panel-encuentros .encuentro-item {
    background: #0c0f14;
    color: #ffffff;
    border: 1px solid #303640;
    border-radius: 12px;
    padding: 13px;
    min-width: 0;
}

.panel-encuentros .encuentro-fecha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: #a7b1c1;
    font-size: 11px;
    margin-bottom: 15px;
}

.panel-encuentros .encuentro-equipo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 9px 0;
}

.panel-encuentros .encuentro-nombre {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
}

.panel-encuentros .encuentro-marcador {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

/* JORNADAS */

.panel-encuentros .titulo-jornada {
    background: #17212d;
    color: #e7edf6;
    border-left: 3px solid #1682ee;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    margin: 15px 0 8px;
}

/* EN PANTALLAS MUY PEQUEÑAS */

@media (max-width: 420px) {
    .panel-encuentros .encuentros-grid {
        grid-template-columns: 1fr;
    }
}



/* ==========================================
   MUNDOLIGAS - ENCUENTROS ESTILO BLANCO
   ========================================== */

/* PANEL PRINCIPAL */

.panel-encuentros {
    background: #ffffff;
    color: #14213d;
    border: 1px solid #e1e8f0;
    border-radius: 16px;
    padding: 18px;
    min-width: 0;
    box-shadow: 0 4px 18px rgba(15, 35, 65, 0.06);
}

.panel-encuentros h3 {
    color: #102040;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.panel-encuentros .encuentros-encabezado a {
    color: #1677f2;
    font-size: 13px;
    text-decoration: none;
}

.panel-encuentros .encuentros-encabezado a:hover {
    text-decoration: underline;
}

.panel-encuentros .subtitulo-encuentros {
    color: #64748b;
    font-size: 13px;
    margin: 12px 0;
}

/* BOTONES DE FILTRO */

.panel-encuentros .filtros-encuentros {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 16px;
}

.panel-encuentros .filtro-partido {
    background: #f8fafc;
    color: #14213d;
    border: 1px solid #dbe3ee;
    border-radius: 24px;
    padding: 8px 15px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s ease;
}

.panel-encuentros .filtro-partido:hover {
    background: #eaf3ff;
    border-color: #a6c9ff;
}

.panel-encuentros .filtro-partido.activo {
    background: #1677f2;
    color: #ffffff;
    border-color: #1677f2;
}

/* SCROLL INTERNO */

.panel-encuentros .encuentros-scroll {
    height: 390px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 7px;
    scrollbar-width: thin;
    scrollbar-color: #aebdd0 #f1f5f9;
}

.panel-encuentros .encuentros-scroll::-webkit-scrollbar {
    width: 7px;
}

.panel-encuentros .encuentros-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.panel-encuentros .encuentros-scroll::-webkit-scrollbar-thumb {
    background: #aebdd0;
    border-radius: 10px;
}

/* ENCABEZADOS DE JORNADA */

.panel-encuentros .titulo-jornada {
    background: #eaf3fc;
    color: #14213d;
    border-left: 4px solid #1677f2;
    border-radius: 7px;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 700;
    margin: 16px 0 10px;
}

/* DOS PARTIDOS POR FILA */

.panel-encuentros .encuentros-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 10px 0 20px;
}

/* TARJETAS DE PARTIDOS */

.panel-encuentros .encuentro-item {
    background: #ffffff;
    color: #14213d;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    padding: 14px;
    min-width: 0;
    box-shadow: 0 1px 3px rgba(15, 35, 65, 0.025);
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.panel-encuentros .encuentro-item:hover {
    border-color: #a9c9ef;
    box-shadow: 0 4px 12px rgba(15, 35, 65, 0.07);
}

/* FECHA Y ESTADO */

.panel-encuentros .encuentro-fecha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 15px;
}

/* FILAS DE EQUIPOS */

.panel-encuentros .encuentro-equipo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
}

.panel-encuentros .encuentro-nombre {
    color: #14213d;
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.panel-encuentros .encuentro-marcador {
    color: #14213d;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

/* RESPONSIVE */

@media (max-width: 420px) {

    .panel-encuentros {
        padding: 12px;
    }

    .panel-encuentros .encuentros-grid {
        grid-template-columns: 1fr;
    }

    .panel-encuentros .encuentros-scroll {
        height: 390px;
    }
}

/* =========================================
   MUNDOLIGAS - TABLA DE GOLEADORES
   ========================================= */

.panel-goleadores {
    background: #ffffff;
    border: 1px solid #e1e8f0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 18px rgba(15, 35, 65, 0.06);
}

.goleadores-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.goleadores-encabezado h3 {
    color: #14213d;
    font-size: 17px;
    margin: 0;
}

.goleadores-top {
    background: #eaf3ff;
    color: #1677f2;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.goleadores-cabecera {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 45px;
    gap: 10px;
    padding: 10px 8px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
}

.goleadores-cabecera span:last-child {
    text-align: right;
}

.goleador-fila {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 45px;
    align-items: center;
    gap: 10px;
    padding: 12px 8px;
    border-bottom: 1px solid #edf2f7;
}

.goleador-fila:last-child {
    border-bottom: none;
}

.goleador-posicion {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
}

.goleador-fila:first-child .goleador-posicion {
    color: #1677f2;
}

.goleador-informacion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.goleador-nombre {
    font-size: 13px;
    color: #14213d;
    overflow-wrap: anywhere;
}

.goleador-club {
    font-size: 11px;
    color: #64748b;
}

.goleador-goles {
    font-size: 16px;
    color: #14213d;
    text-align: right;
}


/* =========================================
   MUNDOLIGAS - SCROLL DE GOLEADORES
   ========================================= */

.panel-goleadores #listaGoleadores {
    max-height: 345px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    padding-right: 6px;

    scrollbar-width: thin;
    scrollbar-color: #aebdd0 #f1f5f9;
}

/* SCROLL CHROME Y EDGE */

.panel-goleadores #listaGoleadores::-webkit-scrollbar {
    width: 6px;
}

.panel-goleadores #listaGoleadores::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.panel-goleadores #listaGoleadores::-webkit-scrollbar-thumb {
    background: #aebdd0;
    border-radius: 10px;
}

.panel-goleadores #listaGoleadores::-webkit-scrollbar-thumb:hover {
    background: #1677f2;
}

/* =========================================
   MUNDOLIGAS - TABLA DE POSICIONES
   ========================================= */

.panel-posiciones {
    background: #ffffff;
    border: 1px solid #e1e8f0;
    border-radius: 16px;
    padding: 18px;
    min-width: 0;
    box-shadow: 0 4px 18px rgba(15, 35, 65, 0.06);
}

.posiciones-encabezado h3 {
    color: #14213d;
    font-size: 17px;
    margin: 0 0 16px;
}

.posiciones-scroll {
    width: 100%;
    max-height: 390px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #aebdd0 #f1f5f9;
}

.tabla-posiciones {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #14213d;
}

.tabla-posiciones th {
    background: #eaf3fc;
    color: #475569;
    padding: 11px 7px;
    text-align: center;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tabla-posiciones th:nth-child(2) {
    text-align: left;
}

.tabla-posiciones td {
    padding: 12px 7px;
    text-align: center;
    border-bottom: 1px solid #edf2f7;
}

.tabla-posiciones .posiciones-club {
    text-align: left;
    font-weight: 600;
    min-width: 100px;
}

.tabla-posiciones .posiciones-puntos {
    color: #1677f2;
    font-weight: 800;
}

.tabla-posiciones tbody tr:hover {
    background: #f5f9ff;
}

.tabla-posiciones tbody tr:first-child {
    background: #f0f7ff;
}

@media (max-width: 600px) {

    .tabla-posiciones {
        font-size: 11px;
    }

    .tabla-posiciones th,
    .tabla-posiciones td {
        padding: 9px 5px;
    }
}

/* =========================================
   MUNDOLIGAS - GOLEADORES CON FOTOGRAFÍA
   ========================================= */

.panel-goleadores .goleador-fila {
    display: grid;
    grid-template-columns:
        22px 46px minmax(0, 1fr) 45px;
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    border-bottom: 1px solid #edf2f7;
}

.panel-goleadores .goleadores-cabecera {
    display: grid;
    grid-template-columns:
        22px 46px minmax(0, 1fr) 45px;
    gap: 10px;
}

.panel-goleadores .goleadores-cabecera span:nth-child(2) {
    grid-column: 2 / 4;
}

.panel-goleadores .goleador-foto {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid #e2e8f0;
    background: #f1f5f9;
}

.panel-goleadores .goleador-informacion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.panel-goleadores .goleador-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #14213d;
}

.panel-goleadores .goleador-club {
    font-size: 11px;
    color: #64748b;
}

.panel-goleadores .goleador-goles {
    font-size: 16px;
    font-weight: 700;
    color: #14213d;
    text-align: right;
}

/* ==========================================
   MUNDOLIGAS - BUSCAR JUGADORES
   DISEÑO BLANCO Y AZUL
   ========================================== */

/* CONTENEDOR PRINCIPAL */

.pagina-jugadores {
    max-width: 1050px;
    margin: 35px auto;
    padding: 0 18px 40px;
}

/* ENCABEZADO */

.jugadores-header {
    margin-bottom: 24px;
}

.jugadores-header h1 {
    color: #14213d;
    font-size: 27px;
    font-weight: 800;
    margin: 0 0 8px;
}

.jugadores-header p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* BUSCADOR */

.buscador-jugadores {
    background: #ffffff;
    border: 1px solid #e1e8f0;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(15,35,65,.06);
}

.buscador-jugadores form {
    display: flex;
    gap: 12px;
}

.buscador-jugadores input {
    flex: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    background: #ffffff;
    color: #14213d;
    transition: 0.2s ease;
}

.buscador-jugadores input:focus {
    border-color: #1677f2;
    box-shadow: 0 0 0 3px rgba(22,119,242,.10);
}

.buscador-jugadores button {
    background: #1677f2;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.buscador-jugadores button:hover {
    background: #0862d4;
}

/* FICHA PRINCIPAL */

.ficha-jugador {
    background: #ffffff;
    border: 1px solid #e1e8f0;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(15,35,65,.06);
    overflow: hidden;
    margin-bottom: 24px;
}

.ficha-contenido {
    padding: 28px;
    text-align: center;
}

/* FOTO DEL JUGADOR */

.foto-jugador {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.foto-jugador img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    border: 4px solid #eaf3ff;
    background: #f1f5f9;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* NOMBRE Y CÓDIGO */

.nombre-jugador {
    color: #14213d;
    font-size: 23px;
    font-weight: 800;
    margin-bottom: 8px;
}

.codigo-jugador {
    display: inline-block;
    background: #eaf3ff;
    color: #1677f2;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* DATOS PERSONALES */

.datos-jugador {
    margin-top: 20px;
    color: #475569;
    font-size: 14px;
}

.datos-jugador > p {
    margin-bottom: 22px;
}

/* CLUBES REGISTRADOS */

.clubes-jugador {
    text-align: left;
    border-top: 1px solid #edf2f7;
    padding-top: 22px;
}

.clubes-jugador h3 {
    color: #14213d;
    font-size: 17px;
    margin: 0 0 16px;
}

.club-jugador-item {
    background: #f8fbff;
    border: 1px solid #e0eaf5;
    border-left: 4px solid #1677f2;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    transition: 0.2s ease;
}

.club-jugador-item:hover {
    background: #eef6ff;
    border-color: #c9def8;
    border-left-color: #1677f2;
}

.club-nombre {
    color: #14213d;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
}

.club-modalidad,
.club-categoria {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 5px;
}

/* BOTÓN VOLVER */

.contenedor-volver {
    text-align: center;
    margin-top: 24px;
}

.boton-volver {
    display: inline-block;
    color: #1677f2;
    background: #eaf3ff;
    border-radius: 10px;
    padding: 11px 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: 0.2s ease;
}

.boton-volver:hover {
    background: #dbeafe;
}

/* DISEÑO RESPONSIVE */

@media (max-width: 600px) {

    .pagina-jugadores {
        margin: 20px auto;
        padding: 0 12px 30px;
    }

    .jugadores-header h1 {
        font-size: 23px;
    }

    .buscador-jugadores {
        padding: 15px;
    }

    .buscador-jugadores form {
        flex-direction: column;
    }

    .buscador-jugadores button {
        width: 100%;
    }

    .ficha-contenido {
        padding: 20px 15px;
    }

    .foto-jugador img {
        width: 110px;
        height: 110px;
    }

    .nombre-jugador {
        font-size: 20px;
    }

    .club-jugador-item {
        padding: 13px;
    }
}

/* ======================================
   MUNDOLIGAS - ENCUENTROS RESPONSIVOS
   ====================================== */

/* SOLO COMPUTADORAS */

@media (min-width: 769px) {

    /* El contenedor padre puede estirarse */
    .panel-encuentros {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    /* La lista aprovecha el espacio disponible */
    #listaEncuentros {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }
}

/* ======================================
   MUNDOLIGAS - CABECERA COMPACTA
   ====================================== */

/* Botones de modalidades */
.modalidades-compactas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
}

.modalidades-compactas button,
.modalidades-compactas a {
    padding: 9px 15px;
    min-height: 36px;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    background: #ffffff;
    color: #14213d;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease;
}

.modalidades-compactas button:hover,
.modalidades-compactas a:hover {
    background: #eaf3ff;
    border-color: #1677f2;
    color: #1677f2;
}

.modalidades-compactas .activo,
.modalidades-compactas .active {
    background: #1677f2;
    border-color: #1677f2;
    color: #ffffff;
    box-shadow: 0 3px 9px rgba(22,119,242,.18);
}

/* Encabezado y navegación horizontal */
.cabecera-campeonato {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.cabecera-liga {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.cabecera-liga h2 {
    margin: 0;
    color: #14213d;
    font-size: 21px;
    font-weight: 800;
}

.etiqueta-modalidad {
    background: #eaf3ff;
    color: #1677f2;
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
}

.navegacion-campeonato {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.navegacion-campeonato a {
    display: inline-block;
    padding: 8px 11px;
    border-radius: 8px;
    background: #f1f6fc;
    color: #34516f;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s ease;
}

.navegacion-campeonato a:hover {
    background: #1677f2;
    color: #ffffff;
}

/* Celulares */
@media (max-width: 600px) {

    .cabecera-campeonato {
        align-items: flex-start;
        gap: 12px;
    }

    .cabecera-liga h2 {
        font-size: 19px;
    }

    .navegacion-campeonato {
        width: 100%;
        gap: 6px;
    }

    .navegacion-campeonato a {
        font-size: 11px;
        padding: 8px 9px;
    }
}

/* =====================================
   MUNDOLIGAS - PAGINA GOLEADORES
   ===================================== */

.pagina-goleadores {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 18px 45px;
}

.goleadores-encabezado h1 {
    color: #14213d;
    font-size: 27px;
    margin-bottom: 8px;
}

.goleadores-encabezado p {
    color: #64748b;
    font-size: 14px;
}

.goleadores-selector,
.goleadores-panel {
    background: #ffffff;
    border: 1px solid #e1e8f0;
    border-radius: 16px;
    padding: 22px;
    margin-top: 20px;
    box-shadow: 0 4px 18px rgba(15,35,65,.06);
}

.goleadores-selector label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
    color: #14213d;
}

.goleadores-selector select {
    width: 100%;
    padding: 12px;
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    color: #14213d;
    background: #ffffff;
}

.goleadores-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.goleadores-titulo h2 {
    font-size: 19px;
    color: #14213d;
    margin: 0;
}

.goleadores-titulo span {
    background: #eaf3ff;
    color: #1677f2;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
}

.goleadores-cabecera,
.goleadores-fila-completa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px 120px;
    align-items: center;
    gap: 12px;
}

.goleadores-cabecera {
    background: #f1f6fc;
    color: #64748b;
    padding: 12px;
    font-size: 12px;
    border-radius: 9px;
}

.goleadores-cabecera span:nth-child(2),
.goleadores-cabecera span:nth-child(3) {
    text-align: center;
}

.goleadores-fila-completa {
    padding: 13px 12px;
    border-bottom: 1px solid #edf2f7;
}

.goleadores-jugador {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.goleadores-posicion {
    color: #1677f2;
    font-weight: 800;
    width: 22px;
    flex-shrink: 0;
}

.goleadores-foto {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #f1f5f9;
}

.goleadores-datos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.goleadores-datos strong {
    color: #14213d;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.goleadores-datos small {
    color: #64748b;
    font-size: 12px;
}

.goleadores-cantidad {
    color: #1677f2;
    font-size: 18px;
    text-align: center;
}

.goleadores-boton-info {
    border: 0;
    background: #1677f2;
    color: #ffffff;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.goleadores-boton-info:hover {
    background: #0862d4;
}

.goleadores-regresar {
    background: #eaf3ff;
    border: none;
    border-radius: 9px;
    color: #1677f2;
    padding: 11px 15px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 25px;
}

.goleador-perfil {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #edf2f7;
}

.goleador-perfil img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #eaf3ff;
}

.goleador-perfil-info {
    flex: 1;
    min-width: 0;
}

.goleador-perfil-info h2 {
    color: #14213d;
    margin: 0 0 7px;
    font-size: 22px;
}

.goleador-perfil-info p {
    color: #64748b;
    margin: 0;
}

.goleador-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #1677f2;
}

.goleador-total strong {
    font-size: 32px;
}

.goleador-total span {
    font-size: 12px;
}

.goleadores-subtitulo {
    margin: 25px 0 15px;
    font-size: 17px;
    color: #14213d;
}

.goleadores-rival {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background: #f8fbff;
    border: 1px solid #e0eaf5;
    border-left: 4px solid #1677f2;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    color: #14213d;
}

.goleadores-rival strong {
    color: #1677f2;
    font-size: 19px;
}

.goleadores-mensaje {
    padding: 30px 15px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

/* Respetar el atributo hidden */
.goleadores-panel[hidden] {
    display: none !important;
}

/* CELULARES */
@media (max-width: 600px) {

    .pagina-goleadores {
        padding: 0 12px 30px;
    }

    .goleadores-panel,
    .goleadores-selector {
        padding: 15px;
    }

    .goleadores-cabecera,
    .goleadores-fila-completa {
        grid-template-columns: minmax(0, 1fr) 40px 86px;
        gap: 7px;
    }

    .goleadores-foto {
        width: 38px;
        height: 38px;
    }

    .goleadores-jugador {
        gap: 7px;
    }

    .goleadores-datos strong {
        font-size: 12px;
    }

    .goleadores-boton-info {
        font-size: 11px;
        padding: 9px 5px;
    }

    .goleador-perfil {
        gap: 12px;
    }

    .goleador-perfil img {
        width: 65px;
        height: 65px;
    }

    .goleador-perfil-info h2 {
        font-size: 17px;
    }

    .goleador-total strong {
        font-size: 25px;
    }
}

/* BOTONES DE MODALIDAD - GOLEADORES */

.modalidades-goleadores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.modalidad-gol {
    background: #ffffff;
    color: #14213d;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.modalidad-gol:hover {
    background: #eaf3ff;
    color: #1677f2;
    border-color: #1677f2;
}

.modalidad-gol.activo {
    background: #1677f2;
    color: #ffffff;
    border-color: #1677f2;
    box-shadow: 0 3px 10px rgba(22,119,242,.18);
}

@media (max-width: 600px) {
    .modalidades-goleadores {
        gap: 6px;
    }

    .modalidad-gol {
        padding: 9px 12px;
        font-size: 12px;
    }
}








/* CLUB QUE NO SE PRESENTÓ */

.enc-nombre-equipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    text-align: center;
}

.enc-ausente {
    color: #dc2626;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.enc-ausente::after {
    content: "";
    display: block;
    width: 95px;
    max-width: 100%;
    height: 4px;
    margin: 5px auto 0;
    background: #dc2626;
    border-radius: 10px;
}

/* VOCAL Y DATOS DEL PARTIDO */

.enc-informacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    margin-top: 12px;
}

.enc-aviso-administrativo {
    background: #fff5f5;
    border-left: 4px solid #dc2626;
    color: #991b1b;
    border-radius: 8px;
    padding: 13px 15px;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.6;
}

.enc-victoria-administrativa {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .enc-ausente {
        font-size: 9px;
    }

    .enc-ausente::after {
        width: 65px;
    }
}



/* =========================================
   MUNDOLIGAS - RESULTADOS ADMINISTRATIVOS
   ========================================= */

.enc-marcador .enc-nombre-equipo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0;
    text-align: center;
}

.enc-marcador .enc-ausente {
    display: block !important;
    color: #dc2626 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px;
    line-height: 1.4;
    text-align: center;
}

.enc-marcador .enc-ausente::after {
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    margin: 5px auto 0;
    background: #dc2626;
    border-radius: 8px;
}

.enc-marcador .enc-victoria-administrativa {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

/* Cancha y vocal separados */

.enc-informacion {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 12px;
}

.enc-informacion > span {
    display: block;
}

@media (max-width: 600px) {
    .enc-marcador .enc-ausente {
        font-size: 9px !important;
    }

    .enc-marcador .enc-ausente::after {
        width: 60px;
    }
}

.enc-escudo {
    width: 65px;
    height: 65px;
    object-fit: contain;
    display: block;
    margin: 0 auto 6px;
}

.enc-nombre-equipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
}

@media (max-width: 600px) {
    .enc-escudo {
        width: 45px;
        height: 45px;
    }
}


/* ==========================================
   MUNDOLIGAS - ESCUDOS DE CLUBES
   ========================================== */


/* ==========================================
   1. PÁGINA ENCUENTROS
   ========================================== */

/* Distribución de equipos y marcador */
.enc-marcador {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

/* Escudo y nombre del club */
.enc-marcador .enc-nombre-equipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Escudos de encuentros */
.enc-marcador img.enc-escudo {
    display: block !important;
    width: 55px !important;
    height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    object-fit: contain !important;
    margin: 0 auto 5px;
    flex-shrink: 0;
}

/* Evitar desbordamiento */
.enc-marcador > div {
    min-width: 0;
}


/* ==========================================
   2. CAMPEONATOS - PARTIDOS
   ========================================== */

/* Alinear escudo, nombre y resultado */
#listaEncuentros .encuentro-equipo {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Nombre del equipo */
#listaEncuentros .encuentro-nombre {
    flex: 1;
    min-width: 0;
}

/* Escudos pequeños en partidos */
#listaEncuentros img.escudo-partido {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    flex-shrink: 0;
}


/* ==========================================
   3. CAMPEONATOS - POSICIONES
   ========================================== */

/* Nombre y escudo en la tabla */
.tabla-posiciones td.posiciones-club {
    white-space: nowrap;
}

/* Escudos de posiciones */
#listaPosiciones img.escudo-posicion {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    vertical-align: middle;
    margin-right: 6px;
}


/* ==========================================
   4. CAMPEONATOS - GOLEADORES
   ========================================== */

img.escudo-goleador {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    vertical-align: middle;
}


/* ==========================================
   5. ADAPTACIÓN PARA CELULARES
   ========================================== */

@media (max-width: 600px) {

    /* Encuentros */
    .enc-marcador {
        gap: 6px;
    }

    .enc-marcador img.enc-escudo {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }

    .enc-marcador strong {
        font-size: 22px;
    }

    /* Partidos de campeonatos */
    #listaEncuentros img.escudo-partido {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
    }

    /* Tabla de posiciones */
    #listaPosiciones img.escudo-posicion {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
    }
}

/* ==========================================
   CORRECCIÓN DE ESCUDOS - MUNDOLIGAS
   ========================================== */

/* Campeonatos: partidos */
img.escudo-partido {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* Campeonatos: posiciones */
img.escudo-posicion {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
}

/* Campeonatos: goleadores */
img.escudo-goleador {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
}

/* Página de encuentros */
.enc-marcador img.enc-escudo {
    display: block !important;
    width: 55px !important;
    height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    object-fit: contain !important;
}

@media (max-width: 600px) {
    img.escudo-partido,
    img.escudo-posicion {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
    }

    .enc-marcador img.enc-escudo {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }
}
