html {
    -webkit-tap-highlight-color: transparent;
}
body {
    margin: 0px;
    padding: 0;
    background-color: rgb(0, 50, 90);
    color: rgb(245, 244, 244);
    font-family: 'Helvetica';
}

ul {
    padding-inline-start: 0;
    list-style-type: none;
}

header {
    display: flex;
    justify-content: center;
    background-color: rgb(0, 30, 70);
    width: 100%;
    box-sizing: border-box;
}

#logo {
    width: 200px;
    height: auto;
}

h1 {
    margin: 11px;
    text-align: center;
    font-size: x-large;
    /*color:rgb(200, 200, 200);*/
    color: rgb(30, 125, 200);
    font-family: monospace;
    font-weight: 100;
}
@media (max-width: 670px) {
    h1 {
        font-size: large;
    }
}

#barra_escudos {
    display:flex;
    justify-content: space-around;
    background-color: rgb(0, 30, 70);
    padding: 10px;
}
#escudo_grande {
    width: 200px;
    filter: drop-shadow(2px 3px 3px rgb(20, 0, 0));
}
.escudos {
    /* width: 200px; */
    width: 40px;
    /* height: 40px; */
    filter: drop-shadow(2px 3px 3px rgb(20, 0, 0));
}


/* TABLAS */

.tablas_contenedor {
    margin-top: 150px;
    display:flex;
    justify-content: space-around;
}
/* tabla genérica */
.tabla {
    width: 240px;
    height: 350px;
    background-color: rgb(0, 30, 70);
    border-radius: 25px;
    display:grid;
    grid-template-rows: 50px 100px 100px 100px;
    box-shadow:5px 5px 5px rgb(0, 10, 40);
}
.tabla:hover {
    background-color: rgb(10, 40, 50);
}


#titulo_tabla {
    display:flex;
    justify-content: center;
    align-items: center;
    color: rgb(200, 200, 200);
    background-color: rgb(0, 30, 70);
    border-radius: 25px 25px 0px 0px;
    font-size: 18px;
    text-align: center;
    /*box-shadow: -2px 3px 5px rgba(0, 0, 0, 0.5);*/
}

#tabla-tradicional {
    border-collapse: collapse;
    width: 100%;
}

#tabla-tradicional th,
#tabla-tradicional td {
    border: 1px solid rgb(0, 30, 70);
    text-align: center;
    font-family: monospace;
    padding: 5px 10px;
    white-space: nowrap;
}

.escudo-tabla {
    width: 20px;
    height: 20px;
}

/* BORDE INTERNOS DE LAS TABLAS */
.bordes_internos {
    border-bottom: 3px solid rgb(0, 50, 90);
}
.celdas_internas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
}

/* COLUMNAS DEL GRID DE LA PRIMER FILA DE LA PRIMER COLUMNA*/
.numero_primer_fila {
    color: rgb(0, 50, 90);
    font-size: 75px;
    align-self: center;
    font-family:'Roboto';
}

/* IMAGEN DE LAS FILAS */
.imagen {
    display: flex;
    align-items: center;
    justify-content: center;
}
.imagen_escudo {
    width: 80%;
    height: auto;
    justify-content: center;
    align-items: center;
    /*box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);*/
    filter: drop-shadow(2px 3px 6px rgb(20, 0, 0))
}
/* IMAFEN DE LA TABLA FIXTURE */
.imagen_fixture {
    display: flex;
    justify-content: center;
    align-items: center;
}
.imagen_escudo_fixture {
    width: 70%;
    height: auto;
    filter: drop-shadow(2px 3px 6px rgb(12, 0, 0))
}

.vs {
    color: rgb(0, 50, 90);
    font-size: 70px;
    text-align: center;
    align-self: center;
    font-family:'Roboto';
}

/************** TABLA RESULTADOS ***************/

