/* ==========================================================================================================
   Liga — dirección de arte «Luz de pabellón».
   El polideportivo municipal a las nueve de la noche: un foco sobre la pista, las líneas de cal, el marcador de LED
   colgado y la grada a oscuras. Noche (#0b0d0c) y verde pista (#1d5f43) como bloques a sangre; cal (#f2f0e8) para las
   líneas; ámbar de foco (#ffb02e) para lo que se toca; rojo LED (#ff3b2a) solo para los tanteos.
   Big Shoulders Display muy grande y apretada (la letra municipal de Chicago, de cartel de pabellón), Schibsted
   Grotesk para leer y Martian Mono estrecha para las cifras. El kit es solo fontanería: aquí se le cambia el aspecto.
   ========================================================================================================== */

@font-face { font-family: 'Big Shoulders'; src: url('/fuentes/big-shoulders.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fuentes/schibsted.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fuentes/schibsted-italica.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('/fuentes/martian-mono.woff2') format('woff2'); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

:root {
  --f-texto: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titulos: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --f-datos: 'Martian Mono', ui-monospace, Consolas, monospace;
  --peso-titulos: 850;
  --tracking-titulos: -0.005em;

  --noche: #0b0d0c;
  --noche-2: #141816;
  --noche-3: #1e2420;
  --cal: #f2f0e8;
  --cal-2: rgb(242 240 232 / 0.72);
  --cal-3: rgb(242 240 232 / 0.5);
  --pista: #1d5f43;
  --pista-2: #164a34;
  --foco: #ffb02e;
  --led-rojo: #ff3b2a;
  --led-ambar: #ffb02e;
  --led-apagado: rgb(255 70 50 / 0.075);
  --led-apagado-ambar: rgb(255 176 46 / 0.07);
  --caja-led: #151618;
  --panel-led: #070809;

  /* De día (claro): hormigón pintado y blanco de pared */
  --fondo: #e7eae6;
  --superficie: #ffffff;
  --superficie-2: #f1f3f0;
  --hundido: #d9ded8;
  --linea: #cdd3cc;
  --linea-fuerte: #858f87;
  --texto: #0b0d0c;
  --texto-2: #39413b;
  --texto-3: #59625b;
  --acento: #1d5f43;
  --acento-hover: #0b0d0c;
  --acento-suave: #d6e7dd;
  --acento-texto: #17573c;
  --sobre-acento: #ffffff;
  --ok: #17703f; --ok-suave: #d8eedf;
  --atencion: #8a4b00; --atencion-suave: #f8e7c9;
  --error: #b42318; --error-suave: #f8dcd8;
  --info: #1f4f8a; --info-suave: #dde7f4;

  --radio-s: 2px;
  --radio: 3px;
  --radio-l: 4px;
  --radio-xl: 6px;
  --sombra-1: none;
  --sombra-2: 0 18px 40px -22px rgb(11 13 12 / 0.45);
  --sombra-3: 0 30px 70px -20px rgb(11 13 12 / 0.55);
  --foco-anillo: 0 0 0 3px rgb(255 176 46 / 0.55);
  --foco: #ffb02e;

  --club: #1d5f43;
  --club-2: #0b0d0c;
  --sobre-club: #ffffff;
  --club-tinta: #1d5f43;

  --ancho: 1280px;
  --barra-alto: 58px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --fondo: #0b0d0c;
    --superficie: #141816;
    --superficie-2: #1b201d;
    --hundido: #070908;
    --linea: #2a312c;
    --linea-fuerte: #5c665e;
    --texto: #f2f0e8;
    --texto-2: #c3c7bf;
    --texto-3: #959c94;
    --acento: #ffb02e;
    --acento-hover: #f2f0e8;
    --acento-suave: #3a2b10;
    --acento-texto: #ffc561;
    --sobre-acento: #0b0d0c;
    --ok: #4cc485; --ok-suave: #12301f;
    --atencion: #f0b14a; --atencion-suave: #33260f;
    --error: #ff7a6b; --error-suave: #3a1714;
    --info: #7db3f0; --info-suave: #142a40;
    --sombra-2: 0 18px 40px -20px rgb(0 0 0 / 0.9);
  }
}
:root[data-tema='oscuro'] {
  --fondo: #0b0d0c;
  --superficie: #141816;
  --superficie-2: #1b201d;
  --hundido: #070908;
  --linea: #2a312c;
  --linea-fuerte: #5c665e;
  --texto: #f2f0e8;
  --texto-2: #c3c7bf;
  --texto-3: #959c94;
  --acento: #ffb02e;
  --acento-hover: #f2f0e8;
  --acento-suave: #3a2b10;
  --acento-texto: #ffc561;
  --sobre-acento: #0b0d0c;
  --ok: #4cc485; --ok-suave: #12301f;
  --atencion: #f0b14a; --atencion-suave: #33260f;
  --error: #ff7a6b; --error-suave: #3a1714;
  --info: #7db3f0; --info-suave: #142a40;
  --sombra-2: 0 18px 40px -20px rgb(0 0 0 / 0.9);
}

/* ── Base: fuera el aspecto del kit ─────────────────────────────────────────────────────────────────────── */
body { font-feature-settings: 'ss01' on; letter-spacing: -0.003em; }
h1, h2, h3, h4 { line-height: 0.92; font-weight: 850; }
h1 { font-size: clamp(2.8rem, 1.8rem + 3.6vw, 5rem); letter-spacing: -0.012em; }
h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
h3 { font-size: 1.5rem; }
a { color: var(--acento-texto); text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 0; }
.num, .datos, .cifra .valor, .tabla .num { font-stretch: 78%; }
.suave { color: var(--texto-2); }
.entradilla { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.5; color: var(--texto-2); }
.antetitulo { font-family: var(--f-texto); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--texto-2); }
.cabecera h1 { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 4rem); }
.cabecera p { color: var(--texto-2); }

/* La barra de arriba es el techo del pabellón: siempre de noche */
.barra { background: var(--noche); border-bottom: 0; color: var(--cal); backdrop-filter: none; -webkit-backdrop-filter: none; }
.marca { color: var(--cal); font-family: var(--f-titulos); font-weight: 900; font-size: 1.7rem; letter-spacing: 0; gap: 10px; }
.marca small { font-family: var(--f-texto); font-size: 0.72rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cal-3); align-self: center; margin: 4px 0 0; }
.navegacion a { color: var(--cal-2); font-weight: 650; border-radius: 0; padding: 6px 10px; }
.navegacion a:hover { background: transparent; color: var(--cal); }
.navegacion a[aria-current='page'] { background: transparent; color: var(--foco); box-shadow: inset 0 -2px 0 var(--foco); }
.barra .boton { color: var(--cal); border-color: rgb(242 240 232 / 0.4); }
.barra .boton:hover { background: var(--cal); color: var(--noche); border-color: var(--cal); }
.barra .boton.fantasma { border-color: transparent; }
.cuenta-boton { background: transparent; border: 1.5px solid rgb(242 240 232 / 0.35); color: var(--cal); border-radius: 2px; }
.cuenta-boton:hover { background: var(--noche-3); }
.cuenta-boton .avatar { border-radius: 2px; background: var(--foco); color: var(--noche); }
.pie { border-top: 0; background: var(--noche); color: var(--cal-3); }
.pie a { color: var(--cal-2); }

