/* AHP — Liga +40 Bravecto (3ª Edición): el sistema de la APP.
 *
 * Lo que comparten la portada, /liga40/partidos y /liga40/clasificacion: los tokens del skin, el
 * lienzo, los módulos y las filas de partido. Vive en UN archivo y no en tres copias dentro de tres
 * <style> — la lección del menú de hamburguesa, que estaba pegado en dieciocho páginas.
 * Cada página conserva inline sólo lo suyo (el hero de la portada, la tabla de la clasificación).
 *
 * app.css se sirve tal cual (Cloudflare no recompila Tailwind para este proyecto), así que este
 * archivo re-apunta los tokens del tema que sus utilidades ya leen y sobrescribe las reglas con
 * hex fijo. Se carga DESPUÉS de app.css.
 *
 * ================== EL LIENZO: violeta arriba, claro abajo (2026-08-08, 2ª pasada) ==================
 * La primera versión eran tarjetas blancas planas sobre gris pálido y la página se partía en dos:
 * un hero de la edición y, debajo, algo que no parecía suyo. La corrección se pasó de frenada — se
 * volvió violeta de arriba abajo y la app entera quedó del mismo color, sin respiro (Roberto:
 * «everything is too purple»).
 *
 * Esto es el punto medio, y es el que la marca pide: el HERO se queda violeta —ahí manda Bravecto—
 * y se DISUELVE en un lienzo claro donde los módulos son tarjetas blancas. La página sigue siendo
 * una sola porque el degradado no tiene costura y porque el color no desaparece: cada tarjeta lleva
 * su filo Bravecto arriba y sus acentos dentro. Blanco de lienzo, violeta de identidad.
 *
 * CONTRASTE: todo el texto de aquí abajo está medido SOBRE BLANCO, que es donde vive. Por eso los
 * acentos usan las paradas «-dk» de la paleta (magenta 5.9:1, teal 5.7:1, morado 8.9:1) y NUNCA las
 * «-lt», que se hicieron para leerse sobre el violeta y sobre blanco se deslavan.
 */

:root{
  --brav-ink:#2e2170;         /* violeta-azulado profundo — el hero y las secciones oscuras */
  --brav-ink-2:#241a5c;       /* piso del degradado del hero = techo del lienzo */
  --brav-panel:#3b2288;       /* panel del menú móvil / desplegable */
  --brav-purple:#6b2d87;      /* 8.9:1 sobre blanco */
  --brav-purple-lt:#b98cff;   /* el mismo morado, ya sobre oscuro — 6.4:1 */
  --brav-magenta:#e01a5f;     /* sólo rellenos — texto blanco encima = 4.7:1 */
  --brav-magenta-lt:#ff5c93;  /* acento sobre violeta — 5.6:1 en el panel, 4.6:1 en el hero */
  --brav-pink-hi:#ffb8cf;     /* el mismo rosa, ya legible en TEXTO NORMAL sobre el hero — 6.8:1 */
  --brav-magenta-dk:#c4144f;  /* texto de acento SOBRE claro — 5.9:1 */
  --brav-teal:#00afa5;        /* acento SOBRE el hero — 4.9:1 */
  --brav-teal-lt:#3fd8cd;     /* acento SOBRE el panel — 9.3:1 */
  --brav-teal-dk:#00736c;     /* texto de acento SOBRE claro — 5.7:1 */
  --brav-blue:#1e9bd7;        /* terciario: anillos y detalles, nunca texto sobre claro (3.1:1) */
  --brav-blue-lt:#7cc7ff;     /* el mismo azul, ya sobre oscuro — 9:1 */
  --brav-blue-dk:#14688f;     /* y sobre claro — 6.2:1; es el que usan los resultados */

  /* ÁMBAR — «reportado y sin confirmar» (2026-08-30, la tarjeta que aprobó Roberto).
     El marcador tiene ahora TRES estados y la paleta Bravecto sólo tenía dos colores para ellos:
     verde para lo confirmado y nada para lo pendiente. El amarillo es el tercero, y es una familia
     propia y no una parada más de la paleta a propósito — no pertenece a la marca, pertenece al
     semáforo del marcador, y mezclarlo con los --brav-* invitaría a usarlo de acento decorativo.
     Medido sobre blanco, que es donde vive: --amb-dk 5.6:1 en texto, y 4.9:1 sobre --amb-bg (la
     banda «POR CONFIRMAR»). El cuadro relleno lleva --brav-ink encima — 8.2:1 sobre --amb— porque
     el blanco sobre amarillo no llega ni a 2:1. */
  --amb:#f2c522;              /* relleno del cuadro del set ganado, y el filo del contorneado */
  --amb-dk:#8a6100;           /* texto de acento SOBRE claro — 5.6:1 */
  --amb-bg:#fbf0cf;           /* fondo de la banda */
  --amb-line:#e8d49a;         /* su filo */

  --color-ink:var(--brav-ink);
  --color-navy:var(--brav-ink);
  --color-navy-deep:var(--brav-panel);
  --color-orange:var(--brav-magenta);
  --color-orange-2:#c2154f;
  --color-teal:var(--brav-teal-dk);
  --color-teal-2:#005f59;
  --color-crema:#f5f3fb;
  --color-line:#e2dcf0;
  --color-muted:#6b6288;

  /* Lienzo de la app — CLARO. Los pares de abajo están medidos sobre --pg-panel (blanco). */
  --pg-floor:#f4f1fb;         /* piso de la página: un lila muy lavado, no gris */
  --pg-panel:#ffffff;         /* la superficie de los módulos: blanco */
  --pg-panel-2:#fdfcff;       /* y su piso, con un susurro de lila para que la tarjeta tenga cuerpo */
  --pg-line:#e5e0f3;          /* filos de los paneles */
  --pg-text:#2e2170;          /* cuerpo — 13.4:1 sobre el panel */
  --pg-soft:#4c4276;          /* entradillas — 9.1:1 */
  --pg-dim:#6b6288;           /* metadatos — 5.6:1 */
}

