*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:#10233f;
  background:url("../logos/fondopublico.png") center center / cover fixed no-repeat;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.28);
  z-index:-1;
}

.hero{
  background:linear-gradient(135deg,#073b8e,#0b5bd3);
  color:white;
  padding:25px 20px;
  border-bottom:6px solid #ffd22e;
  box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.hero-contenido{
  max-width:1000px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:25px;
}

.logo-publico{
  width:115px;
  height:115px;
  object-fit:contain;
  background:white;
  padding:10px;
  border-radius:22px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.temporada{
  display:inline-block;
  background:#ffd22e;
  color:#073b8e;
  padding:6px 18px;
  border-radius:30px;
  font-weight:bold;
  font-size:13px;
  margin-bottom:8px;
}

.hero h1{
  margin:0;
  font-size:32px;
  letter-spacing:1px;
}

.hero p{
  margin:8px 0 15px;
  font-weight:bold;
}

.stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.stat{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);
  border-radius:14px;
  padding:12px 22px;
  min-width:100px;
  text-align:center;
}

.stat strong{
  display:block;
  font-size:27px;
  color:#ffd22e;
}

.stat span{
  font-size:12px;
}

.menu-publico{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  padding:14px 20px;
  text-align:center;
  box-shadow:0 4px 18px rgba(0,0,0,.10);
  position:sticky;
  top:0;
  z-index:999;
}

.menu-publico a{
  display:inline-block;
  margin:5px;
  text-decoration:none;
  color:#073b8e;
  font-weight:bold;
  background:#eef3fa;
  padding:10px 18px;
  border-radius:999px;
}

.contenido{
  max-width:1150px;
  margin:30px auto;
  padding:0 25px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

#tabla,
#fixture{
  grid-column:1 / 3;
}

.panel{
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(10px);
  padding:24px;
  border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.65);
  min-height:165px;
  position:relative;
  overflow:hidden;
}

.panel::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:18px;
  width:90px;
  height:90px;
  background:url("../logos/logo-liga.jpeg") no-repeat center;
  background-size:contain;
  opacity:.05;
  pointer-events:none;
}

.panel h2{
  margin-top:0;
  color:#073b8e;
}

.table-wrap{
  width:100%;
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:collapse;
  border-radius:14px;
  overflow:hidden;
}

thead th{
  background:#073b8e;
  color:white;
  padding:13px;
  text-transform:uppercase;
  font-size:13px;
}

tbody td{
  padding:12px;
  border-bottom:1px solid #dbe6f5;
  text-align:center;
}

tbody tr:nth-child(even){
  background:#f6f9fe;
}

.fixture-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}

.fixture-card{
  background:linear-gradient(135deg,#f8fbff,#eef4ff);
  border-left:6px solid #ffd22e;
  padding:16px;
  border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

footer{
  text-align:center;
  padding:25px;
  color:#073b8e;
  font-weight:bold;
}

@media(max-width:800px){
  .hero-contenido{
    flex-direction:column;
    text-align:center;
  }

  .hero h1{
    font-size:27px;
  }

  .stats{
    justify-content:center;
  }

  .contenido{
    grid-template-columns:1fr;
    padding:0 15px;
  }

  #tabla,
  #fixture{
    grid-column:1;
  }
}
.selector-torneo-box {
  max-width: 1100px;
  margin: 20px auto;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 14px;
}

.selector-torneo-box label {
  font-weight: 800;
  color: #003b8f;
}

#torneo-publico-select {
  min-width: 260px;
  padding: 12px 14px;
  border: 1px solid #c9d8f0;
  border-radius: 12px;
  font-weight: 700;
  color: #003b8f;
  background: white;
  outline: none;
}

.jornada-publica {
  margin-bottom: 25px;
}

.jornada-publica h3 {
  background: #004aad;
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.partido-publico {
  background: rgba(255, 255, 255, 0.94);
  border-left: 6px solid #ffd51e;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.hora-publica {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.equipos-publico {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 17px;
}

.equipos-publico span {
  background: #ffd51e;
  color: #003b8f;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 8px;
}

.estado-publico {
  margin-top: 8px;
  font-size: 13px;
  color: #0b7a27;
}

@media (max-width: 700px) {
  .selector-torneo-box {
    margin: 15px 12px;
    flex-direction: column;
    align-items: stretch;
  }

  #torneo-publico-select {
    width: 100%;
    min-width: auto;
  }

  .equipos-publico {
    flex-direction: column;
    text-align: center;
  }
}


/* LOGOS TABLA DE POSICIONES PUBLICA */

