/* ═════════════════════════════════════════════════════════════════════════════
   piezas.css — las piezas de la cara «Firme» (Entrega 1).

   Carga la ÚLTIMA a propósito: cada pieza de aquí reemplaza a su versión de sistema.css
   o marca.css, que se borra cuando su pantalla se rehace (entregas 2 a 4). Ninguna regla
   de aquí define tokens: los colores salen de tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Botón principal 3: el «+» en su propio bloque, más oscuro ──────────────────
   El gestor lo eligió entre cuatro (1-oct). Solo para la acción principal de cada
   pantalla: «Nueva jornada», «Crear una jornada». */
.btn.btn-mas { padding: 0 calc(var(--e4) - 4px) 0 0; gap: 4px; overflow: hidden; }
/* El bloque del «+» va SIEMPRE pegado a la izquierda: en un botón a lo ancho (Inicio en el
   celular) antes se iba al centro con el texto. Los dos `auto` centran el texto en lo que sobra. */
.btn.btn-mas::after { content: ''; margin-left: auto; }
.btn.btn-mas .mas {
  align-self: stretch; width: 40px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--marca-osc-2); margin-right: auto; font-size: 0;
  color: #fff;   /* color fijo: --marca-osc-2 está a 7:1 del blanco (aplicarMarca) */
}
/* El «+» del recorrido es un trazo, no la letra de Montserrat: dos rayas de 2 px. La letra
   sigue en el HTML para el lector de pantalla y para cuando no carga la hoja. */
.btn.btn-mas .mas::before { content: ''; width: 11px; height: 11px;
  background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
              linear-gradient(currentColor 0 0) center / 2px 100% no-repeat; }
.btn-sm.btn-mas { padding-right: calc(var(--e3) - 4px); }
.btn-sm.btn-mas .mas { width: 32px; }
.btn.btn-mas:hover:not(:disabled) .mas { background: color-mix(in srgb, var(--marca-osc-2) 78%, #000); }   /* color fijo: el rojo del club oscurecido con negro, en los dos modos */

/* ── Campos: dicen qué falta, marcan lo correcto, avisan lo obligatorio ─────── */
.campo label .req { color: var(--marca-clara); font-style: normal; margin-left: 2px; }
.campo.mal input, .campo.mal select, .campo.mal textarea { border-color: var(--error); }
.campo.bien input { border-color: var(--ok); }
.campo .msg { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--error); }
.campo .ayuda { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--tinta-3); }

/* ── Esqueletos de carga: la forma de lo que viene, mientras llega ──────────── */
.esq {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--hundido-2) 25%, var(--linea) 50%, var(--hundido-2) 75%);
  background-size: 200% 100%; animation: esqBrillo 1.1s linear infinite;
}
@keyframes esqBrillo { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esq { animation: none; } }
.esq-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e4); }
.esq-tarjeta { border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; background: var(--papel); }
.esq-tarjeta .esq-img { aspect-ratio: 16 / 8; border-radius: 0; max-width: 100%; }
.esq-tarjeta .esq-tx { padding: var(--e4); display: grid; gap: var(--e2); }
.esq-filas { border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); }
.esq-fila { display: flex; gap: var(--e3); align-items: center; padding: var(--e3) var(--e4); }
.esq-fila + .esq-fila { border-top: 1px solid var(--linea); }

/* ── Ventana de acceso (Entrar y Crear cuenta, rediseño 20-oct): la ilustración del lobo y el formulario ──
   Computador (≥ 860 px): dos columnas, la imagen completa a la izquierda (~45 %) y a la derecha la cabecera
   fija (logo y ✕) y el formulario, que hace scroll por dentro (Crear cuenta es largo). Celular: la imagen
   es una franja arriba, luego la misma cabecera fija y el formulario. Sin «Cancelar»: está la ✕. */
.modal.modal-acceso { width: min(440px, 100%); max-width: 440px; padding: 0; overflow: hidden; display: flex; flex-direction: column;
  max-height: calc(100dvh - 32px); }
.acc-arte { position: relative; flex: none; height: 128px; overflow: hidden; background: #0a1426; }   /* color fijo: el azul noche de la ilustración, mientras baja */
.acc-foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.acc-cab { flex: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e3);
  padding: 12px 12px 4px var(--v-pad); background: var(--papel); }
.acc-logo { height: 30px; width: auto; display: block; }
.acc-form { flex: 1; min-height: 0; overflow: auto; padding: 12px var(--v-pad) 20px; display: flex; flex-direction: column; gap: var(--e3); }
.acc-tit { margin: 0; font: 700 17px/1.3 var(--g-sans); text-transform: none; letter-spacing: 0; color: var(--fuerte); }
@media (min-width: 860px) {
  .modal.modal-acceso { width: min(900px, 100%); max-width: 900px; height: min(640px, calc(100dvh - 32px)); display: grid;
    grid-template-columns: 45% minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .acc-arte { grid-row: 1 / 3; height: auto; }
  .acc-foto { object-position: 46% 40%; }
  .acc-cab { padding: 16px 12px 4px 32px; }
  .acc-form { padding: 12px 32px 28px; }
}
/* Entrar · Crear cuenta: dos fichas de elección (Ventanas 2026), sin caja alrededor. */
.acc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acc-tab { height: 40px; border: 0; border-radius: 10px; background: var(--hundido-2); cursor: pointer;
  color: var(--tinta-2); font: 600 13.5px var(--g-sans); }
html[data-tema="claro"] .acc-tab { background: var(--alzado); }
.acc-tab:hover { color: var(--tinta); }
.acc-tab.active { background: var(--alzado); color: var(--fuerte); box-shadow: inset 0 0 0 1px var(--tinta-2); }
html[data-tema="claro"] .acc-tab.active { background: var(--papel); }
.acc-google { display: flex; justify-content: center; min-height: 44px; }
.acc-google:empty, .acc-google:empty + .acc-sep { display: none; }
.acc-sep { display: flex; align-items: center; gap: 10px; color: var(--tinta-3);
  font: 500 10px var(--g-mono); letter-spacing: .14em; text-transform: uppercase; }
.acc-sep::before, .acc-sep::after { content: ''; flex: 1; height: 1px; background: var(--linea-fuerte); }
.acc-panel { display: flex; flex-direction: column; gap: var(--e3); }
.acc-entrar { width: 100%; }
#logMsg:empty, #regMsg:empty { display: none; } /* vacío no ocupa un hueco del gap */
.acc-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.acc-olvide { align-self: flex-end; }
@media (pointer: coarse) { .acc-olvide { min-height: var(--toque); } }  /* el texto es chico; el dedo no */
/* Club / Yo solo: tarjetas como `.opcion` del recorrido, sin el radio rojo a la vista. El
   radio sigue ahí (teclado y lector de pantalla), solo que no se pinta. */
.acc-op { position: relative; display: flex; gap: var(--e2); align-items: flex-start; padding: 10px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r); background: var(--hundido-2); }
.acc-op:has(input:checked) { border-color: var(--fuerte); box-shadow: 0 0 0 1px var(--fuerte); }
.acc-op:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.acc-op input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; }
.acc-op b { display: block; font-size: 13px; }
.acc-op small { display: block; font-size: 11.5px; color: var(--tinta-3); line-height: 1.35; }
.acc-tyc { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.45; color: var(--tinta-2); }
.acc-tyc a { color: var(--marca-osc); text-decoration: underline; }
.acc-tyc input { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; margin-top: 2px; accent-color: var(--marca); }
.acc-coincide { font-size: 12px; color: var(--ok-tx); }
.acc-coincide.mal { color: var(--error); }
.campo .ayuda.mal { color: var(--error); } .campo .ayuda.bien { color: var(--ok-tx); }   /* Ola 2 · #1: la regla de la clave, en vivo */
.acc-pie { font-size: 12px; line-height: 1.5; color: var(--tinta-3); text-align: center; }
.acc-entra { animation: accEntra .25s ease-out; }
@keyframes accEntra { from { opacity: 0; transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .acc-entra { animation: none; } }

/* ── Contraseña nueva: las reglas se ven y se cumplen mientras se escribe ────── */
.ec-form { display: flex; flex-direction: column; gap: var(--e3); }
.ec-reglas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--tinta-3); }
.ec-reglas li::before { content: '○'; display: inline-block; width: 1.2em; }
.ec-reglas li.si { color: var(--ok-tx); }
.ec-reglas li.si::before { content: '✓'; }

/* ═══ Entrega 2 · piezas base ═══════════════════════════════════════════════════
   Las del recorrido que aprobó el gestor (2-oct). Rótulo con su cuadrito rojo, píldoras
   de estado, segmentado (lo que reemplaza a los desplegables), caja, lista con iconos de
   estado y opciones grandes. Solo tokens: si un color no está en tokens.css, no va. */
.rot { font: 500 10px/1.2 var(--g-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-2); display: inline-flex; align-items: center; gap: 8px; }
.pill { font: 700 9.5px/1 var(--g-mono); letter-spacing: .12em; text-transform: uppercase; height: 22px;
  padding: 0 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--linea-fuerte); color: var(--tinta-2); background: var(--hundido-2); }
button.pill { cursor: pointer; }
.p-vivo { background: var(--vivo); border-color: var(--vivo); color: var(--sobre-marca); }
.p-vivo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sobre-marca);
  animation: pVivo 1.2s ease-in-out infinite; }
@keyframes pVivo { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .p-vivo::before { animation: none; } }
.p-ok { color: var(--ok-tx); border-color: var(--ok-linea); background: var(--ok-bg); }
.p-aviso { color: var(--alerta-tx); border-color: var(--alerta-linea); background: var(--alerta-bg); }
.p-error { color: var(--error); border-color: var(--error-linea); background: var(--error-bg); }

/* Segmentado: el reemplazo del <select>. Se ven todas las opciones y se acierta con el pulgar. */
/* `align-self` para que dentro de una columna flex no se estire a todo el ancho (Entrega 3). */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; max-width: 100%; align-self: flex-start;
  background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--r); }
.seg > button { border: 0; background: transparent; color: var(--tinta-2); min-height: 36px; padding: 0 12px;
  border-radius: var(--r-sm); font: 700 12px var(--f-texto); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; }
.seg > button:hover { color: var(--tinta); }
/* La elegida en `--fuerte` (P2): era `--sobre-marca`, la letra de ENCIMA del color del club, que es
   blanca o casi negra según ese color; sobre `--hundido-2` se perdía en claro y con un club amarillo. */
.seg > button[aria-pressed="true"] { background: var(--hundido-2); color: var(--fuerte);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.seg > button[style*="--sw"]::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--sw); }
.seg .n { font: 500 10px var(--g-mono); color: var(--tinta-3); }
.seg > button[aria-pressed="true"] .n { color: var(--marca-osc); }

.caja2 { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); min-width: 0; }
.bloque { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bloque + .bloque { margin-top: var(--e5); }
.bloque-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.botonera { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lista-f { list-style: none; margin: 0; padding: 0; }
.lista-f > li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--linea); }
.lista-f > li:first-child { border-top: 0; }
.lista-f .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.lista-f .tx span { color: var(--tinta-2); font-size: 12px; }
.ico-est { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--linea-fuerte); color: var(--tinta-3); font-size: 12px; font-weight: 800; }
.ico-est.si { background: var(--ok); border-color: var(--ok); color: var(--papel); }
.ico-est.av { border-color: var(--alerta); color: var(--alerta); }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.opcion { background: var(--hundido-2); border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: left;
  font: 700 13px var(--f-texto); color: var(--tinta); }
.opcion small { font-weight: 500; color: var(--tinta-2); font-size: 11.5px; }
.opcion[aria-pressed="true"] { border-color: var(--fuerte); box-shadow: 0 0 0 1px var(--fuerte); }
.inter { width: 40px; height: 24px; border-radius: 12px; background: var(--hundido-2); border: 1px solid var(--linea-fuerte);
  position: relative; cursor: pointer; flex: none; padding: 0; }
.inter::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tinta-2); transition: left .15s; }
.inter[aria-checked="true"] { background: var(--ok); border-color: var(--ok); }
.inter[aria-checked="true"]::after { left: 19px; background: var(--sobre-marca); }
@media (max-width: 620px) {
  .lista-f > li { flex-wrap: wrap; }
  .lista-f > li > .botonera, .lista-f > li > .btn { margin-left: 36px; }
}

/* ═══ Entrega 2 · dentro del torneo: dos líneas y pestañas, sin barra lateral ═══ */
.ev { background: var(--fondo); padding-bottom: 12px; }
.ev-volver { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer;
  font: 500 10px var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); padding: 12px 0 0; }
.ev-volver .fi { font-size: 16px; }
.ev-volver:hover { color: var(--tinta); }
.ev-fila { display: flex; gap: 16px; align-items: center; padding-top: 14px; min-width: 0; }
/* La imagen del torneo (o el escudo del club), redonda y con el aro del color del club, como
   los escudos del resto de la app (Entrega 3). A cubrir: de una portada horizontal se ve el
   centro, que es lo que dice el texto de Ajustes. El margen deja sitio al aro. */
.ev-img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; margin: 3px;
  background: var(--fondo); box-shadow: 0 0 0 3px var(--marca); }