/* .tabla_resultados {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
}

.titulo_tabla_resultado {
    grid-column: 2 / span 2;
    justify-self: center;
    align-self: center;
}
.partidos {
    width: 240px;
    height: 80px;
    background-color: rgb(0, 30, 70);
    justify-self: center;
    align-self: center;
    border-radius: 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
}

.partidos:hover {
    width: 250px;
}


.partido1_fecha_anterior {
    grid-column: 1;
    grid-row: 2;
}
.partido2_fecha_anterior {
    grid-column: 2;
    grid-row: 2;
}
.partido3_fecha_anterior {
    grid-column: 3;
    grid-row: 2;
}
.partido4_fecha_anterior {
    grid-column: 4;
    grid-row: 2;
}
.partido5_fecha_anterior {
    grid-column: 1;
    grid-row: 3;
}
.partido6_fecha_anterior {
    grid-column: 2;
    grid-row: 3;
}
.partido7_fecha_anterior {
    grid-column: 3;
    grid-row: 3;
}
.partido8_fecha_anterior {
    grid-column: 4;
    grid-row: 3;
}
.escudo_fecha {
    width: 70%;
    height: auto;
    filter: drop-shadow(2px 3px 6px rgb(0, 12, 1));
    justify-self: center;
    align-self: center;
}
.resultado {
    font-size: 25px;
    justify-self: center;
    align-self: center;
} */






/* GRILLA */

#grilla {
  display: grid;
  /*grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));*/
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 45px 130px 130px 130px 130px 130px 130px 130px 130px 130px 130px 130px 130px 130px 130px;
  gap: 16px;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 35px;
}

@media (max-width: 768px) {
  #grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 45px 450px 450px 450px 450px 450px 450px 450px 450px;
    gap: 7px;
    width: 98%;
  }
}

/* TITULO */
#titulo-torneo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background: linear-gradient(
    140deg,
    rgb(0, 30, 70) 30%,
    rgb(30, 60, 100)
  );
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    /* font-size: x-large; */
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 100;
    text-align: center;
    margin: 0;
    box-shadow: 0px 16px 20px rgb(0, 10, 40);
    grid-column: 1/6;
    grid-row: 1;
}

@media (max-width: 768px) {
  #titulo-torneo {
    grid-column: 1/3;
    grid-row: 1;
    font-size: clamp(1.3rem, 3vw, 1.5rem);  
  }
}


/* TARJETAS */



.tarjetas {
    width: 100%;
    height: 130px;
    /*background-color: rgb(0, 30, 70);*/
    background: linear-gradient(
    140deg,
    rgb(0, 30, 70) 30%,
    rgb(30, 60, 100)
  );
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    font-size: x-large;
    font-weight: 100;
    text-align: center;
    margin: 0;
    box-shadow: 0px 16px 20px rgb(0, 10, 40);
}




h2 {
    margin: 10px 0px 0px 0px;
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 100;
}
h3 {
    margin: 10px 0px 0px 0px;
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 100;
}
h4 {
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 100;
}

.numeros {
    margin: 5px 0px 5px 0px;
    font-size: clamp(3.125rem, 5vw + 2rem, 4rem);
    font-weight: 100;
}

/* ORDEN DE LAS TARJETAS EN LA GRILLA */
.cont-tarjetas {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


@media (max-width: 768px) {
  #titulo-valor-mercado {
    margin: 10px;
  }
  #primeras-2-tarjetas {
    /* grid-column: 1/3; */
    grid-row: 5;
  }
}


a {
  color: rgb(150, 150, 150);
  /* text-decoration: none; */
  /* font-size: 16px; */
  font-size: clamp(0.7rem, 1.5vw, 1rem);
}


#grafica-apertura {
    width: 100%;
    height: auto;
    background: linear-gradient(
    140deg,
    rgb(0, 30, 70) 30%,
    rgb(30, 60, 100)
  );
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    font-size: x-large;
    font-weight: 100;
    text-align: center;
    margin: 0;
    box-shadow: 0px 16px 20px rgb(0, 10, 40);
    grid-column: 1/4;
    grid-row: 2/5;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

#grafica-valor-equipos {
    width: 100%;
    /* height: 420px; */
    height: auto;
    background: linear-gradient(
    140deg,
    rgb(0, 30, 70) 30%,
    rgb(30, 60, 100)
  );
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    font-size: x-large;
    font-weight: 100;
    text-align: center;
    margin: 0;
    box-shadow: 0px 16px 20px rgb(0, 10, 40);
    grid-column: 4/6;
    grid-row: 2/5;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
@media (max-width: 670px) {
    #grafica-valor-equipos {
        grid-column: 1/3;
        grid-row: 3;
    }
    #grafica-apertura {
        grid-column: 1/3;
        grid-row: 2;
    }
}