.equipo-tabla-publica {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.logo-tabla-publica {
  width: 38px;
  height: 38px;
  min-width: 38px;
  object-fit: contain;
  border-radius: 50%;
  background: #ffffff;
  padding: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.equipo-tabla-publica span {
  font-weight: 600;
}

@media (max-width: 700px) {
  .logo-tabla-publica {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .equipo-tabla-publica {
    gap: 6px;
  }
}


/* LOGOS DEL FIXTURE PUBLICO */

.equipo-fixture-publico {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.equipo-visitante-publico {
  justify-content: flex-end;
  text-align: right;
}

.logo-fixture-publico {
  width: 36px;
  height: 36px;
  min-width: 36px;
  object-fit: contain;
  border-radius: 50%;
  background: #ffffff;
  padding: 3px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.16);
}

.equipo-fixture-publico strong {
  line-height: 1.15;
}

.vs-publico {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .logo-fixture-publico {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .equipo-fixture-publico {
    gap: 5px;
  }
}



/* ORDENAR EQUIPOS Y LOGOS DEL FIXTURE */

.equipos-publico {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 8px;
}

.equipo-fixture-publico {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  text-align: center !important;
}

.equipo-visitante-publico {
  justify-content: center !important;
  text-align: center !important;
}

.logo-fixture-publico {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  padding: 3px !important;
}

.equipo-fixture-publico strong {
  width: 100% !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.vs-publico {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  height: 32px !important;

  background: #ffcc00 !important;
  color: #003f8f !important;

  border-radius: 8px !important;

  font-size: 15px !important;
  font-weight: 900 !important;

  flex-shrink: 0 !important;
}

.partido-publico {
  min-height: 145px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.hora-publica {
  margin-bottom: 4px !important;
}

.estado-publico {
  margin-top: 6px !important;
}


@media (max-width: 700px) {

  .equipos-publico {
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .logo-fixture-publico {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .equipo-fixture-publico strong {
    font-size: 12px !important;
  }

  .vs-publico {
    width: 36px !important;
    height: 30px !important;
    font-size: 13px !important;
  }

}




/* Iconos de tarjetas disciplinarias */
.icono-tarjeta {
  display: inline-block;
  width: 15px;
  height: 21px;
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .22);
}

.tarjeta-amarilla {
  background: #ffd500;
  border: 1px solid #e0ad00;
}

.tarjeta-roja {
  background: #e53935;
  border: 1px solid #b71c1c;
}


/* ==========================================================
   ESTADO PÚBLICO DE PAGOS
   ========================================================== */

.pagos-descripcion {
  margin: -4px 0 22px;
  color: #5b6470;
}

.bloque-pagos-publicos {
  margin-top: 22px;
}

.bloque-pagos-publicos h3 {
  margin: 0 0 12px;
  color: #003f8f;
  font-size: 18px;
}

.tabla-pagos-publicos {
  width: 100%;
  border-collapse: collapse;
}

.tabla-pagos-publicos th {
  background: #003f8f;
  color: #ffffff;
  padding: 12px 10px;
  text-align: left;
  white-space: nowrap;
}

.tabla-pagos-publicos td {
  padding: 12px 10px;
  border-bottom: 1px solid #e4e8ee;
  vertical-align: middle;
}

.tabla-pagos-publicos tbody tr:hover {
  background: #f7f9fc;
}

.estado-pago-publico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.estado-pago-pagado {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.estado-pago-pendiente {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.sin-pagos-publicos {
  padding: 20px !important;
  text-align: center;
  color: #667085;
}

@media (max-width: 700px) {
  .tabla-pagos-publicos {
    min-width: 650px;
  }

  .bloque-pagos-publicos h3 {
    font-size: 16px;
  }

  .estado-pago-publico {
    min-width: 96px;
    font-size: 12px;
  }
}



/* Marcador público de resultados */
.marcador-publico {
    min-width: 76px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.2rem;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .marcador-publico {
        min-width: 66px;
        padding-left: 7px;
        padding-right: 7px;
        font-size: 1.05rem;
    }
}


/* Ajuste final de marcador en tarjetas públicas */
.equipos-publico {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        76px
        minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
}

.equipo-fixture-publico {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    text-align: center;
}

.equipo-fixture-publico strong {
    display: block;
    width: 100%;
    max-width: 115px;
    margin-top: 5px;
    font-size: 0.88rem;
    line-height: 1.05;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: center;
}

.vs-publico {
    justify-self: center;
    align-self: center;
    box-sizing: border-box;
}

.marcador-publico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    min-width: 76px;
    padding: 10px 5px;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.logo-fixture-publico {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .equipos-publico {
        grid-template-columns:
            minmax(0, 1fr)
            62px
            minmax(0, 1fr);
        gap: 5px;
    }

    .marcador-publico {
        width: 62px;
        min-width: 62px;
        padding: 9px 3px;
        font-size: 1rem;
    }

    .equipo-fixture-publico strong {
        max-width: 90px;
        font-size: 0.76rem;
        line-height: 1.05;
    }
}


/* INICIO CORRECCION MARCADOR FIXTURE */

/*
 * Distribución estricta:
 * equipo local | resultado | equipo visitante
 */
#tabla-fixture .equipos-publico {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        68px
        minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: initial !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Cada equipo permanece dentro de su propia columna */
#tabla-fixture .equipo-fixture-publico {
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* El nombre ya no puede meterse debajo del marcador */
#tabla-fixture .equipo-fixture-publico strong {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;

    color: #10213f;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto;
}

/* Logos con tamaño uniforme */
#tabla-fixture .logo-fixture-publico {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    flex: none !important;
    object-fit: contain !important;
}

/* Tanto VS como el resultado ocupan solamente la columna central */
#tabla-fixture .vs-publico {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;

    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 3px !important;
    box-sizing: border-box !important;

    border-radius: 10px !important;
    white-space: nowrap !important;
    z-index: 1;
}

/* Resultado final */
#tabla-fixture .marcador-publico {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

/* Evitar que la tarjeta corte nombres largos */
#tabla-fixture .partido-publico {
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

@media (max-width: 700px) {
    #tabla-fixture .equipos-publico {
        grid-template-columns:
            minmax(0, 1fr)
            60px
            minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    #tabla-fixture .marcador-publico {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        font-size: 0.9rem !important;
    }

    #tabla-fixture .vs-publico {
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
    }

    #tabla-fixture .equipo-fixture-publico strong {
        padding: 0 1px !important;
        font-size: 0.75rem !important;
    }

    #tabla-fixture .logo-fixture-publico {
        width: 37px !important;
        height: 37px !important;
        min-width: 37px !important;
        max-width: 37px !important;
    }
}

/* FIN CORRECCION MARCADOR FIXTURE */


/* AJUSTE FINAL: marcador más pequeño */
#tabla-fixture .equipos-publico {
    grid-template-columns:
        minmax(0, 1fr)
        54px
        minmax(0, 1fr) !important;
}

#tabla-fixture .vs-publico {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 38px !important;
    padding: 0 2px !important;
    font-size: 0.88rem !important;
    border-radius: 9px !important;
}

#tabla-fixture .marcador-publico {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 38px !important;
    padding: 0 2px !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    border-radius: 9px !important;
}

#tabla-fixture .equipo-fixture-publico strong {
    font-size: 0.84rem !important;
    line-height: 1.08 !important;
}

@media (max-width: 700px) {
    #tabla-fixture .equipos-publico {
        grid-template-columns:
            minmax(0, 1fr)
            48px
            minmax(0, 1fr) !important;
    }

    #tabla-fixture .vs-publico {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 34px !important;
        font-size: 0.8rem !important;
    }

    #tabla-fixture .marcador-publico {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 34px !important;
        font-size: 0.8rem !important;
    }

    #tabla-fixture .equipo-fixture-publico strong {
        font-size: 0.76rem !important;
    }
}


/* INICIO ALTURA UNIFORME PARTIDOS */

/* Todas las tarjetas del fixture tendrán la misma altura */
#tabla-fixture .partido-publico {
    display: flex !important;
    flex-direction: column !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    box-sizing: border-box !important;
}

/* La fecha conserva su espacio superior */
#tabla-fixture .hora-publica {
    flex: 0 0 auto !important;
}

/* Equipos y marcador ocupan el espacio central */
#tabla-fixture .equipos-publico {
    flex: 1 1 auto !important;
    align-items: center !important;
    min-height: 0 !important;
}

