/**
 * Estilos para la preview IA en la ficha de partido.
 * Carga via attach_library('mahi_custom/partido-preview') en node--partido.html.twig.
 *
 * Tipografía sobria y jerárquica: H2 principales destacados, H3 secundarios
 * discretos. Sin colores llamativos ni bordes decorativos — se integra con el
 * resto del sitio sin romper visualmente.
 */

/* =========================================================================
 * Forma reciente (últimos 5) bajo cada escudo.
 * Estilo inspirado en Flashscore: label "Forma" + bolitas circulares
 * vibrantes con letra blanca.
 *   V = verde       (victoria)
 *   E = ámbar       (empate)
 *   D / P = rojo    (derrota)
 *   ? = gris        (sin datos)
 *
 * Colores alineados con los badges .estado-pronostico del sitio pero con
 * tonos más saturados (estándar sport-stats, tipo TW 500-600) para que
 * destaquen contra el fondo oscuro de la caja del evento.
 * ========================================================================= */
.forma-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

.forma-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
  opacity: 0.7;
  line-height: 1;
}

.forma-reciente {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* Fuerza un tamaño mínimo uniforme a cualquier span dentro de la caja del
 * equipo (afecta a las bolitas). El nombre del equipo es más ancho que eso
 * y no se ve afectado. */
.equipo span {
  min-height: 32px;
  min-width: 32px;
  font-weight: 600;
}

.forma-bolita {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  user-select: none;
  cursor: help;
  flex-shrink: 0;
  padding-top: 2px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.forma-bolita--v { background: #16a34a; }  /* victoria — verde vibrante */
.forma-bolita--e { background: #f59e0b; }  /* empate — ámbar vibrante */
.forma-bolita--d { background: #dc2626; }  /* derrota — rojo vibrante */
.forma-bolita--p { background: #dc2626; }  /* alias de "perdido" */
.forma-bolita--\? { background: #94a3b8; } /* sin datos — gris slate */

/* =========================================================================
 * Responsive mobile — la ficha del partido se aprieta mucho en columnas
 * estrechas. Reducimos logos, bolitas, CTA y spacing para que encaje sin
 * overflow.
 * ========================================================================= */

/* Tabletas pequeñas y móvil ≤ 720px */
@media (max-width: 720px) {
  .forma-bolita {
    width: 20px;
    height: 20px;
    font-weight: 700;
    padding-top: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  }
  span.forma-bolita {
    font-size: .6rem !important;
  }
  .forma-reciente { gap: 2px; }
  .forma-label { font-size: 0.6rem; letter-spacing: 0.06em; }
  .forma-wrap { margin-top: 10px; gap: 3px; }
  /* Quitamos el min-height reservado del nombre del equipo: en mobile hace
   * que quede un hueco vacío entre "Crystal Palace" y FORMA. */
  .equipo span { min-height: 0; min-width: 0; }

  body.page-type-partido .evento img,
  .evento img {
    width: 72px !important;
    height: 72px !important;
  }

  .datos-evento__competicion {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }

  .evento .equipo { gap: 6px; padding: 0 3px; }
  .evento .equipo span {
    font-size: 0.88rem;
    line-height: 1.15;
  }

  /* Caja del evento en móvil: relative + padding inferior reducido a 1rem.
   * El antiguo CTA absoluto ya no existe, los pills 1X2 viven dentro con
   * su propio margen; padding de la caja simétrico. */
  .evento,
  body.page-type-partido .evento {
    position: relative;
    padding-bottom: 1rem;
  }
  .datos-evento__cta {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    margin: 0;
    padding: 10px 16px;
    min-width: auto;
    /* En móvil la disposición pasa a horizontal "Apostar · DAZNBET" */
    flex-direction: row;
    gap: 10px;
    border-radius: 10px;
  }
  .datos-evento__cta-label {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
  }
  .datos-evento__cta-casa {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    opacity: 0.95;
  }
}

/* Móvil estrecho ≤ 420px — apretar aún más */
@media (max-width: 420px) {
  .forma-bolita {
    width: 17px;
    height: 17px;
    font-weight: 700;
    padding-top: 1px;
  }
  span.forma-bolita {
    font-size: .6rem !important;
  }
  .forma-reciente { gap: 2px; }
  .equipo span { min-height: 0; min-width: 0; }

  body.page-type-partido .evento img,
  .evento img {
    width: 60px !important;
    height: 60px !important;
  }

  .evento .equipo span {
    font-size: 0.78rem;
  }

  .evento,
  body.page-type-partido .evento {
    padding-bottom: 1rem;
  }
  .datos-evento__cta {
    padding: 8px 12px;
    bottom: 8px;
    left: 10px;
    right: 10px;
  }
  .datos-evento__cta-label { font-size: 0.88rem; }
  .datos-evento__cta-casa { font-size: 0.62rem; padding-left: 8px; }

  .hora {
    font-size: 0.85rem;
  }
}

/* =========================================================================
 * Clasificación de la liga — tabla estilo Flashscore con fila highlighteada
 * para los equipos del partido.
 * ========================================================================= */
.partido-clasificacion {
  margin: 2em 0;
}

.partido-clasificacion h2 {
  margin: 0 0 0.8em;
  font-size: 1.3rem;
  font-weight: 700;
}

.partido-clasificacion__scroll {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(21, 5, 66, 0.06), 0 1px 3px rgba(21, 5, 66, 0.04);
  overflow: hidden;  /* clip esquinas, sin reservar scrollbar */
}

.partido-clasificacion__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0;
  padding: 0;
}
.partido-clasificacion__table tbody,
.partido-clasificacion__table thead {
  margin: 0;
  padding: 0;
}

.partido-clasificacion__table thead th {
  background: var(--color-primary, #150542);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 8px;
  border-bottom: 3px solid var(--color-accent, #01efc1);
  text-align: center;
}

.partido-clasificacion__table thead th.col-equipo {
  text-align: left;
}

.partido-clasificacion__table tbody td {
  padding: 9px 8px;
  border-bottom: 1px solid #eee;
  text-align: center;
  vertical-align: middle;
}

.partido-clasificacion__table .col-pos {
  font-weight: 800;
  color: var(--color-primary, #150542);
  width: 36px;
}

.partido-clasificacion__table .col-equipo {
  text-align: left;
  font-weight: 600;
  color: var(--color-primary, #150542);
}

/* Columna PTS: fondo tintado azul en todo el recorrido (head + body) para
 * destacarla visualmente como la más importante. */
.partido-clasificacion__table .col-pts {
  font-weight: 800;
  color: var(--color-primary, #150542);
  background: rgba(21, 5, 66, 0.06);
  border-left: 1px solid rgba(21, 5, 66, 0.08);
}

.partido-clasificacion__table thead th.col-pts {
  background: #0c0334;  /* azul aún más oscuro para la cabecera PTS */
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Última fila: mantenemos el borde inferior igual que las demás, así la
 * columna PTS (con fondo tintado) no genera un "escalón" visual contra
 * el fondo blanco del contenedor. El clip de las esquinas lo hace el
 * wrapper con overflow:auto + border-radius. */

.partido-clasificacion__table tbody tr {
  transition: background 0.12s ease;
}
.partido-clasificacion__table tbody tr:nth-child(even) {
  background: rgba(21, 5, 66, 0.02);
}
.partido-clasificacion__table tbody tr:hover {
  background: rgba(1, 239, 193, 0.08);
}

.partido-clasificacion__table tbody tr.is-partido {
  background: rgba(1, 239, 193, 0.15);
  font-weight: 700;
  border-left: 3px solid var(--color-accent, #01efc1);
}
.partido-clasificacion__table tbody tr.is-partido:hover {
  background: rgba(1, 239, 193, 0.25);
}
.partido-clasificacion__table tbody tr.is-partido td {
  border-bottom-color: rgba(1, 239, 193, 0.3);
}
.partido-clasificacion__table tbody tr.is-partido .col-pts {
  background: rgba(1, 239, 193, 0.25);
  color: var(--color-primary, #150542);
}

.partido-clasificacion__source {
  font-size: 0.75rem;
  color: #888;
  margin: 0.6em 0 0;
  font-style: italic;
}

@media (max-width: 640px) {
  /* En móvil sí hace falta scroll horizontal porque la tabla completa no
   * cabe incluso con columnas ocultas. */
  .partido-clasificacion__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .partido-clasificacion__table .col-hidden-sm {
    display: none;
  }
  .partido-clasificacion__table {
    font-size: 0.85rem;
  }
  .partido-clasificacion__table thead th,
  .partido-clasificacion__table tbody td {
    padding: 7px 5px;
  }
}

/* =========================================================================
 * Alineaciones probables — formato 2 columnas (sin campo SVG).
 * Estilo oscuro alineado con la caja del evento del sitio.
 * Estructura:
 *   .partido-alineacion
 *     > h2
 *     > .partido-alineacion__box (caja oscura contenedora)
 *         > .partido-alineacion__caption ("POSIBLES ALINEACIONES TITULARES")
 *         > .partido-alineacion__cols (grid 2 columnas)
 *             > .partido-alineacion__team (x2)
 *                 > .partido-alineacion__team-head (nombre + formación)
 *                 > .partido-alineacion__list (ul con 11 jugadores)
 *     > .partido-alineacion__source (pie con fuente)
 * ========================================================================= */
.partido-alineacion {
  margin: 2em 0;
}

.partido-alineacion h2 {
  margin: 0 0 0.8em;
  font-size: 1.3rem;
  font-weight: 700;
}

.partido-alineacion__box {
  background: #fff;
  color: #1a1a1a;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 16px rgba(21, 5, 66, 0.06), 0 1px 3px rgba(21, 5, 66, 0.04);
  overflow: hidden;
}

.partido-alineacion__caption {
  background: var(--color-primary, #150542);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 12px;
  border-bottom: 3px solid var(--color-accent, #01efc1);
  position: relative;
}

/* Barra decorativa turquesa bajo la cabecera */
.partido-alineacion__caption::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 44px;
  height: 3px;
  background: var(--color-accent, #01efc1);
  transform: translateX(-50%);
  border-radius: 0 0 3px 3px;
}

.partido-alineacion__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Columna de equipo: watermark del escudo como fondo centrado.
 * La variable --team-logo se setea via inline style desde el twig. */
.partido-alineacion__team {
  padding: 16px 18px 18px;
  position: relative;
  background-image: var(--team-logo, none);
  background-repeat: no-repeat;
  background-position: center 55%;
  background-size: 200px auto;
  /* blend para que se vea descolorido pero perceptible */
}

/* Overlay blanco semitransparente para atenuar el escudo y que los nombres
 * sean legibles. Lo hacemos con ::before para no requerir JS. */
.partido-alineacion__team::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  pointer-events: none;
  z-index: 1;
}

.partido-alineacion__team > * {
  position: relative;
  z-index: 2;
}

.partido-alineacion__team--local {
  border-right: 1px solid #e5e7eb;
}

.partido-alineacion__team-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
  gap: 8px;
}

.partido-alineacion__team-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary, #150542);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.partido-alineacion__team-formation {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-primary, #150542);
  letter-spacing: 0.08em;
  background: var(--color-accent, #01efc1);
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(1, 239, 193, 0.3);
}

.partido-alineacion__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.partido-alineacion__player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #1f2937;
  border-bottom: 1px solid rgba(21, 5, 66, 0.06);
  border-radius: 4px;
  transition: background 0.12s ease, transform 0.12s ease;
}

/* Zebra sutil para las filas pares */
.partido-alineacion__player:nth-child(even) {
  background: rgba(21, 5, 66, 0.025);
}

.partido-alineacion__player:hover {
  background: rgba(1, 239, 193, 0.08);
  transform: translateX(2px);
}

.partido-alineacion__player:last-child { border-bottom: none; }

/* Destacado sutil para el portero (primera fila cuando hay badge G) */
.partido-alineacion__player:has(.partido-alineacion__tag) {
  background: rgba(255, 105, 0, 0.04);
  border-left: 3px solid var(--color-accent-orange, #FF6900);
  padding-left: 8px;
}

.partido-alineacion__dorsal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--color-primary, #150542);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0;
}

.partido-alineacion__name {
  flex: 1;
  font-weight: 600;
  color: var(--color-primary, #150542);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partido-alineacion__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-orange, #FF6900);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(255, 105, 0, 0.4);
}

.partido-alineacion__source {
  font-size: 0.75rem;
  color: #888;
  margin: 0.6em 0 0;
  font-style: italic;
}

@media (max-width: 640px) {
  .partido-alineacion__cols {
    grid-template-columns: 1fr;
  }
  .partido-alineacion__team--local {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  .partido-alineacion__team {
    background-size: 160px auto;
  }
}

/* =========================================================================
 * Página de equipo — estilos principales en bloque "PÁGINA DE EQUIPO"
 * más abajo en este archivo. Aquí solo reglas comunes/empty.
 * ========================================================================= */
.equipo-page__pronosticos h2 {
  margin: 0 0 1em;
  font-size: 1.3rem;
  font-weight: 700;
}

.equipo-page__empty {
  padding: 24px;
  text-align: center;
  color: #777;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px dashed #ddd;
  margin: 2em 0;
}

.partido-preview-ia {
  margin-bottom: 1.5em;
}

/* El primer H2 de la preview (título SEO con partido + fecha) destaca como
 * cabecera principal del bloque editorial. */
.partido-preview-ia > h2:first-child {
  margin-top: 0;
  margin-bottom: 0.8em;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.3;
}

/* H2 de secciones internas (Cómo llega X, Claves, Cara a cara, Pronóstico) */
.partido-preview-ia h2 {
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
}

/* H3 narrativos (dentro de "Las claves del partido"): discretos, sin color
 * llamativo, sin bordes decorativos. */
.partido-preview-ia h3 {
  margin-top: 1.1em;
  margin-bottom: 0.4em;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
}

.partido-preview-ia p {
  line-height: 1.65;
  margin-bottom: 1em;
}

.partido-preview-ia strong {
  font-weight: 600;
}

.partido-preview-ia em {
  font-style: italic;
}

/* Bloque de bonos inyectado entre párrafos de la preview.
 * Los IDs `bonos-outer` / `bonosdestacados` del shortcode original se
 * renombran en preprocess a `-preview` para evitar colisión con el banner
 * superior del sitio. Aquí aplicamos layout propio. */
.partido-preview-ia__bonos {
  margin: 1.75em 0;
}

#bonos-outer-preview {
  /* Resetear posibles estilos heredados del contenedor superior */
  height: auto;
  min-height: 0;
}

#bonosdestacados-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  background: transparent;
  padding: 0;
}

#bonosdestacados-preview .bono {
  cursor: pointer;
  padding: 14px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

#bonosdestacados-preview .bono:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #c7c7c7;
}

#bonosdestacados-preview .bono .boxOverContent__banner--content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

#bonosdestacados-preview .bono .icon-img {
  max-width: 110px;
  height: auto;
  margin: 0 auto 4px;
  display: block;
}

#bonosdestacados-preview .bono .cantidad-text {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #222;
  text-align: center;
  min-height: auto;
}

#bonosdestacados-preview .bono .terminos-text {
  display: none; /* ocultamos términos largos en esta ubicación para no saturar */
}

#bonosdestacados-preview .bono .btn-visitar {
  display: inline-block;
  padding: 8px 14px;
  background: #e76b00;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 999px;
  text-align: center;
  letter-spacing: 0.01em;
  transition: background 0.15s ease;
}

#bonosdestacados-preview .bono:hover .btn-visitar {
  background: #ff7c0d;
}

@media (max-width: 640px) {
  /* Scroll horizontal con snap en móvil: cards en fila, una a la vista con
   * posibilidad de deslizar para ver las demás. Más atractivo que stack. */
  #bonos-outer-preview {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 4px;
  }
  #bonos-outer-preview::-webkit-scrollbar { display: none; } /* Webkit */

  #bonosdestacados-preview {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: 10px;
    width: max-content;
    min-width: 100%;
  }

  #bonosdestacados-preview .bono {
    flex: 0 0 82vw;       /* cada card ocupa 82% del viewport */
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* Indicador visual de "scrolleable": degradado sutil al borde derecho */
  .partido-preview-ia__bonos {
    position: relative;
  }
  .partido-preview-ia__bonos::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 4px;
    width: 30px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
    pointer-events: none;
  }
}

/* =========================================================================
 * Fila "mejores cuotas 1X2/12" DENTRO de la caja verde del partido —
 * 3 (o 2) botones "Apostar" con la cuota más alta por outcome y el logo
 * de la casa que la ofrece. Cada botón enlaza a su afiliado.
 * ========================================================================= */

/* La caja .evento debe permitir que esta fila wrap a línea nueva */
.evento {
  flex-wrap: wrap;
}
.evento__cuotas {
  flex-basis: 100%;
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.evento__cuotas--2cols {
  grid-template-columns: 1fr 1fr;
}

.evento-cuota-btn {
  display: grid;
  grid-template-areas:
    "head head"
    "main casa";
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--color-primary, #150542) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(21, 5, 66, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.evento-cuota-btn.is-active:hover,
.evento-cuota-btn.is-active:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(21, 5, 66, 0.18);
  border-color: var(--color-accent-orange, #FF6900);
  text-decoration: none !important;
  color: var(--color-primary, #150542) !important;
}
.evento-cuota-btn.is-empty {
  opacity: 0.5;
  pointer-events: none;
}

.evento-cuota-btn__head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
  min-width: 0;
}
.evento-cuota-btn__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 6px;
  background: var(--color-primary, #150542);
  color: #fff;
  border-radius: 5px;
  font-weight: 800;
  font-size: 0.78rem;
}
.evento-cuota-btn__name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-primary, #150542);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.evento-cuota-btn__main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.evento-cuota-btn__cuota {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-primary, #150542);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.evento-cuota-btn__cuota--empty { color: #9ca3af; font-size: 1.1rem; }

.evento-cuota-btn__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--color-accent-orange, #FF6900);
  color: #fff !important;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.evento-cuota-btn__cta i { font-size: 0.66rem; }
.evento-cuota-btn.is-active:hover .evento-cuota-btn__cta { background: #e85d00; }

.evento-cuota-btn__casa {
  grid-area: casa;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 48px;
}
.evento-cuota-btn__casa img {
  max-height: 18px;
  max-width: 62px;
  object-fit: contain;
}
.evento-cuota-btn__casa span {
  font-size: 0.68rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 720px) {
  .evento__cuotas { gap: 6px; margin-top: 12px; }
  .evento-cuota-btn { padding: 8px 10px; gap: 3px 8px; }
  .evento-cuota-btn__tag { min-width: 22px; font-size: 0.72rem; padding: 1px 5px; }
  .evento-cuota-btn__name { font-size: 0.75rem; }
  .evento-cuota-btn__cuota { font-size: 1.1rem; }
  .evento-cuota-btn__cta { font-size: 0.66rem; padding: 4px 8px; }
  .evento-cuota-btn__casa img { max-height: 14px; max-width: 48px; }
}
@media (max-width: 480px) {
  .evento-cuota-btn__cta span { display: none; }
  /* En muy estrecho: dejamos solo tag + cuota arriba, casa pequeñita debajo */
  .evento-cuota-btn {
    grid-template-areas:
      "head"
      "main"
      "casa";
    grid-template-columns: 1fr;
  }
  .evento-cuota-btn__main { justify-content: space-between; }
  .evento-cuota-btn__casa { justify-content: center; }
}

/* =========================================================================
 * Widget compacto .partido-cuotas-1x2 — 3 (o 2) pills horizontales tipo
 * scores24 con [tag] [cuota] [logo casa]. Todo el pill es clickable al
 * MDBA de bet365.
 * ========================================================================= */
.partido-cuotas-1x2 {
  margin: 1em 0 1.4em;
}
.partido-cuotas-1x2__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.partido-cuotas-1x2__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  background: rgba(21, 5, 66, 0.22);
  border: 1px solid rgba(21, 5, 66, 0.1);
  border-radius: 8px;
  color: #fff !important;
  text-decoration: none !important;
  transition: background 0.12s ease, transform 0.12s ease;
  min-width: 88px;
}
.partido-cuotas-1x2__pill.is-active:hover,
.partido-cuotas-1x2__pill.is-active:focus {
  background: rgba(21, 5, 66, 0.38);
  transform: translateY(-1px);
  text-decoration: none !important;
  color: #fff !important;
}
.partido-cuotas-1x2__pill.is-empty { opacity: 0.5; pointer-events: none; }

.partido-cuotas-1x2__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.partido-cuotas-1x2__cuota {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-accent, #01efc1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.partido-cuotas-1x2__cuota--empty {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.partido-cuotas-1x2__casa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Override agresivo: `body.page-type-partido .evento img` de style.css
 * fuerza width/height 108px, background gris, border-radius 50%, padding
 * y box-shadow !important sobre CUALQUIER img dentro de .evento. Como el
 * widget 1X2 vive ahora dentro de .evento, esa regla pisaba el logo de
 * la casa. Forzamos con mayor especificidad + !important. */
body.page-type-partido .evento .partido-cuotas-1x2__casa img,
.partido-cuotas-1x2__casa img {
  width: auto !important;
  height: 32px !important;
  max-width: 76px !important;
  max-height: 20px !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}
.partido-cuotas-1x2__casa .name {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.partido-cuotas-1x2__legal {
  margin: 0.5em 2px 0;
  font-size: 0.7rem;
  color: #9ca3af;
  text-align: center;
  font-style: italic;
}

@media (max-width: 640px) {
  .partido-cuotas-1x2__row { gap: 6px; }
  .partido-cuotas-1x2__pill {
    padding: 7px 9px;
    gap: 6px;
    min-width: 78px;
    margin-top: 1rem;
  }
  .partido-cuotas-1x2__tag { font-size: 0.74rem; min-width: 16px; }
  .partido-cuotas-1x2__cuota { font-size: 0.92rem; }
  body.page-type-partido .evento .partido-cuotas-1x2__casa img,
  .partido-cuotas-1x2__casa img {
    height: 26px !important;
    max-width: 38px !important;
    max-height: 18px !important;
  }
}
@media (max-width: 380px) {
  .partido-cuotas-1x2__pill { padding: 6px 7px; gap: 4px; min-width: 70px; }
  .partido-cuotas-1x2__cuota { font-size: 0.85rem; }
  body.page-type-partido .evento .partido-cuotas-1x2__casa img,
  .partido-cuotas-1x2__casa img {
    height: 24px !important;
    max-width: 52px !important;
    max-height: 16px !important;
  }
}

/* <= 425px: en móviles estrechos hay dos problemas:
 *   1. La 3ª pill 1X2 saltaba de fila (flex-wrap) → forzamos grid 3-col.
 *   2. Los 3 hijos de .evento (equipo-local, datos-evento, equipo-visit)
 *      se descuadraban: al tener forma/nombre ancho, el último se iba a
 *      una segunda fila. Forzamos flex:1 + min-width:0 para repartir. */
@media (max-width: 425px) {
  /* --- Cabecera del evento: 3 columnas repartidas --- */
  .evento > .equipo,
  .evento > .datos-evento {
    flex: 1 1 0;
    min-width: 0;
  }
  .evento > .equipo {
    padding: 0 2px;
  }
  body.page-type-partido .evento img,
  .evento img {
    width: 54px !important;
    height: 54px !important;
  }
  .evento .equipo span {
    font-size: 0.72rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  .datos-evento__competicion {
    font-size: 0.6rem;
  }
  .hora { font-size: 0.78rem; }
  .forma-wrap { gap: 2px; }
  .forma-bolita { width: 14px; height: 14px; }
  span.forma-bolita { font-size: 0.5rem !important; }

  /* --- Pills 1X2 en grid 3 (o 2) columnas iguales --- */
  .partido-cuotas-1x2__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
  }
  .partido-cuotas-1x2__row--2cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .partido-cuotas-1x2__pill {
    min-width: 0;
    padding: 6px 6px;
    gap: 4px;
    overflow: hidden;
    justify-content: center;
  }
  .partido-cuotas-1x2__tag { font-size: 0.7rem; min-width: 10px; }
  .partido-cuotas-1x2__cuota { font-size: 0.82rem; }
  body.page-type-partido .evento .partido-cuotas-1x2__casa img,
  .partido-cuotas-1x2__casa img {
    height: 18px !important;
    max-width: 44px !important;
    max-height: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .partido-cuotas-1x2__casa .name { font-size: 0.56rem; }
}

/* .evento contiene 4 hijos en wrap: 2 equipos + datos-evento + pills 1X2.
 * Los 3 primeros ocupan la fila superior; los pills van debajo, full-width. */
.evento { flex-wrap: wrap; }
.evento > .partido-cuotas-1x2 {
  flex-basis: 100%;
  margin: 10px 0 0;
}
/* Legal integrada: texto sutil sobre el verde. */
.evento .partido-cuotas-1x2__legal {
  color: rgba(21, 5, 66, 0.55);
  margin-top: 4px;
  font-size: 0.64rem;
}
/* (Las reglas obsoletas de .partido-cuotas-1x2__cell / .partido-cuotas-matrix
 *  se han limpiado. El widget activo es .partido-cuotas-1x2__pill definido
 *  arriba.) */
/* ========================================================================= */

/* =========================================================================
 * (OLD) Widget "Cuotas" tipo lista de picks — conservado por compatibilidad.
 * Estilo Sofascore con paleta corporativa.
 * ========================================================================= */
.partido-cuotas {
  margin: 1.5em 0 2em;
}
.partido-cuotas h2 {
  margin: 0 0 0.4em;
  font-size: 1.3rem;
  font-weight: 700;
}
.partido-cuotas__subtitle {
  font-size: 0.88rem;
  color: #4b5563;
  margin: 0 0 0.9em;
  line-height: 1.4;
}

.partido-cuotas__card {
  background: var(--color-primary, #150542);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(21, 5, 66, 0.15), 0 1px 3px rgba(21, 5, 66, 0.08);
}

.partido-cuotas__row {
  display: grid;
  grid-template-columns: 150px 1fr 90px 130px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff !important;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.12s ease;
}
.partido-cuotas__row:last-child { border-bottom: none; }
.partido-cuotas__row:hover {
  background: rgba(1, 239, 193, 0.06);
  text-decoration: none !important;
  color: #fff !important;
}
.partido-cuotas__row:hover .partido-cuotas__cta .cta-btn {
  background: var(--color-accent-orange, #FF6900);
  transform: translateX(2px);
}

.partido-cuotas__casa {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.partido-cuotas__casa img {
  max-width: 130px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  padding: 4px 10px;
  border-radius: 6px;
}
.partido-cuotas__casa-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

.partido-cuotas__pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
}
.partido-cuotas__pick .mercado {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent, #01efc1);
  font-weight: 700;
}
.partido-cuotas__pick .pick {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partido-cuotas__cuota {
  display: flex;
  justify-content: center;
}
.partido-cuotas__cuota .cuota-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 7px 14px;
  background: rgba(1, 239, 193, 0.15);
  border: 1px solid rgba(1, 239, 193, 0.35);
  color: var(--color-accent, #01efc1);
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.partido-cuotas__cta {
  display: flex;
  justify-content: flex-end;
}
.partido-cuotas__cta .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 0.15s ease, transform 0.12s ease;
}
.partido-cuotas__cta .cta-btn i {
  font-size: 0.75rem;
}

.partido-cuotas__legal {
  margin: 0.7em 2px 0;
  font-size: 0.72rem;
  color: #9ca3af;
  font-style: italic;
}

/* Responsive */
@media (max-width: 720px) {
  .partido-cuotas__row {
    grid-template-columns: 90px 1fr auto;
    grid-template-areas:
      "casa pick cuota"
      "cta  cta  cta";
    gap: 8px 10px;
    padding: 10px 12px;
  }
  .partido-cuotas__casa { grid-area: casa; }
  .partido-cuotas__pick { grid-area: pick; }
  .partido-cuotas__cuota { grid-area: cuota; }
  .partido-cuotas__cta {
    grid-area: cta;
    margin-top: 2px;
  }
  .partido-cuotas__cta .cta-btn {
    width: 100%;
    justify-content: center;
    background: var(--color-accent-orange, #FF6900);
    padding: 8px 14px;
  }
  .partido-cuotas__casa img {
    max-width: 80px;
    max-height: 30px;
  }
  .partido-cuotas__pick .pick { font-size: 0.88rem; }
  .partido-cuotas__pick .mercado { font-size: 0.62rem; }
  .partido-cuotas__cuota .cuota-value {
    min-width: 52px;
    padding: 5px 10px;
    font-size: 0.95rem;
  }
}

/* =========================================================================
 * Link del equipo en el header del partido — logo + nombre clicables
 * hacia /equipos/{deporte}/{nombre}. Hover sutil para no romper la caja
 * verde accent.
 * ========================================================================= */
.equipo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.equipo-link:hover,
.equipo-link:focus {
  transform: translateY(-2px);
  text-decoration: none !important;
  color: inherit !important;
}
.equipo-link:hover img {
  box-shadow: 0 0 0 3px rgba(21, 5, 66, 0.15), 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
.equipo-link:hover span {
  text-decoration: underline;
  text-decoration-color: var(--color-primary, #150542);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* =========================================================================
 * Datos del evento — columna central (competición / fecha / CTA).
 * ========================================================================= */
.datos-evento__competicion {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #150542);
  text-align: center;
  margin-bottom: 4px;
  opacity: 0.85;
}

.datos-evento__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin-top: 12px;
  padding: 10px 40px;
  background: var(--color-accent-orange, #FF6900);
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 4px 14px rgba(255, 105, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-width: 220px;
}
.datos-evento__cta:hover {
  transform: translateY(-1px);
  background: #e85d00;
  box-shadow: 0 6px 18px rgba(255, 105, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #fff !important;
  text-decoration: none !important;
}
.datos-evento__cta-label {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.datos-evento__cta-cuota {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.datos-evento__cta-casa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.95;
}
.datos-evento__cta-casa img {
  height: 16px;
  max-width: 72px;
  object-fit: contain;
  background: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}
.datos-evento__cta-mercado {
  opacity: 0.85;
}

/* =========================================================================
 * Sports Data widgets — scorers + próximos HEREDAN las clases
 * `.partido-clasificacion__scroll/__table` (ver bloque más arriba) para
 * tener EXACTAMENTE el mismo look que la tabla de clasificación.
 * Aquí solo añadimos OVERRIDES específicos de cada widget.
 * ========================================================================= */

/* Títulos de las secciones */
.partido-scorers h2 {
  margin: 0 0 0.8em;
  font-size: 1.3rem;
  font-weight: 700;
}
.partido-proximos-block h3 {
  margin: 0 0 0.6em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary, #150542);
}

/* Scorers: overrides de columnas — OJO, solo se aplican al tbody, para no
 * pisar el color blanco del header corporativo (evita "texto invisible"). */
.partido-scorers .partido-clasificacion__table tbody td.col-jugador {
  text-align: left;
  font-weight: 600;
  color: var(--color-primary, #150542);
}
.partido-scorers .partido-clasificacion__table tbody td.col-team {
  text-align: left;
  color: #4b5563;
  font-size: 0.85rem;
  white-space: nowrap;
  padding-left: 8px;
}
/* Header: texto blanco alineado igual que las celdas. */
.partido-scorers .partido-clasificacion__table thead th.col-jugador,
.partido-scorers .partido-clasificacion__table thead th.col-team {
  color: #fff;
  text-align: left;
}

/* Próximos: overrides de columnas scoped a tbody. */
.partido-proximos-block .partido-clasificacion__table tbody td.col-fecha {
  font-weight: 700;
  color: var(--color-primary, #150542);
  white-space: nowrap;
  width: 110px;
}
.partido-proximos-block .partido-clasificacion__table tbody td.col-hora {
  color: #6b7280;
  width: 70px;
  font-variant-numeric: tabular-nums;
}
.partido-proximos-block .partido-clasificacion__table tbody td.col-rival {
  text-align: left;
  color: #1f2937;
}
.partido-proximos-block .partido-clasificacion__table tbody td.col-rival .side {
  display: inline-block;
  min-width: 22px;
  color: #9ca3af;
  font-weight: 600;
  margin-right: 4px;
}
.partido-proximos-block .partido-clasificacion__table tbody td.col-rival .rival-name {
  font-weight: 700;
  color: var(--color-primary, #150542);
}
.partido-proximos-block .partido-clasificacion__table tbody td.col-comp {
  text-align: left;
  color: #6b7280;
  font-size: 0.78rem;
}
/* Header: texto blanco alineado. */
.partido-proximos-block .partido-clasificacion__table thead th.col-fecha,
.partido-proximos-block .partido-clasificacion__table thead th.col-hora {
  color: #fff;
}
.partido-proximos-block .partido-clasificacion__table thead th.col-rival,
.partido-proximos-block .partido-clasificacion__table thead th.col-comp {
  color: #fff;
  text-align: left;
}

/* Dos columnas de próximos en ficha de partido */
.partido-proximos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 2em 0;
}
@media (max-width: 720px) {
  .partido-proximos { grid-template-columns: 1fr; }
}

/* H2H — reutiliza partido-clasificacion__scroll/__table y añade overrides
 * específicos. Local y visitante en columnas separadas con ganador en
 * negrita. Marcador con tinte según resultado. */
.partido-h2h-block h2 {
  margin: 0 0 0.8em;
  font-size: 1.3rem;
  font-weight: 700;
}

/* Headers: texto blanco. */
.partido-h2h-block .partido-clasificacion__table thead th.col-fecha,
.partido-h2h-block .partido-clasificacion__table thead th.col-home,
.partido-h2h-block .partido-clasificacion__table thead th.col-away,
.partido-h2h-block .partido-clasificacion__table thead th.col-comp {
  color: #fff;
}
.partido-h2h-block .partido-clasificacion__table thead th.col-home,
.partido-h2h-block .partido-clasificacion__table thead th.col-away {
  text-align: center;
}
.partido-h2h-block .partido-clasificacion__table thead th.col-comp {
  text-align: left;
}

/* Celdas del body */
.partido-h2h-block .partido-clasificacion__table tbody td.col-fecha {
  font-weight: 700;
  color: var(--color-primary, #150542);
  white-space: nowrap;
  width: 110px;
}
.partido-h2h-block .partido-clasificacion__table tbody td.col-home,
.partido-h2h-block .partido-clasificacion__table tbody td.col-away {
  color: #4b5563;
  font-weight: 500;
  white-space: nowrap;
}
.partido-h2h-block .partido-clasificacion__table tbody td.col-home {
  text-align: right;
  padding-right: 10px;
}
.partido-h2h-block .partido-clasificacion__table tbody td.col-away {
  text-align: left;
  padding-left: 10px;
}
/* Ganador: negrita + color corporativo */
.partido-h2h-block .partido-clasificacion__table tbody td.is-winner {
  font-weight: 800;
  color: var(--color-primary, #150542);
}

/* Columna marcador: badge centrado con tinte según ganador */
.partido-h2h-block .partido-clasificacion__table tbody td.col-score {
  width: 110px;
  padding: 6px;
}
.partido-h2h-block .partido-clasificacion__table .score {
  display: inline-block;
  min-width: 64px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--color-primary, #150542);
  background: rgba(21, 5, 66, 0.08);
  font-variant-numeric: tabular-nums;
}
.partido-h2h-block .partido-clasificacion__table .score--home {
  background: rgba(1, 239, 193, 0.22);
}
.partido-h2h-block .partido-clasificacion__table .score--away {
  background: rgba(255, 105, 0, 0.18);
}
.partido-h2h-block .partido-clasificacion__table .score--draw {
  background: rgba(21, 5, 66, 0.08);
}

.partido-h2h-block .partido-clasificacion__table tbody td.col-comp {
  text-align: left;
  color: #6b7280;
  font-size: 0.78rem;
}

.sportsdata-squad { }
.sportsdata-squad__coach, .sportsdata-squad__estadio { margin: .2rem 0; color: #444; }
.sportsdata-squad__block { margin: 1rem 0; }
.sportsdata-squad__block h4 { margin-bottom: .4rem; color: #0b2a52; font-size: 1rem; border-bottom: 2px solid #0b2a52; padding-bottom: .2rem; }
.sportsdata-squad__block ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .3rem .8rem; }
.sportsdata-squad__block li { padding: .25rem 0; font-size: .88rem; }
.sportsdata-squad__block .dorsal { display: inline-block; min-width: 28px; color: #0b2a52; font-weight: 700; }
.sportsdata-squad__block .nac { color: #888; font-size: .78rem; }

/* =========================================================================
 * PÁGINA DE EQUIPO — layout corporativo completo.
 *   · Header con logo + nombre + pills (coach, estadio)
 *   · Grid 2 cols: últimos resultados | próximos partidos
 *   · Plantilla oficial agrupada por posición con cards de jugador
 *   · Pronósticos históricos al final
 * ========================================================================= */

.equipo-page { margin: 0 auto; max-width: 1200px; padding: 1rem 0.5rem 2rem; }

/* Cabecera */
.equipo-page__header {
  background: linear-gradient(135deg, var(--color-primary, #150542) 0%, #1f0a5e 100%);
  border-radius: 14px;
  padding: 1.5rem 1.8rem;
  margin-bottom: 2rem;
  color: #fff;
  box-shadow: 0 8px 24px rgba(21, 5, 66, 0.18);
}
.equipo-page__header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.equipo-page__logo {
  width: 110px; height: 110px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
.equipo-page__heading { flex: 1; min-width: 220px; }
.equipo-page__title {
  margin: 0 0 0.3em;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.equipo-page__intro {
  margin: 0 0 0.9em;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.equipo-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.equipo-page__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.82rem;
  color: #fff;
}
.equipo-page__pill i { color: var(--color-accent, #01efc1); font-size: 0.78rem; }
.equipo-page__pill,
.equipo-page__pill * {
  color: #fff !important;
}
.equipo-page__pill strong { font-weight: 700; }
.equipo-page__pill i { color: var(--color-accent, #01efc1) !important; }

/* Fixtures — grid 2 columnas desktop, 1 en móvil */
.equipo-page__fixtures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 860px) {
  .equipo-page__fixtures { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* Últimos resultados — tabla corporativa con badge marcador tintado */
.equipo-ultimos-block h2,
.equipo-page__plantilla h2,
.equipo-page__pronosticos h2 {
  margin: 0 0 0.7em;
  font-size: 1.25rem;
  font-weight: 700;
}
.equipo-ultimos-block .partido-clasificacion__table thead th.col-fecha,
.equipo-ultimos-block .partido-clasificacion__table thead th.col-marcador,
.equipo-ultimos-block .partido-clasificacion__table thead th.col-res,
.equipo-ultimos-block .partido-clasificacion__table thead th.col-rival {
  color: #fff;
}
.equipo-ultimos-block .partido-clasificacion__table thead th.col-rival {
  text-align: left;
}
.equipo-ultimos-block .partido-clasificacion__table tbody td.col-fecha {
  font-weight: 700;
  color: var(--color-primary, #150542);
  white-space: nowrap;
}
.equipo-ultimos-block .partido-clasificacion__table tbody td.col-rival {
  text-align: left;
  color: #1f2937;
}
.equipo-ultimos-block .partido-clasificacion__table tbody td.col-rival .side {
  display: inline-block;
  min-width: 22px;
  color: #9ca3af;
  font-weight: 600;
  margin-right: 4px;
}
.equipo-ultimos-block .partido-clasificacion__table tbody td.col-rival .rival-name {
  font-weight: 700;
  color: var(--color-primary, #150542);
}
.equipo-ultimos-block .partido-clasificacion__table tbody td.col-marcador { padding: 6px; }
.equipo-ultimos-block .marcador-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  background: rgba(21, 5, 66, 0.08);
  color: var(--color-primary, #150542);
}
.equipo-ultimos-block .marcador--v { background: rgba(22, 163, 74, 0.18); color: #15803d; }
.equipo-ultimos-block .marcador--e { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.equipo-ultimos-block .marcador--d { background: rgba(220, 38, 38, 0.18); color: #b91c1c; }

.equipo-ultimos-block .result-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
}
.equipo-ultimos-block .result-pill--v { background: #16a34a; }
.equipo-ultimos-block .result-pill--e { background: #f59e0b; }
.equipo-ultimos-block .result-pill--d { background: #dc2626; }

.equipo-ultimos-block .partido-clasificacion__table tbody td.col-res {
  width: 50px;
}

/* FEATURED MATCH — card con 2 escudos + hora + CTA, clickable al partido */
.equipo-featured {
  margin-bottom: 2rem;
}
.equipo-featured h2 {
  margin: 0 0 0.8em;
  font-size: 1.25rem;
  font-weight: 700;
}
.equipo-featured__card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.4rem 1.5rem;
  background: linear-gradient(135deg, var(--color-accent, #01efc1) 0%, #00d4a8 100%);
  border-radius: 14px;
  color: var(--color-primary, #150542);
  text-decoration: none !important;
  box-shadow: 0 6px 22px rgba(1, 239, 193, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.equipo-featured__card:hover,
.equipo-featured__card:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(1, 239, 193, 0.4);
  text-decoration: none !important;
  color: var(--color-primary, #150542);
}
.equipo-featured__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.equipo-featured__side img {
  width: 72px; height: 72px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.equipo-featured__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary, #150542);
}
.equipo-featured__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 180px;
}
.equipo-featured__comp {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.equipo-featured__fecha {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.equipo-featured__marcador {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-primary, #150542);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Past y future usan el MISMO look turquesa — el título
 * "Último partido" vs "Próximo partido" ya diferencia el estado. */
.equipo-featured__cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary, #150542);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.equipo-featured__cta i { font-size: 0.72rem; }
.equipo-featured__card:hover .equipo-featured__cta {
  opacity: 0.85;
  transform: translateX(2px);
}

@media (max-width: 640px) {
  .equipo-featured__card {
    padding: 1rem 0.8rem;
    gap: 0.5rem;
  }
  .equipo-featured__side img { width: 56px; height: 56px; }
  .equipo-featured__name { font-size: 0.8rem; }
  .equipo-featured__fecha { font-size: 1rem; }
  .equipo-featured__cta { font-size: 0.72rem; padding: 5px 12px; }
}

/* PLANTILLA OFICIAL — tabla corporativa con badges de posición */
.equipo-plantilla-block {
  margin: 2rem 0;
}
.equipo-plantilla-block h2 {
  margin: 0 0 0.3em;
  font-size: 1.25rem;
  font-weight: 700;
}
.equipo-plantilla-block__subtitle {
  color: #6b7280;
  font-size: 0.88rem;
  margin: 0 0 1em;
  font-style: italic;
}

/* Headers blancos para esta tabla (igual pattern que el resto) */
.equipo-plantilla-block .partido-clasificacion__table thead th.col-posicion,
.equipo-plantilla-block .partido-clasificacion__table thead th.col-jugador,
.equipo-plantilla-block .partido-clasificacion__table thead th.col-nac {
  color: #fff;
}
.equipo-plantilla-block .partido-clasificacion__table thead th.col-jugador,
.equipo-plantilla-block .partido-clasificacion__table thead th.col-nac {
  text-align: left;
}

/* Celdas */
.equipo-plantilla-block .partido-clasificacion__table tbody td.col-jugador {
  text-align: left;
  font-weight: 700;
  color: var(--color-primary, #150542);
}
.equipo-plantilla-block .partido-clasificacion__table tbody td.col-nac {
  text-align: left;
  color: #6b7280;
  font-size: 0.85rem;
}
.equipo-plantilla-block .partido-clasificacion__table tbody td.col-pos {
  font-weight: 800;
  color: var(--color-primary, #150542);
}

/* Badge posición por color */
.pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: #6b7280;
}
.pos-badge--por { background: #f59e0b; }
.pos-badge--def { background: #3b82f6; }
.pos-badge--med { background: #8b5cf6; }
.pos-badge--del { background: #ef4444; }

/* Columna goles con tinte (como PTS en la clasificación) */
.equipo-plantilla-block .partido-clasificacion__table thead th.col-goles {
  background: #0c0334;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.equipo-plantilla-block .partido-clasificacion__table tbody td.col-goles {
  background: rgba(21, 5, 66, 0.06);
  border-left: 1px solid rgba(21, 5, 66, 0.08);
  font-weight: 800;
  color: var(--color-primary, #150542);
}
.equipo-plantilla-block .partido-clasificacion__table tbody td.col-ast,
.equipo-plantilla-block .partido-clasificacion__table tbody td.col-pen {
  color: #4b5563;
  font-variant-numeric: tabular-nums;
}

/* PLANTILLA OFICIAL — sección con cards de jugador por posición */
.equipo-page__plantilla {
  margin: 2rem 0;
}
.equipo-page__plantilla-subtitle {
  color: #6b7280;
  font-size: 0.88rem;
  margin: -0.5em 0 1.2em;
  font-style: italic;
}

.plantilla-grupo {
  margin-bottom: 1.8rem;
}
.plantilla-grupo__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0.8em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary, #150542);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-primary, #150542);
}
.plantilla-grupo__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 10px;
  background: var(--color-primary, #150542);
  color: #fff;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.plantilla-grupo__count {
  margin-left: auto;
  background: var(--color-accent, #01efc1);
  color: var(--color-primary, #150542);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Acento por posición */
.plantilla-grupo--por .plantilla-grupo__badge { background: #f59e0b; }
.plantilla-grupo--por .plantilla-grupo__title { border-bottom-color: #f59e0b; }
.plantilla-grupo--def .plantilla-grupo__badge { background: #3b82f6; }
.plantilla-grupo--def .plantilla-grupo__title { border-bottom-color: #3b82f6; }
.plantilla-grupo--med .plantilla-grupo__badge { background: #8b5cf6; }
.plantilla-grupo--med .plantilla-grupo__title { border-bottom-color: #8b5cf6; }
.plantilla-grupo--del .plantilla-grupo__badge { background: #ef4444; }
.plantilla-grupo--del .plantilla-grupo__title { border-bottom-color: #ef4444; }

.plantilla-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}

.jugador-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.jugador-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(21, 5, 66, 0.1);
  border-color: var(--color-accent, #01efc1);
}
.jugador-card__dorsal {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #150542);
  color: #fff;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.jugador-card__info { flex: 1; min-width: 0; }
.jugador-card__nombre {
  font-weight: 700;
  color: var(--color-primary, #150542);
  font-size: 0.94rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jugador-card__nac {
  color: #6b7280;
  font-size: 0.76rem;
  margin-top: 2px;
}

@media (max-width: 720px) {
  .equipo-page__header { padding: 1.2rem 1rem; }
  .equipo-page__logo { width: 80px; height: 80px; }
  .equipo-page__title { font-size: 1.5rem; }
  .plantilla-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
  .jugador-card { padding: 8px 10px; gap: 10px; }
  .jugador-card__dorsal { width: 38px; height: 38px; font-size: 0.95rem; }
}