#cantidad-partidos {
    grid-column: 1/3;
    grid-row: 5;
}

#puntos {
    grid-column: 3;
    grid-row: 5;
}

#record-loc {
    grid-column: 1;
    grid-row: 6/8;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grafica-puntos {
    grid-column: 4/6;
    grid-row: 8/11;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#graf-rec-tot {
    display: flex;
    justify-content: center;
}

#record-loc-mobile {
    grid-column: 1;
    grid-row: 6/8;
}

#cont-tarjeta-record-loc-visit {
    grid-column: 2/4;
    grid-row: 6/8;
    display: flex;
    justify-content: space-around;
}



.grafica-historial-local {
    grid-column: 4/6;
    grid-row: 5/8;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 670px) {
    .grafica-historial-local {
        grid-column: 1/3;
        grid-row: 6;
    }
    #cantidad-partidos {
        grid-column: 1;
        grid-row: 4;
    }
    #puntos {
        grid-column: 2;
        grid-row: 4;
    }
    #record-loc {
        grid-column: 1/3;
        grid-row: 5;
    }
    .grafica-puntos {
        grid-column: 1/3;
        grid-row: 5;
    }
    #cont-tarjeta-record-loc-visit {
        grid-column: 1/3;
        grid-row: 6;
    }
}



#cantidad-goles-tot {
    grid-column: 1;
    grid-row: 8;
}


#promedio-goles-total {
    grid-column: 2;
    grid-row: 8;
}
@media (max-width: 670px) {
    #cantidad-goles-tot {
        grid-column: 1/3;
        grid-row: 7;
    }
    #promedio-goles-total {
        grid-column: 1/3;
        grid-row: 8;
    }
}


.goles-favor {
    grid-column: 1/3;
    grid-row: 9/11;
}
#cont-tarjeta-pts-loc-pts-vist {
    grid-column: 3;
    grid-row: 8/10;
}
@media (max-width: 670px) {
    .goles-favor {
        grid-column: 1/3;
        grid-row: 8;
    }
    #cont-tarjeta-pts-loc-pts-vist {
        grid-column: 1/3;
        grid-row: 10;
    }
}

#titulos-cont-gol-fav-dif-gol {
    display: flex;
    justify-content: space-around;
}
#titulos-cont-gol-cont-dif-gol {
    display: flex;
    justify-content: start;
    padding-left: 10px;
}
#graficas-cont-gol-fav-dif-gol {
    display: flex;
    justify-content: space-around;
    align-items: end;
}



#grafica-gf {
    width: 100%;
    height: auto;
    background: linear-gradient(
    140deg,
    rgb(0, 30, 70) 30%,
    rgb(30, 60, 100)
  );
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    font-size: x-large;
    font-weight: 100;
    text-align: center;
    margin: 0;
    box-shadow: 0px 16px 20px rgb(0, 10, 40);
    grid-column: 1/3;
    grid-row: 11/14;
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    align-items: center;
}

#grafica-gc {
    width: 100%;
    height: auto;
    background: linear-gradient(
    140deg,
    rgb(0, 30, 70) 30%,
    rgb(30, 60, 100)
  );
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    font-size: x-large;
    font-weight: 100;
    text-align: center;
    margin: 0;
    box-shadow: 0px 16px 20px rgb(0, 10, 40);
    grid-column: 4/6;
    grid-row: 13/16;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 670px) {
    #grafica-gf {
        grid-column: 1/3;
        grid-row: 11;
    }
    #grafica-gc {
        grid-column: 1/3;
        grid-row: 12;
    }
}

.h2-tabla-gfgc {
    padding-bottom: 15px;
}
.h3-tabla-gfgc {
    padding-bottom: 15px;
}



#cont-gf-gc {
    grid-column: 3;
    grid-row: 10/12;
}
#cont2-gf-gc {
    grid-column: 3;
    grid-row: 12/14;
}
@media (max-width: 670px) {
    #cont-gf-gc {
        grid-column: 1/3;
        grid-row: 13;
    }
    #cont2-gf-gc {
        grid-column: 1/3;
        grid-row: 14;
    }
}


#graf-pts-loc-pts-vist {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    grid-row: 9;
}

#gf-como-loc-gc-como-loc {
    display: flex;
    justify-content: center;
    padding-top: 15px;
}