/* El estado queda siempre alineado abajo */
#tabla-fixture .estado-publico {
    flex: 0 0 auto !important;
    margin-top: auto !important;
}

/* Evita que nombres largos aumenten la tarjeta */
#tabla-fixture .equipo-fixture-publico strong {
    max-height: 4.4em !important;
    overflow: hidden !important;
}

/* FIN ALTURA UNIFORME PARTIDOS */

/* ESTADISTICAS PUBLICAS DE VIDEO */
.analisis-publico-aviso {
    color: #526273;
    margin: -4px 0 18px;
}

.analisis-publico-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
}

.analisis-publico-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(18, 76, 142, 0.14);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 49, 91, 0.1);
    padding: 18px;
}

.analisis-publico-card h3 {
    color: #123f78;
    margin: 0 0 14px;
    text-align: center;
}

.analisis-posesion-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 10px 0 5px;
    font-weight: 800;
}

.analisis-barra {
    background: #e3ebf5;
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}

.analisis-barra > span {
    background: linear-gradient(90deg, #145bbb, #27a7e8);
    display: block;
    height: 100%;
}

.analisis-barra.visitante > span {
    background: linear-gradient(90deg, #f5b51b, #ef6c22);
}

.analisis-publico-meta {
    background: #f3f7fc;
    border-radius: 10px;
    color: #34495e;
    margin-top: 15px;
    padding: 10px;
    text-align: center;
}

.analisis-mapas {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
}

.analisis-mapas a {
    background: #124f9c;
    border-radius: 9px;
    color: white;
    font-weight: 800;
    padding: 9px;
    text-align: center;
    text-decoration: none;
}

@media (max-width: 540px) {
    .analisis-mapas {
        grid-template-columns: 1fr;
    }
}
/* FIN ESTADISTICAS PUBLICAS DE VIDEO */

/* MODAL COMPACTO DE ESTADISTICAS */
.partido-publico {
    position: relative;
}

.boton-analisis-partido {
    align-items: center;
    background: #124f9c;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(15, 49, 91, 0.25);
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    height: 38px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 38px;
    z-index: 2;
}

.boton-analisis-partido:hover {
    background: #f0ad13;
    transform: translateY(-1px);
}

.modal-analisis-publico[hidden] {
    display: none;
}

.modal-analisis-publico {
    align-items: center;
    background: rgba(7, 25, 48, 0.72);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 10000;
}

.modal-analisis-contenido {
    max-height: 90vh;
    max-width: 620px;
    overflow: auto;
    position: relative;
    width: 100%;
}

.modal-analisis-contenido .analisis-publico-card {
    padding: 26px;
}

.cerrar-modal-analisis {
    align-items: center;
    background: #9c1f2e;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 24px;
    height: 38px;
    justify-content: center;
    padding: 0 0 3px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 38px;
    z-index: 3;
}

body.modal-analisis-abierto {
    overflow: hidden;
}
/* FIN MODAL COMPACTO DE ESTADISTICAS */

/* GRAFICAS DE INTERVALOS Y TERCIOS */
.analisis-bloque {
    border-top: 1px solid #d9e3ef;
    margin-top: 20px;
    padding-top: 16px;
}

.analisis-bloque h4 {
    color: #123f78;
    font-size: 1.05rem;
    margin: 0 0 14px;
    text-align: center;
}

.intervalo-posesion {
    background: #f6f9fd;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
}

.intervalo-posesion > strong {
    color: #526273;
    display: block;
    margin-bottom: 7px;
}

.intervalo-linea {
    align-items: center;
    display: grid;
    font-size: 0.85rem;
    gap: 7px;
    grid-template-columns: minmax(85px, 1fr) minmax(90px, 2fr) 46px;
    margin: 5px 0;
}

.intervalo-linea b {
    text-align: right;
}

.presencia-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.presencia-equipo {
    background: #f6f9fd;
    border-radius: 10px;
    padding: 12px;
}

.presencia-equipo h5 {
    color: #123f78;
    font-size: 0.95rem;
    margin: 0 0 10px;
    text-align: center;
}

.presencia-fila {
    display: grid;
    font-size: 0.82rem;
    gap: 5px;
    grid-template-columns: 1fr auto;
    margin: 8px 0;
}

.presencia-fila .analisis-barra {
    grid-column: 1 / -1;
}

@media (max-width: 560px) {
    .presencia-grid {
        grid-template-columns: 1fr;
    }

    .intervalo-linea {
        grid-template-columns: minmax(70px, 1fr) minmax(70px, 1.6fr) 42px;
    }
}
/* FIN GRAFICAS DE INTERVALOS Y TERCIOS */


/* ACUMULACION TARJETAS AMARILLAS */

#tabla-tarjetas .total-amarillas {
  display: inline-flex;
  min-width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border-radius: 8px;
  background: #facc15;
  color: #111827;
}

#tabla-tarjetas .estado-suspendido {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-weight: 800;
  white-space: nowrap;
}

#tabla-tarjetas .estado-advertencia {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-weight: 700;
  white-space: nowrap;
}

#tabla-tarjetas .estado-habilitado {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 8px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-weight: 700;
  white-space: nowrap;
}

#tabla-tarjetas .fila-suspendido td {
  background: rgba(254, 226, 226, 0.45);
}

#tabla-tarjetas th:nth-child(3),
#tabla-tarjetas th:nth-child(4),
#tabla-tarjetas td:nth-child(3),
#tabla-tarjetas td:nth-child(4) {
  text-align: center;
}

@media (max-width: 700px) {
  #tabla-tarjetas {
    font-size: 12px;
  }

  #tabla-tarjetas .estado-suspendido,
  #tabla-tarjetas .estado-advertencia,
  #tabla-tarjetas .estado-habilitado {
    font-size: 11px;
    padding: 5px 7px;
  }
}



/* ==================================================
   CORRECCION TABLA ACUMULACION DE TARJETAS
   ================================================== */

#tarjetas .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
}

#tabla-tarjetas {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

#tabla-tarjetas th,
#tabla-tarjetas td {
    padding: 10px 6px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* JUGADOR */
#tabla-tarjetas th:nth-child(1),
#tabla-tarjetas td:nth-child(1) {
    width: 28% !important;
    text-align: left !important;
}

/* EQUIPO */
#tabla-tarjetas th:nth-child(2),
#tabla-tarjetas td:nth-child(2) {
    width: 24% !important;
}

/* TOTAL */
#tabla-tarjetas th:nth-child(3),
#tabla-tarjetas td:nth-child(3) {
    width: 10% !important;
    text-align: center !important;
}

