/* Las pantallas de organizador. Una sola hoja para todos: lo que cambia entre
   una federación y otra es el color, que entra por `--marca` desde la coque.

   El fondo es oscuro y no se ofrece claro: estas pantallas se miran en un
   coliseo, donde la luz es mala y el contraste lo es todo. */

:root {
  --marca: #D8F84A;

  --fondo:      #0B0D0C;
  --superficie: #151917;
  --superficie2:#1E2422;
  --borde:      #2A322E;
  --texto:      #F3F2E9;
  --texto2:     #96A099;

  --display: 'Archivo', system-ui, sans-serif;
  --cuerpo:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 20px;
  --radio: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--cuerpo); line-height: 1.5;
  color: var(--texto); background: var(--fondo);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0; }

/* ── La pantalla de sala ────────────────────────────────────────────────── */

/* Ocupa el televisor entero y no se desplaza: nadie va a hacer scroll en una
   pantalla colgada a tres metros del suelo. Lo que no entre, no se muestra, y
   por eso «Después» trae cinco combates y no veinte. */
body.tv {
  height: 100vh; height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
}
body.tv > [data-contenido] { display: contents; }

.tv-cabeza {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  padding: .8rem var(--gutter); background: var(--superficie);
  border-bottom: 3px solid var(--marca);
}
.tv-marca img { height: clamp(34px, 4.4vh, 64px); width: auto; display: block; }
.tv-nombre-org { font-family: var(--display); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; }
.tv-evento { min-width: 0; display: flex; align-items: baseline; gap: .7rem; }
.tv-evento b {
  font-family: var(--display); font-size: clamp(1.1rem, 2.4vh, 1.9rem);
  text-transform: uppercase; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El marcador de demostración aparece **una vez**, aquí y en ningún otro
   sitio. Estaba escrito dentro del nombre del evento y del de cada escuela, y
   se leía cuatro veces por pantalla. */
.tv-demo {
  flex: none; font-family: var(--display); font-weight: 800; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--fondo); background: var(--texto2);
  padding: .1rem .5rem; border-radius: 999px;
}
.tv-hora {
  font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 5vh, 3.4rem); line-height: 1; color: var(--marca);
}

.tv-cuerpo {
  min-height: 0; display: grid; gap: 2px; background: var(--borde);
  grid-template-columns: 60fr 40fr;
  grid-template-areas: "ahora llamados" "ahora siguen";
  grid-template-rows: auto 1fr;
}
/* Sin nadie llamado, «Después» toma la columna entera: dejar el hueco de un
   bloque vacío en una pantalla de sala es regalar un tercio del televisor. */
.tv-cuerpo--sin-llamados { grid-template-areas: "ahora siguen" "ahora siguen"; }
.tv-ahora    { grid-area: ahora; display: flex; flex-direction: column; }
/* El rotulo se queda arriba y el combate se centra en lo que sobra: con todo
   pegado al borde superior quedaban dos tercios del televisor en negro. */
.tv-ahora > h2 { flex: none; }
.tv-ahora > :not(h2):first-of-type { margin-top: auto; }
.tv-ahora > :last-child { margin-bottom: auto; }
.tv-llamados { grid-area: llamados; }
.tv-siguen   { grid-area: siguen; min-height: 0; }

.tv-cuerpo > section {
  background: var(--fondo); padding: 1.1rem var(--gutter);
  min-width: 0; min-height: 0; overflow: hidden;
}
.tv-cuerpo > section > h2 {
  font-size: clamp(.8rem, 1.9vh, 1.1rem); text-transform: uppercase;
  letter-spacing: .16em; color: var(--texto2); margin: 0 0 .7rem;
}
.tv-llamados { background: var(--superficie2) !important; }
.tv-llamados > h2 { color: var(--marca) !important; }

.tv-ronda-grande {
  font-family: var(--display); font-weight: 800; color: var(--marca);
  font-size: clamp(1.2rem, 3.4vh, 2.4rem); text-transform: uppercase; margin: 0 0 .15rem;
}
.tv-cat-grande {
  font-size: clamp(.95rem, 2.2vh, 1.5rem); color: var(--texto2); margin: 0 0 1rem;
}
.tv-lados { display: grid; gap: .3rem; }
.tv-quien b {
  display: block; font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(1.8rem, 7.4vh, 5.2rem); text-transform: uppercase;
  overflow-wrap: break-word;
}
.tv-quien i {
  display: block; font-style: normal; color: var(--texto2);
  font-size: clamp(.9rem, 2.2vh, 1.5rem); margin: .1rem 0 0;
}
.tv-vs {
  font-family: var(--display); font-weight: 800; color: var(--marca);
  font-size: clamp(1.2rem, 3.4vh, 2.4rem); line-height: 1;
}

.tv-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tv-lista li {
  border-left: 4px solid var(--borde); padding: .1rem .7rem;
  display: grid; gap: .05rem;
}
.tv-lista--viva li { border-left-color: var(--marca); }
.tv-ronda {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(.8rem, 1.9vh, 1.1rem); color: var(--marca);
}
.tv-lista:not(.tv-lista--viva) .tv-ronda { color: var(--texto); }
.tv-cat { font-size: clamp(.72rem, 1.6vh, .95rem); color: var(--texto2); }
.tv-par {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.9rem, 2.2vh, 1.4rem); line-height: 1.15;
}
.tv-tapete { font-size: clamp(.7rem, 1.5vh, .85rem); color: var(--texto2); }
.tv-siguen .tv-par { font-size: clamp(.82rem, 1.9vh, 1.15rem); }
.tv-siguen .tv-ronda { font-size: clamp(.72rem, 1.6vh, .95rem); }

.tv-nada { color: var(--texto2); }
.tv-nada--grande { font-family: var(--display); font-size: clamp(1.4rem, 5vh, 3rem); text-transform: uppercase; }

.tv-pie {
  padding: .35rem var(--gutter); background: var(--superficie);
  color: var(--texto2); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; text-align: right;
}

.tv-falta { padding: 3rem var(--gutter); }

/* En una pantalla angosta —alguien que abre /tv en su teléfono para mirar de
   reojo— los tres bloques se apilan y se permite desplazarse. */
