:root {
    --color-titulo-tarjeta: rgb(0, 10, 40);
    --color-fondo-tarjeta: rgb(0, 30, 70);
    --color-sombra-tarjeta: rgba(0, 5, 20, .8);
    --color-fuente: rgb(30, 125, 200);
}
/* Estilo para quitar la viñeta de todos los elementos <li> dentro de un <ul> o <ol> */
ul {
    padding-inline-start: 0;
    list-style-type: none;
}


body {
    margin: 0px;
    padding: 0;
    /* background-image: radial-gradient(rgb(0, 0, 60), rgb(0, 0, 30)); */
    background-color: rgb(0, 50, 90);
    /* color: rgb(182, 186, 226); */
    /* font-family: 'Helvetica'; */
    color: rgb(30, 125, 200);
    font-family: monospace;
}
/* .titulo-pagina {
    background-image: radial-gradient(rgb(0, 50, 90), rgb(0, 20, 70));
    text-shadow: 10px 2px 10px rgba(0, 5, 20, .8);
} */
/* header {
    display: flex;
    justify-content: center;
    background-color: rgb(0, 30, 70);
    width: 100%;
} */
header {
    display: flex;
    justify-content: center;
    background-color: rgb(0, 30, 70);
    width: 100%;
    box-sizing: border-box;
}
#logo {
    width: 200px;
    height: auto;
}
/* main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr repeat(6, auto);
    gap: 10px;
    align-items: end;
} */
#grilla {
  display: grid;
  /*grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));*/
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 240px 240px 200px 300px 310px; /* 150px 150px */
  /* row-gap: 16px; */
  gap: 16px;
  width: 95%;
  max-width: 1200px;
  margin: 30px auto;
}

@media (max-width: 768px) {
  #grilla {
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows: 300px 450px 450px 450px; */
    gap: 7px;
    width: 98%;
  }
}


/* .tarjeta {
    width: 250px;
    height: auto;
    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);
} */
.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);
}

h4 {
    font-size: 1rem;
    margin: 15px 0px;
}

/* .titulo {
    background-color: var(--color-titulo-tarjeta);
    border-radius: 5px;
} */
.main-record {
    display: grid;
    grid-template-columns: .5fr 1fr 1fr;
    grid-column: span 3;
}
.sub-titulo-num {
    grid-column: span 2;
    align-self: center;
}
.main-record-visit {
    display: grid;
    grid-template-columns: 1fr 1fr .5fr;
}
.sub-titulo-num-visit {
    grid-column: span 2;
    align-self: center;
}
.sub-titulo {
    display: flex;
    justify-content: space-around;
}
.num {
    display: flex;
    justify-content: space-around;
    font-size: 20px;
}
.num_loc {
    font-size: 25px;
}
.num_visit {
    font-size: 25px;
}
.contenido {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.main-record {
    background-image: url('{{escudo_local}}');
}
/*.escudo-record {
    display: flex;
    justify-content: center;
}*/
.escudos {
    width: 50px;
    height: auto;
}

/* Ubicació tarjeta record-local */
.record-loc {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.record-visit {
    /* grid-column: 1; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cont-tarjeta-record-loc-visit {
    grid-column: 1/3;
    grid-row: 2;
    display: flex;
    justify-content: space-around;
}
#record-como-local {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#record-como-visitante {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* .puntos {
    height: 140px;
    background: linear-gradient(
   140deg,
   rgb(0, 30, 70) 30%,
   rgb(30, 60, 100)
 );
    grid-column: 4;
    grid-row: 1/span 2;
    align-self: start;
} */
.puntos {
    grid-column: 3;
    grid-row: 1;
}
.escudos-grafica-dona {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}
#grafica-dona {
    display: flex;
    justify-content: center;
    /* flex-direction: column;
    align-items: center;
    width: 100%;
    height: 300px;
    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: 1; */
}
.goles-favor {
    grid-column: 1;
    grid-row: 3;
}
.cont-canvas {
    display: flex;
    justify-content: center;
}
#goles-contra {
    grid-column: 2;
    grid-row: 3;
}
.cont-gf-gc {
    grid-column: 1/3;
    grid-row: 4;
    display: flex;
    justify-content: space-around;
}
.goles-favor-contra {
    grid-column: 4;
    grid-row: 2;
}
.goles-contra-local {
    grid-column: 5;
    grid-row: 2;
}
.diferencia-goles {
    grid-column: 3/5;
    grid-row: 3;
}
#cont-escudos-grafica {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.cont-avg-gf-gc {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.avg-gf {
    grid-column: 3;
    grid-row: 4;
}
.avg-gf-local {
    grid-column: 4;
    grid-row: 4;
}