#gf-como-visit-gc-como-visit {
    display: flex;
    justify-content: center;
    padding-top: 15px;
}




/* PPP */
.tarjeta_ppp {
    width: 100%;
    background-color: var(--color-fondo-tarjeta);
    border-radius: 10px;
    box-shadow: 5px 5px 5px var(--color-sombra-tarjeta);
    border: solid 1px rgb(34, 48, 68);
    grid-column: 4/6;
    grid-row: 11/13;
    margin: 0 auto;
}
@media (max-width: 670px) {
    .tarjeta_ppp {
        grid-column: 1/3;
        grid-row: 15;
    }
}
.ppp {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.escudos_ppp {
    width: 100px;
}
#cont-ppp-loc-visit {
    display: flex;
    /* justify-content: space-between; */
}
.num_ppp {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: xx-large;
}
.tit_ppp {
    font-size: medium;
}
.cont-total-ppp-local {
    height: 120px;
    /* margin: 0 10px; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.cont-ppp-energia-puntos-local {
    display: flex;
    justify-content: center;
    align-items: center;
}
#cont-ppp-energia-total {
    display: flex;
    justify-content: center;
}
.cont-total-ppp-visit {
    height: 120px;
    /* margin: 0 10px; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: end;
}
.cont-ppp-energia-puntos-visit {
    display: flex;
    align-items: center;
}
.energia-ppp {
    width: 20px;
    height: 5px;
    background: rgba(0, 0, 40, .6);
    margin: 1px;
    border-radius: 2px;
}
.cont-energia-local {
    margin-right: 10px;
}
.cont-energia-visit {
    margin-left: 10px;
}
@media (max-width: 768px) {
    .cont-energia-local {
        margin-right: 5px;
    }
    .cont-energia-visit {
        margin-left: 5px;
    }
}






.tabla_apertura2024 {
    grid-row: 13;
}



.avg-gf {
    grid-column: 1;
    grid-row: 14/16;
}
.titulo-h4 {
    margin: 20px;
}
.avg-gf-local {
    grid-column: 2/4;
    grid-row: 14/16;
}
@media (max-width: 768px) {
    .tabla_apertura2024 {
        grid-column: 1/3;
        grid-row: 16;
    }
    .avg-gf {
        grid-column: 1/3;
        grid-row: 17;
        display: flex;
        flex-direction: column;
    }
    .avg-gf-local {
        grid-column: 1/3;
        grid-row: 18;
    }
}
.contenido {
    display: flex;
    justify-content: space-evenly;
}
.titulo-h4-avg {
    margin: 20px 0;
}


/* .historial-loc {
    grid-column: 1/6;
    grid-row: 18;
    justify-self: start;
}

.historial-visit {
    grid-column: 1/6;
    grid-row: 18;
}
@media (max-width: 768px) {
    .historial-loc {
        grid-column: 1/3;
        grid-row: 20;
    }
    .historial-visit {
        grid-column: 1/3;
        grid-row: 21;
    }
} */









/* MUESTRA LOS PARTIDOS PREVIOS */
.tarjeta-historial-partidos {
    width: 100%;
    /* background-color: var(--color-fondo-tarjeta); */
    /* border-radius: 10px; */
    /* box-shadow: 5px 5px 5px var(--color-sombra-tarjeta); */
    font-family: monospace;
    font-size: 16px;
    /* border: solid 1px rgb(34, 48, 68); */
}
/* UBICACION DE LA TARJETA HISTORIAL LOCAL */
.historial-loc {
    grid-column: 1/6;
    grid-row: 16;
    justify-self: start;
}
/* UBICACION DE LA TARJETA HISTORIAL VISITANTE */
.historial-visit {
    grid-column: 1/6;
    grid-row: 17;
    justify-self: end;
}
/* @media (max-width: 768px) {
    .historial-loc {
        grid-column: 1/3;
        grid-row: 19;
    }
    .historial-visit {
        grid-column: 1/3;
        grid-row: 20;
    }
} */
.titulos-columna-local {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    place-items: center;
    text-align: center;
    border-bottom: 1px solid var(--color-titulo-tarjeta);
    margin-bottom: 10px;
}
.titulo-historial-partidos {
    text-align: center;
}
.titulos-items {
    font-family: monospace;
    font-size: 16px;
    color: var(--color-fuente);
}
.titulo-columna-resultado-local {
    grid-column: 6/8;
}
.titulo-columna-dt-local {
    grid-column: 12;
}
@media (max-width: 768px) {
    .titulos-items {
        font-size: xx-small;
    }
    .titulo-columna-resultado-local {
        grid-column: 1/3;
        font-size: xx-small;
    }
    .titulo-columna-dt-local {
        font-size: xx-small;
        grid-column: 21;
    }
}

.titulos-columna-visitante {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 5px repeat(6, 1fr);
    place-items: center;
    text-align: center;
    border-bottom: 1px solid var(--color-titulo-tarjeta);
    margin-bottom: 10px;
}
.titulo-columna-resultado-visitante {
    grid-column: 3/6;
}
.titulo-columna-dt-visitante {
    grid-column: 7;
}
@media (max-width: 768px) {
    .titulos-columna-visitante {
        grid-template-columns: repeat(3, 1fr) 5px repeat(6, 1fr);
        font-size: xx-small;
    }
    .titulo-columna-resultado-visitante {
        grid-column: 1/3;
    }
    .titulo-columna-dt-visitante {
        grid-column: 1/3;
    }
}

.partido-historial-local {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    place-items: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: medium;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(0, 30, 70);
}
.partido-historial-visitante {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 5px repeat(6, 1fr);
    place-items: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: medium;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(0, 30, 70);
}
@media (max-width: 768px) {
    .partido-historial-local {
        grid-template-columns: repeat(6, 1fr) 5px repeat(3, 1fr);
    }
    .partido-historial-visitante {
        grid-template-columns: repeat(3, 1fr) 5px repeat(6 , 1fr);
    }
}
.textos-partido {
    text-align: center;
    font-size: small;
    font-family: monospace;
}
.numeros-partido {
    text-align: center;
    font-size: x-large;
    font-family: monospace;
    position: relative;
}
.texto-lista {
    font-size: 11px;
    color: rgb(137, 140, 170);
}
.imagen-escudo-historial {
    width: 50px;
    height: 50px;
}
@media (max-width: 768px) {
    .textos-partido {
        font-size: xx-small;
    }
}









/* TARJETA CON TIEMPO DE LOS GOLES */
.tarjeta-minutos-goles {
    width: 100%;
    height: 100%;
    display: grid;
    grid-row: 4;
    grid-column: 4/7;
    align-self: flex-start;
}
@media (max-width: 768px) {
    .tarjeta-minutos-goles {
        grid-column: 1/3;
        grid-row: 22;
    }
}
#titulos-tiempos {
    display: flex;
    justify-content: space-evenly;
}
h5 {
    margin: 0;
}
.lista-minutos-goles {
    margin: 0px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.tiempos {
    display: flex;
    justify-content: space-around;
}
.primer-tiempo {
    width: 150px;
}
.segundo-tiempo {
    width: 150px;
}
.titulo-tiempo {
    display: flex;
    justify-content: center;
}
.rangos-minutos {
    display: flex;
    justify-content: space-around;
}
.numeros-minutos-goles {
    display: flex;
    justify-content: center;
}

/* PELOTA */
.pelota img{
    width: 10px;
    height: 10px;
}
/* TIEMPOS CON LAS PELOTAS */
.cont-tiempos-goles-gral-hist-loc {
    /* display: grid;
    grid-template-columns: repeat(6, 1fr) 20px 10px 20px repeat(3, 1fr);
    margin-top: -5px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-titulo-tarjeta); */
    grid-column: 6/9;
    margin: 10px 0;
}
.cont-tiempos-goles-gral {
    /* display: grid;
    grid-template-columns: repeat(3, 1fr) 20px 10px 20px repeat(6, 1fr);
    margin-top: -5px;
    padding-bottom: 10px; */
    /* border-bottom: 1px solid var(--color-titulo-tarjeta); */
    grid-column: 3/6;
    margin: 10px 0;
}
/* @media (max-width: 768px) {
    .cont-tiempos-goles-gral-hist-loc {
        grid-column: 1/3;
        grid-row: 23;
    }
    .cont-tiempos-goles-gral {
        grid-column: 1/3;
        grid-row: 24;
    }
} */
.cont-goles-tiempos-hist-loc {
    grid-column: 6/11;
    justify-self: center;
    display: grid;
    grid-template-columns: 10px 100px;
    grid-template-rows: repeat(3, 5px);
}
.cont-goles-tiempos {
    grid-column: 3/8;
    justify-self: center;
    display: grid;
    grid-template-columns: 10px 100px;
    grid-template-rows: repeat(3, 5px);
}
@media (max-width: 768px) {
    .cont-goles-tiempos-hist-loc {
        grid-column: 1/3;
        grid-row: 25;
    }
    .cont-goles-tiempos {
        grid-column: 1/3;
        grid-row: 26;
    }
}
#escud-loc {
    grid-column: 1;
    width: 12px;
    height: 12px;
    align-self: center;
}
#escud-visit {
    grid-column: 1;
    grid-row: 3;
    width: 12px;
    height: 12px;
}
#pelotas-goles-loc {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: flex;
}
#pelotas-goles-visit {
    position: relative;
    grid-column: 2;
    grid-row: 3;
    display: flex;
}
#todos-los-tiempos {
    margin-left: 5px;
    grid-column: 2;
    grid-row: 2;
    display: flex;
}
/* #primerT {
    width: 45px;
    height: 5px;
    background-color: rgb(0, 100, 0);
    border-radius: 2px 0px 0px 2px;
}
#segundoT {
    width: 45px;
    height: 5px;
    background-color: rgb(0, 100, 0);
}  */
#primerT {
    position: relative;
    width: 45px;
    height: 5px;
    background-color: rgb(0, 100, 0);
    border-radius: 2px 0px 0px 2px;
}
#segundoT {
    position: relative;
    width: 45px;
    height: 5px;
    background-color: rgb(0, 100, 0);
}
.desc {
    width: 5px;
    height: 5px;
    background-color: rgb(100, 0, 0);
}
#desc2 {
    border-radius: 0 2px 2px 0;
}
#desc1, #desc2 {
    position: relative;
    overflow: visible;
}