/* La «G» de GRID (sin escudo) también va en redondo, entera y con aire: no es una foto. */
.ev-img.escudo-generico { border-radius: 50% !important; background: var(--hundido-2) !important; padding: 8px !important; object-fit: contain; }
.ev-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ev-meta { font: 500 10px var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-nom { font-family: var(--g-firma); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; font-size: 30px; line-height: 1; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-acc { display: flex; gap: 8px; align-items: center; flex: none; }
/* `--barra` es el alto exacto de la barra (56 + 1 de filete): las pestañas se pegan justo
   debajo, sin hueco por donde asomen las tarjetas. */
.ev-tabs { position: sticky; top: var(--barra); z-index: 40; background: var(--fondo); display: flex; gap: 2px;
  border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.ev-tabs .nav-btn { font: 500 10.5px var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; height: 40px; padding: 0 12px;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.ev-tabs .nav-btn:hover { color: var(--tinta); }
.ev-tabs .nav-btn.active { color: var(--fuerte); border-bottom-color: var(--marca); }
.ev-tabs .cuenta, .hoja-op .cuenta { background: var(--alerta); color: var(--papel); border-radius: 3px; font: 500 9px var(--g-mono); padding: 1px 5px; }
.hoja-op .cuenta { margin-left: auto; flex: none; }
/* «Compartir» es solo el icono: 40 px, y 44 donde se toca con el dedo (como el resto de botones). */
.ev-compartir { width: 40px; height: 40px; font-size: 18px; }
@media (pointer: coarse) { .ev-compartir { width: 44px; height: 44px; } }
/* Las reglas viven al pie de la Tabla (antes eran pestaña): el aire que separa dos bloques. */
#reglasBloque { margin-top: var(--e5); }
/* En el celular las pestañas bajan a la barra de abajo (.ap-tabbar, ≤900 px). */
@media (max-width: 900px) {
  .ev-tabs { display: none; }
  .ev { padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
  .ev-img { width: 50px; height: 50px; }
  .ev-nom { font-size: 24px; }
}

/* ═══ Entrega 2 · Partidos, Tabla y Equipos ═════════════════════════════════════
   La fila de partido del recorrido (`.fp`): hora y cancha, los dos equipos en espejo con el
   marcador en medio, el estado a la derecha. En el celular cada equipo baja a su renglón y
   lleva SU número al lado (`.gol`), porque «4-1» arriba obligaba a adivinar de quién era
   cada número. */
.casilla { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tinta-2); cursor: pointer; }
.casilla input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--marca); flex: none; }

.fp { display: grid; grid-template-columns: 86px minmax(0, 1fr) 84px minmax(0, 1fr) 92px; align-items: center; gap: 12px;
  padding: 12px 14px; width: 100%; background: none; border: 0; text-align: left; color: var(--tinta);
  font: inherit; cursor: pointer; }
.fp + .fp, .fp-nomina + .fp { border-top: 1px solid var(--linea); }
.fp:hover { background: var(--hundido-2); }
.fp .h { font: 500 11px var(--g-mono); color: var(--tinta); display: flex; flex-direction: column; gap: 2px; }
.fp .h span { color: var(--tinta-3); font-size: 9.5px; letter-spacing: .12em; }
.fp .eq { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fp .eq.d { flex-direction: row-reverse; text-align: right; }
.fp .esc { flex: none; }
.fp .eq-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* `.eq-tx b` y no `.eq b`: esa alcanzaba las iniciales del escudo (`.esc > b`) y las pintaba con la letra
   del nombre, gris claro sobre el color del equipo (P2, tarea 3). */
.fp .eq-tx b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta); }
.fp .eq.gana .eq-tx b { color: var(--fuerte); }
.fp .m { font: 400 20px var(--g-led); text-align: center; color: var(--fuerte); white-space: nowrap; }
.fp .m.vs { font: 500 11px var(--g-mono); color: var(--tinta-3); letter-spacing: .14em; }
.fp .e { display: flex; justify-content: flex-end; }
.fp .gol { display: none; font: 400 18px var(--g-led); color: var(--fuerte); margin-left: auto; }
/* La etiqueta del grupo y la fase: la letra del rótulo, sin su cuadrito. */
.fp-et { font: 500 10px/1.2 var(--g-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* En vivo NO lleva filete (recorrido): el rojo va solo en la píldora «En vivo». El choque de
   horario sí, en ámbar: es un aviso para quien organiza. */
.fp-choque { background: var(--alerta-bg); }   /* el recuadro entero, sin franja al costado */
#verNomTx { cursor: pointer; }
.fp-nomina { padding: 0 14px 12px 114px; display: grid; gap: 4px; font-size: 12px; color: var(--tinta-2); }
.fp-nomina b { color: var(--tinta); font-weight: 600; }

@media (max-width: 620px) {
  .fp { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h e" "a a" "b b"; row-gap: 8px; }
  .fp .h { grid-area: h; flex-direction: row; gap: 8px; align-items: baseline; }
  .fp .e { grid-area: e; }
  .fp .eq.i { grid-area: a; }
  .fp .eq.d { grid-area: b; flex-direction: row; text-align: left; }
  .fp .m { display: none; }
  .fp .gol { display: inline; }
  .fp-nomina { padding-left: 14px; }
  .tabla-caja .opc { display: none; }
  /* Sin PF/PC caben # · Equipo · PJ PG PP Dif Pts si el nombre se recorta con puntos suspensivos. */
  .tabla-caja thead th, .tabla-caja tbody td { padding-inline: 8px; }
  .tabla-caja td:nth-child(2) b { display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
  /* Con NP son ocho columnas: se aprietan los lados y el nombre se recorta antes, para que Pts no se salga de la caja. */
  .tabla-caja.con-np thead th, .tabla-caja.con-np tbody td { padding-inline: 4px; }
  .tabla-caja.con-np td:nth-child(2) b { max-width: 72px; }
}

/* Partidos: la cabecera lleva el filtro, la casilla y las acciones; los avisos van sueltos arriba. */
#horarioBody > .bloque-cab { margin-bottom: 12px; }
#horarioBody > .aviso { margin-bottom: 12px; }
#horarioBody .seg { flex: none; }

/* Tabla: cada grupo es un bloque. Dos columnas cuando hay sitio, una sola en el celular. */
#clasifBody .grupos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 640px), 1fr)); gap: var(--e5) var(--e4); }
#clasifBody .grupos .bloque + .bloque { margin-top: 0; }
.grupo { gap: 12px; }
.grupo-sub { margin-top: 8px; }
.grupo .pista { margin: 0; color: var(--tinta-2); font-size: 13px; line-height: 1.5; }
.tabla-caja.caja2 { overflow-x: auto; }
.tabla-caja thead th { font: 500 10px var(--g-mono); letter-spacing: .14em; text-transform: uppercase; }
.tabla-caja tbody tr:hover td { background: var(--hundido-2); }
.tabla-caja tbody td { font-size: 13px; }
.tabla-caja td b { font-weight: 600; white-space: nowrap; } /* el nombre no se parte en tres renglones: la caja desplaza si no cabe */
/* Los que clasifican: un filete verde a la izquierda y nada más. Teñidas de rojo, ocho filas
   seguidas gritaban; el rojo es de la acción principal y de «en vivo». */
.tabla-caja .destacar td { background: none !important; }
.tabla-caja .destacar td:first-child { box-shadow: inset 2px 0 0 var(--ok); }
/* ── Tablas principales, un solo estilo (20-oct): Tabla del grupo, Jugadores/Mi club (.mc-jt), la grada (.gd-t),
   estadísticas y torneos. Cifras tabulares (los 8 y los 1 miden lo mismo: las columnas no bailan al cambiar un
   marcador), cabecera en gris tenue, filas calmas (filete fino y un hover suave, sin cebra) y, en Jugadores, la
   cabecera fija bajo la barra al bajar por una plantilla larga. */
:is(.tabla-caja, .mc-jt, .gd-t, .tn-tabla, .est-tabla) :is(th, td) { font-variant-numeric: tabular-nums; }
:is(.tabla-caja, .mc-jt) thead th { color: var(--tinta-3); }
:is(.tabla-caja, .gd-t) tbody td { transition: background .12s; }
.gd-t tbody tr:hover td { background: var(--hundido-2); }
/* `clip` y no `hidden`: con `hidden` la caja era su propia caja de desplazamiento y la cabecera no se pegaba. Recorta igual las esquinas. */
.tabla-caja.mc-tb { overflow: clip; }
.mc-jt thead th { position: sticky; top: var(--barra); z-index: 2; background: var(--papel); }
@media (prefers-reduced-motion: reduce) { :is(.tabla-caja, .gd-t) tbody td { transition: none; } }
/* La cabecera de la jornada mientras llega (openTorneo, app.js): el nombre y la línea pequeña van en esqueleto y
   los botones guardan su sitio (en el celular bajan a su propia fila) sin enseñar los de la jornada anterior. */
.ev.ev-cargando .ev-acc { min-width: 88px; min-height: 44px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--hundido-2) 25%, var(--linea) 50%, var(--hundido-2) 75%); background-size: 200% 100%; animation: esqBrillo 1.1s linear infinite; }
.ev.ev-cargando .ev-acc > * { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .ev.ev-cargando .ev-acc { animation: none; } }

/* Equipos: la lista del recorrido. Para el organizador la fila entera es un botón. */
.lista-f > li:has(> .lista-f-btn) { padding: 0; }
.lista-f-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none; border: 0;
  text-align: left; color: inherit; font: inherit; cursor: pointer; }
.lista-f-btn:hover { background: var(--hundido-2); }
.lista-f .tx b { font-size: 14px; }
.lista-f .tx .jug { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lista-f .esc { flex: none; }
.plegable-f summary { cursor: pointer; padding: 12px 14px; font: 500 10.5px var(--g-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2); min-height: var(--toque); display: flex; align-items: center; }
.plegable-f[open] summary { border-bottom: 1px solid var(--linea); color: var(--tinta); }
.plegable-f > :not(summary) { margin: 12px 14px; }

/* ═══ Hoy (Entrega 3b): «Te falta», las canchas, el día y terminar ═══════════════════
   Cada cancha es una tarjeta baja y entera es el botón que abre Anotar (C1): cancha y grupo,
   los dos equipos con su marcador y el reloj pequeño. El rojo es solo el punto del partido
   que corre; el único botón rojo de Hoy es «Terminar la jornada». */
#hoyBody > .hoy-hola { margin: 0 0 var(--e5); color: var(--tinta-2); line-height: 1.5; }
#hoyBody > .hoy-hola b { color: var(--tinta); }
.te-falta { align-items: center; margin-bottom: var(--e4); }
.te-falta > ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.te-falta li { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--tinta); font-size: 13px; line-height: 1.4; }
.te-falta li > span { min-width: 0; }
.te-falta .btn { flex: none; }
.hcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.hc { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px;
  padding: 10px 12px 8px; transition: border-color .15s, background-color .15s, transform .1s; }
.hc:hover { border-color: var(--linea-fuerte); background: var(--hundido); }
.hc:active { transform: scale(.99); }
.hc:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.hc-cab { display: flex; align-items: center; gap: 8px; min-height: 18px; font: 500 10px var(--g-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.hc-donde { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-rel { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; letter-spacing: .04em; }
.hc-rel.vivo { color: var(--tinta); }
.hc-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--vivo); flex: none; animation: pVivo 1.2s ease-in-out infinite; }
.hc-eq { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.hc-eq .esc { width: 26px; height: 26px; flex: none; }
.hc-eq > b { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-pt { font: 400 22px/1 var(--g-led); color: var(--fuerte); min-width: 44px; text-align: right; }
.hc-pt.apag { color: var(--tinta-3); }
.cancha-fin { padding: 14px; color: var(--tinta-2); }
/* Las dos puertas del día, lado a lado cuando caben (una sobre otra en el celular). */
.dia-bts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.dia-bt { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; font: inherit;
  color: var(--tinta); border: 1px solid var(--linea-fuerte); background: var(--hundido); border-radius: 10px; padding: 11px 14px; }
.dia-bt:hover { background: var(--hundido-2); }
.dia-bt:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.dia-bt > .fi { font-size: 20px; color: var(--tinta-2); display: inline-flex; }
.dia-bt > span { flex: 1; min-width: 0; }
.dia-bt b { display: block; font-size: 14px; }
.dia-bt small { display: block; color: var(--tinta-2); font-size: 12px; margin-top: 2px; }
.fin-j { margin-top: var(--e5); padding-top: 18px; border-top: 1px solid var(--linea); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fin-j .pista { flex: 1; min-width: 220px; margin: 0; color: var(--tinta-2); font-size: 13px; line-height: 1.5; }
@media (max-width: 620px) { .fin-j .btn { width: 100%; } }
/* Terminada (la muestra «App · Jornada terminada»): Elso con el trofeo y el texto, juntos y centrados
   en la tarjeta; debajo, una tarjeta por grupo con el campeón y el podio 2.º/1.º/3.º sobre un piso.
   Elso mide 270 px (136 en el celular); el `!important` pisa el `--h` en línea que le pone `elso()`. */
.fin-hoy { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fin-top { display: grid; grid-template-columns: auto minmax(0, auto); justify-content: center; column-gap: 40px;
  grid-template-areas: "elso tx" "elso bts"; padding: 0 32px 28px; overflow: hidden;
  background: radial-gradient(60% 150% at 50% 100%, var(--brillo) 0%, var(--papel) 66%); }
.fin-top > .elso-pie { grid-area: elso; align-self: end; margin-top: 28px; --h: 270px !important; }
.fin-tx { grid-area: tx; align-self: end; padding-top: 36px; max-width: 480px; min-width: 0; }
.fin-hora { display: block; font-size: 13.5px; font-weight: 700; color: var(--tinta-2); }
.fin-tit { font: italic 900 52px/.95 var(--g-firma); text-transform: uppercase; letter-spacing: -.012em; margin: 8px 0 12px; color: var(--fuerte); }
.fin-tx p { margin: 0; color: var(--tinta-2); font-size: 15px; line-height: 1.55; max-width: 44ch; }
.fin-top > .botonera { grid-area: bts; align-self: start; padding-top: 22px; }
.fin-sub { margin: 6px 0 0; font-size: 15px; font-weight: 800; color: var(--fuerte); }
.podios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gp { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.gp-camp { display: flex; align-items: center; gap: 14px; }
.gp-camp > .esc { width: 56px; height: 56px; }
.gp-tx { flex: 1; min-width: 0; }
.gp-g { display: block; font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.gp-tx b { display: block; font-size: 19px; font-weight: 800; color: var(--fuerte); margin-top: 3px; overflow-wrap: anywhere; }
.gp-tx small { display: block; font-size: 12px; color: var(--tinta-2); margin-top: 2px; }
.gp-copa { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  color: var(--alerta-tx); background: var(--alerta-bg); }
/* El piso es el borde de abajo del podio; las barras se apoyan en él y nunca tocan el borde de la tarjeta. */
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding-top: 12px;
  border-top: 1px solid var(--linea); border-bottom: 2px solid var(--linea-fuerte); }
.pd { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.pd > b { font-size: 12.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.pd > .esc { width: 28px; height: 28px; }
.pd1 > .esc { width: 34px; height: 34px; }
.pd > i { display: grid; place-items: center; width: 100%; height: var(--h); border-radius: 8px 8px 0 0; background: var(--alzado);
  border-top: 3px solid var(--m); font-style: normal; font-weight: 800; font-size: 13px; color: var(--fuerte); }
.pd1 { --h: 76px; --m: var(--alerta); }
.pd2 { --h: 54px; --m: var(--tinta-2); }
.pd3 { --h: 40px; --m: color-mix(in srgb, var(--alerta) 55%, var(--marca)); }   /* bronce: sin token propio */
.fin-pista { margin: 0; text-align: center; color: var(--tinta-2); font-size: 13px; }
@media (max-width: 620px) {
  .fin-top { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "elso tx" "bts bts"; justify-content: stretch;
    column-gap: 12px; padding: 0 16px 16px 10px; }
  .fin-top > .elso-pie { --h: 136px !important; margin-top: 18px; }
  .fin-tx { align-self: center; padding: 18px 0 4px; }
  .fin-tit { font-size: 34px; margin: 6px 0 0; }
  .fin-tx p { display: none; }
  .fin-top > .botonera { padding: 14px 0 0 6px; }
  .fin-top > .botonera .btn { flex: 1 1 auto; }
  .podios { grid-template-columns: 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hc-punto { animation: none; } .hc, .hc:active { transition: none; transform: none; } }
/* «Imprimir los partidos», al pie de Partidos (también en el celular). */
.pie-imp { display: flex; justify-content: center; margin-top: 16px; }

/* ═══ Entrega 2 · Mis jornadas ═══════════════════════════════════════════════════
   La pantalla del recorrido: rótulo del club, el título a pincel y «+ Nueva jornada» a la
   derecha; debajo, las tarjetas. Cada tarjeta es un botón entero (entra) con «⋯» encima de la
   portada (el menú). La portada rayada con la «G» es la de GRID para todas. */
#casaBody, #jornadasBody, #staffBody { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 1040px; margin: 0 auto; }
.hola-tx { font-weight: 800; font-size: 18px; color: var(--tinta-2); margin: 0; }
@media (max-width: 620px) { .hola-tx { font-size: 15px; } }
.pag-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; }
.pag-cab > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pag-tit { font-family: var(--g-firma); font-style: italic; font-weight: 900; font-size: 34px; line-height: 1; margin: 0;
  color: var(--tinta); text-transform: uppercase; letter-spacing: -.008em; }
/* `align-items: start`: una tarjeta sin imagen se queda baja aunque su vecina de fila tenga portada. */
.tjs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: stretch; }
.tj { position: relative; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.tj:hover { border-color: var(--linea-fuerte); }
/* `.evento` (el clic de la vitrina) trae la caja vieja de sistema.css: aquí se apaga entera. */
.tj .tj-abrir { display: flex; flex-direction: column; flex: 1; width: 100%; margin: 0; padding: 0; border: 0;
  border-radius: 0; background: none; box-shadow: none; transform: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; }
.tj .tj-abrir:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.tj-portada { display: block; position: relative; aspect-ratio: 16 / 8; max-width: 100%; }
.tj-portada.grid { background: repeating-linear-gradient(135deg, var(--papel) 0 14px, var(--hundido) 14px 28px); }
.tj-portada img { position: absolute; right: 14px; bottom: 12px; width: 58px; height: auto; opacity: .85; }
.tj-pills { position: absolute; top: 10px; left: 10px; right: 56px; display: flex; flex-wrap: wrap; gap: 6px; }
.tj-cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tj-cuerpo b { font-size: 15px; line-height: 1.25; color: var(--tinta); overflow-wrap: anywhere; }
.tj-meta { font: 500 10px/1.4 var(--g-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }

/* ═══ Entrega 3 · Inicio, Jornadas y Staff ═══════════════════════════════════════
   Los valores son los de la maqueta aprobada (proto-organiza.html). */
.card-i { padding: 16px; }
.e3-pista { color: var(--tinta-2); font-size: 12.5px; line-height: 1.5; margin: 0; }
.hola { display: flex; gap: 16px; align-items: center; margin-bottom: 4px; }
.hola .esc { width: 76px; height: 76px; }
.hola .esc:has(img) { padding: 4px; }
.hola .pag-tit { font-size: 50px; }
.hola > div { min-width: 0; }
.tcab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tcab h3 { margin: 0; font: 800 14px var(--g-sans); color: var(--tinta); text-transform: none; letter-spacing: 0; }
.mas-ver { color: var(--tinta); font-weight: 700; font-size: 12.5px; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.mas-ver:hover { color: var(--fuerte); }
/* «Ahora»: el único borde con un toque de rojo, porque es lo único que está en vivo. */
.ahora { border-color: color-mix(in srgb, var(--vivo) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--vivo) 8%, transparent), var(--papel) 60%); }
.fil .tx { flex: 1; min-width: 0; }
.lista { display: flex; flex-direction: column; }
.fil { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--linea);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fil:first-child { border-top: 0; }
.fil .esc { width: 34px; height: 34px; }
.fil .tx b { display: block; font-size: 13.5px; color: var(--tinta); overflow-wrap: anywhere; }
.fil .tx span { font-size: 12px; color: var(--tinta-2); }
.fil:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.vacio-acc { display: flex; justify-content: center; }
.solo-pc { display: inline; }

/* Jornadas: el interruptor, el corte y la tarjeta con portada. */
.jor-herr { display: flex; align-items: center; gap: 12px; }
.jor-herr .e3-pista { min-width: 0; }
.sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0; background: none; padding: 0;
  font: 700 13px var(--g-sans); color: var(--tinta-2); user-select: none; white-space: nowrap; text-align: left; }
.sw i { width: 38px; height: 22px; border-radius: 999px; background: var(--alzado); border: 1px solid var(--linea-fuerte);
  position: relative; transition: .15s; flex: none; }
.sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tinta-2); transition: .15s; }
.sw.on i { background: var(--marca); border-color: var(--marca); }
.sw.on i::after { left: 18px; background: var(--sobre-marca); }
@media (prefers-reduced-motion: reduce) { .sw i, .sw i::after { transition: none; } }
.sw:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.corte { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; }
.corte::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.tj-jor.fin { opacity: .6; }
/* Jornadas por fuera: TODAS del mismo alto. Arriba la imagen de la jornada o, sin ella, el fondo genérico
   (coliseo.jpg) oscurecido; el nombre siempre abajo-izquierda de la banda, en Saira, máx. 2 líneas. */
.tj-por { display: flex; align-items: flex-end; height: 132px; width: 100%; padding: 12px 14px; background: var(--fondo) center / cover no-repeat;
  border-bottom: 1px solid var(--linea); position: relative; box-sizing: border-box; }
.tj-por.gen { background-image: linear-gradient(180deg, var(--banda-suave), var(--banda-hondo)), url('img/coliseo.webp?v=20261020b'); }
.tj-por:not(.gen)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--banda-hondo)); }
.tj-nom { position: relative; z-index: 1; font: italic 900 24px/1.05 var(--g-firma); text-transform: uppercase; letter-spacing: -.005em;
  color: var(--banda-tx); min-width: 0; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tjs { align-items: stretch; }
.tj-cue { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; justify-content: space-between; }
.tj-sub { font-size: 12px; color: var(--tinta-2); min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-pie { display: flex; gap: 8px; align-items: center; }
.tj-jor .tj-pie .chip-j { border: 0; padding: 0; background: none; }
.tj-jor .tj-pie .chip-j::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--alerta); flex: none; }
.tj-jor .tj-pie .chip-j.cj-juego::before { background: var(--ok-tx); }
.tj-jor .tj-pie .chip-j.cj-fin::before { background: var(--tinta-3); }
.tj-pie .sp { flex: 1; }

/* Staff (J-staff / M-staff, 20-oct): «¿Quién hace qué?» con Elso y los tres roles; la lista con columnas en computador
   (Persona · Rol · Última vez) y, en el celular, el rol debajo del nombre. La fila entera se toca. Sin franjas de color:
   el rol es texto de color, el ícono va en su recuadro. */
.st-cab { align-items: flex-end; }
.st-cab .rot { display: block; margin-bottom: 4px; }
.st-roles { display: grid; grid-template-columns: 128px repeat(3, minmax(0, 1fr)); overflow: hidden; margin-bottom: 14px; }
.st-elso { display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--hundido-2); border-right: 1px solid var(--linea); }
.st-quien { font: 700 15px/1.3 var(--g-sans); color: var(--tinta); text-align: center; }
.st-rol { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-left: 1px solid var(--linea); }
.st-rol-elso { display: flex; align-items: flex-end; height: 100px; }
.st-elso + .st-rol { border-left: 0; }
.st-rol b { display: block; font-size: 14px; }
.st-rol small { display: block; color: var(--tinta-2); margin-top: 2px; font-size: 12.5px; line-height: 1.45; }
.st-rol-admin  b { color: var(--g-rojo-tx); }
.st-rol-gestor  b { color: var(--azul); }
.st-rol-anota  b { color: var(--ok-tx); }
.st-lista { padding: 0; display: flex; flex-direction: column; }
.st-hd, .st-fila { display: grid; grid-template-columns: minmax(0, 1fr) 160px 180px 20px; align-items: center; gap: 12px; padding: 11px 16px; }
.st-hd { padding-block: 10px; border-bottom: 1px solid var(--linea); }
.st-hd span:first-child { padding-left: 46px; }
.st-fila { grid-template-columns: 34px minmax(0, 1fr) 160px 180px 20px; width: 100%; border: 0; border-top: 1px solid var(--linea);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.st-hd + .st-fila { border-top: 0; }
.st-fila:hover { background: var(--hundido-2); }
.st-fila:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.st-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-tx b { font-size: 13.5px; color: var(--tinta); overflow-wrap: anywhere; }
.st-mail { font-size: 12px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-mail:empty { display: none; }
.st-tx > .rol, .st-tx > .st-pend { display: none; }
.st-ult { font-size: 13px; color: var(--tinta-2); }
.st-pend { font-size: 12.5px; font-weight: 700; color: var(--alerta-tx); }
.st-fl { color: var(--tinta-3); }
.rol { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.rol-admin { color: var(--g-rojo-tx); }
.rol-gestor { color: var(--azul); }
@media (max-width: 720px) {
  .st-roles { grid-template-columns: minmax(0, 1fr); }
  .st-elso { justify-content: flex-start; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .st-quien { text-align: left; }
  .st-rol-elso { height: auto; width: 64px; justify-content: center; flex: none; }
  .st-rol-elso .elso-pie { --h: 72px !important; }
  .st-rol { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; border-left: 0; border-top: 1px solid var(--linea); }
  .st-elso + .st-rol { border-top: 0; }
  .st-hd, .st-rolc, .st-ult { display: none; }
  .st-fila { grid-template-columns: 34px minmax(0, 1fr) 20px; }
  .st-fila:first-of-type { border-top: 0; }
  .st-tx > .rol, .st-tx > .st-pend { display: block; }
  .st-mail { display: none; }
}

/* La foto de perfil: el Elso redondo o las iniciales, y el selector de Configuración → Tú. */
.ava { display: inline-grid; place-items: center; border-radius: 50%; font-weight: 800; background: var(--alzado);
  border: 1px solid var(--linea-fuerte); color: var(--tinta); flex: none; box-sizing: border-box; }
.ava-img { border-radius: 50%; background: var(--alzado); object-fit: cover; object-position: center top; flex: none;
  box-shadow: 0 0 0 2px var(--linea-fuerte); }
.avs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.av-op { border: 0; background: none; padding: 3px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px transparent;
  display: inline-flex; }
.av-op.on { box-shadow: 0 0 0 3px var(--marca); }
.av-op:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.yo-quien { display: flex; align-items: center; gap: 6px; }
.yo-quien .ava, .yo-quien .ava-img { box-shadow: none; }
@media (max-width: 620px) {
  .pag-tit { font-size: 32px; }
  /* Como el recorrido: «+ Nueva jornada» al lado del título, no debajo. El rótulo del club,
     que puede ser largo, se recorta con puntos suspensivos en vez de empujar el botón. */
  .pag-cab { flex-wrap: nowrap; }
  .pag-cab > div { flex: 1; }
  .pag-cab .rot { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pag-cab > .btn { flex: none; }
  /* Inicio y «+ Nueva» en el celular (Entrega 3). */
  .hola .esc { width: 64px; height: 64px; }
  .hola .pag-tit { font-size: 34px; }
  .solo-pc { display: none; }
}

/* ═══ Entrega 3 · Nueva jornada: el asistente de 5 pasos ═════════════════════════
   La maqueta aprobada (proto-organiza, «6 · Nueva jornada»). Va dentro del modal de siempre
   (#uiModal), que aquí pierde su relleno: la ventana la arman la cabecera, los círculos, el
   paso y el pie. Arriba y no centrada: al cambiar de alto crece hacia abajo y la cabecera
   no se mueve. El movimiento (deslizar y alto) lo hace `wIr` con Web Animations. */
#uiModal:has(.stp) { align-items: flex-start; padding-top: 40px; }
.modal:has(> .stp) { padding: 0; max-width: 640px; margin: 0 auto; overflow: hidden; }
.stp .sp { flex: 1; }
.stp svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.stp-cab { display: flex; align-items: flex-start; gap: 12px; padding: 18px var(--v-pad) 0; }
/* El título de todas las ventanas (Ventanas 2026): 700 17, sin itálica ni mayúsculas ni icono. */
.stp .stp-cab h3 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 700 17px/1.3 var(--g-sans);
  text-transform: none; letter-spacing: 0; color: var(--tinta); }
.stp-cab h3 > .fi { display: none; }
.stp-cab > .v-x { margin: -6px -8px 0 0; }
/* Los círculos: el actual con punto, los hechos con ✓ (se tocan para volver), unidos por
   una línea que se llena. */
.stp-ind { display: flex; align-items: flex-start; padding: 18px var(--v-pad) 6px; }
.ind { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: none; padding: 0;
  cursor: default; min-width: 44px; font: inherit; color: inherit; }
.ind.ok:not(:disabled) { cursor: pointer; }
.ind i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--alzado);
  color: var(--tinta-2); font: 800 13px var(--g-sans); box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  transition: background-color .3s, box-shadow .3s, transform .3s; }
.ind.act i { background: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 20%, transparent); transform: scale(1.08); }
.ind.act i::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--sobre-marca); }
.ind.ok i { background: var(--marca); box-shadow: none; color: var(--sobre-marca); }
.ind.ok:not(:disabled):hover i { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 20%, transparent); }
.ind.ok svg { width: 15px; height: 15px; stroke-width: 3; }
.ind.nuevo svg { stroke-dasharray: 24; stroke-dashoffset: 24; animation: trazo .3s .1s ease-out forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.ind small { font: 500 9px/1 var(--g-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; }
.ind.act small { color: var(--tinta); }
.ind.ok small { color: var(--tinta-2); }
.con { flex: 1; height: 2px; margin: 15px 6px 0; background: var(--linea-fuerte); border-radius: 2px; position: relative; overflow: hidden; }
.con b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--marca); }
.con.ok b { width: 100%; }
.con.ult b { animation: llena .4s ease both; }
@keyframes llena { from { width: 0; } }
.stp-tit { display: none; margin: 0; padding: 6px var(--v-pad) 0; }
/* La caja del paso. `relative`: el paso que se va queda encima, absoluto, mientras sale. */
.stp-cue { position: relative; overflow: hidden; }
.paso { padding: 14px var(--v-pad) 6px; }
.stp h4 { margin: 0 0 4px; font: 700 15px/1.3 var(--g-sans); color: var(--tinta); outline: 0; }
.stp .lead { color: var(--tinta-2); font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.stp .pista { font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }
.paso > .campo, .paso > .rejilla { margin-bottom: 14px; }
.stp .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stp-pie { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px var(--v-pad); border-top: 1px solid var(--linea); margin-top: 14px; }
.stp-pie[hidden] { display: none; }
.falta { font-size: 12px; font-weight: 600; color: var(--alerta-tx); text-align: right; line-height: 1.4; }
.falta.error { color: var(--error); }
.stp-pie .btn[aria-disabled="true"] { opacity: .55; }
/* Un error largo se parte en líneas; el botón nunca se encoge ni se corta. */
.stp-pie { flex-wrap: wrap; }
.stp-pie .btn { flex: none; white-space: nowrap; }
.stp-pie .falta { flex: 1 1 0; min-width: 0; }
.stp-pie .falta.error { order: -1; flex-basis: 100%; text-align: left; }
/* Las cifras, en la letra de tablero. */
.calc { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ops + .calc { margin-top: 12px; }
.calc div { flex: 1; min-width: 130px; padding: 4px 0; }
.calc b { display: block; font: 400 22px/1.25 var(--g-led); color: var(--tinta); }
.calc b.hora { font: 800 16px/1.7 var(--g-sans); }
.calc span { font: 600 12px/1.3 var(--g-sans); color: var(--tinta-3); }
.calc .ok { color: var(--ok-tx); }
.calc .av { color: var(--alerta-tx); }
.stp-portada { height: 140px; border-radius: 10px; border: 1px dashed var(--linea-fuerte); background: var(--fondo) center / cover no-repeat;
  display: grid; place-items: center; margin-top: -8px; }
.stp-portada.lleno { border-style: solid; }
.stp-portada .esc { width: 56px; height: 56px; }
.stp-bts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 8px; }
.eqs { display: flex; flex-direction: column; }
/* Los equipos y las opciones del asistente son FILAS (Ventanas 2026): filete entre ellas, sin tarjeta. */
.stp .eq { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; }
.stp .eq + .eq { border-top: 1px solid var(--linea); }
.stp .eq .esc { width: 34px; height: 34px; flex: none; }
.eq-tx { min-width: 0; }
.eq-tx b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.eq-tx span { font-size: 12px; color: var(--tinta-2); }
.eq-q { margin-left: auto; border: 0; background: none; color: var(--tinta-3); cursor: pointer; font-size: 16px;
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.eq-q:hover { color: var(--tinta); background: var(--alzado); }
.ops { display: flex; flex-direction: column; }
.op { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; border-radius: 0;
  padding: 12px 0; cursor: pointer; color: var(--tinta); font: inherit; }
.op + .op { border-top: 1px solid var(--linea); }
.op b { display: block; font-size: 14px; }
.op p { margin: 3px 0 0; font-size: 12.5px; color: var(--tinta-2); }
.op .r { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linea-fuerte); flex: none; margin-top: 2px; }
.op.on .r { border: 5px solid var(--marca); }
.op:disabled { opacity: .5; cursor: not-allowed; }
.res { display: flex; flex-direction: column; margin-bottom: 14px; }
.res div { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--linea); font-size: 13.5px; }
.res div:first-child { border-top: 0; }
.res span { color: var(--tinta-3); width: 90px; flex: none; }
.res b { min-width: 0; overflow-wrap: anywhere; }
/* «Quién la ve» va en un fieldset: con la jornada ya creada se apaga entero (`disabled`). */
.stp-fs { border: 0; padding: 0; min-width: 0; }
.stp-fs:disabled .seg { opacity: .55; }
.res button { margin-left: auto; flex: none; border: 0; background: none; padding: 4px; color: var(--tinta-2);
  font: 700 12px var(--g-sans); text-decoration: underline; cursor: pointer; }
.prev-tj { max-width: 280px; }
.listo { text-align: center; padding: 30px 22px 26px; }
.listo .stp-bts { justify-content: center; }
/* Un aviso dentro de la ventana es una fila: icono + texto, sin fondo ni filete. */
.aviso-w { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 14px; padding: 0;
  font-size: 13px; line-height: 1.5; text-align: left; color: var(--tinta); }
.aviso-w.av > .fi { color: var(--alerta-tx); }
/* En el celular ocupa la pantalla entera: sin rótulos bajo los círculos («Paso N de 5 ·
   Nombre» los reemplaza) y con el pie pegado abajo. La caja crece con su contenido
   (`1 0 auto`): con `overflow:hidden`, un `flex: 1` la dejaba encoger y cortaba el paso. */
@media (max-width: 600px) {
  #uiModal:has(.stp) { padding: 0; align-items: flex-end; }
  .modal:has(> .stp) { max-width: none; min-height: 92dvh; max-height: none; margin: auto 0 0; display: flex; flex-direction: column; }   /* la hoja desde abajo de todas las ventanas, alta: el asistente crece con su paso */
  .stp { flex: 1; display: flex; flex-direction: column; }
  .ind small { display: none; }
  .stp-tit { display: block; }
  .stp-cue { flex: 1 0 auto; }
  .stp-pie { flex-wrap: wrap; position: sticky; bottom: 0; background: var(--papel); padding: 12px var(--v-pad) calc(12px + env(safe-area-inset-bottom)); }
  .stp-pie .btn { flex: 1 1 0; min-width: 0; }
  .stp-pie .falta { order: -1; flex-basis: 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .ind i { transition: none; }
  .ind.nuevo svg, .con.ult b { animation: none; stroke-dashoffset: 0; }
}

/* ═══ Entrega 2 · la mesa de control ═════════════════════════════════════════════
   La mesa del recorrido (`.m-*` del prototipo) sobre las clases de la consola (`cn-*`): la
   ventana del organizador y el enlace de cancha la pintan igual. Por equipo +3 +2 +1, −1 y
   Falta; al centro período, reloj y posesión; el número es un campo que se escribe. Todos
   los números van en la letra de tablero. El reloj parado va en ámbar y corriendo en verde:
   el rojo es de «Cerrar partido» y de la píldora «en vivo». */
.mesa-capa { position: fixed; inset: 0; z-index: 1100; overflow: auto; background: var(--fondo); }
/* La mesa NO se achica con los botones del resto de la app (40/32 px, letra 12): Iniciar,
   Cerrar, Reabrir y Corregir se quedan en 44 px y letra 14. La cabecera fija los suyos. */
.mesa-capa .btn, body.es-consola .btn:not(.cn-grande) { font-size: 14px; min-height: 44px; }  /* «Entrar» lleva sus 15 px */
.mesa-capa[hidden] { display: none; }
.mesa-capa:focus { outline: 0; }   /* el foco entra a la ventana (abrirMesa), sin anillo: no es un botón */
@media (max-width: 620px) { .cn-el { display: none; } }   /* «Escribir resultado» cabe en una línea al lado de «Corregir» */
body.con-mesa { overflow: hidden; }

.cn-juego > :not(.cn-cab) { width: 100%; max-width: 1180px; margin-inline: auto; }
.cn-juego .cn-cab { justify-content: flex-start; flex-wrap: wrap; gap: 12px; padding: 10px 16px;
  background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cn-juego .cn-cab .rot { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cn-juego .cn-cab .btn { min-height: 32px; height: 32px; padding: 0 12px; font-size: 12px; }
/* «Pedir número»: el interruptor `.sw` de siempre, más chico para caber en la cabecera. Va antes del
   estado para que «En vivo» no baje de línea; el rótulo del partido (`.rot`) cede con «…». */
.cn-juego .cn-cab .cn-sw { font-size: 12px; gap: 7px; min-height: 32px; flex: none; }
.cn-juego .cn-cab .cn-sw i { width: 32px; height: 18px; }
.cn-juego .cn-cab .cn-sw i::after { width: 12px; height: 12px; }
.cn-juego .cn-cab .cn-sw.on i::after { left: 16px; }
.cn-volver { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 500 10px var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.cn-volver:hover { color: var(--tinta); }
/* Zona táctil de 44 px sin cambiar cómo se ve nada: Volver (25 px), «Pedir número» (32), la flecha de posesión (32) y «T. muertos» (22)
   son más bajos que un dedo. Un `::before` invisible les agranda la zona sensible hacia arriba y abajo (donde no hay otro botón a menos
   de 8 px: lo comprueba test_mesa_cel.js). */
.cn-volver, .cn-juego .cn-cab .cn-sw, .cn-flecha, .cn-tms { position: relative; }
.cn-volver::before, .cn-juego .cn-cab .cn-sw::before, .cn-flecha::before, .cn-tms::before { content: ''; position: absolute; left: 0; right: 0; }
.cn-volver::before { top: -16px; bottom: -16px; }   /* 13 px de alto en horizontal (sin el padding del celular): 13 + 32 = 45 */
.cn-juego .cn-cab .cn-sw::before, .cn-flecha::before { top: -6px; bottom: -6px; }
.cn-tms::before { top: -11px; bottom: -11px; }

.cn-tablero { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px;
  align-items: stretch; padding: 18px 18px 10px; }
.cn-eq { background: var(--papel); border: 1px solid var(--linea); border-top: 4px solid var(--eq, var(--linea-fuerte));
  border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
  /* Contorno fino de la franja de arriba cuando el color del equipo casi no se ve contra la tarjeta (un amarillo): 1 px arriba y 1 px abajo de la franja.
     `--eq-b` lo pone ui.js (cnColoresMesa) y solo existe si hace falta: sin él es transparente y no se ve. */
  box-shadow: 0 -1px 0 var(--eq-b, transparent), inset 0 1px 0 var(--eq-b, transparent); }
.cn-id { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
/* El escudo (o las iniciales sobre el color del equipo) grande, encima del nombre (Entrega 3b, como la muestra). */
.cn-id .esc { width: 60px; height: 60px; box-shadow: 0 0 0 1px var(--eq-b, transparent); }   /* el mismo contorno fino, alrededor del círculo */
/* Tablet y PC: el nombre en UNA línea con «…», como siempre (partir un nombre largo de un solo lado desalinea la tarjeta). En el celular baja de línea:
   ver la regla dentro de `@media (max-width: 620px)` más abajo. */
.cn-nom { font-size: 15px; font-weight: 800; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* El número es un campo sin cara de campo: se ve como el tablero y al tocarlo se escribe. En
   `--fuerte` y no en `--sobre-marca` (la letra de ENCIMA del color del club): en claro salía
   blanco sobre blanco, y con un club amarillo, casi negro sobre el negro. */
.cn-num { font: 700 clamp(64px, 13vw, 110px)/1 var(--g-led); color: var(--fuerte); background: transparent;
  border: 1px solid transparent; border-radius: var(--r); width: 100%; min-height: 0; text-align: center; padding: 6px 0;
  -moz-appearance: textfield; appearance: textfield; }
.cn-num::-webkit-outer-spin-button, .cn-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cn-num:not([readonly]):hover { border-color: var(--linea-fuerte); }
.cn-num:not([readonly]):focus { outline: 0; border-color: var(--tinta-2); background: var(--hundido); }
.cn-num[readonly] { cursor: default; }
.cn-num[readonly]:focus { outline: 0; }
/* Tres cifras no caben al tamaño de dos: bajan las dos, que en un tablero miden igual. */
.cn-num.c3 { font-size: clamp(48px, 9.5vw, 84px); }

/* Faltas del equipo en el período: cinco cuadritos; en la quinta, «bonus» en rojo. */
.cn-faltas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  font: 500 10px/1 var(--g-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.cn-faltas b { font: 700 13px/1 var(--g-led); letter-spacing: normal; color: var(--tinta); }
.fl-puntos { display: inline-flex; gap: 3px; }
.fl-puntos span { width: 8px; height: 8px; border-radius: 2px; background: var(--hundido-2); border: 1px solid var(--linea-fuerte); }
.fl-puntos span.on { background: var(--alerta); border-color: var(--alerta); }
.cn-faltas.bonus { color: var(--error); }
.cn-faltas.bonus .fl-puntos span.on { background: var(--error); border-color: var(--error); }

.cn-centro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 6px; }
.cn-per { font: 500 10px/1 var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
  display: inline-flex; align-items: center; gap: 6px; }
.cn-per b { font: 700 16px/1 var(--g-led); letter-spacing: normal; color: var(--fuerte); }
/* La caja de rótulo + número del período (gemela de «posesión») solo se ve en el celular; en tablet y PC sigue el texto de siempre («2.º cuarto»). */
.cn-per-c, .cn-sw-c { display: none; }
.cn-reloj { font: 700 clamp(34px, 6vw, 52px)/1 var(--g-led); color: var(--alerta); white-space: nowrap; }
.cn-reloj.corre { color: var(--ok); }
.cn-pos-caja { display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 500 9px/1 var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.cn-pos-caja i { font-style: normal; }
.cn-pos { font: 700 30px/1 var(--g-led); color: var(--marca-osc); }
/* Los últimos cinco segundos de posesión parpadean. */
.cn-pos.rojo { animation: ledLate .5s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .cn-pos.rojo { animation: none; } }

.cn-mandos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(0, 1fr); gap: 14px; padding: 6px 18px 12px; }
.cn-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.cn-medio { display: flex; flex-direction: column; gap: 8px; }
.cn-mas, .cn-sec, .cn-reloj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-sm); cursor: pointer; padding: 0; user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; background: var(--hundido-2); border: 1px solid var(--linea-fuerte);
  color: var(--tinta); font: 700 12px var(--f-texto); letter-spacing: .04em; }
.cn-sec:hover { border-color: var(--tinta-3); }
.cn-col > button { height: 58px; }
/* Sumar es el gesto que se repite cien veces: pesa más y lleva abajo el color de su equipo. */
.cn-mas { font: 700 20px var(--g-led); color: var(--fuerte); border-bottom: 3px solid var(--eq, var(--linea-fuerte));
  box-shadow: 0 1px 0 var(--eq-b, transparent), inset 0 -1px 0 var(--eq-b, transparent); }   /* contorno fino de la raya, si el color no se ve solo (--eq-b) */
.cn-mas:active { transform: translateY(1px); background: var(--linea); }
.cn-falta { grid-column: span 2; font-size: 13px; }
.cn-medio > button { height: 46px; }
#cn24 { font: 700 15px var(--g-led); }
.cn-reloj-btn { background: var(--ok); border-color: var(--ok); color: var(--papel); font-weight: 800; }
.cn-reloj-btn.andando { background: var(--alerta); border-color: var(--alerta); }
#cnFin.btn-primario { width: 100%; min-height: 0; padding: 0 18px; font-weight: 800; }
.cn-estado { grid-column: 1 / -1; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cn-pie { margin: 0; padding: 8px 18px 18px; font-size: 12px; color: var(--tinta-2); text-align: center; }
.cn-pie b { color: var(--tinta); }

/* En el celular: los equipos arriba, el reloj en una franja, los botones de cada equipo
   y debajo los del partido, en dos columnas. Acomodo aprobado por el gestor (12-oct): todo hasta
   «Cerrar partido» cabe en una pantalla de 390×844 (la parte de anotar, en una de 375×667), sin
   quitar ni mover ningún botón: lo que se aprieta es lo que NO se toca (escudo, margenes, rótulos). */
@media (max-width: 620px) {
  .cn-rot-larga { display: none; }
  /* La cabecera lleva Volver, la cancha, «Pedir número» y el estado en 343 px: se aprietan los huecos
     para que «Cancha C1» se lea entera y «En vivo» no baje de línea. */
  .cn-juego .cn-cab { gap: 8px; padding-inline: 12px; }
  /* La cancha NO cede (antes se cortaba en «CANCH…» en 375 px o menos, o con la letra grande): si no cabe todo en una fila,
     «En vivo» baja a su propia línea. */
  .cn-juego .cn-cab .rot { letter-spacing: .08em; flex: none; max-width: 100%; }
  .cn-juego .cn-cab .cn-sw { gap: 6px; }
  /* «Volver» con 8 px de sitio alrededor del texto: el anillo de foco ya no se monta sobre «Cancha C1»
     (el margen negativo deja el texto donde estaba). */
  .cn-volver { padding: 6px 8px; margin-left: -8px; border-radius: 8px; }
  .cn-volver::before { top: -10px; bottom: -10px; }   /* 25 + 20 = 45 */
  /* «Todo guardado» es lo normal y no cabe en la cabecera del teléfono; sin red o con
     marcadores por enviar sí sale, aunque baje a su propia línea. */
  .cn-juego .cn-red.bien { display: none; }
  .cn-tablero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 12px 6px; gap: 8px; }
  /* La franja del reloj: tres columnas (período · reloj · posesión) y la flecha centrada debajo. */
  .cn-centro { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: 0;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 8px 14px 4px; }
  /* El período, simétrico a la posesión: a la izquierda la misma caja que a la derecha (rótulo pequeño arriba, número grande en LED abajo,
     centrados entre sí) y del mismo ancho mínimo, para que los dos bordes de la franja queden iguales. */
  .cn-per { justify-self: start; display: block; }
  .cn-per-l { display: none; }
  .cn-per-c, .cn-pos-caja { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 58px;
    font: 500 9px/1 var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
  .cn-per-c i { font-style: normal; }
  .cn-per-c b { font: 700 30px/1 var(--g-led); letter-spacing: normal; color: var(--fuerte); }
  .cn-reloj { font-size: 50px; }
  .cn-pos-caja { justify-self: end; }
  .cn-flecha { grid-column: 1 / -1; justify-self: center; }
  /* La tarjeta del equipo: el escudo (28 px) y el nombre en UNA fila, el marcador grande y las faltas y los
     tiempos muertos como filas de una línea. Era la parte que más alto era y la que menos se toca. */
  .cn-eq { padding: 8px 10px 10px; gap: 4px; }
  .cn-id { flex-direction: row; gap: 8px; justify-content: center; width: 100%; }
  .cn-id .esc { width: 28px; height: 28px; flex: none; }
  .cn-id .esc b { font-size: 11px; }
  /* Solo en el celular el nombre baja de línea en vez de cortarse con «…»: «Club Deportivo Promesas de Medellín Sub-15» y «…Sub-13» se distinguen por
     el FINAL, justo lo que el corte se comía (cnAjustarNombres deja los dos del mismo alto). Un nombre corto se ve igual que antes. */
  .cn-nom { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; text-align: center; line-height: 1.15; }
  .cn-num { font-size: clamp(72px, 24vw, 104px); padding: 2px 0; }
  .cn-mandos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 4px 12px 8px; gap: 10px; }
  .cn-medio { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; }
  .cn-col > button { height: 52px; }
  .cn-pie { padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); }
}

/* «Escribir el resultado» y «Corregir»: siempre, bajo el reloj y lo del partido. */
.cn-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 18px 4px; }
.cn-dos .btn { min-height: 46px; width: 100%; white-space: normal; line-height: 1.2; }
/* En el celular van lado a lado (no una sobre otra): «Escribir resultado» y «Corregir» caben en una línea cada uno. */
@media (max-width: 620px) {
  .cn-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 4px 12px 6px; }
  .cn-dos .btn { font-size: 13px; gap: 6px; padding: 0 10px; line-height: 1.15; justify-content: center; text-align: center; }
}
@media (max-width: 380px) { .cn-dos .btn { padding: 0 6px; gap: 4px; } }
/* En 360 px la cabecera (Volver, cancha, interruptor y estado) no cabe en una línea con «Pedir número» entero: el interruptor dice «N.º»
   (su `aria-label` sigue diciendo «Pedir número»). Así «En vivo» no baja de línea y la cabecera mide lo mismo que en 412. */
@media (max-width: 380px) { .cn-juego .cn-cab .cn-sw-l { display: none; } .cn-juego .cn-cab .cn-sw-c { display: inline; } }   /* en 360 px «Escribir resultado» con 10 px de relleno bajaba a dos líneas */

/* La ventana de escribir y corregir: los dos equipos con su escudo y dos números grandes. */
#uiModalBody:has(> .resultado) { max-width: 420px; }
/* `.m-card` es el contrato de saveResult, no la tarjeta de partido: aquí no lleva su caja. */
.resultado.m-card { background: none; border: 0; padding: 0; box-shadow: none; margin: 0; }
.res-eqs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.res-eq { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.res-eq .esc { width: 52px; height: 52px; }
.res-eq b { font-size: 14px; font-weight: 800; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center;
  overflow-wrap: anywhere; color: var(--tinta); }
/* `.res-eq` delante: `.modal input` (marca.css) le pondría su borde gris de 1 px encima del color del equipo. */
.res-eq .res-num { width: 100%; height: 88px; padding: 0; text-align: center; font: 700 46px/1 var(--g-led); color: var(--tinta);
  background: var(--hundido); border: 1px solid var(--linea-fuerte); border-radius: 10px; outline: 0; }   /* sin franja del color: el escudo ya lo dice (gestor 26-oct) */
.res-eq .res-num:focus { border-color: var(--tinta-2); }
.res-eq .res-num::placeholder { color: var(--linea-fuerte); }
.res-g { font: 700 28px/1 var(--g-led); color: var(--tinta-3); padding-bottom: 30px; }
/* «No se presentó» (FIBA 20): una línea bajo el partido, ancha como la fila, y la nota de la columna NP bajo la tabla. */
.fp .fp-np { grid-column: 1 / -1; font: 500 11px/1.3 var(--g-mono); letter-spacing: .06em; color: var(--tinta-2); }
.resultado .res-np { margin-top: 10px; }
.tabla-nota { margin: 8px 2px 0; font-size: 12px; color: var(--tinta-3); }
/* El detalle de solo lectura: el marcador al lado de cada equipo. */
/* La cabecera deja sitio al ✕ de la ventana: si no, el estado («Por jugar») quedaba debajo. */
.det .det-cab { padding-right: 44px; }
.det-eq .esc { width: 36px; height: 36px; }
.det-sc { font: 700 1.5rem/1 var(--f-titulo); color: var(--tinta); }

/* Período − y Período + lado a lado: el «−» corrige un toque de más. */
.cn-per-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Cerrar partido: abajo, separado y centrado, lejos de Período ± y del reloj. */
.cn-cierre { display: flex; justify-content: center; padding: 18px 18px 6px; border-top: 1px solid var(--linea); margin-top: 10px; }
.cn-cierre #cnFin.btn-primario { width: min(100%, 320px); height: 50px; }
.cn-per-fila > button { height: 52px; font-size: 13px; }
@media (max-width: 620px) {   /* en el celular «Cerrar partido» ocupa el ancho: el dedo no tiene que apuntar */
  .cn-cierre { padding: 10px 12px 4px; margin-top: 4px; }
  .cn-cierre #cnFin.btn-primario { width: 100%; }
}
/* Tablet (pantalla táctil grande): botones más altos y letra más grande para el dedo. */
@media (pointer: coarse) and (min-width: 621px) {
  .cn-col > button { height: 74px; }
  .cn-mas { font-size: 26px; }
  .cn-falta { font-size: 15px; }
  .cn-medio > button, .cn-per-fila > button { height: 62px; font-size: 15px; }
  .cn-mandos { gap: 18px; }
  .cn-col { gap: 12px; }
  .cn-cierre #cnFin.btn-primario { height: 58px; }
}

/* ─── Mesa según reglamento (R2) ───────────────────────────────────────────────────────────────
   El nombre del período en letra (no en LED: lleva «º» y letras), la flecha de posesión alterna, el 14″ junto al 24″,
   el botón del centro que dice lo que sigue al terminar el período y el aviso de «no hay empate». */
.cn-per { text-align: center; }
.cn-flecha { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 6px; background: none; border: 0; cursor: pointer;
  font: 500 9px/1.15 var(--g-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); text-align: left;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cn-flecha:hover { color: var(--tinta); }
/* El triángulo apunta al equipo que tiene la próxima posesión, con el color de ese equipo: ◀ local, ▶ visitante. */
.cn-fl-ico { flex: none; width: 0; height: 0; border-style: solid; border-color: transparent;
  filter: drop-shadow(1px 0 0 var(--eq-b, transparent)) drop-shadow(-1px 0 0 var(--eq-b, transparent)) drop-shadow(0 1px 0 var(--eq-b, transparent)) drop-shadow(0 -1px 0 var(--eq-b, transparent)); }   /* la flecha, con el mismo borde */
.cn-flecha[data-lado="local"] .cn-fl-ico { border-width: 8px 12px 8px 0; border-right-color: var(--eq); }
.cn-flecha[data-lado="visitante"] .cn-fl-ico { border-width: 8px 0 8px 12px; border-left-color: var(--eq); }
.cn-flecha:not([data-lado="local"], [data-lado="visitante"]) .cn-fl-ico { width: 10px; height: 10px; border: 2px dashed var(--tinta-3); border-radius: 50%; }
.cn-pos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cn-pos-fila > button { height: 46px; font: 700 15px var(--g-led); }
.cn-medio > #cnPlay { line-height: 1.15; padding: 0 8px; }
.cn-reloj-btn.cierra { background: var(--marca); border-color: var(--marca); }
.cn-reloj-btn[hidden], .cn-aviso[hidden] { display: none; }
.cn-aviso { margin: 0; padding: 10px; font: 700 12px/1.3 var(--f-texto); text-align: center; color: var(--error);
  background: var(--error-bg); border: 1px solid var(--error-linea); border-radius: var(--r-sm); }
/* Sin +3 (Minibasket) son dos botones y el «−»: la Falta ocupa toda la fila de abajo. */
.cn-col.sin3 .cn-falta { grid-column: 1 / -1; }
/* El centro con la flecha y los dos botones de período necesita más sitio que los 150 px de antes. */
@media (min-width: 621px) { .cn-mandos { grid-template-columns: minmax(0, 1fr) minmax(190px, auto) minmax(0, 1fr); } }
.cn-per-fila > button { padding: 0 4px; }
@media (max-width: 620px) {
  /* Lo del medio en una sola fila de cuatro: el botón grande ocupa dos, el 24″ y el 14″ uno cada uno. */
  .cn-medio { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cn-medio > #cnPlay { grid-column: span 2; }
  .cn-medio.sin-pos > #cnPlay, .cn-medio > .cn-per-fila, .cn-medio > .cn-aviso { grid-column: 1 / -1; }
  .cn-pos-fila { display: contents; }
  /* La franja del reloj: período, reloj y posesión arriba; la flecha, en su propia línea. */
  .cn-centro { flex-wrap: wrap; row-gap: 4px; }
  .cn-flecha { flex-basis: 100%; justify-content: center; }
}

/* ─── Ajustes del torneo ─────────────────────────────────────────────────
   Cada ajuste es un bloque con su rótulo; las opciones se ven todas (segmentado) y debajo
   va una línea que dice qué significa la elegida. */
#gestionBody .pista { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
#gestionBody .bloque > .seg, #gestionBody .campo > .seg { align-self: flex-start; }
/* Un campo dentro de la hoja (borrar una jornada en juego pide su nombre). */
.hoja-campo { margin: 0 0 6px; }
.hoja-campo .campo, .hoja-campo > .e3-pista { margin: 0 var(--v-pad) 6px; }
/* La nota de una pregunta (preguntar): es el aviso de lo que va a pasar, se lee como texto
   normal y no como el rótulo diminuto de sección (.hoja-rot). */
.hoja-nota { margin: var(--e2) var(--e3) var(--e3); color: var(--tinta); font-size: 15px; line-height: 1.45; }

/* ═══ Entrega 3 · movimiento y apartados ═════════════════════════════════════════
   La pantalla nueva sube y aparece: la misma familia de movimiento del asistente. La pone
   `entra()` (app.js) en cada cambio de ruta. */
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.entra { animation: entra .35s cubic-bezier(.2,.8,.2,1); }

/* Apartados (`apartados()`, ui.js): índice a la izquierda en computador; en el celular una
   lista que entra y vuelve. El mismo DOM sirve a los dos: lo decide este CSS. */
.aj { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.aj-idx { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
.aj-idx button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--tinta-2); font: 700 13px var(--g-sans); cursor: pointer; }
.aj-idx button small { display: block; font-weight: 500; font-size: 11px; color: var(--tinta-3); margin-top: 2px; }
.aj-idx button:hover { color: var(--tinta); background: var(--papel); }
.aj-idx button.on { background: var(--hundido-2); color: var(--fuerte); }   /* sin franja de color (gestor 26-oct) */
.aj-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* `.aj .aj-tit` y no solo la clase: `.modal h3` (marca.css) lo pasaba a mayúsculas. */
.aj .aj-tit { margin: 0 0 12px; font: 800 16px/1.25 var(--g-sans); color: var(--tinta); text-transform: none; letter-spacing: 0; }
.aj .lsec, .aj .volver { display: none; }
.lsec { flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.lsec button { display: flex; align-items: center; gap: 12px; border: 0; border-top: 1px solid var(--linea);
  background: none; padding: 14px; text-align: left; cursor: pointer; color: var(--tinta); font: inherit; }
.lsec button:first-child { border-top: 0; }
.lsec-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--hundido-2); display: grid; place-items: center; flex: none; }
.lsec b { display: block; font-size: 14px; }
.lsec small { display: block; font-size: 12px; color: var(--tinta-2); margin-top: 2px; }
.lsec-fl { margin-left: auto; color: var(--tinta-3); }
.volver { align-items: center; gap: 6px; border: 0; background: none; color: var(--tinta-2); font: 700 13px var(--g-sans);
  padding: 0; cursor: pointer; align-self: flex-start; }
@media (max-width: 619px) {
  .aj { display: block; }
  .aj-idx { display: none; }
  .aj .volver { display: inline-flex; }
  .aj.en-lista .lsec { display: flex; }
  .aj.en-lista .aj-col { display: none; }
}

/* Ajustes del torneo (Entrega 3). El índice se pega debajo de la barra y de las pestañas del
   torneo, no en el borde de la página, donde lo taparían. */
#gestionBody .aj-idx { top: calc(var(--barra) + 56px); }
#gestionBody .aj-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#gestionBody .cfg-foto { margin-top: 0; }
#gestionBody .cfg-bts { min-width: 0; }
/* La barra de guardar: aparece al cambiar algo y se queda pegada abajo mientras bajas por el
   apartado; en el celular, por encima de la barra de abajo. */
.guardar { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 10px;
  background: var(--alzado); border: 1px solid var(--linea-fuerte); border-radius: 10px; padding: 10px 12px;
  box-shadow: var(--sombra-alta); }
.guardar .guardar-tx { margin: 0; color: var(--tinta); font-weight: 700; }
.guardar .sp { flex: 1; }
/* Los campos de dos en dos, como en la maqueta: en tres columnas el segmentado de
   Participantes no cabía y se partía en dos renglones. */
#gestionBody .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 619px) { #gestionBody .rejilla { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .guardar { bottom: calc(70px + env(safe-area-inset-bottom)); } }

/* Todo movimiento se apaga para quien lo pidió en su aparato. */
@media (prefers-reduced-motion: reduce) { .entra { animation: none; } }
/* ═══ Entrega 3 · Elso, el lobo ═══════════════════════════════════════════════
   `elso()` (ui.js) pinta `.elso-pie > img.elso`. La altura va en `--h` y la proporción en `--r`:
   la imagen ocupa su sitio antes de cargar. La sombra bajo los pies es de CSS, no de la imagen. */
.elso-pie { position: relative; display: inline-block; isolation: isolate; flex: none; }
.elso-pie::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -6px; height: 10px; border-radius: 50%;
  background: rgba(0,0,0,.45); filter: blur(4px); z-index: -1; }   /* color fijo: la sombra bajo los pies, en los dos modos */
.elso { display: block; height: var(--h); aspect-ratio: var(--r); width: auto; max-width: none; max-height: none; object-fit: contain; user-select: none; pointer-events: none; }   /* 31-oct: nunca se estira aunque el contenedor lo apriete */
@keyframes elso-salta { 0% { transform: translateY(16px) scale(.92); opacity: 0; } 60% { transform: translateY(-6px) scale(1.02); opacity: 1; } 100% { transform: none; } }
@keyframes elso-festeja { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) translateY(-6px); } 75% { transform: rotate(4deg) translateY(-6px); } }
.elso-salta { animation: elso-salta .5s cubic-bezier(.2,.8,.2,1) both; }
.elso-festeja { animation: elso-salta .5s cubic-bezier(.2,.8,.2,1) both, elso-festeja .9s .5s ease-in-out 2; }
/* Correr (kit 3D, 29-oct): UNA imagen que rebota suave en el sitio; la sombra se encoge cuando sube.
   Con movimiento reducido se queda quieto. */
.elso-corre { animation: elso-rebota .6s ease-in-out infinite alternate; }
@keyframes elso-rebota { from { transform: none; } to { transform: translateY(-7%); } }
.elso-pie:has(.elso-corre)::after { animation: elso-sombra .6s ease-in-out infinite alternate; }
@keyframes elso-sombra { from { transform: none; } to { transform: scaleX(.82); opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .elso-salta, .elso-festeja, .elso-corre, .elso-pie:has(.elso-corre)::after { animation: none; }
}
/* Elso al lado de un texto corto (kit 3D, 29-oct): Compartir (celular) y antes de borrar (susto). */
.comp-ayuda, .hoja-susto { display: flex; align-items: center; gap: 12px; }
.comp-ayuda > p, .hoja-susto > p { margin: 0; min-width: 0; }
/* Vacíos con Elso: la pieza `.vacio` con el lobo arriba. */
.vacio-elso { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px;
  background: var(--hundido); border: 1px dashed var(--linea-fuerte); border-radius: 12px; }
.vacio-elso .t { margin: 6px 0 0; }
/* Elso al lado de una línea (Hoy sin partido, Pendientes sin faltas, jornada terminada). */
.elso-nota { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 10px;
  background: var(--hundido); border: 1px solid var(--linea); border-radius: 12px; }
.elso-nota > div, .elso-nota > p { min-width: 0; }
/* La ayuda corta con Elso chico (Configuración › Tú, Ajustes del torneo): no empuja los campos. */
.elso-ayuda { padding: 0; gap: 12px; margin-bottom: 14px; background: none; border: 0; }   /* sin caja: las ventanas no llevan cajas dentro (test_ventanas) */
.elso-ayuda > p { font-size: 13px; }
/* Elso grande y centrado arriba, la frase debajo: la ventana «Antes de seguir». Sin caja, como .elso-ayuda. */
.elso-centro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 4px 0 18px; }
.elso-centro > p { font-size: 16px; line-height: 1.45; max-width: 34ch; color: var(--tinta); }
@media (max-width: 699px) { .elso-centro .elso-pie { --h: 120px !important; } .elso-centro > p { font-size: 15px; } }
@media (max-width: 699px) { .elso-ayuda .elso-pie { --h: 48px !important; } .elso-ayuda > p { font-size: 12.5px; } }
.elso-nota b { display: block; font-size: 15px; color: var(--tinta); }
.elso-nota p { margin: 2px 0 0; color: var(--tinta-2); font-size: 13px; line-height: 1.45; }
.elso-nota > p { margin: 0; }
/* El tour con Elso (Entrega 3b, C5; la muestra «Tour con Elso»): lo señalado con un aro y el resto
   oscurecido (la sombra enorme del aro); el velo, transparente, no deja tocar nada salvo, si el
   paso espera una acción, el hueco de lo señalado (clip-path con el hueco, ui.js). El globo es
   blanco, va al lado con una flecha que apunta al centro de lo señalado, y Elso al lado del globo. */
.tour { position: fixed; inset: 0; z-index: 1300; pointer-events: none; }
.tour[hidden] { display: none; }
/* Con Anotar abierto el tour se esconde ya, sin esperar al reloj de 250 ms: Elso en Anotar SOLO en la
   práctica del tour (`mesa-practica`, abrirMesa; tourAro además mira que sea la del tour). Nunca en el
   televisor ni en la grada. */
body.con-mesa:not(.mesa-practica) .tour, body:is(.ruta-arena, .ruta-grada) .tour { display: none; }
.tour-velo { position: fixed; inset: 0; pointer-events: auto; }
.tour-velo.oscuro { background: color-mix(in srgb, var(--fondo) 72%, transparent); }
.tour-aro { position: fixed; border-radius: 12px; pointer-events: none; animation: tour-velo .3s ease-out both;
  box-shadow: 0 0 0 3px var(--tinta), 0 0 0 9999px color-mix(in srgb, var(--fondo) 72%, transparent);
  transition: left .2s, top .2s, width .2s, height .2s; }
@keyframes tour-velo { from { opacity: 0; } }
.t-caja { position: fixed; pointer-events: auto; display: flex; align-items: flex-end; gap: 6px; animation: entra .35s cubic-bezier(.2,.8,.2,1) both; }
.t-caja[data-lado="der"] { flex-direction: row-reverse; }
.t-globo { position: relative; flex: 1; min-width: 0; background: var(--tinta); color: var(--fondo); border-radius: 14px;
  padding: 13px 15px 12px; box-shadow: var(--sombra-alta); font: 500 13px/1.45 var(--g-sans); }
.t-globo .rot { color: color-mix(in srgb, var(--fondo) 65%, var(--tinta)); font: 600 9.5px var(--g-mono); letter-spacing: .08em; text-transform: uppercase; }
.t-globo b { display: block; font-size: 15px; margin: 3px 0; }
.t-globo p { margin: 0; }
.t-globo::before { content: ''; position: absolute; width: 14px; height: 14px; background: var(--tinta); transform: rotate(45deg); border-radius: 2px; }
.t-caja[data-lado="esquina"] .t-globo::before { display: none; }
.t-caja[data-lado="der"] .t-globo::before { left: -6px; top: calc(var(--fy, 50%) - 7px); }
.t-caja[data-lado="izq"] .t-globo::before { right: -6px; top: calc(var(--fy, 50%) - 7px); }
.t-caja[data-lado="aba"] .t-globo::before { top: -6px; left: calc(var(--fx, 50%) - 7px); }
.t-caja[data-lado="arr"] .t-globo::before { bottom: -6px; left: calc(var(--fx, 50%) - 7px); }
.t-pie { display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.t-pie button { border: 0; border-radius: 8px; height: 32px; padding: 0 11px; font: 700 12px var(--g-sans); cursor: pointer;
  background: color-mix(in srgb, var(--fondo) 10%, var(--tinta)); color: var(--fondo); }
.t-pie button.si { background: var(--fondo); color: var(--tinta); }
.t-pie button:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.t-bts { display: flex; gap: 6px; margin-left: auto; }
.t-pie .salir { background: none; padding: 0 4px; color: color-mix(in srgb, var(--fondo) 65%, var(--tinta)); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 619px) { .t-pie button { height: 40px; } }
/* La barrita del tema (P4 T4, la muestra sección 3): un tramo por paso, los hechos en rojo. */
.t-barra { display: flex; gap: 4px; margin-top: 10px; }
.t-barra i { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--fondo) 18%, var(--tinta)); }
.t-barra i.on { background: var(--marca); }
@media (prefers-reduced-motion: reduce) { .t-caja, .tour-aro { animation: none; transition: none; } }

