/* ── Torneos (sección «Jugar») ──
   Hoja propia: solo la baja /torneos y las páginas del torneo, para no
   cargar el presupuesto de peso de la portada (ver CLAUDE.md). */

/* ── El héroe de la sección (tandas 235 y 297) ──
   Nació como panel navy con degradado, igual que los de la portada. En
   la 297 se queda en FRANJA: ocupaba 40 px de aire arriba y abajo más
   un párrafo centrado antes de enseñar un solo torneo, y a /torneos se
   viene a ver torneos. Ahora es título a la izquierda, acciones a la
   derecha, y lo que sobra se lo queda la barra del torneo en juego. */
.torneos-heroe {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 24px 0 24px;
}
.torneos-heroe-texto { min-width: 0; }
.torneos-heroe h1 {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.torneos-heroe p {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 520px;
  margin: 8px 0 0;
}
.torneos-heroe-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .torneos-heroe {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 0 16px;
  }
  .torneos-heroe-acciones { margin-left: 0; }
  /* Los dos botones a mitad y mitad: en un móvil estrecho, si no, el
     segundo cae solo a una línea y queda huérfano. */
  .torneos-heroe-acciones > * { flex: 1; text-align: center; }
}

/* ── La barra del torneo que estás jugando AHORA (tanda 297) ──
   Lo primero que quiere quien entra un domingo por la tarde: cuánto
   queda de ronda y por dónde se vuelve a su mesa. Va en navy fijo (no
   con var(--navy)) porque es oscura en los dos temas, como el héroe de
   antes: las variables cambian con el tema y aquí solo romperían. */
.torneo-vivo {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(115deg, var(--navy-solid-dark), var(--navy-solid-light) 62%, #347fae);
  color: var(--blanco-fijo);
  border-radius: var(--radius-xl);
  padding: 16px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}
.torneo-vivo-texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.torneo-vivo-texto strong {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: 1.2;
}
.torneo-vivo-sub { font-size: var(--t-md); color: #bfdcec; }
.torneo-vivo-chapa {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--danger-solid);
  color: var(--blanco-fijo);
  border-radius: var(--radius-pill);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
}
.torneo-vivo-der {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.torneo-vivo-reloj { text-align: right; }
.torneo-vivo-rotulo {
  display: block;
  font-size: var(--t-2xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #a9cee3;
  font-weight: 600;
}
.torneo-vivo-reloj b {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
/* Sobre navy el botón se invierte, el mismo truco que tenía el héroe. */
.torneo-vivo .btn-primary {
  background: var(--blanco-fijo);
  color: var(--navy-solid);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.25);
}
.torneo-vivo .btn-primary:hover { background: #e1f0f4; }
@media (max-width: 640px) {
  .torneo-vivo { padding: 16px 16px; gap: 16px; }
  .torneo-vivo-der { margin-left: 0; width: 100%; justify-content: space-between; }
  .torneo-vivo-reloj { text-align: left; }
  .torneo-vivo-reloj b { font-size: var(--t-2xl); }
}

/* El puntito rojo que late en «En juego». Marca la diferencia entre un
   estado que es una etiqueta y uno que está pasando ahora mismo. */
.torneo-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: torneo-latido 2s var(--ease) infinite;
}
@keyframes torneo-latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .torneo-punto { animation: none; }
}

/* ── Crear torneo: el wizard por pasos (calcado de TrainerArena, sin
   el paso de pago). Tres pasos + resumen, con su indicador arriba. ── */
.torneos-form { margin: 0 auto 24px; max-width: 640px; }

.torneo-wizard-pasos {
  display: flex;
  gap: 8px;
  margin: 4px 0 16px;
}
.torneo-wizard-paso {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: var(--radius-md);
  background: rgba(127, 127, 127, 0.08);
  color: var(--text-dim);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
}
.torneo-wizard-paso .torneo-wizard-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(127, 127, 127, 0.16);
  font-size: var(--t-xs);
  flex-shrink: 0;
}
.torneo-wizard-paso.actual {
  background: var(--navy);
  color: var(--blanco-fijo);
}
.torneo-wizard-paso.actual .torneo-wizard-numero { background: rgba(255, 255, 255, 0.22); }
.torneo-wizard-paso.hecho {
  background: var(--success-bg);
  color: var(--success);
}
.torneo-wizard-paso.hecho .torneo-wizard-numero { background: rgba(13, 158, 110, 0.18); }
@media (max-width: 560px) {
  .torneo-wizard-paso span:last-child { display: none; } /* solo el número */
}

.torneo-wizard-titulo { margin: 0 0 2px; }
.torneo-wizard-pista { font-size: var(--t-sm); color: var(--text-mid); margin-bottom: 12px; }

.torneos-form-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.torneos-form-rejilla label,
.torneos-form-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-sm);
  font-weight: 600;
}
.torneos-form-campo { margin: 16px 0; }
.torneo-campo-pista { font-size: var(--t-xs); font-weight: 400; color: var(--text-dim); }

/* El aforo sin límite (tanda 228): la celda de Plazas es un div (una
   label no puede llevar dos controles dentro) con la casilla pegada
   debajo, que al marcarse apaga el número. */
.torneos-form-plazas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-sm);
  font-weight: 600;
}
.torneo-sin-limite {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--text-dim);
  cursor: pointer;
}
.torneos-form-plazas input[type='number']:disabled { opacity: 0.45; }

/* El cuadro de «cerrar inscripciones con las rondas a la vista» (tanda
   228): la sugerencia de la tabla oficial con los inscritos reales y el
   número retocable antes de cerrar. */
.torneo-cerrar-rondas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--t-sm);
}
.torneo-cerrar-rondas p { margin: 0; flex-basis: 100%; }
.torneo-cerrar-rondas label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--t-sm);
  font-weight: 600;
}
.torneo-cerrar-rondas input { width: 72px; }

/* El resumen del último paso, como la caja pálida del original. */
.torneo-wizard-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(127, 127, 127, 0.05);
}
.torneo-wizard-resumen dt { font-size: var(--t-2xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.torneo-wizard-resumen dd { margin: 2px 0 0; font-weight: 600; font-size: var(--t-md); }

.torneos-form-acciones {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.torneos-form-acciones .torneo-wizard-derecha { display: flex; gap: 8px; margin-left: auto; }

/* ── La lista ── */
/* La lista de torneos son TRES cosas apiladas: las pestañas de grupo, la
   rejilla de tarjetas y el «ver N más». La rejilla tiene su propia caja
   desde la tanda 316 — antes las tres eran hijas de la misma rejilla, y
   las pestañas la cruzaban entera con `grid-column: 1 / -1`. Eso es lo
   que impedía que `auto-fit` plegara las pistas vacías: una pista que
   cruza alguien NO está vacía, aunque lo que la cruce sea una barra de
   pestañas. */
.torneos-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* `auto-fill` con un mínimo y no dos columnas fijas (tanda 297): en una
   pantalla ancha entran tres y en una tableta dos, sin media queries. */
.torneos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}
/* Sin `align-items:start` a propósito: así las tarjetas de una misma
   fila miden lo mismo y sus pies quedan alineados. Con start, una a la
   que el pie se le va a dos líneas deja a su vecina flotando a media
   altura, y la rejilla se ve descuadrada. */
@media (max-width: 420px) {
  /* Por debajo de 420 px el mínimo de la rejilla desbordaría: una sola
     columna y que la tarjeta mande. */
  .torneos-rejilla { grid-template-columns: 1fr; }
}

/* ── Con pocos torneos, la rejilla deja de guardar sitio (tanda 316) ──
 *
 * `auto-fill` CREA las pistas que caben aunque estén vacías: con un
 * torneo en juego, la fila de 1.080 px tenía una tarjeta de 330 y 750 px
 * de nada al lado, y debajo media pantalla en blanco hasta el pie. No
 * era un fallo de datos —es lo normal un martes— sino que la rejilla no
 * sabe cuántas tarjetas le van a llegar.
 *
 * `auto-fit` es la misma rejilla con las pistas vacías PLEGADAS, así que
 * lo que hay se reparte la fila. Se pide solo con una o dos tarjetas: de
 * tres en adelante ya no sobra sitio, y con `auto-fit` a secas una lista
 * de cuatro en una pantalla ancha saldría con tarjetas gigantes.
 *
 * El selector dice «el último hijo está entre los dos primeros», que es
 * la forma de contar «hay una o dos» sin escribirlo dos veces. Aquí ya
 * vale `:nth-child` porque en esta caja solo hay tarjetas.
 */
/* Con DOS, `auto-fit` pliega la tercera pista y cada una se lleva media
   fila. */
.torneos-rejilla:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

/* Con UNA, estirarla a los 1.080 px de la fila la convierte en una
   banda de color con el texto arrinconado a la izquierda. Se le da un
   tope: ancha de verdad, pero todavía una tarjeta. */
.torneos-rejilla:has(> :only-child) {
  grid-template-columns: minmax(0, 620px);
}

/* ── La tarjeta de un torneo (tanda 297) ──
   Antes era una fila: fecha en 48 px, nombre, chapas a la derecha.
   Ahora es una tarjeta con portada, y el orden de lectura va de lo que
   más pesa a lo que menos: estado → qué es → cuándo → quién va → una
   sola acción. */
.torneo-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s var(--ease), border-color 0.15s, transform 0.15s var(--ease);
}
.torneo-tarjeta:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .torneo-tarjeta:hover { transform: none; }
}
/* El que está EN JUEGO lleva un filo navy: en una rejilla de seis
   tarjetas iguales, el que está pasando ahora tiene que cantar. */
