/* Estilos del panel. Salieron de admin.html al partirlo en piezas.
Diseño "la pista de noche": docs/superpowers/specs/2026-08-02-interfaz-premium-design.md
(esa especificación vive en el repositorio del Club La Vía, de donde se mudó
este sistema el 15-ago-2026.) */
/* ============================================================
LAS LETRAS: LOCALES, SIN PEDIRLE NADA A NADIE
La Vía pedía "Archivo Narrow" y "Be Vietnam Pro" a fonts.googleapis.com. Aquí
no hay dependencias externas, así que se usa la Archivo VARIABLE que ya vive
en frontend/fuentes/ (la misma que gastan el marcador y el mando).
El truco del font-stretch de una sola medida: la Archivo variable va de 62%
a 125% de ancho, pero aquí se declara clavada en 77%. Como es el único ancho
que la cara dice soportar, el navegador le encaja ahí cualquier petición —
y así las 28 reglas que ya pedían "Archivo Narrow" salen condensadas SIN
tocar ni una. El nombre se conserva por eso: cambiarlo obligaría a repasar
28 sitios a cambio de nada.
El texto corrido cae a la del sistema, que además carga en cero: es el mismo
reparto que ya tenían el marcador y el mando de Pozo.
============================================================ */
@font-face{
font-family:'Archivo Narrow';
src:url('../../frontend/fuentes/Archivo[wdth,wght].woff2') format('woff2-variations');
font-weight:100 900;font-stretch:77%;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Archivo Narrow';
src:url('../../frontend/fuentes/Archivo-Italic[wdth,wght].woff2') format('woff2-variations');
font-weight:100 900;font-stretch:77%;font-style:italic;font-display:swap;
}
/* ============================================================
LOS COLORES DEL PANEL, EN UN SOLO SITIO
El panel es el producto que se le alquila a organizadores, así que no puede
ir siempre con los colores de uno: cada cliente tiene que poder verlo con
los suyos. Todo el color sale de estos valores; cambiándolos, cambia
entero.
Las dos versiones -rgb existen porque hay 86 sitios que usan el mismo color
con transparencia (rgba(...,.09)), y en CSS no se puede sacar el rgb de un
#hex. Se guarda el triplete aparte y se usa rgba(var(--tinta-rgb),.09).
Lo de aquí abajo (el :root) es la paleta HEREDADA del Club La Vía, que es de
donde salió el sistema. NO se borra: es la que heredan los temas, y cada uno
cambia solo lo suyo. Lo que se mira en pantalla es el tema `pozo`, que va
más abajo y es el de por defecto.
============================================================ */
:root{
color-scheme:dark; /* los nativos (opciones) se pintan oscuros */
/* superficie */
--noche:#0c110d; --superficie:#131a14; --superficie-alta:#182119;
--cristal:rgba(19,26,20,.72);
/* la firma */
--linea:#eef0e9; --linea-halo:rgba(238,240,233,.35);
/* color */
--bola:#b5bd3c; --bola-tinta:#1b2000; --verde-club:#006e1c;
--vivo:#4ade80; --borrador:#e3b23c; --hecho:#7f8a99; --peligro:#e58e8e;
/* tinta */
--tinta:#f2f4ec; --tinta-suave:#9aa392;
/* los dos tripletes de los que sale el 95% del color */
--tinta-rgb:238,240,233;
--acento-rgb:181,189,60;
--hairline:rgba(var(--tinta-rgb),.09);
/* forma y movimiento */
--radio-shell:20px; --radio-core:14px; --radio-control:10px;
--fisica:cubic-bezier(.32,.72,0,1);
/* alias de la paleta vieja: la Tarea 10 borró los que ya nadie usaba.
Quedan solo dos, y ninguno es un swap mecánico a un token nuevo:
--olive-dim: tono oliva oscuro propio, sin equivalente en la paleta nueva.
--ball: lo consume js/parejas.js con un var() inline (fuera del
alcance de esta tarea, que solo toca css/admin.css). */
--olive-dim:#8b9130; --ball:var(--bola);
}
/* ---- LOS TEMAS ----------------------------------------------------------
Cada uno solo cambia lo que tiene que cambiar; el resto lo hereda de arriba.
Se elige desde el panel y se recuerda en el navegador.
-------------------------------------------------------------------------- */
/* ══ POZO EVENTOS · el de por defecto ══
El lenguaje aprobado con Pepe, letra por letra: negro, superficie #141414,
borde #2A2A2A, oro #B49058 y el rojo #E03131 SOLO para lo que está vivo o va
mal. Es el mismo que ya llevan el marcador y el mando, y por eso las
pantallas se pueden abrir una encima de otra.
Cómo se traduce a los tokens que ya existían, y por qué:
· --linea era LA FIRMA de La Vía (la línea blanca de la pista) y se usa en
86 sitios con transparencia. Aquí el blanco se queda blanco: sobre negro
hace de filete y no compite con el oro. Lo que cambia es el ACENTO.
· --bola es el color de lo que se pulsa. Pasa a ser el oro. Su tinta
(--bola-tinta) es negro, porque el oro es claro y el texto encima tiene
que leerse.
· --vivo era un verde ácido. En esta casa «vivo» se dice en ROJO, y es lo
único que lo lleva. Se usa el #FF6161 y no el #E03131 porque en el panel
--vivo cae siempre en TEXTO pequeño: el #E03131 sobre #141414 da 4,2:1, y
texto normal necesita 4,5:1. El #E03131 se queda donde manda de verdad
(marcos y puntos), que no es texto y no tiene que pasar ese listón.
· --verde-club y --olive-dim son tonos de apoyo heredados: al oro rebajado,
que es lo que hace de filete en el resto de la casa. */
[data-tema=pozo]{
--noche:#000; --superficie:#141414; --superficie-alta:#1C1C1C;
--cristal:rgba(11,11,11,.78);
--linea:#ffffff; --linea-halo:rgba(255,255,255,.28);
--bola:#B49058; --bola-tinta:#000;
--vivo:#FF6161; --borrador:#B49058; --hecho:#9E9E9E; --peligro:#FF6161;
--tinta:#ffffff; --tinta-suave:#9E9E9E;
--tinta-rgb:255,255,255;
--acento-rgb:180,144,88;
--olive-dim:#8A6E42; --verde-club:#6E5836;
/* El borde de la casa es #2A2A2A. La regla heredada
—rgba(var(--tinta-rgb),.09)— cae sobre #141414 justo en #292929, o sea a un
punto: se deja escrito el valor bueno para que sea el de la marca y no una
casualidad aritmética que se rompa el día que alguien toque ese .09. */
--hairline:#2A2A2A;
}
/* Grafito · neutro a propósito: es el que se le enseña a un organizador que
todavía no es cliente, y tiene que parecer un producto y no la web de otro. */
[data-tema=grafito]{
--noche:#0b0d10; --superficie:#14171c; --superficie-alta:#1b1f26;
--cristal:rgba(20,23,28,.72);
--linea:#e8ecf2; --linea-halo:rgba(232,236,242,.32);
--bola:#5b8def; --bola-tinta:#04122e;
--tinta:#eef1f6; --tinta-suave:#98a1b0;
--tinta-rgb:232,236,242;
--acento-rgb:91,141,239;
--olive-dim:#3f6ac2; --verde-club:#2f5f9e;
}
/* Pizarra · el más sobrio de todos, sin color de marca. Para cuando el cliente
quiere que no distraiga nada. */
[data-tema=pizarra]{
--noche:#0d0f11; --superficie:#161a1d; --superficie-alta:#1d2226;
--cristal:rgba(22,26,29,.72);
--linea:#eceff2; --linea-halo:rgba(236,239,242,.3);
--bola:#c8ced6; --bola-tinta:#14181c;
--tinta:#f0f3f6; --tinta-suave:#939ca6;
--tinta-rgb:236,239,242;
--acento-rgb:200,206,214;
--olive-dim:#8e97a3; --verde-club:#5b6875;
}
/* Ámbar · para clubes con identidad cálida (naranjas, tierras). */
[data-tema=ambar]{
--noche:#100c08; --superficie:#1a1510; --superficie-alta:#221b14;
--cristal:rgba(26,21,16,.72);
--linea:#f6efe6; --linea-halo:rgba(246,239,230,.32);
--bola:#e0954d; --bola-tinta:#241202;
--tinta:#f7f1e9; --tinta-suave:#a89684;
--tinta-rgb:246,239,230;
--acento-rgb:224,149,77;
--olive-dim:#b6742f; --verde-club:#8a5722;
}
/* Granate · el otro extremo, para clubes con rojo o burdeos. */
[data-tema=granate]{
--noche:#0f0a0c; --superficie:#1a1216; --superficie-alta:#22181d;
--cristal:rgba(26,18,22,.72);
--linea:#f5eaee; --linea-halo:rgba(245,234,238,.32);
--bola:#d4607a; --bola-tinta:#2a0611;
--tinta:#f7edf1; --tinta-suave:#a88b95;
--tinta-rgb:245,234,238;
--acento-rgb:212,96,122;
--olive-dim:#a83f58; --verde-club:#7d2b3f;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--noche);color:var(--tinta);line-height:1.5}
/* el foco de la torre: luz cayendo desde arriba, apenas perceptible */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(900px 340px at 50% -80px,rgba(var(--tinta-rgb),.07),transparent 70%)}
.display{font-family:"Archivo Narrow",sans-serif}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
/* 16px: por debajo, Safari en iPhone hace zoom cada vez que tocas un campo.
El panel se usa EN LA PISTA, metiendo decenas de resultados desde el móvil,
así que ese zoom se sufre en cada toque. */
/* Las OPCIONES del desplegable las pinta el sistema, no la pagina: en
navegadores que ignoran el color-scheme de :root el popup sale blanco y
el texto claro heredado se vuelve invisible (blanco sobre blanco; lo
cazo Andres en la recepcion, 18-ago). Colores fijos: a prueba de todo. */
select option{background:#17181c;color:#f2f4ec}
input,select,textarea{font-family:inherit;font-size:16px;background:rgba(var(--tinta-rgb),.055);
border:1px solid rgba(var(--tinta-rgb),.14);color:var(--tinta);border-radius:var(--radio-control);
padding:10px 13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--linea);
box-shadow:0 0 0 3px rgba(var(--tinta-rgb),.12)}
/* el anillo va en outline: ningún box-shadow:none puede apagarlo */
:is(button,a,[tabindex]):focus-visible{outline:2px solid rgba(var(--tinta-rgb),.45);outline-offset:2px}
button{font-size:14px;border-radius:999px;border:1px solid var(--bola);padding:10px 18px;
background:var(--bola);color:var(--bola-tinta);font-weight:700;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 12px rgba(var(--acento-rgb),.25)}
button:disabled{opacity:.55;cursor:not-allowed}
@media (prefers-reduced-motion: no-preference){
input,select,textarea{transition:border-color .25s var(--fisica),box-shadow .25s var(--fisica)}
button{transition:transform .3s var(--fisica),box-shadow .3s var(--fisica)}
button:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(var(--acento-rgb),.35)}
button:active{transform:scale(.98)}
button:disabled:hover{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 12px rgba(var(--acento-rgb),.25)}
#sections button{transition:color .25s var(--fisica)}
}
/* botón secundario (fantasma): lo usan todas las pantallas */
.sec,button.sec{background:rgba(var(--tinta-rgb),.06);border:1px solid rgba(var(--tinta-rgb),.13);
color:#cdd3c6;font-weight:600;font-size:12.5px;padding:8px 15px;box-shadow:none}
.sec:hover{background:rgba(var(--tinta-rgb),.11)}
button.peligro{background:transparent;border-color:rgba(229,142,142,.25);color:var(--peligro);box-shadow:none}
/* ---- login: el logo bajo el foco y la línea pintada ---- */
#loginView{padding:64px 20px 0;text-align:center;position:relative;z-index:1}
#loginView .logo.big{width:92px;height:92px;border-radius:50%;object-fit:cover;background:#fff;
border:2px solid rgba(var(--tinta-rgb),.2);display:block;margin:0 auto 18px;
filter:drop-shadow(0 8px 28px rgba(0,0,0,.5))}
#loginView h1{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;
text-transform:uppercase;font-size:30px;line-height:1.1}
#loginView .linea-h{width:54px;height:3px;border-radius:3px;background:var(--linea);
box-shadow:0 0 12px var(--linea-halo);margin:14px auto 26px}
#loginForm{display:flex;flex-direction:column;gap:10px;text-align:left}
#loginForm input{width:100%}
#loginForm button{margin-top:6px}
/* Entrar con Google: en blanco porque es como Google pide enseñar su botón,
y el mismo dibujo que en reservas — quien ya entró allí lo reconoce. */
#loginForm .btn-google{display:flex;align-items:center;justify-content:center;gap:10px;
margin-top:0;background:#fff;color:#1f1f1f;border:1px solid #dadce0;
font-weight:600;font-size:14.5px;box-shadow:none}
#loginForm .btn-google:hover{box-shadow:0 2px 12px rgba(0,0,0,.4)}
.o-bien{display:flex;align-items:center;gap:12px;margin:4px 0 0;
color:var(--tinta-suave);font-size:12.5px}
.o-bien::before,.o-bien::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28}
.err{color:#ff8a80;font-size:13px;min-height:1.2em}
.hint{color:var(--tinta-suave);font-size:12px}
#loginView .hint{text-align:center}
#loginView .hint a{color:var(--bola);text-decoration:none}
/* ---- panel: cabecera de cristal y la línea pintada ---- */
#panelView header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
height:62px;padding:0 22px;background:var(--cristal);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid rgba(var(--tinta-rgb),.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#panelView header .logo{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff}
#panelView header #whoami{font-size:12.5px;color:var(--tinta-suave)}
#panelView header .verweb{margin-left:auto;font-size:12.5px;color:var(--tinta-suave);
text-decoration:none;white-space:nowrap}
#panelView header .verweb:hover{color:var(--tinta)}
#panelView header button{background:rgba(var(--tinta-rgb),.07);border:1px solid rgba(var(--tinta-rgb),.14);
color:#cdd3c6;font-weight:600;font-size:12.5px;padding:7px 16px;box-shadow:none}
#panelView header button:hover{background:rgba(var(--tinta-rgb),.13)}
/* La barra se DESLIZA ella sola en vez de empujar la página. Con seis
pestañas mide 525 px, y en un móvil de 390 se salía por la derecha
arrastrando toda la pantalla de lado. El panel se usa a pie de pista con
una mano: que se mueva la barra y no la página. */
#sections{display:flex;gap:30px;padding:0 22px;border-bottom:1px solid rgba(var(--tinta-rgb),.08);
position:relative;z-index:1;background:transparent;
overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#sections::-webkit-scrollbar{display:none}
#sections button{flex:none;white-space:nowrap}
#sections button{background:none;border:none;box-shadow:none;border-radius:0;
padding:15px 2px 12px;font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;
text-transform:uppercase;letter-spacing:.8px;font-size:14.5px;color:var(--tinta-suave);
position:relative}
#sections button:hover{color:#e6eadf;transform:none}
#sections button.on{color:var(--tinta)}
/* LA FIRMA: la línea blanca de la pista bajo la sección activa */
#sections button.on::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-1px;
height:3px;border-radius:3px;background:var(--linea);box-shadow:0 0 12px var(--linea-halo)}
@media (max-width:480px){
#sections{gap:18px;padding:0 14px}
#panelView header{padding:0 14px}
}
#screen{position:relative;z-index:1}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.thumb{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--superficie-alta);border:1px solid var(--hairline)}
.crumb{font-size:13px;color:var(--tinta-suave);margin:4px 0 12px}
/* ---- conmutador meter resultados / ver el cuadro ---- */
.modos{display:inline-flex;background:rgba(var(--tinta-rgb),.05);border:1px solid rgba(var(--tinta-rgb),.1);
border-radius:999px;padding:4px;gap:3px;margin-bottom:14px}
.modos button{background:none;border:none;box-shadow:none;padding:7px 16px;border-radius:999px;
font-size:12.5px;font-weight:600;color:var(--tinta-suave)}
.modos button.on{background:var(--linea);color:#10150f;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.cuadros{display:inline-flex;gap:8px;margin:0 0 12px}
.cuadros button{background:rgba(var(--tinta-rgb),.06);border:1px solid rgba(var(--tinta-rgb),.13);
color:#cdd3c6;font-weight:600;font-size:12.5px;padding:8px 15px;box-shadow:none}
.cuadros button.on{border-color:var(--linea);color:var(--tinta)}
.cartel-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
/* el icono del cartel va en CSS (::before + máscara): cartel.js reescribe el
textContent del botón al descargar y un SVG inline no sobreviviría */
/* mismo trazado que RUTAS.cartel en js/iconos.js: si cambia uno, cambia el otro */
.cartel-bar{--icono-cartel:url("data:image/svg+xml;utf8,, y un no resuelve var(--…). Si estas
reglas usaran los tokens, la imagen descargada saldría en negro sobre negro.
Por eso el cambio de piel de Pozo hay que hacerlo DOS veces: en los tokens
de arriba, para la pantalla, y aquí abajo, para la foto.
La traducción, uno a uno:
#0b2650 (azul pista) → #0B0B0B el fondo del cartel
#123566 (caja) → #141414 la superficie
#26518f (borde) → #2A2A2A el filete
#2f5f9e (llaves) → #3A3025 las líneas que unen los partidos
#e3e63c (amarillo) → #B49058 el oro: club, rondas, categoría
#f4cf5f (oro viejo) → #B49058 el marco de la final y del campeón
#5ddc7a (verde ganador) → #ffffff quien pasa va en blanco y en negrita
#a9bede / #7f9ac4 (gris) → #9E9E9E lo secundario
El verde ácido era de La Vía. Aquí «ha ganado» se dice como en el resto de
la casa: blanco quien pasa, gris apagado quien cae, y el set ganado en oro.
Un verde sobre este negro rompe la calma, que es lo que se ha comprado. */
.poster{width:1240px;background:#0B0B0B;color:#fff;
font-family:system-ui,-apple-system,"Segoe UI",sans-serif;padding:0 0 30px}
/* el que se rasteriza vive fuera de pantalla; el de la vista, no */
#poster{position:absolute;left:-99999px;top:0}
.poster .pt{text-align:center;padding:26px 24px 20px}
.poster .pt .club{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;font-size:22px;letter-spacing:.03em;color:#B49058}
.poster .pt .torneo{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;font-size:46px;line-height:1.04;margin-top:3px}
.poster .pcat{display:block;width:fit-content;margin:14px auto 0;background:#B49058;color:#0B0B0B;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:21px;padding:9px 30px;border-radius:999px}
.poster .prh{display:flex;padding:26px 26px 8px}
.poster .prh span{flex:1;text-align:center;font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:17px;color:#B49058}
.poster .llaves{display:flex;padding:0 26px}
.poster .ronda{flex:1;display:flex;flex-direction:column;justify-content:space-around;position:relative}
.poster .grupo{display:flex;flex-direction:column;justify-content:space-around;flex:1;position:relative}
/* vertical que une los dos partidos del grupo, de centro a centro */
.poster .grupo::after{content:'';position:absolute;right:0;top:25%;bottom:25%;border-right:2px solid #3A3025}
/* tramo que sale de esa vertical hacia la ronda siguiente */
.poster .grupo::before{content:'';position:absolute;right:-12px;top:50%;width:12px;border-top:2px solid #3A3025}
.poster .part{position:relative;margin:4px 12px 4px 0}
.poster .part::after{content:'';position:absolute;left:100%;top:50%;width:12px;border-top:2px solid #3A3025}
/* la columna de previa va en rejilla: cada partido se coloca en la fila del
partido de 1ª ronda al que alimenta, para que se vea por dónde entra */
.poster .ronda.colPrevia{display:grid;grid-template-rows:repeat(var(--filas),1fr);align-items:center}
.poster .ronda.colPrevia .enFila{min-width:0;display:flex;flex-direction:column;gap:10px}
.poster .ronda:last-child .grupo::after,
.poster .ronda:last-child .grupo::before,
.poster .ronda:last-child .part::after{display:none}
.poster .caja{background:#141414;border:1px solid #2A2A2A;border-radius:9px;overflow:hidden}
.poster .ronda:last-child .caja{border:2px solid #B49058}
.poster .pj{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:15px;line-height:1.25}
.poster .pj + .pj{border-top:1px solid #2A2A2A}
.poster .pj .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.poster .pj.g .nm{color:#ffffff;font-weight:700}
.poster .pj.p{opacity:.62}
.poster .pj.bye .nm{color:#9E9E9E;font-style:italic;font-weight:400}
.poster .pj .sc{flex:none;display:flex;gap:6px}
.poster .pj .sc b{font-family:"Archivo Narrow",sans-serif;font-size:15px;min-width:12px;text-align:center;color:#9E9E9E}
.poster .pj .sc b.g{color:#B49058}
.poster .cuando{font-size:11px;color:#9E9E9E;text-align:center;padding:4px 6px;border-top:1px solid #2A2A2A;background:rgba(0,0,0,.16)}
.poster .campeon{margin:26px 26px 0;border:2px solid #B49058;border-radius:14px;text-align:center;padding:18px;background:rgba(180,144,88,.10)}
.poster .campeon .l{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#B49058;font-weight:700}
.poster .campeon .q{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;font-size:32px;margin-top:4px}
/* Los patrocinadores del club, al pie del cartel. La hoja de logos viene con
fondo blanco, así que en vez de pegar una plancha blanca sobre el azul se
monta como una tarjeta con esquinas redondeadas: se lee como una pieza
puesta a propósito y no como un recorte. */
.poster .ppatro{margin-top:30px;padding:0 26px;text-align:center}
.poster .ppatro .l{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:#9E9E9E;margin-bottom:10px}
/* Bloque centrado con ancho fijo, NO inline-block: html2canvas (1.4.1) no
dibuja imágenes dentro de un inline-block y la tarjeta salía vacía en la
imagen descargada. Medido con píxeles: inline-block 63 de tinta, bloque
36.489. El ancho es la imagen (540) más el relleno (18 y 18). */
.poster .ppatro .caja{display:block;width:576px;margin:0 auto;background:#fff;border-radius:14px;padding:14px 18px}
.poster .ppatro img{display:block;width:540px;height:auto}
.poster .ppie{margin-top:18px;text-align:center;font-size:15px;color:#9E9E9E}
/* "Ver el cuadro" usa el mismo render que el cartel descargable, así que
lo que ves en pantalla es exactamente la imagen que te vas a bajar.
A 1240px cabe justo en el panel; en pantallas menores, se desplaza. */
/* padding-left: las pestañas "+ previa" cuelgan a la IZQUIERDA de los partidos
de 1ª ronda, fuera del cartel. Sin este hueco (y con el overflow de abajo en
visible) el recorte se las comía: la pestaña quedaba cortada y no se podía
pulsar. Solo afecta a la pantalla; el cartel descargable no cambia. */
.vista-scroll{overflow-x:auto;padding:14px 0 4px 84px}
.vista-scroll .poster{border-radius:14px;overflow:visible}
/* los partidos se pinchan para editarlos. Solo dentro de .vista-scroll: el
div que se rasteriza no lleva nada de esto y la imagen sale igual. */
.vista-scroll .part[data-r]{cursor:pointer}
.vista-scroll .part[data-r] .caja{transition:border-color .12s,box-shadow .12s}
.vista-scroll .part[data-r]:hover .caja{border-color:#e3e63c;box-shadow:0 0 0 2px rgba(227,230,60,.35)}
.pista{text-align:center;margin-top:10px}
/* alta de parejas sin salir del cuadro */
.altaBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px;padding-top:14px;border-top:1px solid var(--hairline)}
.altaBar button{background:var(--olive-dim);border:0;border-radius:10px;padding:10px 18px;font-weight:700;font-size:14px;color:#12120f}
.altaBar button:disabled{opacity:.5}
.altaBar .hint{margin:0;text-align:left;flex:1;min-width:220px}
/* ventana del marcador encima del cuadro */
/* elegir por dónde entra el ganador de una previa */
/* Montar el cuadro desde el propio cuadro: las dos plazas de un partido de 1ª
ronda, para poner o quitar la pareja que va en cada una. */
/* Pestañita para meter una previa que entre en ese partido. Va pegada al
borde izquierdo del cruce, que es donde el ojo la busca: la previa llega
por la izquierda. Solo existe en pantalla, nunca en el cartel descargable. */
.vista-scroll .part{position:relative}
.tabPrevia{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:6px;
white-space:nowrap;background:rgba(227,230,60,.14);border:1px solid rgba(227,230,60,.45);
color:#e3e63c;border-radius:8px;padding:8px 11px;font-size:12px;font-weight:700;
line-height:1;opacity:0;transition:opacity .15s;cursor:pointer}
.vista-scroll .part:hover .tabPrevia,.tabPrevia:focus{opacity:1}
.tabPrevia:hover{background:#e3e63c;color:#0b2650}
/* en táctil no hay ratón que pase por encima: siempre visibles, más tenues */
@media (hover:none){ .tabPrevia{opacity:.55} }
.pslots{display:flex;flex-direction:column;gap:6px;padding:11px 14px 0}
.pslot{display:flex;align-items:center;gap:10px;justify-content:space-between;background:rgba(var(--tinta-rgb),.04);border:1px solid var(--hairline);border-radius:10px;padding:8px 10px 8px 12px}
.pslot .etq{font-size:13px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pslot .etq.libre{color:var(--tinta-suave);font-weight:500;font-style:italic}
.pslot .etq.bye{color:var(--ball,#e3e63c);font-weight:700}
.pslot .nota{font-size:11px;color:var(--tinta-suave);font-style:normal;flex:none}
.pslot button{flex:none;border:0;border-radius:8px;padding:7px 13px;font-size:12px;font-weight:700;min-height:34px}
.pslot .pon{background:var(--olive-dim);color:#12120f}
.pslot .quita{background:transparent;border:1px solid var(--hairline);color:var(--tinta-suave)}
.pslot .quita:hover{color:var(--peligro,#e06666);border-color:currentColor}
.destino{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 14px 0;font-size:13px;color:var(--tinta-suave)}
.destino select{flex:1;min-width:150px;background:var(--superficie-alta);border:1px solid var(--hairline);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:16px;font-weight:600;color:var(--tinta)}
.modal{position:fixed;inset:0;z-index:80;background:var(--cristal);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal-caja{position:relative;background:var(--superficie);border:1px solid var(--hairline);border-radius:16px;padding:16px;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modal-x{position:absolute;top:10px;right:10px;z-index:2;background:transparent;border:0;font-size:20px;line-height:1;padding:6px 9px;color:var(--tinta-suave)}
.modal-x:hover{color:var(--tinta)}
.modal-caja .shell{margin:0}
body.sin-scroll{overflow:hidden}
/* ---- marcador (Cuadro) ---- */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
@media (max-width:767px){.mgrid{grid-template-columns:1fr}}
.mgrid .shell{margin:0}
/* repaintMatch reemplaza el shell entero en cada pulsación del teclado:
sin esto, la animación de entrada se re-dispararía con cada número */
.shell.m-shell{animation:none}
.m-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.m-h .no{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;
text-transform:uppercase;font-size:13px;color:var(--tinta-suave);letter-spacing:.5px}
.tag{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.tag.ok{background:rgba(74,222,128,.12);color:var(--vivo)}
.tag.wo{background:rgba(227,178,60,.12);color:var(--borrador)}
.tag.prog{background:rgba(var(--tinta-rgb),.08);color:var(--tinta-suave)}
.board .hdr{display:grid;grid-template-columns:1fr 38px 38px 38px;gap:6px;
font-size:10px;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.5px;
padding-bottom:4px}
.board .hdr span:first-child{text-align:left}
.board .hdr span{text-align:center}
.brow{display:grid;grid-template-columns:1fr 38px 38px 38px;gap:6px;align-items:center;
padding:7px 0;position:relative}
.brow .who{display:flex;align-items:center;gap:9px;min-width:0}
.brow .av{width:30px;height:30px;border-radius:9px;object-fit:cover;flex:none;
background:linear-gradient(160deg,#22452a,#16301c);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.brow .nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow.winner::before{content:'';position:absolute;left:-12px;top:6px;bottom:6px;width:3px;
border-radius:3px;background:var(--bola);box-shadow:0 0 10px rgba(var(--acento-rgb),.45)}
.brow.winner .nm{color:#cdd455}
.dePrevia{font-size:9px;font-weight:700;letter-spacing:.5px;color:#cdd455;
border:1px solid rgba(var(--acento-rgb),.3);border-radius:999px;padding:2px 7px;margin-left:7px;flex:none}
.cell{height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
font-family:"Archivo Narrow",sans-serif;font-weight:700;font-size:17px;
background:rgba(var(--tinta-rgb),.05);border:1px solid rgba(var(--tinta-rgb),.12);
box-shadow:none;padding:0;color:var(--tinta);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: no-preference){
.cell{transition:border-color .2s var(--fisica)}
}
.cell:hover{border-color:rgba(var(--tinta-rgb),.35);transform:none}
.cell.won{background:rgba(var(--acento-rgb),.14);border-color:rgba(var(--acento-rgb),.45);color:#cdd455}
.cell.empty{color:#5a6155}
.cell.sel{border-color:var(--linea);box-shadow:0 0 0 3px rgba(var(--tinta-rgb),.14)}
.resume{font-size:12px;color:var(--tinta-suave);padding:9px 0 3px;
border-top:1px solid rgba(var(--tinta-rgb),.07);margin-top:8px}
.resume b{color:var(--tinta)}
.resume.malo{color:var(--peligro)}
.pad{border-radius:12px;background:rgba(10,14,11,.75);border:1px solid rgba(var(--tinta-rgb),.1);
padding:12px;margin-top:10px}
.pad .t{font-size:11.5px;color:var(--tinta-suave);margin-bottom:9px}
.pad .nums{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.pad .nums button{height:34px;padding:0;border-radius:8px;font-family:"Archivo Narrow",sans-serif;
font-weight:700;font-size:15px;background:rgba(var(--tinta-rgb),.06);
border:1px solid rgba(var(--tinta-rgb),.12);color:var(--tinta);box-shadow:none}
.pad .nums button:hover{background:rgba(var(--tinta-rgb),.14);transform:none}
.pad .nums button.on{background:var(--linea);color:#10150f;border-color:var(--linea)}
/* en el móvil, el teclado vuelve a 4 columnas gordas: se teclea con el pulgar
en la pista (la spec pide táctiles de 40px; con 8 columnas salían de ~27px) */
@media (max-width:620px){
.pad .nums{grid-template-columns:repeat(4,1fr);gap:8px}
.pad .nums button{height:44px}
}
.destino{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tinta-suave);margin-top:10px}
.when{display:flex;gap:8px;margin-top:12px}
.when input{flex:1;min-width:0}
.when .court{max-width:90px}
.acts{margin-top:12px}
.acts .save{width:100%}
.extra{display:flex;gap:8px;margin-top:8px}
.extra button{flex:1}
/* ---- las apuestas de ese cruce (solo organización) ----
Va al pie del editor y se lee como una nota, no como otra fila de mandos: lo
que se viene a hacer aquí es meter un resultado. De ahí el filete de arriba y
el cuerpo pequeño. Los estados usan los tokens de siempre: --vivo para lo que
está abierto (se puede apostar AHORA MISMO), --tinta-suave para lo cerrado y
el oro para lo ya liquidado y pagado. */
.apuestas-cruce{margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.apuestas-cruce .ac-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.apuestas-cruce .ac-t{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--tinta-suave)}
.apuestas-cruce .ac-estado{font-size:10px;font-weight:800;letter-spacing:.12em;
padding:2px 7px;border-radius:4px;border:1px solid currentColor}
.apuestas-cruce .ac-abierto{color:var(--vivo)}
.apuestas-cruce .ac-cerrado{color:var(--tinta-suave)}
.apuestas-cruce .ac-liquidado,.apuestas-cruce .ac-anulado{color:var(--bola)}
.apuestas-cruce .ac-dato{font-size:12px;color:var(--tinta-suave)}
.apuestas-cruce .ac-cuotas{font-size:13px;font-weight:800;color:var(--bola);
font-variant-numeric:tabular-nums;margin-left:auto}
.apuestas-cruce .ac-no{font-size:12px;color:var(--tinta-suave);margin:7px 0 0}
.apuestas-cruce .ac-btns{display:flex;gap:8px;margin-top:9px}
.apuestas-cruce .ac-btns button{flex:1}
.apuestas-cruce .ac-pie{font-size:11px;line-height:1.4;color:var(--tinta-suave);
opacity:.85;margin:9px 0 0}
/* ---- parejas: aviso, lista y bloque de pegado ---- */
.previa{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:13px;
background:rgba(var(--acento-rgb),.07);border:1px solid rgba(var(--acento-rgb),.22);margin-bottom:14px}
.previa .linea-v{width:3px;align-self:stretch;border-radius:3px;background:var(--bola);
box-shadow:0 0 10px rgba(var(--acento-rgb),.4);flex:none}
.previa-txt{font-size:12.5px;color:#cdd3c6;flex:1}
.previa-txt b{color:var(--tinta)}
.previa button{margin-left:auto;flex:none;font-size:12px;padding:8px 14px}
.previa.warn{border-color:rgba(227,178,60,.35)}
.lista-parejas{padding:8px 14px}
.pl{display:flex;flex-wrap:wrap;align-items:center;gap:13px;padding:11px 6px}
.pl + .pl{border-top:1px solid rgba(var(--tinta-rgb),.07)}
.pl-top{display:flex;align-items:center;gap:13px;min-width:0;flex:1 1 220px}
.pl .n{font-family:"Archivo Narrow",sans-serif;font-weight:700;font-size:16px;
color:var(--tinta-suave);width:26px;text-align:right;font-variant-numeric:tabular-nums;flex:none}
.pl .ph{width:40px;height:40px;border-radius:12px;flex:none;object-fit:cover;
background:linear-gradient(160deg,#22452a,#16301c);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
display:flex;align-items:center;justify-content:center;color:#7fd694;cursor:pointer}
.pl .ph.pend{background:rgba(var(--tinta-rgb),.05);border:1px dashed rgba(var(--tinta-rgb),.22);
color:var(--tinta-suave)}
.pl .nm{font-weight:600;font-size:13.5px;min-width:0}
.pl .nm small{display:block;font-weight:400;color:var(--tinta-suave);font-size:11px}
.pl .nm small.ok{color:var(--vivo)}
.pl-acts{margin-left:auto;display:flex;gap:6px;flex:none;flex-wrap:wrap}
.pl .ic{width:32px;height:32px;padding:0;border-radius:9px;display:flex;align-items:center;
justify-content:center;background:rgba(var(--tinta-rgb),.055);border:1px solid rgba(var(--tinta-rgb),.12);
color:#cdd3c6;font-size:13px;font-weight:400;box-shadow:none}
.pl .ic:hover{background:rgba(var(--tinta-rgb),.12)}
.pl .ic.wide{width:auto;padding:0 11px;font-size:10.5px;font-weight:700;
text-transform:uppercase;letter-spacing:.5px}
.pl .ic.armado{border-color:var(--bola);color:#cdd455}
.ic svg{display:block;margin:auto}
/* .previa también viste el aviso: en filas y botones se anula el borde y el margen que no tocan */
.pl.previa{background:linear-gradient(90deg,rgba(var(--acento-rgb),.06),transparent 60%);
border-radius:10px;border-color:transparent;margin-bottom:0}
.pl .ic.previa{background:rgba(var(--acento-rgb),.14);color:#cdd455;border-color:rgba(var(--acento-rgb),.3);margin-bottom:0}
.warnbox{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#cdd3c6;
padding:11px 14px;border-radius:13px;border:1px solid rgba(var(--tinta-rgb),.12);
background:rgba(var(--tinta-rgb),.04);margin-bottom:14px}
.traer{display:flex;align-items:center;gap:14px;font-size:12.5px;color:#cdd3c6;
padding:13px 16px;border-radius:13px;border:1px solid rgba(var(--tinta-rgb),.12);
background:rgba(var(--tinta-rgb),.04);margin-bottom:14px}
.traer button{margin-left:auto;flex:none;font-size:12px;padding:8px 14px}
.box{margin-top:16px}
.box .t{font-size:12px;color:var(--tinta-suave);margin-bottom:6px}
.box textarea{width:100%;min-height:96px;resize:vertical}
.box .h{font-size:11px;color:var(--tinta-suave);margin:6px 0 10px}
.logo{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.logo.big{width:96px;height:96px;display:block;margin:0 auto 16px}
/* ---- bisel doble: la tarjeta como hardware (lo usan todas las pantallas) ---- */
.shell{background:rgba(var(--tinta-rgb),.045);border:1px solid var(--hairline);
border-radius:var(--radio-shell);padding:7px;margin-bottom:16px}
.core{background:linear-gradient(170deg,var(--superficie-alta),var(--superficie) 60%);
border-radius:var(--radio-core);padding:18px 20px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
@media (prefers-reduced-motion: no-preference){
.shell{transition:transform .35s var(--fisica),box-shadow .35s var(--fisica);
animation:sube .7s cubic-bezier(.16,1,.3,1) backwards}
.shell:nth-child(2){animation-delay:.08s}
.shell:nth-child(3){animation-delay:.16s}
.shell:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
@keyframes sube{from{opacity:0;transform:translateY(18px)}}
}
/* ---- la cabecera de cada pantalla: título y su frase, en una línea ---- */
.pantalla-cab{display:flex;flex-direction:column;gap:4px;margin:0 0 16px}
.pantalla-cab h2,.pantalla-cab .crumb{margin:0}
.pantalla-cab .hint{margin:0;font-size:13px}
.hint.vacio{grid-column:1/-1;padding:22px 0;font-size:14px}
/* ---- torneos: la rejilla de ediciones (repaso de septiembre 2026) ----
Antes cada edición era una tarjeta a todo el ancho con tres números
gigantes y tres botones apilados: medio panel vacío. Ahora la rejilla
pone dos por fila en pantallas anchas y una en el móvil; cada tarjeta se
lee de arriba abajo: nombre y estado, fechas y sede, el resumen en una
frase, y una fila de acciones con «Abrir» primero y «Borrar» al fondo. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.tgrid .shell{margin:0}
.tcard .core{display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box}
.tcard.activo{border-color:rgba(var(--acento-rgb),.35)}
.tcard.activo .core{box-shadow:inset 3px 0 0 var(--bola),inset 0 1px 0 rgba(255,255,255,.07)}
.tcab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tname{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;
text-transform:uppercase;font-size:22px;line-height:1.05;letter-spacing:.3px;margin:0;min-width:0}
.tcab .estado{flex:none;margin-top:2px}
.tmeta{color:var(--tinta-suave);font-size:12.5px;margin:0}
.tresumen{margin:2px 0 0;font-size:13px;color:var(--tinta-suave);font-variant-numeric:tabular-nums;min-height:1.3em}
.tacts{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;
border-top:1px solid rgba(var(--tinta-rgb),.08);min-width:0}
.tacts .ges{flex:none;padding:9px 20px}
.tacts select{flex:1 1 120px;min-width:0;font-size:13px;padding:8px 12px;border-radius:999px;
background:rgba(var(--tinta-rgb),.06);border-color:rgba(var(--tinta-rgb),.13);color:#cdd3c6}
.tacts .quitar{margin-left:auto;flex:none;background:none;border:none;box-shadow:none;
color:var(--peligro);font-size:12px;font-weight:600;padding:6px 4px;opacity:.7}
.tacts .quitar:hover{opacity:1;transform:none;box-shadow:none;text-decoration:underline}
.crear .abrir{width:100%;padding:18px;border-radius:var(--radio-shell);font-size:14px}
.estado{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
padding:5px 12px;border-radius:999px;border:1px solid rgba(var(--tinta-rgb),.12);
background:rgba(var(--tinta-rgb),.06);color:var(--tinta-suave)}
.estado .dot{width:7px;height:7px;border-radius:999px;background:var(--tinta-suave)}
.estado.live{background:rgba(74,222,128,.1);color:var(--vivo);border-color:rgba(74,222,128,.22)}
.estado.live .dot{background:var(--vivo);box-shadow:0 0 8px rgba(74,222,128,.6)}
@media (prefers-reduced-motion: no-preference){
.estado.live .dot{animation:late 2.4s ease-in-out infinite}
@keyframes late{0%,100%{opacity:1}50%{opacity:.45}}
}
.estado.done{color:var(--hecho)} .estado.draft{color:var(--borrador)}
/* el marcador: números grandes separados por marcas de pista (lo usa el
Cuadro; las tarjetas de Torneos lo dejaron en septiembre de 2026) */
.marcador{display:flex;margin-top:16px}
.marcador .tstat{padding:0 22px;border-left:1px solid rgba(var(--tinta-rgb),.1);
font-size:10.5px;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.6px}
.marcador .tstat:first-child{padding-left:0;border-left:none}
.marcador .tstat b{display:block;font-family:"Archivo Narrow",sans-serif;font-weight:700;
font-size:30px;line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.marcador .tstat.jugados b{color:var(--bola)}
/* crear torneo */
.crear{margin-top:20px}
.crear .abrir{background:transparent;border:1px dashed rgba(var(--acento-rgb),.4);color:var(--bola);
font-weight:600;box-shadow:none}
.crear .abrir:hover{background:rgba(var(--acento-rgb),.08);border-style:solid}
.crear .form{background:var(--superficie);border:1px solid rgba(var(--acento-rgb),.35);
border-radius:13px;padding:16px;margin-top:10px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:11px;font-weight:600;color:var(--tinta-suave);text-transform:uppercase;
letter-spacing:.06em}
.campo input{background:var(--noche);border:1px solid var(--hairline);border-radius:9px;
padding:11px;color:var(--tinta);font-family:inherit;font-size:14px}
.campo.full{grid-column:1/-1}
/* ---- categorías: tarjetas y consolación ---- */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:767px){.cgrid{grid-template-columns:1fr}}
.cgrid .shell{margin:0}
.chead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;font-size:15px;
background:rgba(0,110,28,.28);color:#7fd694;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.cico.f{background:rgba(var(--acento-rgb),.16);color:#cdd455}
.cname{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;
text-transform:uppercase;font-size:17px}
.cname small{display:block;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-style:normal;
font-weight:400;text-transform:none;color:var(--tinta-suave);font-size:11.5px}
.cname .drawsel{font-size:11.5px;padding:2px 8px;border-radius:8px}
.barra{height:6px;border-radius:6px;background:rgba(var(--tinta-rgb),.09);overflow:hidden}
.barra i{display:block;height:100%;border-radius:6px;
background:linear-gradient(90deg,#8d942f,var(--bola));box-shadow:0 0 10px rgba(var(--acento-rgb),.4)}
.cnums{font-size:11.5px;color:var(--tinta-suave);margin:7px 0 13px}
.cnums b{color:var(--tinta);font-family:"Archivo Narrow",sans-serif;font-size:14px}
.consol{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--tinta-suave);padding:0 0 13px}
.sw{width:34px;height:20px;border-radius:999px;background:rgba(var(--tinta-rgb),.12);position:relative;
cursor:pointer;flex:none}
.sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;
background:var(--tinta-suave)}
.sw.on{background:rgba(74,222,128,.35)}
.sw.on i{left:16px;background:var(--vivo);box-shadow:0 0 8px rgba(74,222,128,.5)}
.cfoot{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid rgba(var(--tinta-rgb),.08);padding-top:13px}
.cfoot .pri{font-size:12px;padding:8px 14px}
/* ---- el mostrador de añadir categorías (repaso de septiembre 2026) ----
Fichas con su icono, como las tarjetas de arriba; las que ya están, tachadas
y apagadas; «Otra» despliega el formulario en el sitio. La nueva entra en
la rejilla con el destello de la recepción. */
.mostrador{margin-top:22px;padding:16px 18px 18px;border-radius:var(--radio-shell);
border:1px dashed rgba(var(--acento-rgb),.38);background:rgba(var(--acento-rgb),.04)}
.mostrador-cab{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-bottom:12px}
.mostrador-cab h3{margin:0;font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;
text-transform:uppercase;font-size:17px;letter-spacing:.3px}
.mostrador-cab p{margin:0;font-size:12.5px;color:var(--tinta-suave)}
.fichas{display:flex;gap:10px;flex-wrap:wrap}
.ficha{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;
background:rgba(var(--tinta-rgb),.06);border:1px solid rgba(var(--tinta-rgb),.13);
color:var(--tinta);font-weight:600;font-size:13px;box-shadow:none}
.ficha i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;font-size:12px;
background:rgba(0,110,28,.28);color:#7fd694;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.ficha i.f{background:rgba(var(--acento-rgb),.16);color:#cdd455}
.ficha.otra i{background:rgba(var(--acento-rgb),.22);color:var(--bola);font-style:normal;font-size:16px}
.ficha.puesta{opacity:.42;cursor:default;box-shadow:none}
.ficha.puesta span{text-decoration:line-through}
.ficha.puesta:hover{transform:none;box-shadow:none}
.ficha:not(.puesta):hover{background:rgba(var(--acento-rgb),.12);border-color:rgba(var(--acento-rgb),.45)}
.ficha.abierta{background:rgba(var(--acento-rgb),.14);border-color:rgba(var(--acento-rgb),.5)}
.mostrador-form{margin-top:14px;display:grid;grid-template-columns:110px 1fr 100px auto;gap:10px;align-items:end}
.mostrador-form .campo span{font-size:11px;font-weight:600;color:var(--tinta-suave);letter-spacing:.06em;text-transform:uppercase}
.mostrador-form select{background:var(--noche);border:1px solid var(--hairline);border-radius:9px;
padding:11px;color:var(--tinta);font-size:14px}
.mostrador-form button{padding:11px 18px}
.mostrador-form .err{grid-column:1/-1;margin:0}
@media (max-width:620px){
.mostrador-form{grid-template-columns:1fr 1fr}
.mostrador-form .campo:nth-child(2){grid-column:1/-1}
}
@media (prefers-reduced-motion: no-preference){
.barra i{transition:width .6s var(--fisica)}
.sw{transition:background .25s var(--fisica)}
.sw i{transition:all .3s var(--fisica)}
}
/* ---- añadidos del repaso premium (agosto 2026) ---- */
/* Elegir quién se retira: dos botones con los nombres, en vez de un prompt
de "escribe 1 o 2" que si contestabas otra cosa se salía sin decir nada. */
.quienWo{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.quienWo span{font-size:11.5px;color:var(--tinta-suave)}
/* Las casillas del marcador son lo que más se toca de todo el panel, de pie y
con el sol dando: 46 px en el móvil, como el teclado que se abre debajo
(que ya lo hacía bien). En escritorio se quedan como están. */
@media (max-width:620px){
.board .hdr,.brow{grid-template-columns:1fr 46px 46px 46px}
.cell{height:46px}
}
/* El buscador de parejas del Cuadro. El flujo real del club es "la pareja X
ha terminado": se escribe el nombre y se aterriza en su partido pendiente,
con el editor abierto. */
.buscaCuadro{position:relative;max-width:420px;margin:0 0 14px}
.buscaCuadro input{width:100%}
.buscaLista{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;
background:var(--superficie-alta);border:1px solid rgba(var(--tinta-rgb),.16);
border-radius:12px;overflow:hidden;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.buscaLista button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
width:100%;background:none;border:0;border-radius:0;box-shadow:none;
padding:11px 14px;text-align:left;color:var(--tinta);font-weight:600;font-size:13.5px}
.buscaLista button+button{border-top:1px solid rgba(var(--tinta-rgb),.08)}
.buscaLista button:hover:not(:disabled){background:rgba(var(--tinta-rgb),.08);transform:none}
.buscaLista button span{font-size:11.5px;color:var(--tinta-suave);font-weight:500}
.buscaLista button:disabled{opacity:.5;cursor:default}
.buscaLista .nada{padding:12px 14px;font-size:12.5px;color:var(--tinta-suave)}
/* el aterrizaje: un anillo que se apaga solo, para saber dónde has caído */
.hallado{outline:2px solid var(--bola);outline-offset:3px;border-radius:14px}
/* ---- ventanas pequeñas (crear, renombrar, mover, previa) ----
Van POR ENCIMA de la ventana del partido: se piden desde dentro del editor.
Sustituyen a los prompt() del navegador, que no se pueden validar, salen sin
estilo y en el móvil son de una sola línea. */
.modal.chico{z-index:90}
.modal.chico .modal-caja{max-width:400px}
.campoChico{display:block;margin-bottom:12px}
.campoChico span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--tinta-suave);margin-bottom:6px}
.campoChico input{width:100%}
.plazasGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:7px;
max-height:46vh;overflow-y:auto;margin:4px 0 12px}
.plazasGrid button{padding:11px 0;font-family:"Archivo Narrow",sans-serif;font-size:16px;
font-weight:700;justify-content:center}
/* "Modo pista" es el apoyo, no el plato principal: el cuadro interactivo es el
producto y se abre siempre en él. Se deja más discreto (sin fondo al estar
activo, letra más pequeña) para que la mirada vaya al cuadro. */
.modos button.segundo{font-size:11.5px;opacity:.75}
.modos button.segundo.on{background:transparent;color:var(--tinta);
box-shadow:inset 0 0 0 1px rgba(var(--tinta-rgb),.22);opacity:1}
/* ---------- Avisos de fallos (pantalla solo de `super`) ----------
Los manda la gente desde las tres webs. Sin leer llevan la línea blanca de
pista a la izquierda, que es la firma del panel: marca lo que pide acción.
Leídos se apagan, no desaparecen. */
.rcard{margin-bottom:12px}
.rcard .core{border-left:3px solid var(--linea);box-shadow:-6px 0 18px -12px var(--linea-halo)}
.rcard.leido .core{border-left-color:var(--hairline);box-shadow:none;opacity:.62}
.rtop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.rweb{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;border:1px solid var(--hairline);color:var(--tinta-suave)}
/* Cada web con su color, para reconocer de un vistazo de dónde viene. */
.rweb-club{border-color:rgba(0,110,28,.55);color:#7fd694}
.rweb-reservas{border-color:rgba(15,180,206,.5);color:#6fd3e6}
.rweb-torneo{border-color:rgba(var(--acento-rgb),.5);color:var(--bola)}
.rcuando{font-size:12px;color:var(--tinta-suave);white-space:nowrap}
/* pre-wrap: la gente escribe con saltos de línea y se pierden con el wrap
normal. anywhere para que una URL larga pegada no ensanche la tarjeta. */
.rmsg{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:10px;line-height:1.55}
.rdato{font-size:13px;color:var(--tinta-suave);overflow-wrap:anywhere;margin-bottom:3px}
.rdet{margin-top:8px;font-size:12.5px;color:var(--tinta-suave)}
.rdet summary{cursor:pointer;user-select:none}
.rdet p{margin-top:6px;overflow-wrap:anywhere;opacity:.8}
.racts{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
/* ---- ANALÍTICAS ---------------------------------------------------------
Gráficas hechas con CSS y nada más. Una librería serían cientos de KB para
dibujar rectángulos, y esta pantalla se abre desde el móvil a pie de pista.
Las barras van en --linea, que es LA FIRMA del panel (la línea blanca de la
pista), y no en --bola: la bola es solo para lo que se pulsa, y una barra de
una gráfica no se pulsa.
-------------------------------------------------------------------------- */
.an-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
gap:12px;margin:16px 0 24px}
.an-cifra{background:var(--superficie);border:1px solid var(--hairline);
border-radius:var(--radio-core);padding:16px 18px}
.an-cifra b{display:block;font-family:"Archivo Narrow",sans-serif;font-style:italic;
font-weight:700;font-size:36px;line-height:1;color:var(--tinta)}
.an-cifra span{display:block;margin-top:7px;font-size:12.5px;color:var(--tinta-suave)}
.an-cifra small{display:block;margin-top:3px;font-size:11px;color:var(--tinta-suave);opacity:.7}
.an-barras{display:grid;gap:7px;margin-top:6px}
.an-fila{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:10px}
.an-et{font-size:12.5px;color:var(--tinta-suave);text-align:right;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El carril de fondo es lo que deja ver que una barra corta es corta y no un
error de pintado. Va con transparencia; --linea es casi blanco y de fondo
dejaba una tira blanca de lado a lado que se comía las propias barras. */
.an-carril{background:var(--hairline);border-radius:999px;height:11px;overflow:hidden}
.an-barra{display:block;height:100%;border-radius:999px;background:var(--linea);
box-shadow:0 0 10px var(--linea-halo)}
.an-num{font-size:12.5px;font-weight:600;color:var(--tinta)}
.an-lista{list-style:none;counter-reset:an;margin:6px 0 0;padding:0}
.an-lista li{counter-increment:an;display:flex;align-items:center;gap:10px;
padding:10px 2px;border-bottom:1px solid var(--hairline);font-size:14px}
.an-lista li:last-child{border-bottom:0}
.an-lista li::before{content:counter(an);flex:none;width:20px;font-size:11px;
color:var(--tinta-suave);text-align:right}
.an-lista li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-lista li b{flex:none;font-family:"Archivo Narrow",sans-serif;font-size:16px;color:var(--tinta)}
#screen h3{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;
text-transform:uppercase;letter-spacing:.6px;font-size:15px;margin-bottom:10px}
@media(max-width:520px){
.an-fila{grid-template-columns:88px 1fr 38px;gap:8px}
.an-et{font-size:11.5px}
.an-cifra b{font-size:30px}
}
/* ---- gráficas en SVG (js/graficas.js) ------------------------------------ */
.g-svg{width:100%;height:auto;display:block;margin-top:6px;overflow:visible}
/* Las etiquetas de los ejes van en HTML DEBAJO del SVG, no dentro.
preserveAspectRatio="none" estira el dibujo para que llene el panel, y
estirando también deformaba las letras: salían enormes y aplastadas. El
trazo no engorda gracias a vector-effect, pero al texto no hay manera. */
.g-ejes{display:flex;justify-content:space-between;gap:4px;margin-top:8px}
.g-ejes span{flex:1;min-width:0;text-align:center;font-size:11.5px;color:var(--tinta-suave);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-ejes span b{display:block;font-family:"Archivo Narrow",sans-serif;font-size:15px;
font-weight:700;color:var(--tinta-suave);margin-top:2px}
.g-ejes span.pico,.g-ejes span.pico b{color:var(--tinta)}
/* mapa de calor día × hora */
.g-mapa{margin-top:10px;overflow-x:auto}
.g-mapa-cab,.g-mapa-fila{display:grid;grid-template-columns:64px repeat(var(--cols),1fr);
gap:3px;align-items:center;min-width:420px}
.g-mapa-fila{margin-top:3px}
.g-mapa-h{font-size:10px;color:var(--tinta-suave);text-align:center}
.g-mapa-d{font-size:11px;color:var(--tinta-suave);text-align:right;padding-right:6px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La casilla vacía no desaparece: un hueco negro sin borde se lee como "aquí
no hay dato" en vez de "aquí no entró nadie", que no es lo mismo. */
.g-celda{height:20px;border-radius:3px;background:var(--linea);
box-shadow:inset 0 0 0 1px var(--hairline)}
/* anillo móvil / ordenador */
.g-anillo{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}
.g-anillo svg{width:130px;height:130px;flex:none}
.g-anillo-num{fill:var(--tinta);font-size:30px;font-weight:700;
font-family:"Archivo Narrow",sans-serif}
.g-leyenda{list-style:none;display:grid;gap:10px;font-size:13.5px}
.g-leyenda li{display:flex;align-items:center;gap:9px;color:var(--tinta-suave)}
.g-leyenda i{width:11px;height:11px;border-radius:50%;background:var(--hairline);flex:none}
.g-leyenda i.lleno{background:var(--linea)}
.g-leyenda b{color:var(--tinta)}
/* dos paneles a la par cuando caben */
.an-dos{display:grid;gap:14px}
@media(min-width:820px){ .an-dos{grid-template-columns:1fr 1fr;align-items:start} }
/* ---- la cabecera que tiene que impactar ---------------------------------
Esta pantalla no es solo para mirar números: es lo que se le enseña a otro
club para venderle el sistema. Por eso el titular es UNA cifra enorme y no
cuatro tarjetas iguales: cuatro números del mismo tamaño no tienen jerarquía
y no se sabe dónde mirar.
-------------------------------------------------------------------------- */
.an-hero{background:var(--superficie);border:1px solid var(--hairline);
border-radius:var(--radio-shell);padding:34px 30px 28px;margin:18px 0 14px;
position:relative;overflow:hidden}
/* el foco de la torre, como en el resto del panel */
.an-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(560px 200px at 12% -40px,rgba(var(--tinta-rgb),.09),transparent 70%)}
.an-hero > *{position:relative}
.an-hero-num{display:block;font-family:"Archivo Narrow",sans-serif;font-style:italic;
font-weight:700;font-size:clamp(3.6rem,11vw,6.5rem);line-height:.92;color:var(--tinta);
letter-spacing:-.01em}
.an-hero-et{display:block;margin-top:6px;font-size:15px;color:var(--tinta-suave);
letter-spacing:.02em}
.an-hero-datos{list-style:none;margin:22px 0 0;padding:20px 0 0;display:grid;gap:9px;
border-top:1px solid var(--hairline)}
.an-hero-datos li{font-size:14.5px;color:var(--tinta-suave);padding-left:18px;position:relative}
.an-hero-datos li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:2px;
border-radius:2px;background:var(--linea)}
.an-hero-datos b{color:var(--tinta);font-weight:600}
/* ---- lo que le importa al dueño del club ---- */
.an-vale{background:linear-gradient(180deg,rgba(var(--acento-rgb),.09),rgba(var(--acento-rgb),.02));
border:1px solid rgba(var(--acento-rgb),.24);border-radius:var(--radio-shell);
padding:24px 26px 26px;margin-bottom:16px}
.an-vale h3{margin-bottom:16px}
.an-vale-cifras{display:grid;gap:20px}
@media(min-width:720px){ .an-vale-cifras{grid-template-columns:repeat(3,1fr)} }
.an-vale-cifras b{display:block;font-family:"Archivo Narrow",sans-serif;font-style:italic;
font-weight:700;font-size:40px;line-height:1;color:var(--bola)}
.an-vale-cifras span{display:block;margin-top:6px;font-size:13.5px;color:var(--tinta)}
.an-vale-cifras small{display:block;margin-top:3px;font-size:11.5px;color:var(--tinta-suave)}
/* ---- las tres webs juntas -------------------------------------------------
Va lo primero de la pantalla y con su propio marco: es la foto del negocio
entero, no de una página. Para un club es la diapositiva que decide.
-------------------------------------------------------------------------- */
.w-bloque{background:var(--superficie);border:1px solid var(--hairline);
border-radius:var(--radio-shell);padding:26px 26px 22px;margin:18px 0 16px}
.w-bloque h3{margin-bottom:4px}
.w-bloque h4{font-family:"Archivo Narrow",sans-serif;font-style:italic;font-weight:700;
text-transform:uppercase;letter-spacing:.5px;font-size:13.5px;color:var(--tinta-suave);
margin:22px 0 8px}
.w-webs{display:grid;gap:14px;margin-top:16px}
@media(min-width:640px){ .w-webs{grid-template-columns:repeat(3,1fr)} }
.w-web{background:var(--superficie-alta);border:1px solid var(--hairline);
border-radius:var(--radio-core);padding:16px 18px}
.w-web b{display:block;font-family:"Archivo Narrow",sans-serif;font-style:italic;
font-weight:700;font-size:32px;line-height:1;color:var(--tinta)}
.w-web > span{display:block;margin-top:5px;font-size:13px;color:var(--tinta-suave)}
.w-carril{display:block;height:5px;border-radius:999px;background:var(--hairline);
margin:11px 0 6px;overflow:hidden}
.w-carril i{display:block;height:100%;border-radius:999px;background:var(--linea)}
.w-web small{font-size:11px;color:var(--tinta-suave);opacity:.75}
/* El embudo. En el verde de la bola porque es LO que hay que mirar: no cuántos
entran, sino cuántos acaban reservando. */
.w-camino{background:linear-gradient(180deg,rgba(var(--acento-rgb),.09),rgba(var(--acento-rgb),.02));
border:1px solid rgba(var(--acento-rgb),.24);border-radius:var(--radio-core);
padding:18px 20px;margin-top:20px}
.w-camino h4{margin-top:0;color:var(--bola)}
.w-camino ul{list-style:none;display:grid;gap:9px}
.w-camino li{font-size:14.5px;color:var(--tinta-suave);padding-left:18px;position:relative}
.w-camino li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:2px;
border-radius:2px;background:var(--bola)}
.w-camino b{color:var(--tinta);font-weight:600}
.w-media{margin-top:6px}
/* Las etiquetas de las tres webs son más largas que las del torneo
("instagram.com → club" contra "mc"), así que en su columna no cabían y
salían cortadas con puntos suspensivos. Aquí se dejan bajar a dos líneas:
antes perder una línea de alto que perder la mitad del nombre. */
.w-media .an-fila{grid-template-columns:150px 1fr 44px}
.w-media .an-et{white-space:normal;line-height:1.25;text-align:right}
@media(max-width:520px){
.w-media .an-fila{grid-template-columns:104px 1fr 38px}
.w-media .an-et{font-size:11px}
}
/* ---- el selector de color ---- */
.tema-sel{display:inline-flex;gap:7px;align-items:center}
.tema-sel button{background:none;border:0;box-shadow:none;padding:3px;border-radius:999px;
line-height:0}
.tema-sel button:hover{transform:none}
.tema-sel i{display:block;width:17px;height:17px;border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);transition:transform .2s var(--fisica)}
.tema-sel button:hover i{transform:scale(1.14)}
/* El elegido lleva un aro por fuera y no un borde: un borde le comería tamaño
al color, que es lo único que hay que mirar aquí. */
.tema-sel button.on{box-shadow:0 0 0 2px var(--linea)}
.tema-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin:2px 0 14px}
.tema-fila .hint{margin:0}