/* ACUMULACION */
#tabla-tarjetas th:nth-child(4),
#tabla-tarjetas td:nth-child(4) {
    width: 14% !important;
    text-align: center !important;
}

/* ESTADO */
#tabla-tarjetas th:nth-child(5),
#tabla-tarjetas td:nth-child(5) {
    width: 24% !important;
    text-align: center !important;
}


/* PERMITIR QUE LOS ESTADOS BAJEN DE LINEA */

#tabla-tarjetas .estado-suspendido,
#tabla-tarjetas .estado-advertencia,
#tabla-tarjetas .estado-habilitado {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;

    line-height: 1.15 !important;

    padding: 6px 4px !important;

    font-size: 12px !important;
}


/* TOTAL AMARILLAS */

#tabla-tarjetas .total-amarillas {
    margin: auto !important;
}


/* CUANDO LOS DOS PANELES QUEDEN MUY ESTRECHOS,
   TARJETAS USA TODO EL ANCHO */

@media (max-width: 1500px) {

    #tarjetas {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

}


/* CELULARES */

@media (max-width: 700px) {

    #tabla-tarjetas th,
    #tabla-tarjetas td {
        padding: 7px 4px !important;
        font-size: 11px !important;
    }

    #tabla-tarjetas .estado-suspendido,
    #tabla-tarjetas .estado-advertencia,
    #tabla-tarjetas .estado-habilitado {
        font-size: 10px !important;
        padding: 5px 3px !important;
    }

}