.torneo-tarjeta-viva { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), var(--shadow-sm); }

/* El enlace cubre portada y cuerpo; el pie queda FUERA, porque ahí hay
   botones de verdad (duplicar, borrar) y un <button> dentro de un <a>
   no es HTML válido — hasta la 297 lo era y se apañaba a base de
   preventDefault. */
.torneo-tarjeta-enlace {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  flex: 1;
}
.torneo-tarjeta:hover .torneo-nombre { color: var(--navy); }

/* ── La portada ── */
.torneo-arte {
  position: relative;
  display: block;
  height: 112px;
  padding: 12px;
}
/* Seis degradados, elegidos por el slug en torneos.js: un torneo sin
   imagen se ve siempre igual en vez de cambiar de color en cada
   recarga. */
/* De la paleta de arte de style.css (tanda 315), que comparten con las
   tarjetas de guía. Dos cambian un pelo y va a propósito: el nº 1 tenía
   la parada en 120% y la paleta la tiene en 130% —el degradado llega un
   poco menos lejos—, y el nº 2 iba de morado a rosa y ahora usa el rosa
   de la paleta, que son los mismos dos colores en el otro sentido. */
.torneo-arte-1 { background: var(--arte-azul); }
.torneo-arte-2 { background: var(--arte-rosa); }
.torneo-arte-3 { background: var(--arte-verde); }
.torneo-arte-4 { background: var(--arte-ambar); }
.torneo-arte-5 { background: var(--arte-morado); }
.torneo-arte-6 { background: var(--arte-cian); }
/* La trama de puntos: sin ella, un degradado a pantalla completa se ve
   plano y barato. Va detrás de todo y no intercepta clics. */
.torneo-arte::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.2px, transparent 1.3px);
  background-size: 15px 15px;
  opacity: 0.5;
  pointer-events: none;
}
/* La imagen del torneo (tanda 239) pasa de un cuadradito de 48 px a ser
   la portada entera. Si no carga se esconde y queda el degradado. */
.torneo-arte-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.torneo-arte-chapas {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.torneo-arte-chapas-der { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* El bloque de fecha: día grande + mes, como el original, pero ahora
   montado sobre el filo de la portada — es lo que ata la imagen al
   texto de abajo. */
.torneo-fecha-bloque {
  position: absolute;
  left: 14px;
  bottom: -20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  line-height: 1.1;
}
.torneo-fecha-bloque strong { font-size: var(--t-xl); font-family: var(--font-display); }
.torneo-fecha-bloque span {
  font-size: var(--t-2xs);
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 1px;
}

/* ── El cuerpo ── */
.torneo-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 16px 16px;
  flex: 1;
}
.torneo-nombre {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.25;
  transition: color 0.15s;
}
.torneo-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.torneo-etiqueta {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--t-xs);
  color: var(--text-mid);
  font-weight: 500;
  white-space: nowrap;
}
.torneo-campeon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: var(--t-sm);
  color: var(--text-mid);
}
.torneo-campeon b { color: var(--text); }
.torneo-campeon svg { color: var(--rarity-gold); flex-shrink: 0; }

/* ── Quién va apuntado ── */
.torneo-caras { display: flex; flex-shrink: 0; }
.torneo-cara {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -8px;
  display: grid;
  place-items: center;
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--blanco-fijo);
  overflow: hidden;
  flex-shrink: 0;
}
.torneo-cara:first-child { margin-left: 0; }
.torneo-cara img { width: 100%; height: 100%; object-fit: cover; }
.torneo-cara-mas { background: var(--ice-dark); color: var(--navy); }

/* ── El pie: quién organiza y LA acción ── */
/* El pie va en UNA línea (`nowrap`) y lo que cede es el texto de quién
   organiza, no los botones. Con `wrap`, una tarjeta con «Borrar» partía
   el pie en dos, crecía, y como las de una misma fila miden lo mismo, a
   la vecina se le abría un hueco enorme entre las etiquetas y las
   plazas. Se ve como un fallo aunque sea la rejilla haciendo su trabajo. */
.torneo-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 55%, var(--white));
}
.torneo-pie-quien {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xs);
  color: var(--text-dim);
  /* `flex: 1 1 0` + `min-width: 0`: es lo único que puede encogerse del
     pie, así que «Organiza Fulanito de Tal» se corta antes de empujar a
     nadie. */
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
/* El nombre va en su propio span y no suelto dentro del flex: los
   puntos suspensivos de `text-overflow` no salen en un hijo anónimo de
   un contenedor flex, así que el texto se cortaba a hachazos. */
.torneo-pie-organiza {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* La chapa de «Inscrito» no se encoge: o cabe entera o no se entiende. */
.torneo-pie-quien .torneo-mio { flex-shrink: 0; }
.torneo-pie .torneo-duplicar,
.torneo-pie .torneo-borrar { flex-shrink: 0; }
.torneo-pie-accion { margin-left: auto; flex-shrink: 0; }
/* «Apuntarme» en verde: es la única acción de toda la sección que suma
   gente, y tiene que distinguirse de «ver» a un metro de distancia. */
.torneo-btn-apuntarse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--success);
  color: var(--blanco-fijo);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-md);
  padding: 12px 16px;
  text-decoration: none;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.18);
}
.torneo-btn-apuntarse:hover { background: color-mix(in srgb, var(--success) 88%, #000); color: var(--blanco-fijo); }
/* Los botones del pie, todos a la misma altura y sin el tamaño de
   formulario que traen por defecto. */
.torneo-pie .btn-primary,
.torneo-pie .btn-secondary,
.torneo-pie .torneo-duplicar {
  font-size: var(--t-md);
  padding: 12px 16px;
}

/* En un móvil el pie SÍ vuelve a partirse. El `nowrap` de arriba está
   para que dos tarjetas de la misma fila midan lo mismo, y en una sola
   columna no hay fila que cuadrar: lo que importa es que con las cuatro
   piezas del peor caso —«Retirado», Duplicar, Borrar y la acción— no se
   salga nada de la tarjeta. A 320 px se salía. */
@media (max-width: 640px) {
  .torneo-pie { flex-wrap: wrap; }
  .torneo-pie-quien { flex: 1 1 100%; }
}

/* Y el campo de elegirla en el wizard y el editor. */
.torneo-imagen-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.torneo-imagen-preview {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg);
  flex: none;
}
/* La vista previa del banner: mismo trato, forma apaisada. */
.torneo-banner-preview {
  width: 144px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg);
  flex: none;
}

/* El banner en la ficha (tanda 242): ancho completo, por encima de la
   cabecera. La ficha es un simple-card con padding de 16px: los
   márgenes negativos lo llevan hasta los bordes y las esquinas de
   arriba acompañan a las de la tarjeta. */