@media (max-width: 900px) {
  body.tv { height: auto; overflow: auto; }
  .tv-cuerpo { grid-template-columns: 1fr; grid-template-areas: "ahora" "llamados" "siguen"; grid-template-rows: none; }
  .tv-cabeza { grid-template-columns: auto 1fr; row-gap: .3rem; }
  .tv-hora { grid-column: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Las páginas públicas de un organizador ─────────────────────────────── */

/* La barra. **El logo manda**: 56 px de alto en pantalla ancha, 44 en
   teléfono, y la barra se acomoda a eso en vez de al revés. A 26 px el logo de
   una escuela no se reconoce, y es lo primero que mira quien llega desde un
   enlace compartido para saber si está donde creía. */
.ob { background: var(--superficie); border-bottom: 2px solid var(--marca); position: sticky; top: 0; z-index: 30; }
.ob-fila {
  max-width: 1120px; margin: 0 auto; padding: .5rem var(--gutter);
  display: flex; align-items: center; gap: .8rem; min-height: 72px;
}
.ob-marca { display: flex; align-items: center; margin-right: auto; text-decoration: none; color: inherit; }
.ob-marca img { height: 56px; width: auto; display: block; }
.ob-marca { padding: .4rem 0; }
.ob-marca span { font-family: var(--display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }
/* El menu se desplaza, y se ve que se desplaza.
   A 375 px «Eventos» quedaba en left:-71 —fuera de la pantalla por la
   izquierda— y nada indicaba que hubiera algo ahi. */
.ob-nav {
  display: flex; align-items: center; gap: .1rem;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.ob-nav::-webkit-scrollbar { display: none; }
.ob-nav a { scroll-snap-align: start; }
.ob-nav a {
  color: var(--texto); text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  padding: .5rem .6rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px;
}
.ob-nav a:hover { background: var(--superficie2); }
.ob-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--marca); }
.ob-idiomas { display: flex; gap: .1rem; flex: none; }
.ob-idiomas button {
  font: inherit; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  background: none; border: 0; color: var(--texto2); padding: .35rem .45rem;
  min-height: 36px; border-radius: 6px; cursor: pointer;
}
.ob-idiomas button[aria-current="true"] { color: var(--fondo); background: var(--marca); font-weight: 700; }

@media (max-width: 560px) {
  .ob-fila { min-height: 60px; flex-wrap: wrap; }
  .ob-marca img { height: 44px; }
  /* De borde a borde, con el margen por dentro: asi el primer enlace arranca
     alineado con el resto y el ultimo no queda pegado al canto. */
  .ob-nav {
    order: 3;
    /* `width: auto`, NO `100%`.
       Con `width: 100%` el ancho se calcula sobre la caja —335 px— y los
       margenes negativos solo lo CORREN 20 px a la izquierda: el menu se
       cortaba en 335 y quedaban 40 px muertos a la derecha, justo donde
       estaban las sombras. Se veia un menu cortado a hachazos y ninguna
       pista de que seguia. Sin ancho fijo, los margenes negativos lo
       estiran de borde a borde, que es lo que se buscaba. */
    width: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  /* Las dos sombras dicen que hay mas a un lado. Se apagan solas en los
     extremos con `animation-timeline: scroll()`; donde no exista, se quedan
     fijas y siguen siendo una pista honesta. */
  .ob-nav-caja { position: relative; order: 3; width: 100%; }
  .ob-nav-caja::before, .ob-nav-caja::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 44px;
    pointer-events: none; z-index: 2;
    transition: opacity .15s linear;
  }
  .ob-nav-caja::before { left: calc(-1 * var(--gutter));
    background: linear-gradient(to right, var(--superficie), transparent); }
  .ob-nav-caja::after { right: calc(-1 * var(--gutter));
    background: linear-gradient(to left, var(--superficie), transparent); }
  .ob-nav-caja[data-inicio]::before { opacity: 0; }
  .ob-nav-caja[data-fin]::after { opacity: 0; }
}

.oc { max-width: 1120px; margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; }
.oc h1 { font-size: clamp(1.9rem, 6vw, 3rem); margin: 0 0 .6rem; }
.oc h2 { font-size: clamp(1.2rem, 3.4vw, 1.7rem); margin: 2.2rem 0 .8rem; }
.oc h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.oc p { margin: 0 0 .8rem; }
.oc a { color: var(--texto); }
.oc section { margin: 0 0 1.5rem; }
.estrecha { max-width: 68ch; }
.silencio { color: var(--texto2); }
.chico { font-size: .9rem; }
.num { font-variant-numeric: tabular-nums; }
.display { font-family: var(--display); font-weight: 800; }

/* El hero de la portada: el emblema grande encima del nombre. Es la cara de la
   organización y lo que hace que su página se vea suya y no de la plataforma. */
.oh { text-align: center; padding: 2.2rem 0 1.2rem; }
/* `display: block` y un margen propio: el emblema es una imagen en linea y
   heredaba el hueco de la linea de texto, que lo dejaba pegado al borde de
   arriba y parecia recortado. */
.oh-emblema { display: block; height: clamp(96px, 22vw, 170px); width: auto; margin: 0 auto 1.2rem; }
/* La bajada se centra con el titulo. `margin-inline: auto` perdia contra
   `.oc p { margin: 0 0 .8rem }`, que es mas especifico: el bloque quedaba
   pegado a la izquierda mientras el titulo estaba centrado, y los dos juntos
   se leian desalineados. */
.oc .oh-bajada { color: var(--texto2); max-width: 55ch; margin-left: auto; margin-right: auto; }

.rejilla { display: grid; gap: .8rem; }
@media (min-width: 620px) { .rejilla--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 860px) { .rejilla--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.oe {
  display: block; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1rem; text-decoration: none; color: inherit;
}
.oe--viva { border-left: 3px solid var(--marca); }

/* El podio de una categoria: tres lineas, el lugar a la izquierda en el ancho
   de «Bronce» para que los tres nombres empiecen alineados. */
.podio { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.podio li { display: grid; grid-template-columns: 4.2rem 1fr; align-items: baseline; gap: .1rem .6rem; }
.podio b { font-family: var(--display); font-weight: 800; font-size: .8rem;
           text-transform: uppercase; letter-spacing: .08em; color: var(--marca); }
.podio i { grid-column: 2; font-style: normal; font-size: .85rem; color: var(--texto2); }
.oe h3 { margin: 0 0 .3rem; }
.oe h3 a { text-decoration: none; }
.oe-alto { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 .5rem; }

.etiqueta {
  display: inline-flex; align-items: center; font-size: .78rem; font-weight: 600;
  padding: .12rem .55rem; border: 1px solid var(--borde); border-radius: 999px; color: var(--texto2);
}
/* Verde lo que está abierto, rojo lo que pasa ahora, ámbar lo que viene. El
   resto, gris: si todo grita, nada se oye. */
.etiqueta--inscripciones_abiertas { color: #9BE88B; border-color: rgba(155,232,139,.45); }
.etiqueta--inscripciones_cerradas { color: #E8C56B; border-color: rgba(232,197,107,.45); }
.etiqueta--en_curso { color: #FF6B63; border-color: rgba(255,107,99,.5); }
.etiqueta--finalizado { color: var(--texto2); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: .6rem 1.2rem; font-family: var(--display); font-weight: 800;
  background: var(--marca); color: #0B0D0C; border: 2px solid var(--marca);
  border-radius: 10px; text-decoration: none; cursor: pointer;
}
.boton--hueco { background: transparent; color: var(--texto); border-color: var(--borde); }
/* Un boton que no se puede pulsar tiene que verse asi. `base.css` lo decia
   para la portada; estas pantallas no cargan `base.css`, y el de «Publicar los
   podios» salia rojo entero mientras el navegador lo ignoraba. */
.boton[disabled] { opacity: .45; cursor: not-allowed; }
.casilla input:disabled { opacity: .45; }
.casilla input:disabled ~ span { color: var(--texto2); }
.boton--chico { min-height: 40px; padding: .3rem .8rem; font-size: .9rem; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.2rem 0; }

.od {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  padding: .8rem 1rem; display: grid; gap: .1rem;
}
.od-nombre { font-family: var(--display); font-weight: 800; }
.od-tope { font-family: var(--display); font-weight: 800; color: var(--marca); }
.od-meta { font-size: .85rem; color: var(--texto2); }

.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--borde); }
th { font-family: var(--display); color: var(--texto2); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.vacio { text-align: center; padding: 2.2rem 1.2rem; border: 1px dashed var(--borde); border-radius: var(--radio); color: var(--texto2); }
.vacio-titulo { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--texto); }
.aviso { border-left: 3px solid var(--marca); background: var(--superficie2); padding: .75rem 1rem; border-radius: 8px; }

/* El pie: cómo escribirle al organizador, y una sola marca de la plataforma. */
.op { background: var(--superficie); border-top: 1px solid var(--borde); padding: 2rem 0 2.5rem; }
.op-fila { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .op-fila { grid-template-columns: 1.5fr 1fr 1fr; } }
.op-nombre { font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin: 0 0 .3rem; }
.op h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto2); margin: 0 0 .4rem; }
.op a { color: var(--texto); }
.op-ossmat { color: var(--texto2) !important; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.op-ossmat:hover { color: var(--texto) !important; }

/* El calculador de categoría. Va arriba del reglamento porque es la pregunta:
   un padre no abre esa página para leer nueve tablas, la abre para saber en
   qué categoría pelea su hijo. */
.calc { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem; }
.calc h2 { margin-top: 0; }
.calc-campos { display: grid; gap: .7rem; }
@media (min-width: 620px) { .calc-campos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .calc-campos { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.calc-campos label { display: block; font-size: .85rem; color: var(--texto2); font-weight: 600; }
.calc-campos input, .calc-campos select {
  font: inherit; width: 100%; margin-top: .25rem; padding: .6rem .7rem; min-height: 48px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); color: var(--texto);
}
.calc-res { border-left: 3px solid var(--marca); background: var(--superficie2); border-radius: 10px; padding: .9rem 1rem; }
.calc-res-titulo { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto2); margin: 0 0 .2rem; }
.calc-res-linea { color: var(--texto2); margin: 0 0 .2rem; }
.calc-res-div { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 5vw, 2.2rem); margin: 0 0 .5rem; }
.oc h4 { font-family: var(--display); font-size: .95rem; margin: 1rem 0 .4rem; color: var(--texto2); }

/* La cinta de faja: el color viene de la base, no de una lista aquí. */
/* La casilla de consentimiento: el area de toque es la etiqueta entera, no el
   cuadradito. Con el pulgar, 16 px se falla una de cada tres. */
.casilla { margin: 1rem 0; }
.casilla label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; min-height: 44px; padding: .3rem 0; }
.casilla input { width: 22px; height: 22px; flex: none; margin-top: .15rem; }
.casilla .ayuda { display: block; font-size: .85rem; color: var(--texto2); padding-left: 2.2rem; }
.ficha { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin: 0 0 1rem; }
.ficha h3 { margin-top: 0; }
.campo { margin: 0 0 .9rem; }
.campo label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 .25rem; }
.campo input, .campo select, .campo textarea {
  font: inherit; width: 100%; padding: .6rem .7rem; min-height: 48px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); color: var(--texto);
}
.cinta--aviso { border-color: var(--marca) !important; color: var(--marca) !important; }

.cinta {
  display: inline-block; font-size: .78rem; font-weight: 700;
  padding: .05rem .5rem; border: 2px solid; border-radius: 4px; margin-left: .3rem;
}
.gana { font-weight: 800; }

/* ── Panel del organizador ──────────────────────────────────────────────── */

.menu-panel { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.menu-panel button[aria-current="page"] { background: var(--marca); color: #0B0D0C; border-color: var(--marca); }
.pasos { display: flex; gap: .3rem; list-style: none; margin: 0 0 1.4rem; padding: 0; }
.pasos li { flex: 1 1 0; min-width: 0; text-align: center; font-size: .78rem; color: var(--texto2);
            padding: .3rem 0 .45rem; border-bottom: 3px solid var(--borde); }
.pasos li[aria-current="step"] { color: var(--texto); border-bottom-color: var(--marca); font-weight: 700; }
.pasos li.hecho { border-bottom-color: var(--texto2); }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin: 0 0 1rem; background: var(--superficie); }
legend { font-family: var(--display); font-weight: 800; padding: 0 .4rem; }
.dos { display: flex; gap: .5rem; flex-wrap: wrap; }
.dos > * { flex: 1 1 9rem; }
.lista-larga { max-height: 22rem; overflow: auto; border: 1px solid var(--borde); border-radius: 10px; padding: .5rem; }
.lista-larga label { display: flex; gap: .5rem; align-items: center; font-weight: 400; font-size: .9rem; padding: .25rem 0; min-height: 36px; }
.lista-larga input { width: auto; min-height: 0; }
.opcion { display: block; cursor: pointer; }
.opcion input { width: auto; min-height: 0; margin-right: .5rem; }
table input { min-height: 40px; padding: .35rem .5rem; font: inherit;
              border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--texto); width: 100%; }

/* El resumen del embudo: anclado abajo en telefono, porque el total es la
   pregunta que quien inscribe se hace todo el tiempo y no puede quedar tres
   pantallas mas arriba. */