/* ═══ P4 · La guía de Elso: «¿Te ayudo?» y «¿Qué quieres aprender?» (la muestra, sección 2) ═══
   Dónde se ve, en una sola regla: quien organiza (Administra u Organiza), en Inicio, Jornadas, Staff y
   dentro de SU jornada (`rol-org`). Nunca con enlace de cancha, con Anotar abierto ni mientras corre un
   tour; tampoco en la portada, #tv, la arena, la grada ni la jornada de otro club (otras rutas o
   `rol-pub`). Con la barra de guardar a la vista en la pestaña abierta (Ajustes) se esconde: le taparía «Guardar». */
.guia-caja { display: none; }
body:is(.nivel-admin, .nivel-gestor):is(.ruta-casa, .ruta-jornadas, .ruta-staff, .ruta-evento.rol-org):not(.es-veedor, .con-mesa, .con-tour) .guia-caja { display: contents; }
body:has(.panel.active .guardar:not([hidden])) .guia-caja { display: none; }
.ayuda-elso { position: fixed; right: 22px; bottom: 22px; z-index: 75; display: flex; align-items: center; height: 56px; padding: 0 18px 0 0;
  border-radius: var(--r-full); background: var(--hundido-2); border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra-alta);
  cursor: pointer; font: 800 13.5px var(--g-sans); color: var(--fuerte); }