/* INICIO CAMINO AL TITULO PUBLICO */
#eliminatorias-publico {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,213,42,.24), transparent 35%),
    linear-gradient(145deg, #06295f 0%, #0a4389 55%, #062a62 100%);
  border: 1px solid rgba(255,213,42,.42);
  box-shadow: 0 18px 45px rgba(5,35,78,.25);
  color: #fff;
  overflow: hidden;
  padding: 28px clamp(16px, 3vw, 38px) 34px;
  position: relative;
}
#eliminatorias-publico::before,
#eliminatorias-publico::after {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  content: "";
  height: 260px;
  position: absolute;
  width: 260px;
}
#eliminatorias-publico::before { left: -150px; top: -150px; }
#eliminatorias-publico::after { bottom: -180px; right: -110px; }
#eliminatorias-publico > h2 {
  color: #ffd52a;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: -.02em;
  margin-bottom: 5px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.eliminatorias-subtitulo-publico {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  margin: 0 0 18px;
  opacity: .82;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
}
.eliminatorias-aviso-publico {
  background: linear-gradient(90deg, #fff9d8, #fff3ab, #fff9d8);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(0,0,0,.12);
  color: #17345c;
  font-size: .8rem;
  margin: 0 auto 20px;
  max-width: 720px;
  padding: 11px 18px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.eliminatorias-aviso-publico strong { color: #072f68; }
.eliminatorias-ruta-publico {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto 28px;
  max-width: 760px;
  position: relative;
  z-index: 1;
}
.eliminatorias-ruta-publico span {
  background: rgba(1,26,63,.38);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 900;
  padding: 7px 12px;
  text-align: center;
  text-transform: uppercase;
}
.eliminatorias-ruta-publico span.activo {
  background: #ffd52a;
  border-color: #ffd52a;
  box-shadow: 0 0 0 4px rgba(255,213,42,.12);
  color: #082d60;
}
.eliminatorias-ruta-publico i { background: rgba(255,255,255,.42); height: 1px; min-width: 25px; width: 70px; }
.eliminatorias-cuadro-publico {
  align-items: center;
  display: grid;
  gap: clamp(42px, 6vw, 82px);
  grid-template-columns: 1.2fr 1fr 1fr;
  position: relative;
  z-index: 1;
}
.eliminatoria-ronda-publico { display: grid; gap: 13px; position: relative; }
.eliminatoria-titulo-ronda-publico {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 2px;
}
.eliminatoria-titulo-ronda-publico > span {
  align-items: center;
  background: #ffd52a;
  border-radius: 50%;
  color: #082d60;
  display: flex;
  font-size: .62rem;
  font-weight: 950;
  height: 29px;
  justify-content: center;
  width: 29px;
}
.eliminatoria-titulo-ronda-publico small {
  display: block;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .12em;
  opacity: .68;
  text-transform: uppercase;
}
.eliminatoria-titulo-ronda-publico h3 {
  color: #fff;
  font-size: .86rem;
  letter-spacing: .03em;
  margin: 1px 0 0;
  text-align: left;
  text-transform: uppercase;
}
.eliminatoria-titulo-ronda-publico h3 em {
  background: rgba(255,213,42,.16);
  border: 1px solid rgba(255,213,42,.55);
  border-radius: 999px;
  color: #ffd52a;
  font-size: .5rem;
  font-style: normal;
  margin-left: 4px;
  padding: 3px 6px;
  vertical-align: middle;
}
.eliminatoria-partido-publico {
  background: linear-gradient(180deg, #fff 0%, #f5f8fd 100%);
  border: 1px solid rgba(255,213,42,.95);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,18,47,.2);
  color: #112f57;
  min-height: 78px;
  padding: 12px 14px 11px;
  position: relative;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.eliminatoria-partido-publico:hover { box-shadow: 0 12px 25px rgba(0,18,47,.28); transform: translateY(-2px); }
.eliminatoria-codigo-publico {
  background: #ffd52a;
  border-radius: 999px;
  color: #082d60;
  display: inline-block;
  font-size: .58rem;
  font-weight: 950;
  margin-bottom: 6px;
  padding: 3px 8px;
}
.eliminatoria-equipo-publico {
  align-items: center;
  display: flex;
  font-size: .82rem;
  font-weight: 900;
  gap: 8px;
  justify-content: center;
  line-height: 1.22;
  min-height: 27px;
  overflow-wrap: anywhere;
}
.eliminatoria-equipo-publico img {
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,.12);
  flex: 0 0 27px;
  height: 27px;
  object-fit: contain;
  padding: 2px;
  width: 27px;
}
.eliminatoria-equipo-publico span { min-width: 0; }
.eliminatoria-vs-publico { color: #b38700; display: block; font-size: .57rem; font-weight: 950; margin: 3px 0; text-transform: uppercase; }
.eliminatoria-partido-publico small { border-top: 1px solid #e3eaf2; color: #68798d; display: block; font-size: .58rem; font-weight: 800; margin-top: 7px; padding-top: 6px; text-transform: uppercase; }
.ronda-semifinales-publico::before,
.eliminatoria-finales-publico::before {
  border-bottom: 1px solid rgba(255,213,42,.62);
  content: "";
  left: calc(-1 * clamp(42px, 6vw, 82px));
  position: absolute;
  top: 50%;
  width: clamp(42px, 6vw, 82px);
}
.ronda-semifinales-publico::after,
.eliminatoria-finales-publico::after {
  border: solid #ffd52a;
  border-width: 0 2px 2px 0;
  content: "";
  height: 6px;
  left: -8px;
  position: absolute;
  top: calc(50% - 3px);
  transform: rotate(-45deg);
  width: 6px;
}
.eliminatoria-finales-publico .eliminatoria-partido-publico:first-of-type {
  background: linear-gradient(145deg, #fffdf1, #fff4b8);
  border: 2px solid #ffd52a;
  box-shadow: 0 0 0 4px rgba(255,213,42,.12), 0 14px 28px rgba(0,0,0,.25);
}
.eliminatoria-finales-publico .eliminatoria-partido-publico:first-of-type::before {
  content: "🏆";
  font-size: 1.1rem;
  position: absolute;
  right: 10px;
  top: 8px;
}
.eliminatorias-estado-publico { background: rgba(255,255,255,.12); border-radius: 12px; padding: 24px; text-align: center; }
.eliminatorias-error-publico { background: #fff0f0; color: #8a1d1d; }
@media (max-width: 820px) {
  .eliminatorias-cuadro-publico { gap: 26px; grid-template-columns: 1fr; }
  .eliminatoria-ronda-publico { gap: 10px; }
  .eliminatorias-ruta-publico { align-items: stretch; flex-direction: column; max-width: 220px; }
  .eliminatorias-ruta-publico i { height: 10px; margin: 0 auto; min-width: 1px; width: 1px; }
  .ronda-semifinales-publico::before, .eliminatoria-finales-publico::before {
    border-bottom: 0; border-left: 1px solid rgba(255,213,42,.62); height: 26px; left: 50%; top: -26px; width: 0;
  }
  .ronda-semifinales-publico::after, .eliminatoria-finales-publico::after {
    left: calc(50% - 4px); top: -9px; transform: rotate(45deg);
  }
}
@media (max-width: 480px) {
  #eliminatorias-publico { padding-left: 13px; padding-right: 13px; }
  .eliminatoria-titulo-ronda-publico h3 em { display: inline-block; margin-top: 4px; }
  .eliminatoria-partido-publico { min-height: 72px; }
}
/* FIN CAMINO AL TITULO PUBLICO */


/* ==================================================
   SUSPENSIONES PUBLICAS POR TARJETA ROJA
   ================================================== */

.panel-suspensiones-rojas {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}

.panel-suspensiones-rojas h2 {
    margin-bottom: 6px;
}

.descripcion-suspensiones-rojas {
    margin-top: 0;
    margin-bottom: 18px;
    opacity: .75;
}

#tabla-suspensiones-rojas {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

#tabla-suspensiones-rojas th,
#tabla-suspensiones-rojas td {
    padding: 12px 10px;
    vertical-align: middle;
}

#tabla-suspensiones-rojas th {
    text-align: center;
}

#tabla-suspensiones-rojas td:first-child,
#tabla-suspensiones-rojas td:nth-child(2) {
    text-align: left;
}

.fila-roja-suspendido td {
    background:
        rgba(254, 226, 226, .40);
}

.tipo-roja-publica {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 8px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 800;
    white-space: nowrap;
}

.jornadas-roja-publica {
    color: #991b1b;
}

.restantes-roja-publica {
    display: inline-flex;
    min-width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #dc2626;
    color: white;
    font-weight: 900;
}

.estado-roja-publica {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-weight: 900;
    white-space: nowrap;
}

.sin-suspensiones {
    text-align: center !important;
    padding: 24px !important;
    color: #166534;
    font-weight: 700;
}


@media (max-width: 800px) {

    #tabla-suspensiones-rojas {
        font-size: 11px;
    }

    #tabla-suspensiones-rojas th,
    #tabla-suspensiones-rojas td {
        padding: 7px 4px;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .tipo-roja-publica,
    .estado-roja-publica {
        font-size: 10px;
        white-space: normal;
        padding: 5px;
    }

}



/* ==================================================
   SUSPENSIONES ROJAS DENTRO DE TARJETAS
   ================================================== */

.separador-suspensiones-rojas {
    height: 1px;
    background: #dbe3ef;
    margin: 28px 0 22px;
}

.subtitulo-suspensiones-rojas {
    margin-bottom: 15px;
}

.subtitulo-suspensiones-rojas h3 {
    margin: 0 0 5px;
    color: #991b1b;
    font-size: 20px;
}

.subtitulo-suspensiones-rojas p {
    margin: 0;
    opacity: .72;
    font-size: 13px;
}


#tabla-suspensiones-rojas {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}


#tabla-suspensiones-rojas th {
    background: #991b1b !important;
    color: white !important;
    padding: 11px 7px !important;
    text-align: center;
}


#tabla-suspensiones-rojas td {
    padding: 11px 7px !important;
    vertical-align: middle;
}


#tabla-suspensiones-rojas tbody tr {
    border-bottom: 1px solid #fecaca;
}


#tabla-suspensiones-rojas .fila-roja-suspendido td {
    background: rgba(254, 226, 226, .45);
}


#tabla-suspensiones-rojas .estado-roja-publica {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 8px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-weight: 900;
}


#tabla-suspensiones-rojas .tipo-roja-publica {
    color: #991b1b;
    font-weight: 800;
}


#tabla-suspensiones-rojas .jornadas-roja-publica {
    color: #991b1b;
}


#tabla-suspensiones-rojas .restantes-roja-publica {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #dc2626;
    color: white;
    font-weight: 900;
}


@media (max-width: 800px) {

    #tabla-suspensiones-rojas {
        font-size: 11px;
    }

    #tabla-suspensiones-rojas th,
    #tabla-suspensiones-rojas td {
        padding: 7px 4px !important;
        white-space: normal !important;
        overflow-wrap: break-word;
    }

}



/* ==================================================
   CONTADOR ACUMULADO DE TARJETAS ROJAS
   ================================================== */

.total-rojas-publica {
    display: inline-flex;
    min-width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #dc2626;
    color: #ffffff;

    font-weight: 900;
}