.minutos-goles-lista {
    position: absolute;
    top: 100%;
    left: 0%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: xx-small;
    pointer-events: none;
}
.minutos-goles-lista-visit {
    position: absolute;
    top: 100%;
    left: -100%;
    /* transform: translateX(-50%); */
    white-space: nowrap;
    font-size: xx-small;
    pointer-events: none;
}







/* #grafica-dona {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    background: linear-gradient(
    140deg,
    rgb(0, 30, 70) 30%,
    rgb(30, 60, 100)
  );
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    font-size: x-large;
    font-weight: 100;
    text-align: center;
    margin: 0;
    box-shadow: 0px 16px 20px rgb(0, 10, 40);
    grid-column: 1/3;
    grid-row: 5;
}
#cont-grafica-dona {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
} */


/* #grafica-gep-fecha {
    width: 100%;
    height: auto;
    background: linear-gradient(
    140deg,
    rgb(0, 30, 70) 30%,
    rgb(30, 60, 100)
  );
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    font-size: x-large;
    font-weight: 100;
    text-align: center;
    margin: 0;
    box-shadow: 0px 16px 20px rgb(0, 10, 40);
    grid-column: 3/6;
    grid-row: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#cont-grafica-fechas {
    display: flex;
    justify-content: center;
    align-items: center;
} */