/* Botones: rectángulos con tinta; el texto manda, sin iconos de adorno */
.boton {
  border-radius: 2px; border: 1.5px solid var(--texto); background: transparent; color: var(--texto); box-shadow: none;
  font-weight: 700; font-size: 0.92rem; letter-spacing: 0.005em; min-height: 42px; padding: 8px 18px;
  transition: background 140ms, color 140ms, border-color 140ms, transform 120ms;
}
.boton:hover { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { box-shadow: var(--foco-anillo); outline: none; }
.boton svg { display: none; }
.boton.icono svg, .boton.icono-visible svg { display: block; }
.boton.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.boton.primario:hover { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.boton.fantasma { border-color: transparent; background: transparent; color: var(--texto); }
.boton.fantasma:hover { background: var(--superficie-2); color: var(--texto); border-color: transparent; }
.boton.suave { background: var(--acento-suave); color: var(--acento-texto); border-color: transparent; }
.boton.peligro { background: var(--error); border-color: var(--error); color: #fff; }
.boton.peligro-suave { background: transparent; color: var(--error); border-color: var(--error); }
.boton.peligro-suave:hover { background: var(--error); color: #fff; }
.boton.pequeno { min-height: 34px; padding: 4px 12px; font-size: 0.82rem; border-radius: 2px; }
.boton.grande { min-height: 56px; padding: 12px 26px; font-size: 1.05rem; border-radius: 2px; }
.boton.icono { width: 42px; min-width: 42px; padding: 0; }
.boton.icono.pequeno { width: 34px; min-width: 34px; }
.boton.cargando::after { border-color: var(--texto); border-right-color: transparent; }
.boton.primario.cargando::after { border-color: var(--sobre-acento); border-right-color: transparent; }

/* Campos */
.campo > label, .campo > .etiqueta { font-weight: 700; font-size: 0.86rem; }
.entrada, .campo input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), .campo select, .campo textarea {
  border-radius: 2px; border: 1.5px solid var(--linea-fuerte); background: var(--superficie);
}
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--texto); box-shadow: var(--foco-anillo); }
.casilla input { border-radius: 2px; }
.casilla input:checked { background: var(--acento); border-color: var(--acento); }
.segmentado { border-radius: 2px; padding: 0; gap: 0; border: 1.5px solid var(--texto); background: transparent; }
.segmentado button { border-radius: 0; color: var(--texto-2); }
.segmentado button[aria-pressed='true'] { background: var(--texto); color: var(--fondo); box-shadow: none; }

/* Bloques: reglas en vez de cajas */
.tarjeta { background: transparent; border: 0; border-top: 3px solid var(--texto); border-radius: 0; padding: 16px 0 4px; box-shadow: none; }
.tarjeta > h2 { font-size: 1.9rem; margin-bottom: 14px; }
.lista { border: 0; border-top: 2px solid var(--texto); border-radius: 0; background: transparent; }
.lista > li, .lista > .elemento { padding: 12px 2px; border-top: 1px solid var(--linea); }
.aviso { border-radius: 0; border: 0; border-left: 4px solid var(--info); background: var(--info-suave); }
.aviso.ok { border-left-color: var(--ok); }
.aviso.atencion { border-left-color: var(--atencion); }
.aviso.error { border-left-color: var(--error); }
.etiqueta { border-radius: 2px; border: 1px solid var(--linea-fuerte); background: transparent; font-weight: 700; }
.etiqueta svg { display: none; }
.etiqueta.atencion { background: var(--atencion-suave); border-color: transparent; }
.etiqueta.ok { background: var(--ok-suave); border-color: transparent; }
.etiqueta.error { background: var(--error-suave); border-color: transparent; }
.contador { border-radius: 2px; background: var(--led-rojo); font-family: var(--f-datos); }
details.desplegable { border: 0; border-top: 1.5px solid var(--texto); border-radius: 0; background: transparent; }
details.desplegable > summary { padding: 12px 0; }
details.desplegable > :not(summary) { padding: 0 0 14px; }
.pasos li { border-top-width: 4px; }
.pasos li[aria-current='step'] { border-color: var(--foco); }
.solapas [aria-selected='true']::after, .solapas [aria-current='page']::after { border-radius: 0; height: 3px; background: var(--foco); }
.copiable { border-radius: 2px; border: 1.5px solid var(--texto); }
.qr { border-radius: 2px; }
.migas { font-weight: 600; }

dialog.dialogo { border-radius: 4px; border: 0; border-top: 6px solid var(--foco); box-shadow: var(--sombra-3); }
dialog.dialogo > header h2 { font-size: 1.9rem; }
dialog.dialogo::backdrop { background: rgb(7 8 9 / 0.66); backdrop-filter: none; }
.menu { border-radius: 2px; border: 1.5px solid var(--texto); box-shadow: var(--sombra-2); padding: 4px; }
.menu button, .menu a { border-radius: 0; font-weight: 600; }
.menu button svg, .menu a svg { opacity: 0.7; }

/* Avisos en pantalla: una tira de LED */
.tostada { border-radius: 2px; background: var(--noche); color: var(--foco); font-family: var(--f-datos); font-stretch: 82%; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 0 0 1px #2b2d31, 0 14px 30px -12px rgb(0 0 0 / 0.6); text-shadow: 0 0 6px rgb(255 176 46 / 0.45); }
.tostada svg { color: var(--foco); }
.tostada.ok svg { color: #6fe0a2; }
.tostada.error { background: #2a0c08; color: #ff8b7d; text-shadow: none; }

/* Pestañas de abajo en el móvil: la mesa de anotadores */
.pestanas { background: var(--noche); border-top: 0; backdrop-filter: none; }
.pestanas a { color: var(--cal-3); }
.pestanas a[aria-current='page'] { color: var(--foco); }

.vista { animation: vista-entra 260ms var(--curva); }

/* Utilidad: a sangre (rompe el contenedor) */
.a-sangre { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
body[data-vista='/'] .principal, body.sin-margen .principal { padding-top: 0; }
body[data-vista='/'] .principal { padding-bottom: 0; }

/* ── El marcador LED ────────────────────────────────────────────────────────────────────────────────────── */
.led { width: 100%; height: auto; display: block; user-select: none; }
.led .caja { fill: var(--caja-led); stroke: #2b2d31; stroke-width: 2; }
.led .bisel { fill: var(--panel-led); stroke: #000; stroke-width: 1; }
.led .tornillo { fill: #34363b; stroke: #0b0b0c; stroke-width: 1; }
.led .ranura { stroke: #111214; stroke-width: 1.4; }
.led .apagado polygon, .led .apagado rect { fill: var(--led-apagado); }
.led .apagado.ambar polygon, .led .apagado.ambar rect { fill: var(--led-apagado-ambar); }
.led .luz polygon, .led .luz rect { fill: var(--led-rojo); }
.led .luz.ambar polygon, .led .luz.ambar rect { fill: var(--led-ambar); }
.led .luz { filter: drop-shadow(0 0 2.5px rgb(255 59 42 / 0.85)) drop-shadow(0 0 9px rgb(255 59 42 / 0.35)); }
.led .luz.ambar { filter: drop-shadow(0 0 2.5px rgb(255 176 46 / 0.8)) drop-shadow(0 0 8px rgb(255 176 46 / 0.3)); }
.led .rotulo { fill: #d9d4c6; font-family: var(--f-titulos); font-weight: 700; letter-spacing: 0.16em; font-size: 15px; text-transform: uppercase; opacity: 0.72; }
.led .lado { fill: #f3efe4; font-family: var(--f-titulos); font-weight: 800; letter-spacing: 0.2em; font-size: 22px; }
.led .placa { fill: #1d1f22; stroke: #2c2e33; stroke-width: 1; }
.led .placa-texto { fill: #f3efe4; font-family: var(--f-titulos); font-weight: 750; font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; }
.led .flecha { fill: var(--led-ambar); filter: drop-shadow(0 0 3px rgb(255 176 46 / 0.8)); }
.led .flecha-apagada { fill: var(--led-apagado-ambar); }
.led .etiqueta-led { fill: #a9a497; font-family: var(--f-datos); font-stretch: 80%; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.led.encender .luz { animation: encender 700ms steps(1, end) both; }
@keyframes encender { 0% { opacity: 0; } 18% { opacity: 1; } 26% { opacity: 0.25; } 34% { opacity: 1; } 46% { opacity: 0.55; } 56%, 100% { opacity: 1; } }
.marcador-marco { position: relative; border-radius: 18px; padding: 10px; background: linear-gradient(180deg, #2b2d31, #121315); box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.08); }
.marcador-marco::before, .marcador-marco::after { content: ''; position: absolute; bottom: 100%; width: 3px; height: 900px; background: linear-gradient(180deg, transparent, #5d6166 70%, #2b2d31); }
.marcador-marco::before { left: 18%; }
.marcador-marco::after { right: 18%; }
.led.tinta .caja { fill: none; stroke: currentColor; stroke-width: 2.5; }
.led.tinta .bisel { fill: none; stroke: currentColor; stroke-width: 0.8; }
.led.tinta .luz polygon, .led.tinta .luz rect { fill: currentColor; }
.led.tinta .luz { filter: none; }
.led.tinta .apagado polygon, .led.tinta .apagado rect { fill: color-mix(in oklab, currentColor 7%, transparent); }
.led.tinta .lado, .led.tinta .placa-texto, .led.tinta .rotulo, .led.tinta .etiqueta-led { fill: currentColor; opacity: 1; }
.led.tinta .placa { fill: none; stroke: currentColor; }
.led.tinta .tornillo { fill: none; stroke: currentColor; }

/* ── Portada ────────────────────────────────────────────────────────────────────────────────────────────── */
.portada { display: block; }
/* 1. Saque: la foto de la pista, el marcador colgado y el titular enorme */
.saque { position: relative; isolation: isolate; overflow: hidden; color: var(--cal); background: var(--noche); min-height: max(720px, min(94vh, 900px)); display: grid; grid-template-rows: auto 1fr; }
.saque .foto { position: absolute; inset: 0; z-index: -2; }
.saque .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.saque::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 13 12 / 0.9) 0%, rgb(11 13 12 / 0.25) 34%, rgb(11 13 12 / 0.05) 55%, rgb(11 13 12 / 0.88) 88%, var(--noche) 100%); }
/* El marcador va en su fila, arriba a la derecha: el titular nunca pasa por debajo */
.saque .colgado { position: relative; z-index: 2; grid-row: 1; justify-self: end; width: min(620px, 46vw); padding-top: clamp(28px, 5vh, 56px); }
.saque .colgado a { display: block; color: inherit; text-decoration: none; }
.saque .colgado a:focus-visible { outline-offset: 6px; }
.saque .bajo-marcador { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 18px; margin-top: 12px; font-size: 0.84rem; line-height: 1.35; color: var(--cal-2); }
.saque .bajo-marcador b { display: block; color: var(--cal); font-weight: 700; }
.saque .bajo-marcador .pasos-marcador { display: flex; gap: 6px; padding-top: 7px; }
.saque .bajo-marcador .pasos-marcador i { width: 18px; height: 3px; background: rgb(242 240 232 / 0.25); }
.saque .bajo-marcador .pasos-marcador i.ya { background: var(--foco); }
.saque .texto { position: relative; grid-row: 2; align-self: end; padding: clamp(28px, 5vh, 56px) 0 clamp(36px, 7vh, 72px); max-width: 820px; }
.saque h1 { font-size: clamp(3.6rem, 1.4rem + 7.4vw, 9rem); line-height: 0.8; letter-spacing: -0.02em; font-weight: 900; margin: 0 0 22px; color: var(--cal); text-wrap: balance; }
.saque h1 span { display: block; }
.saque h1 .fino { font-weight: 300; }
.saque .lead { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.45; max-width: 44ch; color: #e1e3dc; margin-bottom: 26px; }
.saque .acciones-saque { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.saque .boton.primario { background: var(--foco); border-color: var(--foco); color: var(--noche); }
.saque .boton.primario:hover { background: var(--cal); border-color: var(--cal); }
.saque .enlace-claro { color: var(--cal); font-weight: 700; text-underline-offset: 5px; }
.credito { font-size: 0.7rem; color: var(--cal-3); }
.saque .credito { position: absolute; right: clamp(16px, 4vw, 40px); bottom: 14px; }
.credito a { color: inherit; }
@media (max-width: 860px) {
  .saque { min-height: 0; }
  .saque .colgado { justify-self: stretch; width: 100%; padding-top: 34px; }
  .saque .texto { padding-top: clamp(52px, 15vw, 90px); }
  .saque .foto img { object-position: 50% 40%; }
  .saque::after { background: linear-gradient(180deg, rgb(11 13 12 / 0.92) 0%, rgb(11 13 12 / 0.35) 40%, rgb(11 13 12 / 0.75) 70%, var(--noche) 100%); }
}

/* 2. La tabla pintada en la pista */
.pista-tabla { position: relative; isolation: isolate; overflow: hidden; background: var(--pista); color: var(--cal); padding-block: clamp(64px, 9vw, 140px);
  --texto: var(--cal); --texto-2: var(--cal-2); --texto-3: var(--cal-3); --linea: rgb(242 240 232 / 0.2); --linea-fuerte: rgb(242 240 232 / 0.5); --superficie-2: rgb(0 0 0 / 0.12); --acento-texto: var(--foco); }
.pista-tabla .lineas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: var(--cal); opacity: 0.32; }
.pista-tabla .dentro { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cifra-enorme { font-family: var(--f-titulos); font-weight: 900; font-size: clamp(10rem, 4rem + 18vw, 24rem); line-height: 0.74; letter-spacing: -0.04em; margin: 0; }
.pista-tabla .pie-cifra { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); line-height: 1.25; max-width: 22ch; margin: 18px 0 0; font-weight: 600; }
.pista-tabla .cita { font-family: var(--f-texto); font-style: italic; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.4; margin: 30px 0 0; max-width: 36ch; padding-left: 16px; border-left: 3px solid var(--foco); }
.pista-tabla .tabla-periodico thead th { border-bottom-color: var(--cal); color: var(--cal-2); }
.pista-tabla .tabla-periodico tr.lider td.pos { background: var(--cal); color: var(--pista); }
.pista-tabla .tabla-periodico tr:hover td { background: rgb(0 0 0 / 0.12); }
.pista-tabla .ir { display: inline-flex; margin-top: 22px; color: var(--cal); font-weight: 700; text-underline-offset: 5px; }
@media (max-width: 900px) { .pista-tabla .dentro { grid-template-columns: minmax(0, 1fr); } }

/* 3. El americano de Murcia: foto a sangre por la izquierda */
.americano-bloque { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); background: var(--noche); color: var(--cal); --texto: var(--cal); --texto-2: var(--cal-2); --texto-3: var(--cal-3); --linea: rgb(242 240 232 / 0.16); }
.americano-bloque .foto { position: relative; min-height: 460px; }
.americano-bloque .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.americano-bloque .foto .credito { position: absolute; left: 14px; bottom: 10px; }
.americano-bloque .texto { padding: clamp(36px, 6vw, 88px) clamp(20px, 5vw, 72px); align-self: center; }
.americano-bloque h2 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: 0.86; margin-bottom: 16px; }
.americano-bloque .podio { margin: 26px 0 18px; }
.americano-bloque .podio .cajon { background: var(--noche-3); color: var(--cal); }
.americano-bloque .podio .p1 .cajon { background: var(--foco); color: var(--noche); }
.americano-bloque a.ir { color: var(--foco); font-weight: 700; text-underline-offset: 5px; }
@media (max-width: 900px) { .americano-bloque { grid-template-columns: minmax(0, 1fr); } .americano-bloque .foto { min-height: 280px; } }

/* 4. Lo que hay dentro, como un acta con dorsales */
.alineacion { padding-block: clamp(56px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.alineacion h2 { font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 0.82; position: sticky; top: calc(var(--barra-alto) + 24px); margin: 0; }
.alineacion h2 small { display: block; font-family: var(--f-texto); font-size: 1.05rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; color: var(--texto-2); margin-top: 18px; max-width: 34ch; }
.alineacion ol { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--texto); }
.alineacion li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 4px 18px; padding: 16px 0 18px; border-bottom: 1px solid var(--linea); }
.alineacion .dorsal { grid-row: span 2; font-family: var(--f-titulos); font-weight: 900; font-size: 3.6rem; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--texto); }
.alineacion li:hover .dorsal { color: var(--texto); }
.alineacion b { font-family: var(--f-titulos); font-weight: 850; font-size: 1.7rem; line-height: 1; }
.alineacion p { margin: 0; color: var(--texto-2); max-width: 58ch; }
@media (max-width: 860px) { .alineacion { grid-template-columns: minmax(0, 1fr); } .alineacion h2 { position: static; } .alineacion li { grid-template-columns: 54px minmax(0, 1fr); } .alineacion .dorsal { font-size: 2.6rem; } }

/* 5. El pabellón */
.pabellon { position: relative; isolation: isolate; overflow: hidden; min-height: min(80vh, 720px); display: grid; align-items: end; color: var(--cal); background: var(--noche); }
.pabellon .foto { position: absolute; inset: 0; z-index: -2; }
.pabellon .foto img { width: 100%; height: 100%; object-fit: cover; }
.pabellon::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 13 12 / 0.2) 0%, rgb(11 13 12 / 0.55) 55%, rgb(11 13 12 / 0.94) 100%); }
.pabellon .texto { padding-bottom: clamp(40px, 8vh, 90px); max-width: 900px; }
.pabellon p.grande { font-family: var(--f-titulos); font-weight: 850; font-size: clamp(2.4rem, 1.4rem + 4vw, 5.2rem); line-height: 0.88; margin: 0 0 26px; }
.pabellon .boton.primario { background: var(--foco); border-color: var(--foco); color: var(--noche); }
.pabellon .boton.primario:hover { background: var(--cal); border-color: var(--cal); }
.pabellon .credito { position: absolute; right: 16px; bottom: 12px; }

/* Coreografía al hacer scroll (si el navegador sabe; si no, todo quieto y visible) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entra { animation: entra linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .entra-lado { animation: entra-lado linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
    .cifra-enorme.entra { animation-name: entra-cifra; }
    .saque .foto img { animation: deriva linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes entra { from { opacity: 0; transform: translateY(48px); } }
@keyframes entra-lado { from { opacity: 0; transform: translateX(-60px); } }
@keyframes entra-cifra { from { opacity: 0; transform: translateY(80px) scale(0.94); } }
@keyframes deriva { to { transform: scale(1.08) translateY(4%); } }

/* ── Periódico de cada competición ──────────────────────────────────────────────────────────────────────── */
.periodico { --club-tinta-uso: var(--club-tinta); }
:root[data-tema='oscuro'] .periodico { --club-tinta-uso: var(--club-tinta-noche, var(--club-tinta)); }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .periodico { --club-tinta-uso: var(--club-tinta-noche, var(--club-tinta)); } }
.fajas { display: block; height: 6px; background: linear-gradient(90deg, var(--club) 0 70%, var(--club-2) 70%); }
.cabecera-periodico { position: relative; background: var(--club); color: var(--sobre-club); padding-top: clamp(18px, 3vw, 34px); margin-bottom: clamp(22px, 3vw, 36px); overflow: hidden; }
.cabecera-periodico::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--club-2); }
.cabecera-periodico .linea-fecha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 0.86rem; font-weight: 600; opacity: 0.86; }
.cabecera-periodico .linea-fecha::first-letter { text-transform: uppercase; }
.mancheta { font-family: var(--f-titulos); font-weight: 900; line-height: 0.84; letter-spacing: -0.015em; font-size: clamp(2.7rem, 1.2rem + 6vw, 6.6rem); margin: 14px 0 10px; max-width: 16ch; text-wrap: balance; }
.mancheta a { color: inherit; text-decoration: none; }
.cabecera-periodico .sede { margin: 0 0 18px; font-weight: 600; opacity: 0.86; }
.cabecera-periodico .marca-agua { position: absolute; right: -2vw; bottom: -0.18em; z-index: 0; font-family: var(--f-titulos); font-weight: 900; font-size: clamp(8rem, 18vw, 22rem); line-height: 1; opacity: 0.09; pointer-events: none; letter-spacing: -0.04em; }
.cabecera-periodico > * { position: relative; z-index: 1; }
.secciones { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-top: 8px; }
.secciones::-webkit-scrollbar { display: none; }
.secciones a { flex-shrink: 0; padding: 12px 16px 11px; font-family: var(--f-titulos); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.02em; color: var(--sobre-club); opacity: 0.8; text-decoration: none; }
.secciones a:hover { opacity: 1; }
.secciones a[aria-current='page'] { background: var(--fondo); color: var(--texto); opacity: 1; }
.botones-periodico { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 22px; }
.aviso-temporada { margin: 0 0 14px; background: rgb(0 0 0 / 0.18); color: inherit; border-left-color: var(--sobre-club); }
.aviso-temporada a { color: inherit; }

.hoja { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 0 clamp(24px, 3.4vw, 52px); }
.hoja > .principal-hoja, .hoja > .lateral-hoja { min-width: 0; }
@media (max-width: 980px) { .hoja { grid-template-columns: minmax(0, 1fr); } .hoja > .lateral-hoja { margin-top: 30px; } }
.noticia h2 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.8rem); line-height: 0.86; letter-spacing: -0.015em; margin-bottom: 14px; text-wrap: balance; }
.noticia .entradilla { color: var(--texto); max-width: 60ch; }
.noticia .entradilla b { font-weight: 800; color: var(--club-tinta-uso); }
.foto-marcador { position: relative; isolation: isolate; margin: 22px 0 10px; padding: clamp(40px, 7vw, 90px) clamp(14px, 4vw, 60px) clamp(18px, 3vw, 36px); background: var(--noche); overflow: hidden; }
.foto-marcador::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 13 12 / 0.55), rgb(11 13 12 / 0.82)), url('/fotos/pabellon-900.webp') center 30% / cover; }
.foto-marcador .marcador-marco { max-width: 640px; margin: 0 auto; }
.pie-foto { font-size: var(--t-s); color: var(--texto-2); padding-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--linea); }
.pie-foto .goles { font-style: italic; }