.estado-roja-activo {
    display: inline-block;

    padding: 7px 10px;

    border-radius: 8px;

    background: #dcfce7;
    border: 1px solid #bbf7d0;

    color: #166534;

    font-weight: 800;
}


.restantes-roja-cero {
    display: inline-flex;

    min-width: 34px;
    height: 34px;

    justify-content: center;
    align-items: center;

    border-radius: 8px;

    background: #e5e7eb;
    color: #374151;

    font-weight: 800;
}


.fila-roja-activo td {
    background:
        rgba(220, 252, 231, .18);
}



/* ==================================================
   REAJUSTE PANEL SUSPENSIONES ROJAS
   ================================================== */

#panel-suspensiones-rojas {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    margin-top: 24px;
}


#panel-suspensiones-rojas
.subtitulo-suspensiones-rojas {

    margin-bottom: 18px;
}


#panel-suspensiones-rojas
.subtitulo-suspensiones-rojas h2 {

    margin: 0 0 6px;

    color: #991b1b;

    font-size: 25px;
}


#panel-suspensiones-rojas
.subtitulo-suspensiones-rojas p {

    margin: 0;

    font-size: 14px;

    opacity: .72;
}


.table-wrap-rojas {

    width: 100%;

    max-width: 100%;

    overflow-x: auto;

    border-radius: 14px;
}


#tabla-suspensiones-rojas {

    width: 100% !important;

    min-width: 850px;

    table-layout: fixed !important;

    border-collapse: collapse;
}


/* JUGADOR */

#tabla-suspensiones-rojas
th:nth-child(1),

#tabla-suspensiones-rojas
td:nth-child(1) {

    width: 22%;

    text-align: left;
}


/* EQUIPO */

#tabla-suspensiones-rojas
th:nth-child(2),

#tabla-suspensiones-rojas
td:nth-child(2) {

    width: 21%;

    text-align: left;
}


/* TOTAL */

#tabla-suspensiones-rojas
th:nth-child(3),

#tabla-suspensiones-rojas
td:nth-child(3) {

    width: 10%;

    text-align: center;
}


/* JORNADAS */

#tabla-suspensiones-rojas
th:nth-child(4),

#tabla-suspensiones-rojas
td:nth-child(4) {

    width: 19%;

    text-align: center;
}


/* RESTANTES */

#tabla-suspensiones-rojas
th:nth-child(5),

#tabla-suspensiones-rojas
td:nth-child(5) {

    width: 12%;

    text-align: center;
}


/* ESTADO */

#tabla-suspensiones-rojas
th:nth-child(6),

#tabla-suspensiones-rojas
td:nth-child(6) {

    width: 16%;

    text-align: center;
}


#tabla-suspensiones-rojas th {

    padding: 13px 10px !important;

    white-space: normal !important;

    line-height: 1.15;
}


#tabla-suspensiones-rojas td {

    padding: 13px 10px !important;

    white-space: normal !important;

    overflow-wrap: break-word;

    vertical-align: middle;
}


#tabla-suspensiones-rojas
.estado-roja-publica,

#tabla-suspensiones-rojas
.estado-roja-activo {

    display: inline-block;

    width: auto;

    max-width: 100%;

    box-sizing: border-box;

    white-space: nowrap !important;
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 1100px) {

    #tabla-suspensiones-rojas {

        min-width: 760px;
    }

}


/* ==================================================
   CELULAR
   ================================================== */

@media (max-width: 700px) {

    #panel-suspensiones-rojas {

        padding-left: 12px !important;

        padding-right: 12px !important;
    }


    #panel-suspensiones-rojas
    .subtitulo-suspensiones-rojas h2 {

        font-size: 20px;
    }


    #tabla-suspensiones-rojas {

        min-width: 720px;

        font-size: 11px;
    }


    #tabla-suspensiones-rojas th,
    #tabla-suspensiones-rojas td {

        padding: 8px 6px !important;
    }

}



/* ==================================================
   PREMIO DEFENSIVO - ANCHO COMPLETO + LOGO ORIGINAL
   ================================================== */

.premio-defensivo-ancho {

    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    max-width:
        none !important;

    flex:
        1 1 100% !important;

    box-sizing:
        border-box !important;

    align-self:
        stretch !important;

    position:
        relative;

    min-height:
        240px;

}


/*
 * Si el premio está dentro de una
 * cuadrícula de dos columnas, ocupará ambas.
 */

.contenido
.premio-defensivo-ancho {

    grid-column:
        1 / -1 !important;

}


/* LOGO ORIGINAL */

.premio-defensivo-logo-original {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        12px 0 18px;

}


.premio-defensivo-logo-original img {

    width:
        140px !important;

    height:
        140px !important;

    max-width:
        140px !important;

    object-fit:
        contain !important;

    display:
        block;

    background:
        #ffffff;

    padding:
        10px;

    border-radius:
        20px;

    box-sizing:
        border-box;

    box-shadow:
        0 8px 25px
        rgba(
            15,
            23,
            42,
            .16
        );

}


/*
 * Dar más espacio al contenido interno
 */

.premio-defensivo-ancho > div {

    max-width:
        100%;

}


/* TABLET */

@media (
    max-width: 1000px
) {

    .premio-defensivo-logo-original img {

        width:
            120px !important;

        height:
            120px !important;

    }

}


/* CELULAR */

@media (
    max-width: 700px
) {

    .premio-defensivo-ancho {

        width:
            100% !important;

        min-height:
            auto;

    }


    .premio-defensivo-logo-original img {

        width:
            100px !important;

        height:
            100px !important;

        padding:
            7px;

        border-radius:
            16px;

    }

}



/* ==================================================
   PREMIO DEFENSIVO - ANCHO COMPLETO + LOGO ORIGINAL
   ================================================== */

.premio-defensivo-ancho {

    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    max-width:
        none !important;

    flex:
        1 1 100% !important;

    box-sizing:
        border-box !important;

    align-self:
        stretch !important;

    position:
        relative;

    min-height:
        240px;

}


/*
 * Si el premio está dentro de una
 * cuadrícula de dos columnas, ocupará ambas.
 */

.contenido
.premio-defensivo-ancho {

    grid-column:
        1 / -1 !important;

}


/* LOGO ORIGINAL */

.premio-defensivo-logo-original {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        12px 0 18px;

}


.premio-defensivo-logo-original img {

    width:
        140px !important;

    height:
        140px !important;

    max-width:
        140px !important;

    object-fit:
        contain !important;

    display:
        block;

    background:
        #ffffff;

    padding:
        10px;

    border-radius:
        20px;

    box-sizing:
        border-box;

    box-shadow:
        0 8px 25px
        rgba(
            15,
            23,
            42,
            .16
        );

}