/* 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: 3/5;
    grid-row: 2;
    margin: 0 auto;
}
.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: 150px;
    /* margin: 0 10px; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.cont-ppp-energia-puntos-local {
    display: flex;
    align-items: center;
}
.cont-total-ppp-visit {
    height: 150px;
    /* 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;
    }
}









/* 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: Helvetica, Arial, sans-serif;
    font-size: medium;
    border: solid 1px rgb(34, 48, 68);
} */
/* UBICACION DE LA TARJETA HISTORIAL LOCAL */
/* .historial-loc {
    grid-column: 1/4;
    grid-row: 6;
    justify-self: start;
} */
/* UBICACION DE LA TARJETA HISTORIAL VISITANTE */
/* .historial-visit {
    grid-column: 4/8;
    grid-row: 6;
    justify-self: end;
} */
/* .titulos-columna-local {
    display: grid;
    grid-template-columns: repeat(6, 1fr) 20px 10px 20px repeat(3, 1fr);
    place-items: center;
    text-align: center;
    border-bottom: 1px solid var(--color-titulo-tarjeta);
    margin-bottom: 10px;
} */
.titulo-columna-resultado-local {
    grid-column: 7/10;
}
@media (max-width: 768px) {
    .titulo-columna-resultado-local {
        grid-column: 6/8;
    }
}
.titulo-columna-dt-local {
    grid-column: 12;
}
/* .titulos-columna-visitante {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 20px 10px 20px 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/8;
}
.titulo-columna-dt-visitante {
    grid-column: 9;
}

/* .partido-historial-local {
    display: grid;
    grid-template-columns: repeat(9, 1fr) 20px 10px 20px repeat(3, 1fr);
    place-items: center;
    font-family: monospace;
    font-size: medium;
} */
/* .partido-historial-visitante {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 20px 10px 20px repeat(6, 1fr);
    place-items: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: medium;
} */
/* .textos-partido {
    text-align: center;
    font-size: small;
} */
/* .numeros-partido {
    text-align: center;
    font-size: x-large;
} */
.texto-lista {
    font-size: 11px;
    color: rgb(137, 140, 170);
}
.imagen-escudo-historial {
    width: 50px;
    height: 50px;
}

/* 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;
}
#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;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-titulo-tarjeta);
} */
/* .cont-tiempos-goles-gral {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 20px 10px 20px repeat(6, 1fr);
    margin-top: -5px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-titulo-tarjeta);
    grid-column: 3/6;
} */
/* .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);
}
/* #escud-loc {
    grid-column: 1;
    width: 12px;
    height: 12px;
    align-self: center;
}
#escud-visit {
    grid-column: 1;
    grid-row: 3;
    width: 12px;
    height: 12px;
    align-self: center;
} */
/* #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);
} 
.desc {
    width: 5px;
    height: 5px;
    background-color: rgb(100, 0, 0);
}
#desc2 {
    border-radius: 0 2px 2px 0;
}


/* TABLA DE POSICIONES */
/* .tabla_apertura2024 {
    width: 100%;
    min-width: max-content;
    grid-column: 6;
    grid-row: 1;
    justify-self: center;
    font-family: monospace;
    color: var(--color-fuente);
} */
.tabla_apertura2024 h3 {
    text-align: center;
    font-size: 16px;
}
.tabla_apertura2024 span {
    font-family: monospace;
    /* color: var(--color-fuente); */
    color: rgba(30, 125, 200, 0.7);
    font-size: 10px;
}
.tabla_apertura2024 ol {
    padding-left: 25px;
    font-family: monospace;
    color: var(--color-fuente);
    font-size: 8px;
}
.resalta-tabla-equipos #nombre-tabla{
    color: rgb(0, 160, 0);
}
.resalta-tabla-equipos #puntos-tabla{
    color: rgb(0, 160, 0);
}