body{background:var(--pg-floor);color:var(--pg-text)}

/* El hero se queda violeta: es la identidad de la edición. */
#top{background:linear-gradient(165deg,#3a2a8f 0%,var(--brav-ink) 52%,var(--brav-ink-2) 100%)}
.blob-1{background:radial-gradient(circle,var(--brav-purple) 0%,#0000 60%)}
.blob-2{background:radial-gradient(circle,var(--brav-magenta) 0%,#0000 60%);opacity:.42}
.blob-3{background:radial-gradient(circle,var(--brav-teal) 0%,#0000 64%);opacity:.38}

/* LA COSTURA. Arranca EXACTAMENTE en el piso del hero y resuelve en el lienzo claro antes del
   primer módulo. El paso intermedio (#4b3a9e) evita la banda sucia que sale al interpolar de un
   violeta oscuro a un lila claro en un solo tramo. */
.appwrap{background:linear-gradient(180deg,
  var(--brav-ink-2) 0%, #4b3a9e 26%, #a99adb 62%, var(--pg-floor) 100%)}
.appwrap{background-repeat:no-repeat;background-size:100% 15rem;background-color:var(--pg-floor)}

/* El pie vuelve a ser oscuro: cierra la página contra el hero y despega las tarjetas del final. */
footer.bg-ink{background:var(--brav-ink);border-top:1px solid #ffffff1a}

#nav.scrolled{background:#2e2170eb;backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid #ffffff14;
  box-shadow:0 10px 30px -14px #00000082}
.btn{box-shadow:0 12px 30px #e01a5f4d}
.eyebrow{color:var(--brav-magenta-dk)}
#top .eyebrow{color:var(--brav-magenta-lt)}
#top .text-orange{color:var(--brav-magenta-lt)}
#top .text-teal{color:var(--brav-teal)}
#nav .text-orange,#mobilemenu .text-orange{color:#ff85ac}

/* ================= Módulos de la app =================
   Tarjetas blancas sobre el lienzo claro: filo de color arriba, borde de 1px y una sombra suave
   —de sombra real, no de luz— que las levanta del papel. */
.app{max-width:1120px;margin:0 auto;padding:1.75rem 1.25rem 4rem;display:grid;gap:1.35rem}
@media (min-width:640px){ .app{padding:2.4rem 2rem 5rem;gap:1.6rem} }
.duo{display:grid;gap:1.35rem}
@media (min-width:900px){ .duo{grid-template-columns:1fr 1fr;align-items:start;gap:1.6rem} }

.mod{--mod-accent:var(--brav-magenta-dk);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--pg-panel) 0%,var(--pg-panel-2) 100%);
  border:1px solid var(--pg-line);border-radius:1.25rem;padding:1.4rem 1.25rem 1.5rem;
  box-shadow:0 18px 40px -30px #2e217059}
@media (min-width:640px){ .mod{padding:1.8rem 1.9rem 2rem} }
.mod::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--mod-accent)}
.mod.a-teal{--mod-accent:var(--brav-teal-dk)}
.mod.a-blue{--mod-accent:var(--brav-blue-dk)}
.mod.a-purple{--mod-accent:var(--brav-purple)}
/* El módulo del jugador: el único con doble filo, para que se lea como «lo tuyo». */
.mod.a-mio::before{background:linear-gradient(90deg,var(--brav-magenta),var(--brav-magenta-dk) 55%,var(--brav-teal-dk))}

.mod-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem}
.mod-k{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mod-accent)}
.mod-t{margin-top:.35rem;font-family:var(--font-serif);font-weight:400;line-height:1.1;
  color:var(--pg-text);font-size:clamp(22px,3.2vw,29px)}
.mod-a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;font-size:14.5px;
  font-weight:600;color:var(--mod-accent);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:#2e217038;transition:text-decoration-color .18s}
.mod-a:hover{text-decoration-color:currentColor}
.mod-quiet{margin-top:1.05rem;font-size:15.5px;line-height:1.6;color:var(--pg-soft)}

/* ================= PARTIDOS Y RESULTADOS — LA FILA (2026-08-30, 4ª pasada) =================
   Roberto dibujó la fila que quiere y la 3ª pasada no era ésa. Lo que rechaza y lo que pide:

     1. UNA línea de encabezado — «J1 · VIE 28 AGO · 6:00 PM · Punto Padel». La jornada entra ahí
        como ficha corta y se lleva por delante el numeral gigante que ocupaba una columna propia en
        «Mis partidos» (con él se fue toda la maquinaria .con-jr/.mt-jr de /liga40/partidos). La
        cancha se cae de la fila: es detalle, y el detalle vive en la ficha del partido.
     2. CUATRO renglones de jugador, uno por nombre, en cuerpo cómodo (16px). No una pareja por
        renglón: una pareja de ~45 caracteres se partía por donde cayera y dejaba medio apellido
        colgando. Un nombre por renglón cabe entero.
     3. El MARCADOR en una caja de verdad a la derecha, a la altura de los nombres — y el distintivo
        de estado en esa misma casilla cuando todavía no hay marcador.

   LA REGLA QUE MANDA SOBRE LAS TRES: «la caja no le puede quitar ancho a los nombres — los nombres
   envuelven por debajo o al lado, según tu rejilla». Eso es literalmente un FLOTANTE, y por eso la
   caja no es una columna de la rejilla: flota a la derecha DENTRO del bloque de nombres. Los dos o
   tres renglones que la caja alcanza se acortan; el resto de la fila la recupera entera. Y la línea
   de encabezado, que ya no comparte renglón con nadie, se queda con el ancho completo — que es lo
   que hace que quepa en UNA sola línea.

   La decisión salió de medir, no de gusto. A 375px, con la tipografía de la casa:

     · el renglón útil de la fila mide 267px;
     · un nombre del padrón mide de 120 a 293px. A ancho completo sólo se parte UNO de los 76
       («Arturo Alejandro Moncada Hernández», 293px). Con la caja robándole ancho a TODA la lista de
       nombres se partían OCHO de cada catorce — con lo que «un nombre por renglón», que es la razón
       de ser de esta pasada, dejaba de existir. Flotando, la caja sólo alcanza al primer nombre;
     · la línea de encabezado mide 266px con «Punto Padel» y 306px con «Smash Pádel Club»: a ancho
       completo la primera entra justa en UNA línea y la segunda envuelve, que es exactamente el
       reparto que Roberto dio por bueno.

   Va mobile-first como el resto del archivo, con el bloque de ≥760px como enmienda: ahí sobra ancho
   y la sede vuelve a su propio renglón bajo el día y la hora, que es la forma que Roberto dio por
   buena («en escritorio está bien»). */
.mt{display:grid;gap:.7rem;margin-top:1.15rem}
.mt-row{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;
  padding:.7rem .75rem;border:1px solid var(--pg-line);border-radius:.85rem;background:#faf8ff}

/* Sólo para lectores de pantalla: lo que la maquetación dice con espacio y con color —«Jornada» del
   token J4, el «contra» que separa las dos parejas— y el oído no puede oír. */
.mt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ---- LA LÍNEA DE ENCABEZADO ----
   Un flex que ENVUELVE, no una rejilla: cuando «Smash Pádel Club» no cabe detrás de la hora, un
   ítem de flex baja ENTERO al segundo renglón —no se recorta, no desborda, no aparece una barra de
   desplazamiento horizontal—, y si algún día un nombre de club fuera solo más ancho que la fila,
   rompe por dentro en vez de salirse. Los separadores viajan DENTRO del trozo que los precede
   (ver matches.js): sueltos serían ítems de flex por su cuenta y podrían caer al principio del
   segundo renglón, con el punto medio abriendo la línea como si fuera una viñeta. */
.mt-left{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .34rem;
  grid-column:1;grid-row:1;min-width:0}
/* La ficha de jornada: mono y tabular para que «J1» y «J14» ocupen el mismo sitio en toda la lista.
   No es una pastilla rellena a propósito — la fila ya tiene una caja (el marcador) y dos rellenos
   compitiendo en el mismo renglón convierten un encabezado en una barra de herramientas. */
.mt-jt{font-family:var(--font-mono);font-size:12px;font-weight:800;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;color:var(--brav-magenta-dk)}
.mt-when{font-size:12px;font-weight:700;letter-spacing:.05em;line-height:1.4;
  text-transform:uppercase;color:var(--brav-magenta-dk)}
.mt-row.is-res .mt-jt,.mt-row.is-res .mt-when{color:var(--brav-blue-dk)}
/* El separador se desmarca de lo que lo contiene: dentro de .mt-jt heredaría el mono en negrita y
   dentro de .mt-when las versalitas. */
.mt-sl2{margin-left:.3rem;font-family:var(--font-sans);font-size:12px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--pg-dim)}
/* Peso comparable al del día y la hora —mismo renglón, medio punto más de cuerpo y sin versalitas—,
   no el gris de los metadatos del que viene. */
.mt-sede{font-size:12.5px;font-weight:700;line-height:1.4;color:var(--pg-text);
  overflow-wrap:anywhere}
.mt-row.is-res .mt-sede{color:var(--pg-soft)}
/* La cancha es el SEGUNDO dato de la sede, no su igual. En /liga40/partidos no llega a la fila
   —la pide sin cancha, porque ahí el detalle vive en la ficha—; en la portada y en el perfil del
   jugador sí, que no tienen ficha a donde mandarla. */
.mt-cancha{font-size:11.5px;font-weight:600;color:var(--pg-dim)}

/* ---- LOS CUATRO NOMBRES Y LOS CUADROS DEL SET (2026-08-30, 5ª pasada) ----
   La pareja se lee por PROXIMIDAD: sus dos nombres pegados y un hueco claro entre los dos lados. Es
   lo que sustituye al «vs», que gastaba un renglón entero en una preposición. Para el oído la
   separación no existe, y por eso matches.js sigue poniendo un «contra» en .mt-sr entre los bloques.

   DOS COLUMNAS Y DOS RENGLONES, que es el cambio de esta pasada. El marcador dejó de ser una caja
   flotante y pasó a ser una tira de cuadros POR PAREJA, así que ya no hay un flotante que contener
   —se fue el `flow-root`, que existía sólo para eso— sino una rejilla: nombres a la izquierda,
   cuadros a la derecha, y cada tira exactamente a la altura de la pareja cuyos juegos cuenta.

   Los cuatro hijos caen solos en sus casillas porque matches.js los emite en el orden de la
   rejilla (lado, cuadros, lado, cuadros). Los .mt-sr de en medio son `position:absolute`: un hijo
   fuera de flujo NO es un ítem de rejilla, así que no abre una quinta casilla.

   `auto` en la segunda columna y no un ancho fijo: la tira mide lo que midan sus cuadros —dos
   cuando el partido está por jugar, tres cuando hubo supertiebreak— y los nombres se quedan con lo
   que sobre. Es el reparto que Roberto dio por bueno en el mock («los cuadros se estiran, los
   nombres pierden ~38px sólo en ese caso raro»).
   `align-items:center` centra la tira contra su bloque de nombres, que es lo que hace que los dos
   renglones se lean como una tabla de dos filas y no como cuatro cosas sueltas. */
.mt-pairs{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem .5rem;align-items:center;
  grid-column:1 / -1;grid-row:2;min-width:0;
  font-size:16px;line-height:1.3;color:var(--pg-text)}
/* Rejilla y no bloque: los dos nombres y su etiqueta se apilan con un hueco propio, más apretado
   que el que separa a las dos parejas. La proximidad sigue siendo lo que dice «esto es una pareja». */
.mt-side{display:grid;gap:.06rem;min-width:0}
.mt-n{display:block;font-weight:600;overflow-wrap:anywhere}
/* Los enlaces al perfil, uno por renglón de nombre — en la cartelera de /liga40/partidos y, desde
   2026-09-02, en el perfil /liga40/jugador, que ya recibe los slugs. El subrayado sólo aparece al
   tocar o apuntar: dieciséis filas con cuatro nombres subrayados cada una se leen como un
   formulario. `z-index:1` los deja por encima del asa que abre la ficha en /liga40/partidos. */
.mt-n a{position:relative;z-index:1;color:inherit;text-decoration:underline;
  text-decoration-color:#0000;text-underline-offset:3px;transition:text-decoration-color .16s}
.mt-n a:hover,.mt-n a:focus-visible{text-decoration-color:currentColor}
@media (prefers-reduced-motion:reduce){ .mt-n a{transition:none} }

/* LA ETIQUETA LOCAL / VISITANTE. Roberto eligió la etiqueta sobre el medallón: se explica sola.
   Cuerpo de 10px en versalitas anchas —el mismo registro que .mod-k y .mt-jt—, morado para el local
   y gris para el visitante: el que juega en casa es el dato que se busca, el otro se deduce.
   `line-height:1.15` y no el 1.5 del resto de rótulos: la etiqueta es lo que esta pasada le AÑADE a
   cada tarjeta —dos renglones más por fila, catorce filas por jornada—, así que se cobra el mínimo
   que sigue siendo legible. No hay descendentes que recortar en «Local» ni en «Visitante». */
.mt-lv{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.2em;
  line-height:1.15;text-transform:uppercase;color:var(--pg-dim)}
.mt-lv.l{color:var(--brav-purple)}
/* Bajo el bastón magenta de «lo tuyo» la etiqueta cede el color: dos acentos en el mismo renglón
   compiten, y el que manda ahí es el que dice que la pareja es tuya. */
.mt-side.yo .mt-lv{color:var(--brav-magenta-dk)}

/* ---- LOS CUADROS ----
   Un cuadro por set, con UN número: los juegos de ESA pareja en ESE set. RELLENO = ganó el set,
   CONTORNEADO = lo perdió, y con eso el ganador de cada set se lee sin una sola palabra.
   `min-width` y no `width`: un supertiebreak («10») tiene que caber, y la forma correcta de que
   quepa es que el cuadro se estire, no que el número se encoja. El alto sí es fijo — si el cuadro
   creciera a lo alto con el número, dos filas de la lista dejarían de alinearse entre sí.
   Dígitos tabulares y mono, como toda cifra de esta hoja.

   28px Y NO LOS 32 DEL MOCK, y esto se midió sobre el padrón real y no a ojo. La tira le quita
   ancho a los nombres, y a 375px el renglón útil de la fila mide 267px:
     · con DOS cuadros quedan 199px para el nombre — se parten 9 de los 69 nombres del padrón;
     · con TRES (el partido que fue a supertiebreak) quedan 167px — se parten 15.
   Con los 32px del mock serían 11 y 17, y con 26px serían 6 y 14: la curva es PLANA, o sea que
   achicar el cuadro no compra renglones, sólo hace el marcador más difícil de leer. 28 es donde el
   cuadro conserva la presencia que Roberto aprobó (el mock los dibujó a 32 sobre una tarjeta de
   ~280px: la misma proporción) sin regalar los nombres.
   Queda dicho lo que esta pasada CUESTA, porque es una decisión y no un descuido: con la anatomía
   anterior —el marcador flotando— sólo se partía 1 nombre de 69. La tarjeta de cuadros parte entre
   9 y 15, y es el precio de que el marcador diga de quién es cada número sin repetir un nombre. */
.mt-sets{display:flex;gap:.25rem;align-self:center}
.mt-sq{min-width:28px;height:28px;padding:0 .26rem;border-radius:.45rem;box-sizing:border-box;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:15px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
/* POR JUGAR — punteado. Dos cuadros: los sets que un partido al mejor de tres siempre juega. El
   lila apagado es el mismo filo que ya usan los paneles, un paso más oscuro para que el punteado se
   vea sobre el fondo lavado de la fila. */
.mt-sq.vac{border:1.5px dashed #b9b0d6;color:#b9b0d6}
/* CONFIRMADO — verde. Es el teal de resultados de la casa: blanco sobre el relleno (5.7:1) y el
   mismo teal en el contorneado, que sobre blanco también es 5.7:1. */
.mt-sq.ok{background:var(--brav-teal-dk);color:#fff}
.mt-sq.ok2{border:1.5px solid var(--brav-teal-dk);color:var(--brav-teal-dk)}
/* REPORTADO Y SIN CONFIRMAR — amarillo. El relleno lleva tinta violeta y no blanca: sobre --amb el
   blanco no llega a 2:1 y --brav-ink llega a 8.2:1. El contorneado escribe en --amb-dk (5.6:1). */
.mt-sq.pen{background:var(--amb);color:var(--brav-ink)}
.mt-sq.pen2{border:1.5px solid var(--amb);color:var(--amb-dk)}
/* SÚPER TIE-BREAK — el juego que cuenta para la tabla (1-0) con sus puntos en alto. Un solo hijo
   del grid (ver cuadro() en matches.js), y el <sup> sin alto de línea propio para que no estire el
   cuadro: el volado cuelga dentro de la misma caja de 28px. */
.mt-sq .mt-st{display:inline;white-space:nowrap}
.mt-sq .mt-st sup{font-size:.62em;font-weight:700;margin-left:.1em;vertical-align:super;line-height:0}
.mt-side.win .mt-n{color:var(--brav-teal-dk);font-weight:700}
/* El ✓ va en el ÚLTIMO nombre del lado que ganó y no en cada uno: la marca es de la pareja. */
.mt-side.win .mt-n:last-child::after{content:'✓';margin-left:.35rem;font-size:.85em}
/* El bastón magenta del jugador con sesión abierta. Recorre el LADO completo —los dos nombres— y no
   un renglón suelto: lo que marca es su pareja. */
.mt-side.yo{position:relative;padding-left:.72rem}
.mt-side.yo .mt-n{font-weight:700}
.mt-side.yo::before{content:'';position:absolute;left:0;top:.16em;bottom:.16em;width:3px;
  border-radius:9999px;background:var(--brav-magenta)}

.mt-meta{grid-column:1 / -1;grid-row:3;font-size:11.5px;line-height:1.4;color:var(--pg-dim);
  overflow-wrap:anywhere}

/* ---- EL ESTADO EXCEPCIONAL DE LA CITA ----
   Lo que queda del antiguo distintivo de la fila (.mt-chip, retirado en esta pasada junto con la
   caja del marcador: los cuadros son ahora la interfaz del resultado, y «Reportar» salió de la
   lista por resolución de Roberto — la acción y su reclamo viven sólo dentro de la ficha).
   Aquí sólo sobreviven los dos estados que la lista SIGUE teniendo que anunciar porque cambian lo
   que ya se anunció: cancelado y reprogramado. Van al final de la línea de encabezado, teñidos de
   magenta, y como la línea es un flex que envuelve, cuando no caben bajan enteros sin desbordar.
   Es el ÚNICO relleno de esa línea, y por eso no contradice la regla de .mt-jt («dos rellenos
   compitiendo en el mismo renglón convierten un encabezado en una barra de herramientas»): un
   partido normal no lleva ninguno. */
.mt-est{display:inline-flex;align-items:center;padding:.1rem .42rem;border-radius:.35rem;
  border:1px solid #c4144f4d;background:#e01a5f12;color:var(--brav-magenta-dk);
  font-family:var(--font-mono);font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap}

/* ---- LA BANDA «POR CONFIRMAR» ----
   El otro medio del estado amarillo: los cuadros dicen CUÁNTO y la banda dice QUÉ FALTA. Sustituye
   a la línea de texto menudo que decía «Reportaste 6-1 6-1 — esperando que lo confirme…», que era
   la información más importante de la tarjeta en el cuerpo más pequeño de la tarjeta.
   Es el mismo bloque en las dos superficies donde puede aparecer —la fila de la portada y la ficha
   del partido—, y por eso vive aquí y no en el <style> de ninguna página. */
.mt-band{margin-top:.6rem;border-radius:.55rem;padding:.5rem .65rem;
  font-size:12.5px;font-weight:700;line-height:1.25;letter-spacing:.02em}
.mt-band.pen{background:var(--amb-bg);color:var(--amb-dk);border:1px solid var(--amb-line)}
/* En la fila, la banda cierra la tarjeta: cruza las dos columnas y se coloca sola en el primer
   renglón libre (los explícitos son left 1 · pairs 2 · meta 3), en móvil y en escritorio. */
.mt-row > .mt-band{grid-column:1 / -1;margin-top:.15rem}
/* El detalle —quién reportó qué— en peso normal: el rótulo es el titular y esto es la explicación. */
.mt-band .band-q{display:block;margin-top:.15rem;font-weight:400;font-size:11.5px;
  letter-spacing:0;overflow-wrap:anywhere}
.mt-band .band-mk{font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* El rótulo del supertiebreak: un tercer set que llega a 10 no es un set, es el desempate, y
   decirlo evita la pregunta «¿por qué dice 10-8?». Renglón propio y en versalitas para que no se
   lea como parte de la frase (2026-08-30). */
.mt-band .band-st{display:block;margin-top:.25rem;font-family:var(--font-mono);font-size:10px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}

/* ---- ESCRITORIO (≥760px) ----
   Dos columnas —cuándo/dónde · nombres— y la sede de vuelta a su propio renglón bajo el día y la
   hora, que es la forma que Roberto dio por buena. La rejilla interna de .mt-pairs no cambia: aquí
   el bloque de nombres llega hasta el filo de la tarjeta, así que la tira de cuadros queda alineada
   a la derecha de la fila sin necesitar una tercera columna.
   `flex-basis:100%` baja la sede sin sacarla del flex, así que la línea de encabezado sigue siendo
   un solo contenedor y no dos rejillas distintas según el ancho. El separador que la precede se
   apaga: ahí abajo, un punto medio delante sobra. */
@media (min-width:760px){
  /* 12.5rem y no las 11 de antes: la columna izquierda ganó la ficha de jornada, y «J14 · MIÉ 12
     AGO · 6:00 PM» mide 186px — con 176 se partía en dos y la tarjeta crecía un renglón entero. */
  .mt-row{grid-template-columns:12.5rem minmax(0,1fr);align-items:start;
    gap:.4rem 1.4rem;padding:.9rem 1rem;border-radius:.95rem}
  .mt-left{row-gap:.16rem;grid-column:1;grid-row:1}
  .mt-when > .mt-sl2{display:none}
  .mt-sede{flex-basis:100%;font-size:13.5px;line-height:1.3}
  .mt-jt,.mt-when{font-size:13px}
  .mt-sl2{font-size:13px}
  .mt-cancha{font-size:12px}
  .mt-est{font-size:10.5px}
  .mt-pairs{grid-column:2;grid-row:1;font-size:16px;column-gap:1rem}
  /* Con ancho de sobra el cuadro crece: es el número que se busca en una lista de resultados. */
  .mt-sq{min-width:34px;height:34px;font-size:17px}
  .mt-lv{font-size:10.5px}
  .mt-row .mt-meta{grid-column:2;grid-row:2;justify-self:start;font-size:12.5px}
}
.mt-sep{margin-top:1.35rem;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pg-dim)}

/* ---- reportar el marcador, DENTRO de la tarjeta del partido ----
   Enmienda 2026-08-30: reportar dejó de ser una página aparte. La acción vive en la fila del
   partido que el jugador ya está mirando —en la portada y en /liga40/partidos—, y la pinta
   /liga40/reportar.js. Todo lo de aquí abajo cuelga de .mt-row, así que ocupa el ancho entero de
   la fila en las dos rejillas: en móvil es la única columna, y a partir de 760px `1 / -1` la cruza
   por debajo del renglón de parejas.
   3ª pasada (2026-08-30): en /liga40/partidos este mismo bloque ya NO se monta en la fila sino
   DENTRO de la ficha del partido (AHPReport.montarEn), que es un contenedor cualquiera y no una
   rejilla — de ahí que `grid-column` sea inerte allí y todo lo demás siga sirviendo igual. En la
   portada se sigue montando en la fila, que es donde su lista corta lo puede sostener. */
.mt-act{grid-column:1 / -1;margin-top:.35rem}
/* La banda ya llega con su propio hueco cuando cuelga de otra cosa; de primera hija de .mt-act el
   hueco lo pone .mt-act, y sumar los dos separaría la banda de la fila que explica. Explícito y no
   confiado al colapso de márgenes: .mt-act no tiene borde ni relleno hoy, pero eso puede cambiar. */
.mt-act > .mt-band:first-child{margin-top:0}
/* LA BANDA DENTRO DE LA FICHA (2026-08-30, resolución de Roberto). Es EXACTAMENTE la banda de la
   tarjeta —misma redacción, la de AHPMatch.bandaHtml, y mismo amarillo—, sólo que a la escala de la
   ficha: ahí los nombres van a 17px y los cuadros del marcador miden 44, así que una banda de 12.5
   se leía como un pie de página en vez de como el titular de lo que falta. Sube el cuerpo, el aire
   y el radio; no toca el color, que es lo que la hace reconocible entre las dos superficies. */
.pd-accion .mt-band{padding:.7rem .85rem;border-radius:.7rem;font-size:14px;line-height:1.3}
.pd-accion .mt-band .band-q{margin-top:.3rem;font-size:13.5px;line-height:1.45}
.pd-accion .mt-band .band-st{font-size:10.5px}
/* Lo que queda de texto suelto en el bloque: el aviso de un marcador que el rival rechazó, que va
   ANTES del botón de volver a reportar. El estado «reportado» ya no se dice aquí — se dice en la
   banda amarilla (.mt-band), que es del mismo color que sus cuadros. */
.mt-act .rp-est{font-size:13px;line-height:1.5;color:var(--pg-soft);overflow-wrap:anywhere}
.mt-act .rp-est b{color:var(--pg-text);font-weight:700}
/* El comentario que escribió esta pareja, en lectura. Cuelga de la banda y por eso comparte su
   sangrado, pero NO su color: la banda es el estado del marcador y esto es una cita de lo que
   alguien escribió. Sólo lo ve quien lo escribió — el servidor no se lo manda al rival. */
.mt-act .rp-nota-v{margin-top:.5rem;padding:.55rem .7rem;border-radius:.6rem;
  border:1px solid var(--pg-line);background:var(--pg-panel-2);
  font-size:13.5px;line-height:1.5;color:var(--pg-soft);overflow-wrap:anywhere}
.mt-act .rp-nota-v > span{display:block;margin-bottom:.15rem;font-family:var(--font-mono);
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--pg-dim)}
/* «Editar resultado» cuelga debajo de la banda y de la nota, con su propio aire. */
.mt-act > .rp-btn{margin-top:.6rem}
.mt-act .rp-wa{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;
  font-weight:600;color:var(--brav-teal-dk);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:#2e217038}
.mt-act .rp-wa:hover{text-decoration-color:currentColor}

/* Los botones. Mismo sistema que la página que esto reemplaza: relleno magenta para la acción,
   contorno para la salida, 48px de alto — por encima del mínimo de 44 y cómodo de pie en cancha. */
.rp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  min-height:48px;padding:0 1.2rem;border:0;border-radius:9999px;cursor:pointer;
  font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;transition:filter .2s,opacity .2s,transform .12s;
  -webkit-tap-highlight-color:transparent}
.rp-btn:active{transform:translateY(1px)}
.rp-btn[disabled]{opacity:.6;cursor:default}
.rp-btn:focus-visible{outline:2px solid var(--brav-magenta);outline-offset:3px}
.rp-btn.pri{color:#fff;background:linear-gradient(100deg,var(--brav-magenta),var(--brav-magenta-dk));
  box-shadow:0 12px 26px -14px #e01a5f99}
.rp-btn.pri.lista{filter:saturate(1.06) brightness(1.04)}
.rp-btn.gho{background:var(--pg-panel);color:var(--pg-text);border:1px solid var(--pg-line)}
/* «+ set» es un enlace, no una acción: 44px de zona de toque con el subrayado pegado al texto. */
.rp-btn.lnk{width:auto;min-height:44px;padding:.4rem .55rem;border-radius:0;background:none;
  color:var(--brav-magenta-dk);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0;
  text-transform:none;box-shadow:none;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:#2e217038}
.rp-btn.lnk:hover{text-decoration-color:currentColor}

/* El formulario, desplegado EN SITIO debajo del partido. */
.rp-form{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--pg-line)}

/* ---- «No se jugó — Forfeit» ----
   Un interruptor, no un botón: encenderlo no manda nada, cambia lo que el formulario pregunta.
   Toda la etiqueta es la zona de toque (56px de alto, muy por encima del mínimo de 44) porque en
   cancha se pulsa de pie y con una mano. La casilla real se queda en el DOM —lector de pantalla y
   teclado la necesitan— y es lo que dibuja el estado encendido con :checked. */
.rp-wo{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.1rem .7rem;align-items:center;
  min-height:56px;margin-bottom:.7rem;padding:.6rem .8rem;border:1px solid var(--pg-line);
  border-radius:.85rem;background:var(--pg-panel);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.rp-wo:has(.rp-wo-chk:checked){border-color:var(--amb-line);background:var(--amb-bg)}
.rp-wo-chk{grid-row:1 / span 2;width:20px;height:20px;margin:0;accent-color:var(--brav-magenta);
  cursor:pointer}
.rp-wo-chk:focus-visible{outline:2px solid var(--brav-magenta);outline-offset:2px}
.rp-wo-t{font-size:14.5px;font-weight:700;line-height:1.3;color:var(--pg-text)}
.rp-wo:has(.rp-wo-chk:checked) .rp-wo-t{color:var(--amb-dk)}
.rp-wo-h{font-size:12px;line-height:1.35;color:var(--pg-dim)}
/* Quién gana el partido que nadie jugó. SIN opción marcada de entrada: adjudicarle a alguien un
   partido por no haber tocado un botón sería el peor de los errores posibles aquí. */
.rp-wobox{margin-bottom:.7rem}
.rp-wolab{font-size:13.5px;font-weight:700;line-height:1.4;color:var(--pg-text)}
.rp-picks{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.rp-pick{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;
  padding:.5rem .9rem;border:1px solid var(--pg-line);border-radius:.85rem;
  background:var(--pg-panel);color:var(--pg-text);font-size:14.5px;font-weight:600;line-height:1.3;
  text-align:center;cursor:pointer;overflow-wrap:anywhere;
  -webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s}
.rp-pick:focus-visible{outline:2px solid var(--brav-magenta);outline-offset:2px}
.rp-pick.on{border-color:var(--brav-magenta);background:#e01a5f0f;color:var(--brav-magenta-dk);
  font-weight:700}
@media (min-width:420px){ .rp-picks{flex-direction:row} .rp-pick{flex:1 1 0;min-width:0} }

/* ---- «Comentarios para la organización» (0023 · 0024) ---- */
.rp-nota{margin-top:.85rem}
.rp-nota-l{display:block;font-size:13px;font-weight:700;line-height:1.4;color:var(--pg-text)}
.rp-nota-l > span{margin-left:.35rem;font-weight:400;color:var(--pg-dim)}
.rp-nota-in{display:block;width:100%;min-height:56px;margin-top:.35rem;padding:.6rem .7rem;
  border:1px solid var(--pg-line);border-radius:.8rem;background:var(--pg-panel);
  color:var(--pg-text);font-family:inherit;font-size:15px;line-height:1.45;resize:vertical;
  outline:none;-webkit-appearance:none;appearance:none}
.rp-nota-in:focus{border-color:var(--brav-magenta);box-shadow:0 0 0 3px #e01a5f24}
.rp-nota-c{display:block;margin-top:.2rem;text-align:right;font-family:var(--font-mono);
  font-size:11px;color:var(--pg-dim);font-variant-numeric:tabular-nums;min-height:1em}

/* EL BLOQUE DE LA FICHA (0024). El mismo comentario, pero suelto del marcador: se escribe cuando
   haga falta y no cuando toque reportar. Va separado por una línea porque NO es parte de la acción
   de arriba —puede ser lo único que haya en la ficha— y con su propio aire para que no se lea como
   el pie del formulario del marcador. */
.rp-com{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--pg-line)}
.mt-act > .rp-com:first-child{margin-top:0;padding-top:0;border-top:0}
.rp-com-h{margin-top:.2rem;font-size:12.5px;line-height:1.45;color:var(--pg-dim)}
.rp-com .rp-nota-in{margin-top:.5rem}
/* El botón no ocupa el ancho entero como los del marcador: guardar un comentario no es la acción
   principal de la ficha, y un botón a toda página dice que sí lo es. Sigue midiendo 48 de alto. */
.rp-com-acts{display:flex;margin-top:.55rem}
.rp-com-acts .rp-btn{width:auto;min-width:min(100%,13rem);padding:0 1.4rem}
.rp-com-acts .rp-btn[disabled]{opacity:.45}
.rp-com-est{margin-top:.5rem;font-size:13px;line-height:1.5;color:var(--pg-dim);
  overflow-wrap:anywhere}
.rp-com-est.ok{color:var(--brav-teal-dk);font-weight:600}
.rp-com-est.mal{color:var(--brav-magenta-dk);font-weight:600}

.rp-grid{display:flex;flex-direction:column;gap:.55rem}
.rp-srow{display:grid;grid-template-columns:66px 1fr 1fr;gap:.55rem;align-items:center}
.rp-srow.cab{align-items:end}
.rp-cab{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pg-dim);text-align:center;line-height:1.2;
  overflow-wrap:anywhere}
.rp-lab{font-size:12.5px;line-height:1.15;color:var(--pg-soft)}
.rp-lab span{display:block;margin-top:.1rem;font-size:10.5px;color:var(--pg-dim)}
/* El tercer set, cuando sus números llegan a 10, deja de rotularse «si se jugó» y pasa a decir
   «supertiebreak». No hay selector que marcar: el formulario lo reconoce solo (resolución de
   Roberto, 2026-08-30). El color es el único aviso de que el rótulo cambió. */
.rp-srow.st .rp-lab span{color:var(--amb-dk);font-weight:700}
/* 56px: el alto que hace que un pulgar acierte el recuadro correcto sin mirar. */
.rp-sc{width:100%;min-height:56px;padding:0;border:1px solid var(--pg-line);border-radius:.8rem;
  background:var(--pg-panel);color:var(--pg-text);font-family:var(--font-mono);font-size:25px;
  font-weight:700;text-align:center;font-variant-numeric:tabular-nums;outline:none;
  -webkit-appearance:none;appearance:none}
.rp-sc:focus{border-color:var(--brav-magenta);box-shadow:0 0 0 3px #e01a5f24}
.rp-prev{margin:.8rem 0 .1rem;text-align:center;font-family:var(--font-mono);font-size:16.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pg-dim)}
.rp-prev.gana{color:var(--brav-teal-dk)}
.rp-prev.pierde{color:var(--pg-text)}
.rp-err{margin:.7rem 0 .1rem;padding:.65rem .8rem;border-radius:.8rem;background:#e01a5f0f;
  border:1px solid #c4144f47;color:var(--brav-magenta-dk);font-size:13.5px;line-height:1.5}
.rp-acts{display:flex;flex-direction:column;gap:.55rem;margin-top:.8rem}
.rp-preg{font-size:15px;line-height:1.55;color:var(--pg-text)}
.rp-preg b{color:var(--brav-magenta-dk);font-weight:700}
.rp-ok{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem .6rem;
  text-align:center;font-family:var(--font-mono);font-size:16px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brav-teal-dk)}
@media (prefers-reduced-motion:reduce){ .rp-btn,.rp-sc{transition:none} }

/* ---- fechas clave ---- */
.fk{margin-top:1.15rem}
.fk-row{display:flex;align-items:baseline;gap:.85rem;padding:.7rem 0;
  border-top:1px solid var(--pg-line)}
.fk-row:first-child{border-top:0;padding-top:.2rem}
.fk-d{flex:none;min-width:6.4rem;font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--brav-purple)}
.fk-w{font-size:15.5px;line-height:1.4;color:var(--pg-text);font-weight:600}
.fk-n{display:block;margin-top:.15rem;font-size:13px;font-weight:400;color:var(--pg-dim)}
.fk-row.is-final .fk-d{color:var(--brav-magenta-dk)}
.fk-row.is-final .fk-w{color:var(--brav-magenta-dk)}

/* ---- marcador de carga ----
   Barra tenue en el hueco exacto del número, nunca un esqueleto eterno: si los datos no llegan, el
   número se resuelve en «—» dentro del catch. Sobre claro va en tinta translúcida, no en luz. */
.sk{display:inline-block;min-width:1.5rem;height:.72em;border-radius:9999px;
  background:#2e21701f;vertical-align:-.02em;color:#0000}
@media (prefers-reduced-motion:no-preference){
  .sk{background:linear-gradient(90deg,#2e217014 25%,#2e217030 50%,#2e217014 75%);
    background-size:200% 100%;animation:sk-shimmer 1.5s linear infinite}
  @keyframes sk-shimmer{to{background-position:-200% 0}}
}
.sk-lines{display:grid;gap:.7rem;margin-top:1.15rem;max-width:30rem}
.sk-lines span{display:block;height:12px;border-radius:9999px}
.sk-lines span:nth-child(2){width:78%}
.sk-lines span:nth-child(3){width:58%}

/* El hero SÍ es oscuro, así que ahí el marcador vuelve a ser de luz. */
#top .sk{background:#ffffff26}
@media (prefers-reduced-motion:no-preference){
  #top .sk{background:linear-gradient(90deg,#ffffff1c 25%,#ffffff40 50%,#ffffff1c 75%);
    background-size:200% 100%}
}

/* ===== TRANSMITIR EN VIVO (parte 1) =====
   Cada tarjeta lleva un enlace estirado al tablero del partido (.mt-go); los enlaces de los nombres
   y los botones de dentro quedan por encima (z-index 1) para seguir funcionando. El marcador en
   vivo se pinta en el tono ámbar de «por confirmar»: no es oficial. */
.mt-row{position:relative}
.mt-go{position:absolute;inset:0;border-radius:inherit;z-index:0}
.mt-go:focus-visible{outline:2px solid var(--brav-magenta);outline-offset:2px}
:where(.mt-row) :is(button,input,select,textarea,details){position:relative;z-index:1}
.mt-vivo{grid-column:1 / -1;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:11px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brav-magenta-dk)}
.mt-vivo i{width:6px;height:6px;border-radius:9999px;background:var(--brav-magenta)}
@media (prefers-reduced-motion:no-preference){ .mt-vivo i{animation:mt-vivo-blink 1.1s ease-in-out infinite} }
@keyframes mt-vivo-blink{50%{opacity:.25}}