@media (max-width: 768px) {
    /* #grafica-frecuencia-resultados {
    grid-column: 1/4;
    grid-row: 5;
    }
    #grafica-dona {
      grid-column: 1/3;
      grid-row: 6;
    } */
    /* #primeras-2-tarjetas {
      grid-column: 4/6;
      grid-row: 5;
    } */
    #grafica-gep-fecha {
        grid-column: 1/3;
        grid-row: 7;
    }
    #cont-grafica-dona {
        margin-top: 0px;
        height: 250px;
    }
    #grafica-gf {
        grid-column: 1/3;
        grid-row: 8;
    }
    #grafica-gc {
        grid-column: 1/3;
        grid-row: 9;
    }
}




/* Para pantallas de celular */
@media (max-width: 670px) {
    #barra_escudos {
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    canvas {
        width: 100%;   /* ocupa todo el ancho del contenedor */
        height: auto;  /* mantiene la proporción */
    }
}





/* GRÁFICAS */

.grafica {
    border-radius: 20px;
    box-shadow:5px 5px 5px rgb(0, 10, 40),
    -5px -5px 5px rgb(0, 40, 70);
}


/* TABLA GOLES A FAVOR */
.gol_fav {
    margin: 100px;
    width: 250px;
    background-color: rgb(0, 30, 70);
    border-radius: 20px;
    grid-template-rows: 50px 100px 100px 100px;
    box-shadow:5px 5px 5px rgb(0, 10, 40),
    -5px -3px 5px rgb(0, 20, 50);
}
.titulo_tabla_secundaria {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(200, 200, 200);
    border-bottom: 1px solid rgb(0, 50, 90);
}
.columnas {
    height: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    text-align: center;
    color: rgb(200, 200, 200);
    border-bottom: 1px solid rgb(0, 50, 90);
}
.fila_goles_favor {
    padding: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    border-bottom: 1px solid rgb(0, 50, 90);
}
.imagen_escudo_gol_fav img {
    width: 40px;
    height: auto;
}
.num_goles {
    font-size: xx-large;
    color: rgb(200, 200, 200);
}
.num_pos {
    font-size: x-large;
    font-style: italic;
    color: rgb(0, 50, 90);
}
.final_tabla { /* para que no se vea el borde del ultimo elemento de la lista */
    height: 1px;
    /*border-bottom: 1px solid rgb(0, 50, 90);*/
}