/* GRÁFICA DE PUNTOS */
.grafica-puntos {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1/4;
}
.grafica-historial-local {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1/3;
}
.grafica-historial-visit {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 3/5;
}
@media (max-width: 768px) {
    .grafica-historial-local {
        grid-column: 1/3;
    }
    .grafica-historial-visit {
        grid-column: 1/3;
    }
}
























/* NUEVO */
:root {
    --color-titulo-tarjeta: rgb(0, 10, 40);
    --color-fondo-tarjeta: rgb(0, 30, 70);
    --color-sombra-tarjeta: rgba(0, 5, 20, .8);
    --color-fuente: rgb(30, 125, 200);
}
/* Estilo para quitar la viñeta de todos los elementos <li> dentro de un <ul> o <ol> */
ul {
    padding-inline-start: 0;
    list-style-type: none;
}


body {
    margin: 0px;
    padding: 0;
    /* background-image: radial-gradient(rgb(0, 0, 60), rgb(0, 0, 30)); */
    background-color: rgb(0, 50, 90);
    /* color: rgb(182, 186, 226); */
    /* font-family: 'Helvetica'; */
    color: rgb(30, 125, 200);
    font-family: monospace;
}
/* .titulo-pagina {
    background-image: radial-gradient(rgb(0, 50, 90), rgb(0, 20, 70));
    text-shadow: 10px 2px 10px rgba(0, 5, 20, .8);
} */
/* header {
    display: flex;
    justify-content: center;
    background-color: rgb(0, 30, 70);
    width: 100%;
} */
header {
    display: flex;
    justify-content: center;
    background-color: rgb(0, 30, 70);
    width: 100%;
    box-sizing: border-box;
}
#logo {
    width: 300px;
    height: auto;
}
/* main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr repeat(6, auto);
    gap: 10px;
    align-items: end;
} */


/* @media (max-width: 768px) {
  #grilla {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 450px 450px 450px;
    gap: 7px;
    width: 98%;
  }
} */


/* .tarjeta {
    width: 250px;
    height: auto;
    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);
} */
.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);
}

/* h4 {
    font-size: 1rem;
    margin: 15px;
} */

/* .titulo {
    background-color: var(--color-titulo-tarjeta);
    border-radius: 5px;
} */
.main-record {
    display: grid;
    grid-template-columns: .5fr 1fr 1fr;
    grid-column: span 3;
}
.sub-titulo-num {
    grid-column: span 2;
    align-self: center;
}
.main-record-visit {
    display: grid;
    grid-template-columns: 1fr 1fr .5fr;
}
.sub-titulo-num-visit {
    grid-column: span 2;
    align-self: center;
}
.sub-titulo {
    display: flex;
    justify-content: space-around;
}
.num {
    display: flex;
    justify-content: space-around;
    font-size: 20px;
}
.num_loc {
    font-size: 25px;
}
.num_visit {
    font-size: 25px;
}
/*.contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
}*/
.main-record {
    background-image: url('{{escudo_local}}');
}
/*.escudo-record {
    display: flex;
    justify-content: center;
}*/
.escudos {
    width: 50px;
    height: auto;
}

/* Ubicació tarjeta record-local */
/* .record-loc {
    grid-column: 2;
} */
/* .puntos {
    height: 140px;
    background: linear-gradient(
   140deg,
   rgb(0, 30, 70) 30%,
   rgb(30, 60, 100)
 );
    grid-column: 4;
    grid-row: 1/span 2;
    align-self: start;
} */
/* .puntos {
    grid-column: 4/6;
    grid-row: 1;
} */
/* #grafica-dona {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 300px;
    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: 1;
} */
/* .goles-favor {
    grid-column: 2;
    grid-row: 2;
} */
.cont-canvas {
    display: flex;
    justify-content: center;
}
/* #goles-contra {
    grid-column: 3;
    grid-row: 2;
} */
/* .cont-gf-gc {
    grid-column: 3/5;
    grid-row: 2/4;
    display: flex;
} */
.goles-favor-contra {
    grid-column: 4;
    grid-row: 2;
}
.goles-contra-local {
    grid-column: 5;
    grid-row: 2;
}
/* .diferencia-goles {
    grid-column: 2/4;
    grid-row: 3;
} */
#cont-escudos-grafica {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/* .avg-gf {
    grid-column: 4/6;
    grid-row: 4;
}
.avg-gf-local {
    grid-column: 6;
    grid-row: 4;
} */