.ayuda-elso:hover { border-color: var(--tinta-3); }
.ayuda-elso:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.ayuda-elso .cara { width: 56px; height: 56px; margin: -1px 8px -1px -1px; flex: none; border-radius: 50%; overflow: hidden;
  background: var(--marca); border: 2px solid var(--marca); }
.ayuda-elso .cara img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guia-velo { display: none; }
.guia { position: fixed; right: 22px; bottom: 90px; z-index: 1150; width: 400px; max-height: calc(100dvh - 90px - var(--barra) - 12px); display: flex;
  flex-direction: column; background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: 16px; box-shadow: var(--sombra-alta);
  overflow: hidden; transform-origin: 100% 100%; animation: guia-sale .28s cubic-bezier(.2,1.2,.4,1) both; }
.guia[hidden] { display: none; }
@keyframes guia-sale { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes guia-sube { from { transform: translateY(100%); } }
.g-cab { position: relative; flex: none; display: flex; align-items: flex-end; gap: 12px; padding: 18px 18px 0; background: var(--hundido-2); }
.g-cab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--marca); }
.g-cab .tx { min-width: 0; padding: 0 30px 16px 0; }
.g-cab h2 { margin: 0; font: 800 19px/1.2 var(--g-sans); color: var(--fuerte); }
.g-cab p { margin: 6px 0 0; color: var(--tinta-2); font-size: 12.5px; line-height: 1.45; }
.g-cab .x { position: absolute; top: 10px; right: 10px; }
.g-todo { flex: none; padding: 14px 16px 4px; }
.g-todo .btn { width: 100%; }
.g-lista { min-height: 0; overflow-y: auto; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
/* El rótulo de cada apartado de la lista (Armar tu jornada, Anotar en la mesa…): letra de rótulo, no un título más, para que
   los 17 temas se lean en cuatro grupos sin competir con el nombre de cada tema. */
.g-lista .g-gr { margin: 12px 10px 2px; font: 600 9.5px var(--g-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.g-lista .g-gr:first-child { margin-top: 4px; }
.tema { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none;
  text-align: left; cursor: pointer; font: inherit; color: var(--tinta); }
.tema:hover { background: var(--alzado); }
.tema:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.tema .ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--alzado); color: var(--fuerte); font-size: 17px; }
.tema .ic .fi { display: inline-flex; }
.tema .tx { flex: 1; min-width: 0; }
.tema b { display: block; font-size: 13.5px; color: var(--fuerte); }
.tema .tx span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--tinta-2); }
.tema .min { flex: none; font: 500 10.5px var(--g-mono); color: var(--tinta-3); }
.tema.hecho .ic { background: var(--ok-bg); color: var(--ok-tx); }
.tema .ok { flex: none; font-size: 12px; font-weight: 800; color: var(--ok-tx); }
.g-pie { flex: none; margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: 11.5px; line-height: 1.4; }
/* Con la barra de abajo (≤ 900 px) el botón va encima de ella, y el contenido deja sitio para no quedar debajo. */
@media (max-width: 900px) {
  .ayuda-elso { right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .guia { bottom: calc(140px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 140px - var(--barra) - 12px); }
  body:is(.nivel-admin, .nivel-gestor):not(.es-veedor) .panel { padding-bottom: 140px; }
}
/* En el celular: solo la cara, y el panel es una hoja que sube desde abajo con un velo. */
@media (max-width: 619px) {
  .ayuda-elso { height: 52px; padding: 0; }
  .ayuda-elso .tx { display: none; }
  .ayuda-elso .cara { width: 52px; height: 52px; margin: -1px; }
  .guia-velo:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1149; background: color-mix(in srgb, var(--fondo) 60%, transparent); }
  .guia { left: 0; right: 0; bottom: 0; width: auto; max-height: 86dvh; border-width: 1px 0 0; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom); transform-origin: 50% 100%; animation-name: guia-sube; }
}
@media (prefers-reduced-motion: reduce) { .guia { animation: none; } }
/* La marca de la jornada de práctica: en Inicio, Jornadas, la cabecera y el asistente del tour. */
.chip-j.cj-prac { background: var(--alerta); border-color: var(--alerta); color: var(--papel); font-weight: 700; }
.chip-j.cj-prac[hidden] { display: none; }

/* ═══ Entrega 3b · Casillas de la clave (codeSlots, ui.js) ═════════════════════
   Port de la muestra. El <input> real va encima de la fila, invisible (16 px para que iOS
   no haga zoom al enfocarlo). Cada casilla tiene un relleno que crece al llenarse, el dígito
   y el cursor que parpadea. `.mal` tiñe de rojo; `.bien` cubre con el baño blanco y el ✓. */
.slots { --n: 6; --fs: 24px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px;
  width: 100%; max-width: calc(var(--n) * 54px + (var(--n) - 1) * 8px); isolation: isolate; }
.slots-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0;
  font-size: 16px; color: transparent; caret-color: transparent; background: transparent; z-index: 3; cursor: text; }
.slot { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; background: var(--hundido-2); box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  display: grid; place-items: center; overflow: hidden; transition: box-shadow .15s ease, background-color .2s ease; }
.slot-f { position: absolute; inset: 0; border-radius: inherit; background: var(--alzado); opacity: 0; transform: scale(.6);
  transition: opacity .16s ease-in, transform .16s ease-in; }
.slot.lleno .slot-f { opacity: 1; transform: none; }
.slot-d { position: relative; font: 700 var(--fs)/1 var(--g-mono); color: var(--tinta); }
.slot-c { position: absolute; left: 50%; top: 30%; height: 40%; width: 2px; margin-left: -1px; background: var(--tinta);
  border-radius: 2px; display: none; animation: parpa 1s steps(1, end) infinite; }
.slot.act { box-shadow: inset 0 0 0 2px var(--tinta); }
.slot.act:not(.lleno) .slot-c { display: block; }
.slots.mal .slot { box-shadow: inset 0 0 0 1px var(--error); background: var(--error-bg); }
.slots.mal .slot-f { background: var(--error-linea); }
.slots.mal .slot-d { color: var(--error); }
.slots-lav { position: absolute; inset: -1px; border-radius: 12px; background: var(--tinta); z-index: 2; display: grid; place-items: center;
  opacity: 0; clip-path: inset(0 50% round 12px); pointer-events: none; }
.slots.bien .slots-lav { animation: lava .45s cubic-bezier(.2,.8,.2,1) forwards; }
.slots-lav .fi { font-size: calc(var(--fs) * 1.15); line-height: 1; color: var(--fondo); opacity: 0; }
.slots.bien .slots-lav .fi { animation: subeOk .4s .3s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes lava { from { opacity: 1; clip-path: inset(0 50% round 12px); } to { opacity: 1; clip-path: inset(0 0 round 12px); } }
@keyframes subeOk { from { opacity: 0; transform: translateY(12px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes parpa { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .slot, .slot-f { transition: none; }
  .slot-c { animation: none; }
  .slots.bien .slots-lav, .slots.bien .slots-lav .fi { animation-duration: .01ms; animation-delay: 0s; }
}

/* ═══ Entrega 3b · Estado de la jornada (A2) ═════════════════════════════════════
   Los chips de la muestra aprobada (proto-autopsia): «Por empezar» neutro, «En juego» verde
   (nunca rojo: el rojo es solo de un partido corriendo) y «Terminada» apagado. El candado de
   Privada va aparte, redondo, con el aria-label que lo dice. */
.chip-j { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1.3 var(--g-mono); letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--tinta-2);
  background: none; white-space: nowrap; }
.chip-j.cj-juego { color: var(--ok-tx); border-color: var(--ok-linea); }
.chip-j.cj-fin { color: var(--tinta-3); border-color: var(--linea); }
.candado { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1px solid var(--linea-fuerte); color: var(--tinta-2); }
.candado .fi { font-size: 11px; line-height: 1; display: block; }
/* Sobre las rayas de la portada de la vitrina el chip necesita fondo para leerse. */
.tj-pills .chip-j { background: var(--papel); }
.ev-chips { align-items: center; }
/* La línea pequeña de la cabecera (C3): la fecha entera siempre; si no cabe, el lugar se acorta. */
.ev-meta { display: flex; min-width: 0; }
.ev-f { flex: none; }
.ev-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }   /* pre: conserva el espacio de « · » */
@media (max-width: 620px) { .ev-meta { letter-spacing: .06em; } }

/* ═══ Entrega 3b · Anotar por cancha y la puerta del anotador (B2, tarea 6) ═══════════
   Como la muestra: una tarjeta por cancha. Sin enlace, las 6 casillas y «Crear el enlace»
   (botón claro: el rojo de la pantalla no es este). Recién creado, el QR sobre blanco y la
   clave en grande, una sola vez. Con enlace, quién entró, «Cortar» y «Cambiar el enlace». */
.btn-claro { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); font-weight: 800; }
.btn-claro:hover:not(:disabled) { background: var(--fuerte); border-color: var(--fuerte); }
/* Anotar por cancha (Ventanas 2026): ventana grande; cada cancha es una sección («Cancha N» y su estado en gris a la derecha) separada
   de la siguiente por un filete, sin tarjeta. El QR con la clave recién creada es el ÚNICO bloque teñido (blanco: así se lee). */
.anc-p { max-width: 64ch; }
.anc-lista { display: flex; flex-direction: column; }
.anc-c { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 0; }
.anc-c + .anc-c { border-top: 1px solid var(--linea); }
.anc-c:first-child { padding-top: 4px; }
.anc-c .pista { margin: 0; font-size: 13px; }
.anc-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.anc-cab b { font: 700 14px/1.3 var(--g-sans); color: var(--tinta); }
.anc-c > .btn { align-self: flex-start; }
.anc-c .slots { gap: 6px; max-width: none; --fs: 22px; }
.anc-qr { align-self: center; width: 148px; height: 148px; padding: 8px; background: #fff; border-radius: 10px; line-height: 0; }   /* color fijo: el QR se lee sobre blanco */
.anc-qr img, .anc-qr canvas { display: block; width: 100%; height: auto; }
.anc-noqr { display: block; font-size: 12px; line-height: 1.4; color: #0b0c10; }   /* color fijo: letra oscura dentro de la caja blanca del QR */
.anc-clave { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.anc-clave b { font: 700 22px/1 var(--g-mono); letter-spacing: .18em; color: var(--fuerte); }
.anc-centro { text-align: center; }
.anc-url { min-width: 0; }
.anc-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.4 var(--g-mono); color: var(--tinta); padding: 6px 0; }
.anc-bts .btn { min-height: 44px; }
.anc-bts { display: flex; flex-wrap: wrap; gap: var(--e2); }
.anc-bts .btn { flex: 1 1 auto; text-decoration: none; }
.anc-quien { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); flex-wrap: wrap; }
.anc-quien .pista b { color: var(--tinta); }
.anc-cambiar { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none;
  padding: 4px 0 0; color: var(--tinta); cursor: pointer; font: inherit; }
.anc-cambiar b { font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tinta-3); }
.anc-cambiar small { font-size: 11.5px; color: var(--tinta-3); }
/* La puerta del anotador: la jornada en grande (Saira), la clave a lo ancho del formulario. */
.cn-entrada .rot { color: var(--tinta-2); margin-bottom: var(--e2); }
.cn-entrada h2.cn-jor { font: italic 900 26px/1.05 var(--g-firma); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 var(--e2); overflow-wrap: anywhere; }
.cn-entrada .slots { max-width: none; }
.cn-entrada .campo + .campo { margin-top: var(--e4); }
.cn-entrada .cn-pie { margin: var(--e4) 0 0; text-align: center; max-width: none; font-size: 12.5px; }
.cn-entrada #cnMsg:not(:empty) { margin-top: var(--e3); }

/* ═══ Entrega 3b · Pantalla para el público (A5, tarea 7) ═══════════════════════════
   La ventana: la dirección corta y el código en 4 casillas grandes de solo lectura.
   El televisor (`#tv`, en el panel de la arena): GRID, el título y las 4 casillas a lo grande,
   alto contraste, medido por el alto de la pantalla para que se lea desde lejos. */
.tvp { text-align: center; }
.modal:has(> .tvp) { max-width: 420px; }
.tvp .pista { margin: 0; }
.tvp-paso { font-size: 15px; line-height: 1.6; color: var(--tinta-2); margin: var(--e2) 0 var(--e4); }
.tvp-paso b { font: 700 18px/1.4 var(--g-mono); color: var(--fuerte); overflow-wrap: anywhere; }
.tvp-cod { display: grid; grid-template-columns: repeat(4, 64px); gap: 10px; justify-content: center; margin-bottom: var(--e3); }
.tvp-cod span { height: 80px; border-radius: 10px; background: var(--hundido-2);
  display: grid; place-items: center; font: 700 38px/1 var(--g-mono); color: var(--fuerte); }
/* «Copiar enlace para OBS»: aparte, con su raya, para que no se lea como parte del código de 4 letras. */
.tvp-obs { display: grid; justify-items: center; gap: var(--e2); margin: var(--e4) 0; padding-top: var(--e3); border-top: 1px solid var(--linea); }
.tvp-obs .pista { max-width: 36ch; }
.tv-ent { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 4vh, 48px); padding: var(--e5); text-align: center; background: var(--fondo); }
.tv-logo { height: clamp(28px, 7vh, 84px); width: auto; }
.tv-ent h1 { margin: 0; font: 800 clamp(22px, min(5.5vh, 7vw), 64px)/1.15 var(--g-sans); color: var(--fuerte); max-width: 22ch; }
.tv-ent #tvSlots { width: min(100%, 72vh); }
.tv-ent .slots { --fs: clamp(32px, 10vh, 120px); max-width: none; gap: clamp(8px, 2vh, 24px); }
.tv-ent .slot { border-radius: clamp(10px, 2vh, 20px); }
.tv-msg { margin: 0; min-height: 1.3em; font: 700 clamp(15px, 3vh, 34px)/1.3 var(--g-sans); color: var(--error); }

