/* Karate Live · web pública, portal de club y panel del organizador.
   Marca nueva (docs/MARCA.md): los tokens viven en marca.css; aquí se mapean a los nombres que ya usa la interfaz.
   Modo Operate (calendario, evento, club, organizador, mesa): limpio y funcional. Persuade (portada, organizadores): portada.css.
   CSP: style-src 'self' -> sin atributos style en línea; todo vive en hojas de estilo. */

:root {
  --font: var(--fuente-texto);
  --primario: var(--marino-900); --primario-texto: #FFFFFF;
  --ok-t: var(--ok); --ok-f: var(--ok-fondo);
  --pend-t: var(--aviso); --pend-f: var(--aviso-fondo);
  --info-t: var(--info); --info-f: var(--info-fondo);
  --err-t: var(--error); --err-f: var(--error-fondo);
  --neu-t: var(--texto-2); --neu-f: var(--superficie-2);
  --vidrio: color-mix(in srgb, var(--fondo) 82%, transparent); --vidrio-solido: var(--fondo);
  --sombra: var(--sombra-2);
  --r-campo: 12px;
  --ease: cubic-bezier(.32,.72,0,1);
  --aka-texto: var(--lado-aka); --ao-texto: var(--lado-ao);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --primario: #F5F7FA; --primario-texto: var(--marino-900); --aka: var(--aka-vivo); --ao: var(--ao-vivo); }
}
:root[data-tema="oscuro"] { --primario: #F5F7FA; --primario-texto: var(--marino-900); --aka: var(--aka-vivo); --ao: var(--ao-vivo); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 1.0625rem/1.47 var(--font); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
  overflow-wrap: break-word;
}
#marco { flex: 1; display: flex; flex-direction: column; min-width: 0; }
main { flex: 1; outline: none; display: flex; flex-direction: column; }
main:focus, main:focus-visible { outline: none; }
main > .contenedor, main > .org-marco { width: 100%; }
img { max-width: 100%; display: block; }
a { color: var(--enlace); text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.022em; }
h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.15; letter-spacing: -.018em; }
h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.014em; font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; }
p { margin: 0 0 .75em; }
h1 + p, h1 + .sec { margin-top: 6px; }
.display { font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
.subtitulo { font-size: clamp(1.0625rem, 2.2vw, 1.375rem); color: var(--texto-2); line-height: 1.35; }
.sec { color: var(--texto-2); font-size: .9375rem; line-height: 1.4; }
.num { font-variant-numeric: tabular-nums; }
.etq { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }

.saltar { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--superficie); color: var(--texto); padding: 12px 16px; border-radius: 12px; border: 1px solid var(--linea); transition: top .12s; }
.saltar:focus { top: 8px; }

