/* ═══════════════════════════════════════════════════════════════════
   INVICTO.VIP — Marcadores v2 (versión afinada)
   Los dos "scopes" del SPA (#panel-resultados y #resContent) aceptan también .mp-static y .mp-lista:
   son los contenedores de las páginas estáticas que genera el prerender (generar_paginas_*.py),
   así SPA y páginas estáticas comparten UN solo CSS y no se desincronizan.
   Todo va acotado a :is(#panel-resultados, .mp-static) / :is(#resContent, .mp-lista) / .mr2 a propósito:
   - No toca .mrow-*, que siguen usando las páginas estáticas
     generadas en Python (/marcadores/<slug>/, partidos, comunidad).
   - Para volver atrás basta con quitar el <link> de este archivo.
   ═══════════════════════════════════════════════════════════════════ */

:is(#panel-resultados, .mp-static) {
  --mv-cian: #00f5d4;              /* fijo: el banner y las pestañas son navy en los dos temas */
  --mv-navy-1: #0e1c3a;
  --mv-navy-2: #091428;
}

/* ── Banner ───────────────────────────────────────────────────────── */
:is(#panel-resultados, .mp-static) .res-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 136px;
  padding: .9rem 1rem 2.5rem;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background:
    linear-gradient(90deg, #020617 0%, rgba(2,6,23,.94) 30%, rgba(2,6,23,.3) 66%, rgba(2,6,23,0) 100%),
    linear-gradient(0deg, rgba(2,6,23,.55), rgba(2,6,23,0) 45%),
    url('/img/hero-marcadores.webp') right center / auto 100% no-repeat,
    radial-gradient(110% 90% at 88% 0%, rgba(0,245,212,.22), transparent 62%),
    linear-gradient(180deg, #0a1a3a, #020617);
}
.res-hero-txt { position: relative; z-index: 1; max-width: 62%; }
.res-hero-tit {
  font-family: 'Teko', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 8.4vw, 2.4rem);
  line-height: .9;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0;
}
.res-hero-tit span { display: block; }
.res-hero-tit .l2 { color: var(--mv-cian); }
.res-hero-sub {
  margin: .4rem 0 0;
  font-size: .78rem;
  line-height: 1.35;
  color: rgba(226,232,240,.9);
  max-width: 26ch;
}
/* Solo para visitantes sin sesión (bienvenida.js pone body.es-invitado) */
.res-hero-info {
  display: none;
  margin-top: .55rem;
  align-items: center;
  gap: .35rem;
  padding: .24rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(0,245,212,.4);
  background: rgba(0,245,212,.08);
  color: var(--mv-cian);
  font: 600 .68rem 'Inter', sans-serif;
  cursor: pointer;
}
.res-hero-info:hover { background: rgba(0,245,212,.16); }
body.es-invitado .res-hero-info { display: inline-flex; }
@media (min-width: 640px) {
  /* Imagen panorámica: la foto del móvil extendida hacia la izquierda con el borde difuminado
     (el desvanecido está en el propio .webp, con transparencia), así en pantallas anchas
     se integra con el fondo en vez de verse como un bloque con el lateral cortado. */
  :is(#panel-resultados, .mp-static) .res-hero {
    min-height: 190px; padding-bottom: 3rem;
    background:
      linear-gradient(90deg, #020617 0%, rgba(2,6,23,.9) 28%, rgba(2,6,23,.25) 60%, rgba(2,6,23,0) 100%),
      linear-gradient(0deg, rgba(2,6,23,.55), rgba(2,6,23,0) 45%),
      url('/img/hero-marcadores-wide.webp') right center / auto 100% no-repeat,
      radial-gradient(110% 90% at 88% 0%, rgba(0,245,212,.16), transparent 62%),
      linear-gradient(180deg, #0a1a3a, #020617);
  }
  .res-hero-txt { max-width: 50%; }
  .res-hero-tit { font-size: 3rem; }
  .res-hero-sub { font-size: .9rem; }
}

/* ── Pestañas de competición: icono arriba, nombre debajo ─────────── */
:is(#panel-resultados, .mp-static) .res-comps {
  position: relative;
  z-index: 2;
  margin-top: -20px;
  padding: .4rem .45rem .35rem;
  gap: .05rem;
  background: linear-gradient(180deg, var(--mv-navy-1), var(--mv-navy-2));
  border: 1px solid rgba(0,245,212,.14);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 24px rgba(0,0,0,.3);
}
:is(#panel-resultados, .mp-static) .res-comp-btn {
  position: relative;
  flex: 0 0 auto;
  min-width: 58px;
  max-width: 116px;
  flex-direction: column;
  justify-content: flex-start;
  gap: .28rem;
  padding: .4rem .5rem .38rem;
  border: 1.5px solid transparent;
  border-radius: 13px;
  color: #cbd5e1;
  font-size: .62rem;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
/* Una sola línea siempre (así todas las pestañas tienen la misma altura); si un nombre sin
   versión corta es muy largo, se recorta con … y el nombre completo sale en el tooltip. */
:is(#panel-resultados, .mp-static) .res-comp-btn .rcb-n { display: block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
/* Centrado: con margen automático en los extremos (justify-content:center recortaría el
   principio de la barra en cuanto hubiera scroll; con margen auto, si no caben, se comporta como siempre). */
:is(#panel-resultados, .mp-static) .res-comps > .res-comp-btn:first-child { margin-left: auto; }
:is(#panel-resultados, .mp-static) .res-comps > .res-comp-btn:last-child  { margin-right: auto; }
:is(#panel-resultados, .mp-static) .res-comp-btn:hover { color: #fff; }
:is(#panel-resultados, .mp-static) .res-comp-btn.active {
  color: #fff;
  border-color: rgba(0,245,212,.85);
  background: rgba(0,245,212,.09);
  box-shadow: 0 0 14px rgba(0,245,212,.2);
}
:is(#panel-resultados, .mp-static) .res-comp-btn > i {
  height: 22px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: var(--mv-cian);
}
:is(#panel-resultados, .mp-static) .res-comp-btn .comp-tab-icon {
  width: 22px; height: 22px;
  margin: 0;
  padding: 2px;
  border-radius: 6px;
}
:is(#panel-resultados, .mp-static) .res-comp-btn .live-badge-dot.has-live {
  position: absolute; top: .4rem; right: .5rem;
  width: 7px; height: 7px;
}
:is(#panel-resultados, .mp-static) .res-comp-btn:not(.active):not(:first-child)::before {
  content: "";
  position: absolute; left: -2px; top: 22%; bottom: 22%;
  width: 1px;
  background: rgba(255,255,255,.09);
}
:is(#panel-resultados, .mp-static) .res-comp-btn.active + .res-comp-btn::before { display: none; }

/* ── Fila de herramientas: filtros + fecha ────────────────────────────
   En "Todos" solo quedan General y En directo (Finalizados/Próximos sobran:
   el calendario ya recorre hoy ±7 días), y el calendario entra en la misma
   fila. En las pestañas de competición siguen los 4 filtros en toda la fila.
   El calendario vive en #resFechaSlot, FUERA de la fila con scroll de los
   filtros, para que su desplegable no se recorte. */
:is(#panel-resultados, .mp-static) .res-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;                /* red de seguridad: con fuente de sistema grande el calendario baja a otra línea en vez de recortarse */
  gap: .5rem;
  max-width: 980px;               /* mismo ancho y márgenes que .res-content: los bordes coinciden con los de la tabla */
  margin: 0 auto;
  padding: .7rem 1rem .15rem;
}
:is(#panel-resultados, .mp-static) .res-toolbar .res-status { padding: 0; gap: .35rem; flex: 1 1 auto; min-width: 0; }
:is(#panel-resultados, .mp-static).modo-todos .res-toolbar .res-status { flex: 0 1 auto; }
:is(#panel-resultados, .mp-static).modo-todos .res-status-btn[data-estado="finished"],
:is(#panel-resultados, .mp-static).modo-todos .res-status-btn[data-estado="clasif"] { display: none; }
#resFechaSlot { flex: 0 0 auto; margin-left: auto; }
#resFechaSlot:empty { display: none; }

:is(#panel-resultados, .mp-static) .res-status-btn {
  flex: 1 0 auto;
  justify-content: center;
  height: 30px;
  padding: 0 .8rem;
  font-size: .7rem;
  border-radius: 999px;
  background: var(--card);
  white-space: nowrap;
}
:is(#panel-resultados, .mp-static) .res-status-btn.active {
  background: rgba(0,245,212,.12);
  border-color: var(--em);
  color: var(--em);
  box-shadow: 0 0 0 2px rgba(0,245,212,.08);
}
:is(#panel-resultados, .mp-static) .res-status-btn.live-btn.active {
  background: rgba(239,68,68,.11);
  border-color: rgba(239,68,68,.5);
  color: var(--red);
  box-shadow: 0 0 0 2px rgba(239,68,68,.07);
}

@media (min-width: 640px) {
  :is(#panel-resultados, .mp-static) .res-toolbar .res-status { justify-content: flex-start; }   /* landing.css los centra: aquí van al borde izquierdo de la tabla */
  :is(#panel-resultados, .mp-static) .res-status-btn { flex: 0 0 auto; padding: 0 1rem; font-size: .72rem; }
}

/* Barra de fecha compacta, misma altura (30 px) que las píldoras */
#resFechaSlot .todos-fecha-bar { margin: 0; gap: .3rem; }
#resFechaSlot .todos-fecha-flecha { width: 30px; height: 30px; font-size: .62rem; }
#resFechaSlot .todos-fecha-label {
  height: 30px;
  min-width: 0;
  padding: 0 .7rem;
  gap: .35rem;
  font-size: .74rem;
  border-radius: 999px;
}
#resFechaSlot .todos-fecha-label i { font-size: .7rem; }
#resFechaSlot .todos-fecha-label::after {
  content: "\f078";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .5rem;
  color: var(--muted);
}
@media (max-width: 400px) {
  /* Con una fecha larga ("Vie 02/10") todo cabe: sin icono de calendario y píldoras algo más justas */
  :is(#panel-resultados, .mp-static) .res-status-btn { padding: 0 .65rem; }
  #resFechaSlot .todos-fecha-flecha { width: 28px; }
  #resFechaSlot .todos-fecha-label i { display: none; }
}
@media (max-width: 380px) {
  :is(#panel-resultados, .mp-static) .res-toolbar { padding-left: .6rem; padding-right: .6rem; }   /* = .res-content */
}
@media (max-width: 340px) {
  :is(#panel-resultados, .mp-static) .res-toolbar { gap: .35rem; padding-left: .45rem; padding-right: .45rem; }
  :is(#panel-resultados, .mp-static) .res-toolbar .res-status { gap: .25rem; }
  :is(#panel-resultados, .mp-static) .res-status-btn { padding: 0 .45rem; font-size: .66rem; }
  #resFechaSlot .todos-fecha-label { padding: 0 .5rem; }
  #resFechaSlot .todos-fecha-label::after { display: none; }
}

/* ── Bloques (competición / jornada / grupo) ──────────────────────── */
:is(#resContent, .mp-lista) .grp-block {
  border-radius: 14px;
  margin-bottom: .7rem;
  background: var(--card);
}
:is(#resContent, .mp-lista) .grp-toggle,
:is(#resContent, .mp-lista) .grp-toggle:hover,
:is(#resContent, .mp-lista) .grp-toggle.open {
  min-height: 44px;
  padding: .35rem .8rem;
  gap: .55rem;
  background:
    radial-gradient(70% 160% at 100% 50%, rgba(0,245,212,.1), transparent 70%),
    linear-gradient(100deg, #0d1b3a 0%, #0a1630 60%, #10264a 100%);
  border-bottom: 1px solid rgba(0,245,212,.1);
}
:is(#resContent, .mp-lista) .grp-toggle:hover { filter: brightness(1.12); }
:is(#resContent, .mp-lista) .grp-label,
:is(#resContent, .mp-lista) .grp-toggle.open .grp-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Teko', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .4px;
  line-height: 1;
  color: #fff;
}
:is(#resContent, .mp-lista) .grp-label .comp-tab-icon {
  width: 26px; height: 26px;
  margin: 0;
  padding: 2px;
  border-radius: 7px;
}
:is(#resContent, .mp-lista) .grp-count {
  font-family: 'Inter', sans-serif;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #dbe4f0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(0,245,212,.3);
  padding: .18rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}
:is(#resContent, .mp-lista) .grp-arrow,
:is(#resContent, .mp-lista) .grp-toggle.open .grp-arrow { font-size: 0; margin: 0; width: 12px; transform: none; }
:is(#resContent, .mp-lista) .grp-arrow::before {
  content: "\f054";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .68rem;
  color: var(--mv-cian);
  display: inline-block;
  transition: transform .2s;
}
:is(#resContent, .mp-lista) .grp-toggle.open .grp-arrow::before { transform: rotate(90deg); }
:is(#resContent, .mp-lista) .grp-block > .grp-body { margin: 0; padding: 0; border-left: none; }

/* Bloques anidados (Fase de grupos → Grupo A): cabecera discreta */
:is(#resContent, .mp-lista) .grp-body .grp-block { border-radius: 10px; margin: .5rem .5rem .1rem; }
:is(#resContent, .mp-lista) .grp-body .grp-toggle,
:is(#resContent, .mp-lista) .grp-body .grp-toggle:hover,
:is(#resContent, .mp-lista) .grp-body .grp-toggle.open {
  min-height: 38px;
  background: var(--card2);
  border-bottom: 1px solid var(--border);
}
:is(#resContent, .mp-lista) .grp-body .grp-label,
:is(#resContent, .mp-lista) .grp-body .grp-toggle.open .grp-label {
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted2);
}
:is(#resContent, .mp-lista) .grp-body .grp-toggle.open .grp-label { color: var(--em); }
:is(#resContent, .mp-lista) .grp-body .grp-count { color: var(--muted2); background: var(--border2); border-color: var(--border); }
:is(#resContent, .mp-lista) .grp-body .grp-arrow::before { color: var(--muted); }

/* ── Fila de partido ──────────────────────────────────────────────── */
/* Aire de verdad: más alto, más separación entre columnas y una línea
   divisoria que no llega a los bordes (en vez de línea de lado a lado). */
.mr2 {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 48px minmax(0,1fr) 8px;
  align-items: center;
  column-gap: .55rem;
  padding: .9rem .9rem;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.mr2 + .mr2::before {
  content: "";
  position: absolute;
  top: 0; left: .9rem; right: .9rem;
  height: 1px;
  background: var(--border2);
}
.mr2:hover { background: var(--em-bg); }
.mr2:focus-visible { outline: 2px solid var(--em); outline-offset: -2px; }
.mr2.is-live { background: rgba(239,68,68,.045); box-shadow: inset 2px 0 0 var(--red); }

/* Hora: texto sencillo, sin cápsula (una caja menos = menos ruido) */
.mr2-hora { display: flex; flex-direction: column; align-items: center; gap: .12rem; text-align: center; }
.mr2-hora b {
  font: 600 .76rem 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--muted2);
  letter-spacing: .01em;
}
.mr2-hora small { font-size: .58rem; font-weight: 500; color: var(--muted); }

.mr2-team { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.mr2-away { flex-direction: row-reverse; }          /* escudo/bandera del visitante en el borde derecho */
.mr2-away .mname { text-align: right; }
.mr2 .mflag { font-size: 1.05rem; display: flex; align-items: center; flex-shrink: 0; }
.mr2 .mflag .fi { font-size: 1.05rem; border-radius: 2px; }
.mr2 .mescudo { width: 24px; height: 24px; }
.mr2 .mname {
  flex: 1;
  min-width: 0;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Centro de la fila: "vs", marcador, FIN/minuto y "Aplazado" comparten el MISMO diseño del "vs"
   (Inter, mismo tamaño y espaciado). Solo cambian color y peso para dar jerarquía.
   Para agrandar todo el bloque a la vez basta con tocar --mid-fs. */
.mr2 { --mid-fs: .66rem; --mid-ls: .06em; }
.mr2-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; text-align: center; }
.mr2-vs, .mr2-marc, .mr2-tag {
  font-family: 'Inter', sans-serif;
  font-size: var(--mid-fs);
  letter-spacing: var(--mid-ls);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mr2-vs { font-weight: 500; color: var(--muted); }
.mr2-marc { display: flex; align-items: center; justify-content: center; gap: .35em; font-weight: 700; color: var(--text); }
.mr2-marc > span { display: inline-block; min-width: .7em; text-align: center; }
.mr2-marc i { font-style: normal; font-weight: 500; opacity: .5; }
.mr2-marc small { font-size: .85em; font-weight: 500; color: var(--muted); margin-left: 1px; }
.mr2-tag { font-weight: 500; color: var(--muted); }
.mr2-tag-live { color: var(--red); font-weight: 600; }
.mr2-tag-apl { color: var(--gold); font-weight: 600; letter-spacing: .02em; }
.mr2-go { justify-self: end; font-size: .6rem; color: var(--muted); opacity: .75; transition: color .15s, transform .15s, opacity .15s; }
.mr2:hover .mr2-go { color: var(--em); opacity: 1; transform: translateX(2px); }

@media (max-width: 380px) {
  /* Menos margen lateral en la lista + columnas más justas + tipografía un punto menor:
     así "Montenegro" o "Herzegovina" caben enteros a 360 px. */
  :is(#panel-resultados, .mp-static) .res-content { padding-left: .6rem; padding-right: .6rem; }
  .mr2 { grid-template-columns: 34px minmax(0,1fr) 42px minmax(0,1fr) 8px; column-gap: .4rem; padding: .85rem .65rem; }
  .mr2 + .mr2::before { left: .65rem; right: .65rem; }
  .mr2 .mname { font-size: .72rem; }
  .mr2-team { gap: .4rem; }
  .mr2 .mflag, .mr2 .mflag .fi { font-size: 1rem; }
  .mr2 .mescudo { width: 20px; height: 20px; }
  .mr2-hora b { font-size: .72rem; }
  .mr2-tag-apl { letter-spacing: 0; }
}
@media (max-width: 340px) {
  :is(#panel-resultados, .mp-static) .res-content { padding-left: .45rem; padding-right: .45rem; }
  .mr2 { grid-template-columns: 32px minmax(0,1fr) 38px minmax(0,1fr) 6px; column-gap: .3rem; padding-left: .5rem; padding-right: .5rem; }
  .mr2 + .mr2::before { left: .5rem; right: .5rem; }
  .mr2 .mname { font-size: .68rem; }
  .mr2-team { gap: .32rem; }
  .mr2 .mflag, .mr2 .mflag .fi { font-size: .92rem; }
  .mr2 .mescudo { width: 18px; height: 18px; }
}
@media (min-width: 640px) {
  .mr2 { grid-template-columns: 56px minmax(0,1fr) 72px minmax(0,1fr) 14px; padding: .9rem 1.1rem; column-gap: .9rem; }
  .mr2 + .mr2::before { left: 1.1rem; right: 1.1rem; }
  .mr2 .mname { font-size: .88rem; }
  .mr2 .mflag, .mr2 .mflag .fi { font-size: 1.2rem; }
  .mr2 .mescudo { width: 26px; height: 26px; }
  .mr2-hora b { font-size: .82rem; }
  :is(#resContent, .mp-lista) .grp-toggle, :is(#resContent, .mp-lista) .grp-toggle:hover, :is(#resContent, .mp-lista) .grp-toggle.open { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .mr2, .mr2-go, :is(#resContent, .mp-lista) .grp-arrow::before { transition: none; }
}

/* ── Cabecera de bloque con fondo temático por competición ─────────────
   Capas (de arriba a abajo): halo claro difuminado tras el logo (solo en la
   vista Todos) · degradado navy que garantiza la lectura del texto · imagen
   temática a la derecha · color base de la competición.
   Para añadir una competición: soltar /img/comp-bg/<id>.webp y copiar una de
   las líneas de abajo con su id (id = el de api-football, el mismo que data-comp).
   Sin imagen no pasa nada: queda el color base. */
:is(#panel-resultados, .mp-static) {
  --cb-img: none; --cb-a: #0d1b3a; --cb-b: #10264a;
  --cb-halo-1: rgba(242,247,255,.9); --cb-halo-2: rgba(226,235,250,.34);   /* halo tras el logo */
  --cb-logo: 34px;
}

:is(.grp-block[data-comp="5"],   :is(#panel-resultados, .mp-static)[data-comp="5"])   { --cb-img: url(/img/comp-bg/5.webp);   --cb-a: #0b1d3f; --cb-b: #1a2f5c; }  /* Nations League */
:is(.grp-block[data-comp="5"], :is(#panel-resultados, .mp-static)[data-comp="5"]) { --cb-halo-1: rgba(84,118,196,.8); --cb-halo-2: rgba(60,92,172,.3); --cb-logo: 40px; }   /* su logo es la versión clara (texto blanco): halo azul para que no se pierda */
:is(.grp-block[data-comp="140"], :is(#panel-resultados, .mp-static)[data-comp="140"]) { --cb-img: url(/img/comp-bg/140.webp); --cb-a: #0b1d3f; --cb-b: #14315a; }  /* LaLiga */
:is(.grp-block[data-comp="2"],   :is(#panel-resultados, .mp-static)[data-comp="2"])   { --cb-img: url(/img/comp-bg/2.webp);   --cb-a: #061a45; --cb-b: #0b3a8c; }  /* Champions */
:is(.grp-block[data-comp="141"], :is(#panel-resultados, .mp-static)[data-comp="141"]) { --cb-img: url(/img/comp-bg/141.webp); --cb-a: #0b2140; --cb-b: #133866; }  /* LaLiga Hypermotion */
:is(.grp-block[data-comp="39"],  :is(#panel-resultados, .mp-static)[data-comp="39"])  { --cb-img: url(/img/comp-bg/39.webp); --cb-a: #240a37; --cb-b: #4a1670; }  /* Premier League */
:is(.grp-block[data-comp="3"],   :is(#panel-resultados, .mp-static)[data-comp="3"])   { --cb-img: url(/img/comp-bg/3.webp); --cb-a: #33170a; --cb-b: #6b330c; }  /* Europa League */
:is(.grp-block[data-comp="848"], :is(#panel-resultados, .mp-static)[data-comp="848"]) { --cb-a: #062a1c; --cb-b: #0c5a3a; }  /* Conference League */
:is(.grp-block[data-comp="135"], :is(#panel-resultados, .mp-static)[data-comp="135"]) { --cb-img: url(/img/comp-bg/135.webp); --cb-a: #082552; --cb-b: #0f4fa8; }  /* Serie A */
:is(.grp-block[data-comp="78"],  :is(#panel-resultados, .mp-static)[data-comp="78"])  { --cb-img: url(/img/comp-bg/78.webp); --cb-a: #330a0a; --cb-b: #7a1616; }  /* Bundesliga */
:is(.grp-block[data-comp="61"],  :is(#panel-resultados, .mp-static)[data-comp="61"])  { --cb-img: url(/img/comp-bg/61.webp); --cb-a: #0a1c47; --cb-b: #1a3a8a; }  /* Ligue 1 */

/* nivel superior: en "Todos" cuelga directo de :is(#resContent, .mp-lista); en las pestañas de competición, de un div intermedio */
:is(:is(#resContent, .mp-lista) > .grp-block, :is(#resContent, .mp-lista) > div > .grp-block) > .grp-toggle,
:is(:is(#resContent, .mp-lista) > .grp-block, :is(#resContent, .mp-lista) > div > .grp-block) > .grp-toggle:hover,
:is(:is(#resContent, .mp-lista) > .grp-block, :is(#resContent, .mp-lista) > div > .grp-block) > .grp-toggle.open {
  min-height: 48px;
  padding-top: .25rem; padding-bottom: .25rem;      /* misma altura con logo de 34 o de 40 px */
  background:
    linear-gradient(90deg, rgba(5,12,28,.94) 0%, rgba(5,12,28,.8) 30%, rgba(5,12,28,.3) 62%, rgba(5,12,28,.08) 100%),
    var(--cb-img) right center / cover no-repeat,
    linear-gradient(100deg, var(--cb-a), var(--cb-b));
}
:is(#resContent, .mp-lista) > .grp-block[data-comp] > .grp-toggle,
:is(#resContent, .mp-lista) > .grp-block[data-comp] > .grp-toggle:hover,
:is(#resContent, .mp-lista) > .grp-block[data-comp] > .grp-toggle.open {
  background:
    radial-gradient(54px 44px at 32px 50%, var(--cb-halo-1) 0%, var(--cb-halo-2) 52%, transparent 100%),
    linear-gradient(90deg, rgba(5,12,28,.94) 0%, rgba(5,12,28,.8) 30%, rgba(5,12,28,.3) 62%, rgba(5,12,28,.08) 100%),
    var(--cb-img) right center / cover no-repeat,
    linear-gradient(100deg, var(--cb-a), var(--cb-b));
}
:is(:is(#resContent, .mp-lista) > .grp-block, :is(#resContent, .mp-lista) > div > .grp-block) > .grp-toggle .grp-label { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
:is(:is(#resContent, .mp-lista) > .grp-block, :is(#resContent, .mp-lista) > div > .grp-block) > .grp-toggle .comp-tab-icon {
  width: var(--cb-logo); height: var(--cb-logo);
  padding: 0;
  background: transparent;
  border-radius: 4px;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
:is(:is(#resContent, .mp-lista) > .grp-block, :is(#resContent, .mp-lista) > div > .grp-block) > .grp-toggle .grp-count {
  background: rgba(5,12,28,.68);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-color: rgba(0,245,212,.4);
}

/* ═══ Clasificación (SPA) ══════════════════════════════════════════════
   El SPA la pinta como DOS tablas (equipo congelado + estadísticas con scroll horizontal) pensadas para móvil, con
   anchos fijos (140 + 192 px): en pantalla ancha se quedaba en 332 px y dejaba media tarjeta en blanco.
   Móvil: misma estructura pero con escudos mayores y la columna del equipo algo más ancha (las estadísticas siguen con
   scroll). ≥640 px: la tabla de equipos se estira, las estadísticas van pegadas a la derecha y todo llena la tarjeta.
   Ojo: solo dentro de #resContent y de las páginas estáticas (.mp-static); la clasificación del modal de partido no se toca. */
:is(#resContent, .mp-static) .clasif-frozen-wrap { margin-bottom: 0; }
:is(#resContent, .mp-static) .clasif-table-frozen { width: 164px; }
:is(#resContent, .mp-static) .clasif-table-frozen col:first-child { width: 24px !important; }
:is(#resContent, .mp-static) .clasif-table-frozen col:nth-child(2) { width: 140px !important; }
:is(#resContent, .mp-static) .clasif-table-scroll { width: 100%; min-width: 192px; }   /* llena el hueco; si no cabe, scroll horizontal como antes */
:is(#resContent, .mp-static) .clasif-table th {
  padding: .5rem .3rem; font-size: .58rem; letter-spacing: .08em; color: var(--muted);
  background: var(--card2); border-bottom: 1px solid var(--border);
}
:is(#resContent, .mp-static) .clasif-table td { height: 36px; }
:is(#resContent, .mp-static) .clasif-flag { display: inline-flex; align-items: center; }
:is(#resContent, .mp-static) .clasif-flag .mescudo { width: 24px; height: 24px; }
:is(#resContent, .mp-static) .clasif-flag .fi { font-size: 1.15rem; }
:is(#resContent, .mp-static) .clasif-nombre { color: var(--text); }
:is(#resContent, .mp-static) .clasif-pos { color: var(--muted2); font-variant-numeric: tabular-nums; }
:is(#resContent, .mp-static) .clasif-pts { font-size: 1.15rem; }
:is(#resContent, .mp-static) .clasif-leyenda { padding-left: .8rem; padding-right: .8rem; }
:is(#resContent, .mp-static) .ver-mas-btn { margin: .2rem .6rem .7rem; width: calc(100% - 1.2rem); }
/* Móviles estrechos: hay que ver SIEMPRE la columna PTS sin desplazar. Se compactan equipo y estadísticas. */
@media (max-width: 380px) {
  :is(#resContent, .mp-static) .clasif-table-frozen { width: 148px; }
  :is(#resContent, .mp-static) .clasif-table-frozen col:first-child { width: 22px !important; }
  :is(#resContent, .mp-static) .clasif-table-frozen col:nth-child(2) { width: 126px !important; }
  :is(#resContent, .mp-static) .clasif-table-scroll { min-width: 178px; }
  :is(#resContent, .mp-static) .clasif-table-scroll col:nth-child(-n+4) { width: 24px !important; }
  :is(#resContent, .mp-static) .clasif-table-scroll col:nth-child(5), :is(#resContent, .mp-static) .clasif-table-scroll col:nth-child(6) { width: 26px !important; }
  :is(#resContent, .mp-static) .clasif-table-scroll col:nth-child(7) { width: 30px !important; }
  :is(#resContent, .mp-static) .clasif-flag .mescudo { width: 22px; height: 22px; }
}
@media (max-width: 340px) {
  :is(#resContent, .mp-static) .clasif-table-frozen { width: 132px; }
  :is(#resContent, .mp-static) .clasif-table-frozen col:nth-child(2) { width: 110px !important; }
  :is(#resContent, .mp-static) .clasif-table-scroll { min-width: 164px; }
  :is(#resContent, .mp-static) .clasif-table-scroll col:nth-child(-n+4) { width: 22px !important; }
  :is(#resContent, .mp-static) .clasif-table-scroll col:nth-child(5), :is(#resContent, .mp-static) .clasif-table-scroll col:nth-child(6) { width: 24px !important; }
  :is(#resContent, .mp-static) .clasif-table-scroll col:nth-child(7) { width: 28px !important; }
}
@media (min-width: 640px) {
  :is(#resContent, .mp-static) .clasif-frozen-wrap { width: 100%; box-sizing: border-box; }
  :is(#resContent, .mp-static) .clasif-table-frozen { flex: 1 1 0; width: auto; min-width: 0; }
  :is(#resContent, .mp-static) .clasif-table-frozen col:first-child { width: 34px !important; }
  :is(#resContent, .mp-static) .clasif-table-frozen col:nth-child(2) { width: auto !important; }
  :is(#resContent, .mp-static) .clasif-scroll { flex: 0 0 auto; overflow: visible; }
  :is(#resContent, .mp-static) .clasif-table-scroll { width: 350px; }
  :is(#resContent, .mp-static) .clasif-table-scroll col { width: 50px !important; }
  :is(#resContent, .mp-static) .clasif-table th { padding: .6rem .4rem; font-size: .62rem; }
  :is(#resContent, .mp-static) .clasif-table td { height: 42px; padding: 0 .5rem; }
  :is(#resContent, .mp-static) .clasif-table { font-size: .86rem; }
  :is(#resContent, .mp-static) .clasif-nombre { font-size: .88rem; }
  :is(#resContent, .mp-static) .clasif-pos { font-size: .78rem; }
  :is(#resContent, .mp-static) .clasif-goles { font-size: .8rem; }
  :is(#resContent, .mp-static) .clasif-pts { font-size: 1.3rem; }
  :is(#resContent, .mp-static) .clasif-flag .mescudo { width: 28px; height: 28px; }
  :is(#resContent, .mp-static) .clasif-flag .fi { font-size: 1.3rem; }
  :is(#resContent, .mp-static) .clasif-leyenda { padding-left: 1.1rem; padding-right: 1.1rem; }
}