/* ═══ Entrega 3b · Equipos, ficha y Compartir (tarea 8) ═════════════════════════════
   El aviso de «toast» con su «Ir»; el año bajo cada jugador; el aviso del equipo sin partidos;
   la ficha del equipo (como la muestra: escudo grande, cifras, partidos y jugadores) y la
   ventana de Compartir con un botón grande y el enlace pequeño. */
.toast-ir { margin-left: 12px; padding: 4px 12px; border: 1px solid currentColor; border-radius: var(--r-full);
  background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.lista-f .tx .jug { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.jg { display: inline-flex; flex-direction: column; line-height: 1.25; }
.jg b { font-weight: 600; color: var(--tinta); font-size: 12.5px; }
.lista-f .tx .jg small, .jg small { color: var(--tinta-3); font: 600 11px/1.3 var(--g-mono); }
.eq-sin-p { align-items: center; flex-wrap: wrap; margin-bottom: var(--e3); }
.eq-sin-p > div { flex: 1 1 220px; }
.eq-sin-p .btn { flex: none; }
.tb-eq { display: flex; align-items: center; gap: 8px; min-width: 0; }
button.tb-eq { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
button.tb-eq:hover b { text-decoration: underline; text-underline-offset: 3px; }
.esc.esc--xl { width: 72px; height: 72px; font-size: 22px; }
.ficha-cab { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: var(--e4); }
.ficha-cab h3 { margin: 4px 0 0; font-size: 20px; font-weight: 800; }
.ficha-cab .pista b { color: var(--tinta); }
/* PJ · PG · PP · Pts (Ventanas 2026): filas, el rótulo a la izquierda y la cifra en mono a la derecha; sin cajas. */
.ficha-cifras { display: flex; flex-direction: column; margin-bottom: var(--e3); }
.ficha-cifras div { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 0; }
.ficha-cifras div + div { border-top: 1px solid var(--linea); }
.ficha-cifras b { font: 700 15px/1 var(--g-mono); color: var(--tinta); }
.ficha-cifras span { font: 500 14px/1.3 var(--g-sans); color: var(--tinta-2); }
.ficha-sub { margin: var(--e4) 0 4px; font-size: 13px; font-weight: 800; }
.fi-p { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); }
.ficha-sub + .fi-p { border-top: 0; }
.fi-p .tx { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.fi-p .tx small { display: block; color: var(--tinta-3); font-size: 11.5px; }
.fi-r { font: 700 15px/1 var(--g-mono); color: var(--tinta); }
.ficha-jug { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 14px; }
.modal:has(.ficha-cab) { max-width: 520px; }
.comp-j { display: flex; align-items: center; gap: 12px; margin-bottom: var(--e4); }
.comp-j .esc, .comp-j img { width: 44px; height: 44px; flex: none; }
.comp-j b { display: block; font-size: 14.5px; }
.comp-j span { font-size: 12px; color: var(--tinta-2); }
.comp-pista { margin: var(--e3) 0; }
.fm-enlace { display: block; margin: 0 auto; }
.fm-otro { margin-top: var(--e3); }
.fm-enlace { margin: var(--e3) 0 0; }
/* P4 T6 · la declaración de los acudientes: una frase entera, en minúsculas y legible. */
.fm-aut { display: flex; align-items: flex-start; gap: 10px; margin: var(--e3) 0 0; cursor: pointer; font-size: .9rem; line-height: 1.4; color: var(--fuerte); }
.fm-aviso { margin: var(--e3) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); }
.fm-aviso a { color: var(--marca-osc); text-decoration: underline; }
.fm-aut small { color: var(--tinta-3); }
.fm-aut input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex-shrink: 0; accent-color: var(--marca); cursor: pointer; }
.modal:has(.comp-fam) { max-width: 520px; }

/* ═══ P1 · Inicio en dos columnas (la muestra «App · Inicio») ═══════════════════════
   A la izquierda lo de hoy y lo que pasó; a la derecha atajos, lo que viene y la temporada.
   Por debajo de 900 px una columna: las columnas se vuelven `display: contents` y manda el
   `order` de cada tarjeta (Ahora · Atajos · Lo que viene · Últimas · Temporada). */
.hola-f { display: flex; align-items: center; gap: 16px; }
.tcab .sp { flex: 1; }
.hola-f > .hola { flex: 1; min-width: 0; margin: 0; }
#casaBody .hola .esc { width: 68px; height: 68px; }
#casaBody .hola .pag-tit { font-size: 44px; }
.ini-g { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ini-g > .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ini-g .tarjeta { margin: 0; }
@media (max-width: 899px) {
  .ini-g { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .ini-g > .col { display: contents; }
}
.fila-j { display: flex; align-items: center; gap: 12px; }
.fila-j > .esc { width: 48px; height: 48px; flex: none; }
.fila-j .tx { flex: 1; min-width: 0; }
.fila-j .tx b { display: block; font-size: 16px; font-weight: 800; color: var(--tinta); overflow-wrap: anywhere; }
.fila-j .tx span { display: block; font-size: 12.5px; color: var(--tinta-2); margin-top: 3px; }
.fila-j > .btn { flex: none; }
.prog { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
.prog i { flex: 1; height: 6px; border-radius: 99px; background: var(--alzado); position: relative; overflow: hidden; }
.prog i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 99px; background: var(--ok); }
/* Las canchas de «Ahora» caben de a tres en la columna ancha (en Hoy miden 280). */
#casaBody .hcs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
#casaBody .hc { background: var(--hundido-2); }
#casaBody .hc:hover { background: var(--alzado); }
/* Una línea por dato, con puntos suspensivos: el chip de la derecha no parte el nombre en tres. */
#casaBody .fil .tx b, #casaBody .fil .tx span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#casaBody .fil .tx span { margin-top: 2px; }
/* «Te falta» de la próxima: Elso con la planilla al lado de la lista; lo que ya está, en verde. */
.ini-falta { display: flex; gap: 16px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.ini-falta > div { flex: 1; min-width: 0; align-self: center; }
.chk { list-style: none; margin: 6px 0 0; padding: 0; }
.chk li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linea); font-size: 13px; line-height: 1.35; }
.chk li:first-child { border-top: 0; }
.chk li > span:not(.m) { flex: 1; min-width: 0; }
.chk .m { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 12px; }
.chk .no .m { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }
.chk .si .m { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-tx); font-size: 11px; }
.chk .si > span:not(.m) { color: var(--tinta-2); }
.chk .btn { flex: none; }
/* Últimas: los escudos de los campeones, encimados. «Informe» queda en icono en el celular. */
.par { display: flex; flex: none; }
.par > .esc { width: 34px; height: 34px; }
.par > * + * { margin-left: -8px; }
.fil > .btn-inf { flex: none; }
.dia-bt .av { width: 30px; height: 30px; border-radius: 50%; background: var(--alzado); object-fit: cover; flex: none; margin: -4px; }
#casaBody .dia-bts { grid-template-columns: 1fr; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st { background: var(--hundido-2); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 10px 9px; min-width: 0; }
.st b { display: block; font-size: 24px; font-weight: 800; color: var(--tinta); line-height: 1.1; font-variant-numeric: tabular-nums; }
.st span { display: block; font-size: 11px; color: var(--tinta-2); margin-top: 2px; line-height: 1.3; }
@media (max-width: 620px) {
  .hola-f { flex-direction: column; align-items: stretch; gap: 14px; }
  .hola-f > .btn { width: 100%; }
  #casaBody .hola .esc { width: 56px; height: 56px; }
  #casaBody .hola .pag-tit { font-size: 28px; }
  .fila-j { flex-wrap: wrap; }
  .fila-j > .btn { flex: 1 1 100%; }
  .ini-falta > .elso-pie { display: none; }
  #casaBody .fil > .chip-j { display: none; }
  .fil > .btn-inf { width: 34px; padding: 0; }
  .fil > .btn-inf span { display: none; }
}

/* ═══ P3 · Prueba gratuita y Premium (la muestra «App · Demo») ══════════════════════
   La franja bajo la barra: delgada, con tinte amarillo, nunca roja ni con relleno de marca, y no se
   cierra. Solo con sesión de una cuenta en prueba (`body.en-prueba`, pintarFranja) y en las pantallas
   de la app: fuera quedan la portada, #cancha/, #grada/, #arena/ y #tv (sus rutas no están aquí).
   En el celular dice solo «Prueba gratuita» y «Hazte Premium». */
.franja { display: none; align-items: center; gap: 10px; min-height: 40px; padding: 6px 22px; font-size: 13px;
  background: color-mix(in srgb, var(--alerta) 7%, var(--fondo)); border-bottom: 1px solid var(--linea); color: var(--tinta-2); }
body.en-prueba:is(.ruta-casa, .ruta-jornadas, .ruta-staff, .ruta-evento):not(.es-veedor) .franja { display: flex; }
.franja > .fi { color: var(--alerta-tx); font-size: 15px; display: inline-flex; }
.franja > b { color: var(--tinta); font-weight: 800; white-space: nowrap; }
.fr-lin { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-ir { margin-left: auto; border: 0; background: none; padding: 4px 0; font: 800 13px var(--g-sans); color: var(--tinta); cursor: pointer;
  display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linea-fuerte); }
.fr-ir:hover { text-decoration-color: currentColor; }
.fr-ir:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 620px) { .franja { padding: 6px 16px; font-size: 12.5px; } .fr-lin { display: none; } }
@media print { .franja { display: none !important; } }
/* «Premium» al lado de lo que tiene candado: letra normal en ámbar, sin pastilla. Lo bloqueado se apaga
   con el gris de `--tinta-3` (≥ 4,5:1 en los dos modos), no con opacidad, que lo dejaba ilegible. */
.pm { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11.5px; font-weight: 800; color: var(--alerta-tx); white-space: nowrap; }
.dia-bt.bq b, .dia-bt.bq small, .dia-bt.bq > .fi { color: var(--tinta-3); }
.dia-bt > .pm { flex: none; }   /* `.dia-bt > span` le daba flex: 1 y partía la fila en dos */
/* «Tu prueba» en Inicio */
.pr-lin { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--tinta); }
.pr-lin small { display: block; color: var(--tinta-2); font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.uso { list-style: none; margin: 10px 0 12px; padding: 0; }
.uso li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea); font-size: 13px; }
.uso li > .fi { color: var(--tinta-2); display: inline-flex; }
.uso li > span:not(.pm) { flex: 1; min-width: 0; color: var(--tinta-2); }
.uso li > b { font-weight: 800; color: var(--tinta); white-space: nowrap; }
.tu-prueba > .btn { width: 100%; }
/* Las dos ventanas («Hazte Premium» y el aviso de tope): encima de todas, también de la hoja (1400). */
#pruebaModal { z-index: 1450; }
/* «Tu sesión se cerró»: Entrar va encima de todo (la ventana de crear, el tour, Premium). */
#loginModal.reentrar { z-index: 1500; }
#pruebaModalBody { max-width: 580px; }
#pruebaModalBody:has(.tp) { max-width: 480px; }
.pw-cab, .tp { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.pw-cab p { margin: 0 0 10px; color: var(--tinta-2); font-size: 14.5px; line-height: 1.55; }
.pw-cab p b { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 4px; }
/* Lo que trae Premium: FILAS con su icono (Ventanas 2026), sin tarjetas; el pago y «Con Premium» del tope, filas de aviso. */
.pw-ben { list-style: none; margin: 0; padding: 0; }
.pw-ben li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--tinta); }
.pw-ben li + li { border-top: 1px solid var(--linea); }
.pw-ico { width: 20px; display: grid; place-items: center; color: var(--tinta-3); flex: none; font-size: 15px; }
.pw-ico .fi::before { font-family: uicons-solid-rounded !important; }
.pw-pago, .tp-pre { display: flex; gap: 12px; align-items: flex-start; }
.pw-pago { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--linea); }
.pw-pago > .fi { color: var(--tinta-2); margin-top: 2px; }
.pw-pago p, .tp-pre p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.pw-pago b, .tp-pre b { color: var(--tinta); }
.pw-wa { width: 18px; height: 18px; }
.tp-t { flex: 1; min-width: 0; margin: 0 0 8px; font-size: 15.5px; font-weight: 800; line-height: 1.4; color: var(--tinta); }
.tp-pre { padding: 4px 0 0; }
.tp-pre > .fi { color: var(--alerta-tx); margin-top: 1px; }
/* Anotar en prueba (P3 · tarea 3). Fuera de la primera, lo de anotar en vivo se ve pero apagado (gris
   `--tinta-3`, no opacidad) y con «Premium»; tocarlo abre Premium. El rojo es «Escribir el resultado».
   En la primera, una nota con el tinte amarillo de la franja. */
.cn-bq { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 10px;
  border-radius: var(--r-sm); background: var(--hundido); border: 1px solid var(--linea-fuerte); cursor: pointer; font: inherit; color: var(--tinta-3); }
.cn-bq:hover { border-color: var(--tinta-3); }
.cn-bq:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.cn-bq-n { display: flex; gap: 14px; font: 700 18px var(--g-led); }
.cn-bq-tx { font: 700 13px var(--f-texto); letter-spacing: .04em; }   /* palabras en letra, no en LED */
.cn-bq-n .fi { margin-right: 4px; font-size: 12px; }
.cn-centro.apag :is(.cn-per, .cn-per b, .cn-reloj) { color: var(--tinta-3); }
.cn-cierre > .btn[data-resultado] { width: min(100%, 320px); height: 50px; font-weight: 800; }
.cn-cierre:has(.cn-fin) { flex-direction: column; align-items: center; gap: 12px; }
.cn-fin { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--tinta); text-align: center; }
.cn-fin > .fi { color: var(--ok-tx); }
.cn-dos .btn.bq { color: var(--tinta-3); background: var(--hundido); }   /* sobre --hundido-2 el gris quedaba en 4,4:1 en oscuro */
.cn-juego > .cn-nota { display: flex; gap: 10px; align-items: flex-start; width: calc(100% - 36px); max-width: 1144px; margin: 14px auto 0;
  padding: 10px 12px; border-radius: var(--r); font-size: 13px; line-height: 1.45; color: var(--tinta-2);
  background: color-mix(in srgb, var(--alerta) 7%, var(--papel)); border: 1px solid color-mix(in srgb, var(--alerta) 28%, var(--linea)); }
.cn-nota > .fi { color: var(--alerta-tx); margin-top: 2px; }
.cn-nota b { color: var(--tinta); }
@media (max-width: 620px) {
  .cn-juego > .cn-nota { width: calc(100% - 24px); margin-top: 10px; }
  .cn-mandos > .cn-bq:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
.acc-prueba { margin-top: calc(-1 * var(--e1)); color: var(--tinta-2); }
/* El tope de la prueba al lado de lo que frena, en el asistente. */
.stp-tope { display: flex; align-items: center; gap: 6px; }
.stp-tope > .fi { color: var(--alerta-tx); display: inline-flex; flex: none; }
:is(.calc, .eqs) + .stp-tope { margin-top: var(--e3); }
@media (max-width: 620px) {
  .pw-cab .elso-pie, .tp .elso-pie { --h: 92px !important; }
}

/* ═══ El reglamento del grupo (editor, dentro de «Reglas de …») y su cita pública ═══════════════ */
.rg { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.rg .pista { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.rg-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rg-campos input, .rg-pror input { width: 100%; }
.rg-libre { display: flex; flex-direction: column; gap: 12px; }
.rg-libre[hidden] { display: none; }
.rg-int { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.rg-int .interruptor { min-height: 40px; }
.rg-pror { max-width: 50%; }
.rg-notas { margin-bottom: 6px; }
.rg-pror[hidden] { display: none; }
/* Los cuatro reglamentos a 375 px: 2 × 2 parejo (en una fila de flex partía «Reglas libres | Reglamento FIBA» y dejaba los otros dos sueltos). */
@media (max-width: 699px) { .rg-pror { max-width: none; } .rg-int .interruptor { min-height: 44px; }
  .rg > .campo > .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .rg > .campo > .seg > button { justify-content: center; min-height: 44px; } }
/* Lo público: lo que se cita de FIBA y la línea simple, arriba de las notas del organizador. */
.reglas-reglamento { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.reglas-reglamento .pista, .reglas-reglamento .reglas-cita { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.reglas-reglamento > b { font-size: 13px; line-height: 1.3; }
.reglas-cita a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.reglas-cita a:hover { color: var(--fuerte); }

/* ─── Tiempos muertos (R3) ─────────────────────────────────────────────────────────────────────
   «TM» junto a «Falta» (con tiempos muertos la Falta deja de ocupar dos columnas) y, bajo las faltas de cada equipo, «T. muertos ●●○ · 2»:
   un punto lleno por cada uno que le queda. Sin cupo, el botón TM sale apagado (sigue tocable: dice por qué). */
.cn-col.con-tm .cn-falta { grid-column: auto; }
.cn-tm.apagado { opacity: .45; }
.cn-tms { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 6px; background: none; border: 0; cursor: pointer;
  font: 500 10px/1 var(--g-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; }
.cn-tms:empty { display: none; }
.cn-tms b { font: 700 13px/1 var(--g-led); letter-spacing: normal; color: var(--tinta); }
.tm-puntos { display: inline-flex; gap: 4px; }
.tm-puntos span { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--linea-fuerte); background: transparent; }
.tm-puntos span.on { background: var(--tinta); border-color: var(--tinta); }
/* En el celular las faltas y los T. muertos son una fila de una línea: el rótulo a la izquierda, los puntos y la cifra
   a la derecha. Va aquí, DESPUÉS de `.cn-tms` y de `.cn-faltas` de arriba, para ganarles por orden sin `!important`. */
@media (max-width: 620px) {
  .cn-faltas, .cn-tms { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 6px;
    width: 100%; text-align: left; padding: 0 2px; min-height: 22px; }   /* sin `nowrap`: con la letra grande el rótulo baja de línea */
  .cn-tms { grid-template-columns: 1fr auto 6px 18px; }
  .cn-tms:empty { display: none; }
  .cn-faltas b, .cn-tms b { justify-self: end; }
}

/* ═══ La planilla de la mesa (R5) ════════════════════════════════════════════════════════════════════════════════════════
   Una capa encima de la consola (`#plCapa`, hermana de `#flCapa`): cabecera «‹ Mesa · Planilla», un equipo por pestaña con su marcador,
   un renglón por jugador (camiseta, nombre, faltas en hasta cinco casillas, puntos), el historial donde tocar quita, y abajo lo único
   que se pulsa: «Planilla para imprimir». Sigue la línea de front: un solo botón principal, sin menús, los estados en tinte. */
.pl-capa { position: fixed; inset: 0; z-index: 1190; display: none; background: var(--fondo); }   /* debajo de las ventanas (1200) y de la hoja de preguntar (1400) */
.pl-capa.abierta { display: block; }
body.con-pl { overflow: hidden; }
.pl { display: flex; flex-direction: column; height: 100dvh; max-width: 720px; margin-inline: auto; }
.pl-pri, .pl-lado { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pl-cab .pz-esc { flex: none; width: 40px; height: 40px; }
.pl-esth { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.pl-esth .pl-h { margin: 0; }
/* La capa completa adopta la cabecera, el ✕ y el pie de las ventanas (Ventanas 2026); el filete de abajo, solo al correr. */
.pl-cab { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px var(--v-pad) 12px; background: var(--fondo); transition: box-shadow .15s; }
.pl-cab > .tx { flex: 1; min-width: 0; }
.pl-cab > .v-x { margin: -6px -8px 0 0; }
.pl-cab .v-sub { margin: 2px 0 0; }
.pl.corrido .pl-cab { box-shadow: 0 1px 0 var(--linea); }
.pl-cue { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--v-pad) 16px; display: flex; flex-direction: column; gap: 12px; }   /* flex y no grid: en una rejilla de alto fijo las listas (overflow: hidden) se encogían y cortaban jugadores */
.pl-cue > * { flex: none; }
/* Planilla compacta (30-oct): en el computador usa la pantalla (sin el tope de 720 px) en dos columnas: los jugadores y su estadística a la
   izquierda, los tiempos muertos y el historial a la derecha. En el celular sigue siendo una sola columna. */
@media (min-width: 1100px) {
  .pl { max-width: 1440px; }
  .pl-cue { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px); align-content: start; gap: 12px 24px; }
  .pl-cue > :not(.pl-pri, .pl-lado) { grid-column: 1 / -1; }
}
.pl-pie { flex: none; display: flex; justify-content: flex-end; padding: 12px var(--v-pad) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--fondo); }
.pl-pie .btn { min-height: 44px; padding: 0 18px; border-radius: 10px; font: 700 14px/1.15 var(--g-sans); letter-spacing: 0; text-transform: none; }
@media (max-width: 620px) { .pl-pie .btn { flex: 1; } }
.pl-tabs { display: flex; width: 100%; align-self: auto; }
.pl-tabs > button { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 44px; padding: 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pl-tabs > button::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--eq, var(--tinta-3)); }   /* el color del equipo es un punto, nunca una franja */
.pl-tabs > button b { font: 700 15px var(--g-led); margin-left: 4px; color: var(--tinta); }
.pl-h { margin: 8px 0 0; font: 600 12px/1.3 var(--g-sans); letter-spacing: 0; text-transform: none; color: var(--tinta-3); }
.pl-cue .pista { margin: 0; }

.pl-jug, .pl-hist { list-style: none; margin: 0; padding: 0; }   /* filas, sin caja alrededor */
.pl-j { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 48px; gap: 10px; align-items: center; padding: 8px 0; min-height: 56px; }
.pl-j + .pl-j, .pl-hist li + li { border-top: 1px solid var(--linea); }
.pl-j > svg { display: block; width: 34px; height: auto; }
.pl-j.fuera > svg { opacity: .5; }
.pl-n { display: grid; gap: 2px; min-width: 0; }
.pl-n b { font-size: 14px; font-weight: 700; color: var(--tinta); overflow-wrap: anywhere; line-height: 1.2; }
.pl-n small { font-size: 11.5px; line-height: 1.2; color: var(--tinta-2); }
.pl-n small.fu, .pl-n small.dq { color: var(--error); font-weight: 700; }
.pl-n small.am { color: var(--alerta-tx); font-weight: 700; }
.pl-pts { font: 700 26px/1 var(--g-led); color: var(--tinta); text-align: right; min-width: 36px; }
.pl-sin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r); background: var(--hundido-2); color: var(--tinta-2); font: 700 15px var(--g-mono); }
.pl-vacio { padding: 14px 12px; font-size: 13px; color: var(--tinta-2); }

/* Las faltas: una ficha por falta con su letra (P personal · T técnica · t leve · F flagrante · D disruptiva · DQ descalificante · C/B del
   entrenador y el banco), y casillas vacías hasta cinco. Personal es neutra; las técnicas, ámbar; lo que saca del partido, rojo. */
.pl-fs { display: inline-flex; gap: 3px; flex-wrap: nowrap; }
.pl-f { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 4px; font: 800 10.5px/1 var(--g-mono); font-style: normal;
  background: var(--hundido-2); border: 1px solid var(--linea); color: var(--tinta-2); }
.pl-f.t-P { background: var(--alzado); border-color: var(--linea-fuerte); color: var(--tinta); }
.pl-f.t-T1, .pl-f.t-T2, .pl-f.t-C, .pl-f.t-B { background: var(--alerta-bg); border-color: var(--alerta-linea); color: var(--alerta-tx); }
.pl-f.t-FL, .pl-f.t-D { background: var(--error); border-color: var(--error); color: var(--papel); }
.pl-f.t-DI { background: var(--error-bg); border-color: var(--error-linea); color: var(--error); }
.pl-ent .pl-sin { background: none; }
.pl-tm { margin: 0; font-size: 13px; color: var(--tinta-2); }
.pl-tm b { color: var(--tinta); font-weight: 800; }

.pl-ev { display: grid; gap: 2px; width: 100%; min-height: 52px; padding: 8px 0; text-align: left; background: none; border: 0;
  color: inherit; font: inherit; cursor: pointer; }
.pl-ev:hover:not(:disabled) { background: var(--hundido-2); }
.pl-ev:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.pl-ev:disabled { cursor: default; opacity: .75; }
.pl-ev b { font-size: 14px; font-weight: 700; color: var(--tinta); overflow-wrap: anywhere; }
.pl-ev small { font: 500 11px/1.3 var(--g-mono); letter-spacing: .04em; color: var(--tinta-2); }
.pl-error { padding: 14px; border: 1px solid var(--error-linea); background: var(--error-bg); border-radius: var(--r); display: grid; gap: 10px; }
.pl-error p { margin: 0; font-size: 13.5px; color: var(--tinta); }
#uiModalBody:has(> .pr) { max-width: 520px; }

/* Revisar plantillas y «Antes de cerrar» (Ventanas 2026): sin cajas. Cada equipo es un rótulo (punto de 8 px + nombre, a la derecha la
   cuenta) y debajo sus FILAS; un aviso es una fila con el triángulo ámbar, el texto y, si va, «Corregir» chico a la derecha. */
.pr-eq { margin: 0; }
.pr-eq > header { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-bottom: 4px; font: 600 12px/1.3 var(--g-sans); color: var(--tinta-3); }
.pr-eq > header::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--eq, var(--tinta-3)); flex: none; }   /* punto, no franja (gestor 26-oct) */
.pr-eq > header b { font: 700 14px/1.3 var(--g-sans); color: var(--tinta); }
.pr-eq > header small { margin-left: auto; font: 500 12px/1.3 var(--g-sans); color: var(--tinta-3); }
.pr-eq > .fl-cams { margin: 8px 0 4px; }
.pr-cam { cursor: default; min-height: 0; }
.pr-cam.rep .cam-esq { color: var(--alerta-tx); }
.pr-av { list-style: none; margin: 0; padding: 0; }
.pr-am, .pr-ok { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 0; font-size: 14px; line-height: 1.4; color: var(--tinta); }
.pr-av > * + * { border-top: 1px solid var(--linea); }
.pr-am > .fi, .pr-ok > .fi { width: 20px; font-size: 15px; line-height: 1; flex: none; text-align: center; color: var(--alerta-tx); }
.pr-am > .fi::before, .pr-ok > .fi::before { font-family: uicons-solid-rounded !important; }
.pr-ok > .fi { color: var(--ok-tx); }
.pr-am > span { flex: 1 1 160px; min-width: 0; }
.pr-am b { font-weight: inherit; }
.pr-am small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tinta-3); }
.pr-am > .btn { flex: none; }
.pr-av > .rc-cams { padding: 4px 0 12px; border-top: 0; }
.rc-cams .pista { margin: 0 0 8px; font-size: 13px; }