/* ---------- barra de marca: siempre azul marino (superficie de escena, MARCA.md 3.4) ---------- */
:root { --barra-h: 72px; }
.barra { position: sticky; top: 0; z-index: 30; background: var(--marino-900); color: var(--escena-texto); border-bottom: 1px solid var(--escena-linea); }
.barra-int { width: min(1280px, 100% - 2 * clamp(16px, 3vw, 32px)); margin: 0 auto; padding: 0; min-height: var(--barra-h); display: flex; align-items: center; gap: 24px; justify-content: space-between; }
.marca { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.marca img { height: 32px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.nav a, .nav button.nav-btn { color: var(--escena-texto); text-decoration: none; font: 700 .8125rem/1 var(--fuente-marca); font-stretch: var(--ancho-marca); letter-spacing: .1em; text-transform: uppercase; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 6px; background: none; border: 0; cursor: pointer; position: relative; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--vivo); }
.nav .cta { background: var(--accion); color: var(--sobre-accion); margin-left: 8px; padding: 0 18px; min-height: 44px; }
.nav .cta[aria-current="page"]::after { content: none; }
.barra :focus-visible { outline-color: var(--escena-foco); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover, .nav button.nav-btn:hover { background: rgba(255,255,255,.08); }
  .nav .cta:hover { background: var(--accion-hover); }
}
.nav .cta:active { transform: scale(.97); }
.barra .menu-btn { display: none; background: transparent; color: var(--escena-texto); border-color: var(--escena-linea); }
@media (max-width: 1060px) {
  .nav a, .nav button.nav-btn { padding: 0 8px; font-size: .75rem; }
  .nav .cta { padding: 0 12px; }
}
@media (max-width: 920px) {
  :root { --barra-h: 60px; }
  .barra .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--marino-900); border-bottom: 1px solid var(--escena-linea); padding: 8px 16px 16px; flex-direction: column; align-items: stretch; gap: 0; box-shadow: var(--sombra-2); }
  .nav.abierto { display: flex; animation: baja .2s var(--ease-salida); transform-origin: top right; }
  .nav a, .nav button.nav-btn { border-radius: 8px; min-height: 48px; font-size: .875rem; }
  .nav a[aria-current="page"]::after { bottom: 10px; right: auto; width: 24px; }
  .nav .cta { margin: 8px 0 0; justify-content: center; }
  .barra-int { position: relative; }
}
@keyframes baja { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.banda { position: sticky; top: var(--barra-h); z-index: 25; text-align: center; padding: 8px 16px; font-size: .9375rem; font-weight: 500; }
.banda.sin-red { background: var(--pend-f); color: var(--pend-t); border-bottom: 1px solid var(--pend-t); }
.banda.recuperada { background: var(--ok-f); color: var(--ok-t); }

/* ---------- estructura ---------- */
.contenedor { max-width: var(--contenedor); margin: 0 auto; padding: 0 16px; width: 100%; }
.seccion { padding: 48px 0; }
@media (min-width: 821px) { .seccion { padding: 80px 0; } }
.vista { animation: aparece .12s ease-out; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.migas { padding: 16px 0 0; font-size: .9375rem; }
.migas a { color: var(--enlace); }
.pie { background: var(--marino-950); color: var(--escena-texto-2); font-size: .9375rem; padding: 48px 0 32px; border-top: 1px solid var(--escena-linea); }
.pie a { color: var(--escena-texto); text-underline-offset: 3px; }
.pie-int { width: min(1280px, 100% - 2 * clamp(16px, 3vw, 32px)); margin: 0 auto; padding: 0; display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.pie-marca { grid-column: span 2; max-width: 36ch; } .pie-marca img { height: 28px; width: auto; margin-bottom: 12px; } .pie-marca p { margin: 0; }
.pie-col { display: flex; flex-direction: column; gap: 4px; } .pie-col a { display: inline-flex; align-items: center; min-height: 44px; }
.pie-col h2 { font: 600 .75rem/1.2 var(--fuente-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--escena-texto-2); margin-bottom: 4px; }
.pie-nota, .pie-copy { grid-column: 1 / -1; margin: 0; font-size: .875rem; max-width: 80ch; }
.pie-copy { border-top: 1px solid var(--escena-linea); padding-top: 16px; max-width: none; }
.pie :focus-visible { outline-color: var(--escena-foco); }

.hero { padding: 48px 0 24px; }
@media (min-width: 821px) { .hero { padding: 80px 0 32px; } }
.hero .subtitulo { margin-top: 12px; max-width: 40ch; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px;
  border-radius: 980px; border: 1px solid transparent; background: var(--superficie-2); color: var(--texto);
  font: 500 1rem/1 var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .1s ease-out, background-color .15s, opacity .15s; -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--superficie-2) 88%, var(--texto)); }
.btn.primario { background: var(--primario); color: var(--primario-texto); font-weight: 600; }
.btn.primario:hover:not(:disabled) { background: var(--primario); opacity: .88; }
.btn.peligro { background: transparent; color: var(--err-t); border-color: var(--err-t); }
.btn.terciario { background: none; color: var(--enlace); text-decoration: underline; padding: 0 8px; }
.btn.chico { min-height: 36px; padding: 0 14px; font-size: .9375rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.acciones.fin { justify-content: flex-end; }

/* ---------- campos ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.campo > label, .campo > .etiqueta, legend.etiqueta { font-size: .9375rem; font-weight: 600; }
.campo .ayuda, fieldset > .ayuda { font-size: .875rem; color: var(--texto-2); }
.campo .error-campo { font-size: .875rem; color: var(--err-t); display: flex; gap: 6px; align-items: flex-start; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-campo); border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); font: inherit; font-size: 1rem;
}
textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texto-2); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--err-t); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--primario); flex: none; margin: 0; }
.opcion { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; }
.formulario h1, .formulario h2 { margin-bottom: 8px; }
.cab-club { max-width: 360px; margin-top: 16px; }
.fila-campos { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.fecha-3 { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; }
.formulario { max-width: 720px; }
.resumen-errores { border: 1px solid var(--err-t); background: var(--err-f); color: var(--err-t); padding: 12px 16px; border-radius: var(--r-bloque); margin-bottom: 16px; }
.resumen-errores ul { margin: 4px 0 0; padding-left: 20px; }
.resumen-errores a { color: inherit; }

.buscador { position: relative; }
.buscador input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 56px; border-radius: 980px; padding-left: 52px; font-size: 1.0625rem; background: var(--superficie); }
.buscador svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--texto-2); pointer-events: none; }
@media (max-width: 820px) { .buscador input:not([type=checkbox]):not([type=radio]):not([type=file]) { min-height: 48px; } }

/* ---------- filtros, chips, segmentado ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.filtros select { width: auto; min-width: 150px; border-radius: 980px; padding-inline: 18px; }
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--superficie-2); border-radius: 980px; }
.segmentado button, .segmentado a { min-height: 40px; padding: 0 16px; border-radius: 980px; border: 0; background: transparent; color: var(--texto); font: 500 .9375rem var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.segmentado [aria-pressed="true"], .segmentado [aria-current="true"] { background: var(--superficie); box-shadow: 0 0 0 1px var(--linea); font-weight: 700; }
.segmentado .n { color: var(--texto-2); font-variant-numeric: tabular-nums; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 980px; border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); font: 500 .875rem var(--font); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.chip .n { font-variant-numeric: tabular-nums; opacity: .75; font-weight: 400; }
.resumen-filtro { color: var(--texto-2); font-size: .9375rem; margin: 12px 0 0; }

/* ---------- insignias ---------- */
.insignia { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 10px; border-radius: 980px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.insignia svg { width: 14px; height: 14px; flex: none; }
.i-ok { background: var(--ok-f); color: var(--ok-t); }
.i-pendiente { background: var(--pend-f); color: var(--pend-t); }
.i-info { background: var(--info-f); color: var(--info-t); }
.i-error { background: var(--err-f); color: var(--err-t); }
.i-neutro { background: var(--neu-f); color: var(--neu-t); }
.pais { display: inline-block; padding: 1px 10px; border-radius: 980px; background: var(--superficie-2); font-size: .75rem; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ---------- tarjetas de evento ---------- */
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.rejilla.una { grid-template-columns: 1fr; }
.tarjeta { position: relative; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.evento .cab { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.evento h3 { margin: 4px 0 0; }
.evento h3 a { color: var(--texto); text-decoration: none; }
.evento h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-tarjeta); }
.evento .linea { color: var(--texto-2); font-size: .9375rem; margin: 0; }
.evento .plazo { color: var(--pend-t); font-size: .9375rem; display: flex; gap: 6px; align-items: center; margin: 0; }
.evento .plazo svg { width: 16px; height: 16px; }
.accesos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; position: relative; z-index: 1; }
.pildora { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 980px; background: var(--superficie-2); color: var(--texto); text-decoration: none; font-size: .875rem; font-weight: 500; position: relative; z-index: 1; }
.pildora:hover { background: color-mix(in srgb, var(--superficie-2) 85%, var(--texto)); }
.pildora.vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--err-t); margin-right: 8px; }
.pildora.prim { background: var(--primario); color: var(--primario-texto); }
@media (max-width: 820px) { .pildora { min-height: 44px; } }
.evento.lista { flex-direction: row; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.evento.lista .fechas { min-width: 120px; flex: none; }
.evento.lista .cuerpo { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.grupo-mes { position: sticky; top: var(--barra-h); z-index: 5; background: var(--fondo); padding: 12px 0 8px; margin: 24px 0 8px; border-bottom: 1px solid var(--linea); }
.encabezado-bloque { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 16px; margin: 48px 0 16px; flex-wrap: wrap; }
.encabezado-bloque:first-child { margin-top: 0; }

/* ---------- esqueleto, vacío, error ---------- */
.esqueleto { background: var(--superficie-2); border-radius: var(--r-bloque); min-height: 18px; }
.tarjeta.esq { gap: 12px; min-height: 180px; }
.esq .esqueleto:nth-child(1) { width: 40%; } .esq .esqueleto:nth-child(2) { width: 80%; height: 28px; } .esq .esqueleto:nth-child(3) { width: 60%; }
.vacio { text-align: center; padding: 48px 16px; max-width: 520px; margin: 0 auto; }
.vacio h2, .vacio h3 { font-size: 1.375rem; margin-bottom: 8px; }
.vacio p { color: var(--texto-2); }
.vacio .acciones { justify-content: center; margin-top: 16px; }
.aviso-error { border: 1px solid var(--err-t); background: var(--err-f); color: var(--texto); border-radius: var(--r-bloque); padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.aviso-error strong { color: var(--err-t); }
.aviso { border: 1px solid var(--linea); background: var(--superficie-2); border-radius: var(--r-bloque); padding: 12px 16px; margin: 0 0 16px; }
.aviso.pend { background: var(--pend-f); color: var(--pend-t); border-color: transparent; }
.aviso.ok { background: var(--ok-f); color: var(--ok-t); border-color: transparent; }
.aviso.err { background: var(--err-f); color: var(--err-t); border-color: transparent; }
.aviso.info { background: var(--info-f); color: var(--info-t); border-color: transparent; }
.actualizado { color: var(--texto-2); font-size: .875rem; }

/* ---------- evento ---------- */
.cab-evento { display: grid; gap: 24px; padding: 16px 0 32px; grid-template-columns: 1fr; }
@media (min-width: 821px) { .cab-evento { grid-template-columns: 220px 1fr; align-items: end; padding: 24px 0 40px; } }
.cartel { aspect-ratio: 3/4; border-radius: var(--r-tarjeta); background: var(--superficie-2); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--texto-2); }
.cartel > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .cartel { aspect-ratio: 4/3; } }
.cab-evento .meta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.plazo-linea { display: flex; flex-direction: column; gap: 2px; }
.plazo-linea .quedan { color: var(--pend-t); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.plazo-linea svg { width: 16px; height: 16px; }
.pestanas { position: sticky; top: var(--barra-h); z-index: 20; background: var(--vidrio); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--linea); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .pestanas { background: var(--vidrio-solido); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.pestanas-int { max-width: var(--contenedor); margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pestanas-int::-webkit-scrollbar { display: none; }
.pestanas a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; color: var(--texto-2); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; white-space: nowrap; }
.pestanas a[aria-selected="true"] { color: var(--texto); font-weight: 700; border-bottom-color: var(--texto); }
.panel { padding: 32px 0 80px; }
.cols { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 981px) { .cols { grid-template-columns: minmax(0, 720px) 320px; } }
.bloque { margin-bottom: 40px; }
.bloque h3 { margin-bottom: 12px; }
.lista-plana { list-style: none; margin: 0; padding: 0; }
.lista-plana li { padding: 12px 0; border-bottom: 1px solid var(--linea); display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.lista-plana li:last-child { border-bottom: 0; }
.texto-libre { white-space: pre-line; }
.barra-inscribir { display: none; }
@media (max-width: 820px) {
  .barra-inscribir { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px; background: var(--vidrio-solido); border-top: 1px solid var(--linea); }
  .barra-inscribir .btn { width: 100%; }
  body.con-barra-inscribir main { padding-bottom: 72px; }
}
.dos-col-sel { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 821px) { .dos-col-sel { grid-template-columns: 280px 1fr; } .dos-col-sel .lateral-lista { position: sticky; top: 130px; align-self: start; max-height: calc(100vh - 160px); overflow: auto; } }
.menu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-lista a { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--texto); text-decoration: none; }
.menu-lista a:hover { background: var(--superficie-2); }
.menu-lista a[aria-current="true"] { background: var(--superficie-2); font-weight: 700; }
.solo-movil { display: none; } @media (max-width: 820px) { .solo-movil { display: block; } .solo-escritorio { display: none; } }

/* ---------- tablas ---------- */
.tabla-wrap { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla caption { text-align: left; font-weight: 600; padding: 0 0 8px; }
.tabla th { text-align: left; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; position: sticky; top: 0; background: var(--fondo); }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; min-height: 44px; }
.tabla tr.sel td { background: var(--info-f); }
.tabla .acc { text-align: right; white-space: nowrap; }
.tabla td.der, .tabla th.der { text-align: right; }
@media (max-width: 720px) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-bloque); padding: 8px 12px; margin-bottom: 12px; }
  .tabla td { border: 0; padding: 6px 0; display: flex; gap: 12px; justify-content: space-between; align-items: center; }
  .tabla td[data-et]::before { content: attr(data-et); color: var(--texto-2); font-size: .8125rem; flex: none; }
  .tabla .acc { text-align: left; }
}

/* ---------- diálogo y avisos ---------- */
dialog { border: 0; padding: 0; background: var(--superficie); color: var(--texto); border-radius: 24px; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: var(--sombra); overflow: auto; }
dialog.ancho { width: min(720px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog[open] { animation: hoja .28s var(--ease); }
dialog.cerrando { animation: hoja-fuera .18s var(--ease) forwards; }
@keyframes hoja { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hoja-fuera { to { opacity: 0; transform: translateY(24px); } }
.dlg { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.dlg h2 { font-size: 1.375rem; }
.dlg .acciones { justify-content: flex-end; margin-top: 8px; }
.contador { font-size: .8125rem; color: var(--texto-2); text-align: right; }
#avisos { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
body.con-barra-inscribir #avisos { bottom: 80px; }
.toast { pointer-events: auto; background: var(--primario); color: var(--primario-texto); padding: 12px 20px; border-radius: 980px; box-shadow: var(--sombra); font-size: .9375rem; max-width: 560px; animation: aparece .15s ease-out; display: flex; gap: 12px; align-items: center; }
.toast.error { background: var(--err-t); color: #fff; border-radius: 16px; }
.toast button { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; min-height: 32px; }

/* ---------- pasos, resumen, cifras ---------- */
.pasos { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; flex-wrap: wrap; counter-reset: p; }
.pasos li { counter-increment: p; font-size: .875rem; color: var(--texto-2); display: flex; align-items: center; gap: 8px; }
.pasos li::before { content: counter(p); width: 24px; height: 24px; border-radius: 50%; background: var(--superficie-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.pasos li[aria-current="step"] { color: var(--texto); font-weight: 700; }
.pasos li[aria-current="step"]::before { background: var(--primario); color: var(--primario-texto); }
.pasos li + li::after { content: none; }
.cifras { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 16px 0; }
.cifra { background: var(--superficie-2); border-radius: var(--r-bloque); padding: 14px 16px; }
.cifra b { display: block; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; font-weight: 700; }
.cifra span { font-size: .875rem; color: var(--texto-2); }
.tarea-fila { padding: 14px 0; border-bottom: 1px solid var(--linea); display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.tarea-fila .cuerpo { flex: 1; min-width: 220px; }
.motivo { background: var(--pend-f); color: var(--texto); border-radius: var(--r-bloque); padding: 8px 12px; font-size: .9375rem; margin-top: 6px; }
.motivo b { color: var(--pend-t); }
.linea-tiempo { list-style: none; margin: 8px 0 0; padding: 0; font-size: .875rem; color: var(--texto-2); display: flex; flex-direction: column; gap: 6px; }
.linea-tiempo li { position: relative; padding-left: 18px; }
.linea-tiempo li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--linea-fuerte); }
.zona-soltar { border: 2px dashed var(--linea-fuerte); border-radius: var(--r-tarjeta); padding: 32px 16px; text-align: center; background: var(--superficie); }
.zona-soltar.sobre { background: var(--info-f); border-color: var(--info-t); }
.validaciones { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; }
.validaciones .ok { color: var(--ok-t); } .validaciones .aviso-v { color: var(--pend-t); } .validaciones .bloquea { color: var(--err-t); }
.sugerida { border: 1px solid var(--linea); border-radius: var(--r-bloque); padding: 16px; background: var(--superficie-2); margin: 12px 0; }
.col-fija { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .col-fija.con-detalle { grid-template-columns: minmax(0, 1fr) 380px; } }
.detalle { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; align-self: start; position: sticky; top: calc(var(--barra-h) + 16px); }
.barra-lote { position: sticky; bottom: 0; background: var(--vidrio-solido); border-top: 1px solid var(--linea); padding: 12px 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; z-index: 6; }

/* ---------- organizador ---------- */
body.org { --r-tarjeta: 14px; --r-campo: 10px; }
.org-marco { display: flex; flex: 1; min-height: 0; }
.org-lateral { width: 220px; flex: none; padding: 16px 12px; border-right: 1px solid var(--linea); background: var(--vidrio); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); position: sticky; top: var(--barra-h); align-self: flex-start; height: calc(100vh - var(--barra-h)); overflow: auto; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .org-lateral { background: var(--vidrio-solido); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.org-lateral h2 { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); padding: 8px 12px; font-weight: 600; }
.org-lateral a { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 12px; color: var(--texto); text-decoration: none; border-radius: 10px; font-size: .9375rem; }
.org-lateral a:hover { background: var(--superficie-2); }
.org-lateral a[aria-current="page"] { background: var(--superficie-2); font-weight: 700; }
.org-lateral .n { background: var(--pend-f); color: var(--pend-t); border-radius: 980px; font-size: .75rem; font-weight: 700; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.org-contenido { flex: 1; min-width: 0; padding: 24px 24px 80px; max-width: 1600px; }
.org-contenido h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
body.org .tabla { font-size: .875rem; }
body.org .tabla td { padding: 8px 12px; }
@media (max-width: 900px) {
  .org-marco { flex-direction: column; }
  .org-lateral { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--linea); padding: 8px; display: flex; overflow-x: auto; gap: 4px; }
  .org-lateral h2 { display: none; }
  .org-lateral a { white-space: nowrap; gap: 8px; }
  .org-contenido { padding: 16px 16px 80px; }
}
.pendiente-num { font-size: 1.75rem; font-weight: 700; color: var(--pend-t); font-variant-numeric: tabular-nums; min-width: 2ch; }
.sec-publicacion .fila { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
@media (max-width: 720px) { .sec-publicacion .fila { grid-template-columns: 1fr; } }

/* ---------- llave ---------- */
.llave-wrap { margin-top: 16px; }
.llave-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 12px 0; }
.arbol-region { overflow: auto; border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: 16px; background: var(--superficie); }
.arbol { display: flex; gap: 32px; min-width: max-content; }
.ronda-col { display: flex; flex-direction: column; width: 220px; }
.ronda-col > h4 { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 8px; }
.ronda-celdas { display: flex; flex-direction: column; flex: 1; }
.celda { flex: 1 1 auto; display: flex; align-items: center; position: relative; padding: 8px 0; min-height: 150px; }
.celda .encuentro { width: 100%; }
.celda.sale::after { content: ""; position: absolute; right: -16px; width: 16px; border-right: 1px solid var(--linea-fuerte); }
.celda.sale.par::after { top: 50%; bottom: 0; border-top: 1px solid var(--linea-fuerte); }
.celda.sale.impar::after { top: 0; bottom: 50%; border-bottom: 1px solid var(--linea-fuerte); }
.celda.entra::before { content: ""; position: absolute; left: -16px; width: 16px; top: 50%; border-top: 1px solid var(--linea-fuerte); }
.encuentro { border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); overflow: hidden; font-size: .875rem; }
.encuentro .cab-enc { display: flex; justify-content: space-between; padding: 4px 10px; background: var(--superficie-2); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.lado { display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 40px; }
.lado + .lado { border-top: 1px solid var(--linea); }
.lado .punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lado.aka .punto { background: var(--aka); } .lado.ao .punto { background: var(--ao); }
.lado .quien { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lado .quien b { font-weight: 600; text-transform: uppercase; font-size: .8125rem; }
.lado .quien small { color: var(--texto-2); font-size: .75rem; }
.lado .quien i { font-style: normal; color: var(--texto-2); }
.lado .pts { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 1.5ch; text-align: right; }
.encuentro.fin-ganador, .lado.ganador { font-weight: 800; }
.lado.ganador { box-shadow: inset 0 0 0 2px var(--texto); }
.lado.ganador .quien b::after { content: " \2713"; }
.encuentro .pie-enc { padding: 4px 10px; font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); border-top: 1px solid var(--linea); font-weight: 600; }
.encuentro[data-enc] { cursor: pointer; }
.encuentro.elegido { outline: 3px solid var(--foco); outline-offset: 2px; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8125rem; color: var(--texto-2); margin-top: 12px; }
.lista-rondas .ronda-lista { margin-bottom: 24px; }
.lista-rondas .ronda-lista h4 { margin-bottom: 8px; }
.lista-rondas .rej { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.llave-wrap[data-vista="lista"] .arbol-region { display: none; }
.llave-wrap[data-vista="arbol"] .lista-rondas { display: none; }
.llave-wrap[data-vista="lista"] .ver-completa { display: block; }
.ver-completa { display: none; margin-top: 12px; }
.ver-completa summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.cab-impresion, .pie-impresion { display: none; }

/* ---------- movimiento y contraste ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .12s !important; transition-duration: .12s !important; scroll-behavior: auto !important; }
  dialog[open], dialog.cerrando, .nav.abierto { animation-name: aparece !important; }
  dialog.cerrando { animation-name: desvanece !important; }
  .btn:active:not(:disabled) { transform: none; }
}
@keyframes desvanece { to { opacity: 0; } }
@media (prefers-contrast: more) { :root { --linea: rgba(0,0,0,.55); } .tarjeta, .encuentro, input, select, textarea { border-width: 2px; } }

/* ---------- impresión: A4 apaisado, siempre blanco y negro ---------- */
@page { size: A4 landscape; margin: 10mm; }
@media print {
  :root, :root[data-tema] { color-scheme: light; --fondo: #fff; --superficie: #fff; --superficie-2: #fff; --texto: #000; --texto-2: #000; --linea: #000; --linea-fuerte: #000; --aka: #000; --ao: #000; }
  body { background: #fff; color: #000; font: 9pt/1.25 var(--font); display: block; min-height: 0; }
  .barra, .banda, .pestanas, .btn, .filtros, #avisos, .pie, .saltar, .barra-inscribir, .migas, .cab-evento, .llave-barra, .leyenda, .lista-rondas, .ver-completa, .no-imprimir, .org-lateral { display: none !important; backdrop-filter: none; }
  .llave-wrap[data-vista="lista"] .arbol-region { display: block !important; }
  .panel, .contenedor { padding: 0; max-width: none; }
  .arbol-region { overflow: visible; border: 0; padding: 0; }
  .llave-wrap { break-inside: avoid; page-break-inside: avoid; margin: 0; }
  .encuentro { border: .5pt solid #000; border-radius: 0; background: #fff; color: #000; box-shadow: none; font-size: 8pt; }
  .encuentro .cab-enc { background: #fff; color: #000; border-bottom: .5pt solid #000; font-size: 7pt; }
  .lado { border-radius: 0; min-height: 0; padding: 2pt 4pt; }
  .lado .punto { display: none; }
  .lado.ganador { font-weight: 800; outline: 1.5pt solid #000; outline-offset: -1.5pt; box-shadow: none; }
  .lado .quien small, .encuentro .pie-enc { color: #000; font-size: 7pt; }
  .celda { min-height: 0; padding: 3pt 0; }
  .ronda-col { width: 150pt; }
  .arbol { gap: 20pt; }
  .celda.sale::after, .celda.entra::before { border-color: #000; }
  a[href]::after { content: none; }
  .cab-impresion { display: block; margin-bottom: 8pt; border-bottom: 1pt solid #000; padding-bottom: 4pt; }
  .cab-impresion h1 { font-size: 12pt; letter-spacing: 0; }
  .pie-impresion { display: block; margin-top: 8pt; font-size: 7pt; border-top: .5pt solid #000; padding-top: 3pt; }
  .insignia { background: #fff !important; color: #000 !important; border: .5pt solid #000; }
}

/* ---------- FE-12: sorteo (resumen), corrección, programación, operador de tatami ---------- */
.resumen-sorteo { margin: 0 0 16px; }
.resumen-sorteo li > b { text-align: right; max-width: 60%; }
.lista-simple { margin: 8px 0 0; padding-left: 18px; }
.fila-prog { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.fila-prog .acciones { grid-column: 1 / -1; }
.podio-org .num { display: inline-block; min-width: 2.4ch; }
@media (max-width: 520px) { .fila-prog { grid-template-columns: 1fr; } }

/* Operador de tatami: estilo oscuro de la mesa, siempre, sea cual sea el tema del sistema */
.vista.operador {
  color-scheme: dark;
  --fondo: #0B0E14; --superficie: #141A26; --superficie-2: #1E2636;
  --linea: #34405A; --linea-fuerte: #6A7B99;
  --texto: #F5F7FA; --texto-2: #A9B4C4; --primario: #F5F7FA; --primario-texto: #0B0E14;
  --enlace: #6FA3FF; --foco: #FFD23F; --aka: #FF6B72; --ao: #6FA3FF;
  --ok-t: #4ADE80; --ok-f: rgba(74,222,128,.14); --pend-t: #FFC83D; --pend-f: rgba(255,200,61,.14);
  --info-t: #8DB6FF; --info-f: rgba(141,182,255,.14); --err-t: #FF7A80; --err-f: rgba(255,122,128,.14);
  --neu-t: #A9B4C4; --neu-f: #1E2636;
  background: var(--fondo); color: var(--texto); border-radius: var(--r-tarjeta); padding: 24px 20px 32px; margin-top: 16px; max-width: 760px;
}
.operador h1, .operador h2, .operador h3 { color: var(--texto); }
.operador h3 { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); margin: 20px 0 8px; }
.tatami-op + .tatami-op { margin-top: 32px; }
.enc-op { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; margin-bottom: 10px; }
.enc-op.destacado { border-color: var(--foco); box-shadow: 0 0 0 1px var(--foco); }
.enc-op-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .875rem; color: var(--texto-2); }
.enc-op-lados { display: grid; gap: 6px; }
.lado-op { display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; align-items: center; }
.lado-op .punto { width: 10px; height: 10px; border-radius: 50%; grid-row: 1 / 3; }
.lado-op.aka .punto { background: var(--aka); } .lado-op.ao .punto { background: var(--ao); }
.lado-op b { text-transform: uppercase; font-size: 1.0625rem; letter-spacing: .01em; }
.lado-op small { color: var(--texto-2); grid-column: 2; }
.enc-op .vs { color: var(--texto-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; padding-left: 20px; }
.enc-op .btn { justify-self: start; min-height: 48px; }
/* Pantalla Mesas del organizador: una columna por tatami y selector del tatami de este dispositivo */
.rejilla-mesas { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.rejilla-mesas .tatami-op + .tatami-op { margin-top: 0; }
.rejilla-mesas .tatami-op h2 { margin-top: 0; }
.rejilla-mesas h3 { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); margin: 16px 0 8px; }
.rejilla-mesas details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--texto-2); }
.mesas-dispositivo { max-width: 360px; }
.operador details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--texto-2); }
.operador .btn { background: var(--superficie-2); color: var(--texto); border-color: var(--linea); }
.operador .btn.primario { background: var(--primario); color: var(--primario-texto); }
.operador .insignia { background: var(--neu-f); }
.operador .i-ok { background: var(--ok-f); } .operador .i-pendiente { background: var(--pend-f); }
@media (max-width: 520px) { .vista.operador { border-radius: 0; margin-top: 0; padding: 16px 12px 28px; } .enc-op .btn { justify-self: stretch; text-align: center; justify-content: center; } .enc-op .acciones .btn { flex: 1 1 100%; } }

/* Objetivos táctiles de 44 px en pantallas táctiles/móvil (X-02) */
@media (max-width: 820px), (pointer: coarse) { .btn.chico { min-height: 44px; } .segmentado button, .segmentado a { min-height: 44px; } }

/* ---------- Marca: botones (MARCA.md 3.1, 6) ---------- */
.btn.cta { background: var(--accion); color: var(--sobre-accion); font-weight: 650; min-height: 48px; padding: 0 24px; }
.btn.contorno { background: transparent; border: 1.5px solid currentColor; }
@media (hover: hover) and (pointer: fine) { .btn.cta:hover:not(:disabled) { background: var(--accion-hover); } }
.btn { transition: transform 140ms var(--ease-salida), background-color 150ms ease, opacity 150ms ease; }
.titular-marca { font-family: var(--fuente-marca); font-stretch: var(--ancho-marca); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: 1; }

/* ---------- Marca: tarjeta de evento con cartel (real o generado) ---------- */
.ev-tarj { padding: 0; gap: 0; overflow: hidden; }
.ev-cartel { position: relative; aspect-ratio: 1 / 1; background: var(--marino-900); overflow: hidden; border-bottom: 6px solid transparent; border-image: linear-gradient(100deg, var(--aka) 0 50%, var(--ao) 50% 100%) 1; }
.cartel-real, .cartel-gen { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 220ms var(--ease-salida); }
.cartel-real { object-fit: cover; object-position: center top; }
.cartel-gen { background: var(--marino-900) url("/img/patron-tatami.svg") 0 0 / 64px 64px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; overflow: hidden; }
.cartel-gen::after { content: ""; position: absolute; inset: 0; background: var(--velo-cartel); }
.cg-ilus { position: absolute; left: 0; bottom: 0; width: 100%; height: 72%; max-width: none; object-fit: cover; object-position: center bottom; opacity: .5; }
.cg-logo { position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; }
.cg-fecha { position: relative; z-index: 1; color: #fff; }
.cg-fecha b { display: block; font: 700 clamp(2.5rem, 5vw, 3.75rem)/.9 var(--fuente-numeros); font-stretch: var(--ancho-marca); color: var(--vivo); font-variant-numeric: tabular-nums; }
.cg-fecha span { display: block; margin-top: 6px; font: 700 1.125rem/1 var(--fuente-marca); font-stretch: var(--ancho-marca); letter-spacing: .06em; }
.ev-estado { position: absolute; right: 12px; top: 12px; z-index: 2; }
.ev-estado .i-pendiente { background: var(--vivo); color: var(--marino-900); }
.ev-estado .insignia { box-shadow: 0 1px 2px rgba(7,9,32,.4); }
.ev-cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ev-tarj h3 { font: 700 clamp(1.375rem, 1.2vw + 1rem, 1.625rem)/1.05 var(--fuente-marca); font-stretch: var(--ancho-marca); text-transform: uppercase; letter-spacing: .005em; margin: 0; }
.ev-tarj .accesos { margin-top: auto; padding-top: 10px; }
.ev-tarj::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .ev-tarj { transition: box-shadow 220ms var(--ease-salida), border-color 220ms; }
  .ev-tarj:hover { box-shadow: var(--sombra-1); border-color: var(--linea-fuerte); }
  .ev-tarj:hover .cartel-real, .ev-tarj:hover .cartel-gen { transform: scale(1.03); }
}
.ev-tarj:focus-within { border-color: var(--foco); }
.evento .plazo { background: var(--pend-f); border-radius: 8px; padding: 6px 10px; margin-top: 4px; font-weight: 600; }
.evento.lista .fechas { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 96px; }
.f-dia { font: 700 2rem/1 var(--fuente-numeros); font-stretch: var(--ancho-marca); font-variant-numeric: tabular-nums; }
.f-mes { font: 700 .8125rem/1 var(--fuente-marca); font-stretch: var(--ancho-marca); letter-spacing: .08em; color: var(--texto-2); }
.rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rejilla.una { grid-template-columns: 1fr; }
.rejilla.sola { grid-template-columns: minmax(0, 560px); }

/* ---------- Marca: cabecera de evento (banda de escena) ---------- */
.evento-banda { background: var(--marino-900) url("/img/patron-tatami.svg") 0 0 / 64px 64px; color: var(--escena-texto); position: relative; border-bottom: 6px solid transparent; border-image: linear-gradient(100deg, var(--aka) 0 50%, var(--ao) 50% 100%) 1; }
.evento-banda .migas a { color: var(--escena-texto); }
.evento-banda :focus-visible { outline-color: var(--escena-foco); }
.evento-banda .cab-evento { padding: 16px 0 40px; }
.evento-banda .cartel { position: relative; background: var(--marino-800); color: var(--escena-texto-2); border: 1px solid var(--escena-linea); }
.evento-banda .cartel > img { object-fit: contain; }
.evento-banda .cartel .cartel-gen { position: absolute; }
.evento-banda h1 { font: 700 clamp(2.25rem, 4.2vw + .5rem, 4rem)/1 var(--fuente-marca); font-stretch: var(--ancho-marca); text-transform: uppercase; letter-spacing: 0; text-wrap: balance; color: #fff; }
.evento-banda .subtitulo, .evento-banda .sec { color: var(--escena-texto-2); }
.evento-banda .plazo-linea { color: var(--escena-texto); }
.evento-banda .plazo-linea .quedan { color: var(--vivo); }
.evento-banda .btn.primario { background: #F5F7FA; color: var(--marino-900); }
.evento-banda .btn:not(.primario) { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.evento-banda .pais { background: rgba(255,255,255,.14); color: #fff; }
@media (min-width: 821px) { .evento-banda .cab-evento { grid-template-columns: 240px 1fr; } }
.ficha { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: 20px; position: sticky; top: calc(var(--barra-h) + 72px); }
.ficha h3 { font-size: 1.125rem; margin-bottom: 8px; }
.ficha .btn { width: 100%; margin-top: 12px; }
.banda-org { margin-top: 48px; padding: 20px 24px; border-radius: var(--r-tarjeta); background: var(--marino-900); color: var(--escena-texto); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.banda-org p { margin: 0; color: var(--escena-texto-2); max-width: 52ch; }
.banda-org :focus-visible { outline-color: var(--escena-foco); }

/* ---------- Marca: móvil y reduced-motion ---------- */
@media (max-width: 820px) { .pie-marca { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) {
  .ev-tarj:hover .cartel-real, .ev-tarj:hover .cartel-gen { transform: none; }
}
.banda-org { border: 1px solid var(--escena-linea); }

/* ---------- En directo: mini marcador por tatami ---------- */
.mv-zona { margin: 12px 0; }
.mv-rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mv { border: 1px solid var(--linea); border-radius: var(--r-bloque, 12px); background: var(--superficie-2); overflow: hidden; display: grid; }
.mv-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; }
.mv-cab h4, .mv-vacio h4 { margin: 0; font-size: 1rem; }
.mv-vacio { padding: 10px 14px; }
.mv-lado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 3.2ch; align-items: center; gap: 10px; padding: 8px 14px; color: #fff; }
.mv-aka { background: #A80F1C; } .mv-ao { background: #1148B0; } /* rellenos de marca fijos: en tema oscuro --aka/--ao pasan a tonos claros y el texto blanco perdería contraste */
.mv-color { font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.mv-nombre { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-nombre small { display: block; font-weight: 400; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.mv-extra { display: flex; gap: 6px; }
.mv-senshu { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 6px; background: #22C55E; color: #052E16; font-weight: 800; }
.mv-sancion { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.6); font-size: .8125rem; font-weight: 800; }
.mv-puntos { font-size: 1.75rem; font-weight: 800; line-height: 1; text-align: right; }
.mv-pie { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
.mv-reloj { font-size: 1.5rem; font-weight: 800; color: var(--texto); }
.mv-corre .mv-reloj { color: #7A5A00; } /* ≥ 4,5:1 sobre el fondo claro */
:root[data-tema="oscuro"] .mv-corre .mv-reloj { color: #FFD23F; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .mv-corre .mv-reloj { color: #FFD23F; } }