/*
 * Dar más espacio al contenido interno
 */

.premio-defensivo-ancho > div {

    max-width:
        100%;

}


/* TABLET */

@media (
    max-width: 1000px
) {

    .premio-defensivo-logo-original img {

        width:
            120px !important;

        height:
            120px !important;

    }

}


/* CELULAR */

@media (
    max-width: 700px
) {

    .premio-defensivo-ancho {

        width:
            100% !important;

        min-height:
            auto;

    }


    .premio-defensivo-logo-original img {

        width:
            100px !important;

        height:
            100px !important;

        padding:
            7px;

        border-radius:
            16px;

    }

}



/* ==================================================
   FIX DEFINITIVO PREMIO DEFENSIVO
   ================================================== */


/*
 * La tarjeta es hija directa del grid .contenido.
 * Debe ocupar TODAS las columnas.
 */

.contenido > .valla-menos-vencida,
.valla-menos-vencida.valla-premio-ancho-total {

    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    box-sizing:
        border-box !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

}


/*
 * Reorganizar contenido:
 *
 * LOGO | INFORMACIÓN
 */

.valla-menos-vencida.valla-premio-ancho-total {

    display:
        grid !important;

    grid-template-columns:
        170px minmax(0, 1fr) !important;

    align-items:
        center !important;

    gap:
        28px !important;

    padding:
        28px 36px !important;

}


/*
 * Quitamos el icono genérico
 * porque ahora tenemos el escudo real.
 */

.valla-premio-ancho-total
.valla-icono-caja {

    display:
        none !important;

}


/*
 * CONTENEDOR DE LOGOS
 */

.valla-logos-equipos {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    min-width:
        0;

}


/*
 * LOGO ORIGINAL DEL EQUIPO
 */

.valla-logo-equipo-item {

    width:
        150px;

    height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.96);

    border-radius:
        22px;

    padding:
        12px;

    box-sizing:
        border-box;

    box-shadow:
        0 12px 30px
        rgba(15,23,42,.18);

}


.valla-logo-original-equipo {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        126px !important;

    max-height:
        126px !important;

    object-fit:
        contain !important;

}


/*
 * INFORMACIÓN DEL PREMIO
 */

.valla-premio-ancho-total
.valla-menos-vencida-contenido {

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    text-align:
        left !important;

}


.valla-premio-ancho-total
.valla-menos-vencida-equipo {

    white-space:
        pre-line !important;

    font-size:
        clamp(
            28px,
            3vw,
            44px
        ) !important;

    line-height:
        1.05 !important;

}


.valla-premio-ancho-total
.valla-menos-vencida-dato {

    font-size:
        clamp(
            20px,
            2vw,
            30px
        ) !important;

}


/* TABLET */

@media (max-width: 900px) {

    .valla-menos-vencida.valla-premio-ancho-total {

        grid-template-columns:
            130px minmax(0,1fr) !important;

        gap:
            18px !important;

        padding:
            24px !important;

    }


    .valla-logo-equipo-item {

        width:
            120px;

        height:
            120px;

    }


    .valla-logo-original-equipo {

        max-width:
            100px !important;

        max-height:
            100px !important;

    }

}


/* CELULAR */

@media (max-width: 600px) {

    .valla-menos-vencida.valla-premio-ancho-total {

        grid-template-columns:
            1fr !important;

        text-align:
            center !important;

        gap:
            14px !important;

        padding:
            22px 16px !important;

    }


    .valla-logos-equipos {

        justify-content:
            center;

    }


    .valla-logo-equipo-item {

        width:
            105px;

        height:
            105px;

        border-radius:
            18px;

    }


    .valla-logo-original-equipo {

        max-width:
            88px !important;

        max-height:
            88px !important;

    }


    .valla-premio-ancho-total
    .valla-menos-vencida-contenido {

        text-align:
            center !important;

    }


    .valla-premio-ancho-total
    .valla-menos-vencida-equipo {

        font-size:
            27px !important;

    }

}



/* ==================================================
   FIX DEFINITIVO PREMIO DEFENSIVO
   ================================================== */


/*
 * La tarjeta es hija directa del grid .contenido.
 * Debe ocupar TODAS las columnas.
 */

.contenido > .valla-menos-vencida,
.valla-menos-vencida.valla-premio-ancho-total {

    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    box-sizing:
        border-box !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

}


/*
 * Reorganizar contenido:
 *
 * LOGO | INFORMACIÓN
 */

.valla-menos-vencida.valla-premio-ancho-total {

    display:
        grid !important;

    grid-template-columns:
        170px minmax(0, 1fr) !important;

    align-items:
        center !important;

    gap:
        28px !important;

    padding:
        28px 36px !important;

}


/*
 * Quitamos el icono genérico
 * porque ahora tenemos el escudo real.
 */

.valla-premio-ancho-total
.valla-icono-caja {

    display:
        none !important;

}


/*
 * CONTENEDOR DE LOGOS
 */

.valla-logos-equipos {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    min-width:
        0;

}


/*
 * LOGO ORIGINAL DEL EQUIPO
 */

.valla-logo-equipo-item {

    width:
        150px;

    height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.96);

    border-radius:
        22px;

    padding:
        12px;

    box-sizing:
        border-box;

    box-shadow:
        0 12px 30px
        rgba(15,23,42,.18);

}


.valla-logo-original-equipo {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        126px !important;

    max-height:
        126px !important;

    object-fit:
        contain !important;

}


/*
 * INFORMACIÓN DEL PREMIO
 */

.valla-premio-ancho-total
.valla-menos-vencida-contenido {

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    text-align:
        left !important;

}


.valla-premio-ancho-total
.valla-menos-vencida-equipo {

    white-space:
        pre-line !important;

    font-size:
        clamp(
            28px,
            3vw,
            44px
        ) !important;

    line-height:
        1.05 !important;

}


.valla-premio-ancho-total
.valla-menos-vencida-dato {

    font-size:
        clamp(
            20px,
            2vw,
            30px
        ) !important;

}


/* TABLET */

@media (max-width: 900px) {

    .valla-menos-vencida.valla-premio-ancho-total {

        grid-template-columns:
            130px minmax(0,1fr) !important;

        gap:
            18px !important;

        padding:
            24px !important;

    }


    .valla-logo-equipo-item {

        width:
            120px;

        height:
            120px;

    }


    .valla-logo-original-equipo {

        max-width:
            100px !important;

        max-height:
            100px !important;

    }

}