/* Deshacer y Planilla, lado a lado también en el celular (la maqueta): dos botones del mismo peso, sin principal. */
.cn-pl-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 6px 18px 4px; }
.cn-pl-fila .btn { min-height: 46px; width: 100%; gap: 6px; font-weight: 700; min-width: 0; white-space: normal; line-height: 1.15; }   /* «Quitar última falta o tiempo» baja de línea en vez de empujar a «Planilla» fuera de la pantalla */
.cn-pl-fila .btn:disabled { color: var(--tinta-3); background: var(--hundido); cursor: default; }
@media (max-width: 620px) { .cn-pl-fila { padding: 4px 12px 6px; }
  /* «Nada que deshacer» en UNA línea desde 360 px (a 14 px partía en dos y el botón se veía desparejo con «Planilla»); los rótulos largos
     («Quitar última falta o tiempo») siguen bajando de línea, que es lo que se quiere. */
  .cn-pl-fila .btn { font-size: 13px; gap: 5px; padding: 0 8px; } }
/* En 360 y 375 px el texto (140 px) más el dibujito no caben en medio ancho de pantalla: los dos botones (Deshacer y Planilla, para que sigan
   iguales) se quedan con el texto solo. */
@media (max-width: 380px) { .cn-pl-fila .btn > :not(span) { display: none; } }
.cn-estado .btn-secundario { flex: none; }

/* ─── La planilla para imprimir (`#plImp`) ──────────────────────────────────────────────────────────────────────────────
   Papel blanco con tinta oscura en los dos modos: es lo que sale por la impresora (o el PDF). En pantalla es una página que se
   desplaza; con `@media print` es lo ÚNICO que se imprime (todo lo demás, hijo de <body>, se esconde). Sin librerías. */