/* FECHAS */
/* .fechas {
    border-radius: 5px;
    background: linear-gradient(
    140deg,
    rgb(0, 30, 70) 30%,
    rgb(30, 60, 100)
    );
    box-shadow: 0px 16px 20px rgb(0, 10, 40);
    grid-column: 1/6;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 670px) {
    .fechas {
        grid-column: 1/3;
    }
} */
.titulo-fecha {
    font-family: monospace;
    color: rgb(30, 125, 200);
    font-size: 18px;
}

.cont-partidos-individuales {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    max-width: 1000px;
}
/* @media (max-width: 670px) {
    .cont-partidos-individuales {
        width: 105%;
}
} */
/* .partidos-prox-fecha {
    text-decoration: none;
} */
.partidos-prox-fecha,
.partidos-prox-fecha:visited,
.partidos-prox-fecha:hover,
.partidos-prox-fecha:active,
.partidos-prox-fecha:focus {
    text-decoration: none;
    -webkit-text-decoration: none;
}
.partidos-individuales {
    background-color: rgb(15, 50, 97);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 20px;
    padding: 10px;
    margin: 5px 10px;
}
.escudos-fechas {
    width: 35px;
    height: 35px;
}
.vs {
    font-family: monospace;
    font-size: 16px;
    color: rgb(30, 125, 200);
    user-select: none;
}
.numero-vs {
    font-family: monospace;
    font-size: 18px;
    color: rgb(30, 125, 200);
    margin: 5px;
}


/* @media (max-width: 670px) {
    .fechas {
        grid-column: 1/3;
}
} */





/* Clase para mejorar SEO y accesibilidad - oculta visualmente pero accesible para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}



footer {
    width: 90%;
    max-width: 1200px;
    margin: 60px auto;
}
#tit-pie {
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    font-size: large;
    font-weight: 100;
    text-align: center;
    margin: 10px 0;
}
#pie {
    color: rgb(30, 125, 200);
    border-radius: 5px;
    font-family: monospace;
    font-size: x-large;
    font-weight: 100;
    text-align: center;
    margin: 0;
    font-size: small;
    list-style: none;
    padding-inline-start: 0px;
}








































/* ########################################################################################## */




.tarjeta {
   width: 100%;
   /* height: 140px; */
   /*background-color: rgb(0, 30, 70);*/
   background: linear-gradient(
   140deg,
   rgb(0, 30, 70) 30%,
   rgb(30, 60, 100)
 );
   color: rgb(30, 125, 200);
   border-radius: 5px;
   font-family: monospace;
   font-size: x-large;
   font-weight: 100;
   text-align: center;
   margin: 0;
   box-shadow: 0px 16px 20px rgb(0, 10, 40);
}







/* ########################################################################################## */




