.bloque { margin-top: 32px; }
.bloque > h3, .titulo-bloque { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--f-titulos); font-weight: 900; font-size: 1.7rem; letter-spacing: 0; border-top: 4px solid var(--texto); padding-top: 8px; margin: 0 0 10px; }
.titulo-bloque small, .bloque > h3 small { font-family: var(--f-texto); font-size: 0.82rem; font-weight: 600; color: var(--texto-3); letter-spacing: 0; }
.titulo-bloque a, .bloque > h3 a { font-family: var(--f-texto); font-size: 0.88rem; font-weight: 700; }

/* Resultados */
.resultados { list-style: none; margin: 0; padding: 0; }
.resultados li { border-bottom: 1px solid var(--linea); }
.resultado { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 2px; color: inherit; text-decoration: none; transition: background 140ms; }
a.resultado:hover { background: var(--superficie-2); text-decoration: none; }
.resultado .eq { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado .eq.l { text-align: right; }
.resultado .eq.gana { font-weight: 800; }
.resultado .tanteo { font-family: var(--f-datos); font-stretch: 76%; font-weight: 750; font-size: 1.05rem; min-width: 76px; text-align: center; padding: 3px 8px; background: var(--noche); color: var(--led-rojo); border-radius: 2px; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgb(255 59 42 / 0.55); }
.resultado .tanteo.sets { font-size: 0.8rem; min-width: 0; color: var(--led-ambar); text-shadow: 0 0 6px rgb(255 176 46 / 0.45); }
.resultado .tanteo.vacio-t { background: transparent; color: var(--texto-2); border: 1.5px solid var(--linea); font-weight: 600; font-size: 0.82rem; text-shadow: none; }
.resultado .tanteo.pendiente-t { background: var(--atencion-suave); color: var(--atencion); font-size: 0.72rem; font-weight: 700; text-shadow: none; }
.resultado .hora { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: center; font-size: 0.74rem; font-weight: 600; color: var(--texto-3); margin-top: -4px; }
.resultado .pareja { display: block; font-size: 0.82em; font-weight: 500; color: var(--texto-2); }
.descansa { padding: 8px 2px; font-size: var(--t-s); color: var(--texto-3); font-style: italic; }

/* Clasificación */
.tabla-periodico { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.tabla-periodico caption { text-align: left; caption-side: top; padding-bottom: 6px; }
.tabla-periodico thead th { font-family: var(--f-texto); font-size: 0.72rem; font-weight: 700; color: var(--texto-2); padding: 6px 4px; border-bottom: 2.5px solid var(--texto); text-align: right; white-space: nowrap; }
.tabla-periodico thead th.eq { text-align: left; }
.tabla-periodico td { padding: 7px 4px; border-bottom: 1px solid var(--linea); text-align: right; font-family: var(--f-datos); font-stretch: 76%; font-size: 0.84rem; white-space: nowrap; }
.tabla-periodico td.eq { text-align: left; font-family: var(--f-texto); font-size: 0.97rem; font-weight: 650; white-space: normal; width: 100%; }
.tabla-periodico td.eq a { color: inherit; text-decoration: none; }
.tabla-periodico td.eq a:hover { text-decoration: underline; }
.tabla-periodico td.pos { font-family: var(--f-titulos); font-weight: 900; font-size: 1.3rem; text-align: center; width: 2.2em; color: var(--texto); }
.tabla-periodico td.pts { font-weight: 800; font-size: 1rem; color: var(--texto); }
.tabla-periodico tr.lider td.pos { color: var(--sobre-club); background: var(--club); }
.tabla-periodico tr.zona-sube td.pos, .tabla-periodico tr.zona-pasa td.pos { box-shadow: inset 4px 0 0 var(--ok); }
.tabla-periodico tr.zona-baja td.pos { box-shadow: inset 4px 0 0 var(--error); }
.tabla-periodico tr.retirado td { color: var(--texto-3); text-decoration: line-through; }
.tabla-periodico tbody tr { transition: background 120ms; }
.tabla-periodico tr:hover td { background: var(--superficie-2); }
@media (max-width: 560px) { .tabla-periodico .col-op { display: none; } }
.compacta .tabla-periodico .col-op { display: none; }
.racha { display: inline-flex; gap: 2px; vertical-align: middle; }
.racha i { display: inline-grid; place-items: center; width: 16px; height: 16px; font-style: normal; font-family: var(--f-datos); font-stretch: 75%; font-size: 0.58rem; font-weight: 750; border-radius: 1px; color: #fff; background: #6b736c; }
.racha i.G { background: var(--ok); }
.racha i.P { background: var(--error); }
:root[data-tema='oscuro'] .racha i { color: #0b0d0c; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .racha i { color: #0b0d0c; } }
.empate-marca { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--texto-3); cursor: help; vertical-align: -6px; padding: 0; }
.empate-marca:hover, .empate-marca:focus-visible { color: var(--noche); background: var(--foco); }
.empate-marca svg { width: 15px; height: 15px; }
.globo { position: fixed; z-index: 320; max-width: min(340px, calc(100vw - 24px)); padding: 12px 14px; background: var(--noche); color: var(--cal); font-size: 0.9rem; line-height: 1.4; border-radius: 2px; border-left: 4px solid var(--foco); box-shadow: var(--sombra-3); animation: menu-entra var(--rapido) var(--curva); }
.globo p { margin: 0; }
.globo p + p { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(242 240 232 / 0.18); }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-xs); color: var(--texto-3); margin-top: 8px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; display: inline-block; }
.leyenda i.sube { background: var(--ok); }
.leyenda i.baja { background: var(--error); }

/* Números */
.breves { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 0 32px; }
.lista-numeros { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.lista-numeros li { display: grid; grid-template-columns: 1.7em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--linea); counter-increment: n; }
.lista-numeros li::before { content: counter(n); font-family: var(--f-titulos); font-weight: 900; font-size: 1.15rem; color: var(--texto-3); }
.lista-numeros li:first-child::before { color: var(--club-tinta-uso, var(--texto)); }
.lista-numeros li.sin-num::before { content: ''; }
.lista-numeros .quien { min-width: 0; }
.lista-numeros .quien strong { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-numeros .quien span { display: block; font-size: var(--t-xs); color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-numeros .cuanto { font-family: var(--f-datos); font-stretch: 76%; font-weight: 750; font-size: 1.05rem; }
.tarjeta-mini { display: inline-block; width: 9px; height: 13px; border-radius: 1.5px; vertical-align: -1px; margin-right: 3px; }
.tarjeta-mini.amarilla { background: #f2c200; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.tarjeta-mini.roja { background: #d7261e; }
.cifras-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 4px solid var(--texto); }
.cifras-grandes > div { padding: 14px 12px 12px 0; border-bottom: 1px solid var(--linea); }
.cifras-grandes b { display: block; font-family: var(--f-titulos); font-size: clamp(2.8rem, 2rem + 2.4vw, 4.4rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.02em; }
.cifras-grandes span { font-size: 0.82rem; font-weight: 600; color: var(--texto-2); }

/* Calendario */
.jornadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 390px), 1fr)); gap: 10px 36px; }
.jornada { margin-bottom: 20px; }
.jornada > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 4px solid var(--texto); padding-top: 6px; margin-bottom: 2px; }
.jornada > header h3 { margin: 0; font-size: 1.5rem; }
.jornada > header span { font-size: 0.8rem; font-weight: 600; color: var(--texto-3); }
.jornada.actual > header { border-top-color: var(--foco); }
.jornada.actual > header h3::after { content: ' · ahora'; color: var(--acento-texto); }