/* PPP */
/* .tarjeta_ppp {
    width: 100%;
    background-color: var(--color-fondo-tarjeta);
    border-radius: 10px;
    border: solid 1px rgb(34, 48, 68);
    grid-column: 2/4;
    grid-row: 4;
    margin: 0 auto;
} */
.ppp {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.escudos_ppp {
    width: 100px;
}
.num_ppp {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: xx-large;
}
.tit_ppp {
    font-size: medium;
}

/* 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/3;
    grid-row: 7;
    justify-self: start;
}
/* UBICACION DE LA TARJETA HISTORIAL VISITANTE */
.historial-visit {
    grid-column: 3/5;
    grid-row: 7;
    justify-self: end;
}
.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: 6/8;
        font-size: xx-small;
    }
    .titulo-columna-dt-local {
        font-size: xx-small;
    }
}

.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: 3/6;
    }
    .titulo-columna-dt-visitante {
        grid-column: 7;
    }
}

.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;
}
#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;
}
.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);
}
#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 {
    font-size: 10px;
    font-family: monospace;
    white-space: nowrap;
} */

.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;
}


/* TABLA DE POSICIONES */
.tabla_apertura2024 {
    width: 100%;
    grid-column: 4;
    grid-row: 1;
    justify-self: center;
    font-family: monospace;
    color: var(--color-fuente);
    display: flex;
    flex-direction: column;
}
.tabla_apertura2024 h3 {
    text-align: center;
    font-size: 16px;
    margin-bottom: 0;
}
/* .tabla_apertura2024 span {
    font-family: monospace;
    color: var(--color-fuente);
    font-size: 10px;
} */
.tabla_apertura2024 ol {
    padding-left: 15px;
    font-family: monospace;
    color: var(--color-fuente);
    font-size: 8px;
    text-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 670px) {
    /* Logo más chico */
    #logo {
        width: 200px;
    }
    
    #grilla {
        grid-template-rows: 200px 200px 210px 150px 160px 420px 290px 200px 260px 310px;
    }
    /* Reposicionar elementos en el grid de 2 columnas */
    .record-loc {
        grid-column: 1;
        grid-row: auto;
    }
    
    .puntos {
        grid-column: 1/3;
        grid-row: auto;
    }
    
    .tabla_apertura2024 {
        grid-column: 1/3;
        grid-row: auto;
    }
    
    .goles-favor {
        grid-column: 1;
        grid-row: auto;
    }
    
    #goles-contra {
        grid-column: 2;
        grid-row: auto;
    }
    
    .cont-gf-gc {
        grid-column: 1/3;
        grid-row: auto;
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
    }
    
    .diferencia-goles {
        grid-column: 1/3;
        grid-row: auto;
    }
    
    .avg-gf {
        grid-column: 1;
        grid-row: auto;
    }
    
    .avg-gf-local {
        grid-column: 2;
        grid-row: auto;
    }
    
    .tarjeta_ppp {
        grid-column: 1/3;
        grid-row: auto;
    }
    
    .tarjeta-minutos-goles {
        grid-column: 1/3;
        grid-row: auto;
    }
    
    .historial-loc {
        grid-column: 1/3;
        grid-row: auto;
        justify-self: stretch;
    }
    
    .historial-visit {
        grid-column: 1/3;
        grid-row: auto;
        justify-self: stretch;
    }
    
    /* Escudos más chicos */
    .escudos {
        width: 40px;
    }
    
    .escudos_ppp {
        width: 60px;
    }
    
    .imagen-escudo-historial {
        width: 25px;
        height: 25px;
    }
    
    
    /* Textos más chicos */
    .tarjeta {
        font-size: large;
    }
    
    .num {
        font-size: 16px;
    }
    
    .num_loc {
        font-size: 20px;
    }
    
    .num_visit {
        font-size: 20px;
    }
    
    .num_ppp {
        font-size: x-large;
    }
    
    .numeros-partido {
        font-size: large;
    }
    
    /* Canvas responsive */
    canvas {
        max-width: 100%;
        height: auto;
    }

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

    .grafica-valor {
        grid-column: 1/3;
        grid-row: auto;
    }
}







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;
}