@media (max-width: 768px) {
  #grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 45px 450px 450px 100px 235px 235px 225px 260px 320px;
    gap: 7px;
    width: 98%;
  }

  #titulo-torneo {
    grid-column: 1/3;
    grid-row: 1;
    font-size: clamp(1.3rem, 3vw, 1.5rem);  
  }

  .escudos_grande {
    width: 200px;
  }

  #grafica-valor-equipos {
    grid-column: 1/3;
    grid-row: 2;
  }

  #grafica-apertura {
    grid-column: 1/3;
    grid-row: 3;
  }

  .tarjetas {
    height: 100px;
  }

  #cantidad-partidos {
    grid-column: 1;
    grid-row: 4;
  }

  #puntos {
    grid-column: 2;
    grid-row: 4;
  }

  #record-loc-mobile {
    grid-column: 1/3;
    grid-row: 5;
  }
  #graf-rec-tot {
    display: block;
    /* justify-content: center; */
  }

  #cont-tarjeta-record-loc-visit {
    grid-column: 1/3;
    grid-row: 6;
  }

  .tarjeta_ppp {
    grid-column: 1/3;
    grid-row: 7;
  }
  #titulo-ppp {
    margin-bottom: 0;
  }

  #cont-tarjeta-pts-loc-pts-vist {
    grid-column: 1/3;
    grid-row: 8;
  }

  .grafica-puntos {
    grid-column: 1/3;
    grid-row: 9;
  }


  #graf-pts-loc-pts-vist {
    padding: 20px 0;
  }

  .grafica-historial-local {
    grid-column: 1/3;
    grid-row: 10;
  }

  #cantidad-goles-tot {
    grid-column: 1/3;
    grid-row: 11;
  }

  #promedio-goles-total {
    grid-column: 1/3;
    grid-row: 12;
  }

  .goles-favor {
    grid-column: 1/3;
    grid-row: 13;
  }

  #graficas-cont-gol-fav-dif-gol {
    padding: 0 0 20px 0;
  }

  #graficaGoles {
    width: 165px;
    padding-right: 10px;
  }
  #diferenciaGoles {
    width: 175px;
    padding-right: 10px;
  }


  #gf-como-loc-gc-como-loc {
    padding: 20px 0;
  }
  #gf-como-visit-gc-como-visit {
    padding: 20px 0;
  }

  #grafica-gf {
    grid-column: 1/3;
    grid-row: 14;
  }

  #grafica-gc {
    grid-column: 1/3;
    grid-row: 15;
  }

  #cont-gf-gc {
    grid-column: 1/3;
    grid-row: 16;
  }

  #cont2-gf-gc {
    grid-column: 1/3;
    grid-row: 17;
  }

  

  
  
  .escudo-local {
    width: 50px;
  }

  .escudo-visitante {
    width: 50px;
  }

  .imagen-escudo-historial {
    width: 30px;
    height: 30px;
  }

  .avg-gf {
    grid-column: 1/3;
    grid-row: 18;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
  }

  .avg-gf-local {
    grid-column: 1/3;
    grid-row: 19;
    padding-bottom: 20px;
  }

  .historial-loc {
    grid-column: 1/3;
    grid-row: 20;
  }

  .historial-visit {
    grid-column: 1/3;
    grid-row: 21;
  }

  .tabla_apertura2024 {
    grid-column: 1/3;
    grid-row: 22;
  }
}
@media (max-width: 768px) {
    #record-como-local,
    #record-como-visitante {
        width: 50%;
    }
}


@media (max-width: 768px) {
    .titulos-items {
        font-size: xx-small;
    }
    .titulo-columna-resultado-local {
        grid-column: 6/8;
        font-size: xx-small;
    }
    .titulo-columna-dt-local {
        font-size: xx-small;
    }
}

@media (max-width: 768px) {
    .titulos-columna-visitante {
        grid-template-columns: repeat(3, 1fr) 5px repeat(6, 1fr);
        font-size: xx-small;
    }
    .titulo-columna-resultado-visitante {
        grid-column: 3/6;
    }
    .titulo-columna-dt-visitante {
        grid-column: 7;
    }
}


@media (max-width: 768px) {
    .partido-historial-local {
        grid-template-columns: repeat(6, 1fr) 5px repeat(3, 1fr);
    }
    .partido-historial-visitante {
        grid-template-columns: repeat(3, 1fr) 5px repeat(6 , 1fr);
    }
}