/* Equipos */
.equipos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 24px; border-top: 3px solid var(--texto); }
.equipo-ficha { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); color: inherit; text-decoration: none; transition: padding 160ms var(--curva); }
.equipo-ficha:hover { padding-left: 6px; text-decoration: none; }
.equipo-ficha strong { display: block; font-weight: 750; line-height: 1.2; }
.equipo-ficha span { font-size: var(--t-xs); color: var(--texto-3); }
.escudo { width: 48px; height: 48px; display: grid; place-items: center; font-family: var(--f-titulos); font-weight: 900; font-size: 1.1rem; color: var(--sobre-esc, #fff); background: var(--esc, var(--club)); clip-path: polygon(50% 0, 100% 12%, 100% 62%, 50% 100%, 0 62%, 0 12%); }
.escudo.grande { width: 88px; height: 88px; font-size: 2rem; }

/* Cuadro */
.cuadro-caja { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.cuadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(214px, 1fr); gap: 0 28px; min-width: min-content; }
.ronda { display: flex; flex-direction: column; }
.ronda > h4 { font-family: var(--f-titulos); font-size: 1.25rem; font-weight: 900; border-bottom: 3px solid var(--texto); padding-bottom: 4px; margin: 0 0 8px; }
.ronda > .cruces { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.cruce { position: relative; border: 1.5px solid var(--texto); background: var(--superficie); color: inherit; text-decoration: none; display: block; border-radius: 2px; }
a.cruce:hover, button.cruce:hover { box-shadow: 4px 4px 0 var(--foco); }
.cruce .ladito { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 6px 8px; font-size: 0.9rem; }
.cruce .ladito + .ladito { border-top: 1px solid var(--linea); }
.cruce .ladito .sem { font-family: var(--f-datos); font-stretch: 75%; font-size: 0.66rem; color: var(--texto-3); }
.cruce .ladito .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cruce .ladito .t { font-family: var(--f-datos); font-stretch: 76%; font-weight: 750; font-size: 0.82rem; }
.cruce .ladito.gana { background: var(--noche); color: var(--cal); }
.cruce .ladito.gana .n { font-weight: 800; }
.cruce .ladito.gana .t { color: var(--led-rojo); }
.cruce .ladito.pierde .n { color: var(--texto-3); }
.cruce .ladito.nadie .n { color: var(--texto-3); font-style: italic; font-weight: 500; }
.cruce .info { padding: 4px 8px; font-size: 0.68rem; font-weight: 600; color: var(--texto-3); border-top: 1px dashed var(--linea); }
.ronda:not(:last-child) .cruce::after { content: ''; position: absolute; right: -16px; top: 50%; width: 15px; border-top: 1.5px solid var(--texto); }
.campeon-caja { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.campeon-caja .copa { font-family: var(--f-titulos); font-weight: 900; font-size: 2.2rem; line-height: 0.9; }

/* Escalera */
.escalera { list-style: none; margin: 0; padding: 0; }
.escalera li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.escalera .peldano { font-family: var(--f-titulos); font-weight: 900; font-size: 2rem; text-align: center; line-height: 1; background: var(--superficie-2); padding: 6px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%); }
.escalera li:first-child .peldano { background: var(--club); color: var(--sobre-club); }
.escalera .quien strong { display: block; }
.escalera .quien span { font-size: var(--t-xs); color: var(--texto-3); }
.reto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.reto .quienes { font-weight: 700; }
.reto .quienes .contra { font-family: var(--f-titulos); font-weight: 850; color: var(--club-tinta-uso); padding: 0 6px; }
.reto .plazo { font-size: 0.78rem; font-weight: 600; color: var(--texto-3); }

/* Podio */
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; max-width: 520px; margin: 8px 0 18px; }
.podio > div { text-align: center; }
.podio .cajon { background: var(--texto); color: var(--fondo); font-family: var(--f-titulos); font-weight: 900; font-size: 2.4rem; display: grid; place-items: center; }
.podio .p1 .cajon { height: 110px; background: var(--club); color: var(--sobre-club); }
.podio .p2 .cajon { height: 80px; }
.podio .p3 .cajon { height: 58px; }
.podio strong { display: block; font-weight: 750; line-height: 1.2; margin-bottom: 2px; }
.podio span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--texto-3); margin-bottom: 6px; }