/* CELULAR */

@media (max-width: 600px) {

    .valla-menos-vencida.valla-premio-ancho-total {

        grid-template-columns:
            1fr !important;

        text-align:
            center !important;

        gap:
            14px !important;

        padding:
            22px 16px !important;

    }


    .valla-logos-equipos {

        justify-content:
            center;

    }


    .valla-logo-equipo-item {

        width:
            105px;

        height:
            105px;

        border-radius:
            18px;

    }


    .valla-logo-original-equipo {

        max-width:
            88px !important;

        max-height:
            88px !important;

    }


    .valla-premio-ancho-total
    .valla-menos-vencida-contenido {

        text-align:
            center !important;

    }


    .valla-premio-ancho-total
    .valla-menos-vencida-equipo {

        font-size:
            27px !important;

    }

}



/* ==================================================
   PREMIO DEFENSIVO FINAL
   ================================================== */

.contenido > .valla-menos-vencida {

    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    max-width:
        100% !important;

    box-sizing:
        border-box !important;

}


.valla-menos-vencida.valla-con-logo-original {

    display:
        grid !important;

    grid-template-columns:
        150px minmax(0, 1fr) !important;

    align-items:
        center !important;

    gap:
        28px !important;

    min-height:
        220px !important;

    padding:
        28px 42px !important;

}


/*
 * Caja que antes contenía el guante.
 */

.valla-con-logo-original
.valla-icono-caja {

    width:
        140px !important;

    height:
        140px !important;

    min-width:
        140px !important;

    padding:
        10px !important;

    margin:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        rgba(255,255,255,.96) !important;

    border:
        2px solid rgba(255,255,255,.75) !important;

    border-radius:
        22px !important;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.18) !important;

}


/*
 * Ocultar definitivamente
 * el emoji/guante original.
 */

.valla-con-logo-original
.valla-menos-vencida-icono {

    display:
        none !important;

}


/*
 * Logos.
 */

.valla-logos-originales {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

}


.valla-logo-equipo-original {

    display:
        block !important;

    width:
        118px !important;

    height:
        118px !important;

    max-width:
        118px !important;

    max-height:
        118px !important;

    object-fit:
        contain !important;

}


/*
 * Texto mejor distribuido.
 */

.valla-con-logo-original
.valla-menos-vencida-contenido {

    width:
        100% !important;

    max-width:
        none !important;

    text-align:
        left !important;

}


.valla-con-logo-original
.valla-menos-vencida-equipo {

    white-space:
        pre-line !important;

    font-size:
        clamp(
            30px,
            3vw,
            46px
        ) !important;

    line-height:
        1.05 !important;

}


.valla-con-logo-original
.valla-menos-vencida-info {

    display:
        flex !important;

    align-items:
        center !important;

    flex-wrap:
        wrap !important;

    gap:
        10px !important;

    margin-top:
        14px !important;

}


/* CELULAR */

@media (max-width: 650px) {

    .valla-menos-vencida.valla-con-logo-original {

        grid-template-columns:
            1fr !important;

        gap:
            14px !important;

        padding:
            24px 18px !important;

        text-align:
            center !important;

    }


    .valla-con-logo-original
    .valla-icono-caja {

        width:
            110px !important;

        height:
            110px !important;

        min-width:
            110px !important;

        margin:
            0 auto !important;

    }


    .valla-logo-equipo-original {

        width:
            90px !important;

        height:
            90px !important;

    }


    .valla-con-logo-original
    .valla-menos-vencida-contenido {

        text-align:
            center !important;

    }


    .valla-con-logo-original
    .valla-menos-vencida-info {

        justify-content:
            center !important;

    }

}



/* ==================================================
   PREMIO DEFENSIVO FINAL
   ================================================== */

.contenido > .valla-menos-vencida {

    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    max-width:
        100% !important;

    box-sizing:
        border-box !important;

}


.valla-menos-vencida.valla-con-logo-original {

    display:
        grid !important;

    grid-template-columns:
        150px minmax(0, 1fr) !important;

    align-items:
        center !important;

    gap:
        28px !important;

    min-height:
        220px !important;

    padding:
        28px 42px !important;

}


/*
 * Caja que antes contenía el guante.
 */

.valla-con-logo-original
.valla-icono-caja {

    width:
        140px !important;

    height:
        140px !important;

    min-width:
        140px !important;

    padding:
        10px !important;

    margin:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        rgba(255,255,255,.96) !important;

    border:
        2px solid rgba(255,255,255,.75) !important;

    border-radius:
        22px !important;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.18) !important;

}


/*
 * Ocultar definitivamente
 * el emoji/guante original.
 */

.valla-con-logo-original
.valla-menos-vencida-icono {

    display:
        none !important;

}


/*
 * Logos.
 */

.valla-logos-originales {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

}


.valla-logo-equipo-original {

    display:
        block !important;

    width:
        118px !important;

    height:
        118px !important;

    max-width:
        118px !important;

    max-height:
        118px !important;

    object-fit:
        contain !important;

}


/*
 * Texto mejor distribuido.
 */

.valla-con-logo-original
.valla-menos-vencida-contenido {

    width:
        100% !important;

    max-width:
        none !important;

    text-align:
        left !important;

}


.valla-con-logo-original
.valla-menos-vencida-equipo {

    white-space:
        pre-line !important;

    font-size:
        clamp(
            30px,
            3vw,
            46px
        ) !important;

    line-height:
        1.05 !important;

}


.valla-con-logo-original
.valla-menos-vencida-info {

    display:
        flex !important;

    align-items:
        center !important;

    flex-wrap:
        wrap !important;

    gap:
        10px !important;

    margin-top:
        14px !important;

}


/* CELULAR */

@media (max-width: 650px) {

    .valla-menos-vencida.valla-con-logo-original {

        grid-template-columns:
            1fr !important;

        gap:
            14px !important;

        padding:
            24px 18px !important;

        text-align:
            center !important;

    }


    .valla-con-logo-original
    .valla-icono-caja {

        width:
            110px !important;

        height:
            110px !important;

        min-width:
            110px !important;

        margin:
            0 auto !important;

    }


    .valla-logo-equipo-original {

        width:
            90px !important;

        height:
            90px !important;

    }


    .valla-con-logo-original
    .valla-menos-vencida-contenido {

        text-align:
            center !important;

    }


    .valla-con-logo-original
    .valla-menos-vencida-info {

        justify-content:
            center !important;

    }

}