.resumen {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--superficie2); border-top: 2px solid var(--marca);
  padding: .8rem var(--gutter); margin: 1.2rem calc(var(--gutter) * -1) 0;
}
.resumen .total { font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.ayuda { font-size: .85rem; color: var(--texto2); margin: .3rem 0 0; }

/* ── La mesa de control ─────────────────────────────────────────────────── */

body.mesa { font-size: 17px; }
.mesa-cabeza { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
               flex-wrap: wrap; margin: 0 0 1rem; }
.mesa-cabeza .grande { font-size: 1.25rem; margin: 0; }

/* El estado de la red. Tiene que verse sin buscarlo. */
.estado-red { font-weight: 700; font-size: .9rem; padding: .4rem .7rem; border-radius: 8px;
              display: inline-block; margin: 0 0 1rem; }
.estado-red.bien { color: #9BE88B; background: rgba(155,232,139,.1); }
.estado-red.esperando { color: #E8C56B; background: rgba(232,197,107,.12); }
.estado-red.sin { color: #FF6B63; background: rgba(255,107,99,.12); }

.tapete { margin: 0 0 1.6rem; }
.combate { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
           padding: 1rem; margin: 0 0 .7rem; }
.combate--curso { border-left: 4px solid var(--marca); }
.combate--llamado { border-left: 4px solid #E8C56B; }
.division { font-size: .85rem; color: var(--texto2); margin: 0 0 .5rem; }
.lados { display: grid; gap: .6rem; }
@media (min-width: 620px) { .lados { grid-template-columns: 1fr 1fr; } }
/* Los botones del ganador son grandes a propósito: se aprietan de pie, con
   ruido, mirando el tatami y no la pantalla. */
.lados > .boton { min-height: 84px; text-align: left; justify-content: flex-start; padding: .8rem 1rem; }
.lado { display: block; }
.lado strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.lado .escuela { display: block; font-weight: 400; font-size: .82rem; opacity: .8; }
.par { display: grid; gap: .3rem; margin: 0 0 .6rem; }
@media (min-width: 620px) { .par { grid-template-columns: 1fr 1fr; } }

.cola-mesa { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cola-mesa li { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
                padding: .8rem 1rem; display: grid; gap: .4rem; }
@media (min-width: 760px) { .cola-mesa li { grid-template-columns: 1fr auto; align-items: center; }
                            .cola-mesa .division { grid-column: 1 / -1; } }
.descanso { color: #E8C56B; margin-left: .4rem; }

.metodos { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.metodos .elegido { background: var(--marca); color: #0B0D0C; border-color: var(--marca); }
.marcador { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.marcador label { font-size: .8rem; color: var(--texto2); flex: 1 1 5rem; }
.marcador input { width: 100%; min-height: 48px; font: inherit; text-align: center;
                  border: 1px solid var(--borde); border-radius: 10px;
                  background: var(--fondo); color: var(--texto); }

/* El pesaje, en tarjetas y no en tabla: de pie al lado de la balanza, una
   tabla de cinco columnas obliga a desplazarse de lado con una mano ocupada. */
.pesa { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
        padding: .8rem 1rem; margin: 0 0 .6rem; }
.pesa--hecha { opacity: .55; border-left: 3px solid var(--texto2); }
.pesa-nombre { font-family: var(--display); font-weight: 800; margin: 0 0 .1rem; }
.pesa-fila { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 0; }
.pesa-fila input { flex: 1 1 6rem; max-width: 9rem; min-height: 52px; font: inherit; font-size: 1.2rem;
                   text-align: center; border: 1px solid var(--borde); border-radius: 10px;
                   background: var(--fondo); color: var(--texto); }
.pesa-aviso { margin: .4rem 0 0; font-size: .9rem; }
.pesa-aviso .fuera { color: #FF6B63; font-weight: 700; display: block; margin-bottom: .3rem; }
.pesa-aviso .hecha { color: #9BE88B; font-weight: 700; }

/* ── Módulos de un evento ───────────────────────────────────────────────── */

.modulos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; counter-reset: m; }
.modulo { background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; padding: .6rem .8rem; }
.modulo--off { opacity: .55; }
.modulo-cab { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.interruptor { display: flex; gap: .5rem; align-items: center; cursor: pointer; margin-right: auto; min-height: 44px; }
.interruptor input { width: 22px; height: 22px; flex: none; }
.modulo-sellos { display: flex; gap: .3rem; flex-wrap: wrap; }
/* Flechas y no arrastrar: arrastrar dentro de una lista que se desplaza es una
   pelea entre el gesto de mover y el de bajar por la pagina, y se gana una de
   cada tres veces. Dos botones de 44 px aciertan siempre. */
.modulo-mover { display: flex; gap: .25rem; }
.modulo-mover .boton { min-width: 44px; min-height: 44px; padding: 0; }
.modulo-cuerpo { margin: .6rem 0 0; }
.biblio summary { cursor: pointer; min-height: 48px; display: flex; align-items: center;
                  font-family: var(--display); font-weight: 700; }
.biblio-lista { display: flex; gap: .4rem; flex-wrap: wrap; padding: .4rem 0 .8rem; }

/* ── El afiche y los acordeones de la página pública ────────────────────── */

.afiche { margin: 0 0 1.2rem; }
.afiche img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 14px; }
.acordeones { margin: 1.5rem 0; }
.acordeones details { border-bottom: 1px solid var(--borde); }
/* El chevron, dibujado a mano y no heredado.

   `display: flex` en un `<summary>` **borra el triangulo** que el navegador
   pone por omision: Chrome y Safari no pintan el `::marker` de un summary
   flex. Resultado: ocho acordeones con texto dentro se veian como ocho
   titulos de seccion vacios, y se leyeron como secciones sin contenido. No
   estaban vacios; no habia nada que dijera que se abren.

   Asi que el indicador va explicito, a la derecha y girando al abrir. */
.acordeones summary {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  padding: .9rem 0; cursor: pointer; min-height: 48px;
  display: flex; align-items: center; gap: .6rem;
  list-style: none;
}
.acordeones summary::-webkit-details-marker { display: none; }
.acordeones summary::after {
  content: ''; margin-left: auto; flex: 0 0 auto;
  width: .55rem; height: .55rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transform-origin: center;
  transition: transform .15s ease;
  opacity: .55;
}
.acordeones details[open] summary::after { transform: rotate(-135deg); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .acordeones summary::after { transition: none; }
}
.acordeones details[open] summary { color: var(--marca); }
.acordeon-cuerpo { padding: 0 0 1rem; }
.acordeon-cuerpo p { margin: 0 0 .7rem; }

/* ── El calculador y las tablas del reglamento ──────────────────────────── */

.calc-campos { display: grid; gap: .8rem; }
@media (min-width: 620px) { .calc-campos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .calc-campos { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.campo-calc { display: block; font-size: .85rem; color: var(--texto2); font-weight: 600; position: relative; }
.campo-calc > span:first-child { display: block; margin: 0 0 .25rem; }
.campo-calc select, .campo-calc input {
  font: inherit; width: 100%; margin-top: .25rem; padding: .6rem .7rem; min-height: 48px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); color: var(--texto);
}
/* Un campo de peso con flechas es un campo que alguien sube de 0,1 en 0,1 con
   el pulgar. Se escribe, no se pulsa. */
.campo-calc input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.campo-calc input[type="number"]::-webkit-outer-spin-button,
.campo-calc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.con-unidad { position: relative; display: block; }
.con-unidad > span { position: absolute; right: .8rem; top: 50%; transform: translateY(-15%);
                     color: var(--texto2); font-weight: 600; pointer-events: none; }
.pastilla { display: inline-block; width: 14px; height: 14px; border-radius: 4px;
            border: 1px solid var(--borde); vertical-align: -2px; margin-right: .35rem; }
/* La pastilla de color va a la IZQUIERDA, dentro del campo: a la derecha se
   monta encima de la flecha del desplegable, que es donde el pulgar apunta.

   Se cuelga del envoltorio del desplegable y no de la etiqueta: la etiqueta es
   una celda de la rejilla y se estira hasta el alto de la fila, asi que
   `bottom` la dejaba flotando 38 px por debajo del campo en escritorio y a
   caballo del borde superior en el telefono. */
.con-pastilla { position: relative; display: block; }
.con-pastilla > .pastilla { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
                            margin: 0; pointer-events: none; }
.campo-calc select[data-faja] { padding-left: 2.1rem; }

/* WebKit no deja que un `select` con su apariencia nativa crezca: `min-height:
   48px` se le queda en 18 y en Safari estos desplegables miden 21 px de alto,
   menos de la mitad del objetivo tactil. Chrome los daba a 48 y por eso no se
   veia. Sin apariencia nativa el alto se respeta, y la flecha se dibuja con
   dos degradados —no con una imagen— para que siga al modo oscuro. */
.campo select, .campo-calc select, .calc-campos select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto2) 50%),
                    linear-gradient(135deg, var(--texto2) 50%, transparent 50%);
  background-position: right 1.15rem center, right .8rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

/* Segmentado: dos o tres opciones que se ven todas. Un desplegable de dos
   opciones esconde la mitad de la pregunta. */
.segmentado { display: flex; gap: 0; margin-top: .25rem; border: 1px solid var(--borde);
              border-radius: 10px; overflow: hidden; }
.segmentado button {
  flex: 1 1 0; font: inherit; font-weight: 600; font-size: .92rem; min-height: 48px;
  background: var(--fondo); color: var(--texto2); border: 0; cursor: pointer; padding: .4rem .5rem;
}
.segmentado button + button { border-left: 1px solid var(--borde); }
.segmentado button[aria-pressed="true"] { background: var(--marca); color: #0B0D0C; }

.pestanas { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; margin: 0 0 .7rem; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  font: inherit; font-weight: 700; font-size: .9rem; white-space: nowrap;
  background: transparent; color: var(--texto2); border: 0; border-bottom: 3px solid transparent;
  min-height: 46px; padding: .3rem .7rem; cursor: pointer;
}
.pestanas button[aria-pressed="true"] { color: var(--texto); border-bottom-color: var(--marca); }
.sel-fila { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.sel-fila .segmentado { flex: 1 1 12rem; margin-top: 0; }
.sel-fila .campo-calc { flex: 1 1 12rem; }

.tabla-pesos td, .tabla-pesos th { padding: .7rem; }

/* La tabla de duraciones: un bloque por tiempos iguales. El titulo del bloque
   es la categoria; debajo, sangrados, solo los casos que duran distinto. */
.tabla-duraciones th { text-align: left; padding-top: 1rem; }
.tabla-duraciones .dur-titulo th { border-bottom: 0; padding-bottom: .15rem; }
.tabla-duraciones .dur-caso { padding-left: 1.2rem; color: var(--texto2); }
.tabla-duraciones .dur-grupos { display: block; font-size: .85em; font-weight: 400; color: var(--texto2); }
/* «1 min 30 s» partido en dos lineas deja una «s» sola debajo del numero. */
.tabla-duraciones td.num { white-space: nowrap; }
.fila-tuya { background: rgba(216,248,74,.12); }
.fila-tuya td:first-child { box-shadow: inset 3px 0 0 var(--marca); font-weight: 700; }

/* ── El cierre de inscripciones ─────────────────────────────────────────── */

.cierre {
  border-radius: 14px; padding: .9rem 1.1rem; margin: 0 0 1rem;
  border: 2px solid var(--marca); background: var(--superficie);
}
.cierre--ambar { border-color: #E8A33B; }
.cierre--roja  { border-color: #FF4B42; background: rgba(255,75,66,.09); }
.cierre--fin   { border-color: var(--borde); }
.cierre-rotulo { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
                 color: var(--texto2); margin: 0 0 .2rem; }
.cierre-reloj {
  font-family: var(--display); font-weight: 800; line-height: 1;
  /* Cifras de ancho fijo: si no, el bloque se mueve solo cada vez que cambia
     un minuto y el ojo lo persigue. */
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 7vw, 2.8rem); margin: 0 0 .2rem;
}
.cierre--roja .cierre-reloj { color: #FF4B42; }
.cierre--ambar .cierre-reloj { color: #E8A33B; }
.cierre-urgente { font-weight: 700; color: #FF4B42; margin: 0 0 .2rem; }
.cierre-exacto { color: var(--texto2); font-size: .9rem; margin: 0; }

/* La banda de referencias: lo que se mira de un vistazo antes de leer nada. */
/* `padding: 0` no es decorativo: es un `<ul>`, y el sangrado que el navegador
   le pone por omision —unos 40 px— empujaba las cuatro tarjetas a la derecha
   mientras el resto de la pagina quedaba alineado. La rejilla no lo quita:
   `list-style: none` esconde la vinieta pero no el hueco donde iba. */
.referencias { display: grid; gap: .5rem; margin: 0 0 1.4rem; padding: 0; }
@media (min-width: 620px) { .referencias { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .referencias { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.referencias li { list-style: none; background: var(--superficie); border: 1px solid var(--borde);
                  border-radius: 10px; padding: .6rem .8rem; display: grid; gap: .1rem; }
.referencias b { font-family: var(--display); font-weight: 800; font-size: .95rem; }
.referencias span { font-size: .82rem; color: var(--texto2); }

/* El menú de anclas, pegajoso debajo de la barra en teléfono. */
.anclas { position: sticky; top: 60px; z-index: 20; display: flex; gap: .2rem;
          overflow-x: auto; scrollbar-width: none; background: var(--fondo);
          border-bottom: 1px solid var(--borde); margin: 0 0 1.2rem; padding: .3rem 0; }
.anclas::-webkit-scrollbar { display: none; }
.anclas a { white-space: nowrap; text-decoration: none; font-weight: 600; font-size: .9rem;
            padding: .5rem .7rem; min-height: 44px; display: inline-flex; align-items: center;
            border-radius: 8px; color: var(--texto2); }
.anclas a:hover { background: var(--superficie2); color: var(--texto); }
@media (min-width: 900px) { .anclas { top: 74px; } }
.oc section[id] { scroll-margin-top: 130px; }
.afiche-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 0; }

/* ── Lotes de tarifa ────────────────────────────────────────────────────── */

.lote { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: .9rem 1rem; }
.lote--vigente { border-color: var(--marca); border-width: 2px; }
.lote--pasado { opacity: .5; }
.lote-alto { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 .2rem; }
.lote-alto b { font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.precios { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.precios li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
              border-bottom: 1px dashed var(--borde); padding: .25rem 0; }
.precios b { font-family: var(--display); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cierre-titulo { font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin: 0; }

/* La cuenta atrás en una tarjeta: una línea, no un bloque. El bloque grande es
   para la página del evento, donde ya se decidió mirar. */
.cierre-linea { font-size: .9rem; margin: .2rem 0 .4rem; color: var(--texto2); }
.cierre-linea b { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums;
                  color: var(--marca); }
.cierre-linea--ambar b { color: #E8A33B; }
.cierre-linea--roja b { color: #FF4B42; }
.oe-afiche { display: block; margin: -1rem -1rem .8rem; }
.oe-afiche img { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; }

/* ── Academias ──────────────────────────────────────────────────────────── */

.aca { text-align: center; }
.aca-logo { display: block; height: 64px; width: auto; margin: 0 auto .6rem; object-fit: contain; }
.aca-logo--grande { height: 96px; margin: 0; }
/* Sin logo, la inicial: un hueco del tamaño de un logo en una fila de
   tarjetas se lee como una imagen que no cargó. */
.aca-inicial {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 0 auto .6rem; border-radius: 50%;
  background: var(--superficie2); color: var(--texto2);
  font-family: var(--display); font-weight: 800; font-size: 1.6rem;
}
.aca-cabeza { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: 0 0 1rem; }
.registrar { margin-top: 2rem; border-left: 3px solid var(--marca); }

/* ── El hero con imagen de portada ──────────────────────────────────────── */

.oh--foto { position: relative; padding: 0; margin: 0 calc(var(--gutter) * -1) 2rem;
            min-height: 46vh; display: grid; isolation: isolate; }
.oh-fondo { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; display: block; }
.oh--foto::after {
  content: ""; grid-area: 1/1;
  background: linear-gradient(to top, rgba(11,13,12,.95) 8%, rgba(11,13,12,.55) 55%, rgba(11,13,12,.25) 100%);
}
.oh-texto { grid-area: 1/1; z-index: 1; align-self: end; text-align: center;
            padding: 2rem var(--gutter) 1.6rem; }
.oh--foto .oh-emblema { height: clamp(76px, 16vw, 130px); }
@media (min-width: 1216px) { .oh--foto { margin-inline: 0; border-radius: var(--radio); overflow: hidden; } }

/* ── La banda de academias ──────────────────────────────────────────────── */

.banda-aca { margin: 2.2rem 0; }
.banda-aca h2 { font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
                color: var(--texto2); margin: 0 0 .8rem; }
.banda-pista { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.banda-cinta { display: flex; gap: 1.4rem; width: max-content; animation: desfila 38s linear infinite; }
.banda-pista:hover .banda-cinta, .banda-pista:focus-within .banda-cinta { animation-play-state: paused; }
/* Con menos de seis, una fila quieta y centrada: cuatro logos desplazandose
   parecen un anuncio. */
.banda-pista--quieta { -webkit-mask-image: none; }
.banda-pista--quieta .banda-cinta { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }
.banda-logo { flex: none; display: block; }
.banda-logo img {
  display: block; height: 58px; width: auto; border-radius: 8px;
  /* Gris suave que vuelve al color al pasar por encima: es lo que mantiene la
     banda de una pieza con logos muy distintos entre si. */
  filter: grayscale(1) opacity(.72); transition: filter .2s ease;
}
.banda-logo:hover img, .banda-logo:focus img { filter: none; }
@keyframes desfila { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .banda-cinta { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .banda-pista { -webkit-mask-image: none; }
}

/* La nav del organizador no puede empujar la barra: entre 1024 y 1440 px, con
   cinco enlaces y el selector de idioma, «Ranking» quedaba cortado. Se le da
   permiso para encogerse antes que el logo. */
.ob-nav { min-width: 0; flex: 1 1 auto; justify-content: safe flex-end; }
/* A 375 el menu desborda: con flex-end su principio quedaba fuera por la izquierda, inalcanzable. */
@media (max-width: 560px) { .ob-nav { justify-content: flex-start; } }
.ob-marca { flex: none; }
.jornada-comun { margin: -.4rem 0 .8rem; font-weight: 600; }
.aca a { text-decoration: none; color: inherit; }
/* ── El cartel de «nueva versión» ─────────────────────────────────────────
   Abajo, centrado, por encima de todo y sin tapar nada importante. Discreto a
   propósito: no es una alarma, es un aviso. Quien está en mitad de algo lo
   cierra y sigue. */
.hay-version {
  position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .75rem;
  max-width: calc(100vw - 2rem);
  padding: .6rem .6rem .6rem 1rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600;
  background: var(--texto); color: var(--fondo);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.hay-version button {
  font: inherit; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 999px; min-height: 38px; padding: 0 1rem;
  background: var(--marca); color: #10110f;
}
.hay-version .hay-version-cerrar {
  background: transparent; color: inherit; opacity: .65;
  min-width: 38px; padding: 0; font-size: 1.2rem; line-height: 1;
}
.hay-version .hay-version-cerrar:hover { opacity: 1; }
@media (max-width: 420px) {
  .hay-version { left: 1rem; right: 1rem; transform: none; max-width: none; border-radius: 14px; }
}

/* ── El recorrido de inscripción ────────────────────────────────────────────

   Tres pasos, y el total abajo todo el tiempo. Pensado para un teléfono en la
   mano, de pie, en un gimnasio: nada mide menos de 44 px de alto y no hay una
   sola columna que se parta a 375. */

.oc--recorrido { padding-bottom: 7rem; }   /* sitio para el resumen anclado */

/* El resumen fijo. Anclado abajo y no al final de la página: la pregunta
   «cuánto es» se hace todo el tiempo, no al terminar. */
.resumen-fijo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--superficie2); border-top: 2px solid var(--marca);
  padding: .7rem var(--gutter) max(.7rem, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.resumen-cuerpo { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                  max-width: 720px; margin: 0 auto; }
.resumen-cifras { display: flex; flex-direction: column; min-width: 0; }
.resumen-cifras .total { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
/* El precio de antes, tachado al lado del de ahora. Un descuento que no se ve
   contra qué no se lee como un descuento. */
.resumen-antes { text-decoration: line-through; color: var(--texto2); font-size: .85rem; }
.resumen-desc { list-style: none; margin: .5rem auto 0; padding: 0; max-width: 720px;
                font-size: .85rem; color: var(--texto2); }
.resumen-desc li { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.resumen-menos { color: #9BE88B; font-weight: 600; white-space: nowrap; }
.resumen-pista { max-width: 720px; margin: .5rem auto 0; font-size: .85rem; color: var(--marca); }

/* Paso 1: a quién. Tarjetas, no filas de tabla: en un teléfono una tabla de
   cuatro columnas se lee con lupa. */
.lista-elegir { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .7rem; }
.elegir { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
          padding: .9rem 1rem; }
.elegir label { display: grid; grid-template-columns: 26px 1fr; gap: .2rem .8rem;
                align-items: center; cursor: pointer; min-height: 44px; }
.elegir input { grid-row: span 2; width: 24px; height: 24px; }
.elegir-nombre { font-weight: 700; }
/* Ya inscrito: se queda a la vista, en gris. Esconderlo hace que quien busca a
   su hijo crea que lo perdió y lo vuelva a anotar. */
.elegir--hecho { opacity: .72; border-style: dashed; }
.elegir--hecho label { cursor: default; }
.elegir-estado { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.elegir-estado li { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }

.pildora { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
           padding: .25rem .6rem; border-radius: 999px; }
.pildora--ok { color: #9BE88B; background: rgba(155,232,139,.12); }
.pildora--espera { color: #E8C56B; background: rgba(232,197,107,.14); }

.alta-atleta { margin: 0 0 1.4rem; }
.alta-atleta > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center;
                         font-weight: 600; }

/* Paso 2: una tarjeta por atleta. */
.atleta-panel { background: var(--superficie); border: 1px solid var(--borde);
                border-radius: var(--radio); padding: 1rem; margin: 0 0 1rem; }
.atleta-panel h3 { margin: 0 0 .2rem; font-size: 1.15rem; }

/* El lote vigente y su cuenta atrás. Mismo código de color que el cierre de
   inscripciones: verde no, ámbar a tres días, rojo a menos de uno. */
.lote { border: 1px solid var(--borde); border-left-width: 4px; border-radius: 12px;
        padding: .7rem 1rem; margin: 0 0 1rem; background: var(--superficie2); }
.lote--normal { border-left-color: var(--borde); }
.lote--ambar { border-left-color: #E8C56B; }
.lote--roja { border-left-color: #FF6B63; }
.lote-rotulo { margin: 0; font-size: .8rem; color: var(--texto2); text-transform: uppercase;
               letter-spacing: .06em; }
.lote-reloj { margin: .1rem 0 .2rem; font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.lote p:last-child { margin-bottom: 0; }

.categoria { background: var(--superficie2); border-radius: 12px; padding: .8rem 1rem; margin: .8rem 0 0; }
.categoria-rotulo { margin: 0; font-size: .8rem; color: var(--texto2); text-transform: uppercase;
                    letter-spacing: .06em; }
.categoria-valor { margin: .15rem 0 .2rem; font-family: var(--display); font-weight: 800;
                   font-size: 1.1rem; }
.categoria p:last-child { margin-bottom: 0; }

/* Segmentado de radios: las opciones se ven todas, con su precio debajo. Un
   desplegable de tres opciones esconde dos tercios de la pregunta, y aquí la
   pregunta lleva precio. */
.segmentado--ancho { display: grid; grid-template-columns: 1fr; border: 0; gap: .5rem; }
@media (min-width: 480px) { .segmentado--ancho { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
.segmentado--ancho legend { font-weight: 600; font-size: .9rem; padding: 0; margin: 0 0 .25rem; }
.segmentado--ancho label {
  display: grid; grid-template-columns: 24px 1fr; gap: .1rem .6rem; align-items: center;
  border: 1px solid var(--borde); border-radius: 10px; padding: .6rem .8rem;
  min-height: 56px; cursor: pointer; background: var(--fondo);
}
.segmentado--ancho label:has(input:checked) { border-color: var(--marca); background: var(--superficie2); }
.segmentado--ancho input { grid-row: span 2; width: 22px; height: 22px; }
.segmentado--ancho .chico { color: var(--texto2); }
.segmentado--ancho .ahorro { grid-column: 1 / -1; margin: 0; color: #9BE88B; }

.casilla--grande label, label.casilla--grande { display: flex; gap: .7rem; align-items: flex-start;
  min-height: 52px; padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie); cursor: pointer; margin: .6rem 0; }
.casilla--grande input { width: 24px; height: 24px; flex: none; margin-top: .1rem; }

.condiciones { margin: 1.5rem 0; }
.cond-puntos { margin: .5rem 0 1rem; padding-left: 1.1rem; display: grid; gap: .35rem; }
.cond-texto { border: 1px solid var(--borde); border-radius: 12px; margin: 0 0 .6rem;
              background: var(--superficie); }
.cond-texto > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center;
                        padding: 0 1rem; font-weight: 600; }
.cond-cuerpo { padding: 0 1rem 1rem; font-size: .92rem; color: var(--texto2); }
.cond-cuerpo p { margin: 0 0 .7rem; }

.codigo { border: 1px dashed var(--borde); border-radius: 12px; padding: 0 1rem; margin: 0 0 1rem; }
.codigo > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center;
                    color: var(--texto2); font-size: .92rem; }
.codigo .campo { margin: 0 0 1rem; }

/* Un botón que parece un enlace, para «mi academia no está»: no es una acción
   principal y un botón lleno al lado del campo compite con «Seguir». */
.enlace { background: none; border: 0; color: var(--marca); font: inherit; text-decoration: underline;
          cursor: pointer; padding: .2rem 0; min-height: 32px; }

.boton--grande { width: 100%; min-height: 56px; font-size: 1.05rem; }

.confirmacion { text-align: center; padding: 1.5rem 0 .5rem; }
.confirmacion .numero { font-family: var(--display); font-weight: 800; font-size: 1.6rem;
                        letter-spacing: .04em; margin: .4rem 0 .2rem; }
.confirmacion .display { font-size: 2rem; margin: .4rem 0; }
.resumen-final table { width: 100%; border-collapse: collapse; }
.resumen-final td, .resumen-final th { padding: .6rem 0; text-align: left; vertical-align: top; }
.resumen-final .num { text-align: right; }
.resumen-final tfoot th { border-top: 1px solid var(--borde); font-size: 1.1rem; }
.despues { margin: 2rem 0; }
.acciones-lista { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .1rem; }
.acciones-lista a { display: flex; align-items: center; min-height: 48px; }

/* La barra de Safari tapa el fondo de la pagina: el ultimo boton queda
   debajo y no se puede tocar. `safe-area-inset-bottom` es lo que el sistema
   dice que hay que dejar; el `2rem` es para los navegadores que no lo tienen. */
.oc { padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Un `input[type=date]` de WebKit trae su ancho propio y se sale de la
   tarjeta. `width:100%` no basta: hay que quitarle el ancho intrinseco. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
/* En iOS el contenido del campo se centra y queda descolgado del resto. */
input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* Los huecos debajo de las tarjetas: la rejilla ya separa, el margen del
   ultimo parrafo sobraba y se sumaba al `gap`. */
.oe > :last-child, .ficha > :last-child, .aca > :last-child { margin-bottom: 0; }
.rejilla { row-gap: 1rem; }

/* ── Las hojas de llave, para imprimir ────────────────────────────────────
   Una hoja por categoria, A4 acostado, y una regla que no se negocia: que
   quepa en UNA pagina. Un cuadro cortado a la mitad no sirve en un tapete.

   En pantalla se ven con borde, para revisarlas antes de gastar papel; al
   imprimir se van el borde, el margen y el boton.

   El cuadro no dibuja conectores a proposito. Cada columna siguiente tiene la
   mitad de casillas y cada casilla el doble de alto, asi que la linea de un
   ganador cae siempre enfrente de su cruce. Un conector mas seria una linea
   mas que puede desalinearse al imprimir. */
@page { size: A4 landscape; margin: 10mm; }

body.imprimir { background: #eceae5; }
body.imprimir .oc { max-width: none; padding: 1rem; }
.hoja-barra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.hoja {
  background: #fff; color: #16181c;
  border: 1px solid #d6d2ca; border-radius: 4px;
  padding: 10mm; margin: 0 auto 1rem; max-width: 277mm;
  display: flex; flex-direction: column; gap: 6mm;
}
.hoja-cabeza { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 4mm; }
.hoja-marca img { height: 14mm; width: auto; display: block; }
.hoja-peso, .hoja-tiempo { margin: 2mm 0 0; font-size: .85rem; }
.hoja-peso b, .hoja-tiempo b { font-size: 1.05rem; white-space: nowrap; }
.hoja-titulo { text-align: center; }
.hoja-titulo h2 { margin: 0; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .02em; }
.hoja-titulo p { margin: 1mm 0 0; font-size: .78rem; color: #5b6069; }
.hoja-derecha { text-align: right; }
.hoja-seq { margin: 1mm 0 0; font-size: .78rem; color: #5b6069; }
.hoja-aviso { margin: 1mm 0 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; }

.hoja-cuadro { flex: 1; display: flex; align-items: stretch; min-height: 90mm; }
.hoja-col { flex: 1; display: flex; flex-direction: column; }
.hoja-col--sigue { border-left: 1px solid #c9c4ba; }
.hoja-casilla {
  flex: 1; margin: 1mm 2mm; padding: 1.5mm 2mm;
  border-bottom: 1px solid #16181c;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-size: .76rem; line-height: 1.2; min-height: 8mm;
}
.hoja-casilla b { font-size: .84rem; }
.hoja-casilla span { color: #5b6069; font-size: .68rem; }
.hoja-casilla--vacia { border-bottom-style: dashed; border-bottom-color: #c9c4ba; }

/* La llave de tres no es un cuadro: son tres combates en orden, y por eso se
   leen como una lista numerada y no como medio cuadro de cuatro. */
.hoja-tres { flex: 1; }
.hoja-combates { list-style: none; margin: 0; padding: 0; display: grid; gap: 5mm; }
.hoja-combates li { display: grid; grid-template-columns: 8mm 1fr 1fr; gap: 3mm; align-items: end; }
.hoja-n { font-weight: 800; font-size: 1.05rem; }
.hoja-solo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3mm; max-width: 95mm; }
.hoja-nota { margin: 0; font-size: .74rem; color: #5b6069; }

.hoja-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; align-items: end; }
.hoja-podio { list-style: none; margin: 0; padding: 0; display: grid; gap: 3mm; }
.hoja-podio li { display: grid; grid-template-columns: 8mm 1fr; gap: 2mm; align-items: end; }
.hoja-pos { font-weight: 800; }
.hoja-linea { display: block; border-bottom: 1px solid #16181c; height: 5mm; }
.hoja-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.hoja-firmas div span + span {
  display: block; text-align: center; font-size: .74rem; color: #5b6069; margin-top: 1mm;
}

@media print {
  body.imprimir { background: #fff; }
  body.imprimir .oc { padding: 0; }
  .no-imprime { display: none !important; }
  .hoja {
    border: 0; border-radius: 0; margin: 0; padding: 0; max-width: none;
    min-height: 175mm; break-after: page; page-break-after: always;
  }
  .hoja:last-child { break-after: auto; page-break-after: auto; }
}

/* ── El menu de cuenta ───────────────────────────────────────────────────── */
.ob-cuenta { position: relative; flex: none; }
.ob-yo {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  min-height: 44px; padding: 0 .45rem 0 .3rem; border-radius: 999px;
  background: var(--superficie2); color: var(--texto); border: 1px solid var(--borde); font: inherit;
}
.ob-yo:hover, .ob-yo[aria-expanded="true"] { border-color: var(--marca); }
.ob-iniciales {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--marca); color: #10110f; font-family: var(--display); font-weight: 800; font-size: .85rem;
}
.ob-yo-flecha { color: var(--texto2); transition: transform .15s; }
.ob-yo[aria-expanded="true"] .ob-yo-flecha { transform: rotate(180deg); }
.ob-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 240px; max-width: calc(100vw - 2 * var(--gutter));
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45); padding: .4rem;
}
.ob-menu-quien { margin: 0; padding: .55rem .7rem .6rem; display: grid; gap: .1rem; }
.ob-menu-quien span { color: var(--texto2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-menu hr { border: 0; border-top: 1px solid var(--borde); margin: .3rem 0; }
.ob-menu [role=menuitem] {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 .7rem;
  border-radius: 8px; color: var(--texto); text-decoration: none; font: inherit; font-weight: 600;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.ob-menu [role=menuitem]:hover, .ob-menu [role=menuitem]:focus-visible { background: var(--superficie2); outline: none; }
.ob-menu [role=menuitem][aria-current="page"] { box-shadow: inset 3px 0 0 var(--marca); }
.ob-menu [data-salir] { color: var(--texto2); }
@media (max-width: 560px) { .ob-menu { position: fixed; top: 64px; right: var(--gutter); } }

/* ── La confirmacion flotante ────────────────────────────────────────────── */
.aviso-flotante {
  position: fixed; z-index: 95; left: 50%; transform: translateX(-50%);
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .6rem; width: max-content; max-width: calc(100vw - 2rem);
  padding: .8rem 1.2rem; border-radius: 12px; font-weight: 700;
  background: #1f7a3d; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: sube .2s ease-out;
}
.aviso-flotante[data-tipo="error"] { background: #b3261e; }
.aviso-flotante > span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.2); }
@keyframes sube { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (prefers-reduced-motion: reduce) { .aviso-flotante { animation: none; } }

/* ── Mi perfil y Configuracion ───────────────────────────────────────────── */
.perfil-cabeza { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1.5rem; }
.perfil-cabeza h1 { margin: 0; }
.perfil-cabeza p { margin: .2rem 0 0; }
.perfil-iniciales {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--marca); color: #10110f; font-family: var(--display); font-weight: 800; font-size: 1.4rem;
}
.perfil-bloque { margin: 0 0 2.2rem; max-width: 760px; }
.perfil-bloque > h2, .perfil-bloque-cabeza h2 { margin: 0 0 .8rem; }
.perfil-bloque-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .8rem; }
.perfil-bloque-cabeza h2 { margin: 0; }
.campos-2 { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .campos-2 { grid-template-columns: 1fr 1fr; } }
.botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.oc > h1 + .perfil-bloque { margin-top: 1.4rem; }
.perfil-cabeza p { overflow-wrap: anywhere; }

/* ── Equipo del evento ───────────────────────────────────────────────────── */
.equipo { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; }
.equipo li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem;
  padding: .5rem .7rem; background: var(--superficie2); border-radius: 10px; }
.equipo li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.equipo-alta { display: grid; gap: 0 1rem; align-items: end; }
@media (min-width: 620px) { .equipo-alta { grid-template-columns: 2fr 1fr auto; } .equipo-alta .boton { margin-bottom: 1rem; } }
@media (max-width: 480px) { .equipo li { grid-template-columns: 1fr auto; } .equipo li .boton { grid-column: 1 / -1; justify-self: start; } }

/* ── Agrupacion de fajas del evento ──────────────────────────────────────── */
.agr-grupos { display: grid; gap: 0 1rem; align-items: end; }
@media (min-width: 620px) { .agr-grupos { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } .agr-grupos > .boton { margin-bottom: 1rem; justify-self: start; } }
.agr-fajas td.campo { margin: 0; padding-block: .35rem; }
.agr-fajas select { width: 100%; }
.agr-faja { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.agr-faja i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--borde); flex: none; }
.agr-fajas td:first-child { white-space: nowrap; }
.agr-especial { display: grid; gap: 0 .8rem; padding: .8rem; margin: 0 0 .8rem; border: 1px solid var(--borde); border-radius: 10px; }
@media (min-width: 620px) { .agr-especial { grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr 1fr; align-items: end; } .agr-especial > .boton { grid-column: 1 / -1; justify-self: start; } }
.agr-vista { margin: 1rem 0; padding: .9rem 1rem; background: var(--superficie2); border-radius: 10px; border-left: 3px solid var(--marca); }
.agr-vista:empty { display: none; }
.agr-cambios { margin: .4rem 0; padding-left: 1.2rem; }
.categoria-opciones { border: 0; padding: 0; margin: .6rem 0 0; display: grid; gap: .3rem; }
.categoria-opciones legend { font-weight: 700; margin-bottom: .3rem; }
/* Un fieldset crece hasta su contenido (min-width: min-content): la tabla de lotes estiraba el panel a 518 px en un telefono. */
fieldset { min-width: 0; }

/* Llaves del evento, en el editor */
.llv-lista, .llv-atletas, .llv-orden, .llv-cruces { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; }
.llv-lista li, .llv-orden li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: 10px; }
.llv-lista li > span:first-child, .llv-orden li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.llv-lista .botones { margin: 0; }
.llv-orden { counter-reset: llv; }
.llv-orden li { grid-template-columns: auto 1fr auto; }
.llv-orden li::before { counter-increment: llv; content: counter(llv); font-weight: 700; color: var(--marca); min-width: 1.4rem; }
.llv-mueve { display: flex; gap: .3rem; }
.llv-mueve .boton { min-width: 2.4rem; }
.llv-divs { display: grid; gap: .5rem; margin: 0 0 1rem; }
.llv-div { border: 1px solid var(--borde); border-radius: 10px; padding: .5rem .8rem; }
.llv-div summary { display: flex; justify-content: space-between; align-items: center; gap: .6rem; cursor: pointer; font-weight: 600; }
.llv-div summary span:first-child { min-width: 0; overflow-wrap: anywhere; }
.llv-atletas { margin: .6rem 0 .4rem; }
.llv-cruces li { padding: .5rem .7rem; background: var(--superficie2); border-radius: 8px; overflow-wrap: anywhere; }
.llv-cruces .cinta { margin-right: .4rem; }
.llv-sub { font-weight: 600; margin: .8rem 0 .4rem; }
@media (max-width: 480px) { .llv-lista li { grid-template-columns: 1fr; } .llv-orden li { grid-template-columns: auto 1fr; } .llv-mueve { grid-column: 1 / -1; justify-content: flex-end; } }
.llv-op { display: flex; gap: .5rem; align-items: flex-start; margin: .4rem 0; }
/* La hoja en un telefono: el titulo arriba y entero, el peso y el tiempo debajo, lado a lado. */
@media screen and (max-width: 600px) {
  .hoja { padding: 5mm; }
  .hoja-cabeza { grid-template-columns: 1fr 1fr; }
  .hoja-titulo { grid-column: 1 / -1; order: -1; }
  .hoja-titulo h2 { font-size: 1rem; }
}

/* Inscripcion express y pagos por confirmar (28 de septiembre). */
.express fieldset.ficha { min-width: 0; }
.express fieldset.ficha > legend { font-weight: 700; padding: 0 .3rem; }
.express-cabeza h2 { margin: .4rem 0 .2rem; }
.express-precio { font-weight: 700; font-size: 1.1rem; margin: .5rem 0; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pago-datos { white-space: pre-wrap; word-break: break-word; font-family: inherit; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem; }
.pagos-lista { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pago-fila p { margin: 0 0 .4rem; }
.pago-atletas { margin: .2rem 0 .5rem; padding-left: 1.1rem; }
.pago-atletas .chico { display: block; }
.pago-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem !important; }

/* Peleas pactadas. */
.express-afiche { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 1rem; border-radius: var(--radio); }
.express-pago { font-size: 1.2rem; font-weight: 700; background: var(--superficie); border: 2px solid var(--marca);
  border-radius: var(--radio); padding: 1rem; }
.ev-pactada { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; font-size: 1.05rem; }
.pa-cifras { display: flex; flex-wrap: wrap; gap: .4rem; }
.pa-enlaces a { word-break: break-all; }
.pa-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
.pa-filtros label, .pa-nueva label { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; min-width: 0; }
.pa-filtros select, .pa-filtros input, .pa-nueva select {
  font: inherit; font-weight: 400; width: 100%; min-width: 0; padding: .5rem .6rem; min-height: 44px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); color: var(--texto); }
.pa-rango { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.pa-inscritos > li, .pa-peleas > li { min-width: 0; overflow-wrap: anywhere; }
.pa-inscritos, .pa-peleas { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; }
@media (min-width: 900px) { .pa-inscritos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-inscrito p, .pa-pelea p { margin: 0 0 .35rem; }
.pa-pago { max-width: 20rem; }
.pa-nueva { display: grid; gap: .6rem; }
.pa-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem; align-items: center; }
.pa-vs small, .pa-lado small { display: block; font-size: .8rem; color: var(--texto2); font-weight: 400; }
.pa-vs em { font-style: normal; color: var(--texto2); }
.pa-gana { color: #9BE88B; font-weight: 700; }
.pa-pelea--hecha { opacity: .75; }
.pa-pelea--ahora { border-color: var(--marca); border-width: 2px; }
.pa-lados { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.pa-lado { min-height: 4.5rem; min-width: 0; white-space: normal; text-align: center; flex-direction: column; overflow-wrap: anywhere; }
.pa-lado small { color: rgba(255, 255, 255, .85); }
.pa-lado--a { background: #B3261E; color: #fff; }
.pa-lado--b { background: #1B3FAE; color: #fff; }
.pa-resultado { font-size: 1.15rem; font-weight: 700; color: #9BE88B; }
.pa-credencial { border: 2px solid var(--marca); border-radius: var(--radio); padding: .8rem; margin-top: .6rem; }
.pa-credencial code { font-size: 1.05rem; word-break: break-all; }
.pa-hoja-caja { overflow-x: auto; }
.pa-hoja { width: 100%; border-collapse: collapse; }
@media (max-width: 600px) { .pa-hoja { font-size: .8rem; } .pa-hoja td:last-child { min-width: 5rem; } }
.pa-hoja th, .pa-hoja td { border: 1px solid #999; padding: .4rem; text-align: left; vertical-align: top; }
.pa-hoja td:last-child { min-width: 9rem; }
@media print { .pa-hoja { font-size: 11pt; } .pa-hoja tr { break-inside: avoid; } }

.confirmacion a.boton:not(.boton--hueco) { color: #0B0D0C; }
.pa-qr img { display: block; width: 160px; height: auto; background: #fff; border-radius: 8px; margin: .6rem 0; }
/* La hoja de peleas: tinta oscura sobre el papel claro, en pantalla y en la impresora. */
body.imprimir .pa-hoja-titulo, body.imprimir .pa-hoja, body.imprimir main > p { color: #111; }
body.imprimir .pa-hoja small { color: #444; }
body.imprimir .boton--hueco { color: #111; border-color: #888; }

/* ── Tema claro: panel del organizador y mesa ─────────────────────────────────────────────
   Fondo claro, texto oscuro. Los botones principales no usan el color de la marca (puede ser claro y perderse
   sobre blanco): van en pizarra con texto blanco. Lo verde, amarillo y los avisos se oscurecen para leerse. */
body.tema-claro {
  --fondo: #F6F7F9; --superficie: #FFFFFF; --superficie2: #EEF1F4; --borde: #C9D1DA;
  --texto: #111827; --texto2: #4B5563;
}
body.tema-claro .boton { background: #1F2933; color: #FFFFFF; border-color: #1F2933; }
body.tema-claro .boton--hueco { background: transparent; color: var(--texto); border-color: #9AA5B1; }
body.tema-claro .menu-panel button[aria-current="page"],
body.tema-claro .metodos .elegido,
body.tema-claro .segmentado button[aria-pressed="true"] { background: #1F2933; color: #FFFFFF; border-color: #1F2933; }
body.tema-claro .segmentado--ancho label:has(input:checked) { border-color: #1F2933; background: var(--superficie2); }
body.tema-claro .pa-gana, body.tema-claro .pa-resultado, body.tema-claro .estado-red.bien,
body.tema-claro .pesa-aviso .hecha, body.tema-claro .etiqueta--inscripciones_abiertas { color: #15803D; }
body.tema-claro .pildora--ok { color: #14532D; background: #DCFCE7; }
body.tema-claro .pildora--espera { color: #7C2D12; background: #FEF3C7; }
body.tema-claro .cinta--aviso { border-color: #B42318 !important; color: #B42318 !important; }
body.tema-claro .pa-pelea--ahora, body.tema-claro .pa-credencial { border-color: #1F2933; }
body.tema-claro .aviso { color: #9A3412; }
.boton--wa, body.tema-claro .boton--wa { background: #1B7F45; color: #FFFFFF; border-color: #1B7F45; }
.compartir-enlace a { word-break: break-all; }
.compartir h2 { margin-bottom: .6rem; }
body.tema-claro .ob-idiomas button[aria-current="true"] { color: #FFFFFF; background: #1F2933; }
body.tema-claro .pa-pelea--hecha { opacity: 1; }
/* La inscripcion que abre el correo del organizador (`?i=`). */
.pa-inscrito--foco { outline: 3px solid var(--marca); outline-offset: 2px; }

/* La mesa de peleas pactadas: el combate de arriba (esquinas, marcador, cronometro y ganador) tiene que caber
   en una pantalla de 1366x768 sin bajar, y apilarse en el telefono. */
.pa-mesa-cabeza { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 .8rem; }
.pa-mesa-cabeza p { margin: 0; }
.oc h1.pa-mesa-titulo { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0; }
.pa-combate { padding: .6rem .9rem; margin: 0 0 1.2rem; border-width: 2px; }
.pa-combate-cab { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pa-combate-cuerpo { display: grid; gap: .8rem; }
@media (min-width: 900px) { .pa-combate-cuerpo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.pa-combate-lados { display: grid; gap: .5rem; }
.pa-esquina { border-radius: var(--radio); padding: .4rem .7rem; color: #fff; }
.pa-esquina--a { background: #B3261E; }
.pa-esquina--b { background: #1B3FAE; }
.pa-esquina-rotulo { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.pa-esquina-nombre { margin: 0 0 .25rem; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.pa-esquina-nombre small { color: rgba(255, 255, 255, .85); font-weight: 400; }
.pa-marcador { display: grid; gap: .15rem; }
.pa-marca-fila { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pa-marca-rotulo { min-width: 7.5rem; font-size: .85rem; }
.pa-marca-cifra { min-width: 2.2rem; text-align: center; font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.pa-esquina .pa-marca-boton { min-height: 36px; min-width: 44px; padding: .2rem .5rem; background: #fff; color: #111827; border-color: #fff; }
.pa-esquina .pa-marca-boton.boton--hueco { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.pa-ganador p { margin: 0 0 .4rem; }
.pa-lado--arriba { min-height: 3.2rem; }
.pa-confirma-texto { margin: 0 0 .5rem; font-weight: 700; font-size: 1.1rem; }
.pa-combate-crono .crono { margin: 0; }
.pa-combate-crono .crono-tiempo { font-size: clamp(4.5rem, 20vw, 10rem); }
.pa-combate-crono .crono-boton { min-height: 64px; font-size: 1.5rem; }
.pa-combate-fin { margin: 0 0 1rem; }
/* Roja | cronometro | azul en el laptop; apiladas en ese orden en el telefono. */
.pa-combate-tres { display: grid; gap: .6rem; }
@media (min-width: 900px) {
  .pa-combate-tres { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .pa-combate-tres .crono-tiempo { font-size: clamp(3.5rem, 7.5vw, 7rem); }
}
.pa-columna { display: grid; gap: .5rem; }
.pa-total { margin: .1rem 0 0; line-height: 1; }
.pa-total-cifra { font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.pa-vp { margin: .2rem 0 .4rem; display: flex; gap: 1rem; font-size: 1.05rem; }
.pa-vp output { font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pa-toca { margin: .4rem 0 0; text-align: center; }
.pa-lados--uno { grid-template-columns: minmax(0, 1fr); }
.pa-lista-titulo { margin-top: .4rem !important; }
.pa-pelea--abierta { border-color: var(--marca); }
/* Categorias de pactadas: la lista, el formulario, los atletas por subcategoria y los titulos de grupo. */
.pa-categorias { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.pa-categoria { border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .8rem; }
.pa-categoria p { margin: 0 0 .35rem; }
.pa-cat-form { display: grid; gap: .6rem; border-top: 1px solid var(--borde); padding-top: .8rem; }
.pa-cat-form label { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; }
.pa-cat-form input:not([type=checkbox]) { min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; }
.pa-cat-edades { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pa-cat-fajas { border: 1px solid var(--borde); border-radius: var(--radio); padding: .5rem .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.pa-cat-fajas legend { font-size: .85rem; font-weight: 600; padding: 0 .3rem; }
.pa-cat-fajas .casilla { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; }
.pa-cat-fajas .chico { flex-basis: 100%; margin: 0; }
.pa-subcats { display: grid; gap: .6rem; }
@media (min-width: 900px) { .pa-subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-subcat { border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .8rem; min-width: 0; }
.pa-subcat h3 { margin: 0 0 .4rem; font-size: 1rem; }
.pa-subcat--vacia { opacity: .7; }
.pa-subcat-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.pa-subcat-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.pa-subcat-lista select { max-width: 14rem; min-height: 40px; font: inherit; font-size: .85rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); }
@media (max-width: 480px) { .pa-subcat-lista li { grid-template-columns: 1fr; } .pa-subcat-lista select { max-width: none; } }
.pa-grupo { list-style: none; margin: .6rem 0 0; }
.pa-grupo h3 { margin: 0; font-size: 1.05rem; }
.pa-hoja-grupo td { font-weight: 700; background: #eee; }
.pa-disciplinas { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .4rem; }
.pa-disciplinas li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pa-disc-form { display: grid; gap: .6rem; border-top: 1px solid var(--borde); padding-top: .8rem; }
.pa-disc-form label:not(.casilla) { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; }
.pa-disc-form input:not([type=checkbox]) { min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; }
.pa-disc-form .casilla { display: inline-flex; align-items: center; gap: .4rem; }
@media (min-width: 620px) { .pa-disc-form { grid-template-columns: 2fr 1fr; align-items: end; } .pa-disc-form .casilla, .pa-disc-form .botones, .pa-disc-form [data-error-disciplina] { grid-column: 1 / -1; } }
.pa-disc-inscrito { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.pa-disc-inscrito .casilla { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; }
.pa-cat-form select { min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; }
/* El panel del organizador: los 4 pasos y el aviso de subcategoria. */
.pa-pasos { margin: 0; padding-left: 1.3rem; }
.pa-pasos li { margin: 0 0 .35rem; }
.pa-aviso-subcat { border: 2px solid #B42318; border-radius: var(--radio); padding: .7rem .9rem; margin: .4rem 0 0; }
.pa-aviso-subcat p { margin: 0 0 .5rem; }

/* El cronometro de la mesa: legible a 2 metros, botones grandes para el dedo. */
.crono { background: var(--superficie); border: 2px solid var(--borde); border-radius: var(--radio, 12px);
  padding: 1rem; margin: 0 0 1.25rem; text-align: center; }
.crono-titulo { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.crono-tiempo { margin: .25rem 0; font-family: var(--display, inherit); font-weight: 800; line-height: 1;
  font-size: clamp(5rem, 28vw, 14rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.crono--corre { border-color: #1B7F45; box-shadow: 0 0 0 3px #1B7F4533; }
.crono--corre .crono-tiempo { color: var(--texto); }
.crono-ajuste { display: flex; gap: .75rem; justify-content: center; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
.crono-mas { min-height: 52px; min-width: 88px; font-size: 1.1rem; }
.crono-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: .75rem 0 0; }
.crono-boton { min-height: 72px; font-size: 1.5rem; font-weight: 700; }
.crono-fin .crono { animation: crono-parpadeo .5s steps(2, jump-none) 12; }
@keyframes crono-parpadeo { 0% { background: #D7263D; color: #fff; } 100% { background: var(--superficie); } }
@media (min-width: 700px) { .crono-boton { min-height: 96px; font-size: 2rem; } }

/* Entrar: las reglas de `base.css` (la portada) que las pantallas de la plataforma no cargaban. */
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auth { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .auth { grid-template-columns: 1fr 420px; gap: 3.5rem; }
}

.auth-visual { display: none; }
@media (min-width: 900px) { .auth-visual { display: block; } }
.auth-visual img.auth-emblema { height: 56px; width: auto; margin: 0 0 1.2rem; }
.auth-visual h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.15; margin: 0 0 .8rem; }
.auth-visual p { color: var(--texto2); max-width: 34ch; }
.auth-proximo { margin-top: 2rem; padding: 1rem 1.2rem; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--superficie); max-width: 34ch; }
.auth-proximo .etiqueta { font-family: var(--display); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto2); }

.auth-tarjeta { width: 100%; max-width: 420px; margin: 0 auto;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.6rem; }
@media (min-width: 520px) { .auth-tarjeta { padding: 2rem; } }

/* Las pestanas. El subrayado se desliza, que es toda la animacion que hace
   falta para que se entienda que son dos caras de lo mismo. */
.auth-pestanas { position: relative; display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 0 1.6rem; border-bottom: 1px solid var(--borde); }
.auth-pestanas button { appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--texto2);
  padding: .7rem .4rem; min-height: 44px; transition: color .18s ease; }
.auth-pestanas button[aria-selected="true"] { color: var(--texto); }
.auth-pestanas::after { content: ''; position: absolute; bottom: -1px; left: 0;
  width: 50%; height: 2px; background: var(--marca, var(--limon));
  transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
.auth-pestanas[data-en="crear"]::after { transform: translateX(100%); }

/* El boton de Google, con su estilo oficial: fondo blanco y logo a color, en
   claro y en oscuro. No es decoracion, es lo que la gente reconoce. */
.boton-google { display: flex; align-items: center; justify-content: center; gap: .65rem;
  width: 100%; min-height: 44px; padding: .7rem 1rem;
  background: #FFFFFF; color: #1F1F1F; border: 1px solid #DADCE0; border-radius: 10px;
  font-family: var(--cuerpo); font-weight: 600; font-size: .97rem;
  text-decoration: none; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.boton-google:hover { background: #F7F8F8; box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.boton-google svg { width: 18px; height: 18px; flex: none; }
/* A 320 px el texto del boton no cabe en una linea con el logo al lado. */
.boton-google { min-width: 0; text-align: center; }
.boton-google span { min-width: 0; overflow-wrap: anywhere; }

.auth-o { display: flex; align-items: center; gap: .9rem; margin: 1.3rem 0;
  color: var(--texto2); font-size: .88rem; }
.auth-o::before, .auth-o::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

/* Los campos, un punto mas claros que la tarjeta para que se lean como huecos
   donde se escribe y no como cajas decorativas. */
.auth-tarjeta .campo { margin: 0 0 1.1rem; }

/* Mostrar/ocultar la clave. El boton va dentro del campo, no al lado. */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 3rem; }
.campo-clave button { position: absolute; right: .35rem; bottom: .35rem;
  min-height: 38px; min-width: 38px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--texto2); cursor: pointer; border-radius: 8px; }
.campo-clave button:hover { color: var(--texto); background: var(--superficie); }

/* La fuerza de la clave: cuatro tramos que se encienden. */
.fuerza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: .5rem 0 .3rem; }
.fuerza i { height: 4px; border-radius: 2px; background: var(--borde); transition: background .2s ease; }
.fuerza[data-n="1"] i:nth-child(-n+1), .fuerza[data-n="2"] i:nth-child(-n+2),
.fuerza[data-n="3"] i:nth-child(-n+3), .fuerza[data-n="4"] i:nth-child(-n+4) { background: var(--marca, var(--limon)); }
.fuerza-texto { font-size: .83rem; color: var(--texto2); }

/* El indicativo de pais y el numero, en una sola fila. */
.tel-fila { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; }

/* El error de un campo va DEBAJO de ese campo, no al final del formulario:
   al final ya no se sabe cual era. */
.campo-error { color: var(--linea, #E4573D); font-size: .86rem; margin: .35rem 0 0; }
.auth-tarjeta .boton { width: 100%; }
.auth-pie { margin: 1.2rem 0 0; font-size: .86rem; color: var(--texto2); text-align: center; }
.auth-pie a { color: var(--texto2); }
.auth-legal { margin: 1rem 0 0; font-size: .82rem; color: var(--texto2); }
/* Una sola tarjeta (el link para entrar), centrada. */
.auth--solo { grid-template-columns: 1fr !important; justify-items: center; }

/* El seguimiento de la pagina personal de pago. */
.seguimiento { list-style: none; margin: 0 0 1.25rem; padding: 1rem; display: grid; gap: .7rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio, 12px); }
.seg-paso { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; }
.seg-icono { font-size: 1.2rem; line-height: 1.3; }
.seg-paso--mal span:last-child { color: #E4573D; }
.boton-google, .boton-google:hover { color: #1F1F1F; }
.auth-titulo { font-size: 1.5rem; margin: 0 0 1rem; text-align: center; }

/* «Descargar todo (PDF)»: cada hoja empieza en una pagina nueva. */
.pa-hoja-seccion + .pa-hoja-seccion { break-before: page; }
.pa-casilla { font-size: 1.05rem; white-space: nowrap; }
.pa-hoja--vacia td { height: 2.1rem; }
@media print { .no-imprime { display: none !important; } }
.pa-columna .pa-marca-fila { flex-wrap: nowrap; gap: .3rem; }
.pa-columna .pa-marca-rotulo { min-width: 4.6rem; font-size: .8rem; }
.pa-columna .pa-marca-boton { min-width: 40px; padding: .2rem .35rem; }
.pa-columna .pa-lado--arriba { width: 100%; }

.pa-tv { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .pa-tv-link { width: min(32rem, 90vw); font-size: .8rem; }
.pa-formas .pa-forma { min-height: 56px; font-size: 1.1rem; }

/* ── La pantalla de la TV (peleas pactadas), «Pantalla partida» validada por Pedro. 16:9, todo en vh: igual en
   1920x1080 que en 1366x768. Cada mitad usa solo su franja exterior: nada pasa debajo del cronometro. ── */
body.pantalla { margin: 0; height: 100vh; overflow: hidden; background: #111; color: #fff; cursor: none; }
body.pantalla > [data-contenido] { display: contents; }
.pt { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 100vh; font-family: Inter, system-ui, sans-serif; }
.pt-lado { position: relative; display: grid; grid-template-rows: 13vh auto 16vh auto 1fr auto; justify-items: center; align-items: center;
  min-width: 0; padding: 4vh 3vw 5vh; transition: filter .4s, opacity .4s, box-shadow .4s; }
.pt-lado--a { background: #A32D2D; padding-right: calc(15vw + 3vw); }
.pt-lado--b { background: #185FA5; padding-left: calc(15vw + 3vw); }
.pt-escuela { grid-row: 2; margin: 0; padding: .7vh 1.6vh; border-radius: 99vh; background: #fff; color: #1b1b1b; font-size: 2.4vh; font-weight: 600;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-lado--a .pt-escuela { color: #6E1717; }
.pt-lado--b .pt-escuela { color: #0E3A66; }
.pt-nombre { grid-row: 3; align-self: start; margin: 1vh 0 0; max-width: 100%; text-align: center; font-weight: 600; font-size: 6.4vh; line-height: 1.12;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.pt-total { grid-row: 5; margin: 0; font-weight: 300; font-size: 44vh; line-height: .9; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pt-salta { animation: pt-salta .45s ease-out; }
@keyframes pt-salta { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
.pt-vp { grid-row: 6; justify-self: start; display: flex; gap: 1.6vh; margin: 0; }
.pt-lado--b .pt-vp { justify-self: end; }
.pt-pastilla { min-width: 12vh; padding: .9vh 1.8vh 1vh; border-radius: 1.4vh; background: rgba(0, 0, 0, .32); line-height: 1.05; }
.pt-pastilla span { display: block; font-size: 2.3vh; color: rgba(255, 255, 255, .9); }
.pt-pastilla b { display: block; font-size: 4.6vh; font-weight: 500; font-variant-numeric: tabular-nums; }
.pt-cab { position: absolute; top: 3vh; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0; display: flex; align-items: baseline; gap: 1.6vh;
  max-width: 60vw; padding: 1.1vh 3vh; border-radius: 99vh; background: #111; white-space: nowrap; }
.pt-cab b { font-size: 3.4vh; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pt-cab small { font-size: 2.2vh; color: #9AA0A6; }
.pt-crono { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 27vw; padding: 3vh 0 2.4vh;
  border-radius: 3vh; background: #111; text-align: center; }
.pt-tiempo { margin: 0; font-weight: 500; font-size: 19vh; line-height: 1; font-variant-numeric: tabular-nums; transition: color .3s; }
.pt-tiempo--final { color: #FF4D42; }
.pt-tiempo-rotulo { margin: 1vh 0 0; font-size: 2.2vh; letter-spacing: .35em; color: #C9CDD1; }
.pt--sin-marcador .pt-lado { grid-template-rows: 13vh auto 1fr auto; }
.pt--sin-marcador .pt-nombre { grid-row: 3; align-self: center; font-size: 7vh; -webkit-line-clamp: 3; }
.pt--sin-marcador .pt-ganador-caja { grid-row: 4; }
.pt-ganador-caja { grid-row: 4; align-self: start; margin-top: 1vh; display: grid; justify-items: center; gap: .6vh; z-index: 1; }
.pt-ganador-caja[hidden] { display: none; }
.pt-ganador { margin: 0; padding: .6vh 2.4vw; border-radius: 1.2vh; background: #fff; font-weight: 800; font-size: 5.6vh; letter-spacing: .12em; }
.pt-lado--a .pt-ganador { color: #A32D2D; }
.pt-lado--b .pt-ganador { color: #185FA5; }
.pt-forma { margin: 0; font-size: 3.6vh; font-weight: 600; }
.pt-lado--gana { filter: brightness(1.2) saturate(1.1); box-shadow: inset 0 0 0 1vh rgba(255, 255, 255, .85); }
.pt-lado--gana .pt-total { font-size: 34vh; }
.pt-lado--pierde { opacity: .35; }
.pt-aviso { display: grid; place-items: center; height: 100vh; padding: 0 8vw; text-align: center; font-size: 4.5vh; color: rgba(255, 255, 255, .8); }

/* ── La mesa, opcion E de Pedro: cronometro arriba, roja | azul debajo; menos a un lado del total, mas al otro. ── */
.pa-combate--e { margin: 0 0 1.2rem; padding: .5rem .9rem .8rem; border-radius: 14px; background: #111; color: #fff; }
.pa-combate--e .pa-combate-cab { margin: 0 0 .2rem; color: #cbd5e1; font-size: .9rem; }
.pa-combate--e .pa-combate-cab .cinta { color: #e5e7eb; background: transparent; border-color: rgba(255, 255, 255, .35); }
.pa-combate--e .crono { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .7rem; margin: 0 0 .7rem;
  padding: 0; border: 0; background: transparent; box-shadow: none; color: #fff; }
.pa-combate--e .crono-titulo { display: none; }
.pa-combate--e .crono-tiempo { flex-basis: 100%; margin: 0; text-align: center; font-size: 4.6rem; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff; }
.pa-combate--e .crono-barra { flex-basis: min(640px, 70%); height: 6px; margin: .2rem 0 .3rem; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.pa-combate--e .crono-barra + * { margin-left: calc((100% - min(640px, 70%)) / 2); }
.pa-combate--e .crono-barra span { display: block; width: 0; height: 100%; background: #e5e7eb; border-radius: 3px; transition: width .2s linear; }
.pa-combate--e .crono-barra { margin-left: calc((100% - min(640px, 70%)) / 2); margin-right: calc((100% - min(640px, 70%)) / 2); }
.pa-combate--e .crono-barra + * { margin-left: 0; }
.pa-combate--e .crono-ajuste { display: flex; align-items: center; gap: .4rem; margin: 0; color: #cbd5e1; }
.pa-combate--e .crono-ajuste[hidden] { display: none; }
.pa-combate--e .crono-ajuste .boton { min-height: 40px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .3); font-size: .9rem; }
.pa-combate--e .crono-botones { display: flex; justify-content: center; gap: .6rem; margin: 0; }
.pa-combate--e .crono-botones-principal { display: contents; }
.pa-combate--e .crono-boton { min-height: 48px; min-width: 9.5rem; padding: .3rem 1rem; border-radius: 10px; background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .35); font-size: 1.1rem; line-height: 1.1; }
.pa-combate--e .crono-boton[data-crono="reinicia"] { min-width: 0; font-size: .9rem; color: #cbd5e1; }
.pa-combate--e .crono--corre .crono-boton--pausa { background: rgba(255, 255, 255, .12); }
.pa-combate--e [data-tecla]::after { content: attr(data-tecla); display: block; margin-top: .1rem; font-size: .65rem; font-weight: 500; opacity: .6; }
.pa-combate-dos { display: grid; gap: .8rem; }
@media (min-width: 760px) { .pa-combate-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.pa-combate--e .pa-esquina { padding: .45rem .7rem .6rem; border-radius: 12px; color: #fff; }
.pa-combate--e .pa-esquina--a { background: #4A1616; }
.pa-combate--e .pa-esquina--b { background: #122A4F; }
.pa-combate--e .pa-esquina-nombre { margin: 0 0 .35rem; text-align: center; font-size: 1.05rem; line-height: 1.25; }
.pa-combate--e .pa-esquina-nombre small { color: rgba(255, 255, 255, .65); font-size: .78rem; }
.pa-esquina-centro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.pa-marca-col { display: grid; gap: .4rem; }
.pa-combate--e .pa-marca-boton { min-height: 48px; min-width: 64px; padding: 0 .6rem; border-radius: 10px; background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .35); font-size: 1.15rem; font-weight: 600; }
.pa-combate--e .pa-marca-boton:hover { background: rgba(255, 255, 255, .1); }
.pa-combate--e .pa-total-cifra { text-align: center; font-size: 7.5rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.pa-esquina-pie { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .45rem; }
.pa-vp-grupo { display: grid; gap: .25rem; }
.pa-vp-rotulo { text-align: center; font-size: .95rem; }
.pa-vp-rotulo output { font-size: 1.35rem; font-weight: 700; margin-left: .2rem; font-variant-numeric: tabular-nums; }
.pa-vp-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.pa-combate--e .pa-vp-botones .pa-marca-boton { min-width: 0; width: 100%; }
.pa-combate--e .pa-esquina--sin { padding: 1.2rem .7rem; }
.pa-combate--e .pa-esquina--sin .pa-esquina-nombre { font-size: 1.5rem; }
.pa-combate--e .pa-ganador { margin-top: .5rem; }
.pa-combate--e .pa-confirma-texto { color: #fff; }
.pa-flash { animation: pa-flash .35s ease-out; }
@keyframes pa-flash { 0% { background: rgba(255, 255, 255, .55); } 100% { background: transparent; } }
.pa-total-cifra.pa-flash { animation: pa-flash-cifra .35s ease-out; }
@keyframes pa-flash-cifra { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.pa-combate--e .crono-botones .crono-boton.boton--hueco { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.pa-combate--e .crono-botones [data-deshace-marca] { order: 2; }
.pa-combate--e .crono-botones [data-crono="reinicia"] { order: 3; color: #cbd5e1; }
.pa-combate--e .pa-esquina .pa-marca-boton { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .42); }
.pa-combate--e .pa-esquina .pa-marca-mas { background: rgba(255, 255, 255, .07); }
.pa-combate--e .pa-esquina .pa-marca-boton.pa-flash { animation: pa-flash .35s ease-out; }
.pa-combate--e .pa-lado--arriba.pa-lado--a, .pa-combate--e .pa-formas .pa-lado--a { background: #A32D2D; border-color: #A32D2D; color: #fff; }
.pa-combate--e .pa-lado--arriba.pa-lado--b, .pa-combate--e .pa-formas .pa-lado--b { background: #185FA5; border-color: #185FA5; color: #fff; }
.pa-combate--e .pa-formas .boton--hueco { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.pa-combate--e .pa-formas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-combate--e .pa-formas .pa-forma { min-height: 56px; font-size: 1rem; line-height: 1.15; }
.pa-combate--e .pa-formas [data-no-gana] { grid-column: 1 / -1; min-height: 44px; }