/* Acta */
.acta { max-width: 920px; }
.acta .cabeza-acta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; border-bottom: 3px solid var(--texto); padding-bottom: 12px; margin-bottom: 16px; }
.acta .cabeza-acta h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); margin: 0; }
.acta .cabeza-acta .comp-acta { margin: 0 0 6px; font-weight: 700; color: var(--texto-2); }
.acta .datos-acta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; border: 1.5px solid var(--texto); margin: 14px 0; }
.acta .datos-acta > div { padding: 6px 10px; border-left: 1.5px solid var(--texto); }
.acta .datos-acta > div:first-child { border-left: 0; }
.acta .datos-acta dt { font-size: 0.7rem; font-weight: 700; color: var(--texto-3); }
.acta .datos-acta dd { margin: 0; font-weight: 700; }
.plantillas-acta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px) { .plantillas-acta { grid-template-columns: minmax(0, 1fr); } }
.tabla-acta { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabla-acta th, .tabla-acta td { border: 1px solid var(--linea-fuerte); padding: 4px 6px; text-align: left; }
.tabla-acta th { font-size: 0.7rem; font-weight: 700; background: var(--superficie-2); }
.tabla-acta td.c { text-align: center; width: 3.2em; font-family: var(--f-datos); font-stretch: 78%; }
.tabla-acta caption { caption-side: top; text-align: left; font-family: var(--f-titulos); font-weight: 900; font-size: 1.4rem; padding-bottom: 4px; }
.firmas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.firmas > div { border-top: 1.5px solid var(--texto); padding-top: 4px; font-size: var(--t-xs); color: var(--texto-2); min-height: 70px; }

/* Vacío con dibujo propio: media pista con sus líneas */
.vacio-pista { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px 0; border-top: 3px solid var(--texto); border-bottom: 1px solid var(--linea); }
.vacio-pista .dibujo-pista { color: var(--texto-3); }
.vacio-pista .dibujo-pista svg { width: 100%; height: auto; }
.vacio-pista h3 { margin: 0 0 6px; font-size: 1.9rem; }
.vacio-pista p { margin: 0 0 12px; color: var(--texto-2); max-width: 46ch; }
@media (max-width: 520px) { .vacio-pista { grid-template-columns: minmax(0, 1fr); } .vacio-pista .dibujo-pista { max-width: 200px; } }

/* ── Panel de quien organiza ────────────────────────────────────────────────────────────────────────────── */
.gestion { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
/* El lateral es la mesa de anotadores: siempre de noche */
.gestion > .menu-gestion { position: sticky; top: calc(var(--barra-alto) + 14px); display: flex; flex-direction: column; gap: 1px; background: var(--noche); color: var(--cal); padding: 0 0 12px; }
.menu-gestion .comp-nombre { font-family: var(--f-titulos); font-weight: 900; font-size: 1.6rem; line-height: 0.92; padding: 18px 16px 14px; margin-bottom: 6px; border-top: 6px solid var(--club); }
.menu-gestion .comp-nombre small { display: block; font-family: var(--f-texto); font-size: 0.74rem; font-weight: 600; color: var(--cal-3); margin-top: 8px; line-height: 1.3; }
.menu-gestion a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--cal-2); text-decoration: none; font-weight: 650; font-size: 0.95rem; border-left: 3px solid transparent; }
.menu-gestion a svg { width: 18px; height: 18px; opacity: 0.7; }
.menu-gestion a:hover { background: var(--noche-3); color: var(--cal); }
.menu-gestion a[aria-current='page'] { color: var(--foco); border-left-color: var(--foco); background: var(--noche-2); }
.menu-gestion a[aria-current='page'] svg { opacity: 1; }
.menu-gestion a .contador { margin-left: auto; }
.menu-gestion .ver-publica { margin-top: 10px; border-top: 1px solid var(--noche-3); padding-top: 14px; }
@media (max-width: 900px) { .gestion { grid-template-columns: minmax(0, 1fr); } .gestion > .menu-gestion { display: none; } }
.chip-club { display: none; }

