/* Marcador de demostración de la portada: css/marcador.css del producto acotado a .md (generado por tests/navegador-plataforma/sincronizar-marcador-demo.mjs; no editar a mano).
   Origen: css/marcador.css, MD5 dd2f6693e359cc426efcedc444916a7a.
   La unidad u es 1 % del ancho del contenedor (1cqw): el lienzo 100u x 56,25u se ajusta a cualquier ancho sin tocar el original.
   Regla propia (comun.css): colores de lado, cifras tabulares, sanciones, reloj y estado. */
.md { container-type: inline-size; width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #0B0E14; color: #F5F7FA;
  --u: 1cqw; --bg: #0B0E14; --surface: #141A26; --text: #F5F7FA; --muted: #A9B4C4; --aka: #A80F1C; --ao: #1148B0; --aka-bright: #FF6B72; --ao-bright: #6FA3FF;
  --warn: #FFC83D; --danger: #FF7A80; --focus: #FFD23F; --art: #000;
  --font-ui: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif; --font-num: var(--font-ui);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --barra: 12.6;
  font-family: var(--font-ui); font-stretch: 87.5%; line-height: normal; text-align: left; }
.md *, .md *::before, .md *::after { box-sizing: border-box; }
.md [hidden] { display: none !important; }
.md .aka { --lado: var(--aka); --brillante: var(--aka-bright); }
.md .ao { --lado: var(--ao); --brillante: var(--ao-bright); }
.md .numero { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.md .sanciones { display: flex; margin: 0; padding: 0; list-style: none; }
.md .reloj { display: inline-block; white-space: nowrap; }
.md .reloj .d { display: inline-block; text-align: center; }
.md .estado-reloj { display: inline-block; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.md .estado-reloj.pausa { background: #2A3347; }
.md .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.md .numero, .md .puntos, .md .reloj { font-weight: 700; }
/* Lienzo 100u x 56,25u: esquinas 15 (AKA/AO + bandera y país, nombre, dojo) + puntos y sanciones 25 (cuadro 20,5 + sanciones debajo) + reloj 12,6 + mensaje 3,65. Columnas: 1fr | 30u | 30u | 1fr */
.md .board {
  position: relative; width: calc(100 * var(--u)); height: calc(56.25 * var(--u));
  display: grid; grid-template-columns: minmax(0, 1fr) calc(30 * var(--u)) calc(30 * var(--u)) minmax(0, 1fr);
  grid-template-rows: calc(15 * var(--u)) calc(25 * var(--u)) calc(12.6 * var(--u)) calc(3.65 * var(--u));
  background: var(--bg); overflow: hidden;
}
/* Esquina de competidor (arriba, izquierda o derecha según «Intercambiar lados») */
.md .franja {
  grid-row: 1; min-width: 0; min-height: 0; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(1.1 * var(--u)) calc(2 * var(--u)) calc(.7 * var(--u)); color: #fff; background: var(--bg);
}
.md .franja[data-pos="izq"] { grid-column: 1 / 3; }
.md .franja[data-pos="der"] { grid-column: 3 / 5; text-align: right; }
.md .linea-id { display: flex; align-items: center; gap: calc(1.4 * var(--u)); min-width: 0; }
.md .franja[data-pos="der"] .linea-id { flex-direction: row-reverse; }
.md .etiqueta { flex: none; font-size: calc(3.2 * var(--u)); font-weight: 800; letter-spacing: .08em; line-height: 1.1; color: var(--brillante); }
.md .pais { flex: none; display: inline-flex; align-items: center; gap: calc(.9 * var(--u)); min-width: 0; }
.md .franja[data-pos="der"] .pais { flex-direction: row-reverse; }
/* Bandera SVG local 4:3; el borde fino separa del fondo las banderas claras (blanco, amarillo). El código va en blanco, como el monitor Sportdata. */
.md .bandera-pais { display: block; flex: none; width: calc(4.4 * var(--u)); height: calc(3.3 * var(--u)); object-fit: cover; border: calc(.15 * var(--u)) solid rgba(255, 255, 255, .6); }
.md .codigo-pais { font-size: calc(3.2 * var(--u)); line-height: 1.1; font-weight: 800; letter-spacing: .06em; color: #fff; white-space: nowrap; }
/* Dojo o club, debajo del nombre */
.md .club { min-width: 0; font-size: calc(2.4 * var(--u)); line-height: 1.15; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.md .zona-nombre { min-width: 0; display: flex; align-items: center; }
.md .nombre { width: 100%; font-size: calc(5.4 * var(--u)); line-height: 1.05; font-weight: 800; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md .nombre.nombre--m { font-size: calc(4.4 * var(--u)); }
.md .nombre.nombre--l {
  font-size: calc(3.3 * var(--u)); line-height: 1.05; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
/* Sanciones debajo de cada cuadro de puntos (pedido del propietario), alineadas con su cuadro */
.md .sanciones { grid-row: 2; align-self: end; display: flex; gap: calc(.45 * var(--u)); min-width: 0; margin: 0 0 calc(.3 * var(--u)); padding: 0; list-style: none; }
.md .sanciones[data-pos="izq"] { grid-column: 2; justify-self: start; margin-right: calc(.6 * var(--u)); }
.md .sanciones[data-pos="der"] { grid-column: 3; justify-self: end; margin-left: calc(.6 * var(--u)); }
/* Casillas más limpias: más anchas que altas, esquinas redondeadas, trazo fino */
.md .sanciones li {
  flex: none; width: calc(4.5 * var(--u)); height: calc(3 * var(--u)); display: grid; place-items: center;
  font-size: calc(1.8 * var(--u)); line-height: 1; padding: 0; letter-spacing: .03em;
  border: calc(.12 * var(--u)) solid rgba(255, 255, 255, .38); border-radius: calc(.7 * var(--u));
  color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .04);
}
.md .sanciones li.activa { background: var(--warn); color: var(--bg); border-color: var(--warn); font-weight: 800; }
/* SENSHU: triángulo verde en la esquina inferior exterior del cuadro de puntos, con una «S» oscura dentro (contraste ~7:1 sobre el verde).
   El texto «SENSHU» sigue en el árbol accesible (los glifos del span se ocultan con font-size 0); la «S» visible es decorativa (content con texto alternativo vacío). */
.md .marca-senshu {
  position: absolute; bottom: 0; z-index: 2; background: #22C55E; /* verde: así marca SENSHU el monitor Sportdata */
  width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u));
  font-size: 0; padding: 0; overflow: hidden;
}
.md .marca-senshu::after {
  content: "S"; content: "S" / ""; position: absolute; bottom: calc(.5 * var(--u)); font-size: calc(3.4 * var(--u)); line-height: 1; font-weight: 800; color: #052E16;
}
.md .cuadro-puntos[data-pos="izq"] .marca-senshu { left: 0; right: auto; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.md .cuadro-puntos[data-pos="izq"] .marca-senshu::after { left: calc(.75 * var(--u)); }
.md .cuadro-puntos[data-pos="der"] .marca-senshu { right: 0; left: auto; clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.md .cuadro-puntos[data-pos="der"] .marca-senshu::after { right: calc(.75 * var(--u)); }
.md .marca-senshu[hidden] { display: none; }
.md .board.con-aviso .marca-senshu { width: calc(4.2 * var(--u)); height: calc(4.2 * var(--u)); }
.md .board.con-aviso .marca-senshu::after { bottom: calc(.3 * var(--u)); font-size: calc(2.2 * var(--u)); }
.md .board.con-aviso .cuadro-puntos[data-pos="izq"] .marca-senshu::after { left: calc(.5 * var(--u)); }
.md .board.con-aviso .cuadro-puntos[data-pos="der"] .marca-senshu::after { right: calc(.5 * var(--u)); }
/* Cuadros de puntos: rojo (AKA) y azul (AO), juntos y centrados */
.md .cuadro-puntos {
  grid-row: 2; align-self: start; height: calc(20.5 * var(--u)); position: relative; z-index: 3; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--lado); color: #fff; display: grid; place-items: center;
}
.md .cuadro-puntos[data-pos="izq"] { grid-column: 2; margin-right: calc(.6 * var(--u)); }
.md .cuadro-puntos[data-pos="der"] { grid-column: 3; margin-left: calc(.6 * var(--u)); }
.md .puntos { display: block; font-size: calc(17 * var(--u)); line-height: .8; text-align: center; }
.md .puntos.tres-cifras { font-size: calc(12 * var(--u)); }
/* Estados */
.md .cuadro-puntos.ganador { background: var(--focus); color: var(--bg); }
.md .franja.ganador .nombre { color: var(--focus); }
.md .franja.perdedor, .md .cuadro-puntos.perdedor, .md .franja.descalificado { opacity: .45; }
/* Fila inferior: categoría y tatami | reloj | referencia y estado del reloj */
.md .zona-reloj {
  grid-row: 3; grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  padding: 0 calc(2 * var(--u)); background: var(--bg);
}
/* Columna izquierda de la fila inferior: categoría y tatami, y debajo el logotipo de Karate Live (monocromo claro, discreto, fuera de la zona reglamentaria) */
.md .marca-izq { grid-column: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(.9 * var(--u)); }
.md .logo-marca { display: block; flex: none; height: calc(3.6 * var(--u)); width: auto; max-width: 100%; opacity: .62; user-select: none; -webkit-user-drag: none; }
.md .meta {
  font-size: calc(2.4 * var(--u)); line-height: 1.2; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: calc(30 * var(--u));
}
.md .reloj { grid-column: 2; font-size: calc(12.5 * var(--u)); line-height: .86; text-align: center; color: #FFD200; }
/* amarillo como el monitor Sportdata */
.md .reloj.ultimos { color: #FF6B3D; }
/* Bahnschrift condensada: cifras más estrechas que Segoe UI; caja de dígito ajustada para no dejar huecos */
.md .reloj .d { width: .5em; }
.md .reloj.terminado { color: var(--danger); }
.md .reloj.terminado { animation: md-pulso-final .6s var(--ease-out) 1; }
.md .derecha { grid-column: 3; justify-self: end; text-align: right; display: grid; justify-items: end; gap: calc(.4 * var(--u)); max-width: calc(30 * var(--u)); }
.md .referencia { font-size: calc(2.4 * var(--u)); line-height: 1.2; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.md .estado-reloj { min-height: calc(2.4 * var(--u)); font-size: calc(2.4 * var(--u)); line-height: 1.2; letter-spacing: .08em; white-space: nowrap; color: var(--text); }
.md .estado-reloj.pausa { padding: 0 calc(1 * var(--u)); border-radius: 0; }
.md .estado-reloj:empty { visibility: hidden; }
/* Mensaje inferior */
.md .pie-publico { grid-row: 4; grid-column: 1 / -1; font-size: calc(2.8 * var(--u)); line-height: 1.1; font-weight: 800; display: grid; place-items: center; text-align: center; padding: 0 calc(1 * var(--u)); letter-spacing: .04em; color: var(--text); background: var(--bg); white-space: nowrap; overflow: hidden; }
.md .pie-publico.sin-senal { background: #7A1F1F; color: #fff; }
.md .pie-publico.aka, .md .pie-publico.ao { background: var(--lado); color: #fff; }
/* ---- Aviso: toma de color completa; reloj y puntos en la barra inferior ---- */
.md .aviso-capa { position: absolute; left: 0; right: 0; top: 0; height: calc(39.99 * var(--u)); z-index: 2; pointer-events: none; overflow: hidden; }
.md .board.con-aviso .cuadro-puntos { grid-row: 3; align-self: center; height: calc(10.6 * var(--u)); width: calc(16 * var(--u)); }
.md .board.con-aviso .cuadro-puntos[data-pos="izq"] { grid-column: 1; justify-self: end; margin: 0 calc(2 * var(--u)) 0 0; }
.md .board.con-aviso .cuadro-puntos[data-pos="der"] { grid-column: 4; justify-self: start; margin: 0 0 0 calc(2 * var(--u)); }
.md .board.con-aviso .puntos { font-size: calc(8.5 * var(--u)); }
.md .board.con-aviso .puntos.tres-cifras { font-size: calc(6 * var(--u)); }
.md .board.con-aviso .meta, .md .board.con-aviso .derecha, .md .board.con-aviso .logo-marca { visibility: hidden; }
.md .tarjeta {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1.2 * var(--u));
  padding: calc(2 * var(--u)) calc(3 * var(--u)); background: var(--lado); color: #fff; text-align: center; transform-origin: 50% 50%; overflow: hidden;
}
.md .tarjeta-puntos { display: block; font-size: calc(8.5 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: .02em; transform-origin: 50% 50%; white-space: nowrap; }
.md .tarjeta-tecnica { display: block; font-size: calc(4.2 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: .06em; }
.md .tarjeta-benef { max-width: calc(92 * var(--u)); font-size: calc(3.4 * var(--u)); font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md .tarjeta-escena { position: absolute; inset: 0; opacity: 0; overflow: hidden; background: var(--art); }
.md .encuadre { position: absolute; inset: 0; transform-origin: 50% 50%; }
.md .cam { position: absolute; top: 3%; left: 50%; height: 94%; width: auto; aspect-ratio: var(--ar, 4 / 3); transform: translateX(-50%); }
/* misma proporción que la imagen: los anillos (--ox/--oy en % de .cam) caen en el punto del golpe */
.md .cam img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.md .onda {
  position: absolute; left: var(--ox); top: var(--oy); width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u));
  margin: calc(-1.2 * var(--u)) 0 0 calc(-1.2 * var(--u)); border: calc(.3 * var(--u)) solid #fff; border-radius: 50%; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 calc(.15 * var(--u)) rgba(0, 0, 0, .55), inset 0 0 0 calc(.15 * var(--u)) rgba(0, 0, 0, .55); /* se lee también sobre el karategi blanco */
}
/* Resumen (>5 puntuaciones seguidas): tarjeta neutra con la suma de cada competidor */
.md .tarjeta--resumen { background: var(--surface); }
.md .resumen-fila { display: flex; gap: calc(1.2 * var(--u)); justify-content: center; }
.md .resumen-mitad { background: var(--lado); width: calc(26 * var(--u)); padding: calc(1.4 * var(--u)) calc(1 * var(--u)); display: grid; gap: calc(.6 * var(--u)); justify-items: center; }
.md .resumen-lado { font-size: calc(3.4 * var(--u)); font-weight: 800; letter-spacing: .08em; line-height: 1; }
.md .resumen-total { font-size: calc(9 * var(--u)); font-weight: 800; line-height: 1; font-family: var(--font-num); }
/* Escena estática y completa (prefers-reduced-motion): dos escenas a la vez, sin zoom ni recorrido */
.md .tarjeta--estatica .cam { top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
.md .tarjeta--estatica .cam img { object-fit: contain; }
.md .tarjeta--estatica .encuadre { transform: none; }
@keyframes md-pulso-final { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .md .reloj.terminado { animation: none; }
}
/* FE-05/FE-15: texto primero, técnica después, dentro de la misma toma.
   Fase 1 en dos mitades como el monitor Sportdata: izquierda en el color del competidor con «N PUNTO(S)» enorme y «(YUKO)» pequeño;
   derecha blanca con N banderas de juez del color del lado y «N JUECES». */
.md .tarjeta-texto { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: auto; gap: 0; }
.md .texto-izq { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: calc(2 * var(--u)) calc(2 * var(--u)); background: var(--lado); color: #fff; }
.md .texto-izq .tarjeta-puntos { font-size: calc(10.5 * var(--u)); line-height: .9; letter-spacing: .01em; }
.md .texto-izq .tarjeta-tecnica { font-size: calc(4.4 * var(--u)); margin-top: calc(1.4 * var(--u)); letter-spacing: .04em; }
.md .texto-izq .tarjeta-benef { margin-top: calc(2 * var(--u)); max-width: 100%; font-size: calc(2.2 * var(--u)); opacity: .85; }
.md .texto-der { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2.4 * var(--u)); min-width: 0; padding: calc(2 * var(--u)); background: #fff; color: #2B3038; }
.md .banderas { display: flex; align-items: flex-end; justify-content: center; gap: calc(1.4 * var(--u)); }
.md .bandera { display: block; width: calc(9.5 * var(--u)); height: calc(12.7 * var(--u)); color: var(--lado); fill: currentColor; flex: none; }
.md .tarjeta-jueces { display: block; font-size: calc(5 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: .05em; color: #2B3038; white-space: nowrap; }
.md .tarjeta-rotulo { position: absolute; top: calc(1 * var(--u)); left: calc(1 * var(--u)); padding: calc(.6 * var(--u)) calc(1 * var(--u)); background: var(--lado); font-size: calc(2 * var(--u)); font-weight: 800; opacity: 0; }
.md .tarjeta[data-fase="tecnica"] .tarjeta-texto { opacity: 0; }
.md .tarjeta[data-fase="tecnica"] .tarjeta-escena, .md .tarjeta[data-fase="tecnica"] .tarjeta-rotulo { opacity: 1; }
/* FE-17: con «Registrar banderas de jueces» desactivado el aviso es un solo panel a todo el ancho, en el color del competidor:
   «N PUNTO(S)» enorme, «(TÉCNICA)» pequeño y el nombre discreto (sin la mitad blanca). */
.md .tarjeta-texto--unico { grid-template-columns: minmax(0, 1fr); }
.md .tarjeta-texto--unico .texto-izq { padding: calc(2 * var(--u)) calc(4 * var(--u)); }
.md .tarjeta-texto--unico .tarjeta-puntos { font-size: calc(17 * var(--u)); line-height: .9; }
.md .tarjeta-texto--unico .tarjeta-tecnica { font-size: calc(5.4 * var(--u)); margin-top: calc(1.6 * var(--u)); }
.md .tarjeta-texto--unico .tarjeta-benef { font-size: calc(2.4 * var(--u)); margin-top: calc(2 * var(--u)); max-width: calc(80 * var(--u)); }
/* FE-20: toma de sanción (CHUI, HANSOKU CHUI, HANSOKU, SHIKKAKU, KIKEN). Un solo panel a todo el ancho en el color del lado sancionado:
   «ADVERTENCIA» (o «DESCALIFICACIÓN» / «RETIRADA») enorme y blanco al tamaño de «1 PUNTO», la sanción «(CHUI 1)» pequeña y el nombre discreto.
   --ajuste (≤ 1, lo calcula aviso.js) encoge las palabras largas para que quepan sin cortarse. Sin ilustración ni banderas. */
.md .tarjeta--sancion { gap: 0; padding: calc(2 * var(--u)) calc(4 * var(--u)); }
.md .tarjeta--sancion .tarjeta-puntos { width: max-content; max-width: none; font-size: calc(17 * var(--u) * var(--ajuste, 1)); line-height: .9; letter-spacing: .01em; }
.md .tarjeta--sancion .tarjeta-tecnica { font-size: calc(5.4 * var(--u)); margin-top: calc(1.8 * var(--u)); letter-spacing: .04em; }
.md .tarjeta--sancion .tarjeta-benef { max-width: calc(80 * var(--u)); margin-top: calc(2 * var(--u)); font-size: calc(2.4 * var(--u)); opacity: .85; }

/* aislamiento frente a estilos.css (.tarjeta es la tarjeta de evento de la web y .pais su etiqueta) */
.md .tarjeta { border: 0; border-radius: 0; margin: 0; }
.md .pais { padding: 0; background: none; border-radius: 0; font-size: inherit; letter-spacing: normal; font-weight: inherit; }
.md h2, .md p { margin: 0; }
/* escalón de la demostración: solo opacidad y transform (compositor) */
.md .tarjeta-escena, .md .tarjeta-texto, .md .tarjeta-rotulo { transition: opacity 320ms var(--ease-out); }
.md .marca-senshu { transition: opacity 200ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .md .tarjeta-escena, .md .tarjeta-texto, .md .tarjeta-rotulo, .md .marca-senshu { transition: none; } }