/* =============================================
   publico.css — la cara pública: el inicio, el buscador de torneos y
   la página de cada torneo.

   ---------------------------------------------------------------
   LOS TRES ESTADOS DEL FONDO, y por qué son tres y no dos
   ---------------------------------------------------------------
   El fondo puede venir de tres lados:

     1. Lo que eligió el ORGANIZADOR para su torneo
        → sale como data-tema="claro" u "oscuro" en el <html>
     2. Lo que tenga puesto el CELULAR de quien entra
        → cuando el organizador eligió "automático" no se pone nada,
          y manda la preferencia del sistema
     3. Lo que el VISITANTE haya elegido con el botón de sol/luna
        → se guarda en su navegador y gana sobre los otros dos

   Por eso los colores se definen con variables en TRES bloques, y las
   piezas de la página nunca ponen un color directo: siempre van por
   la variable. Si un color se definiera solo dentro del bloque de
   noche, de día no existiría y la letra saldría del color del fondo.

   La marca del torneo (--marca, --acento) llega aparte, en un <style>
   que arma Marca::estilo(). Por eso el HTML es el mismo para todos.
   ============================================= */

/* ---------- Fondo claro: el que manda si no se dice otra cosa ---------- */
:root {
  --fondo:   #FFFFFF;
  --barra:   rgba(255,255,255,.92);
  --panel:   #F6F7F9;
  --panel-2: #EDEFF3;
  --borde:   #DDE1E7;
  --texto:   #16181D;
  --suave:   #4C525C;
  --tenue:   #767D89;
  --vivo:    #DC2626;
  --ok:      #067647;
  --atencion:#92400E;
  --sombra:  0 1px 2px rgba(16,24,40,.05), 0 8px 24px -18px rgba(16,24,40,.25);
  /* El «frío»: el segundo color de la página del torneo (el que va en
     los primeros lugares, el VS y las cifras). No es de la marca del
     organizador a propósito: contrasta con cualquier marca. */
  --frio:    #0E7490;
  --frio-suave: rgba(14,116,144,.14);
  --sobre-frio: #fff;

  /* Estos los reescribe el torneo con sus propios colores. */
  --marca:        #F97316;
  --marca-clara:  #FB923C;
  --marca-oscura: #C2410C;
  --acento:       #FB923C;
  --marca-suave:  rgba(249,115,22,.14);

  /* El color de marca que de verdad se usa: cambia según el fondo. */
  --marca-usable: var(--marca-oscura);

  --ancho: 1080px;
}

/* ---------- Fondo oscuro por preferencia del celular ----------
   Se guarda con :not([data-tema="claro"]) para que, si el organizador
   eligió claro a propósito, gane su elección sobre el celular. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:   #0B1326;
    --barra:   rgba(11,19,38,.92);
    --panel:   #131B2E;
    --panel-2: #1B2438;
    --borde:   #263047;
    --texto:   #DAE2FD;
    --suave:   #A7B0CC;
    --tenue:   #7A8399;
    --vivo:    #FF6B6B;
    --ok:      #34D399;
    --atencion:#FBBF24;
    --sombra:  0 1px 2px rgba(0,0,0,.45), 0 10px 28px -18px rgba(0,0,0,.7);
    --frio:    #00DAF3;
    --frio-suave: rgba(0,218,243,.14);
    --sobre-frio: #04222a;
    --marca-usable: var(--marca-clara);
  }
}

/* ---------- Fondo oscuro pedido a propósito ----------
   Sea por el organizador o por el botón de sol/luna del visitante. */
:root[data-tema="oscuro"] {
  --fondo:   #0B1326;
  --barra:   rgba(11,19,38,.92);
  --panel:   #131B2E;
  --panel-2: #1B2438;
  --borde:   #263047;
  --texto:   #DAE2FD;
  --suave:   #A7B0CC;
  --tenue:   #7A8399;
  --vivo:    #FF6B6B;
  --ok:      #34D399;
  --atencion:#FBBF24;
  --sombra:  0 1px 2px rgba(0,0,0,.45), 0 10px 28px -18px rgba(0,0,0,.7);
  --frio:    #00DAF3;
  --frio-suave: rgba(0,218,243,.14);
  --sobre-frio: #04222a;
  --marca-usable: var(--marca-clara);
}

/* ---------- Fondo claro pedido a propósito ----------
   Va al final para que gane sobre el bloque del celular. */
:root[data-tema="claro"] {
  --fondo:   #FFFFFF;
  --barra:   rgba(255,255,255,.92);
  --panel:   #F6F7F9;
  --panel-2: #EDEFF3;
  --borde:   #DDE1E7;
  --texto:   #16181D;
  --suave:   #4C525C;
  --tenue:   #767D89;
  --vivo:    #DC2626;
  --ok:      #067647;
  --atencion:#92400E;
  --sombra:  0 1px 2px rgba(16,24,40,.05), 0 8px 24px -18px rgba(16,24,40,.25);
  --frio:    #0E7490;
  --frio-suave: rgba(14,116,144,.14);
  --sobre-frio: #fff;
  --marca-usable: var(--marca-oscura);
}

/* Compatibilidad con los nombres viejos, para no tocar cada pieza. */
:root {
  --naranja: var(--marca-usable);
  --naranja-claro: var(--marca-usable);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca-usable); }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }

.dentro { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

/* ---------- Barra ---------- */
/* ADENTRO DE UN TORNEO LA BARRA NO SE QUEDA PEGADA ARRIBA (4.6.0).
   *«Un encabezado en los torneos me lo sigues dejando fijo. No quiero
   que esté fijo. Que se desplace en los torneos.»* En la página de un
   torneo la barra no lleva a ningún lado —desde la 3.5.0 ahí solo está
   la marca— así que robarle 56 px de alto a cada pantalla del celular
   para siempre no se paga. En el inicio y en el buscador sí se queda:
   ahí la barra es navegación de verdad. */
.barra-publica.callada { position: static; }
.barra-publica {
  position: sticky; top: 0; z-index: 20;
  background: var(--barra);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.barra-publica .dentro {
  display: flex; align-items: center; gap: 16px;
  padding-top: 12px; padding-bottom: 12px;
}
.barra-publica .marca {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.barra-publica .pelota {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #FB923C, #EA580C);
}
.barra-publica .nombre {
  font-weight: 700; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase;
}

/* LA FLECHA DE REGRESAR, EN LA BARRA (6.0.0)

   *«El botón para regresar atrás está mal ahí donde está. Podemos poner
   la flecha hasta arriba, donde está el logo y el modo noche y día, al
   lado derecho del logo y el nombre. El chiste, como siempre, no ocupar
   renglones solo para una cosa.»*

   El `min-width: 0` es lo que deja que el nombre del torneo se corte
   con «…» en vez de empujar el botón del tema fuera de la barra: un
   hijo de un flex no se encoge por debajo de su contenido sin él. Es la
   misma trampa de la barra de la jornada (3.4.0). */
.volver-arriba {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; min-height: 44px; padding: 0 10px;
  border-left: 1px solid var(--borde);
  color: var(--suave); text-decoration: none;
  font-size: .9rem; font-weight: 600;
}
.volver-arriba:hover { color: var(--marca-usable); }
.volver-arriba .con-espacio {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* LA FLECHA SIEMPRE LLEVA PALABRA (6.2.0).

   En la 6.0.0 quedaba sola en el celular y el usuario lo rechazó: *«la
   flecha para regresar está extremadamente sencilla; mínimo que diga
   regresar o algo, no solo una flecha que casi no se ve»*.

   Lo que se va en el celular es el NOMBRE DEL TORNEO —que es lo largo,
   y lo que no cabía al lado de la marca— y queda «Regresar», que mide
   lo mismo con cualquier torneo. */
.volver-arriba .solo-chico { display: none; }
@media (max-width: 560px) {
  .volver-arriba { padding: 0 10px 0 0; }
  .volver-arriba .con-espacio { display: none; }
  .volver-arriba .solo-chico { display: inline; }
}

.barra-publica nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.barra-publica nav a {
  padding: 8px 12px; color: var(--suave);
  text-decoration: none; font-size: .9rem; font-weight: 600;
  border-radius: 7px; white-space: nowrap;
}
.barra-publica nav a:hover { color: var(--texto); }
.barra-publica nav a.destacado {
  background: var(--marca); color: var(--marca-letra, #fff);
}

/* =============================================================
   LOS PATROCINADORES DEL ORGANIZADOR (6.5.0)

   *«Es un slider horizontal de los patrocinadores… logos cuadrados,
   imagen cuadrada del logo en PNG con fondo transparente, que se van
   deslizando de manera automática con su respectivo link.»*

   NO SE PARECE AL BANNER, a propósito. El banner se mira de uno en uno
   y por eso lleva puntitos; los patrocinadores se leen EN TIRA, varios
   a la vez, como en una valla de cancha. Puntitos aquí no significarían
   nada: no hay «el que se está viendo».

   Se desliza con `scroll-snap` de CSS y se mueve solo con `publico.js`:
   sin JavaScript se ven todos y se arrastran con el dedo.
   ============================================================= */
.patrocinadores-torneo { padding: 26px 0 6px; }
.patrocinadores-torneo .eyebrow-seccion { margin: 0 0 12px; }

.tira-patrocinadores {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x proximity;
  /* La barra se esconde: la tira se mueve sola y con el dedo, y una
     barra de scroll debajo de unos logos se lee como un error. */
  scrollbar-width: none;
}
.tira-patrocinadores::-webkit-scrollbar { display: none; }

.patrocinador-uno {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 104px; height: 104px; padding: 12px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px;
}
/* La caja lleva fondo propio **a propósito**: el logo viene con fondo
   transparente y, suelto sobre el azul marino de la página, un logo
   oscuro desaparecería. Es la misma razón por la que en la imagen para
   redes del marcador se pone una barra blanca detrás (5.1.0). */
.patrocinador-uno img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}
a.patrocinador-uno { transition: border-color .15s, transform .15s; }
a.patrocinador-uno:hover {
  border-color: var(--marca-usable); transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  a.patrocinador-uno { transition: none; }
  a.patrocinador-uno:hover { transform: none; }
}
@media (max-width: 560px) {
  .patrocinador-uno { width: 86px; height: 86px; padding: 10px; }
}

/* ---------- La lista de publicidad, en el panel ---------- */

/* ---------- Portada ---------- */
.portada { padding: 64px 0 48px; text-align: center; }
.portada h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.05; font-weight: 800;
  letter-spacing: -.01em; text-wrap: balance;
}
.portada h1 em { color: var(--marca-usable); font-style: normal; }
.portada p {
  margin: 0 auto 26px; max-width: 46ch;
  color: var(--suave); font-size: 1.08rem;
}
.acciones-portada { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn {
  display: inline-block; padding: 13px 22px;
  border: none; border-radius: 9px;
  background: var(--marca); color: var(--marca-letra, #fff);
  font-size: .95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer; font-family: inherit;
  text-decoration: none; text-align: center;
}
.btn-suave {
  background: none; border: 1px solid var(--borde);
  color: var(--suave); font-weight: 600;
}
.btn-suave:hover { color: var(--texto); border-color: var(--tenue); }

/* ---------- Secciones ---------- */
section { padding: 40px 0; }
.cabeza-seccion {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.cabeza-seccion h2 {
  margin: 0; font-size: 1.25rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.cabeza-seccion a { margin-left: auto; font-size: .88rem; font-weight: 600; text-decoration: none; }

/* EL TÍTULO DE LA PESTAÑA DEL EQUIPO, CENTRADO Y CON AIRE (6.0.0)

   *«Cuando dice "cuándo juega Jefe de Jefes", el nombre del equipo no
   está centrado. Aquí hay que tener cuidado, recuerda que hay nombres
   muy largos. Y sigue el primer partido: fíjate cómo está muy pegado,
   dale un poco más de espacio.»*

   Va SOLO en el celular: en una computadora el título alineado a la
   izquierda está bien y el usuario no lo tocó.

   `text-wrap: balance` es lo que hace que un nombre largo se parta en
   dos renglones parejos en vez de dejar una palabra suelta abajo —que
   es exactamente lo que se ve como «no está centrado»—. Y el
   `align-items: center` hace falta porque `.cabeza-seccion` es un flex:
   sin él, centrar el texto no mueve las cajas. */
@media (max-width: 560px) {
  .lo-del-equipo .cabeza-seccion {
    flex-direction: column; align-items: center; gap: 6px;
    text-align: center; margin-bottom: 34px;
  }
  .lo-del-equipo .cabeza-seccion h2 { text-wrap: balance; }
}

/* ---------- Tarjetas de torneo ---------- */
.torneos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
/* La tarjeta de un torneo, en el buscador y en la portada. El logo
   del organizador va a la izquierda; sin logo van las iniciales, que
   es lo que se hace en todo el proyecto en vez de dejar un hueco. */
.torneo {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 14px; align-items: start;
  text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 18px 20px;
}
.torneo:hover { border-color: var(--tenue); }
.torneo .logo-de-torneo { grid-row: 1 / span 3; display: flex; }
.torneo .logo-de-torneo .escudo-grande,
.torneo .logo-de-torneo .escudo-inicial {
  width: 48px; height: 48px; border-radius: 12px; font-size: .9rem;
}
.torneo:hover .logo-de-torneo .escudo-grande { filter: brightness(1.06); }
.torneo .marcas { grid-column: 2; }
.torneo .cuando {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); display: block; margin-bottom: 6px;
}
.torneo h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.torneo .donde { margin: 0; color: var(--suave); font-size: .88rem; }
.torneo .marcas { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.marca-chica {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 20px;
  border: 1px solid var(--borde); color: var(--tenue);
}
.marca-chica.vivo { border-color: #7F1D1D; color: #FCA5A5; }
.marca-chica.vivo::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vivo); margin-right: 6px; vertical-align: 1px;
}

/* ---------- Vacíos ---------- */
.vacio-caja {
  background: var(--panel); border: 1px dashed var(--borde);
  border-radius: 12px; padding: 34px 24px; text-align: center;
}
.vacio-caja p { margin: 0 0 6px; color: var(--suave); }
.vacio-caja .chico { color: var(--tenue); font-size: .88rem; margin: 0; }

/* ---------- Buscador ---------- */
.buscador { display: flex; gap: 8px; margin-bottom: 22px; }
.buscador input {
  flex: 1; padding: 13px 16px;
  background: var(--panel-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 9px;
  font-size: 16px; font-family: inherit;
}
.buscador input:focus { outline: 2px solid var(--naranja); outline-offset: 1px; }

/* ---------- Lo que hacemos ---------- */
.puntos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.punto {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 20px 22px;
}
.punto h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; }
.punto p { margin: 0; color: var(--suave); font-size: .92rem; }

/* ---------- El marcador ---------- */
.franja-marcador {
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde); border-radius: 14px;
  padding: 30px 28px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.franja-marcador div { flex: 1 1 300px; }
.franja-marcador h2 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; }
.franja-marcador p { margin: 0; color: var(--suave); font-size: .95rem; }

/* ---------- Publicidad ---------- */
.publicidad { display: grid; gap: 12px; }
.publicidad a, .publicidad div.aviso-img {
  display: block; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--borde); line-height: 0;
}
.publicidad img { width: 100%; height: auto; display: block; }

/* ---------- Pie ---------- */
/* «LO MÍO»: SEGUIR A UN EQUIPO SIN CUENTA (3.6.0)
   ---------------------------------------------------------------------
   Los dos botones de la página de un equipo, el bloque de la página del
   torneo y la explicación de cómo suscribir el calendario. Todo esto lo
   prende `publico.js` (salvo el link del calendario, que es un link de
   verdad): sin él, la página queda como siempre. */
.acciones-equipo {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.acciones-equipo .btn { flex: 0 1 auto; }

/* LOS DOS BOTONES, EN UN RENGLÓN (6.0.0)

   *«Seguir este equipo y llevar sus partidos: los botones están
   geniales y es lo que buscábamos, pero que los dos estén en un
   renglón, no que uno esté arriba y otro abajo. Estoy hablando de la
   versión móvil.»*

   Es una rejilla de dos columnas y no un flex: con `flex-wrap` los dos
   botones caben o no caben según lo largo que sea su texto, y «Llevarme
   sus partidos» los tiraba a dos renglones. Con la rejilla el ancho lo
   manda la pantalla y lo que se encoge es el texto de adentro.

   **El tercer botón —la imagen para redes, cuando el torneo terminó—
   cae abajo y a todo lo ancho**: es de otra clase de acción, y partirlo
   a media rejilla dejaría un hueco al lado. Es la misma idea de la
   ficha sola de la 4.2.0. */
@media (max-width: 560px) {
  .acciones-equipo { display: grid; grid-template-columns: 1fr 1fr; }
  .acciones-equipo .btn {
    min-width: 0; padding-inline: 10px; text-align: center;
    justify-content: center; font-size: .86rem;
  }
  /* El de la imagen lo dice con su propia clase y no con un
     `:nth-child`: el botón de seguir nace `hidden` cuando `publico.js`
     no cargó, y `hidden` no se ve pero SÍ cuenta para `nth-child`. La
     posición de un botón no puede depender de si cargó un archivo. */
  .acciones-equipo .btn.ancho-completo { grid-column: 1 / -1; }
  /* Y sin JavaScript queda UN solo botón: que ocupe el renglón entero
     en vez de quedarse a media pantalla con un hueco al lado. En cuanto
     `publico.js` le quita el `hidden` al de seguir, vuelven a ser dos. */
  .acciones-equipo:has(.seguir-equipo[hidden]) { grid-template-columns: 1fr; }
}
/* EL BOTÓN DEL CALENDARIO Y SU «?» (6.2.0)

   Los dos ocupan UNA sola celda de la rejilla del celular: si el «?»
   tuviera celda propia empujaría «Lo sigo» a su propio renglón, que es
   exactamente lo que se arregló en la 6.0.0.

   El botón se encoge y el «?» no (`flex: none`): lo que tiene que
   caber sí o sí es el blanco de toque de la ayuda. */
.con-ayuda { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
/* `nowrap` + el emoji fuera: con «🗓 Calendario» seguía partiéndose en
   dos renglones en 360 px, que era justo la queja. El icono no se gana
   su ancho aquí — al lado queda el «?», que sí dice algo. */
.con-ayuda .btn {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ayudita {
  flex: none; width: 34px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: transparent; color: var(--suave);
  font-weight: 800; font-size: .9rem; line-height: 1;
}
.ayudita:hover { color: var(--marca-usable); border-color: var(--marca-usable); }
/* 44 de alto en el celular, como todo lo que se toca ahí. */
@media (max-width: 560px) {
  .ayudita { width: 38px; min-height: 44px; }
  /* «CALENDARIO» EN MAYÚSCULAS Y ESPACIADO NO CABE en 360 px: son 107
     px de texto para 91 de hueco, y por eso se partía. Aquí el botón
     renuncia al espaciado entre letras y baja un punto de tamaño — es
     lo único de la fila que se puede encoger sin perder nada, porque
     «Lo sigo» ya cabe de sobra. */
  .con-ayuda .btn { letter-spacing: 0; font-size: .8rem; padding-inline: 8px; }
}

.seguir-equipo.siguiendo {
  border-color: var(--marca-usable); color: var(--marca-usable);
}

/* `.como-suscribirse` se fue en la 6.2.0: esa explicación vive ahora
   en el popup del «?», al lado del botón del calendario. */
.link-calendario {
  width: 100%; padding: 9px 11px;
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: 8px;
  color: var(--suave); font-family: var(--mono); font-size: .78rem;
}

.lo-mio { padding-top: 8px; }

/* «EQUIPOS QUE SIGO», QUE SE ENCOGE (6.2.0)

   Es un `<details>`, así que la flecha y el abrir/cerrar los pone el
   navegador. Lo único que hace el CSS es que el `<summary>` no se vea
   como una lista: la cabecera tiene que leerse igual que las demás
   secciones de la página. */
.bloque-que-sigo > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.bloque-que-sigo > summary::-webkit-details-marker { display: none; }
/* La flechita se dibuja aquí para poder girarla: la de fábrica no se
   puede animar y en Safari ni se ve. */
.bloque-que-sigo > summary::after {
  content: "\25B8"; margin-left: auto;
  color: var(--tenue); font-size: .9rem;
  transition: transform .15s;
}
.bloque-que-sigo[open] > summary::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .bloque-que-sigo > summary::after { transition: none; }
}
.bloque-que-sigo > summary:hover h2 { color: var(--marca-usable); }
.mis-equipos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mi-equipo {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--marca-usable);
  color: var(--marca-usable); text-decoration: none;
  font-size: .86rem; font-weight: 700;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.mi-equipo:hover { background: var(--panel-2); }

/* LA INVITACIÓN AL FINAL DE LA PÁGINA DE UN TORNEO (3.5.0)
   ---------------------------------------------------------------------
   Es lo que se quitó del encabezado. *«Si te están compartiendo un
   enlace de un torneo, tú quieres ver el torneo, no crear una cuenta.»*
   Aquí abajo la ve quien ya recorrió el torneo y entendió qué hace el
   sistema, en vez de estorbar encima de lo que venía a leer. */
/* **DESDE LA 4.6.0 VIVE DENTRO DEL `<footer>`**, para que no se lea
   como una franja del torneo: *«siento que está invadiendo la parte
   del organizador… que se vea que ya terminó el torneo»*. Por eso ya
   no lleva fondo propio ni `.dentro` (el pie ya se lo pone): es una
   caja del pie, separada de las columnas por una línea. */
.invita-organizador {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 26px;
  border-bottom: 1px solid var(--borde);
}
.invita-organizador p {
  margin: 0; flex: 1 1 320px; min-width: 0;
  color: var(--suave); font-size: .95rem; line-height: 1.55;
}
.invita-organizador p strong { color: var(--texto); }
.invita-organizador .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 620px) {
  .invita-organizador { padding: 20px 0; }
  .invita-organizador .btn { width: 100%; text-align: center; }
}

.pie-publico {
  border-top: 1px solid var(--borde);
  margin-top: 40px; padding: 28px 0 40px;
  color: var(--tenue); font-size: .86rem;
}
.pie-publico .dentro { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.pie-publico a { color: var(--suave); text-decoration: none; }
.pie-publico .empuja { margin-left: auto; }

@media (max-width: 620px) {
  /* En el celular solo se esconden Torneos y Marcador —que ya están en
     los botones grandes de la portada y en el pie—. Entrar y Crear
     cuenta NUNCA se esconden: son las dos cosas que la gente viene a
     hacer, y la mayoría entra desde el teléfono. */
  .barra-publica nav a.solo-ancha { display: none; }
  .barra-publica nav { gap: 2px; }
  .barra-publica nav a { padding: 8px 10px; font-size: .85rem; }
  .barra-publica .nombre { font-size: .9rem; }
  .portada { padding: 44px 0 34px; }
}

@media (max-width: 380px) {
  .barra-publica .nombre { display: none; }
}

/* =============================================
   Páginas con formulario (registro, recuperar, confirmar)
   ============================================= */

.dentro.estrecho { max-width: 520px; }

.titulo-pagina {
  margin: 0 0 6px; font-size: 1.8rem; font-weight: 800;
  line-height: 1.1; text-wrap: balance;
}
.bajada-pagina { margin: 0 0 22px; color: var(--suave); font-size: 1rem; }

.tarjeta-publica {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 24px;
}

.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.campo .pista { display: block; color: var(--tenue); font-size: .84rem; margin-top: 6px; }

/* Un tipo de campo que falte aquí sale con el estilo de fábrica del
   navegador y desentona de inmediato. */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
input[type="url"], input[type="date"] {
  width: 100%; padding: 12px 14px;
  background: var(--panel-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 9px;
  font-size: 16px;  /* 16 o menos hace que el iPhone acerque la pantalla */
  font-family: inherit;
}
input:focus { outline: 2px solid var(--naranja); outline-offset: 1px; }

.btn-ancho { display: block; width: 100%; }

/* ---------- El ojito para ver la contraseña ---------- */
.con-ojito { position: relative; }
.con-ojito input { padding-right: 52px; }
.ojito {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;   /* blanco de toque mínimo */
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0;
}
.ojito:hover { opacity: .8; }

/* ---------- Qué tan buena es la contraseña ---------- */
.fuerza {
  display: block; margin-top: 6px;
  font-size: .82rem; font-weight: 600;
}
.fuerza.mal   { color: var(--vivo); }
.fuerza.floja { color: #FBBF24; }
.fuerza.ok    { color: #A3E635; }
.fuerza.buena { color: var(--ok); }

/* ---------- Casilla ---------- */
.casilla {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 20px; font-size: .88rem; color: var(--suave);
  cursor: pointer;
}
.casilla input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  accent-color: var(--naranja); cursor: pointer;
}

.abajo-tarjeta {
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--borde);
  text-align: center; color: var(--suave); font-size: .9rem;
}

/* ---------- Mensajes ---------- */
/* Los avisos tenían el color escrito a mano y en la version clara
   quedaban como una mancha oscura. Ahora el fondo se arma con el
   color del aviso a poca opacidad, asi sirve sobre los dos fondos. */
.mensaje { padding: 14px 16px; border-radius: 9px; font-size: .92rem; margin-bottom: 18px;
           background: var(--panel); border: 1px solid var(--borde); }
.mensaje.error { background: color-mix(in srgb, var(--vivo) 12%, transparent);
                 border: 1px solid color-mix(in srgb, var(--vivo) 45%, transparent); color: var(--vivo); }
.mensaje.bien  { background: color-mix(in srgb, var(--ok) 12%, transparent);
                 border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.mensaje.ojo   { background: color-mix(in srgb, var(--atencion) 14%, transparent);
                 border: 1px solid color-mix(in srgb, var(--atencion) 45%, transparent); color: var(--atencion); }

/* ---------- La trampa para robots ----------
   Tiene que ser invisible para la persona pero visible para el robot,
   así que NO se usa display:none: muchos robots lo detectan y saltan
   esos campos. Se saca de la pantalla y punto. */
.no-lo-llenes {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* =============================================================
   LA PÁGINA DE INICIO
   -------------------------------------------------------------
   Todo va por variables, como el resto del archivo: la portada
   es oscura SIEMPRE (es una franja de marca, no el fondo de la
   página) y por eso sus colores se escriben aquí a propósito,
   con su propio juego de tonos. Es la única excepción del
   archivo y está marcada.
   ============================================================= */

.eyebrow {
  margin: 0 0 10px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--marca-usable);
}

.titulo-seccion {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800; line-height: 1.15;
  text-wrap: balance;
}
.bajada-seccion {
  margin: 0 0 22px; max-width: 62ch;
  color: var(--suave); font-size: 1rem;
}
.cabeza-seccion.columna { display: block; }
.cabeza-seccion.columna .bajada-seccion { margin-bottom: 22px; }

.btn-grande { padding: 14px 24px; font-size: 1rem; }

section { padding: 46px 0; }
.franja-clara { background: var(--panel); border-block: 1px solid var(--borde); }

/* ---------- Portada ---------- */
.portada-inicio {
  /* Franja de marca: oscura en los dos temas, a propósito. El
     tablero de muestra necesita fondo oscuro para leerse, y una
     portada que cambia de color con el tema pierde su fuerza. */
  --portada-fondo:  #0B0E14;
  --portada-panel:  #151A23;
  --portada-borde:  #262D38;
  --portada-texto:  #F5F4F0;
  --portada-suave:  #A9AEB8;
  background:
    radial-gradient(900px 380px at 78% 8%, rgba(249,115,22,.16), transparent 62%),
    var(--portada-fondo);
  color: var(--portada-texto);
  padding: 60px 0 66px;
  border-bottom: 1px solid var(--portada-borde);
}
.portada-rejilla {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.portada-texto h1 {
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.02em;
  text-wrap: balance;
}
.portada-texto h1 em { color: var(--marca-clara); font-style: normal; }
.portada-bajada {
  margin: 0 0 26px; max-width: 46ch;
  color: var(--portada-suave); font-size: 1.05rem; line-height: 1.6;
}
.portada-inicio .acciones-portada { justify-content: flex-start; }
.portada-inicio .btn-suave {
  border-color: var(--portada-borde);
  color: var(--portada-texto);
}
.portada-inicio .btn-suave:hover { border-color: var(--marca-clara); }

.palomitas {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  color: var(--portada-suave); font-size: .88rem;
}
.palomitas li { display: flex; align-items: center; gap: 8px; }
.palomitas li::before {
  content: "\2713";
  color: var(--marca-clara); font-weight: 700;
}

/* ---------- El tablero de muestra ---------- */
.ventanita {
  background: var(--portada-panel);
  border: 1px solid var(--portada-borde);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.ventanita-barra {
  display: flex; gap: 6px; padding: 11px 14px;
  border-bottom: 1px solid var(--portada-borde);
  background: rgba(255,255,255,.02);
}
.ventanita-barra span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--portada-borde);
}
.ventanita-cuerpo { padding: 16px 18px 18px; }

.muestra-encabezado {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--portada-suave); margin-bottom: 16px;
}
.muestra-vivo {
  color: var(--marca-clara); font-weight: 700;
  border: 1px solid rgba(249,115,22,.4);
  border-radius: 99px; padding: 3px 10px;
}

.muestra-marcador {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 12px; align-items: center; text-align: center;
}
.muestra-equipo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.muestra-escudo {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #1D4ED8, #1E3A8A);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
}
.muestra-escudo.alterno { background: linear-gradient(140deg, #FB923C, #C2410C); }
.muestra-nombre { font-size: .82rem; color: var(--portada-suave); }
.muestra-puntos {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.muestra-faltas { font-size: .7rem; color: var(--portada-suave); }
.muestra-vs { display: flex; flex-direction: column; gap: 4px; }
.muestra-reloj {
  font-size: 1.1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--marca-clara);
}
.muestra-etiqueta {
  font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--portada-suave);
}

.muestra-cuartos {
  width: 100%; border-collapse: collapse; margin-top: 18px;
  font-size: .78rem; font-variant-numeric: tabular-nums;
}
.muestra-cuartos th {
  text-align: right; padding: 6px 8px; font-weight: 600;
  color: var(--portada-suave); font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--portada-borde);
}
.muestra-cuartos th:first-child, .muestra-cuartos td:first-child { text-align: left; }
.muestra-cuartos td {
  padding: 7px 8px; text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.muestra-cuartos tr:last-child td { border-bottom: 0; }

.muestra-pie {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--portada-borde);
  font-size: .76rem; color: var(--portada-suave);
}

/* ---------- Los tres pasos ---------- */
.pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  counter-reset: paso;
}
.pasos li {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 14px; padding: 24px 22px;
}
.paso-numero {
  display: block; font-size: 1.6rem; font-weight: 800;
  color: var(--marca-usable); opacity: .35; margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.pasos h3 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 700; }
.pasos p { margin: 0 0 16px; color: var(--suave); font-size: .92rem; line-height: 1.6; }

/* ---------- Lo que hace ---------- */
.dos-columnas-ancho {
  display: grid; gap: 40px; align-items: start;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.lista-palomitas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-palomitas li {
  position: relative; padding-left: 28px;
  color: var(--suave); font-size: .94rem; line-height: 1.6;
}
.lista-palomitas li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--marca-usable); font-weight: 700;
}
.lista-palomitas strong { color: var(--texto); }

/* ---------- La cédula de muestra ---------- */
.cedula-muestra {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; overflow: hidden; box-shadow: var(--sombra);
}
.cedula-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--borde);
  font-size: .82rem; font-weight: 700;
}
.cedula-marca {
  color: var(--ok); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.cedula-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cedula-tabla th {
  text-align: left; padding: 9px 18px; font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tenue);
  border-bottom: 1px solid var(--borde);
}
.cedula-tabla td { padding: 11px 18px; border-bottom: 1px solid var(--borde); }
.cedula-tabla td:last-child, .cedula-tabla th:last-child {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 700;
}
.cedula-tabla tr:last-child td { border-bottom: 0; }
.cedula-tabla .fuera td { opacity: .55; }
.cedula-tabla .fuera em {
  font-style: normal; font-size: .66rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--vivo);
  margin-left: 6px;
}
.bolitas { display: inline-flex; gap: 3px; }
.bolitas i { width: 7px; height: 7px; border-radius: 50%; background: var(--marca-usable); }
.bolitas.roja i { background: var(--vivo); }
.cedula-pie {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px 18px; border-top: 1px solid var(--borde);
}
.chip {
  border: 1px solid var(--borde); border-radius: 8px;
  padding: 5px 10px; font-size: .76rem; font-weight: 600; color: var(--suave);
}
.chip.fuerte { background: var(--marca); color: var(--marca-letra, #fff); border-color: transparent; }
.chip.falta { color: var(--vivo); border-color: color-mix(in srgb, var(--vivo) 45%, transparent); }

.etiqueta-proximamente {
  margin-left: auto; align-self: center;
  border: 1px dashed color-mix(in srgb, var(--atencion) 55%, transparent);
  color: var(--atencion); border-radius: 99px;
  padding: 4px 12px; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- Los números ---------- */
.numeros-reales {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  text-align: center;
}
.numeros-reales div {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 26px 18px;
}
.numeros-reales strong {
  display: block; font-size: 2rem; font-weight: 800;
  color: var(--marca-usable); font-variant-numeric: tabular-nums;
}
.numeros-reales span {
  display: block; margin-top: 4px; color: var(--suave); font-size: .88rem;
}

/* ---------- Buscar ---------- */
.franja-buscar {
  background: linear-gradient(135deg, var(--marca), var(--marca-oscura));
  color: #fff; text-align: center;
}
.franja-buscar h2 {
  margin: 0 0 6px; font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 800;
}
.franja-buscar p { margin: 0 0 22px; opacity: .92; }
.buscador-grande {
  display: flex; gap: 8px; max-width: 560px; margin: 0 auto; flex-wrap: wrap;
}
.buscador-grande input {
  flex: 1 1 260px; background: #fff; color: #16181D;
  border-color: transparent;
}
.buscador-grande input::placeholder { color: #767D89; }
.buscador-grande .btn { background: #16181D; color: #fff; flex: none; }
.buscador-grande .btn:hover { background: #000; }

/* ---------- Planes ---------- */
/* Una tira que se desliza, no una cuadrícula: los planes los arma el
   dueño y pueden ser tres o nueve. Con cuadrícula, seis quedaban en
   cuatro arriba y dos abajo, que se ve descuidado. */
.planes {
  display: flex; gap: 16px; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 12px 2px 6px;
  scrollbar-width: thin;
}
.plan {
  flex: 1 0 236px; max-width: 300px; scroll-snap-align: start;
  position: relative;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 14px; padding: 26px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.plan.destacado {
  border-color: var(--marca-usable);
  box-shadow: 0 0 0 1px var(--marca-usable);
}
.plan-mas {
  position: absolute; top: -11px; left: 22px;
  background: var(--marca); color: var(--marca-letra, #fff);
  border-radius: 99px; padding: 3px 12px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.plan h3 { margin: 0; font-size: .82rem; font-weight: 700;
           letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.plan-precio { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.plan-precio strong { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan-precio span { color: var(--tenue); font-size: .86rem; }
.plan-para { margin: 0; color: var(--suave); font-size: .88rem; }
.plan-trae { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.plan-trae li {
  position: relative; padding-left: 22px;
  color: var(--suave); font-size: .88rem; line-height: 1.5;
}
.plan-trae li::before {
  content: "\2713"; position: absolute; left: 0;
  color: var(--marca-usable); font-weight: 700;
}
.nota-planes { margin: 22px 0 0; text-align: center; color: var(--tenue); font-size: .86rem; }

/* ---------- WhatsApp ---------- */
.franja-whatsapp {
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  border: 1px solid var(--borde); border-radius: 14px;
  padding: 30px 28px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.franja-whatsapp div { flex: 1 1 320px; }
.franja-whatsapp h2 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; }
.franja-whatsapp p { margin: 0; color: var(--suave); font-size: .95rem; }

/* ---------- Testimonios ---------- */
.testimonios {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.testimonio {
  margin: 0; background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 14px; padding: 24px 22px;
}
.testimonio blockquote {
  margin: 0 0 16px; color: var(--texto);
  font-size: .95rem; line-height: 1.65;
}
.testimonio blockquote::before { content: "\201C"; color: var(--marca-usable); }
.testimonio blockquote::after  { content: "\201D"; color: var(--marca-usable); }
.testimonio figcaption { display: grid; gap: 2px; }
.testimonio figcaption strong { font-size: .9rem; }
.testimonio figcaption span { color: var(--tenue); font-size: .82rem; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .portada-rejilla,
  .dos-columnas-ancho { grid-template-columns: 1fr; }
  /* En el celular el título va primero: es lo que vende. El tablero
     de muestra se ve DESPUÉS, cuando ya entendió de qué se trata. */
  .portada-muestra { order: 2; }
  section { padding: 36px 0; }
  .portada-inicio { padding: 40px 0 46px; }
  .etiqueta-proximamente { margin-left: 0; }
  .cabeza-seccion { flex-wrap: wrap; }
}

/* ---------- El pie ---------- */
.pie-rejilla {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  padding: 40px 0 30px;
}
.pie-marca .marca { display: inline-flex; align-items: center; gap: 10px;
                    text-decoration: none; color: inherit; }
.pie-marca .nombre { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pie-marca p { margin: 12px 0 0; color: var(--tenue); font-size: .88rem; line-height: 1.6; max-width: 38ch; }
.pie-columna { display: grid; gap: 8px; align-content: start; }
.pie-columna h3 {
  margin: 0 0 4px; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto);
}
.pie-columna a, .pie-columna span { color: var(--tenue); font-size: .88rem; text-decoration: none; }
.pie-columna a:hover { color: var(--marca-usable); }
.pie-abajo {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  padding: 18px 0 30px; border-top: 1px solid var(--borde);
  color: var(--tenue); font-size: .82rem;
}

@media (max-width: 860px) {
  .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pie-marca { grid-column: 1 / -1; }
}
.plan-trae .plan-y-mas { color: var(--tenue); font-style: italic; }
.plan-trae .plan-y-mas::before { content: "+"; }
/* La tira de planes se desliza; sin este aviso, el que queda cortado
   a la derecha parece un error de dibujo en vez de una invitación. */
.pista-desliza {
  margin: 4px 0 0; text-align: right;
  color: var(--tenue); font-size: .82rem;
}

/* ---------- La marca del sitio (Ajustes → Marca) ----------
   Si el dueño sube su logo, reemplaza a la pelota y al nombre. El
   nombre se queda solo para los lectores de pantalla. */
.logo-sitio { display: block; height: 36px; width: auto; max-width: 220px; object-fit: contain; }
.pie-marca .logo-sitio { height: 40px; }
/* Dos logos (día y noche): de día se ve el primero, de noche el segundo.
   Mismo criterio que las variables de arriba: el celular manda salvo que
   alguien haya elegido a propósito claro u oscuro. */
.logo-sitio.logo-noche { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-sitio.logo-dia { display: none; }
  :root:not([data-tema="claro"]) .logo-sitio.logo-noche { display: block; }
}
:root[data-tema="oscuro"] .logo-sitio.logo-dia { display: none; }
:root[data-tema="oscuro"] .logo-sitio.logo-noche { display: block; }
.solo-lectores {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 600px) {
  .logo-sitio { max-width: 160px; }
}

/* Un complejo con varias canchas: se listan bajo su nombre. */
.sede .canchas-de-sede { margin: 2px 0 6px; font-size: .9rem; color: var(--marca-usable); font-weight: 600; }
/* =====================================================================
   EL LINK DE INSCRIPCIÓN DEL CLUB (fase 8)
   =====================================================================
   Esta es la única pantalla pública donde alguien ESCRIBE de verdad:
   un formulario largo, en el celular, en la calle. Por eso los campos
   se estilan aquí y no se dejan con el estilo de fábrica del
   navegador, que en un tema oscuro sale con fondo blanco y no se lee.
   ===================================================================== */
select, textarea {
  width: 100%; padding: 12px 14px;
  background: var(--panel-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 9px;
  font-size: 16px;            /* menos de 16 hace que el iPhone acerque */
  font-family: inherit;
}
textarea { line-height: 1.5; resize: vertical; }
select:focus, textarea:focus { outline: 2px solid var(--naranja); outline-offset: 1px; }

input[type="file"] {
  width: 100%; padding: 10px;
  background: var(--panel-2); color: var(--texto);
  border: 1px dashed var(--borde); border-radius: 9px;
  font-size: .92rem;
}

/* Los bloques que se abren y se cierran («Agregar un jugador»). Van
   cerrados a propósito: con tres categorías, todo abierto es una
   pantalla de dos metros. */
.tarjeta-publica details > summary {
  cursor: pointer; font-weight: 600; padding: 10px 0;
  min-height: 44px;           /* blanco de toque, como en el marcador */
  display: flex; align-items: center;
}

/* Cuando el link ya cerró, los formularios quedan a la vista pero
   apagados: es más claro que esconderlos, porque el entrenador ve que
   lo que subió sigue ahí. */
form[inert] { opacity: .55; }

/* =====================================================================
   LA PÁGINA PÚBLICA DE UN TORNEO (rediseño de septiembre de 2026)
   =====================================================================
   Lo que pidió el usuario con sus imágenes: tarjetas con esquinas
   redondeadas, el partido como una ficha y no como un renglón, la
   tabla de posiciones SIMPLE (lugar, equipo, récord, victorias y
   puntos) y una portada con las cifras del torneo.

   Reglas que se respetan aquí:
     · Todo va por variables (--fondo, --panel, --marca…): la página se
       ve bien de día y de noche y con la marca de cada organizador.
     · Sin fuentes de internet. Los números van en la monoespaciada del
       propio celular (ui-monospace), que es lo que les da el aire de
       marcador.
     · Las animaciones son sutiles y respetan «reducir movimiento».
   ===================================================================== */

:root {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radio: 14px;
}

/* ---------- El botón de claro / oscuro (lo usan todas las públicas) ---------- */
.cambia-tema {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--borde);
  border-radius: 9px; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0;
}
.cambia-tema:hover { border-color: var(--tenue); }

/* ---------- La etiqueta chiquita en mayúsculas, que se repite en toda la página ---------- */
.etiqueta-mono {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tenue);
}

/* ---------- El escudo, o la inicial si no hay logo ---------- */
.escudo {
  width: 22px; height: 22px; border-radius: 6px; object-fit: contain;
  background: #FFFFFF; vertical-align: -5px; margin-right: 5px;
}
.escudo-grande, .escudo-inicial {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 2px solid var(--borde);
}
.escudo-grande { object-fit: contain; padding: 4px; background: #FFFFFF; }
.escudo-inicial {
  font-family: var(--mono); font-weight: 700; font-size: .85rem;
  letter-spacing: .02em; color: var(--suave);
}
.escudo-inicial.frio { color: var(--frio); border-color: var(--frio); }
.escudo-inicial.marca { color: var(--marca-usable); border-color: var(--marca-usable); }

/* =============================================================
   1 · LA PORTADA DEL TORNEO
   ============================================================= */
.cabeza-torneo {
  padding: 28px 0 22px;
  background:
    radial-gradient(900px 260px at 0% 0%, var(--marca-suave), transparent 70%),
    var(--fondo);
  border-bottom: 1px solid var(--borde);
}
/* EL RENGLÓN DE ARRIBA: las pastillas del torneo y, a la derecha, el
   botón de compartir. Va `nowrap` a propósito —*«el botón de compartir
   no me gusta que esté en un renglón solo, ocupa mucha pantalla; que
   esté donde está liga, jornada»*—: con `wrap`, en un celular el botón
   no cabía junto a «JORNADA 2 EN CURSO» y se caía a su propia línea.
   Lo que cede es la pastilla larga, que se recorta con «…». */
.cabeza-arriba {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  margin-bottom: 18px;
}
.cabeza-arriba .acciones-cabeza {
  margin-left: auto; flex: none; display: flex; gap: 8px;
}
/* EL BOTÓN DE COMPARTIR (4.7.0)
   ---------------------------------------------------------------------
   *«No me gusta cómo se ven los dos botones, rol por WhatsApp y rol en
   PDF. Se ve muy grande, se ve muy feo. Prefiero un botón compartir
   clásico, chiquito, solo el icono.»* Uno de 40x40 —el blanco de toque
   de siempre— que abre el cuadro con todos los caminos. */
.btn-compartir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); color: var(--suave);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.btn-compartir svg { width: 19px; height: 19px; }
.btn-compartir:hover { color: var(--marca-usable); border-color: var(--marca-usable); }

.modos-compartir { display: grid; gap: 8px; margin-top: 14px; }
/* `[hidden]` gana SIEMPRE, y esto no es un detalle: el botón de copiar
   nace escondido y lo prende `publico.js`. Un `display: flex` de autor
   le gana al `display:none` que el navegador le da a `[hidden]`, así
   que sin esta línea el botón se dibujaba con JavaScript apagado — y
   ahí no haría nada. Lo destapó la prueba que entra sin JavaScript. */
.modos-compartir .modo[hidden] { display: none; }
.modos-compartir .modo {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 13px; min-height: 56px;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--panel); color: inherit;
  text-decoration: none; text-align: left; font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.modos-compartir .modo:hover { border-color: var(--marca-usable); background: var(--panel-2); }
.modos-compartir .modo > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.modos-compartir .modo strong { font-size: .94rem; font-weight: 700; }
.modos-compartir .modo small { color: var(--tenue); font-size: .78rem; }
.modos-compartir .icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  background: var(--panel-2); color: var(--suave);
  font-weight: 800; font-size: 1.05rem;
}
.modos-compartir .icono.verde { background: #14603a; color: #d6ffe9; }
.modos-compartir .icono.azul  { background: #1b3a6b; color: #d8e7ff; }

/* El link escrito abajo, aunque se vea feo: si el botón de copiar no
   carga —o el navegador no deja copiar— es lo único que queda para
   llevarse la dirección. Es la misma idea del link escrito debajo del
   botón en los correos. */
.el-link-escrito {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--borde);
  color: var(--tenue); font-size: .78rem; font-family: var(--mono);
  word-break: break-all;
}

.chip-torneo {
  display: inline-flex; align-items: center; gap: 6px;
  /* Se puede encoger y recortar: es lo que deja que el botón de
     compartir quepa en el mismo renglón en un celular. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  background: var(--marca-suave); color: var(--marca-usable);
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.chip-torneo.frio { background: var(--frio-suave); color: var(--frio); }

.marca-torneo { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.logo-torneo {
  width: 88px; height: 88px; flex: none;
  object-fit: contain; border-radius: 18px;
  background: #FFFFFF; padding: 6px;
  border: 1px solid var(--borde);
}
.tipo-torneo {
  margin: 0 0 6px; font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tenue);
}
.cabeza-torneo h1 {
  margin: 0; font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance;
}
.cabeza-torneo h1 .remate { color: var(--marca-usable); }
.bajada-torneo { margin: 10px 0 0; color: var(--suave); font-size: 1rem; max-width: 60ch; }

/* LOS DATOS RÁPIDOS, EN CUADRITOS QUE SE DESLIZAN (4.6.0)
   ---------------------------------------------------------------------
   *«Sí me gusta que estén datos rápidos, pero no me agrada cómo está
   ordenado… que sean un slider, cuadritos no alargados.»*

   Antes era un `flex-wrap` con `flex: 1 1 140px`: con tres cifras se
   estiraban a lo ancho de la pantalla —de ahí lo de «alargados»— y con
   seis se partían en dos renglones desiguales. Ahora **no se estiran ni
   se doblan**: miden lo mismo y lo que no cabe se desliza, que es lo
   que ya hacen la barra de categorías y el cuadro de la eliminatoria.

   El organizador elige cuáles (`Pagina::CIFRAS`), así que esto tiene
   que aguantar de una a siete sin que ninguna se vea rara. */
.cifras-torneo {
  display: flex; gap: 10px; flex-wrap: nowrap;
  margin-top: 20px;
  overflow-x: auto; scrollbar-width: none;
  /* El relleno de los lados se le devuelve con un margen negativo: sin
     esto el último cuadrito se corta contra el borde de la pantalla en
     vez de asomarse, y no se ve que haya más. */
  padding-inline: 2px; scroll-snap-type: x proximity;
}
.cifras-torneo::-webkit-scrollbar { display: none; }
.cifra {
  flex: 0 0 auto; min-width: 128px; max-width: 220px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.cifra strong {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--marca-usable); line-height: 1.1;
  /* Una información, un renglón: lo que no entra se recorta. Las cifras
     son números cortos, pero «Oro · Semifinal» o una fecha no lo son. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Las que son texto y no un número van más chicas, para que quepan sin
   recortarse: «sáb 19 sep» con 1.5 rem no entra en 128 px. */
.cifra.fria strong { font-size: 1.15rem; }
.cifra.fria strong { color: var(--frio); }
.cifra span { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }

/* =============================================================
   2 · LA BARRA DE CATEGORÍAS y BUSCAR MI EQUIPO
   ============================================================= */
.barra-categorias {
  padding: 0;
  position: sticky; top: 0; z-index: 15;
  background: var(--barra);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.fichas-categorias {
  display: flex; gap: 8px;
  overflow-x: auto;                /* SE DESPLAZA ELLA SOLA a lo ancho */
  padding: 10px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fichas-categorias::-webkit-scrollbar { display: none; }
.fichas-categorias a {
  flex: 0 0 auto;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--suave); text-decoration: none;
  font-size: .88rem; font-weight: 600; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.fichas-categorias a:hover { color: var(--texto); border-color: var(--tenue); }
.fichas-categorias a.aqui {
  background: var(--marca); border-color: var(--marca);
  color: var(--marca-letra, #fff);
}

/* ---------- El buscador paginado (5.0.0) ---------- */
/* *«Prefiero que me muestre una lista tal vez de 10… paginados. Así si
   quieren ver más, ven más.»* Las tres formas de ordenar reusan las
   pastillas de las categorías (`.fichas-categorias`), que ya se
   desplazan solas a lo ancho en un celular. */
.ordenes-buscador { padding-top: 4px; }

.cuantos-hay {
  margin: 2px 0 14px;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue);
}

/* Las flechas de página, con la misma forma y el mismo blanco de toque
   (44 px) que las de la jornada: son el mismo gesto. */
.paginas {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 22px 0 4px;
}
.pagina-flecha {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; text-decoration: none;
  color: var(--suave); font-size: 1.5rem; font-weight: 700; line-height: 1;
  transition: background .15s, color .15s;
}
.pagina-flecha:hover { background: var(--panel-2); color: var(--texto); }
.pagina-flecha.apagada { opacity: .3; pointer-events: none; }
.cual-pagina {
  min-width: 96px; text-align: center;
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  color: var(--suave);
}

/* ---------- Cuánta gente sigue a un equipo (5.0.0) ---------- */
/* Va DEBAJO de los botones y no adentro del de seguir: adentro, el
   texto del botón cambiaría de largo al tocarlo y la fila entera se
   movería bajo el dedo. Con cero no se dibuja: «0 personas lo siguen»
   es peor que no poner nada. */
.lo-siguen {
  margin: 8px 0 0;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue);
}
.lo-siguen[hidden] { display: none; }

.buscar-equipo { padding: 20px 0 4px; }
.buscar-equipo label {
  display: block; font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 7px;
}
.fila-buscar { display: flex; gap: 8px; }
.fila-buscar select {
  flex: 1; padding: 12px 14px;
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 10px;
  font-size: 16px; font-family: inherit;
}
.fila-buscar select:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
.aviso-filtro {
  margin-top: 12px; padding: 12px 15px;
  background: var(--marca-suave); border: 1px solid var(--marca);
  border-radius: 10px; font-size: .9rem;
}
.aviso-filtro .link-equipo { display: block; margin-top: 5px; color: var(--suave); font-size: .82rem; }

/* ---------- Los avisos del organizador (4.9.0) ---------- */
/* LOS AVISOS DEL ORGANIZADOR
   ---------------------------------------------------------------------
   *«Que el organizador pueda poner avisos de la liga, de la categoría,
   del torneo y lo puedan ver todos.»*

   Van ARRIBA DE TODO, antes de los banners: lo que hay que ver primero
   es el aviso, no la publicidad.

   El color sale de `--atencion` y NO del color de la marca del
   organizador: un aviso tiene que distinguirse de la marca, o se lee
   como un adorno más de la página. Es lo mismo que hace `--frio` con
   lo que no es del organizador. */
.avisos-torneo { padding: 16px 0 0; }
.avisos-torneo[hidden] { display: none; }
.avisos-torneo .dentro { display: flex; flex-direction: column; gap: 10px; }

.aviso-torneo {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--borde);
  /* La raya de la izquierda es lo que lo separa de una tarjeta normal
     de un vistazo, sin pintar la caja entera de un color que pelee con
     la marca del organizador. */
  border-left: 4px solid var(--atencion);
  border-radius: 10px;
}
.aviso-torneo[hidden] { display: none; }

.aviso-torneo .icono-aviso {
  flex: none; display: flex; color: var(--atencion);
  /* Alineada con la primera línea del título, no con el centro de la
     caja: con un aviso de tres renglones la campana quedaba en medio
     del texto. */
  margin-top: 1px;
}
.aviso-torneo .icono-aviso svg { width: 20px; height: 20px; }

.aviso-torneo .lo-del-aviso { min-width: 0; flex: 1; }
.aviso-torneo strong {
  display: block; font-size: 1rem; font-weight: 700;
  line-height: 1.3; color: var(--texto);
}
.aviso-torneo p {
  margin: 4px 0 0; font-size: .89rem; line-height: 1.45; color: var(--suave);
  /* Un aviso largo no puede correr la página de lado. */
  overflow-wrap: anywhere;
}

.aviso-torneo .cierra-aviso {
  flex: none;
  /* 44x44, como toda la app: por debajo de eso se falla el toque, y
     justo debajo suele quedar el primer link de la página. */
  width: 44px; height: 44px; margin: -11px -11px -11px 0;
  background: none; border: none; cursor: pointer;
  color: var(--tenue); font-size: 1.5rem; line-height: 1;
  border-radius: 8px;
}
.aviso-torneo .cierra-aviso:hover { color: var(--texto); background: var(--borde); }
.aviso-torneo .cierra-aviso[hidden] { display: none; }

/* ---------- Banners del organizador ---------- */
/* LOS BANNERS DEL ORGANIZADOR, EN SLIDER (4.6.0)
   ---------------------------------------------------------------------
   *«Deben de aparecer hasta arriba, es lo primero. Y deben de ser como
   un slider, con sus puntitos abajo, y se van deslizando uno por uno.»*

   Se desliza con el dedo, con `scroll-snap` de CSS y sin una línea de
   JavaScript. Lo que `publico.js` agrega es marcar el puntito del que
   se está viendo y girar solo cada 5 segundos — comodidad, nunca
   función: **los puntitos son enlaces de verdad** (`#banner-2`). */
.banners-torneo .tira-banners {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra de desplazamiento se esconde: el slider se entiende por
     los puntitos y por el pedacito del siguiente que se asoma. */
  scrollbar-width: none;
}
.banners-torneo .tira-banners::-webkit-scrollbar { display: none; }
.banners-torneo .banner-uno {
  flex: 0 0 100%; scroll-snap-align: center;
  /* La barra de arriba ya no es fija adentro de un torneo, pero el
     ancla de un puntito no puede dejar el banner debajo de nada. */
  scroll-margin-top: 80px;
}
.banners-torneo a, .banners-torneo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radio); overflow: hidden; line-height: 0;
}
.banners-torneo a { border: 1px solid var(--borde); }

.puntos-banners {
  display: flex; justify-content: center; gap: 4px; margin-top: 10px;
}
/* El blanco de toque es de 24x24 aunque el puntito se vea de 8: por
   debajo de eso se falla el dedo. Es el mismo cuidado de la ✕ de los
   popups del marcador. */
.puntos-banners a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
}
.puntos-banners a span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--borde); transition: background .2s, transform .2s;
}
.puntos-banners a.aqui span { background: var(--marca-usable); transform: scale(1.25); }
.puntos-banners a:hover span { background: var(--suave); }

@media (prefers-reduced-motion: reduce) {
  .banners-torneo .tira-banners { scroll-behavior: auto; }
}

/* =============================================================
   3 · ¿CUÁNDO JUEGA MI EQUIPO ESTA SEMANA?  (la jornada)
   ============================================================= */
.cabeza-seccion { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cabeza-seccion h2 { margin: 0; font-size: clamp(1.25rem, 3.4vw, 1.7rem); font-weight: 800; letter-spacing: -.01em; }
.cabeza-seccion h2 .remate { color: var(--marca-usable); }
.cabeza-seccion .eyebrow-seccion {
  flex-basis: 100%; order: -1;
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--marca-usable);
  margin: 0;
}
.como-va { margin-left: auto; color: var(--tenue); font-size: .84rem; font-family: var(--mono); }

/* LA BARRA DE LA JORNADA: ‹ | Jornada 3 · sáb 19 sep | ›
   ---------------------------------------------------------------------
   UNA FILA Y UN SOLO RENGLÓN, que es la regla que puso el usuario para
   toda la página: *«si es un tipo de información, en un renglón; no
   quiero dobles renglones de una misma información»*.

   Antes las tres piezas eran columnas de dos líneas (la palabra arriba,
   el detalle abajo) y la barra medía 76 px. Las flechas perdieron su
   texto —«ponle solo las flechitas»— y el centro pasó a una línea que
   se recorta con «…» en vez de partirse. */
.paso-jornada {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 6px;
  margin-bottom: 18px;
}
.flecha-jornada {
  flex: 0 0 auto; width: 44px; height: 44px;   /* 44: para que el dedo no falle */
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; text-decoration: none;
  color: var(--suave); font-size: 1.5rem; font-weight: 700; line-height: 1;
  transition: background .15s, color .15s;
}
.flecha-jornada:hover { background: var(--panel-2); color: var(--texto); }
.flecha-jornada.apagada { opacity: .3; pointer-events: none; }

/* `min-width: 0` es lo que deja que el «…» funcione: sin eso un hijo de
   un flex no se encoge por debajo de su contenido y el texto empuja las
   flechas fuera de la barra. */
.cual-jornada {
  flex: 1 1 auto; min-width: 0; margin: 0;
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; line-height: 1.2;
}
.cual-jornada strong {
  font-size: .95rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.cual-jornada strong::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--marca-usable); margin-right: 7px; vertical-align: 1px;
}
.cual-jornada span {
  flex: 0 0 auto;
  color: var(--tenue); font-size: .74rem; font-family: var(--mono);
}
.cual-jornada span::before { content: "·"; margin-right: 8px; }

/* EL CAMBIO DE DÍA: AIRE Y UNA LÍNEA, NUNCA TEXTO (5.9.0)

   *«Si dos fichas son del mismo día, cada una va a tener su fecha, como
   siempre, en la pastillita azul. Pero esas dos tienen su margen normal.
   Y cuando va a iniciar otro día, hay una ligera separación mayor o hay
   un separador tipo línea. Pero no se repiten fechas, no vamos a ser
   redundantes en eso.»*

   Antes cada día llevaba su título («VIERNES 18 DE SEPTIEMBRE») y la
   cinta de la ficha enseñaba solo la hora. Ahora es al revés: la fecha
   vive en la cinta y el grupo se separa solo.

   El `padding-top` cuenta el sobrante de la cinta, que se monta 13 px
   por encima de su ficha — es el mismo cuidado del hueco entre fichas
   de la 4.4.0. Sin contarlo, la línea queda pegada a la primera cinta
   del día nuevo. */
.grupo-del-rol + .grupo-del-rol {
  margin-top: 30px; padding-top: 43px;
  border-top: 1px solid var(--borde);
}

/* El título se quedó SOLO para los grupos que no son una fecha: en
   «Por programar» no hay fecha en la cinta y este renglón es lo único
   que dice de qué jornada se trata. */
.dia-del-rol {
  /* El hueco de ABAJO es grande a propósito: la cinta de la ficha se
     monta 13 px por encima de su borde, así que con los 10 px de antes
     el título quedaba pegado a la cinta. Lo reportó el usuario:
     *«me tienes la fecha demasiado pegado a la fecha»*. */
  margin: 0 0 26px;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--tenue);
}

/* La rejilla de fichas: dos por renglón en pantalla ancha, una en el celular. */
/* Fichas ANCHAS, no muchas y estrechas. Con un mínimo de 340 px salían
   tres columnas en una computadora y adentro de cada una el nombre del
   equipo se cortaba en «Toros del…» — con media pantalla vacía al lado.
   Con 430 salen dos, y el nombre entra completo. */
/* EL HUECO ENTRE FICHAS ES GRANDE A PROPÓSITO, y es lo que el usuario
   reportó dos veces: *«cada ficha está muy pegada a la otra, hay que
   dejar más espacio, muchísimo más espacio, se ve pésimo»*.
   La causa no se ve mirando el número: **la cinta sobresale 13 px por
   encima de cada ficha**, así que con `gap: 14px` quedaba 1 px de aire
   de verdad entre una ficha y la cinta de la siguiente. El hueco tiene
   que contar esos 13. */
.lista-partidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 30px 16px; }
/* minmax(0, 1fr) y no `1fr`: un `1fr` pelado deja que la ficha crezca
   hasta su contenido mínimo, y en un celular de 320 px eso corría la
   página entera de lado. Con el 0 la ficha se encoge y los nombres
   largos se cortan con puntos, que es lo que ya hacen. */
@media (max-width: 470px) {
  .lista-partidos { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* =====================================================================
   LA FICHA SOLA VA A TODO LO ANCHO Y CENTRADA (4.2.0)

   *«Cuando solo es un partido en una determinada fecha, se queda
   alineado a la izquierda. No me gusta. Prefiero que esté centradito y
   esté bonito… Cuando sean números impares, los primeros dos se
   dividen en dos columnas, y el último, si es de la misma fecha, que me
   ocupe todo bien centradito. En celulares no hay problema: es uno
   abajo del otro siempre.»*

   `:last-child:nth-child(odd)` es la pieza, y dice exactamente eso: la
   ÚLTIMA ficha, cuando su posición es impar. Eso pasa solo cuando el
   grupo tiene un número impar de partidos — y una ficha sola es el caso
   de 1, que también es impar. Sin contar nada en PHP y sin una clase
   que haya que acordarse de poner.

   **Cada `.lista-partidos` es UN día**, así que «de la misma fecha» sale
   solo: el conteo es por contenedor.

   **En el celular no cambia nada**, y tampoco hace falta una consulta
   de medios: con una sola columna, `grid-column: 1 / -1` es esa misma
   columna. El ancho útil del sitio es 1040 px y la ficha pide 430
   mínimo, así que arriba nunca hay más de dos columnas: «todo lo ancho»
   es siempre el ancho de las dos. */
.lista-partidos > .partido-publico:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Y adentro, el cruce se queda del mismo ancho que en una ficha normal,
   centrado. Si se estirara, los dos escudos se irían a los extremos con
   medio metro de vacío en medio y el marcador perdido: la ficha sería
   más ancha pero se leería peor. La cinta de arriba y el pie ya van
   centrados solos. */
.lista-partidos > .partido-publico:last-child:nth-child(odd) .cruce-publico {
  max-width: 520px;
  margin-inline: auto;
}

/* =====================================================================
   LA FICHA DE UN PARTIDO  (rediseñada en la 2.0)

   El usuario la revisó en su celular: «me gusta la ficha que teníamos,
   pero se ve muy pequeña». Se le dieron tres versiones de prueba y
   eligió ésta: **logos grandes con el nombre DEBAJO**, el marcador
   grande en medio y una cinta arriba que dice en qué va el partido.
   ===================================================================== */
:root { --verde: #16A34A; }
:root[data-tema="oscuro"] { --verde: #22C55E; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --verde: #22C55E; } }

.partido-publico {
  position: relative;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 20px; padding: 34px 16px 16px;
  box-shadow: var(--sombra); text-align: center;
  transition: transform .18s ease, border-color .18s ease;
}
.partido-publico:hover { transform: translateY(-2px); border-color: var(--tenue); }
.partido-publico.jugado { background: color-mix(in srgb, var(--panel) 70%, var(--fondo)); }
/* En vivo: el borde se pinta de la marca y la cinta flota sobre él. */
.partido-publico.en-vivo { border-color: var(--marca-usable); box-shadow: 0 0 0 1px var(--marca-usable), var(--sombra); }

/* LA CINTA, montada sobre el borde de arriba y centrada. Es la misma
   pieza en los tres estados —la fecha, «Jugándose», «Finalizado»—,
   así que se ve una sola cosa y no tres controles distintos. */
.marca-vivo, .estado-partido {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 24px);
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.estado-partido { background: var(--panel-2); border: 1px solid var(--borde); color: var(--suave); }
/* La cinta de un partido que VIENE lleva fondo lleno, no transparente:
   lo pidió el usuario al elegir el diseño. */
.estado-partido.viene { background: var(--frio); border-color: var(--frio); color: var(--sobre-frio, #fff); }
.estado-partido.aviso { background: var(--vivo); border-color: var(--vivo); color: #fff; }

.marca-vivo {
  background: var(--marca); border: 1px solid var(--marca); color: var(--marca-letra, #fff);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
}
.marca-vivo.apagada { display: none; }
.en-vivo .estado-partido { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .marca-vivo:not(.apagada)::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
    background: currentColor; animation: late 1.6s ease-in-out infinite;
  }
}
@keyframes late { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* EL CRUCE: escudo grande con el nombre debajo, el marcador en medio.
   minmax(0, 1fr) y no 1fr: un `1fr` pelado trae `min-width: auto`, así
   que un nombre largo empujaba la ficha más allá del ancho de la
   pantalla y la página se corría de lado en un celular chico. */
.cruce-publico {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px; align-items: center;
}
.cruce-publico .lado { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* `align-self: stretch` es lo que hace que el «…» del nombre funcione.
   Sin él, en un flex en columna con `align-items: center` el hijo mide
   lo que mide su contenido, así que el `max-width: 100%` del nombre se
   resolvía contra sí mismo y un nombre largo corría la página de lado
   en un celular. Con `stretch` toma el ancho de su columna del grid,
   que ya es `minmax(0, 1fr)`. */
.cruce-publico .lado .equipo-tocable {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  align-self: stretch; min-width: 0; text-decoration: none; color: inherit;
}
.cruce-publico .escudo-grande, .cruce-publico .escudo-inicial {
  width: 82px; height: 82px; font-size: 1.4rem;
}
/* EL NOMBRE DEL EQUIPO VA EN UN SOLO RENGLÓN (3.4.0).
   ---------------------------------------------------------------------
   *«Tengo un equipo que se llama Mantarrayas y la s termina en un
   renglón abajo, no me gusta para nada. Tengo otro que se llama Jefe de
   jefes, ocupa dos renglones y siento que me roba espacio.»*

   Eran dos cosas a la vez:

   1. `max-width: 13ch` lo estrangulaba a 88 px cuando su columna tenía
      123 px libres — «MANTARRAYAS» se partía por una sola letra. El
      ancho ahora lo pone la columna, que ya es `minmax(0, 1fr)` y por
      eso un nombre largo nunca corre la página de lado.
   2. Podía partirse. Ahora NO: una línea, y lo que no entra se corta
      con «…». El nombre completo va en el `title` y la ficha entera
      lleva a la página del equipo, así que no se pierde nada. */
.cruce-publico .lado .nombre {
  display: block; align-self: stretch; max-width: 100%; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .78rem; font-weight: 700; line-height: 1.25;
  letter-spacing: .03em; text-transform: uppercase; color: var(--suave);
}
.cruce-publico .lado.gano .nombre { color: var(--texto); }
.cruce-publico .lado.por-definir .nombre { font-style: italic; font-weight: 600; }
.cruce-publico .lado.por-definir { gap: 11px; }
.escudo-inicial.vacio { color: var(--tenue); border-color: var(--borde); }

.escudo-grande, .escudo-inicial { width: 42px; height: 42px; }
.escudo-inicial { font-size: .82rem; }
.escudo-inicial.frio  { color: var(--frio); border-color: var(--frio); }
.escudo-inicial.marca { color: var(--marca-usable); border-color: var(--marca-usable); }
.jugado .escudo-inicial.marca, .jugado .escudo-inicial.frio { color: var(--suave); border-color: var(--borde); }

/* El centro se sube un poco (padding abajo) para quedar a la altura de
   los escudos y no del nombre, que va más abajo. */
.cruce-publico .centro { padding-bottom: 26px; }
.cruce-publico .marcador {
  display: flex; align-items: baseline; justify-content: center; gap: 9px;
  font-family: var(--mono); font-weight: 700; letter-spacing: -.05em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
/* El marcador, «un poquito más grande» de lo que se probó: es lo que
   pidió el usuario al elegir el diseño. */
.cruce-publico .marcador .num { font-size: 2.9rem; color: var(--tenue); }
.cruce-publico .marcador .num.gano { color: var(--texto); }
.cruce-publico .marcador i { font-style: normal; font-size: 1.6rem; color: var(--tenue); }
.en-vivo .marcador .num, .en-vivo .marcador .num.gano { color: var(--frio); }
.cruce-publico .marcador .vs {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--marca-usable);
}
.cruce-publico .bajo-marcador {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: .56rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
}

/* EL PIE, EN UN SOLO RENGLÓN: la cancha, «Abrir mapa ↗» y el botón de
   agendar. Un partido YA JUGADO lo lleva `discreto`: una sola línea
   chica con la fecha y la cancha, y ningún botón. */
.donde-partido {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--borde);
  /* `nowrap`: el pie es UN renglón y nada lo dobla. Lo que no cabe es
     el nombre de la cancha, y ése se recorta con «…» — que es la regla
     de «una información, un renglón». */
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap;
  font-size: .8rem; color: var(--tenue); line-height: 1.3;
}
.donde-partido .lugar-partido {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 0; text-decoration: none; color: inherit;
}
.donde-partido .lugar-partido .pin { width: 17px; height: 17px; flex: none; color: var(--frio); }
.donde-partido .lugar-partido strong {
  min-width: 0;   /* sin esto los puntos suspensivos no recortan nada */
  color: var(--texto); font-weight: 700; font-size: .84rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.donde-partido .lugar-partido:hover strong,
.donde-partido .lugar-partido:hover .pin { color: var(--marca-usable); }

.donde-partido .abrir-mapa {
  flex: none; color: var(--frio); text-decoration: none;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
}
.donde-partido .abrir-mapa svg { width: 18px; height: 18px; flex: none; }
.donde-partido .abrir-mapa:hover .con-espacio { text-decoration: underline; }

/* EN EL CELULAR SE VAN LAS PALABRAS Y QUEDAN LOS ICONOS. Es lo que hace
   que la cancha, el mapa y el botón de agendar entren en un renglón en
   360 px sin apretar el nombre de la cancha a dos letras. El blanco de
   toque se queda en 40x40, que es lo que pide el dedo. */
@media (max-width: 560px) {
  .donde-partido .con-espacio { display: none; }
  .donde-partido .abrir-mapa,
  .donde-partido .accion-verde {
    width: 40px; min-width: 40px; padding: 0; justify-content: center; gap: 0;
  }
  .donde-partido .abrir-mapa { border: 1px solid var(--borde); border-radius: 10px; }
}

/* Discreto: chiquito, sin adornos y sin botones. «Ya no tiene caso que
   se vea abrir mapa; quizás algo más chico que diga jugado en, pero
   muy discreto». */
.donde-partido.discreto { gap: 7px; font-size: .76rem; }
.donde-partido.discreto .lugar-partido .pin { display: none; }
.donde-partido.discreto .lugar-partido strong { font-weight: 600; font-size: .76rem; color: var(--suave); }
.donde-partido.discreto .jugado-el:not(:last-child)::after { content: " ·"; }

.accion-verde {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 8px 14px;
  border-radius: 10px; text-decoration: none;
  background: var(--verde); color: #fff;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  transition: filter .15s, transform .15s;
}
.accion-verde svg { width: 16px; height: 16px; }
.accion-verde:hover { filter: brightness(1.08); transform: translateY(-1px); }

.acciones-rol { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acciones-rol .btn { flex: 1 1 200px; }

/* EL AIRE DE ARRIBA CUENTA LA CINTA (5.9.0). Lo reportó el usuario con
   su captura: *«en la ficha de finalizado sigue estando muy pegado a
   ver calendario completo, hay que dejar margen en ese espacio»*. Eran
   16 px contra el borde de la última ficha, que en la pantalla se leen
   como nada: justo arriba está el aire de 30 px entre fichas y abajo
   una caja con su propio relleno. */
.calendario-completo { margin-top: 46px; }
.calendario-completo > summary {
  cursor: pointer; list-style: none;
  padding: 14px 18px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-weight: 600; font-size: .92rem; color: var(--marca-usable);
  display: flex; align-items: center; gap: 8px;
}
.calendario-completo > summary::-webkit-details-marker { display: none; }
.calendario-completo > summary::before { content: "▸"; transition: transform .15s; }
.calendario-completo[open] > summary::before { transform: rotate(90deg); }

/* =============================================================
   CÓMO QUEDÓ EL TORNEO: EL PODIO Y EL RANKING (4.8.0)

   *«Cuando termina un torneo… inmediatamente la página, por
   categorías, te dice quién es el primero, segundo, tercero, cuarto,
   quinto y te hace un ranking. Quiero tener mi ranking.»*

   El 1º va **en medio y más grande**, el 2º a su izquierda y el 3º a su
   derecha: como se para un podio de verdad. El orden de LECTURA sigue
   siendo 1-2-3 —eso es lo que oye quien no ve la pantalla— y lo que
   cambia es dónde se dibuja cada uno.
   ============================================================= */
.resultado-final .podio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end; gap: 12px;
  margin-bottom: 22px;
}
/* El HTML va 1-2-3 —así lo lee quien no ve la pantalla— y aquí se
   acomoda 2-1-3, con el campeón en medio. */
.en-el-podio.lugar-1 { order: 2; }
.en-el-podio.lugar-2 { order: 1; }
.en-el-podio.lugar-3 { order: 3; }
.en-el-podio {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; text-align: center;
  padding: 18px 10px 16px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio);
}
/* El campeón: más alto, con el borde de la marca y un resplandor. */
.en-el-podio.lugar-1 {
  padding-top: 26px; padding-bottom: 22px;
  border-color: var(--marca-usable);
  box-shadow: 0 0 0 1px var(--marca-usable), 0 14px 34px -18px var(--marca-usable);
}
.en-el-podio .medalla {
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; color: var(--tenue);
}
.en-el-podio.lugar-1 .medalla { color: var(--marca-usable); font-size: .92rem; }
.en-el-podio .equipo-tocable {
  flex-direction: column; align-items: center; gap: 8px;
  max-width: 100%; align-self: stretch;
}
.en-el-podio .nombre {
  font-weight: 800; font-size: .92rem; line-height: 1.2;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.en-el-podio.lugar-1 .nombre { font-size: 1.05rem; }
.en-el-podio .que-fue {
  font-family: var(--mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
}
.en-el-podio.lugar-1 .que-fue { color: var(--marca-usable); }

/* EN EL CELULAR SE APILAN POR ORDEN DE LUGAR, no en tres columnas de
   120 px donde no entra ni un nombre. Y ahí el campeón va PRIMERO: un
   podio apilado que empiece por el segundo no se entiende. */
@media (max-width: 560px) {
  .resultado-final .podio { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .en-el-podio { flex-direction: row; align-items: center; text-align: left; padding: 14px; gap: 12px; }
  /* Apilados, el campeón va PRIMERO: un podio en columna que empiece
     por el segundo no se entiende. */
  .en-el-podio.lugar-1 { order: 1; }
  .en-el-podio.lugar-2 { order: 2; }
  .en-el-podio.lugar-3 { order: 3; }
  .en-el-podio .equipo-tocable { flex-direction: row; align-items: center; flex: 1 1 auto; min-width: 0; }
  .en-el-podio .medalla { flex: none; width: 28px; }
  .en-el-podio .que-fue { flex: none; }
  .en-el-podio.lugar-1 .nombre { font-size: .98rem; }
}

/* El botón de la imagen para redes. Nace escondido y lo prende
   `publico-ranking.js`: si no carga, el ranking de arriba ya está
   dibujado con HTML de verdad y no se pierde nada. */
.acciones-ranking { margin: 0 0 18px; }
.acciones-ranking .btn[hidden] { display: none; }

.resto-del-ranking { list-style: none; margin: 0; padding: 0; }
.resto-del-ranking li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--borde);
}
.resto-del-ranking li:last-child { border-bottom: none; }
.resto-del-ranking .su-lugar {
  flex: none; width: 30px;
  font-family: var(--mono); font-size: .84rem; font-weight: 700; color: var(--tenue);
}
.resto-del-ranking .equipo-tocable { flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; }
.resto-del-ranking .nombre {
  min-width: 0; font-weight: 700; font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resto-del-ranking .su-record {
  flex: none; font-family: var(--mono); font-size: .8rem; color: var(--tenue);
}

/* =============================================================
   4 · LA TABLA DE POSICIONES, simple
   ============================================================= */
.tabla-scroll {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  box-shadow: var(--sombra);
}
table.posiciones {
  width: 100%; min-width: 560px;
  border-collapse: collapse;
  font-size: .92rem; font-variant-numeric: tabular-nums;
}
table.posiciones th, table.posiciones td {
  padding: 13px 14px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--borde);
}
table.posiciones thead th {
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
  white-space: nowrap; padding-top: 14px; padding-bottom: 10px;
}
table.posiciones tbody tr { transition: background .15s; }
table.posiciones tbody tr:hover { background: var(--panel-2); }
table.posiciones tbody tr:last-child td { border-bottom: none; }
table.posiciones tr.el-mio { background: var(--marca-suave); }

table.posiciones .lugar { width: 56px; }
table.posiciones .lugar .puesto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  background: var(--panel-2); color: var(--suave);
}
table.posiciones tr.clasifica .lugar .puesto { background: var(--frio); color: #04222a; }
table.posiciones tr.retirado { opacity: .55; }
table.posiciones tr.retirado .como-viene { color: var(--vivo); }

table.posiciones .nombre-equipo { font-weight: 700; white-space: nowrap; }
table.posiciones .nombre-equipo .ficha-equipo { display: flex; align-items: center; gap: 10px; }
table.posiciones .nombre-equipo .ficha-equipo > div { display: flex; flex-direction: column; line-height: 1.25; }
table.posiciones .nombre-equipo a { color: inherit; text-decoration: none; }
table.posiciones .nombre-equipo a:hover { color: var(--marca-usable); }
table.posiciones .nombre-equipo .como-viene { font-size: .74rem; font-weight: 500; color: var(--tenue); }
table.posiciones tr.clasifica .como-viene { color: var(--frio); }
table.posiciones tr.el-mio .nombre-equipo a { color: var(--marca-usable); }

table.posiciones .record { text-align: center; white-space: nowrap; }
table.posiciones .record .pastilla {
  display: inline-block; padding: 4px 10px; border-radius: 8px;
  background: var(--panel-2); font-size: .8rem; font-weight: 600; color: var(--suave);
}
table.posiciones .victorias { width: 150px; text-align: center; }
table.posiciones .barra-victorias {
  display: block; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--panel-2); margin: 0 auto 5px; width: 100px;
}
table.posiciones .barra-victorias i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--marca-usable);
}
table.posiciones tr.invicto .barra-victorias i { background: var(--frio); }
table.posiciones .victorias small { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--tenue); text-transform: uppercase; }
table.posiciones .pts { text-align: right; white-space: nowrap; }
table.posiciones .pts strong { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--marca-usable); letter-spacing: -.03em; }
table.posiciones .pts::after { content: "pts"; display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
table.campeones .pts::after { content: none; }

/* La racha: los últimos partidos, el más reciente primero. */
table.posiciones th.racha, table.posiciones td.racha { white-space: nowrap; }
.posiciones .bolita {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  font-family: var(--mono); font-size: .6rem; font-weight: 700; color: #fff; margin-right: 3px;
}
.posiciones .bolita.gano   { background: #157347; }
.posiciones .bolita.perdio { background: #b02a37; }
.posiciones .bolita.empato { background: var(--tenue, #8b909c); }
.posiciones .sin-racha { color: var(--tenue); }

/* =====================================================================
   LA TABLA SIMPLE, REHECHA PARA EL CELULAR (4.5.0)

   *«La vista simple en PC me encanta, pero en celulares no me gusta.
   Se ve muy pequeña. De hecho, la vista avanzada se ve muchísimo mejor
   que la simple. Quiero un rediseño de la simple en móviles,
   exclusivamente en móviles, porque como está en PC me encanta.»*

   **La causa se mide:** la tabla pide 560 px de ancho mínimo, así que en
   un celular de 360 se corría 477 px de lado — y lo que quedaba fuera
   de la pantalla eran **los puntos, el récord y la racha**, o sea todo
   lo que la gente viene a ver. Solo se veían el lugar y el nombre.

   Así que en el celular **deja de ser una tabla y pasa a ser una lista
   de tarjetas**: nada se sale, nada se corre y no se pierde ni un dato.
   En la computadora NO cambia una sola línea — es una consulta de
   medios y la vista avanzada ni se toca (ahí la tabla de toda la vida
   es lo correcto, y el usuario dijo que le gusta).

   La clase `.simple` en el `<table>` es lo que las separa: la avanzada
   y la de campeones usan las mismas reglas de base y cada una tiene su
   propio arreglo. */
@media (max-width: 560px) {
  .tabla-scroll[data-vista="simple"] { overflow-x: visible; }

  /* La <table> también pasa a bloque. Sin esto sigue midiendo por el
     algoritmo de tablas —que mira el contenido de sus celdas— y un
     nombre largo la sacaba 13 px de la pantalla aunque las filas ya
     fueran flex. */
  table.posiciones.simple { display: block; min-width: 0; width: 100%; }
  table.posiciones.simple thead { display: none; }
  table.posiciones.simple tbody,
  table.posiciones.simple tr,
  table.posiciones.simple td { display: block; }

  /* UN GRID CON ÁREAS, no un flex con `wrap`.
     Con flex hay que elegir entre dos males: con `flex-basis: auto` el
     nombre parte de su ancho de contenido y un nombre largo saca la
     tabla de la pantalla; con `basis: 0` se encoge tanto que el récord
     le cabe al lado y el nombre desaparece. El grid dice dónde va cada
     cosa y no depende del largo del texto. */
  table.posiciones.simple tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "puesto equipo pts"
      "record record racha"
      "barra  barra  barra";
    gap: 9px 10px; align-items: center;
    padding: 14px; border-bottom: 1px solid var(--borde);
  }
  table.posiciones.simple tr:last-child { border-bottom: none; }
  table.posiciones.simple td { padding: 0; border: none; }

  table.posiciones.simple td.lugar { grid-area: puesto; width: auto; }
  table.posiciones.simple td.nombre-equipo { grid-area: equipo; min-width: 0; }
  table.posiciones.simple td.pts { grid-area: pts; text-align: right; }
  table.posiciones.simple td.record { grid-area: record; text-align: left; }
  table.posiciones.simple td.racha { grid-area: racha; text-align: right; }
  table.posiciones.simple td.victorias { grid-area: barra; width: auto; }

  /* El nombre en UN renglón, con «…» si no entra. Es la regla de
     siempre y aquí muerde: «Toros del Norte» al lado de un escudo y de
     los puntos no cabe en 360 px. */
  table.posiciones.simple .nombre-equipo { white-space: normal; }
  /* El `min-width: 0` va en TODA la cadena de flex, no solo en el
     último: basta que un ancestro se quede con su mínimo automático
     para que los puntos suspensivos no recorten nada. */
  table.posiciones.simple .nombre-equipo .ficha-equipo { min-width: 0; }
  table.posiciones.simple .nombre-equipo .ficha-equipo > span { min-width: 0; }
  table.posiciones.simple .nombre-club {
    display: block; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  table.posiciones.simple .como-viene {
    display: block; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Los puntos, que eran lo que se quedaba fuera de la pantalla, ahora
     son lo más grande de la tarjeta. */
  table.posiciones.simple td.pts strong { font-size: 1.5rem; }
  table.posiciones.simple td.pts::after { font-size: .54rem; }

  /* La barra de victorias se queda —es lo que hace «simple» a esta
     vista— pero fina y sin su porcentaje escrito: el récord de al lado
     ya dice los números, y repetirlo es el doble renglón que el usuario
     no quiere. */
  table.posiciones.simple .barra-victorias { width: 100%; height: 5px; }
  table.posiciones.simple td.victorias small { display: none; }

  /* ---------- Y LOS CAMPEONES ANTERIORES, igual ----------
     *«Lo mismo: la vista en PC de campeones anteriores me gusta, la de
     móviles no. Necesito un rediseño mejor.»* Tenía el mismo problema y
     peor: el nombre del campeón salía cortado a la mitad («Halc…»),
     que es justo el dato por el que se entra a esa tabla. */
  table.posiciones.campeones { display: block; min-width: 0; width: 100%; }
  table.posiciones.campeones thead { display: none; }
  table.posiciones.campeones tbody,
  table.posiciones.campeones tr,
  table.posiciones.campeones td { display: block; }
  table.posiciones.campeones tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "cuando  categoria"
      "campeon campeon"
      "segundo segundo";
    gap: 9px 10px; align-items: center;
    padding: 14px; border-bottom: 1px solid var(--borde);
  }
  table.posiciones.campeones tr:last-child { border-bottom: none; }
  table.posiciones.campeones td { padding: 0; border: none; }

  /* El año y la categoría van juntos arriba, chiquitos: son la etiqueta
     de la tarjeta, no su contenido. El campeón manda. */
  table.posiciones.campeones td.lugar { grid-area: cuando; }
  table.posiciones.campeones td.lugar + td {
    grid-area: categoria; min-width: 0;
    color: var(--suave); font-size: .84rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  table.posiciones.campeones td.nombre-equipo { grid-area: campeon; min-width: 0; }
  table.posiciones.campeones td.subcampeon { grid-area: segundo; min-width: 0; }
  table.posiciones.campeones .quien-campeon { min-width: 0; max-width: 100%; }
}

/* El campeón y el subcampeón, con su escudo. En la computadora van en
   su columna de siempre; lo único nuevo es el escudo al lado. */
.quien-campeon { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.quien-campeon > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.campeones .nombre-club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campeones td.subcampeon .quien-campeon { opacity: .85; font-weight: 600; }
@media (max-width: 560px) { .posiciones .bolita:nth-of-type(n+4) { display: none; } }

.nota-tabla { margin: 12px 0 0; color: var(--tenue); font-size: .84rem; line-height: 1.6; }
.titulo-grupo {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--suave); margin: 22px 0 8px;
}
.titulo-grupo:first-of-type { margin-top: 0; }

/* Campeones anteriores reusa la tabla, con sus celdas normales. */
table.campeones td { text-align: left; }
table.campeones .lugar { color: var(--marca-usable); font-weight: 700; width: auto; }
.nota-campeon { display: block; color: var(--tenue); font-size: .8rem; font-weight: 400; }

/* La edición o temporada, debajo del año; y el subcampeón, cuando se
   sabe. Los dos son opcionales (3.2.0). */
.campeones .edicion-campeon {
  display: block; margin-top: 3px;
  font-size: .72rem; font-weight: 500; letter-spacing: .02em;
  text-transform: none; color: var(--tenue);
}
.campeones td.subcampeon { color: var(--suave); }

/* =============================================================
   5 · RUTA A LA GRAN FINAL (el cuadro)
   El cuadro se desplaza SOLO a lo ancho. La página nunca se mueve.
   ============================================================= */
.cuadro-publico {
  display: flex; gap: 18px;
  overflow-x: auto; padding: 4px 2px 14px;
  -webkit-overflow-scrolling: touch;
}
.ronda-publica {
  display: flex; flex-direction: column; justify-content: space-around;
  gap: 12px; min-width: 240px; flex: 0 0 auto;
}
.ronda-publica h3 {
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--frio); margin: 0 0 2px;
}
.llave-publica {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 10px 12px;
  border-left: 3px solid var(--borde);
}
.llave-publica.jugado { border-left-color: var(--marca-usable); }
.llave-publica .llave-titulo {
  display: block; font-family: var(--mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tenue); margin-bottom: 5px;
}
.llave-publica .llave-lado { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .95rem; }
.llave-publica .llave-lado + .llave-lado { border-top: 1px solid var(--borde); }
.llave-publica .llave-lado .nombre { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llave-publica .llave-lado .puntos { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.llave-publica .llave-lado.gano { font-weight: 700; color: var(--marca-usable); }
.llave-publica .llave-lado.por-definir .nombre { color: var(--suave); font-style: italic; }
.llave-publica .llave-pie { display: block; margin-top: 6px; font-family: var(--mono); font-size: .66rem; color: var(--tenue); }

/* =============================================================
   6 · PLANTILLAS y SEDES
   ============================================================= */
.plantillas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.plantilla {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra);
}
.plantilla h3 { margin: 0 0 12px; font-size: 1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plantilla h3 span {
  flex-basis: 100%; font-family: var(--mono); font-size: .62rem; font-weight: 700;
  color: var(--tenue); text-transform: uppercase; letter-spacing: .1em;
}
.plantilla ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plantilla li { display: flex; align-items: center; gap: 9px; font-size: .9rem; flex-wrap: wrap; }
.plantilla .numero {
  min-width: 30px; text-align: center; font-family: var(--mono); font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: 6px; padding: 1px 4px;
  color: var(--marca-usable); font-size: .8rem;
}
.plantilla .posicion { margin-left: auto; font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.numeritos-jugador { display: block; flex-basis: 100%; padding-left: 39px; font-size: .74rem; color: var(--suave); }
.numeritos-jugador strong { color: var(--texto); font-family: var(--mono); }
.numeritos-jugador span { margin-left: 6px; color: var(--tenue); }

.sedes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.sede {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 6px;
}
.sede h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.sede p { margin: 0; color: var(--suave); font-size: .9rem; }
.sede .canchas-de-sede { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--frio); }
.sede .nota-sede { color: var(--tenue); font-size: .84rem; }
.sede .btn { margin-top: 8px; padding: 10px 14px; font-size: .84rem; }

/* ---------- Piezas que van por la marca ---------- */
.se-actualiza::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vivo); margin-right: 6px; animation: late 2s ease-in-out infinite;
}
.torneo:hover { border-color: var(--marca); }
.cabeza-seccion a { color: var(--marca-usable); }

/* =============================================================
   ANIMACIONES SUTILES — solo si el celular no pide «reducir movimiento»
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  .partido-publico, .cifra, .plantilla, .sede, .tabla-scroll, .llave-publica {
    animation: aparece .45s ease-out both;
  }
  .lista-partidos > :nth-child(2), .cifras-torneo > :nth-child(2) { animation-delay: .06s; }
  .lista-partidos > :nth-child(3), .cifras-torneo > :nth-child(3) { animation-delay: .12s; }
  .lista-partidos > :nth-child(4), .cifras-torneo > :nth-child(4) { animation-delay: .18s; }
  .lista-partidos > :nth-child(n+5) { animation-delay: .22s; }
  table.posiciones .barra-victorias i { animation: crece .7s ease-out both; transform-origin: left; }
}
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .se-actualiza::before, .marca-vivo::before { animation: none; }
  .partido-publico:hover { transform: none; }
}

@media (max-width: 620px) {
  .logo-torneo { width: 64px; height: 64px; border-radius: 14px; }
  .marca-torneo { gap: 14px; }
  /* EL BOTÓN DE COMPARTIR SE QUEDA EN EL RENGLÓN DE LAS PASTILLAS.
     Este bloque lo mandaba a una línea propia con `flex-basis: 100%`,
     y tenía sentido cuando eran dos botones grandes. Desde la 4.7.0 es
     UNO de 40x40, y el usuario lo pidió así: *«el botón de compartir
     no me gusta que esté en un renglón solo, ocupa mucha pantalla;
     que esté donde está liga, jornada»*. */
  .cabeza-arriba .acciones-cabeza { margin-left: auto; flex-basis: auto; }
  .flecha-jornada { width: 40px; }
  .cual-jornada strong { font-size: .88rem; }
  /* La ficha se encoge un poco, pero los escudos siguen GRANDES: es
     justo lo que el usuario pidió al elegir este diseño. */
  .partido-publico { padding: 32px 12px 14px; }
  .cruce-publico { gap: 5px; }
  .cruce-publico .escudo-grande, .cruce-publico .escudo-inicial { width: 68px; height: 68px; font-size: 1.2rem; }
  .cruce-publico .lado .equipo-tocable { gap: 9px; }
  /* Sin el espaciado entre letras entran dos o tres caracteres más, que
     es justo la diferencia entre «MANTARRAYAS» entero y «MANTARRAYA…». */
  .cruce-publico .lado .nombre { font-size: .72rem; letter-spacing: 0; }
  .cruce-publico .marcador { gap: 6px; }
  .cruce-publico .marcador .num { font-size: 2.4rem; }
  .cruce-publico .marcador i { font-size: 1.3rem; }
  .cruce-publico .centro { padding-bottom: 22px; }
  .escudo-grande, .escudo-inicial { width: 36px; height: 36px; font-size: .74rem; }
}

/* =====================================================================
   EL REGISTRO DEL CLUB, POR PESTAÑAS (1.6.0)
   Datos del club · Jugadores. Lo pidió el usuario: antes era todo hacia
   abajo y no se notaba qué categoría se estaba llenando ni que
   «Agregar un jugador» era un botón.
   ===================================================================== */
.registro-club .titulo-pagina { margin-bottom: 14px; }
.registro-club .tarjeta-publica + .tarjeta-publica { margin-top: 14px; }
.bajada-seccion { margin: -4px 0 14px; color: var(--suave); font-size: .92rem; }

.pestanas-registro {
  display: flex; gap: 6px; margin: 16px 0 18px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 6px;
}
/* El paso arriba y, DEBAJO, el dato chiquito de cuántas categorías.
   Uno al lado del otro la ficha se estiraba y se veía mal: lo reportó
   el usuario mirándolo en su celular. */
.pestanas-registro a {
  flex: 1 1 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  min-height: 46px; padding: 7px 10px; border-radius: 10px;
  text-decoration: none; color: var(--suave); font-weight: 700; font-size: .95rem;
  text-align: center; line-height: 1.15;
}
.pestanas-registro a .arriba { display: inline-flex; align-items: center; gap: 8px; }
.pestanas-registro a small {
  font-weight: 500; color: var(--tenue);
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.pestanas-registro a .paso {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); font-family: var(--mono); font-size: .72rem;
}
.pestanas-registro a.aqui { background: var(--marca); color: var(--marca-letra, #fff); }
.pestanas-registro a.aqui small { color: inherit; opacity: .85; }
.pestanas-registro a.aqui .paso { background: rgba(255,255,255,.25); }

/* Las categorías del club (una lista por categoría). */
/* Las listas del club: cada pastilla lleva DOS renglones (la categoría
   y cuántos jugadores van), así que el radio de 999px las volvía un
   óvalo enorme. Esquina normal, y se envuelven en vez de correrse de
   lado: son pocas y así se ven todas de un vistazo. */
.fichas-listas { padding: 0 0 14px; flex-wrap: wrap; overflow: visible; }
.fichas-listas a,
.fichas-listas label.agregar {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 1px; line-height: 1.2; padding: 9px 14px;
  border-radius: 12px; min-height: 46px; justify-content: center;
}
.fichas-listas a small { font-size: .66rem; color: var(--tenue); font-family: var(--mono); }
.fichas-listas a.aqui small { color: inherit; opacity: .85; }

.lista-del-club { border-color: var(--marca); }
.cabeza-lista { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cuantos-van {
  font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; background: var(--panel-2); color: var(--suave);
}
.cuantos-van.listo { color: var(--ok); }
.cuantos-van.vacio { color: var(--vivo); }
.cuantos-van.incompleto, .cuantos-van.pasado { color: var(--atencion); }

.acciones-lista { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.acciones-lista .btn { flex: 1 1 180px; text-align: center; }
.vacio-lista { color: var(--tenue); font-style: italic; margin: 6px 0 0; }

.barra-lote-publica { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font-size: .9rem; }
.barra-lote-publica label { display: inline-flex; align-items: center; gap: 8px; }
.barra-lote-publica .btn { padding: 8px 12px; font-size: .84rem; }

.jugadores-club { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jugadores-club li {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px;
  /* Hueco a la derecha para la tachita, que va montada en la esquina. */
  padding: 10px 46px 10px 12px;
}
.jugadores-club li.rechazado { border-color: color-mix(in srgb, var(--vivo) 45%, transparent); }
.jugadores-club input[type="checkbox"] { width: 20px; height: 20px; margin-top: 10px; flex: none; accent-color: var(--marca); }
.jugadores-club .dorsal {
  min-width: 34px; height: 34px; margin-top: 3px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border-radius: 8px; font-family: var(--mono); font-weight: 700; color: var(--marca-usable);
}
.jugadores-club .quien { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jugadores-club .nombre { font-weight: 700; }
.jugadores-club .estado-jugador { font-size: .8rem; color: var(--tenue); }
.jugadores-club li.rechazado .estado-jugador strong { color: var(--vivo); }
.jugadores-club li.aceptado .estado-jugador { color: var(--ok); }
/* LA TACHITA, ARRIBA A LA DERECHA Y EN ROJO. La pidió así el usuario:
   «la puedes poner en la esquina superior derecha, roja, que se vea,
   que si lo tocan se elimina». Va de 36x36 y con su confirmación. */
.quitar-jugador { position: absolute; top: 6px; right: 6px; margin: 0; }
.quitar-jugador button {
  width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--vivo) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--vivo) 45%, transparent);
  color: var(--vivo); font-size: .95rem; line-height: 1;
}
.quitar-jugador button:hover { background: var(--vivo); color: #fff; }

/* «Editar», pegado al nombre y a la derecha. */
.jugadores-club .renglon-nombre {
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
}
.jugadores-club .renglon-nombre .nombre {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.editar-jugador {
  margin-left: auto; flex: none;
  color: var(--frio); text-decoration: none; font-weight: 700; font-size: .8rem;
  min-height: 32px; display: inline-flex; align-items: center;
}
.editar-jugador:hover { text-decoration: underline; }

.documentos-jugador {
  /* Corrido a la izquierda, alineado con el nombre y no centrado en la
     ficha: es lo que pidió el usuario mirándolo en el celular. */
  font-size: .84rem; margin: 6px 0 0; align-self: stretch;
}
.documentos-jugador > summary { cursor: pointer; color: var(--frio); font-weight: 600; list-style: none; min-height: 32px; display: flex; align-items: center; }
.documentos-jugador > summary::-webkit-details-marker { display: none; }
.documentos-jugador > summary::before { content: "📎 "; margin-right: 4px; }
.documentos-jugador .pista { margin: 4px 0 8px; }
.lista-documentos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.lista-documentos li { display: flex; align-items: center; gap: 8px; }
.lista-documentos a { text-decoration: none; }
.quitar-chico { background: none; border: 1px solid var(--borde); color: var(--tenue); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; }
.subir-documento { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.subir-documento select { width: auto; max-width: 100%; flex: 1 1 160px; padding: 8px 10px; font-size: .86rem; }
.subir-documento input[type="file"] { flex: 1 1 180px; padding: 7px; font-size: .8rem; }
.subir-documento .btn { padding: 8px 14px; font-size: .84rem; }

.logo-y-forma { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.logo-club-publico { width: 96px; height: 96px; border-radius: 16px; object-fit: contain; background: #fff; padding: 6px; flex: none; font-size: 1.6rem; }
.color-club { display: flex; align-items: center; gap: 12px; }
.color-club input[type="color"] { width: 54px; height: 40px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel-2); padding: 3px; }
.siguiente-paso { margin: 18px 0 0; }

@media (max-width: 480px) {
  .jugadores-club li { flex-wrap: wrap; }
  .acciones-jugador { flex-basis: 100%; justify-content: flex-end; }
}

/* ---------- El aviso de privacidad ---------- */
.aviso-privacidad .tarjeta-publica + .tarjeta-publica { margin-top: 14px; }
.aviso-privacidad .tarjeta-publica p { margin: 0 0 10px; line-height: 1.65; }
.aviso-privacidad .tarjeta-publica p:last-child { margin-bottom: 0; }
.aviso-privacidad .destacada { border-color: var(--marca); background: var(--marca-suave); }
.aviso-privacidad .responsable { padding: 10px 14px; border-radius: 10px; background: var(--panel-2); }

/* =============================================================
   LAS PÁGINAS DE ADENTRO: EQUIPO, SEDE y PARTIDO
   (fase 7 · «varias cosas deben ser tocables»)

   El usuario lo pidió así: tocar el nombre o el logo de un equipo
   lleva a SU página, tocar una sede a los partidos de esa sede, y
   tocar una ficha de partido al detalle con todas las estadísticas.

   La regla de aquí: **toda la ficha es tocable, pero lo de adentro
   sigue teniendo su propio destino**. Es la misma idea de
   `.fila-cuenta` del panel, con la diferencia de que aquí NO se
   apagan los eventos de lo de adentro (ahí quedaron botones muertos):
   la tapa va DEBAJO en el apilado y los links de adentro suben con
   `position: relative`. Así ninguno se puede quedar muerto.
   ============================================================= */

/* ---------- La tapa que hace tocable toda una tarjeta ---------- */
.tapa-ficha, .tapa-sede {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  /* Sin texto: el aria-label del enlace es el que lee el lector de
     pantalla, y así no se dibuja nada encima de la tarjeta. */
}
/* Suben SOLO los enlaces de adentro, no sus cajas: si subiera la caja
   entera, el hueco del marcador —que es lo más natural de tocar— ya no
   caería en la tapa y la ficha dejaría de llevar a su partido.

   **Y AQUÍ SE OLVIDA UNO.** «Abrir mapa» faltaba en esta lista, así que
   el toque lo agarraba la tapa y en vez del mapa se abría la ficha del
   partido. Lo reportó el usuario: *«al tocar abrir mapa me dirige a la
   ficha individual de ese encuentro; si toco abrir mapa quiero que me
   abra el mapa»*. Todo enlace nuevo que se meta en una ficha va en esta
   lista, o nace muerto. */
.partido-publico .equipo-tocable,
.partido-publico .lugar-partido,
.partido-publico .abrir-mapa,
.partido-publico .accion-verde,
.sede .acciones-sede { position: relative; z-index: 1; }
.partido-publico:focus-within { border-color: var(--marca-usable); }
.tapa-ficha:focus-visible, .tapa-sede:focus-visible {
  outline: 2px solid var(--marca-usable); outline-offset: 2px;
}

/* Los equipos de adentro de una ficha: se tocan y llevan a su página. */
.equipo-tocable { text-decoration: none; color: inherit; display: inline-flex; min-width: 0; }
a.nombre.equipo-tocable { display: block; }
.equipo-tocable:hover { color: var(--marca-usable); }
.equipo-tocable:hover .escudo-grande { filter: brightness(1.06); }
.cruce-publico .lado.gano a.nombre.equipo-tocable { color: var(--marca-usable); }

/* La cancha del pie, que ahora es un enlace a su sede. */
.donde-partido a.lugar-partido { text-decoration: none; color: inherit; }
.donde-partido a.lugar-partido:hover strong { color: var(--marca-usable); }
.donde-partido a.lugar-partido:hover .pin { color: var(--marca-usable); }

/* ---------- Las dos vistas de la tabla ---------- */
/* Son LINKS y no un menú de JavaScript: se comparten, quedan en el
   historial del navegador y funcionan sin nada de por medio, igual
   que la barra de categorías. */
.cambia-vista-tabla {
  display: inline-flex; gap: 4px; margin-bottom: 12px;
  padding: 4px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--borde);
}
.cambia-vista-tabla a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; min-height: 40px; border-radius: 9px;
  text-decoration: none; color: var(--suave);
  font-size: .85rem; font-weight: 700; white-space: nowrap;
  transition: background .15s, color .15s;
}
.cambia-vista-tabla a svg { width: 16px; height: 16px; }
.cambia-vista-tabla a:hover { color: var(--texto); }
.cambia-vista-tabla a.aqui { background: var(--marca); color: var(--marca-letra, #fff); }

/* ---------- La tabla avanzada: la clásica de toda la vida ---------- */
table.posiciones.avanzada { min-width: 640px; font-size: .88rem; }
table.posiciones.avanzada th, table.posiciones.avanzada td { padding: 11px 10px; text-align: center; }
table.posiciones.avanzada th:nth-child(2), table.posiciones.avanzada td:nth-child(2) { text-align: left; }
table.posiciones.avanzada thead th { font-family: var(--mono); letter-spacing: .06em; }
table.posiciones.avanzada td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.posiciones.avanzada .nombre-equipo { font-family: inherit; }
table.posiciones.avanzada .nombre-equipo a { display: flex; align-items: center; gap: 8px; }
table.posiciones.avanzada .lugar { width: 44px; }
table.posiciones.avanzada .lugar .puesto { width: 26px; height: 26px; font-size: .78rem; }
table.posiciones.avanzada td.gano { color: var(--frio); font-weight: 700; }
table.posiciones.avanzada td.positivo { color: var(--verde); }
table.posiciones.avanzada td.negativo { color: var(--vivo); }
table.posiciones.avanzada .pts::after { content: none; }
table.posiciones.avanzada .pts strong { font-size: 1.05rem; }

/* La tabla simple: la fila del equipo entera es un enlace. */
table.posiciones .nombre-equipo a.ficha-equipo { display: flex; align-items: center; gap: 10px; }
table.posiciones .nombre-equipo .ficha-equipo > span { display: flex; flex-direction: column; line-height: 1.25; }
table.posiciones .nombre-equipo .nombre-club { font-weight: 700; }

/* ---------- Los rosters: TRES jugadores y nada más ----------
   El usuario: «no me muestres todos los jugadores, muéstrame los 3
   mejores si tienen datos de pts anotados, si no 3 al azar». La lista
   completa está a un toque, en la página del equipo. */
.plantilla { display: flex; flex-direction: column; gap: 10px; }
.cabeza-plantilla {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit; min-width: 0;
}
.cabeza-plantilla .quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cabeza-plantilla strong {
  font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cabeza-plantilla .sub {
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  color: var(--tenue); text-transform: uppercase; letter-spacing: .09em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cabeza-plantilla:hover strong { color: var(--marca-usable); }

.que-son-estos {
  margin: 0; font-family: var(--mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--frio);
}
.plantilla .como-le-dicen { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plantilla li .numeritos-jugador {
  flex-basis: auto; margin-left: auto; padding-left: 0; text-align: right; white-space: nowrap;
}
.plantilla li .numeritos-jugador strong { font-size: .95rem; color: var(--marca-usable); }
.plantilla li .numeritos-jugador span {
  display: block; margin-left: 0; font-family: var(--mono);
  font-size: .55rem; letter-spacing: .08em; text-transform: uppercase;
}
.roster-entero {
  margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--borde);
  font-size: .84rem; font-weight: 700; color: var(--marca-usable); text-decoration: none;
}
.roster-entero:hover { text-decoration: underline; }

/* ---------- Las sedes, ahora tocables ---------- */
.sede { position: relative; }
.sede:hover { border-color: var(--tenue); }
.acciones-sede { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.acciones-sede .btn { flex: 1 1 auto; margin-top: 0; padding: 10px 14px; font-size: .84rem; }
/* En la cabeza de la página de una sede hay UN botón: que no se estire
   de lado a lado y se parta en dos renglones. */
.cabeza-equipo .acciones-sede { margin: 18px 0 0; }
.cabeza-equipo .acciones-sede .btn { flex: 0 0 auto; display: inline-flex; }

/* ---------- La cabeza de una página de adentro ---------- */
.cabeza-equipo {
  background:
    radial-gradient(1000px 300px at 15% -40%, var(--marca-suave), transparent 70%),
    var(--panel);
  border-bottom: 1px solid var(--borde);
  padding: 22px 0 26px;
}
/* Las migas se fueron en la 6.0.0: la flecha vive en la barra de
   arriba. Ver `.volver-arriba`. */

.marca-equipo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.marca-equipo .escudo-grande, .marca-equipo .escudo-inicial {
  width: 84px; height: 84px; border-radius: 18px; font-size: 1.5rem; flex: none;
}
.cabeza-equipo h1 {
  margin: 2px 0 0; font-size: clamp(1.5rem, 5.4vw, 2.3rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
}
.cabeza-equipo .tipo-torneo {
  margin: 0; font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--frio);
}
.cabeza-equipo .bajada-torneo { margin: 6px 0 0; color: var(--suave); font-size: .95rem; }
.cabeza-equipo .cifras-torneo { margin-top: 18px; }

/* ---------- El roster completo, en la página del equipo ---------- */
.roster-completo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.roster-completo li {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 11px 14px;
}
.roster-completo .dorsal {
  flex: none; min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--panel-2); border: 1px solid var(--borde);
  font-family: var(--mono); font-weight: 700; font-size: .95rem; color: var(--marca-usable);
}
.roster-completo .quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.roster-completo .quien .nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.roster-completo .quien .sub {
  font-family: var(--mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
}
.roster-completo .sus-numeros {
  margin-left: auto; text-align: right; white-space: nowrap; font-size: .78rem; color: var(--suave);
}
.roster-completo .sus-numeros strong { font-family: var(--mono); font-size: 1rem; color: var(--texto); }
.roster-completo .sus-numeros small { display: block; font-size: .62rem; color: var(--tenue); }

/* ---------- El detalle de un partido ---------- */
.cabeza-partido {
  position: relative;
  background:
    radial-gradient(900px 280px at 50% -60%, var(--marca-suave), transparent 70%),
    var(--panel);
  border-bottom: 1px solid var(--borde);
  padding: 22px 0 26px;
}
.cabeza-partido .tipo-torneo {
  margin: 0 0 14px; font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--frio);
}
.cabeza-partido .marca-vivo { position: static; display: inline-flex; margin-bottom: 12px; }

.marcador-grande {
  /* Topado y centrado: en una computadora, un marcador estirado de
     lado a lado deja a los dos equipos tan lejos que no se leen como
     un cruce. */
  max-width: 640px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 18px; padding: 20px 16px;
}
.marcador-grande .lado-grande {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0;
}
.marcador-grande .lado-grande > a {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; min-width: 0;
}
.marcador-grande .escudo-grande, .marcador-grande .escudo-inicial {
  width: 72px; height: 72px; border-radius: 18px; font-size: 1.35rem;
}
.marcador-grande .nombre {
  font-weight: 800; font-size: 1rem; line-height: 1.2;
  overflow-wrap: anywhere; max-width: 15ch;
}
.marcador-grande .lado-grande > a:hover .nombre { color: var(--marca-usable); }
.marcador-grande .nombre.por-definir { color: var(--suave); font-style: italic; font-weight: 600; }
.marcador-grande .puntos-grandes {
  font-family: var(--mono); font-size: clamp(2.1rem, 11vw, 3.4rem); font-weight: 700;
  letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.marcador-grande .lado-grande.gano .puntos-grandes { color: var(--marca-usable); }
.marcador-grande .lado-grande.gano .nombre { color: var(--marca-usable); }

.marcador-grande .centro-grande {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding-top: 26px; min-width: 84px; text-align: center;
}
.marcador-grande .centro-grande .lugar,
.marcador-grande .periodo-grande {
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
}
.cabeza-partido.en-vivo .periodo-grande { color: var(--frio); }

.donde-se-juega { margin: 16px 0 0; font-size: .92rem; color: var(--suave); }
.donde-se-juega a { color: var(--frio); text-decoration: none; font-weight: 600; }
.donde-se-juega a:hover { text-decoration: underline; }
.aviso-partido-grande {
  margin: 14px 0 0; display: inline-block; padding: 8px 14px; border-radius: 10px;
  background: var(--vivo); color: #fff; font-weight: 700; font-size: .85rem;
}

/* Pocas columnas y cortas: no necesita ancho mínimo, y con uno se
   quedaba cortada en el celular por gusto. */
table.posiciones.por-periodo { min-width: 0; }
table.posiciones.por-periodo th, table.posiciones.por-periodo td { text-align: center; font-family: var(--mono); }
table.posiciones.por-periodo th:first-child, table.posiciones.por-periodo td:first-child { text-align: left; font-family: inherit; }
table.posiciones.por-periodo .pts::after { content: none; }

.dos-columnas-ancho { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.dos-columnas-ancho .tarjeta-publica { padding: 16px; }
.dos-columnas-ancho .titulo-grupo { margin: 0 0 10px; font-size: 1rem; }
table.posiciones.anotadores { min-width: 0; font-size: .86rem; }
table.posiciones.anotadores th, table.posiciones.anotadores td { padding: 9px 8px; }
table.posiciones.anotadores th:last-child, table.posiciones.anotadores td:last-child { text-align: center; }
table.posiciones.anotadores .lugar { width: 40px; }
table.posiciones.anotadores .lugar, table.posiciones.anotadores td:last-child { font-family: var(--mono); }
table.posiciones.anotadores .pts { text-align: right; }
table.posiciones.anotadores .pts::after { content: none; }
table.posiciones.anotadores .pts strong { font-size: 1rem; }
table.posiciones.anotadores .nombre-equipo { white-space: normal; }

/* En un celular chico los escudos siguen siendo lo grande de la ficha;
   lo que se encoge es el marcador, que es lo que tiene aire de sobra. */
@media (max-width: 380px) {
  .partido-publico { padding: 30px 8px 14px; }
  .cruce-publico .escudo-grande, .cruce-publico .escudo-inicial { width: 60px; height: 60px; font-size: 1.05rem; }
  .cruce-publico .marcador .num { font-size: 2rem; }
  .cruce-publico .marcador i { font-size: 1.1rem; }
  .cruce-publico .marcador .vs { font-size: 1.25rem; }
  /* Sin `max-width` en `ch`: ESE era el que partía «MANTARRAYAS» por una
     letra, con 30 px libres al lado. El ancho lo pone su columna. */
  .cruce-publico .lado .nombre { font-size: .66rem; }
  .cruce-publico { gap: 3px; }
}

@media (max-width: 480px) {
  .cambia-vista-tabla { display: flex; width: 100%; }
  .cambia-vista-tabla a { flex: 1 1 0; justify-content: center; padding: 8px 6px; }
  .marca-equipo .escudo-grande, .marca-equipo .escudo-inicial { width: 64px; height: 64px; }
  .marcador-grande { padding: 18px 10px; gap: 8px; }
  .marcador-grande .escudo-grande, .marcador-grande .escudo-inicial { width: 56px; height: 56px; }
  .marcador-grande .nombre { font-size: .88rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .cabeza-equipo .marca-equipo, .marcador-grande { animation: aparece .45s ease-out both; }
  .roster-completo li { animation: aparece .35s ease-out both; }
}

/* =============================================================
   LA HOJA COMPLETA DE UN PARTIDO (1.8.0)

   Lo que enseña `publico-partido.js` cuando el partido se anotó con
   el marcador: de dónde salieron los puntos, la comparativa, los
   máximos anotadores y la tabla de cada equipo, más los botones del
   PDF y de la imagen para redes.

   Es el mismo contenido del resumen del marcador, con la ropa de la
   página pública: los cálculos NO se repiten, solo el dibujo.
   ============================================================= */

/* ---------- De dónde salieron los puntos ---------- */
.tiros-publico { display: grid; gap: 16px; }
.barra-tiros {
  display: grid; gap: 6px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
}
.barra-tiros .quien-tira { font-weight: 800; font-size: .95rem; }
.barra-tiros .tramos-tiros {
  display: flex; height: 32px; border-radius: 9px; overflow: hidden;
  background: var(--panel-2);
}
.barra-tiros .tramos-tiros i {
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-family: var(--mono); font-weight: 700; font-size: .8rem;
  min-width: 0; overflow: hidden;
}
.barra-tiros .leyenda-tiros,
.barra-tiros .sin-tiros {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tenue);
}

/* ---------- La comparativa, dato por dato ---------- */
.comparativa-publica {
  display: grid; gap: 4px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra);
}
.linea-comparativa {
  display: grid; grid-template-columns: 3.2rem 1fr 3.2rem;
  align-items: center; gap: 8px; padding: 7px 0;
}
.linea-comparativa .lado-a, .linea-comparativa .lado-b {
  font-family: var(--mono); font-size: 1.05rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--suave);
}
.linea-comparativa .lado-b { text-align: right; }
.linea-comparativa .manda { color: var(--texto); }
.linea-comparativa .que-es {
  text-align: center; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tenue);
}
.linea-comparativa .riel {
  grid-column: 1 / -1; display: flex; height: 5px;
  border-radius: 3px; overflow: hidden; background: var(--panel-2);
}
.linea-comparativa .riel i { display: block; }

/* ---------- Los máximos anotadores ---------- */
.maximos-publico { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.maximos-publico li {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 11px 14px;
}
/* El primero en dorado, igual que en el resumen del marcador. */
.maximos-publico li.primero { border-color: #C99A2E; background: color-mix(in srgb, #C99A2E 10%, var(--panel)); }
.maximos-publico .puesto-anotador {
  flex: none; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--panel-2);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--tenue);
}
.maximos-publico li.primero .puesto-anotador { background: #C99A2E; color: #1A1200; }
.maximos-publico .dorsal {
  flex: none; min-width: 30px; text-align: center;
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
}
.maximos-publico .quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.maximos-publico .quien .nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maximos-publico .quien .sub {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tenue);
}
.maximos-publico .sus-puntos { margin-left: auto; text-align: right; white-space: nowrap; }
.maximos-publico .sus-puntos strong {
  font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
  color: var(--marca-usable); letter-spacing: -.03em;
}
.maximos-publico .sus-puntos small {
  display: block; font-family: var(--mono); font-size: .55rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
}

/* ---------- La tabla de cada equipo ---------- */
.dos-columnas-ancho .titulo-grupo {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-left: 10px; border-left: 3px solid var(--marca-usable);
}
.dos-columnas-ancho .titulo-grupo span {
  margin-left: auto; font-family: var(--mono); font-size: .8rem;
  font-weight: 700; color: var(--marca-usable);
}
.quien-dirige {
  margin: -4px 0 10px; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tenue);
}
table.posiciones.anotadores th:not(:nth-child(2)),
table.posiciones.anotadores td:not(:nth-child(2)) { text-align: center; }
table.posiciones.anotadores tr.expulsado { opacity: .6; }
.marca-expulsado {
  margin-left: 6px; padding: 1px 6px; border-radius: 5px;
  background: var(--vivo); color: #fff;
  font-family: var(--mono); font-size: .55rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.faltas-de-banca {
  margin: 10px 0 0; font-size: .78rem; color: var(--tenue);
}

/* ---------- Los dos botones de la hoja ---------- */
.acciones-hoja { display: flex; gap: 10px; flex-wrap: wrap; }
.acciones-hoja .btn { flex: 1 1 220px; }
.acciones-hoja .btn:disabled { opacity: .6; cursor: progress; }

/* =============================================================
   LAS CATEGORÍAS EN GRANDE (1.8.0)

   El usuario, con su caso: «he estado en torneos que tienen hasta
   veinte o treinta categorías y termina siendo demasiado. La página
   de inicio debe ser algo más resumido, pero que te muestre: aquí
   está la categoría tal, la otra y la otra. Lo primero que va a
   buscar un papá es la categoría de su hijo».

   Por eso la portada del torneo es un vestíbulo —cifras, lo que se
   juega ahora y ESTAS TARJETAS— y todo lo pesado (tabla, cuadro,
   rosters) vive dentro de cada categoría.
   ============================================================= */
.tarjetas-categoria {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.tarjeta-categoria {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 16px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}
.tarjeta-categoria:hover { transform: translateY(-2px); border-color: var(--marca-usable); }
.tarjeta-categoria.con-vivo { border-color: var(--marca-usable); }
.tarjeta-categoria h3 {
  margin: 0; font-size: 1.18rem; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.2;
}
.tarjeta-categoria .quienes {
  margin: 0; font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--frio);
}
.tarjeta-categoria .avance-categoria {
  display: block; height: 5px; margin-top: 8px;
  border-radius: 3px; background: var(--panel-2); overflow: hidden;
}
.tarjeta-categoria .avance-categoria i {
  display: block; height: 100%; background: var(--marca);
}
.tarjeta-categoria .como-va-categoria {
  margin: 0; font-size: .8rem; color: var(--tenue);
}
.tarjeta-categoria .entrar-categoria {
  margin-top: 6px; font-size: .84rem; font-weight: 700; color: var(--marca-usable);
}
/* La cinta y la marquita van montadas sobre la esquina, igual que en
   la ficha de un partido: es el mismo lenguaje en toda la página. */
.tarjeta-categoria .marca-vivo,
.tarjeta-categoria .estado-partido { top: -11px; right: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .tarjeta-categoria { animation: aparece .4s ease-out both; }
  .tarjeta-categoria .avance-categoria i { animation: crece .7s ease-out both; transform-origin: left; }
}

/* ---------- La barra de categorías, más grande ----------
   «Que sí se noten las pestañas de las categorías, pero grandes: no
   sé cómo son ahorita, chiquititas, que casi no se notan.» */
.fichas-categorias a {
  padding: 11px 18px; min-height: 44px;
  font-size: .95rem; font-weight: 700;
}
.fichas-categorias a small {
  margin-left: 6px; padding: 1px 7px; border-radius: 20px;
  background: var(--panel-2); font-family: var(--mono);
  font-size: .66rem; font-weight: 700; color: var(--tenue);
}
.fichas-categorias a.aqui small { background: rgba(0, 0, 0, .18); color: inherit; }

/* =============================================================
   POPUPS DE LA PÁGINA PÚBLICA (1.9.0)

   Los abre una CASILLA, no JavaScript, igual que el cajón del menú
   del panel: si `publico.js` no carga, el formulario se abre y se
   manda igual. Se pierde la comodidad, nunca la función.
   ============================================================= */
.abre-popup { display: none; }
.popup { display: none; }
.abre-popup:checked ~ .popup,
.abre-popup:checked ~ * .popup {
  display: flex; align-items: flex-start; justify-content: center;
  position: fixed; inset: 0; z-index: 60;
  padding: 24px 16px; overflow-y: auto;
}
.popup .velo-popup {
  position: fixed; inset: 0; z-index: 0;
  background: rgba(0, 0, 0, .6); cursor: pointer;
}
.popup-caja {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px; margin: auto;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 16px; padding: 22px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
}
.popup-caja h3 { margin: 0 30px 4px 0; font-size: 1.15rem; font-weight: 800; }
/* 44x44: por debajo de eso se falla el toque y justo abajo queda el
   primer campo. Misma medida que en el marcador, por el mismo susto. */
.cierra-popup {
  position: absolute; top: 8px; right: 8px;
  width: 44px; height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--tenue); font-size: 1.1rem; line-height: 1;
}
.cierra-popup:hover { background: var(--panel-2); color: var(--texto); }
.acciones-popup { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acciones-popup .btn { flex: 1 1 auto; text-align: center; cursor: pointer; }

/* La que abre el popup es un <label>, no un <a>: se ve igual que las
   demás, con el borde punteado de «esto agrega algo». */
.fichas-listas label.agregar {
  cursor: pointer; border: 1px dashed var(--borde); color: var(--suave);
  font-weight: 700; font-size: .86rem;
}
.fichas-listas label.agregar:hover { border-color: var(--marca-usable); color: var(--marca-usable); }

/* ---------- Darse de baja de una categoría ---------- */
.salir-de-categoria { flex-basis: 100%; margin: 4px 0 0; }
.salir-de-categoria button {
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  color: var(--vivo); font-size: .82rem; font-weight: 700;
  min-height: 32px; text-decoration: underline;
}
.nota-baja { flex-basis: 100%; margin: 4px 0 0; font-size: .8rem; color: var(--tenue); }

/* ---------- «Subiendo…», mientras el archivo va en camino ----------
   Una foto de celular pesa varios megas y el servidor además la
   achica: la espera es real, y sin este aviso la gente apretaba otra
   vez o recargaba a medio camino. */
form.subiendo { opacity: .65; pointer-events: none; }
.btn.trabajando, button.trabajando {
  position: relative; padding-left: 34px !important;
}
.btn.trabajando::before, button.trabajando::before {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: gira-rueda .7s linear infinite;
}
@keyframes gira-rueda { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.trabajando::before, button.trabajando::before { animation: none; opacity: .6; }
}

/* =====================================================================
   LA PUBLICIDAD DEL DUEÑO DEL SISTEMA (6.7.0)

   Va SIEMPRE al final de la página —*«quizás lo pongamos en la parte de
   hasta abajo»*— y **se tiene que distinguir de la del organizador**.
   Si se vieran igual, el organizador leería los anuncios del dueño como
   suyos y quien entra creería que ese patrocinador es del torneo. Es la
   otra mitad de la promesa de la 4.6.0.

   Cómo se distingue, sin gritar:

     · el rótulo dice «Publicidad» y no «Con el apoyo de»;
     · va con el color FRÍO (`--frio`), que en toda la página pública es
       el que marca «esto no es del organizador» — lo mismo que hace el
       aviso del sistema con `--atencion` (4.9.0);
     · y con una línea arriba, que la separa del contenido del torneo.
   ===================================================================== */
.publicidad-del-sitio {
  padding: 30px 0 34px;
  margin-top: 26px;
  border-top: 1px solid var(--borde);
}
.publicidad-del-sitio .eyebrow-seccion {
  margin: 0 0 12px;
  color: var(--frio);
}

/* Los anuncios grandes: uno por pantalla, y se desliza con el dedo si
   hay varios. Mismo molde que los banners del organizador. */
.tira-anuncios {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tira-anuncios::-webkit-scrollbar { display: none; }

.anuncio-grande {
  flex: 0 0 100%; scroll-snap-align: center;
  display: block; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--borde);
  /* El fondo va puesto: mientras la imagen baja, un hueco sin fondo se
     ve como un agujero en la página. */
  background: var(--panel);
}
.anuncio-grande img {
  /* 3:1, la misma proporción a la que se recorta el archivo. Con
     `aspect-ratio` la caja ya tiene su alto ANTES de que la imagen
     llegue, así que la página no salta al terminar de cargar. */
  display: block; width: 100%; aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* Las placas: la misma medida que la tira del organizador, para que un
   logo del dueño y uno del torneo se vean del mismo tamaño. */
.tira-placas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
}
.anuncio-placa {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; padding: 11px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px;
}
.anuncio-placa img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}

a.anuncio-grande, a.anuncio-placa { transition: border-color .15s, transform .15s; }
a.anuncio-grande:hover, a.anuncio-placa:hover {
  border-color: var(--frio); transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  a.anuncio-grande, a.anuncio-placa { transition: none; }
  a.anuncio-grande:hover, a.anuncio-placa:hover { transform: none; }
}

@media (max-width: 560px) {
  .publicidad-del-sitio { padding: 24px 0 28px; }
  .anuncio-placa { width: 80px; height: 80px; padding: 9px; }
}

/* =========================================================
   COMPRAR UN PLAN EN TRES PASOS (7.3.2) — comprar.php
   Un solo formulario: `pago.js` enseña un paso a la vez; sin
   JavaScript se ven los tres juntos y se manda igual.
   ========================================================= */
.pasos-compra {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; gap: 6px;
}
.pasos-compra li {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--borde); color: var(--tenue);
  font-size: .86rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pasos-compra li span {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--borde); font-size: .8rem;
}
.pasos-compra li.activo { color: var(--texto); border-color: var(--marca); }
.pasos-compra li.activo span { background: var(--marca); border-color: var(--marca); color: #fff; }
.pasos-compra li.hecho span { background: var(--ok); border-color: var(--ok); color: #fff; }

.paso-compra { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.paso-compra > legend {
  font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; padding: 0;
}
.resumen-plan {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 16px; margin-bottom: 14px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--panel);
}
.resumen-plan strong { font-size: 1.1rem; }
.resumen-plan p { margin: 4px 0 0; color: var(--tenue); font-size: .9rem; }
.precio-compra { text-align: right; flex: none; }
.precio-compra s { display: block; color: var(--tenue); font-size: .9rem; }
.precio-compra b { display: block; font-size: 1.5rem; line-height: 1.1; }
.precio-compra small { color: var(--tenue); font-size: .82rem; }
.eco-correo { display: block; margin-top: 6px; font-size: .86rem; color: var(--texto); }
.eco-correo b { word-break: break-all; }
.con-ojo { display: flex; gap: 8px; }
.con-ojo input { flex: 1; min-width: 0; }
.ver-contrasena,
.aplicar-cupon {
  flex: none; min-width: 64px; min-height: 44px;
  border: 1px solid var(--borde); border-radius: 9px;
  background: var(--panel); color: var(--texto); font: inherit; font-size: .86rem; cursor: pointer;
}
.opcional { color: var(--tenue); font-weight: 400; }
.botones-paso { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.cuanto-pagas { font-size: 1rem; line-height: 1.5; }
.btn-pagar { min-height: 52px; font-size: 1.05rem; }
.btn-pagar:disabled { opacity: .7; cursor: progress; }
@media (max-width: 420px) {
  .pasos-compra li { justify-content: center; }
  .pasos-compra li:not(.activo) { font-size: 0; gap: 0; flex: 0 0 auto; }
  .pasos-compra li:not(.activo) span { font-size: .8rem; }
}