/* Lista de competiciones: cada una, un marcador pequeño */
.comp-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.comp-tarjeta { display: block; position: relative; background: var(--noche); color: var(--cal); text-decoration: none; border-radius: 3px; overflow: hidden; transition: transform 200ms var(--curva), box-shadow 200ms; }
.comp-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgb(0 0 0 / 0.6); text-decoration: none; }
.comp-tarjeta .cuerpo { padding: 16px 18px 18px; }
.comp-tarjeta h3 { font-size: 1.9rem; line-height: 0.9; margin: 4px 0 10px; color: var(--cal); }
.comp-tarjeta .meta { font-size: 0.78rem; font-weight: 600; color: var(--cal-3); }
.comp-tarjeta p { color: var(--cal-2) !important; }
.comp-tarjeta .barra-progreso { height: 4px; background: rgb(242 240 232 / 0.12); margin-top: 12px; }
.comp-tarjeta .barra-progreso span { display: block; height: 100%; background: var(--foco); box-shadow: 0 0 8px rgb(255 176 46 / 0.6); }
.comp-tarjeta .avisos-comp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.comp-tarjeta .etiqueta { color: var(--cal-2); border-color: rgb(242 240 232 / 0.3); background: transparent; }
.comp-tarjeta .etiqueta.atencion { color: var(--noche); background: var(--foco); border-color: var(--foco); }
.comp-tarjeta .etiqueta.ok { color: var(--noche); background: #6fe0a2; border-color: transparent; }

.fila-partido { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--linea); }
.fila-partido:first-of-type { border-top: 0; }
.fila-partido .cuando { font-size: 0.74rem; font-weight: 600; color: var(--texto-3); line-height: 1.35; }
.fila-partido .cuando b { display: block; font-family: var(--f-datos); font-stretch: 78%; font-size: 0.95rem; color: var(--texto); font-weight: 750; }
.fila-partido .resultado { padding: 0; }
.fila-partido .acciones-fila { display: flex; gap: 4px; }
.fila-partido.aplazado .cuando b { color: var(--atencion); }
@media (max-width: 600px) {
  .fila-partido { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .fila-partido .cuando { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
  .fila-partido .cuando b { display: inline; }
  .fila-partido .acciones-fila .boton { min-height: 42px; min-width: 42px; }
  .resultado .tanteo { min-width: 56px; padding: 2px 6px; }
  .resultado { gap: 6px; }
}
.caja-jornada { margin-bottom: 22px; border-top: 4px solid var(--texto); }
.caja-jornada > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.caja-jornada > header h3 { margin: 0; font-size: 1.8rem; }
.caja-jornada > header .fecha-j { font-size: 0.82rem; font-weight: 600; color: var(--texto-2); }
.selector-jornadas { display: flex; gap: 0; overflow-x: auto; margin-bottom: 18px; scrollbar-width: thin; border: 1.5px solid var(--texto); width: max-content; max-width: 100%; }
.selector-jornadas button { flex-shrink: 0; min-width: 46px; height: 42px; border: 0; border-left: 1px solid var(--linea); background: var(--superficie); font-family: var(--f-datos); font-stretch: 78%; font-weight: 700; font-size: 0.82rem; color: var(--texto-2); position: relative; }
.selector-jornadas button:first-child { border-left: 0; }
.selector-jornadas button.hecha { color: var(--texto-3); background: var(--superficie-2); }
.selector-jornadas button.con-algo::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--led-rojo); }
.selector-jornadas button[aria-pressed='true'] { background: var(--noche); color: var(--foco); }