.torneo-banner {
  display: block;
  width: calc(100% + 32px);
  margin: -16px -16px 16px;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (max-width: 560px) {
  .torneo-banner { height: 120px; }
}

/* La chapa «Oficial» (tanda 246): dorada con su estrella, para los
   torneos organizados por el equipo de PokeDoc. Sale en la tarjeta del
   listado y en el panel del día del calendario. */
.torneo-oficial {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: var(--t-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.torneo-oficial svg { flex: none; }

/* ── El calendario (tandas 242-243) ──
   Doce meses seguidos desde el actual, la semana empezando en lunes y
   los días con torneo en navy (pulsables). Debajo, los torneos del día
   elegido. Las flechas pasan de mes con un deslizamiento en la
   dirección del viaje, y las tarjetas de mes entran escalonadas. */
.torneo-vista-conmutador { margin-bottom: 16px; }
.torneo-cal-cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.torneo-cal-rango { font-size: var(--t-xl); text-transform: capitalize; }
/* Seis meses por página, TRES por fila (tanda 245): en tableta caben
   dos y en móvil uno, sin apretujar. */
.torneo-cal-meses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 860px) {
  .torneo-cal-meses { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .torneo-cal-meses { grid-template-columns: 1fr; }
}
/* La entrada del pintado: recta la primera vez, y deslizando desde el
   lado del viaje al usar las flechas. */
@keyframes torneo-cal-aparece {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes torneo-cal-desde-der {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes torneo-cal-desde-izq {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}
.torneo-cal-meses.cal-entra .torneo-cal-mes { animation: torneo-cal-aparece 0.3s var(--ease) both; }
.torneo-cal-meses.cal-entra-der .torneo-cal-mes { animation: torneo-cal-desde-der 0.28s var(--ease) both; }
.torneo-cal-meses.cal-entra-izq .torneo-cal-mes { animation: torneo-cal-desde-izq 0.28s var(--ease) both; }
/* Escalonadas: cada mes espera 22 ms más que el anterior (--i lo pone
   torneos.js). */
.torneo-cal-meses .torneo-cal-mes { animation-delay: calc(var(--i, 0) * 22ms); }
.torneo-cal-mes {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: border-color 0.15s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.torneo-cal-mes:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
/* El mes en el que estamos, señalado. */
.torneo-cal-mes.actual { border-color: var(--navy); box-shadow: var(--shadow-ring); }
.torneo-cal-mes h5 {
  margin: 0 0 8px;
  text-transform: capitalize;
  font-size: var(--t-md);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.torneo-cal-anio { color: var(--text-dim); font-weight: 600; font-size: var(--t-xs); }
.torneo-cal-chapa-hoy {
  margin-left: auto;
  font-size: var(--t-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  background: var(--ice);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}
.torneo-cal-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.torneo-cal-diasemana { color: var(--text-dim); font-size: var(--t-2xs); font-weight: 600; }
.torneo-cal-dia {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-mid);
  font: inherit;
  font-size: var(--t-xs);
  padding: 0;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.torneo-cal-dia.hoy { box-shadow: inset 0 0 0 1px var(--border-strong); }
/* Dos colores según quién organiza (tanda 246): navy los OFICIALES del
   equipo, hielo los de la comunidad. */
button.torneo-cal-dia.con-torneo {
  background: var(--ice);
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
}
button.torneo-cal-dia.con-torneo.oficial {
  background: var(--navy);
  color: var(--blanco-fijo);
}
button.torneo-cal-dia.con-torneo:hover {
  background: var(--ice-dark);
  transform: scale(1.18);
}
button.torneo-cal-dia.con-torneo.oficial:hover { background: var(--navy-light); }

/* La leyenda de esos dos colores, pequeña y al lado de la cabecera. */
.torneo-cal-leyenda {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: -8px 0 12px;
  font-size: var(--t-xs);
  color: var(--text-mid);
}
.torneo-cal-leyenda > span { display: inline-flex; align-items: center; gap: 8px; }
.torneo-cal-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.torneo-cal-punto.oficial { background: var(--navy); }
.torneo-cal-punto.comunidad { background: var(--ice); border: 1px solid var(--ice-dark); }
button.torneo-cal-dia.elegido { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--navy); }
/* El panel del día entra con el mismo gesto que los meses. */
.torneo-cal-dia-panel { animation: torneo-cal-aparece 0.25s var(--ease) both; }
.torneo-cal-dia-titulo { margin: 16px 0 8px; }
/* Quien pidió menos movimiento, lo tiene: todo aparece en el sitio. */
@media (prefers-reduced-motion: reduce) {
  .torneo-cal-meses .torneo-cal-mes,
  .torneo-cal-dia-panel { animation: none; }
  .torneo-cal-mes,
  .torneo-cal-dia { transition: none; }
  button.torneo-cal-dia.con-torneo:hover { transform: none; }
}
.torneo-cal-torneo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
}
.torneo-cal-torneo:hover { border-color: var(--navy); }
.torneo-cal-torneo-nombre { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

/* La ocupación: caras + barra + cifra, todo en una línea al pie del
   cuerpo de la tarjeta. `margin-top:auto` la empuja abajo para que dos
   tarjetas vecinas con títulos de distinto largo la tengan a la misma
   altura. */
.torneo-ocupacion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  font-size: var(--t-xs);
  color: var(--text-dim);
}
.torneo-ocupacion-barra {
  flex: 1;
  min-width: 30px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ice);
  overflow: hidden;
}
.torneo-ocupacion-relleno {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--navy);
  transition: width 0.3s var(--ease);
}
/* Naranja a partir del 80%: es lo que convierte «12/32» en «corre, que
   se llena». */
.torneo-ocupacion-barra.apurada .torneo-ocupacion-relleno { background: var(--warning); }
.torneo-ocupacion-cifra { font-weight: 600; color: var(--text-mid); white-space: nowrap; }
:root[data-theme='dark'] .torneo-ocupacion-barra { background: var(--ice-dark); }

/* ── Las chapas, cuando van SOBRE la portada (tanda 297) ──
   Las de siempre (estado, oficial, privado) se pintan con fondos casi
   transparentes: encima de un degradado de color se volvían ilegibles.
   Aquí, y solo aquí, pasan a fondos sólidos. En la ficha y en el
   calendario siguen exactamente igual que antes. */
.torneo-arte .torneo-estado,
.torneo-arte .torneo-oficial,
.torneo-arte .torneo-privado {
  background: var(--white);
  box-shadow: var(--shadow-xs);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.torneo-arte .torneo-estado-abierto { color: var(--success); }
.torneo-arte .torneo-estado-cerrado { color: var(--warning); }
.torneo-arte .torneo-estado-fin,
.torneo-arte .torneo-estado-borrador { color: var(--text-mid); }
.torneo-arte .torneo-oficial { color: #a06008; }
:root[data-theme='dark'] .torneo-arte .torneo-oficial { color: var(--warning); }
/* «En juego» es el único que se sale del blanco: es rojo sólido porque
   no es una etiqueta, es algo que está pasando ahora. */
.torneo-arte .torneo-estado-jugando {
  background: var(--danger-solid);
  color: var(--blanco-fijo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* «Borrar torneo» (tanda 222): NO es un botón más de la fila. Se pinta
   apagado y en rojo solo al pasar por encima o al pedir confirmación,
   para que se distinga del resto del ciclo del torneo sin gritar. */
.torneo-borrar {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-mid);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.torneo-borrar:hover,
.torneo-borrar[data-confirmar='1'] {
  /* Del token desde la tanda 311, igual que .tema-borrar: el mismo botón
     de borrar no puede ser de un rojo en el foro y de otro en torneos. */
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}
.torneo-borrar[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* En la tarjeta de la lista el botón va más pequeño, a juego con las
   chapas de al lado: ahí compite por el ancho con «Duplicar» y con el
   estado, y en un móvil no caben tres botones de tamaño normal. */
.torneo-borrar-fila {
  padding: 8px 12px;
  font-size: var(--t-xs);
}

/* «Ver N más» de los terminados: centrado y despegado de la última
   fila, para que se lea como el final de la lista y no como otra. */
.torneo-ver-mas {
  display: block;
  margin: 12px auto 0;
}

.torneo-estado {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.torneo-estado-borrador { background: rgba(127, 127, 127, 0.12); color: var(--text-dim); }
.torneo-estado-abierto { background: rgba(74, 158, 63, 0.14); color: #3d8434; }
.torneo-estado-cerrado { background: rgba(232, 160, 32, 0.16); color: #a8720d; }
.torneo-estado-jugando { background: rgba(30, 81, 117, 0.12); color: var(--navy); }
.torneo-estado-fin { background: rgba(127, 127, 127, 0.12); color: var(--text-dim); }
:root[data-theme='dark'] .torneo-estado-abierto { color: #7ec973; }
:root[data-theme='dark'] .torneo-estado-cerrado { color: #e8b558; }

/* ── La ficha de un torneo (/torneo) ── */
.torneo-volver {
  display: inline-block;
  margin-bottom: 12px;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
}
.torneo-volver:hover { color: var(--navy); }

#torneoContenido .simple-card { margin-bottom: 16px; }

/* ── La cabecera de la ficha (tanda 298) ──
   Era una tarjeta blanca con el nombre, cuatro cajitas grises del mismo
   tamaño y una barra. Con cuatro cajas iguales no destacaba ninguna, y
   el banner del torneo (tanda 242) era una franja suelta encima que no
   ataba con nada. Ahora el banner ES el fondo, y los datos son chapas.

   Colores FIJOS y no var(--navy): el panel es oscuro en los dos temas,
   igual que el héroe de la lista antes de la 297. */
.torneo-cabecera {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 16px 0 0;
  background: linear-gradient(120deg, var(--navy-solid-dark), var(--navy-solid) 55%, #3d8ab8);
  color: var(--blanco-fijo);
  box-shadow: var(--shadow-md);
}
/* La trama de puntos, como en las tarjetas de la lista: sin ella el
   degradado se ve plano. */
.torneo-cabecera::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.3px);
  background-size: 16px 16px;
  opacity: 0.55;
  pointer-events: none;
}
/* Con banner, el degradado pasa a ser el VELO que lo oscurece: sin él,
   un banner claro deja el texto blanco ilegible. */
.torneo-cabecera .torneo-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  z-index: 0;
}
.torneo-cabecera:has(.torneo-banner:not(.hidden))::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(13, 27, 42, 0.88), rgba(13, 27, 42, 0.62) 65%, rgba(13, 27, 42, 0.45));
  z-index: 1;
}
.torneo-cabecera-dentro {
  position: relative;
  z-index: 2;
  padding: 24px 24px 24px;
}
.torneo-cabecera h1 {
  margin: 12px 0 0;
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blanco-fijo);
}
.torneo-meta { margin: 8px 0 0; font-size: var(--t-md); color: #bfdcec; }
.torneo-cabecera .torneo-descripcion { color: #d6e8f2; margin-top: 12px; max-width: 70ch; }
.torneo-cabecera .torneo-descripcion a { color: var(--blanco-fijo); }

.torneo-ficha-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Sobre el panel, las chapas de estado van en blanco sólido: los fondos
   casi transparentes de siempre no se leen encima de un degradado (lo
   mismo que se hizo en las tarjetas de la lista). */
.torneo-cabecera .torneo-estado,
.torneo-cabecera .torneo-oficial {
  background: var(--blanco-fijo);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.torneo-cabecera .torneo-estado-abierto { color: var(--success); }
.torneo-cabecera .torneo-estado-cerrado { color: #a8720d; }
.torneo-cabecera .torneo-estado-fin,
.torneo-cabecera .torneo-estado-borrador { color: #52717f; }
.torneo-cabecera .torneo-oficial { color: #a06008; }
.torneo-cabecera .torneo-estado-jugando {
  background: var(--danger-solid);
  color: var(--blanco-fijo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Los datos del formato, en chapas de una línea. */
.torneo-formato {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.torneo-dato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: var(--t-sm);
  font-weight: 500;
}
.torneo-dato svg { flex-shrink: 0; opacity: 0.85; }

/* Compartir: discreto y al final de la cabecera — es una utilidad, no
   compite con el nombre del torneo. */
.torneo-compartir {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  color: var(--blanco-fijo);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.torneo-compartir:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: var(--blanco-fijo);
  color: var(--blanco-fijo);
}

@media (max-width: 640px) {
  .torneo-cabecera-dentro { padding: 16px; }
  .torneo-dato { font-size: var(--t-xs); padding: 8px 12px; }
}

/* ── La barra viva (tanda 298) ──
   Mientras se juega, lo único que importa —cuánto queda, contra quién y
   qué falta— va PEGADA arriba. Antes estaba a media pantalla de scroll,
   dentro de «Tu partida», entre cajas del mismo color. */
.torneo-viva {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin: -16px 0 16px;
  padding: 12px 16px;
}
/* El anillo: el mismo tiempo, pero dibujado. Se vacía según avanza la
   ronda, así que de un vistazo se sabe si queda mucho sin leer los
   números. `--vuelta` va de 1 a 0 y lo pone el tictac de arrancarReloj. */
.torneo-viva-anillo {
  --vuelta: 1;
  position: relative;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--navy) calc(var(--vuelta) * 360deg), var(--ice) 0);
}
.torneo-viva-anillo::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--white);
}
.torneo-viva-anillo b {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.torneo-viva-anillo.agotandose { background: conic-gradient(var(--danger) calc(var(--vuelta) * 360deg), var(--ice) 0); }
.torneo-viva-anillo.agotandose b { color: var(--danger); }
/* El único override de oscuro del azul que sobrevive a la tanda 311, y
   no es por el azul: es porque la PISTA del anillo cambia (--ice-dark en
   vez de --ice). Los otros 23 existían solo para aclarar --navy a mano y,
   desde que el token se aclara solo, lo único que aportaban era un
   segundo azul claro distinto del suyo por unos puntos. */
:root[data-theme='dark'] .torneo-viva-anillo { background: conic-gradient(var(--navy) calc(var(--vuelta) * 360deg), var(--ice-dark) 0); }

.torneo-viva-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.torneo-viva-rotulo {
  font-size: var(--t-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.torneo-viva-titular { font-family: var(--font-display); font-size: var(--t-xl); }
.torneo-viva-der {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
}
.torneo-viva-der:empty { display: none; }
/* Lo que FALTA, en ámbar; lo que esperas de otro, en gris. La
   diferencia importa: uno es un recado para ti y el otro no. */
.torneo-viva-pide,
.torneo-viva-espera {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--t-sm);
  font-weight: 600;
}
.torneo-viva-pide { background: var(--warning-bg); color: var(--warning); }
.torneo-viva-espera { background: var(--bg); color: var(--text-mid); }
.torneo-viva-boton { text-decoration: none; }
/* El reloj de texto de siempre sigue ahí para quien lea con lector de
   pantalla, pero en pantalla manda el anillo. */
.torneo-viva .torneo-reloj { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 640px) {
  .torneo-viva { margin-top: -16px; padding: 12px 16px; gap: 12px; }
  .torneo-viva-der { margin-left: 0; width: 100%; }
  .torneo-viva-der > * { flex: 1; justify-content: center; }
  .torneo-viva-titular { font-size: var(--t-lg); }
}

/* ── Las pestañas de la FICHA, en pastillas (tanda 298) ──
   Las de la lista son chips de FILTRO (tanda 297); estas son navegación
   entre las partes del torneo, así que van juntas en un grupo, como un
   conmutador. Cada una en su clase: la base sin tocar. */
.torneo-pestanas-pastillas {
  border-bottom: none;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px;
  margin: 0 0 16px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.torneo-pestanas-pastillas .torneo-pestana {
  border-bottom: none;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  margin-bottom: 0;
  white-space: nowrap;
}
.torneo-pestanas-pastillas .torneo-pestana.activa {
  background: var(--navy);
  color: var(--blanco-fijo);
}
:root[data-theme='dark'] .torneo-pestanas-pastillas .torneo-pestana.activa { color: var(--blanco-fijo); }

/* ── El tablero de «Tu partida» (tanda 298) ──
   Era una columna de párrafos —contexto, «vs rival», TCG Live, reloj,
   check-in, botones— todos del mismo peso. Ahora es un duelo: tú a un
   lado, tu rival al otro y el marcador en medio. */
.torneo-mesa-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.torneo-mesa-cab-t { font-family: var(--font-display); font-size: var(--t-lg); }
.torneo-mesa-cab-tcg { margin-left: auto; font-size: var(--t-xs); color: var(--text-dim); }

.torneo-duelo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 24px 0 16px;
}
/* `min-width: 0` y el corte de palabra no son adorno: un usuario de TCG
   Live como «NombreDeTCGLiveLargisimo_user-1» es una palabra sola, y sin
   esto empuja su columna y saca la página de la pantalla en un móvil
   (lo pilló test-torneos-15, que guarda justo ese fallo desde la tanda
   221). */
.torneo-duelo-jugador {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.torneo-duelo-jugador > * { max-width: 100%; }
.torneo-duelo-nombre,
.torneo-duelo-sub { overflow-wrap: anywhere; }
.torneo-duelo-cara {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-xl);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--blanco-fijo);
  margin-bottom: 8px;
}
.torneo-duelo-nombre { font-family: var(--font-display); font-size: var(--t-xl); }
.torneo-duelo-sub { font-size: var(--t-xs); color: var(--text-dim); }
.torneo-duelo-checkin {
  display: inline-flex;
  align-items: center;
  text-align: center;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--t-xs);
  font-weight: 600;
  margin-top: 8px;
  background: var(--warning-bg);
  color: var(--warning);
}
.torneo-duelo-checkin.lista { background: var(--success-bg); color: var(--success); }
.torneo-duelo-medio { text-align: center; }
.torneo-duelo-marcador { display: flex; align-items: center; justify-content: center; gap: 8px; }
.torneo-duelo-marcador b { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1; color: var(--text-dim); }
.torneo-duelo-marcador b.gana { color: var(--success); }
.torneo-duelo-marcador i { font-style: normal; color: var(--text-dim); font-size: var(--t-xl); }
.torneo-duelo-vs {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  color: var(--text-dim);
}
@media (max-width: 560px) {
  /* En un móvil el marcador sube y los dos jugadores se ponen al lado:
     apilados en tres filas, el duelo dejaba de leerse como un duelo. */
  .torneo-duelo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .torneo-duelo-medio { grid-column: 1 / -1; order: -1; }
  .torneo-duelo-cara { width: 48px; height: 48px; border-radius: 15px; font-size: var(--t-xl); }
  .torneo-duelo-nombre { font-size: var(--t-xl); }
  .torneo-mesa-cab-tcg { margin-left: 0; width: 100%; }
}

/* Deshacer una ronda es marcha atrás de verdad: el tinte rojo lo separa
   del paso normal del ciclo que tiene al lado. */
.torneo-deshacer { color: var(--danger); }
.torneo-deshacer:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

.torneo-plazas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.torneo-plazas-barra {
  flex: 1;
  max-width: 320px;
  height: 8px;
  border-radius: var(--radius-pill);
  /* Sobre el panel oscuro: el gris de antes no se veía. */
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.torneo-plazas-relleno {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--blanco-fijo);
  transition: width 0.3s;
}
.torneo-plazas-texto { font-size: var(--t-sm); color: #bfdcec; font-weight: 600; }

.torneo-admin-acciones { margin: 16px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.torneo-admin-acciones:empty { display: none; }
/* El selector de foro + «Anunciar en el foro» no cabían en una línea de
   móvil y empujaban la página entera hacia la derecha (scroll lateral).
   Envuelven, y el select se queda con el ancho que haya. */
.torneo-anuncio-foro {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.torneo-anuncio-foro select {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 100%;
}

/* Tu plaza */
.torneo-form-inscripcion {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.torneo-form-inscripcion label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-sm);
  font-weight: 600;
}
.torneo-form-inscripcion input { min-width: 220px; }

/* Tu decklist */
#decklistContenido textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-sm);
  margin: 8px 0;
}
.torneo-decklist-errores {
  margin: 0 0 12px;
  padding-left: 24px;
  color: var(--danger);
  font-size: var(--t-md);
}
.torneo-decklist-sellada {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: rgba(232, 160, 32, 0.16);
  color: #a8720d;
  font-size: var(--t-xs);
  font-weight: 700;
}
:root[data-theme='dark'] .torneo-decklist-sellada { color: #e8b558; }

/* Los inscritos */
.torneo-inscritos { display: flex; flex-direction: column; }
/* Las filas de inscritos son una REJILLA, no un flex «donde quepa»:
   antes cada fila colocaba su chapa a una altura distinta según lo
   largo que fuera el nombre (PINGU lo vio en el móvil), y una lista de
   gente se lee en columnas o no se lee. Cuatro columnas: quién, su
   usuario de TCG Live, las chapas y la acción del organizador. */
.torneo-inscrito {
  display: grid;
  /* Anchos FIJOS en las dos últimas, no «auto»: cada fila es su propia
     rejilla (no hay subgrid), así que con auto cada una medía sus
     columnas por su cuenta y las chapas quedaban a distinta altura
     según lo largo que fuera el nombre. */
  /* CINCO columnas y no cuatro (tanda 306): quien organiza ve DOS
     chapas —«sin decklist» y «sin confirmar»— más el botón de expulsar,
     o sea cinco celdas. Con cuatro columnas el botón se caía a una
     segunda fila y ahí, al ser la única celda, se estiraba a lo ancho
     de media lista. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 108px 108px 104px;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

/* En móvil no caben cuatro columnas: se apilan en dos filas, pero
   SIEMPRE en el mismo sitio — nombre y usuario arriba, chapas y acción
   abajo alineadas a la izquierda. */
@media (max-width: 560px) {
  .torneo-inscrito {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .torneo-inscrito > .torneo-inscrito-nombre {
    grid-column: 1 / -1;
  }
  .torneo-inscrito > .subtext {
    grid-column: 1 / -1;
  }
  /* Las chapas, SIEMPRE pegadas al margen izquierdo (da igual cuántas
     lleve la fila): así se leen en columna de arriba abajo. */
  .torneo-inscrito > span:not(.torneo-inscrito-nombre):not(.subtext) {
    grid-column: 1;
    justify-self: start;
  }
  .torneo-inscrito > .btn-secondary,
  .torneo-inscrito > button {
    grid-column: 2;
    justify-self: end;
  }
}
.torneo-inscrito:last-child { border-bottom: none; }
/* Los usuarios de TCG Live vienen como cada cual los escribe: una sola
   palabra de treinta letras cabe en un PC y empuja la página entera en
   un móvil de 320px (PINGU lo vio en «Tu plaza»). Que rompa por donde
   haga falta antes que sacar la barra de scroll lateral. */
.torneo-inscrito-nombre,
.torneo-inscrito .subtext,
.torneo-decklist-marca,
#miPlazaContenido {
  overflow-wrap: anywhere;
}
/* Flex desde la tanda 306: ahora la celda lleva la cara y el nombre, y
   tienen que ir en la misma línea y centrados entre sí. `min-width: 0`
   en el nombre para que un usuario de treinta letras se parta dentro de
   la celda en vez de estirarla. */
.torneo-inscrito-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-width: 140px;
}
.torneo-inscrito-nombre a { min-width: 0; }
.torneo-inscrito-nombre a { color: inherit; text-decoration: none; }
.torneo-inscrito-nombre a:hover { text-decoration: underline; }
.torneo-retirado { color: var(--text-dim); font-weight: 400; font-size: var(--t-sm); }
.torneo-decklist-marca {
  justify-self: end;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: rgba(127, 127, 127, 0.12);
  color: var(--text-dim);
}
.torneo-decklist-marca.entregada { background: rgba(74, 158, 63, 0.14); color: #3d8434; }
:root[data-theme='dark'] .torneo-decklist-marca.entregada { color: #7ec973; }

/* ── El ciclo de ronda ── */
.torneo-rondas-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.torneo-rondas-botones { display: flex; gap: 8px; flex-wrap: wrap; }

.torneo-pareo-manual {
  margin: 12px 0;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
.torneo-pareo-manual-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.torneo-mesas-titulo { margin: 12px 0 8px; font-size: var(--t-lg); }

/* ── Las chapas de estado y resultado (los «badges» del original) ── */
.torneo-chapa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--t-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.torneo-chapa-exito { background: var(--success-bg); color: var(--success); }
.torneo-chapa-aviso { background: var(--warning-bg); color: var(--warning); }
.torneo-chapa-neutra { background: rgba(127, 127, 127, 0.12); color: var(--text-dim); }
.torneo-chapa-marca { background: rgba(30, 81, 117, 0.12); color: var(--navy); }

/* ── Las mesas, en tabla como los pareos del original ── */
/* ── Las mesas, como ENFRENTAMIENTOS (tanda 298) ──
   Eran una tabla de cuatro columnas que en el móvil se convertía en
   tarjetas con `data-etiqueta`, porque sin las cabeceras no se sabía qué
   era cada celda. Ahora la forma lo dice sola: número, uno, resultado,
   otro — y no hace falta traducirla para el móvil. */
.torneo-mesas {
  display: flex;
  flex-direction: column;
  /* Con el ancho entero del panel, los dos jugadores de una mesa acaban
     en extremos opuestos de la pantalla y dejan de leerse como un
     enfrentamiento. */
  max-width: 860px;
}
.torneo-mesa {
  display: grid;
  grid-template-columns: 34px 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
}
.torneo-mesa:last-child { border-bottom: none; }
/* La tuya, marcada: en una ronda de ocho mesas iguales lo primero que
   busca cualquiera es la suya. */
.torneo-mesa.mia { background: linear-gradient(90deg, var(--ice), transparent 70%); border-radius: var(--radius-md); }
.torneo-mesa-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--text-mid);
}
.torneo-mesa.mia .torneo-mesa-num { background: var(--navy); border-color: var(--navy); color: var(--blanco-fijo); }
.torneo-mesa-lado { display: flex; align-items: center; gap: 8px; min-width: 0; }
.torneo-mesa-lado.der { flex-direction: row-reverse; text-align: right; }
.torneo-mesa-cara {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--blanco-fijo);
  font-size: var(--t-2xs);
  font-weight: 600;
}
.torneo-mesa-jugador { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El ganador en negrita: es lo primero que se busca en una mesa cerrada. */
.torneo-mesa-lado.gana .torneo-mesa-jugador { font-weight: 800; }
.torneo-mesa-jugador em { font-style: normal; color: var(--text-dim); font-weight: 400; }
.torneo-mesa-centro { text-align: center; }
.torneo-mesa-bye { color: var(--text-dim); }
.torneo-mesa-listo { color: var(--success); font-weight: 700; }
.torneo-mesa-resolver { grid-column: 2 / -1; }
.torneo-mesa-resolver select { font-size: var(--t-sm); max-width: 220px; }
.torneo-mesa .torneo-disputa-reportes { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .torneo-mesa { grid-template-columns: 30px 1fr auto; gap: 12px; padding: 12px 8px; }
  .torneo-mesa-lado.der { flex-direction: row; text-align: left; grid-column: 2; }
  .torneo-mesa-centro { grid-column: 3; grid-row: 1 / 3; }
}

/* ── La línea de tiempo del torneo (tanda 298) ──
   Un paso por ronda prevista, más el top cut. Antes solo se decía en una
   línea de texto por qué ronda iba («Ronda 2 de 3 suizas»), que contesta
   a la mitad de la pregunta: no dice cuánto queda ni qué se ha jugado. */
.torneo-linea {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.torneo-paso {
  flex: 1;
  min-width: 104px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 12px 12px;
  text-align: center;
}
.torneo-paso-r {
  display: block;
  font-size: var(--t-2xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.torneo-paso-e { display: block; font-family: var(--font-display); font-size: var(--t-md); margin-top: 4px; }
.torneo-paso.fin { background: var(--ice); border-color: transparent; }
.torneo-paso.fin .torneo-paso-e { color: var(--navy); }
.torneo-paso.lista { border-color: var(--border-strong); }
/* La que se está jugando, en navy macizo: es la única que importa ahora. */
.torneo-paso.viva { background: var(--navy); border-color: var(--navy); }
.torneo-paso.viva .torneo-paso-r { color: #a9cee3; }
.torneo-paso.viva .torneo-paso-e { color: var(--blanco-fijo); }
:root[data-theme='dark'] .torneo-paso.viva .torneo-paso-e { color: var(--blanco-fijo); }

/* ── El puesto en la clasificación (tanda 298) ──
   Oro, plata y bronce en los tres primeros, y tu fila marcada. En una
   tabla de dieciséis filas iguales lo primero que busca cualquiera es
   dónde está él y quién va ganando. */
.torneo-pos {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  color: var(--text-mid);
}
.torneo-pos-1 { background: var(--rarity-gold-bg); color: #7a5905; border-color: transparent; }
.torneo-pos-2 { background: var(--rarity-silver-bg); color: #54646f; border-color: transparent; }
.torneo-pos-3 { background: var(--rarity-bronze-bg); color: #8a4f24; border-color: transparent; }
.torneo-clasificacion-tabla tr.torneo-fila-yo { background: var(--ice); }
.torneo-clasificacion-tabla tr.torneo-fila-yo td:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }

/* El reloj protagonista de la pestaña Rondas se fue en la tanda 298: con
   la barra viva pegada arriba había tres relojes diciendo lo mismo. El
   que queda vive dentro del paso vivo de la línea de tiempo. */
.torneo-paso.viva .torneo-paso-e {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
}
.torneo-paso.viva .torneo-paso-e.agotandose { color: #ffc9c9; }

.torneo-cuenta-checkin {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 16px;
  border-radius: var(--radius-md);
  background: rgba(127, 127, 127, 0.08);
  font-size: var(--t-sm);
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}
.torneo-cuenta-checkin strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Tu partida ──
   Era una columna estrecha y centrada (el original de TrainerArena era
   mobile-first, max-w-md). Desde la tanda 298 es un TABLERO, y un
   tablero encerrado en 560 px deja medio panel en blanco a cada lado:
   ocupa el ancho de su tarjeta y el máximo solo lo pone el chat, que sí
   se lee mal a lo largo. */
#miPartidaExtra {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.torneo-cuenta-etiqueta { text-align: center; margin: 0; }
.torneo-partida-nota { text-align: center; margin: 12px 0 0; }
.torneo-boton-checkin { width: 100%; }
#miPartidaContenido .torneo-mesas-titulo { margin: 16px 0 8px; }

/* ── Torneos privados (tanda 292) ── */

.torneo-privado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ice);
  color: var(--navy);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: var(--t-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* El formulario del código va en la pantalla de «torneo no disponible»,
   que es una 404: se le pone caja propia para que no parezca parte del
   mensaje de error. */
.torneo-codigo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  margin: 24px auto;
  padding: 16px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.torneo-codigo label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
}

.torneo-codigo input {
  padding: 12px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  background: var(--bg);
  color: var(--text);
}

/* ── El mejor de tres, partida a partida (tanda 291) ── */

/* Una fila por partida. La clave del diseño es que la fila diga en qué
 * estado está SIN tener que leerla: cerrada se apaga, abierta enseña los
 * botones, y la que no se juega se queda en gris. */
/* Desde la tanda 298 son TRES CASILLAS en fila, no tres renglones: en un
   BO3 lo que se mira de reojo mientras se juega es cómo va la serie, y
   eso se lee mejor de izquierda a derecha. El color dice el estado sin
   tener que leer el texto. */
.torneo-bo3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.torneo-bo3-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.torneo-bo3-juego {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 12px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.torneo-bo3-juego.cerrada { border-color: transparent; }
.torneo-bo3-juego.ganada { background: var(--success-bg); }
.torneo-bo3-juego.ganada .torneo-bo3-cerrada { color: var(--success); }
.torneo-bo3-juego.perdida { background: rgba(214, 69, 69, 0.1); }
.torneo-bo3-juego.perdida .torneo-bo3-cerrada { color: var(--danger); }
.torneo-bo3-juego.tablas { background: var(--bg); }
/* La que toca marcar, con filo navy: entre tres casillas, hay que saber
   dónde va el siguiente clic sin pensarlo. */
.torneo-bo3-juego.activa { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 81, 117, 0.12); }

.torneo-bo3-n {
  font-size: var(--t-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-dim);
}
@media (max-width: 560px) {
  .torneo-bo3 { grid-template-columns: 1fr; }
  .torneo-bo3-juego { min-height: 0; }
}

/* Los botones de dentro de una fila no llevan el margen de arriba del
   bloque suelto, o la fila crecería de más. */
.torneo-bo3-juego .torneo-reportar {
  margin-top: 0;
  width: 100%;
  /* En columna, no en rejilla automática: dentro de una casilla de un
     tercio del ancho, «Victoria / Derrota / Tablas» en fila se parte en
     tres palabras ilegibles. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.torneo-bo3-cerrada {
  font-weight: 700;
}

.torneo-bo3-esperando {
  flex: 1;
  color: var(--text-mid);
  font-size: var(--t-md);
}

.torneo-bo3-nojuega {
  color: var(--text-dim);
  font-size: var(--t-md);
}

.torneo-bo3-quitar {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: var(--t-sm);
}

/* Aquí vivía un `flex-wrap: wrap` para que los tres botones bajaran de
   línea en un móvil. Con las casillas de la tanda 298 hace lo contrario
   de lo que se quería: en un flex de COLUMNA, `wrap` no baja nada —
   abre una segunda COLUMNA, y los botones salían disparados fuera de su
   casilla. Se va con la fila que lo necesitaba. */

.torneo-reportar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.torneo-boton-resultado {
  border: 2px solid var(--border-strong);
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  font-size: var(--t-md);
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.torneo-boton-resultado.victoria:hover { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.torneo-boton-resultado.derrota:hover { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.torneo-boton-resultado.empate:hover { border-color: var(--text-mid); background: rgba(127, 127, 127, 0.08); }

.torneo-clasificacion-tabla { overflow-x: auto; }
.torneo-clasificacion-tabla table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.torneo-clasificacion-tabla th,
.torneo-clasificacion-tabla td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.torneo-clasificacion-tabla th { font-size: var(--t-xs); text-transform: uppercase; color: var(--text-dim); }

.torneo-campeon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgba(232, 160, 32, 0.14);
  color: #a8720d;
  font-size: var(--t-lg);
}
:root[data-theme='dark'] .torneo-campeon { color: #e8b558; }

/* El chat de la mesa, a la vista (los de juez siguen en desplegable). */
.torneo-chat-abierto { margin: 16px 0 0; }
.torneo-chat-titulo {
  font-size: var(--t-md);
  font-weight: 600;
  margin: 0 0 8px;
}

/* El aviso de la ventana de check-in en «Tu partida». */
.torneo-checkin-aviso {
  text-align: center;
  font-size: var(--t-sm);
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--warning);
}
.torneo-checkin-aviso strong { font-variant-numeric: tabular-nums; }

/* ── Chats en desplegable (llamadas al juez) ── */
.torneo-chat-desplegable {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.torneo-chat-desplegable summary {
  padding: 8px 12px;
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
  list-style: revert;
}
.torneo-chat-cuerpo { padding: 0 12px 12px; }
.torneo-chat-abierto .torneo-chat-cuerpo { padding: 0; }

/* Los mensajes, en bocadillos: los tuyos a la derecha en navy, los del
   otro a la izquierda sobre tarjeta — como el chat del original. */
.torneo-chat-mensajes {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--t-md);
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(127, 127, 127, 0.05);
}
.torneo-chat-linea { display: flex; }
.torneo-chat-linea.mia { justify-content: flex-end; }
.torneo-burbuja {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  padding: 8px 12px 8px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.torneo-chat-linea.mia .torneo-burbuja {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--blanco-fijo);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 4px;
}
:root[data-theme='dark'] .torneo-chat-linea.mia .torneo-burbuja { background: var(--navy-dark); border-color: var(--navy-dark); }
.torneo-burbuja-quien { font-size: var(--t-2xs); font-weight: 700; opacity: 0.72; }
.torneo-burbuja-texto { white-space: pre-line; overflow-wrap: anywhere; }
.torneo-burbuja-hora { font-size: var(--t-2xs); opacity: 0.6; align-self: flex-end; margin-top: 1px; }
.torneo-chat-mensajes > .subtext { text-align: center; padding: 8px 0; }

/* El input del chat con su botón: `flex: 1` a secas no encoge por
   debajo de su contenido y el «Enviar» se salía de la pantalla en
   móviles estrechos. Con min-width: 0 el input cede lo que haga falta. */
.torneo-chat-envio {
  display: flex;
  gap: 8px;
  max-width: 100%;
}

.torneo-chat-envio input {
  flex: 1 1 auto;
  min-width: 0;
}

.torneo-chat-envio button {
  flex: 0 0 auto;
}

.torneo-llamar-juez { margin-top: 12px; }

/* ── Cola del juez y solicitudes ── */
.torneo-llamada {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.torneo-llamada:last-child { border-bottom: none; }
.torneo-llamada-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--t-md);
}
.torneo-disputa { font-size: var(--t-md); padding: 8px 0; }

.torneo-solicitud-juez {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-md);
}
.torneo-solicitud-juez:last-of-type { border-bottom: none; }

/* ── Pestañas (tanda 210): la ficha y la lista respiran ── */
.torneo-pestanas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.torneo-pestana {
  border: none;
  background: none;
  color: var(--text-mid);
  font-size: var(--t-lg);
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.torneo-pestana:hover { color: var(--navy); }
.torneo-pestana.activa {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.torneo-pestana-cuenta {
  display: inline-block;
  min-width: 20px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: rgba(127, 127, 127, 0.14);
  font-size: var(--t-xs);
  text-align: center;
}

/* ── Las pestañas de la LISTA, como chips (tanda 297) ──
   Las de la ficha se quedan como estaban —subrayado— porque allí son
   navegación de una cosa sola. Aquí son FILTROS de una rejilla, y un
   filtro se lee mejor como algo que se pulsa y se queda pulsado. */
.torneo-pestanas-chips {
  border-bottom: none;
  gap: 8px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.torneo-pestanas-chips .torneo-pestana {
  border: 1px solid var(--border-strong);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--text-mid);
  margin-bottom: 0;
}
.torneo-pestanas-chips .torneo-pestana:hover { border-color: var(--navy); color: var(--navy); }
.torneo-pestanas-chips .torneo-pestana.activa {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--blanco-fijo);
}
:root[data-theme='dark'] .torneo-pestanas-chips .torneo-pestana.activa { color: var(--blanco-fijo); }
.torneo-pestanas-chips .torneo-pestana.activa .torneo-pestana-cuenta {
  background: rgba(255, 255, 255, 0.22);
  color: var(--blanco-fijo);
}

.torneo-panel > .simple-card { margin-bottom: 16px; }

/* ── Decklists con cartas (tanda 210) ── */
.torneo-cartas-titulo {
  margin: 16px 0 8px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
}
.torneo-cartas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
}
.torneo-carta {
  position: relative;
  margin: 0;
  text-align: center;
}
.torneo-carta img {
  width: 100%;
  border-radius: 6px;
  display: block;
}
.torneo-carta-cuantas {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: rgba(20, 20, 25, 0.82);
  color: var(--blanco-fijo);
  font-size: var(--t-xs);
  font-weight: 700;
}
.torneo-carta figcaption {
  font-size: var(--t-xs);
  color: var(--text-dim);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La línea sin carta en el espejo: caja de texto, que no se pierda. */
.torneo-carta:not(:has(img)) {
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 24px 8px 8px;
  min-height: 90px;
}
.torneo-decklist-editor summary {
  cursor: pointer;
  font-size: var(--t-md);
  font-weight: 600;
  margin: 12px 0 8px;
}
.torneo-decklist-visual { margin-bottom: 8px; }
.torneo-mio {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(30, 81, 117, 0.12);
  color: var(--navy);
  white-space: nowrap;
}
.torneo-mio.retirado { background: rgba(127, 127, 127, 0.12); color: var(--text-dim); }

.torneo-reloj {
  margin-left: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.torneo-reloj-rojo { color: var(--danger); }

.torneo-rondas-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.torneo-ronda-chip {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-dim);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}
.torneo-ronda-chip.activa { border-color: var(--navy); color: var(--navy); }

.torneo-disputa-reportes {
  flex-basis: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.torneo-reporte-carta {
  font-size: var(--t-sm);
  padding: 4px 12px;
  border-left: 3px solid #e8a020;
  background: rgba(232, 160, 32, 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.torneo-marca-top {
  font-size: var(--t-2xs);
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: rgba(30, 81, 117, 0.12);
  color: var(--navy);
}
.torneo-nota-corte { margin-top: 8px; font-size: var(--t-xs); }

.torneo-bracket { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; }
.torneo-bracket-col { min-width: 170px; }
.torneo-bracket-col h5 {
  margin: 0 0 8px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
}
.torneo-bracket-mesa {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 8px;
  font-size: var(--t-md);
  background: var(--white);
}
.torneo-bracket-mesa p { margin: 0; padding: 8px 12px; }
.torneo-bracket-mesa p:first-child { border-bottom: 1px solid var(--border); }
.torneo-bracket-gana { font-weight: 700; }

.torneo-decklist-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-md);
}
.torneo-decklist-detalle { padding: 8px 0 12px; border-bottom: 1px solid var(--border); }
.torneo-decklist-cruda {
  max-height: 260px;
  overflow: auto;
  background: rgba(127, 127, 127, 0.07);
  border-radius: var(--radius-md);
  padding: 12px 12px;
  font-size: var(--t-sm);
  white-space: pre-wrap;
}
.torneo-decklists-faltan { font-size: var(--t-md); padding-top: 12px; color: #a8720d; }
:root[data-theme='dark'] .torneo-decklists-faltan { color: #e8b558; }

/* ── La caja «Formato» de la ficha (los datos con icono del original) ── */
.torneo-formato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.torneo-formato-dato {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: var(--radius-md);
  background: rgba(127, 127, 127, 0.06);
}
.torneo-formato-dato svg { flex-shrink: 0; color: var(--text-dim); margin-top: 2px; }
.torneo-formato-dato dt { font-size: var(--t-2xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.torneo-formato-dato dd { margin: 2px 0 0; font-weight: 600; font-size: var(--t-md); }

/* ── La barra resumen del organizador en Rondas ── */
.torneo-rondas-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  font-size: var(--t-md);
}

/* ── Estados vacíos con su icono, como el original ── */
.torneo-vacio {
  text-align: center;
  padding: 32px 12px;
  color: var(--text-dim);
  font-size: var(--t-md);
}
.torneo-vacio svg { display: block; margin: 0 auto 8px; opacity: 0.5; }

/* ── Tanda 215: contador del editor y cartas fuera de reglamento ── */
.torneo-decklist-cuenta {
  margin: 8px 0 0;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--text-mid);
}

.torneo-decklist-cuenta.torneo-cuenta-mal {
  color: var(--danger);
}

.torneo-decklist-reglamento {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--t-sm);
  font-weight: 600;
}

.torneo-carta-ilegal {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
  border-radius: 6px;
}

/* La letra de la marca, en la esquina de la carta señalada. */
.torneo-carta-marca {
  position: absolute;
  right: 4px;
  bottom: 22px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--danger-solid);
  color: var(--blanco-fijo);
  font-size: var(--t-2xs);
  font-weight: 800;
}

/* ── Tanda 217: el podio del final y las chapas del palmarés ── */
.torneo-podio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.torneo-podio-puesto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 130px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  text-align: center;
}

/* El campeón, primero y más grande — también en móvil, donde la fila se
   apila: el orden manda y el oro va arriba. */
.torneo-podio-1 {
  order: -1;
  padding: 16px 24px;
  border-color: #d9a406;
  background: linear-gradient(180deg, rgba(217, 164, 6, 0.14), transparent);
  font-size: 1.05em;
}

.torneo-podio-1 .torneo-podio-icono {
  color: #b8860b;
}

.torneo-podio-icono {
  color: var(--text-mid);
}

/* Las chapas del palmarés se mudaron a css/perfil.css en la tanda 262:
   solo salen en la ficha de una persona, y esa página NO carga este
   fichero — por eso «Torneos jugados: 1Podio» salía pegado y sin forma
   de chapa: las reglas estaban escritas pero no llegaban. */

/* ── Tanda 218: lista de espera, desempates y duplicar ── */
.torneo-lleno-aviso {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(242, 178, 62, 0.45);
  background: rgba(242, 178, 62, 0.12);
  font-size: var(--t-sm);
  font-weight: 600;
}

.torneo-cola-titulo {
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: var(--t-md);
}

/* Los de la cola, más apagados: todavía no tienen plaza. */
.torneo-inscrito-cola {
  opacity: 0.85;
}

.torneo-cola-puesto {
  display: inline-block;
  min-width: 20px;
  color: var(--text-mid);
  font-weight: 800;
}

.torneo-desempates {
  margin-top: 16px;
  font-size: var(--t-sm);
}

.torneo-desempates summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
}

.torneo-desempates ol {
  margin: 8px 0;
  padding-left: 24px;
}

.torneo-desempates li {
  margin-bottom: 4px;
}

/* El botón de duplicar vive dentro del enlace de la tarjeta. */
.torneo-duplicar {
  padding: 4px 12px;
  font-size: var(--t-xs);
}

/* ── Tanda 219: liga por jornadas, dos pasos y listas a la vista ── */

/* Las fechas de las jornadas en el wizard. */
.torneo-jornadas-campos {
  margin-top: 12px;
  padding: 12px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.torneo-jornadas-campos legend { font-weight: 700; font-size: var(--t-sm); padding: 0 8px; }
.torneo-jornada-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: var(--t-sm);
  font-weight: 600;
}
.torneo-jornada-campo input { flex: 1; }

/* El checkbox de listas visibles, con su letra pequeña al lado. */
.torneo-check-campo {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 16px;
  font-size: var(--t-sm);
  cursor: pointer;
}
.torneo-check-campo input { margin-top: 4px; }

/* El calendario de la liga en la ficha: una chapa por jornada. */
.torneo-jornadas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.torneo-jornada-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--t-xs);
  color: var(--text-mid);
}

/* Los dos pasos tras inscribirse: el aviso ámbar y la lista con marcas. */
.torneo-pasos {
  margin: 12px 0;
  padding: 12px 16px;
  border: 1px solid rgba(242, 178, 62, 0.45);
  background: rgba(242, 178, 62, 0.1);
  border-radius: var(--radius-md);
}
.torneo-pasos-aviso { margin: 0 0 8px; font-size: var(--t-sm); }
.torneo-pasos-aviso svg { vertical-align: -3px; }
.torneo-pasos-lista {
  margin: 0;
  padding-left: 4px;
  list-style: none;
  counter-reset: paso;
}
.torneo-pasos-lista li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--t-sm);
  counter-increment: paso;
}
.torneo-pasos-lista li .torneo-paso-marca::before { content: counter(paso) '.'; font-weight: 700; }
.torneo-pasos-lista li.hecho .torneo-paso-marca::before { content: ''; }
.torneo-pasos-lista li.hecho { color: var(--text-dim); }
.torneo-pasos-lista li.hecho .torneo-paso-marca svg { color: #3d8434; vertical-align: -3px; }
.torneo-boton-confirmar { margin-left: 8px; padding: 4px 12px; font-size: var(--t-sm); }
.torneo-pasos-listo {
  margin: 12px 0;
  padding: 8px 12px;
  border: 1px solid rgba(74, 158, 63, 0.4);
  background: rgba(74, 158, 63, 0.1);
  border-radius: var(--radius-md);
  font-size: var(--t-sm);
}
.torneo-pasos-listo svg { color: #3d8434; vertical-align: -3px; }

/* Exportar una decklist: los dos botones en fila, discretos. */
.torneo-exportar {
  display: inline-flex;
  gap: 8px;
  margin: 8px 0 12px;
}
.torneo-exportar button { padding: 4px 12px; font-size: var(--t-xs); }

/* La lista de un rival bajo la clasificación y sus botones «Ver lista». */
.torneo-ver-lista { padding: 4px 12px; font-size: var(--t-xs); white-space: nowrap; }
.torneo-clasif-chips { margin: 12px 0; }
.torneo-lista-rival {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px 16px;
}
.torneo-lista-rival .torneo-decklist-fila { border-bottom: 0; padding-bottom: 0; }

/* ── Tanda 220: jornadas editables y descripción con formato ── */

.torneo-anadir-jornada {
  margin-top: 12px;
  padding: 4px 12px;
  font-size: var(--t-sm);
}
.torneo-quitar-jornada {
  padding: 2px 12px;
  font-size: var(--t-xs);
  line-height: 1.4;
  flex: 0 0 auto;
}
.torneo-jornada-campo label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.torneo-jornada-campo label input { flex: 1; }

/* La caja del editor de la descripción, tanto en el wizard como en la
   ficha: compacta, que una descripción no es una guía. */
.torneo-desc-editor { margin-top: 8px; }
.torneo-desc-editor .rte-surface { min-height: 90px; max-height: 320px; overflow-y: auto; }

/* La descripción pintada en la ficha. Las de antes de la tanda eran
   texto plano: conservan sus saltos de línea. */
.torneo-descripcion { margin: 12px 0 4px; font-size: var(--t-md); }
.torneo-descripcion-plana { white-space: pre-line; }

/* ── Las mesas en un móvil ──
   La tanda 221 convertía la TABLA de mesas en tarjetas apiladas por CSS,
   con `data-etiqueta` delante de cada celda, porque sin las cabeceras no
   se sabía qué era cada dato. Desde la tanda 298 ya no hay tabla: la
   lista de enfrentamientos se lee igual en un móvil que en un PC, así
   que de todo aquello solo queda esto — el desplegable de resolver, que
   tiene opciones largas («No se presenta Fulanito») y sin esto se
   llevaba la pantalla por delante. */
@media (max-width: 620px) {
  .torneo-mesa-resolver select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ── La chapa de arquetipo (tanda 230) ──
   Los dos iconos que dicen a qué juega alguien sin abrir su lista, al
   estilo de Limitless. Se pinta en dos tiempos: primero el nombre (que
   ya sirve), y las cartas se meten delante cuando se resuelven — por eso
   el nombre se esconde SOLO cuando hay iconos de verdad. */
.torneo-arquetipo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  vertical-align: middle;
}
.torneo-arquetipo-nombre {
  font-size: var(--t-xs);
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
}
.torneo-arquetipo-con-iconos .torneo-arquetipo-nombre {
  /* Con iconos el nombre sobra a la vista. Se quita entero y no se
     esconde «para lectores de pantalla»: la chapa es role="img" con su
     aria-label, así que el nombre accesible ya lo pone el aria-label y
     el texto de dentro no lo lee nadie. Y el title sigue ahí para quien
     no reconozca las cartas. */
  display: none;
}
/* Dos formas, porque son dos cosas distintas (tanda 231, recorte en la
   235):

   · El MINISPRITE del Pokémon: cuadrado, sin fondo y sin bordes, como
     en Limitless. Es lo que sale casi siempre.
   · Para lo que no es un Pokémon (un objeto, «Martillos»), el RECORTE
     de la ilustración de su carta: la carta entera a este tamaño no se
     leía («sale la carta en pequeñito»), y su dibujo en un cuadrado
     pesa a la vista lo mismo que un sprite. El marco recorta y la
     imagen, más grande que él, se coloca con la ilustración centrada
     (en una carta moderna vive entre el 11% y el 46% de la altura). */
.torneo-arquetipo-icono.es-sprite {
  width: 32px;
  height: 32px;
  object-fit: contain;
  /* Los minisprites de Limitless (tanda 236) son píxel art pequeño y
     recortado al hueso: sin margen negativo (ya no traen aire) y en
     píxel nítido, que difuminado parecen borrosos. */
  image-rendering: pixelated;
}
.torneo-arquetipo-marco {
  position: relative;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg);
  flex: none;
}
.torneo-arquetipo-marco .torneo-arquetipo-icono.es-carta {
  position: absolute;
  width: 205%;
  height: auto;
  left: -52%;
  top: -30%;
}
/* ── El historial de un jugador desde la clasificación (237-238) ──
   Su nombre es un botón (subrayado en puntitos para que se vea que se
   puede pulsar) y se abre un MODAL centrado con sus partidas: ronda,
   letra de resultado y rival con la chapa de su mazo. La caja es la
   modal-box de components.css, aquí solo lo suyo. */
.torneo-historial-modal .modal-box {
  max-width: 460px;
  max-height: 82vh;
  overflow-y: auto;
  gap: 8px;
}
.torneo-historial-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.torneo-historial-quien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--t-xl);
}
.torneo-historial-record {
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(160, 160, 160, 0.14);
  color: var(--text-mid);
}
.torneo-historial-torneo { margin: 0; }
.torneo-historial-modal .modal-close {
  background: none;
  border: none;
  cursor: pointer;
}
.torneo-jugador-historial {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline dotted var(--text-dim);
  text-underline-offset: 3px;
}
.torneo-jugador-historial:hover { color: var(--navy); }

.torneo-historial-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: var(--t-sm);
}
.torneo-historial-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.torneo-historial-ronda { color: var(--text-dim); font-weight: 600; min-width: 4ch; }
.torneo-historial-rival { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.torneo-historial-res {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  flex: none;
}
.torneo-historial-gana { background: rgba(46, 160, 67, 0.16); color: var(--success); }
.torneo-historial-pierde { background: var(--danger-bg); color: var(--danger); }
.torneo-historial-empata { background: rgba(160, 160, 160, 0.14); color: var(--text-mid); }

/* Al organizador y a los jueces se les señala lo que el catálogo aún no
   conoce: es la lista de arquetipos que falta por añadir. */
.torneo-arquetipo-sin-catalogar .torneo-arquetipo-icono,
.torneo-arquetipo-sin-catalogar .torneo-arquetipo-marco {
  outline: 1px dashed var(--warning);
  outline-offset: 1px;
}
/* El recuadro ya lo pone el marco: repetirlo en la imagen de dentro
   pintaría una raya cortada por el recorte. */
.torneo-arquetipo-sin-catalogar .torneo-arquetipo-marco .torneo-arquetipo-icono {
  outline: none;
}
.torneo-arquetipo-sin-catalogar .torneo-arquetipo-nombre {
  font-style: italic;
}

@media (max-width: 560px) {
  /* En móvil las tablas ya van justas: los iconos encogen antes que
     obligar a arrastrar de lado. */
  .torneo-arquetipo-icono.es-sprite { width: 26px; height: 26px; }
  .torneo-arquetipo-marco { width: 22px; height: 22px; }
  .torneo-arquetipo-nombre { max-width: 9ch; }
}

/* Las pestañas de un torneo, para un dedo (tanda 312). */
@media (pointer: coarse) {
  .torneo-pestana {
    min-height: 44px;
  }
}

/* La entrada de los meses del calendario (tanda 313). El calendario ya
   respetaba la preferencia en sus otras piezas; estas tres se habían
   quedado fuera. */
@media (prefers-reduced-motion: reduce) {
  .torneo-cal-meses.cal-entra .torneo-cal-mes,
  .torneo-cal-meses.cal-entra-der .torneo-cal-mes,
  .torneo-cal-meses.cal-entra-izq .torneo-cal-mes {
    animation: none;
  }
}

/* La miniatura de un torneo dentro del calendario (tanda 313).
   NO TENÍA NI UNA REGLA: se pintaba al tamaño natural del fichero, así
   que un cartel de 1200 px se comía la fila entera — y encima sin hueco
   reservado, o sea con salto al cargar. */
.torneo-tarjeta-imagen {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}