.pl-imp { position: fixed; inset: 0; z-index: 1250; overflow: auto; background: var(--fondo); }
.pl-imp[hidden] { display: none; }
body.con-plimp { overflow: hidden; }
.ph-barra { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.ph-barra .btn { flex: 1; max-width: 360px; height: 46px; font-weight: 800; }
.ph-barra .btn-icono { margin-left: auto; }
.ph { --ph-papel: #fff; --ph-tinta: #111827; --ph-gris: #4b5563; --ph-linea: #9ca3af; }   /* color fijo: el papel impreso, igual en claro y oscuro */
.ph { box-sizing: border-box; max-width: 820px; margin: 14px auto 28px; padding: 22px 20px 18px; background: var(--ph-papel); color: var(--ph-tinta); font: 400 13px/1.45 var(--g-sans); border: 1px solid var(--ph-linea); }
.ph h1 { margin: 0 0 4px; font: 800 22px/1.15 var(--g-sans); text-transform: none; color: var(--ph-tinta); }
.ph h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--ph-tinta); font: 800 15px/1.2 var(--g-sans); text-transform: none; color: var(--ph-tinta); }
.ph h2 span { font: 800 20px var(--g-sans); }
.ph-sub { margin: 0; color: var(--ph-gris); font-size: 12.5px; }
.ph-marc { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin: 14px 0; padding: 10px 0; border-block: 1px solid var(--ph-linea); font-size: 15px; font-weight: 700; }
.ph-marc b { font: 800 30px/1 var(--g-sans); }
.ph-marc i { font-style: normal; font-size: 24px; color: var(--ph-gris); }
.ph-marc em { flex-basis: 100%; text-align: center; font: 700 11px/1 var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ph-gris); font-style: normal; }
.ph-eqs { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.ph-eqs.uno { grid-template-columns: 1fr !important; }
/* Estadística por jugador (pedido de Juli): tabla ancha, de mayor a menor VAL, con la fila EQUIPO */
.pl-est { display: grid; gap: 6px; }
.pl-est .pista { margin: 0; font-size: 12px; line-height: 1.4; color: var(--tinta-3); }
.pl-est-sc { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
.pl-est table, .ph-est table { width: 100%; border-collapse: collapse; font: 600 12.5px/1.2 var(--g-sans); font-variant-numeric: tabular-nums; }
.pl-est th { padding: 8px 7px; font: 700 10px/1 var(--g-mono); letter-spacing: .06em; color: var(--tinta-2); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--linea); background: var(--papel); }
.pl-est td { padding: 8px 7px; border-bottom: 1px solid var(--linea); white-space: nowrap; color: var(--tinta); }
.pl-est .n { text-align: right; }
.pl-est td:first-child { font: 800 15px/1 var(--g-mono); color: var(--tinta); }
.pl-est td.nom { font-weight: 700; min-width: 120px; }
.pl-est th:nth-child(-n+2), .pl-est td:nth-child(-n+2) { position: sticky; background: var(--papel); z-index: 1; }
.pl-est th:first-child, .pl-est td:first-child { left: 0; min-width: 34px; }
.pl-est th:nth-child(2), .pl-est td:nth-child(2) { left: 34px; box-shadow: 1px 0 0 var(--linea); }
.pl-est tfoot td { font-weight: 800; border-bottom: 0; background: var(--papel); }
.pl-est td.v, .ph-est td.v { font-weight: 800; }
.pl-est td.mas, .ph-est td.mas { color: var(--ok-tx); }
.pl-est td.menos, .ph-est td.menos { color: var(--error); }
.ph-est { margin-top: 16px; break-inside: avoid; }
.ph-est .pista { margin: 4px 0 0; font-size: 10px; color: var(--ph-gris); }
.ph-est h3 { margin: 0 0 4px; font: 800 13px/1.2 var(--g-sans); }
.ph-est th { padding: 3px 3px; font: 700 9px/1.2 var(--g-mono); color: var(--ph-gris); border-bottom: 1px solid var(--ph-tinta); white-space: nowrap; }
.ph-est td { padding: 3px 3px; font-size: 11px; border-bottom: 1px solid var(--ph-linea); }
.ph-est tfoot td { font-weight: 800; border-top: 1px solid var(--ph-tinta); }
.ph table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ph th { text-align: left; font: 700 10px/1.2 var(--g-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ph-gris); padding: 3px 4px; border-bottom: 1px solid var(--ph-tinta); }
.ph td { padding: 3px 4px; border-bottom: 1px solid var(--ph-linea); vertical-align: top; overflow-wrap: anywhere; }
.ph .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
.ph td em { font-style: normal; color: var(--ph-gris); font-size: 11px; }
.ph-eq p { margin: 6px 0 0; font-size: 12px; color: var(--ph-tinta); }
.ph-cabesc { display: flex; align-items: center; gap: 14px; }
.ph-cabesc .pz-esc { flex: none; width: 48px; height: 48px; }
.ph-pie { margin: 18px 0 0; font-size: 10px; color: var(--ph-gris); text-align: center; }
@media (max-width: 620px) {
  .ph { margin: 0; border: 0; padding: 16px 14px; }
  .ph-eqs { grid-template-columns: 1fr; }
}
@page { size: A4; margin: 12mm; }
@media print {
  body.con-plimp > :not(#plImp) { display: none !important; }
  body.con-plimp { overflow: visible !important; background: var(--ph-papel, #fff); }   /* color fijo: el papel */
  .pl-imp { position: static; overflow: visible; background: none; }
  .ph-barra { display: none !important; }
  .ph { margin: 0; padding: 0; border: 0; max-width: none; }
  .ph-eqs { grid-template-columns: 1fr 1fr; }
  .ph-eq, tr { break-inside: avoid; }
}

/* Tiros libres en la mesa oficial (estadisticas.js, EST.tirosLibres): una hoja inferior sobre la mesa, la misma `.est-hoja` de las estadísticas */
/* Celular: «Tiros libres» en su propia fila (en una fila de tres no cabe «Quitar última falta o tiempo»); tablet y PC: los tres en una fila, así la mesa mide lo de siempre. */
.cn-pl-fila .cn-tiros { grid-column: 1 / -1; }
@media (min-width: 621px) { .cn-pl-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cn-pl-fila .cn-tiros { grid-column: auto; } }
.tl-capa { position: fixed; inset: 0; z-index: 1150; }
.tl-capa[hidden] { display: none; }
.tl-hoja { z-index: 2; }
.tl-capa .est-velo { z-index: 1; }
.tl-tiros { display: flex; flex-direction: column; gap: 8px; }
.tl-fila { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.tl-fila .est-ab { min-height: 64px; font-size: 26px; }
.tl-si.on { background: var(--ok-bg); color: var(--ok-tx); box-shadow: inset 0 0 0 1px var(--ok-linea); }
.tl-no.on { background: var(--error-bg); color: var(--error); box-shadow: inset 0 0 0 1px var(--error-linea); }
.tl-fila .est-ab:disabled:not(.on) { opacity: .45; }
.tl-pie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tl-pie .btn { min-height: 48px; width: 100%; font-weight: 700; gap: 6px; }

/* Estadísticas (fase 1) · estadisticas.js · grid-clubes/maquetas/estadisticas
   La segunda persona de la delegación: primero la jugada, luego la camiseta. Botones de 44 px o más, un dedo, sin scroll de lado. */
/* Al entrar a un partido (ui.js, elegirMesa): dos opciones del mismo tamaño, neutras. */
.cn-elige-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e4); display: flex; flex-direction: column; gap: var(--e4); max-width: 720px; width: 100%; margin: 0 auto; }
.cn-elige-par small { display: block; font: 600 11px/1 var(--g-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.cn-elige-par h2 { margin: 8px 0 6px; font: italic 900 26px/1.05 var(--g-firma); text-transform: uppercase; letter-spacing: -.005em; color: var(--tinta); overflow-wrap: anywhere; }
.cn-elige-par h2 i { font-style: normal; font-size: .6em; color: var(--tinta-3); letter-spacing: .1em; }
.cn-elige-par p { margin: 0; font-size: 14px; color: var(--tinta-2); }
.cn-elige-ops { display: grid; grid-template-columns: 1fr; gap: var(--e3); }
@media (min-width: 700px) { .cn-elige-ops { grid-template-columns: 1fr 1fr; } }
.cn-elige { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; min-height: 148px; padding: var(--e4); text-align: left; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--r); color: var(--tinta); }
.cn-elige:active { background: var(--hundido-2); }
.cn-elige b { font: italic 900 20px/1.1 var(--g-firma); text-transform: uppercase; color: var(--tinta); }
.cn-elige span { font-size: 13px; line-height: 1.35; color: var(--tinta-2); }
.est { overflow: hidden; }
.est-cab { gap: 8px; }
.est-cab .cn-volver { min-height: 44px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-red { margin-left: auto; font: 600 11px/1 var(--g-mono, monospace); letter-spacing: .04em; color: var(--tinta-3); white-space: nowrap; }
.est-red.espera { color: var(--alerta); }
.est-ver { min-height: 44px; padding: 0 14px; background: none; border: 1px solid var(--linea-fuerte); border-radius: var(--r); color: var(--tinta); font-weight: 700; font-size: 13px; }
.est-tit { padding: 0 6px; }
.est-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.est-marc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
.est-marc > b { font-size: 13px; font-weight: 800; color: var(--tinta); border-bottom: 3px solid var(--eq, var(--linea-fuerte)); padding-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-marc > b:last-child { text-align: right; }
.est-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.est-pts { font: 700 24px/1 var(--g-led); color: var(--tinta); white-space: nowrap; word-spacing: .3em; }
.est-per { font: 500 10px/1 var(--g-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
.est-per b { font: 700 12px/1 var(--g-led); letter-spacing: normal; color: var(--ok-tx); }
.est-mono { font: 500 11px/1.2 var(--g-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); margin: 0; }
.est-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.est-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.est-ab { min-height: 58px; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--alzado); border: 0; border-radius: 10px; color: var(--tinta); font-weight: 700; font-size: 14px; line-height: 1.15; text-align: center; }
.est-ab small { font: 500 10px/1 var(--g-mono, monospace); color: var(--tinta-2); letter-spacing: .08em; }
.est-ab.f small { color: var(--error); }   /* el fallado se dice con su ✕ rojo, sin franja (gestor 26-oct) */
.est-ab:active, .est-cam:active { background: var(--hundido-2); }
.est-ult { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 12px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); font-size: 12px; color: var(--tinta-2); min-height: 48px; }
.est-ult span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-ult b { color: var(--tinta); }
.est-ult button { flex: none; min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--tinta); font-weight: 700; font-size: 13px; white-space: nowrap; }
.est-ult button:disabled { color: var(--tinta-3); }
.est-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.est-lado { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.est-lado h4 { margin: 0; padding: 2px 2px 4px; font-size: 12px; font-weight: 800; color: var(--tinta); border-bottom: 3px solid var(--eq, var(--linea-fuerte)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-cams { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.est-cams .est-cam { width: auto; min-width: 0; }
.est-quien { min-width: 0; flex: 1; }
.est-quien h3 { margin: 0; font: 700 17px/1.3 var(--g-sans); color: var(--tinta); }
.est-quien p { margin: 2px 0 0; font-size: 13px; color: var(--tinta-2); }
.est-nota { font-size: 11px; line-height: 1.4; color: var(--tinta-3); text-align: center; margin: 0; }
/* La hoja de la jugada y la de tiros libres: la ventana de todas (piezas.css «Ventanas 2026»): el mismo velo; en el celular, hoja desde abajo;
   en el computador, chica (420) al centro. ponytail: sin animación de entrada; la vista entera se repinta en cada toque y la caja volvería a entrar. */
.est-velo { position: fixed; inset: 0; z-index: 40; background: rgba(4,8,18,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }   /* color fijo: el velo de las ventanas */
.est-hoja { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--v-pad) calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
  background: var(--papel); border: 1px solid var(--linea-fuerte); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: var(--sombra-alta); }
@media (min-width: 621px) { .est-hoja { inset: 0; margin: auto; width: calc(100% - 48px); max-width: 420px; height: fit-content; max-height: calc(100dvh - 48px); border-bottom: 1px solid var(--linea-fuerte); border-radius: 14px; padding-bottom: 20px; } }
.est-hc { display: flex; align-items: flex-start; gap: 12px; }
.est-hc > .v-x { width: 44px; height: 44px; margin: -10px -12px 0 auto; }   /* la app de la delegación: todo se toca en 44 px, también el ✕ */
.est-sug { flex: 1; min-width: 0; margin: 0; font: 600 15px/1.35 var(--g-sans); color: var(--tinta); }
.est-sug b { color: var(--alerta); }
.est-fila { display: flex; gap: 6px; flex-wrap: wrap; }
.est-cam { width: 58px; min-height: 44px; padding: 6px 2px 4px; display: flex; flex-direction: column; align-items: center; background: var(--hundido-2); border: 0; border-radius: 10px; color: var(--tinta); }
.est-cam small { max-width: 100%; font-size: 10px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-vacio { font-size: 12px; color: var(--tinta-3); }
.est-no { min-height: 44px; background: var(--alzado); border: 0; border-radius: 10px; color: var(--tinta); font: 700 14px var(--g-sans); }
/* La hoja del partido (segunda vista): dos equipos, líderes y una tabla que cabe en 360 px */
.est-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.est-tab { min-height: 44px; padding: 0 8px; background: none; border: 1px solid var(--linea-fuerte); border-bottom: 3px solid var(--eq, var(--linea-fuerte)); border-radius: var(--r); color: var(--tinta); font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-tab.on { background: var(--papel); border-color: var(--eq, var(--tinta-2)); }
.est-lids { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.est-lid { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
.est-lid b { font-size: 22px; font-weight: 800; line-height: 1; color: var(--tinta); }
.est-lid small { font-size: 11px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-tabla { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
#estTabla { width: 100%; border-collapse: collapse; font-size: 10px; font-variant-numeric: tabular-nums; }
#estTabla th { padding: 7px 1px; font: 500 8px/1.15 var(--g-mono, monospace); letter-spacing: .02em; color: var(--tinta-2); text-align: right; border-bottom: 1px solid var(--linea-fuerte); }
#estTabla td { padding: 8px 1px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--linea); color: var(--tinta); }
#estTabla th:nth-child(-n+2), #estTabla td:nth-child(-n+2) { text-align: left; }
#estTabla th:first-child, #estTabla td:first-child { padding-left: 5px; }
#estTabla th:last-child, #estTabla td:last-child { padding-right: 5px; }
#estTabla td:nth-child(2) { max-width: 46px; padding-left: 3px; overflow: hidden; text-overflow: ellipsis; }
#estTabla td.p { font-weight: 800; font-size: 11px; }
#estTabla tr.tot td { font-weight: 700; border-top: 1px solid var(--linea-fuerte); }
#estTabla tr.fuera td { color: var(--tinta-3); }

/* ═══ Torneos (Torneo v1) ════════════════════════════════════════════════════
   Las tarjetas de Jornadas son las de siempre (`.tj`). Lo propio: los dos botones de la cabecera, la página
   de un torneo (volver, pestañas, filas de jornadas), la tabla de estadísticas y la página pública.
   Solo tokens: sirve en claro y en oscuro. */
.pag-cab > .tn-btns { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
.tn-sec { display: flex; flex-direction: column; gap: 12px; }
.tn-corte { margin-top: 0; }
#torneoBody, #torneoPubBody { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 1040px; margin: 0 auto; }
.tn-volver { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tinta-2); min-height: 32px; }
.tn-centro { display: flex; justify-content: center; }
/* Las pestañas del torneo: las de la jornada (`.ev-tabs`), sin pegarse arriba ni esconderse en el celular. */
.tn-tabs, .jor-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.tn-tabs .nav-btn, .jor-tabs .nav-btn { font: 500 10.5px var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; height: 44px; padding: 0 12px;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; }
.tn-tabs .nav-btn:hover, .jor-tabs .nav-btn:hover { color: var(--tinta); }
.tn-tabs .nav-btn.active, .jor-tabs .nav-btn.active { color: var(--fuerte); border-bottom-color: var(--marca); }
.tn-cue { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tn-herr { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tn-herr .sp { flex: 1; }
.tn-lista { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); overflow: hidden; }
.tn-fila { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--linea); min-width: 0; }
.tn-fila:first-child { border-top: 0; }
.tn-abrir, a.tn-fila { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
a.tn-fila { border-top: 1px solid var(--linea); }
a.tn-fila:first-child { border-top: 0; }
.tn-abrir:hover, a.tn-fila:hover { background: var(--hundido-2); }
.tn-abrir:focus-visible, a.tn-fila:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.tn-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tn-nom b { font-size: 14px; color: var(--tinta); overflow-wrap: anywhere; }
.tn-est { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.tn-pj { flex: none; font-size: 12px; color: var(--tinta-2); min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.tn-flecha { flex: none; color: var(--tinta-3); }
.tn-sacar { flex: none; margin-right: 14px; font-size: 12px; color: var(--tinta-3); min-height: 32px; }
.tn-sacar:hover { color: var(--error); }
@media (pointer: coarse) { .tn-sacar { min-height: 44px; } }
/* La lista para marcar jornadas: con su propio desplazamiento, para que el título y el botón no se vayan. */
.tn-checks { display: flex; flex-direction: column; max-height: min(52vh, 360px); overflow-y: auto; }   /* Ventanas 2026: la lista es de filas, sin caja alrededor */
.tn-chk { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); cursor: pointer; min-height: 52px; }
.tn-chk:first-child { border-top: 0; }
.tn-chk:hover { background: var(--hundido-2); }
.tn-chk input { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--marca); cursor: pointer; }
.tn-chk span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tn-chk b { font-size: 14px; overflow-wrap: anywhere; }
.tn-chk small { font-size: 12px; color: var(--tinta-2); }
/* Estadísticas */
.tn-res { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.tn-fw { position: relative; display: inline-block; max-width: 100%; }
.tn-fbtn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 36px; padding: 0 12px; border-radius: var(--r-full); border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta); font: 500 13px var(--g-sans); cursor: pointer; }
.tn-fbtn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-fbtn i { font-size: 13px; color: var(--tinta-2); flex: none; }
.tn-fbtn[aria-expanded="true"] i { transform: rotate(180deg); }
.tn-fbtn.activo { background: var(--hundido-2); font-weight: 600; }
.tn-fpanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 220px; max-width: calc(100vw - 32px); padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--r); box-shadow: var(--sombra-alta); }
.tn-fop { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--tinta); font: 500 13px var(--g-sans); text-align: left; cursor: pointer; }
.tn-fop:hover { background: var(--hundido-2); }
.tn-fop.on { background: var(--hundido-2); border-color: var(--linea-fuerte); font-weight: 600; }
.tn-fop i { flex: none; font-size: 13px; }
@media (pointer: coarse) { .tn-fbtn { min-height: 44px; } .tn-fop { min-height: 44px; } }
.tn-modos i { font-style: normal; color: var(--tinta-3); padding: 0 6px; }
.tn-lnk { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--tinta-2); text-decoration: underline; cursor: pointer; }
.tn-lnk.on { color: var(--tinta); font-weight: 700; text-decoration: none; }
.tn-lnk:hover { color: var(--tinta); }
.tn-th { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.tn-th:hover, .tn-th.on { color: var(--tinta); }
.tn-th span { font-size: 9px; }
.tn-tabla th.der, .tn-tabla td.der { text-align: right; }
.tn-tabla td.num { font-variant-numeric: tabular-nums; }
.tn-tabla td b { font-weight: 600; }
.tn-jug small { display: block; font-size: 12px; color: var(--tinta-2); }
.tn-cm { display: none !important; }
.tn-nada { text-align: center; color: var(--tinta-2); padding: 22px 14px; }
@media (max-width: 700px) {
  .tn-tabla .tn-nom-m { display: none; }
  .tn-cm { display: block !important; }
  .tn-tabla th, .tn-tabla td { padding-left: 10px; padding-right: 10px; }
  .tn-pj { display: none; }
  .tn-abrir, a.tn-fila { padding: 12px; gap: 10px; }
  .tn-fila { flex-wrap: wrap; }
  .tn-abrir { flex-basis: 100%; padding-bottom: 4px; }
  .tn-sacar { margin: 0 0 6px 12px; }
  .tn-herr .e3-pista { flex-basis: 100%; }
  .tn-herr .sp { display: none; }
  .tn-herr .btn { flex: 1 1 auto; }
}
body.ruta-torneo .lp-pie { display: none; }

/* ═══ Crear: «¿Qué vas a crear?» y «Mis métricas» (Seguir a mi equipo) ═══════════════════════════════
   Paso 0 del asistente: tres opciones del mismo tamaño, neutras y sin marcar (la maqueta `L`). La página de un
   torneo «Mis métricas»: Partidos por fecha con la fila calma (una línea, solo «en vivo» lleva color). */
.stp-ind[hidden] { display: none; }
.cr-ops { padding-bottom: 16px; }
.cr-ops .op { align-items: center; gap: 16px; padding: 14px 16px; background: var(--papel); }
.cr-ops .op:hover { border-color: var(--tinta-3); }
.cr-ico { flex: none; width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: var(--alzado); color: var(--tinta); }
.cr-tx { flex: 1; min-width: 0; display: block; }
.cr-tit { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.cr-tit i { font: italic 900 20px/1.15 var(--g-firma); letter-spacing: -.005em; color: var(--tinta); text-transform: uppercase; }   /* la firma de la marca 2026: Saira negra inclinada */
.cr-tit b { font-size: 13px; }
.cr-tx p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); }
.cr-tx small { display: block; margin-top: 6px; font-size: 9.5px; color: var(--tinta-3); }
.cr-cat { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.cr-cat .campo { flex: 1; min-width: 0; margin: 0; }
.cr-cat .btn { flex: none; }
.stp .cr-cat + .eqs, .stp .cr-cat + .pista { margin-top: 0; }
@media (max-width: 600px) { .cr-ico { width: 48px; height: 48px; } .cr-ops .op { gap: 12px; padding: 12px; } }

.tn-cats-l { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.tn-cat-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-sm); font-size: 13.5px; }
.mp-rej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-rej .ancho { grid-column: 1 / -1; }
#mpLista { margin-top: 10px; }
#mpCuenta { margin: 8px 0 0; }
.mp-color { display: flex; align-items: center; gap: 12px; }
.mp-color input[type="color"] { width: 48px; min-width: 48px; height: 40px; padding: 2px; cursor: pointer; }
.mp-color .pista { margin: 0; }
.mp-decl { margin-top: 10px; }
.mp-decl[hidden] { display: none; }
.mp-vacio { padding: 8px 16px; }
.mp-dia { display: flex; flex-direction: column; gap: 8px; }
.mp-fecha { margin: 8px 0 0; font-weight: 500; }
.mp-lista { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); overflow: hidden; }
.mp-fila { display: grid; grid-template-columns: minmax(0, 1fr) 124px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 13px 18px;
  border: 0; border-top: 1px solid var(--linea); background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.mp-fila:first-child { border-top: 0; }
.mp-fila:hover { background: var(--hundido-2); }
.mp-fila:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.mp-eq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mp-loc { justify-content: flex-end; text-align: right; }
.mp-n { font: 600 14.5px var(--g-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mp-fila.fin .mp-n { color: var(--tinta-2); }
.mp-fila .esc.mp-esc { width: 26px; height: 26px; flex: none; }
.mp-ce { text-align: center; line-height: 1.25; min-width: 0; }
.mp-ce b { display: block; font: 700 16px var(--g-mono); font-variant-numeric: tabular-nums; }
.mp-fila.fin .mp-ce b { color: var(--tinta-2); }
.mp-ce small { display: block; margin-top: 2px; font-size: 11px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-vivo { color: var(--error); font-weight: 600; }
@media (max-width: 700px) {
  .mp-fila { grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); gap: 8px; padding: 12px 12px; }
  .mp-fila .esc.mp-esc { width: 22px; height: 22px; }
  /* En el celular el nombre baja a dos líneas: «Club Norte U15» y «Club Norte U13» no pueden quedar iguales con «…». */
  .mp-n { font-size: 13px; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mp-ce small { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  .mp-ce b { font-size: 15px; }
  .mp-eq { gap: 8px; }
}

/* ═══ Jornadas por dentro (Copa LAB) ═══════════════════════════════════════════
   La cabecera es una banda con la imagen de la jornada o el fondo genérico, oscurecidos; y la fila de
   partido es la «fila calma»: una línea, el centro dice una sola cosa, solo «● en vivo» en rojo. */
.ev-fila { margin-top: 12px; padding: 22px 24px; min-height: 150px; align-items: flex-end; border-radius: 14px; box-sizing: border-box;
  background: linear-gradient(90deg, var(--banda-1) 30%, var(--banda-2)), var(--ev-fondo, url('img/coliseo.webp?v=20261020b')) center / cover no-repeat; }
.ev-fila .ev-meta { color: var(--banda-tx-2); }
.ev-fila .ev-nom { color: var(--banda-tx); font-size: 44px; }
.ev-fila .chip-j { color: var(--banda-tx-2); border: 0; padding: 0; background: none; }
.ev-fila .chip-j.cj-juego { color: var(--ok-tx); }
.ev-fila .chip-j.ev-vivo { color: var(--banda-viva); }
.ev-fila .candado { color: var(--banda-tx-2); border-color: var(--banda-lin); }
.ev-acc .btn, .ev-acc .btn.ev-compartir { gap: 8px; width: auto; height: 38px; padding: 0 14px; font-size: 13px; }
.ev-acc .btn svg { flex: none; }
@media (pointer: coarse) { .ev-acc .btn.ev-compartir { width: auto; height: 38px; } }
@media (max-width: 620px) {
  /* Celular: la imagen y el nombre arriba (el nombre sube a 2 líneas, sin «…» que lo corte) y los dos botones debajo, con su texto. */
  .ev-fila { padding: 16px; min-height: 120px; flex-wrap: wrap; row-gap: 12px; }
  .ev-fila .ev-tx { flex: 1 1 calc(100% - 74px); }
  .ev-fila .ev-nom { font-size: 26px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ev-fila .ev-meta { white-space: normal; }
  .ev-fila .chip-j { white-space: normal; }
  .ev-acc { flex: 1 1 100%; }
  .jor-herr { flex-wrap: wrap; row-gap: 10px; }
  .jor-herr .e3-pista { flex: 1 1 100%; }
  .jor-herr .sp { display: none; }
}
.fp.fp-calma { grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); grid-template-areas: none; gap: 10px; padding: 12px 16px; row-gap: 4px; }
.fp-calma .eq { gap: 8px; }
.fp-calma .eq.i { flex-direction: row-reverse; justify-content: flex-start; text-align: right; grid-area: auto; }
.fp-calma .eq.d { flex-direction: row; justify-content: flex-start; text-align: left; grid-area: auto; }
.fp-calma .esc { width: 22px; height: 22px; font-size: 8px; padding: 0; }
.fp-calma .eq-tx b { font: 600 14px var(--g-sans); }
.fp-calma .fp-c { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.fp.fp-calma .m { display: block; font: 800 17px/1.2 var(--g-mono); color: var(--tinta); }
.fp.fp-calma .m.hora { font-weight: 600; font-size: 15px; }
.fp-calma .fp-sub { font: 500 11px/1.2 var(--g-sans); color: var(--tinta-3); white-space: nowrap; }   /* más ancho que la columna: se centra y se sale parejo a los lados */
.fp-calma .fp-vivo { color: var(--g-rojo-tx); }
.fp-calma .fp-np { grid-column: 1 / -1; text-align: center; }
.hz-grid { display: block; }
.hz-lado { display: none; }
@media (min-width: 1100px) {
  .hz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
  .hz-lado { display: flex; flex-direction: column; gap: 14px; }
  .hz-lado .opc { display: none; }
  .hz-lado .tabla-caja .destacar td:first-child { box-shadow: none; }
  .hz-lado .fp.fp-calma { cursor: pointer; }
}
.hz-h { padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.hz-tabla { display: flex; flex-direction: column; gap: 8px; }

/* Jornadas › Horario (M-horario / G-horario, 20-oct): la semana de mi club. Computador: siete columnas, una por día.
   Celular: la tira de siete días y los partidos del día elegido. Cada partido es un recuadro ENTERO teñido por su torneo
   (a / b / c; las sueltas neutras, n): nada de franjas. Solo «En vivo» va en rojo. */
.hr { padding: 0; overflow: hidden; }
.hr-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.hr-quien { flex: 1; min-width: 0; margin: 0; }
.hr-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.hr-rango { font: 700 12.5px var(--g-sans); color: var(--tinta); white-space: nowrap; }
.hr-fl { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--tinta-2); cursor: pointer; }
.hr-fl:hover { background: var(--hundido-2); color: var(--tinta); }
.hr-tira, .hr-hoy { display: none; }
.hr-sem { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hr-col { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px 14px; border-left: 1px solid var(--linea); min-height: 220px; }
.hr-col:first-child { border-left: 0; }
.hr-cab { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 4px; }
.hr-cab b { font: italic 900 26px/1 var(--g-firma); color: var(--tinta); }
.hr-cab b.hoy { color: var(--g-rojo-tx); }
.hr-libre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--tinta-3); }
.hr-p { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: var(--hundido-2); color: var(--tinta); font: inherit; }
.hr-p:hover { border-color: var(--tinta-3); }
.hr-p:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.hr-p.t-a { background: color-mix(in srgb, var(--marca) 16%, var(--papel)); border-color: color-mix(in srgb, var(--marca) 45%, var(--papel)); }
.hr-p.t-b { background: color-mix(in srgb, var(--azul) 16%, var(--papel)); border-color: color-mix(in srgb, var(--azul) 45%, var(--papel)); }
.hr-p.t-c { background: color-mix(in srgb, var(--ok) 14%, var(--papel)); border-color: color-mix(in srgb, var(--ok) 40%, var(--papel)); }
.hr-p.fin { opacity: .7; }
.hr-p1 { display: flex; align-items: baseline; gap: 6px; }
.hr-hh { font: 700 14px var(--g-mono); color: var(--tinta); }
.hr-cc { font: 500 10.5px var(--g-mono); color: var(--tinta-2); }
.hr-est { display: none; margin-left: auto; align-items: center; gap: 6px; font: 600 10.5px var(--g-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.hr-est i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); }
.hr-est.ok { color: var(--ok-tx); } .hr-est.ok i { background: var(--ok-tx); }
.hr-est.vivo { display: inline-flex; color: var(--g-rojo-tx); } .hr-est.vivo i { background: var(--vivo); }
.hr-vs { font-size: 13px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.hr-sc { font-family: var(--g-mono); font-weight: 700; }
.hr-x { color: var(--tinta-2); font-weight: 600; }
.hr-donde { font-size: 11.5px; color: var(--tinta-2); line-height: 1.35; }
.hr-largo { display: none; }
@media (max-width: 720px) {
  .hr { background: none; border: 0; box-shadow: none; overflow: visible; }
  .hr-top { padding: 0 0 10px; border: 0; }
  .hr-quien { display: none; }
  .hr-tira { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
  .hr-d { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; border-radius: 10px; border: 1px solid var(--linea);
    background: var(--papel); color: var(--tinta); cursor: pointer; font: inherit; min-width: 0; }
  .hr-d b { font: italic 900 21px/1 var(--g-firma); }
  .hr-d .rot { font-size: 9px; letter-spacing: .12em; }
  .hr-d.on { background: var(--marca); border-color: var(--marca); color: #fff; }   /* color fijo: texto sobre el rojo de la marca */
  .hr-d.on .rot { color: #fff; }   /* color fijo: ídem */
  .hr-pts { height: 6px; display: flex; gap: 3px; }
  .hr-pts i { width: 5px; height: 5px; border-radius: 50%; background: var(--tinta-3); }
  .hr-pts i.t-a { background: var(--g-rojo-tx); } .hr-pts i.t-b { background: var(--azul); } .hr-pts i.t-c { background: var(--ok-tx); }
  .hr-d.on .hr-pts i { background: #fff; }   /* color fijo: ídem */
  .hr-hoy { display: block; margin: 12px 0 10px; }
  .hr-sem { display: block; }
  .hr-col { display: none; border: 0; padding: 0; min-height: 0; gap: 10px; }
  .hr-col.on { display: flex; }
  .hr-cab { display: none; }
  .hr-libre { padding: 24px 0; }
  .hr-p { padding: 12px 14px; gap: 6px; }
  .hr-hh { font-size: 15px; }
  .hr-cc { display: none; }
  .hr-est { display: inline-flex; }
  .hr-vs { font-size: 15px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
  .hr-largo { display: inline; }
  .hr-vs.hr-largo { display: flex; }
  .hr-corto { display: none; }
  .hr-donde { font-size: 12.5px; }
}

/* ── Configuración › Tu club (maquetas M-config / I-config, 20-oct) ──────────────────────────────────────────────
   Cuatro bloques separados por una línea (Información · Escudo y colores · Banner · Camiseta) y UN «Guardar» fijo al
   pie, como el pie de las ventanas (`.modal-acciones`): el relleno del cuerpo (20 / 16 px) queda dentro del pie. */
.tc-blq { padding: 18px 0; border-top: 1px solid var(--linea); }
.tc-blq:first-of-type { border-top: 0; padding-top: 4px; }
.aj .tc-t { margin: 0 0 12px; font: 800 15px/1.3 var(--g-sans); color: var(--tinta); text-transform: none; letter-spacing: 0; }
.tc-t small { font: 500 12px var(--g-sans); color: var(--tinta-3); margin-left: 6px; }
.tc-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aj-sec .tc-info .campo + .campo { margin-top: 0; }
.tc-esc { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tc-esc .cfg-esc .esc { width: 64px; height: 64px; }
.tc-sep { width: 1px; height: 40px; background: var(--linea); }
.tc-col { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tc-col small { display: flex; flex-direction: column; font-size: 12px; color: var(--tinta-2); line-height: 1.3; }
.tc-col .mono { font: 500 11px var(--g-mono); color: var(--tinta-3); }
.tc-col input[type=color] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 8px; background: none; cursor: pointer; }
.tc-col input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.tc-col input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.tc-col input:disabled { cursor: default; }
.tc-ban { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: start; }
/* Sin banner propio, el coliseo de siempre: es lo que sale en las jornadas sin imagen. */
.tc-ban-img { position: relative; aspect-ratio: 16 / 5; border-radius: 10px; overflow: hidden; border: 1px solid var(--linea-fuerte);
  background: url('img/coliseo.jpg') center / cover var(--hundido-2); }
/* La zona segura: 62,5 % del centro (lo que se ve en un celular de 390 px con la imagen a lo alto). */
.tc-segura { position: absolute; inset: 0 18.75%; border: 2px dashed #ffffffbf; border-block: 0;   /* color fijo: guía blanca sobre la foto */
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.tc-segura .rot { color: #fff; background: #0a1426b3; padding: 4px 8px; border-radius: 4px; }   /* color fijo: rótulo sobre la foto */
.tc-ban-tx { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--tinta-2); line-height: 1.5; }
.tc-ban-tx b { color: var(--tinta); font-size: 13px; margin-bottom: 2px; }
.tc-bts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tc-camf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tc-cams { display: grid; grid-template-columns: repeat(4, 92px); gap: 10px; }
.tc-cam { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 10px;
  border: 1px solid var(--linea); background: none; color: var(--tinta-2); cursor: pointer; font: inherit; }
.tc-cam small { font-weight: 700; font-size: 12px; }
.tc-cam[aria-pressed="true"] { border-color: var(--marca); background: var(--hundido-2); color: var(--tinta); }
.tc-cam:disabled { cursor: default; }
.tc-cre { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tc-cre small { color: var(--tinta-2); font-size: 12px; }
.tc-pie { position: sticky; bottom: -20px; z-index: 1; display: flex; justify-content: flex-end; background: var(--papel);
  border-top: 1px solid var(--linea); margin: 8px 0 -20px; padding: 12px 0 14px; }
.tc-pie .btn { min-height: 44px; padding: 0 var(--e5); }
@media (max-width: 619px) {
  .tc-info { grid-template-columns: minmax(0, 1fr); }
  .tc-t small { display: block; margin: 4px 0 0; }
  .tc-sep, .tc-col small, .tc-segura .rot, .tc-ban-tx b { display: none; }
  .tc-esc { gap: 12px; flex-wrap: nowrap; }
  .tc-ban { grid-template-columns: minmax(0, 1fr); }
  .tc-cams { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .tc-cam { padding: 8px 2px 6px; }
  .tc-cam svg { width: 44px; height: auto; }
  .tc-cam small { font-size: 10.5px; }
  .tc-camf { gap: 10px; }
  .tc-pie { bottom: -16px; margin-bottom: -16px; }
  .tc-pie .btn { flex: 1; }
}

/* Configuración → Clubes en GRID (P3): una fila por club, el segmentado Prueba · Premium a la derecha;
   en celular baja debajo del nombre. Solo tokens: sirve en claro y oscuro. */
.cl-lista { display: flex; flex-direction: column; }
.cl-fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e2) var(--e3);
  padding: 10px 0; border-bottom: 1px solid var(--linea); }
.cl-fila:last-child { border-bottom: 0; }
.cl-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.cl-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e3); }
.cl-quien b { color: var(--tinta); font-size: 14px; overflow-wrap: anywhere; }
.cl-socio { color: var(--tinta-3); font-size: 12px; font-weight: 700; }
.cl-quien span { color: var(--tinta-3); font-size: 12px; line-height: 1.45; }

/* ═══ Ventanas 2026 · LA ventana de GRID (espec aprobada por el gestor 26-oct: docs/superpowers/plans/2026-10-26-grid-ventanas-espec.md) ═══
   Una caja, un título, un ✕, un pie y una entrada para todas: #uiModal, #formModal, #pruebaModal, #cfgModal, #loginModal, la hoja de
   opciones (abrirHoja, preguntar), la capa de faltas (.fl), la ayuda de las estadísticas (.fb-ventana) y la grada (.gd-ven).
   Dentro, FILAS con un filete entre ellas; nada de cajas dentro de cajas. En el celular (≤ 620 px) toda ventana es una hoja que sube
   desde abajo. Salida sin JS: `transition` + `display … allow-discrete` (ponytail: Safari < 17.4 las cierra de golpe). */
body { --v-pad: 20px; --v-in: cubic-bezier(.2,.8,.2,1); --v-out: cubic-bezier(.4,0,1,1); }   /* medidas de la ventana, no colores: en body (los tokens de color viven en tokens.css) */
@media (max-width: 620px) { body { --v-pad: 16px; } }

/* El velo único (color fijo: oscurece igual en los dos modos). */
.modal-fondo, .hoja-fondo, .fl-capa, .fb-velo, .gd-velo { background: rgba(4,8,18,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }   /* color fijo: el velo */
.modal-fondo, .hoja-fondo {
  display: none; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .16s var(--v-out), display .16s allow-discrete; }
.modal-fondo.open, .hoja-fondo.abierta, .fl-capa.abierta, .fb-velo.abierta, .gd-velo:not([hidden]) { display: flex; opacity: 1; animation: v-velo .2s ease-out both; }
/* Mientras sale (sin `.open`) el velo sigue en pantalla 0,16 s: que no se coma los toques. */
.modal-fondo:not(.open), .hoja-fondo:not(.abierta) { pointer-events: none; }

/* La caja. Ancho: mediana 520 (por defecto), chica 420 (hoja, preguntar, faltas), grande 760 (tablas, anotar por cancha). */
.ventana, .fl, .fb-ventana, .gd-ven {
  width: 100%; max-height: calc(100dvh - 48px); margin: auto; position: relative;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linea-fuerte); border-radius: 14px; box-shadow: var(--sombra-alta); outline: none; }
.ventana { opacity: 0; transform: translateY(6px); transition: opacity .16s var(--v-out), transform .16s var(--v-out); }
.open > .ventana, .abierta > .ventana, .fl-capa.abierta > .fl, .fb-velo.abierta > .fb-ventana, .gd-velo > .gd-ven { opacity: 1; transform: none; animation: v-entra .22s var(--v-in) both; }
/* El ancho, con poca fuerza (`:where`): las ventanas propias (configuración, acceso, asistente, camisetas) dicen el suyo. */
.modal:where(#uiModalBody, #formModalBody, #pruebaModalBody) { max-width: 520px; }
.hoja.ventana, .fl { max-width: 420px; }
.ventana.grande, .modal:has(> .anc) { max-width: 760px; }

/* La cabecera: título 700 17 (el único estilo de título), subtítulo 13 gris, ✕ redondo de 36 sin fondo. */
.v-tit, .ventana > h3, .ventana > :is(.pl-fm, .tvp, .resultado, .anc, .pr, .msa) > h3, .ventana .det-cab h3, .hoja-tit, .fl-cab .tx > b, .fb-vcab h3, .gd-ven h2, .ventana .ficha-cab h3 {
  margin: 0; font: 700 17px/1.3 var(--g-sans); color: var(--tinta); text-transform: none; letter-spacing: 0; font-style: normal; }
.ventana h3 { text-transform: none; }
.ventana > h3 + .pista, .ventana > :is(.pl-fm, .tvp, .resultado, .anc, .pr, .msa) > h3 + .pista, .v-sub { margin: -8px 0 12px; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.v-x { width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tinta-2);
  display: grid; place-items: center; cursor: pointer; font-size: 16px; line-height: 1; transition: background .15s, color .15s; min-width: 0; min-height: 0; }
.v-x:hover, .v-x:focus-visible { background: var(--hundido-2); color: var(--tinta); }
.v-x i { font-size: 16px; line-height: 1; display: block; }
.v-x[hidden] { display: none; }

/* Las ventanas que arma quien llama (#uiModal, #formModal, #pruebaModal): la caja corre; el título y el ✕ se pegan arriba y el pie abajo. */
:is(#uiModalBody, #formModalBody, #pruebaModalBody):not(:has(> :is(.stp, .cam-ven, .jw))) { padding: var(--v-pad); overflow-y: auto; overscroll-behavior: contain; }
:is(#uiModalBody, #formModalBody, #pruebaModalBody):not(:has(> :is(.stp, .cam-ven, .jw))) > .x-ventana {
  position: sticky; top: calc(12px - var(--v-pad)); right: auto; z-index: 2; display: grid; margin: calc(12px - var(--v-pad)) calc(12px - var(--v-pad)) -48px auto; }   /* -48 = el ✕ (36) + 12: el título sube a su sitio */
:is(#uiModalBody, #formModalBody, #pruebaModalBody):not(:has(> :is(.stp, .cam-ven, .jw))) > :is(h3, .ficha-cab),
:is(#uiModalBody, #formModalBody, #pruebaModalBody):not(:has(> :is(.stp, .cam-ven, .jw))) > .det > .det-cab,
:is(#uiModalBody, #formModalBody, #pruebaModalBody):not(:has(> :is(.stp, .cam-ven, .jw))) > :is(.pl-fm, .tvp, .resultado, .anc, .pr, .msa) > h3 {
  position: sticky; top: calc(-1 * var(--v-pad)); z-index: 1; background: var(--papel);
  margin: calc(-1 * var(--v-pad)) calc(-1 * var(--v-pad)) 12px; padding: 18px 56px 12px var(--v-pad); transition: box-shadow .15s; }
/* El filete bajo la cabecera, solo cuando el cuerpo ya corrió (ui.js pone `.corrido`). */
.ventana.corrido > :is(h3, .ficha-cab), .ventana.corrido > .det > .det-cab, .ventana.corrido > :is(.pl-fm, .tvp, .resultado, .anc, .pr, .msa) > h3, .hoja.corrido .hoja-cab { box-shadow: 0 1px 0 var(--linea); }
.x-ventana { position: absolute; top: 12px; right: 12px; z-index: 2; }
/* Con el dedo, el ✕ se toca en 44 px (la regla de toque de GRID); el círculo y el icono se ven igual. */
@media (pointer: coarse) { .v-x { width: 44px; height: 44px; } .hoja-cab > .v-x, .fl-cab > .v-x, .fb-vcab > .v-x, .stp-cab > .v-x, .cfgw-cab > .v-x, .gd-ven-cab > .v-x, .pl-cab > .v-x, .ms-ph > .v-x, .est-hc > .v-x { margin-top: -10px; margin-right: -12px; margin-bottom: -4px; }
  :is(#uiModalBody, #formModalBody, #pruebaModalBody):not(:has(> :is(.stp, .cam-ven, .jw))) > .x-ventana { top: calc(8px - var(--v-pad)); margin: calc(8px - var(--v-pad)) calc(8px - var(--v-pad)) -52px auto; }
  .x-ventana { top: 8px; right: 8px; } }

/* El pie: filete arriba, mismo fondo, botones a la derecha, UN primario a la derecha; lo que destruye, a la izquierda en texto rojo. */
.modal-acciones { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px;
  position: sticky; bottom: calc(-1 * var(--v-pad)); z-index: 1; background: var(--papel); border-top: 1px solid var(--linea); border-radius: 0;
  margin: 16px calc(-1 * var(--v-pad)) calc(-1 * var(--v-pad)); padding: 12px var(--v-pad); }
.modal-acciones > :is(.btn-primario, .btn-claro) { order: 1; }
.fm-porque { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--tinta-2); text-align: right; }   /* Ola 2 · #7: por qué «Guardar» está apagado */
.modal-acciones > .btn-peligro { order: -1; margin-right: auto; }

/* Los botones dentro de una ventana: 44 de alto, radio 10, 700 14, sin mayúsculas, sin filete, color sólido. */
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .btn { min-height: 44px; height: auto; padding: 0 18px; border: 0; border-radius: 10px;
  font: 700 14px/1.15 var(--g-sans); letter-spacing: 0; text-transform: none; white-space: normal; text-align: center; }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) :is(.btn-plano, .btn-secundario) { background: var(--alzado); color: var(--tinta); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) :is(.btn-plano, .btn-secundario):hover:not(:disabled) { background: var(--linea-fuerte); color: var(--tinta); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .btn-peligro { background: none; color: var(--error); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .btn-claro { background: var(--marca); color: var(--sobre-marca); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .btn-claro:hover:not(:disabled) { background: var(--marca-osc-2); }
/* Un aviso dentro de una ventana es una FILA: icono del tono + texto en tinta, sin fondo ni filete. */
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .aviso { background: none; border: 0; border-radius: 0; padding: 8px 0; gap: 12px; color: var(--tinta); font-size: 14px; }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .aviso > .fi { width: 20px; flex: none; text-align: center; font-size: 15px; }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .aviso > .fi::before { font-family: uicons-solid-rounded !important; }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .aviso-alerta > .fi { color: var(--alerta-tx); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .aviso-error > .fi, :is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .aviso-error { color: var(--error); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .aviso-ok > .fi { color: var(--ok-tx); }
/* Tablas dentro de una ventana: sin caja alrededor ni cabecera teñida; quedan los filetes de sus filas. */
:is(.ventana, .fb-ventana, .gd-ven) .tabla-caja { border: 0; border-radius: 0; background: none; }
:is(.ventana, .fb-ventana, .gd-ven) thead th { background: none; }
/* El detalle del partido: cada equipo es una fila (punto/escudo, nombre, marcador), sin caja teñida. */
.ventana .det-eq { background: none; border-radius: 0; padding: 8px 0; margin: 0; min-height: 52px; }
.ventana .det-eq + .det-eq { border-top: 1px solid var(--linea); }
/* Camisetas y tarjetas de elección dentro de una ventana: superficie de botón, sin filete; la elegida con un aro fino. */
:is(.ventana, .fb-ventana, .gd-ven) .cam { border: 0; background: var(--hundido-2); border-radius: 10px; }
html[data-tema="claro"] :is(.ventana, .fb-ventana, .gd-ven) .cam { background: var(--alzado); }
.ventana :is(.mt-op, .mt-eq) { border: 0; background: var(--hundido-2); border-radius: 10px; }
html[data-tema="claro"] .ventana :is(.mt-op, .mt-eq) { background: var(--alzado); }
.ventana :is(.mt-op, .mt-eq)[aria-checked="true"] { background: var(--alzado); box-shadow: inset 0 0 0 1px var(--tinta-2); }
html[data-tema="claro"] .ventana :is(.mt-op, .mt-eq)[aria-checked="true"] { background: var(--papel); }
/* La nota de una ventana: 13,5 px gris (la `.nota` de la maqueta). */
.ventana .pista { font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); }
/* Los rótulos (`.rot`) dentro de una ventana: el rótulo de sección (600 12 gris), sin mayúsculas ni mono. */
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .rot { font: 600 12px/1.3 var(--g-sans); letter-spacing: 0; text-transform: none; color: var(--tinta-3); }
/* Las fichas de estado dentro de una ventana son texto gris, sin pastilla. */
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) :is(.chip, .chip-j) { background: none; border: 0; padding: 0; min-height: 0; border-radius: 0; font: 500 12px/1.3 var(--g-sans); letter-spacing: 0; text-transform: none; color: var(--tinta-3); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .btn-peligro:hover:not(:disabled) { background: var(--error-bg); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .btn-sm { min-height: 32px; height: 32px; padding: 0 12px; font-size: 13px; }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .btn .fi { font-size: 14px; }
/* El botón de icono (editar, quitar) dentro de una ventana: sin filete, como el ✕. */
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .btn-icono { border: 0; border-radius: 10px; background: none; }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .btn-icono:hover { background: var(--hundido-2); }
/* Iconos rellenos (fi-sr) en los botones, las opciones y el ✕ de las ventanas: las dos fuentes de UIcons comparten los puntos de código,
   así que basta cambiar la familia (ponytail: hand/mask/500px no están en la sólida; ninguno va en un botón de ventana). */
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) :is(.btn, .hoja-op, .v-x) i[class*="fi-rr-"]::before, .v-x i[class*="fi-rr-"]::before { font-family: uicons-solid-rounded !important; }

/* Contenido: filas, no cajas. */
.fila { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 0; }   /* 52 de contenido + 10 arriba y abajo, como la maqueta */
.fila + .fila { border-top: 1px solid var(--linea); }
.fila > .tx { flex: 1; min-width: 0; }
.fila .tx small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tinta-3); }
.fila > .fi { width: 20px; font-size: 15px; line-height: 1; flex: none; text-align: center; color: var(--tinta-3); }
.fila > .fi::before { font-family: uicons-solid-rounded !important; }
.fila .cifra { font: 700 15px/1 var(--g-mono); color: var(--tinta); white-space: nowrap; }
.fila.alerta > .fi { color: var(--alerta-tx); } .fila.error > .fi { color: var(--error); } .fila.bien > .fi { color: var(--ok-tx); }
.v-filas { list-style: none; margin: 0; padding: 0; }
.fila .tx b { font-weight: 600; }
/* Cajas de la pantalla que caen dentro de una ventana (`.caja2`, la lista o la tabla): sin filete ni fondo; quedan sus filas. */
:is(.ventana, .fb-ventana, .gd-ven) .caja2 { border: 0; background: none; border-radius: 0; }
.sec { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-bottom: 4px; font: 600 12px/1.3 var(--g-sans); color: var(--tinta-3); text-transform: none; letter-spacing: 0; }
.sec:first-child { margin-top: 4px; }
.sec .eq { font-size: 14px; font-weight: 700; color: var(--tinta); }
.sec .der { margin-left: auto; font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--eq, var(--tinta-3)); flex: none; display: inline-block; }

/* Campos dentro de una ventana: rótulo arriba con el estilo del rótulo de sección; entrada de 44, radio 10, `--hundido` con filete. */
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) :is(.campo > label, .etiqueta) { font: 600 12px/1.3 var(--g-sans); letter-spacing: 0; text-transform: none; color: var(--tinta-3); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) :is(input:not([type=checkbox], [type=radio], [type=color], [type=range], [type=file]), select, textarea) { min-height: 44px; border-radius: 10px; background: var(--hundido); border: 1px solid var(--linea-fuerte); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .campo { gap: 8px; }

/* Fichas de elección (el segmentado `.seg` dentro de una ventana): 40 px, radio 10, sin filete y sin caja alrededor; la elegida en
   `--alzado` con un aro fino de `--tinta-2`. «Otra…» / «Nuevo rival» son la misma ficha. El color de un equipo, un punto de 8 px. */
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .seg { gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .seg > button { min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--hundido-2); color: var(--tinta-2); font: 600 13.5px var(--g-sans); }
html[data-tema="claro"] :is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .seg > button { background: var(--alzado); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .seg > button:hover { color: var(--tinta); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .seg > button[aria-pressed="true"] { background: var(--alzado); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta-2); }
html[data-tema="claro"] :is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .seg > button[aria-pressed="true"] { background: var(--papel); }
:is(.ventana, .fl, .fb-ventana, .gd-ven, .est-hoja) .seg > button[style*="--sw"]::before { width: 8px; height: 8px; border-radius: 50%; }
.fl .seg > button { min-height: 36px; font-size: 13px; }

/* La hoja de opciones (abrirHoja, preguntar): cabecera fija, filas de borde a borde, pie fijo. */
.hoja { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.hoja-cab { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px var(--v-pad) 12px; }
.hoja-cab > .v-x { margin: -6px -8px 0 0; }
.hoja-cue { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.hoja-cue:empty { padding: 0; }
.hoja-op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px var(--v-pad); margin: 0;
  background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: var(--tinta); font: 500 14px/1.4 var(--g-sans); }
.hoja-op + .hoja-op { border-top: 1px solid var(--linea); }
.hoja-op:hover, .hoja-op:focus-visible { background: color-mix(in srgb, var(--fuerte) 5%, transparent); }
.hoja-op > i { width: 20px; font-size: 15px; line-height: 1; color: var(--tinta-3); flex: none; text-align: center; }
.hoja-op > i::before { font-family: uicons-solid-rounded !important; }
.hoja-op b { font-weight: 600; display: block; }
.hoja-op em { display: block; font-style: normal; margin-top: 2px; font-size: 12.5px; color: var(--tinta-3); }
.hoja-op.peligro, .hoja-op.peligro i { color: var(--error); }
.hoja-sep { border: 0; border-top: 1px solid var(--linea); margin: 0; }
.hoja-rot { margin: 16px var(--v-pad) 0; padding: 0 0 4px; font: 600 12px/1.3 var(--g-sans); letter-spacing: 0; text-transform: none; color: var(--tinta-3); }
.hoja-rot:first-child { margin-top: 4px; }
.hoja-nota { margin: 0 var(--v-pad) 8px; color: var(--tinta-2); font-size: 14px; line-height: 1.5; }
.hoja > .modal-acciones { position: static; flex: none; margin: 0; }

/* Celular: hoja que sube desde abajo, para TODAS. El pie sigue en fila, cada botón `flex:1`. */
@media (max-width: 620px) {
  .modal-fondo, .hoja-fondo, .fl-capa, .fb-velo, .gd-velo { align-items: flex-end; justify-content: center; padding: 0; }
  .ventana, .fl, .fb-ventana, .gd-ven { max-width: none !important; max-height: 92dvh; margin: auto 0 0; border-radius: 14px 14px 0 0; border-bottom: 0; }
  .open > .ventana, .abierta > .ventana, .fl-capa.abierta > .fl, .fb-velo.abierta > .fb-ventana, .gd-velo > .gd-ven { animation-name: v-sube; animation-duration: .26s; }
  .modal-acciones { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .modal-acciones > .btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; }   /* `auto` y no `0`: con dos, el de rótulo largo («Mandar a las familias») toma lo suyo y no se parte en dos líneas */
  .modal-acciones > .btn-peligro { margin-right: 0; }
}
@keyframes v-velo { from { opacity: 0; } }
@keyframes v-entra { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes v-sube { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  .modal-fondo, .hoja-fondo, .ventana { transition-duration: .12s; }
  .ventana { transform: none; }
  :is(.open, .abierta) > .ventana, .fl-capa.abierta > .fl, .fb-velo.abierta > .fb-ventana, .gd-velo > .gd-ven { animation: v-velo .12s linear both !important; }
}

/* ── Revisión visual 27-oct (todas las ventanas, capturadas a 1280 y 390) ─────────────────────────────────────────────────────── */
/* El foco que pone el programa al abrir no pinta el aro (ui.js `foco-auto`); los campos sí lo muestran: ahí se escribe. */
html.foco-auto :is(.ventana, .fl, .fb-ventana, .gd-ven, .pl) :focus-visible:not(input, textarea, select) { outline: none; }
html.foco-auto :is(.ventana, .fl, .fb-ventana, .gd-ven, .pl) .v-x:focus-visible:not(:hover) { background: none; color: var(--tinta-2); }
/* Configuración en el celular: la lista de apartados son FILAS (como la hoja de opciones), sin caja alrededor ni icono en cuadrito. */
.ventana .lsec { border: 0; border-radius: 0; background: none; }
.ventana .lsec button { padding: 10px 0; min-height: 60px; }
.ventana .lsec-ico { width: 20px; height: auto; background: none; border-radius: 0; color: var(--tinta-3); font-size: 15px; }
/* Anotar por cancha: las 6 casillas de la clave a su medida (52 px, cuadradas), en una fila al centro con su botón, como la puerta del anotador. */
.anc-c > div:has(> .slots) { align-self: center; width: 100%; max-width: calc(6 * 52px + 5 * 8px); }
.anc-c .slots { --fs: 22px; gap: 8px; max-width: none; }
.anc-c .slot { aspect-ratio: 1; }
.anc-c > .btn[data-anc="crear"] { align-self: center; }
/* Casillas de un formulario o de la ventana legal: letra de la ventana (14, sin mayúsculas), misma sangría; las legales, filas con filete. */
.ventana :is(.fm-aut, .interruptor, .acc-tyc) { font: 500 14px/1.45 var(--g-sans); letter-spacing: 0; text-transform: none; color: var(--tinta); gap: 10px; padding: 0; }
.ventana .acc-tyc { font-size: 13px; color: var(--tinta-2); padding: 10px 0; }
.ventana .acc-tyc + .acc-tyc { border-top: 1px solid var(--linea); }
.ventana > .pista + .acc-tyc { margin-top: 4px; }
/* La ficha del equipo: la cabecera de todas (escudo de 40 a la izquierda, título 700 17, subtítulo gris), no un escudo grande al centro. */
#uiModalBody > .ficha-cab { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; }
#uiModalBody > .ficha-cab > .esc { grid-row: 1 / 3; width: 40px; height: 40px; font-size: 14px; }
#uiModalBody > .ficha-cab > h3 { margin: 0; }
#uiModalBody > .ficha-cab > .pista { margin: 0; font-size: 13px; }
.ventana .ficha-sub { margin: 16px 0 4px; font: 600 12px/1.3 var(--g-sans); color: var(--tinta-3); }
/* Camisetas que solo se miran (la ficha, la grada, Revisar plantillas): sin cuadro detrás; el cuadro es de las que se tocan (faltas, creador). */
.ventana .ficha-cams .cam, .ventana .pr-eq .pr-cam, .ventana .pr-eq .pr-cam .cam { background: none; }
.ventana .ficha-cams { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.ventana .ficha-cams .cam > svg { width: 52px; }
/* Revisar plantillas: con dos botones, bajan juntos bajo la frase (a la derecha) en vez de partirla palabra por palabra. */
.pr-am { flex-wrap: wrap; row-gap: 8px; }
.pr-am > span:not(.pr-bts) { flex: 1 1 200px; }
.pr-bts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
/* El asistente: «Cómo se anota» son FILAS (icono, nombre, nota y su casilla a la derecha), sin tarjetas ni icono en cuadrito. */
.ventana .mt-ops:not(#_) { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ventana .mt-ops > .mt-op:not(#_) { flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 12px 32px 12px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ventana .mt-ops > .mt-op + .mt-op { border-top: 1px solid var(--linea); }
.ventana .mt-ops > .mt-op:not(#_) .mt-ico { width: 20px; height: auto; background: none; color: var(--tinta-3); }
.ventana .mt-ops > .mt-op[aria-checked="true"]:not(#_) .mt-ico { color: var(--tinta); }
.ventana .mt-ops > .mt-op:not(#_) .mt-ok { top: 50%; right: 0; margin-top: -9px; }
.ventana .mt-eqs:not(#_) { gap: 0; }
.ventana .mt-eqs > .mt-eq:not(#_) { padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ventana .mt-eqs > .mt-eq + .mt-eq { border-top: 1px solid var(--linea); }
/* Los rótulos bajo los círculos del asistente: el rótulo de sección (sans 11, sin mayúsculas ni mono); así «Quién la ve» ya no se corta. */
.ind small { font: 600 11px/1 var(--g-sans); letter-spacing: 0; text-transform: none; }
/* La planilla de la mesa: Promesas / Halcones son fichas de elección, sin caja alrededor. */
.pl .seg { gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; }
.pl .seg > button { border-radius: 10px; background: var(--hundido-2); color: var(--tinta-2); box-shadow: none; }
html[data-tema="claro"] .pl .seg > button { background: var(--alzado); }
.pl .seg > button[aria-pressed="true"] { background: var(--alzado); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta-2); }
html[data-tema="claro"] .pl .seg > button[aria-pressed="true"] { background: var(--papel); }
/* La planilla de la jornada: el ✕ a la altura del título y de Excel / Imprimir (la fila mide 40). */
.modal:has(> .jw-pl) > .x-ventana { top: 20px; }
/* Acceso en el computador: la ilustración ya no estira la columna del formulario; logo y formulario van al centro, sin hueco abajo. */
@media (min-width: 860px) {
  .modal.modal-acceso { grid-template-rows: minmax(0, 1fr) auto minmax(0, auto) minmax(0, 1fr); }
  .acc-arte { grid-row: 1 / 5; grid-column: 1; }
  .acc-cab { grid-row: 2; grid-column: 2; }
  .acc-form { grid-row: 3; grid-column: 2; }
  #logCancel { position: absolute; top: 12px; right: 12px; }   /* el ✕ se queda en su esquina aunque el logo baje al centro */
}

/* El aviso flotante no es ventana: mismo radio que los botones y la misma curva de entrada. */
.toast { border-radius: 10px; animation: v-toast .22s var(--v-in) both; }
@keyframes v-toast { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: v-velo .12s linear both; } }

/* Los que traen su propia caja y su pie (asistente `.stp`, camisetas `.cam-ven`, ventanas de jornada `.jw`): solo el pie del creador. */
.cam-pie { justify-content: flex-end; }
.cam-pie .pista { order: -1; }
.cam-pie .btn { order: 1; min-height: 44px; }

/* Las barras de avance se llenan al abrir la pantalla (ui.js, `indLlenar`): crecen desde la izquierda, una vez. */
.prog i.ind-llena::after, .tn-barra i.ind-llena { transform-origin: left center; animation: indLlena .6s cubic-bezier(.22,.68,.28,1) both; }
@keyframes indLlena { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .prog i.ind-llena::after, .tn-barra i.ind-llena { animation: none; } }

/* Ola 3 · #7: la leyenda de siglas bajo la tabla de posiciones (leyendaSiglas, ui.js) */
.leyenda.tabla-ley { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 2px 0; font-size: 12px; color: var(--tinta-3); }
.leyenda.tabla-ley b { font: 700 11px var(--g-mono, monospace); color: var(--tinta-2); }
@media (max-width: 620px) { .leyenda.tabla-ley .opc { display: none; } }