.caja-validar { background: var(--noche); color: var(--cal); margin-bottom: 22px; padding-bottom: 4px; border-top: 6px solid var(--foco); --texto: var(--cal); --texto-2: var(--cal-2); --linea: rgb(242 240 232 / 0.16); }
.caja-validar > h3 { margin: 0; padding: 14px 16px 6px; font-size: 1.6rem; color: var(--foco); }
.caja-validar .boton { color: var(--cal); border-color: rgb(242 240 232 / 0.5); }
.caja-validar .boton:hover { background: var(--cal); color: var(--noche); }
.caja-validar .boton.primario { background: var(--foco); border-color: var(--foco); color: var(--noche); }
.propuesta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 16px; border-top: 1px solid rgb(242 240 232 / 0.14); }
.propuesta .que { font-weight: 700; }
.propuesta .detalle { font-size: var(--t-s); color: var(--cal-2); }
@media (max-width: 600px) { .propuesta { grid-template-columns: minmax(0, 1fr); } }

/* Asistente */
.asistente { max-width: 900px; }
.asistente h1 { font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 0.84; margin-bottom: 18px; }
.opciones-grandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 0; border-top: 3px solid var(--texto); border-left: 1px solid var(--linea); }
.opcion-grande { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border: 0; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: transparent; border-radius: 0; text-align: left; cursor: pointer; min-height: 150px; font: inherit; color: inherit; transition: background 140ms, color 140ms; }
.opcion-grande:hover { background: var(--superficie); }
.opcion-grande[aria-pressed='true'] { background: var(--noche); color: var(--cal); }
.opcion-grande[aria-pressed='true'] span { color: var(--cal-2); }
.opcion-grande[aria-pressed='true'] .pictograma { color: var(--foco); }
.opcion-grande strong { font-family: var(--f-titulos); font-weight: 900; font-size: 1.6rem; line-height: 0.9; }
.opcion-grande span { font-size: 0.82rem; color: var(--texto-2); line-height: 1.35; }
.opcion-grande.ancha { min-height: 0; }
.pictograma { width: 46px; height: 46px; color: var(--texto); }
.pictograma .relleno { fill: currentColor; opacity: 0.1; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--texto); width: max-content; max-width: 100%; }
.dias-semana button { width: 46px; height: 46px; border: 0; border-left: 1px solid var(--linea); background: var(--superficie); font-weight: 800; color: var(--texto-2); }
.dias-semana button:first-child { border-left: 0; }
.dias-semana button[aria-pressed='true'] { background: var(--noche); color: var(--foco); }
.fichas-texto { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ficha-texto { display: inline-flex; align-items: center; gap: 4px; padding: 3px 3px 3px 10px; border: 1.5px solid var(--texto); background: var(--superficie); border-radius: 2px; font-family: var(--f-datos); font-stretch: 80%; font-size: 0.82rem; font-weight: 600; }
.ficha-texto button { border: 0; background: transparent; width: 26px; height: 26px; display: grid; place-items: center; color: var(--texto-3); }
.ficha-texto button:hover { background: var(--texto); color: var(--fondo); }
.colores { display: flex; flex-wrap: wrap; gap: 6px; }
.colores button { width: 38px; height: 38px; border-radius: 2px; border: 1.5px solid rgb(0 0 0 / 0.15); cursor: pointer; padding: 0; }
.colores button[aria-pressed='true'] { outline: 3px solid var(--texto); outline-offset: 2px; }
.resumen-calendario { padding: 14px 16px; background: var(--noche); color: var(--cal); border-left: 4px solid var(--foco); font-size: 0.92rem; }
.pie-asistente { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 16px; border-top: 1.5px solid var(--texto); }

/* Diálogo de resultado */
.dialogo-resultado .led { max-width: 540px; margin: 0 auto 10px; }
.entrada-tanteo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.entrada-tanteo .campo { text-align: center; }
.entrada-tanteo .campo label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entrada-tanteo input { text-align: center; font-family: var(--f-datos) !important; font-stretch: 80%; font-size: 1.8rem !important; font-weight: 750; min-height: 60px !important; }
.entrada-tanteo .guion { font-family: var(--f-titulos); font-weight: 900; font-size: 2.2rem; padding-bottom: 50px; }
.sumador { display: inline-flex; align-items: center; gap: 4px; }
.apuntes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .apuntes { grid-template-columns: minmax(0, 1fr); } }
.apuntes h4 { margin: 0 0 6px; font-size: 1.3rem; }
.lista-apuntes { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.lista-apuntes li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; background: var(--superficie-2); border-left: 3px solid var(--texto); font-size: var(--t-s); }
.lista-apuntes li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botonera-apunte { display: flex; flex-wrap: wrap; gap: 6px; }
.botonera-apunte .boton svg { display: block; width: 15px; height: 15px; }
.error-vivo { color: var(--error); font-size: var(--t-s); font-weight: 700; min-height: 1.4em; }

/* Capitán */
.capitan-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 22px; }
.capitan-cabeza h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); margin: 0; line-height: 0.86; }
.capitan-cabeza .quien-soy { margin: 0 0 4px; font-weight: 700; color: var(--texto-2); }

/* Widgets incrustados */
.incrustado { background: var(--superficie); min-height: 0; }
.incrustado .contenido-widget { padding: 12px 14px; }
.incrustado .nombre-widget { margin: 0 0 4px; font-weight: 700; font-size: 0.86rem; color: var(--texto-2); }
.incrustado .firma-widget { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--linea); font-size: var(--t-xs); color: var(--texto-3); }
.incrustado .firma-widget a { color: var(--texto-2); font-weight: 700; }

/* Varios */
.texto-club { color: var(--club-tinta-uso); }
.solo-impresion { display: none !important; }
@media (max-width: 600px) { .oculto-movil { display: none !important; } }
.pila-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-envio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 520px) { .qr-envio { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.lista-desempate { list-style: none; margin: 0; padding: 0; counter-reset: c; border-top: 2px solid var(--texto); }
.lista-desempate li { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--linea); counter-increment: c; font-size: var(--t-s); }
.lista-desempate li::before { content: counter(c) '.'; font-family: var(--f-titulos); font-weight: 900; font-size: 1.1rem; width: 1.6em; color: var(--texto-3); }
.lista-desempate li span { flex: 1; }
.lista-desempate li.apagado { opacity: 0.5; }
.creditos-fotos { font-size: 0.8rem; color: var(--texto-3); }

/* ── Impresión: actas, calendario, clasificación ───────────────────────────────────────────────────────── */
@media print {
  :root { --club: #000; --club-2: #000; --sobre-club: #fff; --club-tinta: #000; --linea: #999; --linea-fuerte: #666; --fondo: #fff; --texto: #000; }
  .secciones, .no-imprimir, .barra, .pie, .menu-gestion, .pestanas, .empate-marca, .botones-periodico { display: none !important; }
  .cabecera-periodico { background: none !important; color: #000; margin: 0 0 12px; padding: 0; }
  .cabecera-periodico .marca-agua { display: none; }
  .solo-impresion { display: block !important; }
  .gestion { display: block; }
  .principal { padding: 0 !important; }
  .a-sangre { margin-inline: 0; padding-inline: 0; }
  .acta { max-width: none; }
  .acta + .acta { break-before: page; }
  .led:not(.tinta) .caja { fill: none; stroke: #000; }
  .led:not(.tinta) .bisel { fill: none; stroke: #000; }
  .led:not(.tinta) .luz polygon, .led:not(.tinta) .luz rect { fill: #000; }
  .led:not(.tinta) .luz { filter: none; }
  .led:not(.tinta) .apagado polygon, .led:not(.tinta) .apagado rect { fill: #eee; }
  .led:not(.tinta) .lado, .led:not(.tinta) .placa-texto, .led:not(.tinta) .rotulo, .led:not(.tinta) .etiqueta-led { fill: #000; opacity: 1; }
  .led:not(.tinta) .placa { fill: none; stroke: #000; }
  .marcador-marco { background: none; box-shadow: none; padding: 0; }
  .marcador-marco::before, .marcador-marco::after { display: none; }
  .foto-marcador { background: none !important; padding: 0; }
  .foto-marcador::before { display: none; }
  .resultado .tanteo { background: none; color: #000; text-shadow: none; border: 1px solid #000; }
  .tabla-periodico tr.lider td.pos { background: none; color: #000; }
  .racha i { color: #000 !important; background: none !important; border: 1px solid #000; }
  .jornadas { display: block; columns: 2; }
}