/* Plataforma de torneos (organizar y planilla) · Amigos del Patín TV */
:root { color-scheme: dark; --fondo: #0b0a08; --caja: #17140f; --caja-2: #211d16; --borde: rgba(255, 255, 255, .11);
  --texto: #f6f2ea; --suave: #b5ab9b; --ambar: #ffc23d; --rojo: #ff5d5d; --verde: #4ade80; --radio: 16px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: radial-gradient(900px 420px at 50% -160px, rgba(255, 194, 61, .16), transparent 70%), var(--fondo);
  color: var(--texto); font: 16px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
a { color: var(--ambar); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.suave { color: var(--suave); }
.pequeno { font-size: .86rem; }

/* Cabecera */
.cab { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: rgba(11, 10, 8, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--borde); }
.cab img { width: 40px; height: 40px; object-fit: contain; }
.cab h1 { margin: 0; font-size: 1.05rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab a { text-decoration: none; font-weight: 700; font-size: .9rem; }
main { width: min(860px, 100%); margin: 0 auto; padding: 16px 16px 120px; }

/* Bloques y formularios */
.caja { background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin-bottom: 14px; }
.caja h2 { margin: 0 0 6px; font-size: 1.15rem; }
.caja h3 { margin: 14px 0 6px; font-size: 1rem; }
label.campo { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; font-weight: 700; font-size: .9rem; }
label.campo small { font-weight: 400; color: var(--suave); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=time], input:not([type]), select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); }
textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: .92rem; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid rgba(255, 194, 61, .7); outline-offset: 1px; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; }
.fila > * { flex: 1 1 160px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--caja-2); cursor: pointer; font-weight: 700; text-decoration: none; color: var(--texto); }
.btn:hover { background: #2a251c; }
.btn.principal { border: 0; color: #15110a; background: linear-gradient(135deg, #ffc23d, #ff9a1f); }
.btn.peligro { color: var(--rojo); border-color: rgba(255, 93, 93, .4); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.pequeno { min-height: 34px; padding: 6px 12px; font-size: .86rem; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.error { color: #ff8a8a; }
.etiqueta { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .03em; }
.etiqueta.borrador { background: rgba(255, 255, 255, .1); color: var(--suave); }
.etiqueta.activo { background: var(--ambar); color: #15110a; }
.etiqueta.finalizado { background: rgba(255, 194, 61, .15); color: var(--ambar); }
.etiqueta.vivo { background: rgba(255, 93, 93, .16); color: #ff8a8a; }

/* Lista de torneos */
.torneos { display: grid; gap: 10px; }
.torneo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radio); background: var(--caja);
  border: 1px solid var(--borde); text-decoration: none; color: var(--texto); }
.torneo:hover { background: var(--caja-2); }
.torneo div { flex: 1; min-width: 0; }
.torneo b { display: block; }

/* Pestañas del editor */
.pestanas { position: sticky; top: 61px; z-index: 15; display: flex; gap: 4px; overflow-x: auto; padding: 4px; margin: 0 0 14px;
  border-radius: 14px; background: var(--caja); border: 1px solid var(--borde); scrollbar-width: none; }
.pestanas button { flex: 1 0 auto; padding: 10px 14px; border: 0; border-radius: 10px; background: none; color: var(--suave);
  font-weight: 700; cursor: pointer; white-space: nowrap; }
.pestanas button[aria-selected="true"] { background: var(--texto); color: #15110a; }
.lista { display: grid; gap: 8px; margin: 8px 0; }
.item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--caja-2); }
.item > div { flex: 1; min-width: 0; }
.item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--caja-2);
  border: 1px solid var(--borde); font-weight: 700; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--texto); color: #15110a; }
.barra-guardar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(23, 20, 15, .96); border-top: 1px solid var(--borde); }
.aviso { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 50; padding: 12px 18px; border-radius: 14px;
  background: #2b261d; border: 1px solid var(--borde); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); font-weight: 600; max-width: calc(100% - 32px); }

/* ── Planilla en el celular ── */
.marcador { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; }
.marcador .equipo b { display: block; font-size: 1.05rem; line-height: 1.2; }
.marcador .goles { font-size: 3rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.marcador .guion { font-size: 2rem; color: var(--suave); }
.estado-red { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; }
.estado-red::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--texto); box-shadow: 0 0 0 3px rgba(246, 242, 234, .15); }
.estado-red.pendiente::before { background: var(--ambar); }
.estado-red.sin-red::before { background: var(--rojo); }
.periodos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.periodos button { min-height: 44px; border-radius: 12px; border: 1px solid var(--borde); background: var(--caja-2); font-weight: 800; cursor: pointer; font-size: .86rem; }
.periodos button[aria-pressed="true"] { background: var(--ambar); color: #15110a; border-color: transparent; }
.botonera { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botonera .lado { display: grid; gap: 8px; }
.botonera .lado h3 { margin: 0; font-size: .9rem; text-align: center; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-grande { min-height: 64px; border-radius: 16px; border: 0; font-size: 1.15rem; font-weight: 900; cursor: pointer; }
.boton-grande.gol { background: linear-gradient(135deg, #ffc23d, #ff9a1f); color: #15110a; }
.boton-grande.sancion { background: var(--caja-2); border: 1px solid var(--borde); color: var(--texto); font-size: 1rem; }
.eventos { display: grid; gap: 6px; }
.evento { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--caja-2); }
.evento .cuando { font-size: .8rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.evento .que small { display: block; color: var(--suave); }
.evento.pendiente { opacity: .7; border: 1px dashed rgba(255, 194, 61, .5); }
.hoja { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .6); }
.hoja > div { width: min(560px, 100%); max-height: 92vh; overflow: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; background: var(--caja); border: 1px solid var(--borde); }
.hoja h2 { margin: 0 0 4px; font-size: 1.15rem; }
.jugadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0; }
.jugadores button { min-height: 54px; padding: 6px; border-radius: 12px; border: 1px solid var(--borde); background: var(--caja-2); cursor: pointer; line-height: 1.15; }
.jugadores button b { display: block; font-size: 1.15rem; }
.jugadores button small { display: block; font-size: .72rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jugadores button[aria-pressed="true"] { background: var(--ambar); color: #15110a; border-color: transparent; }
.jugadores button[aria-pressed="true"] small { color: #3b2f12; }
.jugadores button.asistencia[aria-pressed="true"] { background: #7dd3fc; }
.firma { width: 100%; height: 150px; border-radius: 12px; background: #fff; touch-action: none; display: block; }
.fotos { display: flex; gap: 8px; flex-wrap: wrap; }
.fotos img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }

/* ── Mi panel: menú lateral (escritorio) o barra de secciones (móvil) ── */
.panel { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; width: 100%; margin: 0; padding: 20px clamp(16px, 2.5vw, 40px) 0; }
.panel > main { width: auto; margin: 0; padding: 0 0 120px; min-width: 0; outline: none; }
.menu { position: sticky; top: 76px; align-self: start; display: grid; gap: 4px; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; color: var(--texto); text-decoration: none; font-weight: 700; }
.menu-item:hover { background: var(--caja-2); }
.menu-item[aria-current="page"] { background: var(--texto); color: #15110a; }
.menu-icono { width: 22px; text-align: center; }
.contador { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: .78rem; text-align: center; }
.volver-web { white-space: nowrap; }
@media (max-width: 860px) {
  .panel { grid-template-columns: 1fr; gap: 10px; padding-top: 10px; }
  .menu { top: 61px; z-index: 14; display: flex; overflow-x: auto; gap: 6px; padding: 6px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
    background: rgba(11, 10, 8, .94); backdrop-filter: blur(10px); scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu-item { flex: none; padding: 9px 13px; border: 1px solid var(--borde); border-radius: 999px; font-size: .9rem; }
  .volver-web { font-size: .82rem; }
}
.saludo-panel { margin: 4px 0 12px; font-size: 1.5rem; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tarjeta { display: grid; gap: 2px; padding: 16px; border-radius: var(--radio); background: var(--caja); border: 1px solid var(--borde); color: var(--texto); text-decoration: none; }
.tarjeta:hover { background: var(--caja-2); }
.tarjeta b { font-size: 1.8rem; line-height: 1.1; }
.tarjeta.destacada { border-color: rgba(255, 93, 93, .6); }
.t-icono { font-size: 1.3rem; }
.guia { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.fila-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.estado-guardado { margin-left: auto; font-size: .84rem; font-weight: 700; color: var(--suave); }
.estado-guardado.pendiente { color: var(--ambar); }
.estado-guardado.error { color: var(--rojo); }
/* Pasos del asistente */
.pasos { list-style: none; display: flex; gap: 6px; overflow-x: auto; margin: 0 0 14px; padding: 2px 0 6px; scrollbar-width: none; counter-reset: paso; }
.pasos::-webkit-scrollbar { display: none; }
.paso { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 999px; background: var(--caja); border: 1px solid var(--borde);
  color: var(--suave); text-decoration: none; font-weight: 700; white-space: nowrap; font-size: .9rem; }
.paso small { padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .74rem; }
.paso-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--caja-2); color: var(--texto); font-size: .82rem; }
.paso.hecho .paso-num { background: transparent; color: var(--ambar); box-shadow: inset 0 0 0 2px var(--ambar); }
.paso.actual { background: var(--texto); color: #15110a; border-color: transparent; }
.paso.actual .paso-num { background: var(--ambar); color: #15110a; }
.navegar-pasos { justify-content: space-between; margin-top: 4px; }
/* Jugadores fila a fila */
.jug-tabla { display: grid; gap: 6px; margin-bottom: 8px; }
.jug-fila { display: grid; grid-template-columns: 70px 1fr auto auto; align-items: center; gap: 8px; }
.jug-fila .jug-num { text-align: center; }
.jug-portero { display: inline-flex; align-items: center; gap: 4px; font-size: .86rem; white-space: nowrap; }
.jug-portero input { width: 18px; height: 18px; }
.jug-nuevo { padding: 10px; border-radius: 12px; background: rgba(255, 194, 61, .08); border: 1px dashed rgba(255, 194, 61, .4); }
@media (max-width: 520px) {
  .jug-fila { grid-template-columns: 58px 1fr auto; }
  .jug-fila .jug-portero { grid-column: 2; }
  .jug-nuevo .btn { grid-column: 1 / -1; }
}
details.pegar { margin-top: 12px; }
details.pegar summary { cursor: pointer; font-weight: 700; color: var(--ambar); }
.item.hoy { border: 1px solid rgba(255, 194, 61, .5); }
.item.inactivo { opacity: .6; }
.item input:not([type=radio]):not([type=checkbox]) { flex: 1; min-width: 0; }
input[type=search] { width: 100%; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); margin-bottom: 8px; }

/* Pantallas anchas: aprovechar todo el ancho */
@media (min-width: 1200px) {
  .jug-tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .tarjetas { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .paso-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 0 18px; align-items: start; }
  .paso-panel > .caja { margin-bottom: 14px; }
  .paso-panel > :not(.caja) { grid-column: 1 / -1; }   /* chips de equipos, avisos…: a lo ancho, no como una columna */
  .paso-panel > .caja.ancha, .paso-jugadores > .caja, .paso-jugar > .caja { grid-column: 1 / -1; }
  .torneos, .lista { gap: 8px; }
}
@media (min-width: 1600px) { .jug-tabla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Posición del jugador: P (jugador) / G (portero) */
.posicion { display: inline-flex; border-radius: 10px; border: 1px solid var(--borde); overflow: hidden; }
.posicion button { min-width: 40px; min-height: 40px; border: 0; background: var(--caja-2); font-weight: 900; cursor: pointer; color: var(--suave); }
.posicion button + button { border-left: 1px solid var(--borde); }
.posicion button[aria-checked="true"] { background: var(--ambar); color: #15110a; }
.posicion button:focus-visible { outline: 3px solid rgba(255, 194, 61, .7); outline-offset: -3px; }

/* Desplegables legibles: la lista que abre el sistema no hereda el fondo oscuro (salía blanco sobre blanco) */
select { background-color: #211d16; color: #f6f2ea; }
select option, select optgroup { background-color: #211d16; color: #f6f2ea; }
select option:checked { background-color: #ffc23d; color: #15110a; }
select:disabled { opacity: .6; }

/* ── Mesa de control: tablero compacto con el reloj ── */
.mesa-tablero { display: grid; grid-template-columns: 1fr minmax(170px, auto) 1fr; gap: 10px; align-items: start; padding: 14px; margin-bottom: 10px;
  border-radius: var(--radio); background: #050504; border: 1px solid var(--borde); }
.m-equipo { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; }
.m-rotulo, .tb-rotulo { font-size: .72rem; font-weight: 900; letter-spacing: .14em; color: var(--suave); }
.m-nombre { font-size: 1rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-goles { font: 900 3.2rem/1 ui-monospace, "Consolas", monospace; color: #ff4d3d; font-variant-numeric: tabular-nums; }
.m-tiros { font-size: .76rem; color: var(--suave); }
.m-castigos { display: grid; gap: 4px; width: 100%; margin-top: 4px; }
.castigo { display: flex; justify-content: space-between; gap: 6px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 77, 61, .14);
  font: 800 .95rem ui-monospace, Consolas, monospace; color: #ffb3a8; }
.castigo.espera { background: rgba(255, 255, 255, .06); color: var(--suave); font-weight: 600; }
.castigo.conducta { background: rgba(255, 194, 61, .12); color: var(--ambar); }
.m-centro { display: grid; justify-items: center; gap: 6px; text-align: center; }
.m-reloj { font: 900 clamp(2.6rem, 9vw, 4rem)/1 ui-monospace, Consolas, monospace; color: var(--ambar); background: none; border: 0; cursor: pointer;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; padding: 0; }
.m-reloj.corriendo { color: #ffd45e; text-shadow: 0 0 18px rgba(255, 194, 61, .45); }
.m-periodo { font-weight: 900; letter-spacing: .12em; color: var(--suave); }
.m-arrancar { min-width: 150px; min-height: 52px; border-radius: 14px; border: 0; font-size: 1.1rem; font-weight: 900; cursor: pointer;
  background: var(--ambar); color: #15110a; }
.m-arrancar.parar { background: var(--rojo); color: #fff; }
.m-pp { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; text-align: center; font-weight: 900; letter-spacing: .04em;
  background: rgba(255, 194, 61, .16); color: var(--ambar); border: 1px solid rgba(255, 194, 61, .45); }
.fila-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fila-mini .btn { min-height: 44px; padding: 8px; font-size: .86rem; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--ambar); text-decoration: underline; cursor: pointer; font: inherit; }
.periodos { grid-template-columns: repeat(5, 1fr); margin: 0 0 12px; }
@media (max-width: 560px) {
  .mesa-tablero { grid-template-columns: 1fr 1fr; }
  .m-centro { grid-column: 1 / -1; grid-row: 1; }
  .m-goles { font-size: 2.6rem; }
  .periodos button { font-size: .74rem; }
}

/* ── Tablero de la pista (TV / proyector), como los tableros electrónicos ── */
.pagina-tablero { background: #000; }
.pagina-tablero main { width: 100%; max-width: none; margin: 0; padding: 0; }
.tablero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 2vw; align-items: center; padding: 3vh 3vw;
  background: #000; color: #fff; font-family: "Segoe UI", system-ui, sans-serif; }
.tb-lado, .tb-centro { display: grid; justify-items: center; gap: 1.2vh; text-align: center; }
.tb-rotulo { font-size: clamp(14px, 2.2vw, 40px); color: #fff; letter-spacing: .1em; }
.tb-nombre { font-size: clamp(14px, 2vw, 34px); font-weight: 800; color: #d9d2c5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-sub { font-size: clamp(11px, 1.3vw, 24px); font-weight: 800; letter-spacing: .12em; color: #fff; margin-top: 2vh; white-space: pre; }
.tb-dig { font: 900 clamp(28px, 6vw, 130px)/1 ui-monospace, "Consolas", "Courier New", monospace; font-variant-numeric: tabular-nums;
  padding: .05em .2em; border-radius: 8px; background: #0c0c0c; min-width: 1.6em; display: inline-block; }
.tb-dig.rojo { color: #ff3b2f; text-shadow: 0 0 .25em rgba(255, 59, 47, .55); }
.tb-dig.ambar { color: #ffb21a; text-shadow: 0 0 .25em rgba(255, 178, 26, .5); }
.tb-dig.verde { color: #33e06b; text-shadow: 0 0 .25em rgba(51, 224, 107, .5); }
.tb-goles { font-size: clamp(60px, 13vw, 300px); }
.tb-reloj { font-size: clamp(50px, 10vw, 240px); }
.tb-reloj.parado { opacity: .85; }
.tb-castigos { display: grid; gap: 1vh; }
.tb-castigo { display: flex; gap: 1vw; justify-content: center; }
.tb-castigo .tb-dig { font-size: clamp(22px, 4vw, 90px); min-width: 2.4em; }
.tb-tiros { display: flex; gap: 3vw; }
.tb-tiros .tb-dig { font-size: clamp(26px, 4.5vw, 100px); }
.tb-pp { min-height: 1.4em; font: 900 clamp(14px, 1.8vw, 34px) ui-monospace, Consolas, monospace; color: #ffb21a; letter-spacing: .06em; visibility: hidden; }
.tb-pp.visible { visibility: visible; animation: tb-parpadeo 1.2s ease-in-out infinite; }
@keyframes tb-parpadeo { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tb-pp.visible { animation: none; } }
.tb-marca { display: flex; align-items: center; gap: 10px; margin-top: 2vh; color: #8d8478; font-size: clamp(11px, 1.1vw, 20px); }
.tb-marca img { width: clamp(30px, 3.5vw, 70px); height: auto; }
.tb-completa { position: fixed; right: 12px; bottom: 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid #333; background: #111; color: #aaa; cursor: pointer; opacity: .5; }
.tb-completa:hover { opacity: 1; }
:fullscreen .tb-completa { display: none; }
@media (max-width: 700px) { .tablero { grid-template-columns: 1fr 1fr; } .tb-centro { grid-column: 1 / -1; grid-row: 1; } }

/* ── Logos de los equipos ── */
.tb-logo { width: 1em; height: 1em; object-fit: contain; flex: none; }
.tb-iniciales { display: inline-grid; place-items: center; border-radius: 50%; background: #2a2a2a; color: #ddd; font-weight: 900; font-size: .42em; letter-spacing: .02em; }
.m-escudo { width: 44px; height: 44px; font-size: 44px; }
.m-escudo.tb-iniciales { font-size: 16px; width: 44px; height: 44px; }
.logo-equipo { flex: none; width: 52px; height: 52px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .25); background: var(--caja);
  cursor: pointer; display: grid; place-items: center; padding: 4px; color: var(--suave); font-size: .7rem; font-weight: 800; }
.logo-equipo img { width: 100%; height: 100%; object-fit: contain; }
.logo-equipo:hover { border-color: var(--ambar); }

/* ── Mesa: avisos y castigados ── */
.m-tm { background: rgba(125, 211, 252, .14); color: #7dd3fc; border-color: rgba(125, 211, 252, .45); }
.castigo { align-items: center; }
.castigo-fin { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .3);
  color: inherit; cursor: pointer; font-weight: 900; line-height: 1; }
.castigo-fin:hover { background: rgba(255, 255, 255, .12); }
.m-situacion { margin: 4px 0 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-weight: 700; font-size: .92rem; }
.m-situacion.termina { background: rgba(255, 194, 61, .14); color: var(--ambar); border: 1px solid rgba(255, 194, 61, .4); }
.pantallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 8px 0; }
.pantalla-op { padding: 10px 12px; border-radius: 12px; background: var(--caja-2); }
.pantalla-op .acciones { margin-top: 6px; }

/* ── Tablero: piezas comunes a todos los diseños ── */
.tb-aviso { visibility: hidden; min-height: 1.3em; font-weight: 900; letter-spacing: .05em; }
.tb-aviso.visible { visibility: visible; }
.tb-aviso.pp.visible, .tb-pp.visible { animation: tb-parpadeo 1.2s ease-in-out infinite; }
.tb-aviso.tm, .tb-pp.tm { color: #7dd3fc; }
.tb-equipo { display: flex; align-items: center; gap: .5em; font-size: clamp(14px, 2vw, 34px); max-width: 100%; }
.tb-equipo .tb-logo { font-size: 1.6em; }
.tb-castigo-mini { display: inline-block; padding: .1em .45em; margin: .1em; border-radius: .3em; background: rgba(255, 59, 47, .18); color: #ffb3a8;
  font: 800 1em ui-monospace, Consolas, monospace; white-space: nowrap; }
[data-v=reloj].ultimo { color: #ff5d4d !important; }
.tb-controles { position: fixed; left: 50%; bottom: 14px; transform: translate(-50%, 20px); z-index: 50; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 8px; border-radius: 16px; background: rgba(20, 20, 20, .92); border: 1px solid #333; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: calc(100% - 24px); }
.tb-controles.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.tb-controles select, .tb-controles button { min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid #444; background: #1c1c1c; color: #eee; font: 700 .9rem system-ui, sans-serif; cursor: pointer; }
.tb-completa { display: none; }
.fondo-verde, .fondo-verde .tablero { background: #00ff00 !important; }
.fondo-transparente, .fondo-transparente .tablero { background: transparent !important; }
html:has(.fondo-transparente) { background: transparent; }

/* ── Diseño «Moderno con logos» ── */
.tablero.md { grid-template-columns: 1fr minmax(260px, .9fr) 1fr; gap: 2.5vw; background: radial-gradient(1200px 600px at 50% -10%, #2a2215, #000 70%); }
.md-equipo { display: grid; justify-items: center; gap: 1.6vh; padding: 3vh 2vw; border-radius: 3vh; background: linear-gradient(180deg, #17140f, #0b0a08);
  border: 1px solid #2c2720; text-align: center; min-width: 0; }
.md-local { box-shadow: inset 0 6px 0 #ffc23d; } .md-visitante { box-shadow: inset 0 6px 0 #7dd3fc; }
.md-escudo { width: clamp(70px, 12vw, 240px); height: clamp(70px, 12vw, 240px); font-size: clamp(70px, 12vw, 240px); }
.md-escudo.tb-iniciales { font-size: clamp(26px, 4vw, 90px); }
.md-nombre { font-size: clamp(18px, 2.6vw, 52px); font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-goles { font: 900 clamp(70px, 14vw, 300px)/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.md-tiros { font-size: clamp(12px, 1.4vw, 26px); color: #b5ab9b; font-weight: 700; }
.md-equipo .tb-castigos { display: flex; flex-wrap: wrap; justify-content: center; font-size: clamp(14px, 1.8vw, 34px); min-height: 1.5em; }
.md-centro { display: grid; justify-items: center; gap: 2vh; text-align: center; }
.md-reloj { font: 900 clamp(60px, 10vw, 220px)/1 ui-monospace, Consolas, monospace; color: #ffc23d; font-variant-numeric: tabular-nums;
  padding: .1em .3em; border-radius: .2em; background: rgba(0, 0, 0, .55); }
.md-reloj.parado { color: #e9dcc0; }
.md-periodo { font-size: clamp(16px, 2.2vw, 44px); font-weight: 900; letter-spacing: .14em; color: #e9dfcd; }
.md-centro .tb-aviso { font-size: clamp(14px, 1.9vw, 38px); color: #ffc23d; }
.md-torneo { display: flex; align-items: center; gap: 10px; color: #8d8478; font-size: clamp(12px, 1.2vw, 24px); }
.md-torneo img { width: clamp(30px, 4vw, 80px); }

/* ── Diseño «Barra para transmisión» (lower third) ── */
.tablero.br { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0; padding: 3vh 3vw; background: #000; }
.br-barra { display: flex; align-items: stretch; height: clamp(54px, 9vw, 120px); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  font-family: "Segoe UI", system-ui, sans-serif; max-width: 100%; }
.br-marca { height: 100%; padding: 6px 10px; background: #0b0a08; }
.br-lado { display: flex; align-items: center; gap: .6em; padding: 0 .9em; background: #17140f; color: #fff; font-size: clamp(16px, 2.6vw, 38px); min-width: 0; }
.br-escudo { font-size: 1.5em; }
.br-escudo.tb-iniciales { font-size: .6em; width: 2.4em; height: 2.4em; }
.br-nombre { font-weight: 800; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-goles { min-width: 1.6em; text-align: center; align-self: stretch; display: grid; place-items: center; background: #ffc23d; color: #15110a; font-weight: 900; font-size: 1.25em; }
.br-visitante .br-goles { background: #7dd3fc; }
.br-centro { display: grid; place-items: center; align-content: center; padding: 0 1em; background: #050505; color: #fff; min-width: 5.5em; font-size: clamp(16px, 2.6vw, 38px); }
.br-reloj { font: 900 1em ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.br-periodo { font-size: .42em; font-weight: 800; letter-spacing: .12em; color: #e9dfcd; }
.br-tira { display: flex; align-items: center; justify-content: center; gap: 1em; min-height: 2.2em; margin-top: 6px; font-size: clamp(12px, 1.6vw, 24px); color: #fff; }
.br-tira .tb-aviso { padding: .2em .8em; border-radius: .5em; background: rgba(0, 0, 0, .75); color: #ffc23d; }
.br-tira .tb-aviso.tm { color: #7dd3fc; }
.br-tira .tb-aviso:not(.visible) { display: none; }

/* ── Diseño «Compacto» (ventanita siempre visible) ── */
.tablero.cp { min-height: 100vh; display: grid; grid-template-columns: 1fr; align-content: center; gap: 4px; padding: 10px 12px; background: #0b0a08; font-size: clamp(14px, 5.5vw, 28px); }
.cp-fila { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .5em; padding: .25em .4em; border-radius: .4em; background: #17140f; }
.cp-escudo { font-size: 1.3em; }
.cp-escudo.tb-iniciales { font-size: .5em; width: 2.6em; height: 2.6em; }
.cp-nombre { font-weight: 800; color: #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-fila .tb-castigos { font-size: .6em; }
.cp-goles { font-weight: 900; font-size: 1.3em; color: #ffc23d; min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }
.cp-pie { display: flex; justify-content: space-between; align-items: center; padding: .1em .4em; color: #b5ab9b; }
.cp-periodo { font-size: .6em; font-weight: 800; letter-spacing: .1em; color: #e9dfcd; }
.cp-reloj { font: 900 1.2em ui-monospace, Consolas, monospace; color: #fff; font-variant-numeric: tabular-nums; }
.tablero.cp .tb-aviso { font-size: .55em; text-align: center; color: #ffc23d; }
.tablero.cp .tb-aviso.tm { color: #7dd3fc; }
.tablero.cp .tb-aviso:not(.visible) { display: none; }

/* ── Partido en vivo (página pública) ── */
.pv-cabecera { text-align: center; }
.pv-meta { margin: 0 0 10px; }
.pv-marcador { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.pv-equipo { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.pv-escudo { width: 72px; height: 72px; font-size: 72px; }
.pv-escudo.tb-iniciales { font-size: 26px; }
.pv-nombre { font-size: 1.05rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-centro { display: grid; justify-items: center; gap: 4px; }
.pv-goles { font: 900 3rem/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pv-guion { margin: 0 .2em; color: var(--suave); }
.pv-estado { font-size: .86rem; font-weight: 800; color: var(--suave); }
.pv-estado.en-vivo { color: #ff6b6b; }
.pv-reloj { font: 900 1.6rem ui-monospace, Consolas, monospace; color: var(--ambar); font-variant-numeric: tabular-nums; }
.pv-aviso { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 194, 61, .14); color: var(--ambar); }
.pv-aviso.tm { background: rgba(125, 211, 252, .12); color: #7dd3fc; }
.pv-aviso:not(.visible) { display: none; }
.pv-castigos { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pv-scroll { overflow-x: auto; }
.pv-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pv-tabla th, .pv-tabla td { padding: 8px 6px; border-bottom: 1px solid var(--borde); text-align: center; }
.pv-tabla th[scope=row] { text-align: left; }
.pv-total { font-weight: 900; color: var(--ambar); }
.pv-jugadas { display: grid; gap: 6px; }
.pv-per { margin: 10px 0 2px; font-size: .9rem; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.pv-jugada { display: grid; grid-template-columns: 50px 28px 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--caja-2); }
.pv-jugada small { display: block; }
.pv-min { font: 700 .86rem ui-monospace, Consolas, monospace; color: var(--suave); }
.pv-mini { width: 26px; height: 26px; font-size: 26px; }
.pv-mini.tb-iniciales { font-size: 10px; }
.pv-gol { box-shadow: inset 4px 0 0 var(--ambar); }
.pv-sancion { box-shadow: inset 4px 0 0 var(--rojo); }
.pv-lineas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.pv-linea h3 { display: flex; align-items: center; gap: 8px; }
.pv-volver { text-align: center; }
.tb-controles select { width: auto; max-width: 260px; }
.diseno-barra .tb-controles { top: 14px; bottom: auto; transform: translate(-50%, -20px); }
.diseno-barra .tb-controles.visible { transform: translate(-50%, 0); }

/* Moderno: el reloj se ajusta al ancho de su columna (no se monta sobre las tarjetas) */
.tablero.md { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); }
.md-centro { container-type: inline-size; min-width: 0; width: 100%; }
.md-reloj { font-size: clamp(40px, 8vw, 200px); font-size: min(24cqi, 220px); white-space: nowrap; max-width: 100%; box-sizing: border-box; }
.md-periodo { font-size: min(7cqi, 44px); white-space: nowrap; }
.md-centro .tb-aviso { font-size: min(4.6cqi, 36px); }
.md-equipo { container-type: inline-size; }
.md-goles { font-size: min(48cqi, 300px); }
.md-nombre { font-size: min(11cqi, 52px); }
.md-escudo { width: min(46cqi, 240px); height: min(46cqi, 240px); font-size: min(46cqi, 240px); }
.md-escudo.tb-iniciales { font-size: min(18cqi, 90px); }
/* Clásico y barra: lo mismo, por si el nombre o el reloj son largos */
.tb-centro, .tb-lado { min-width: 0; }
/* Con fondo de croma (#00ff00) no se usa texto verde: el programa de transmisión lo borraría junto con el fondo */
html:has(.fondo-verde) { background: #00ff00; }
.fondo-verde .br-periodo, .fondo-verde .cp-periodo, .fondo-verde .md-periodo, .fondo-verde .tb-dig.verde { color: #ffffff !important; text-shadow: none; }

/* ── Rótulo de gol (barra para transmisión y moderno) ── */
.gol-anuncio { position: fixed; z-index: 40; display: flex; align-items: center; gap: 1em; padding: .7em 1.1em; border-radius: 16px;
  background: linear-gradient(135deg, #ffc23d, #ff9a1f); color: #15110a; font-family: "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55); opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.2); pointer-events: none; }
.gol-anuncio.gol-visitante { background: linear-gradient(135deg, #7dd3fc, #38bdf8); }
.gol-anuncio.visible { opacity: 1; }
.gol-anuncio.saliendo { opacity: 0; }
.gol-anuncio .ga-escudo { width: 2.6em; height: 2.6em; font-size: 2.6em; }
.gol-anuncio .ga-escudo.tb-iniciales { font-size: 1em; width: 2.6em; height: 2.6em; background: rgba(0, 0, 0, .25); color: #fff; }
.ga-textos { display: grid; gap: .1em; min-width: 0; }
.ga-titulo { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; }
.ga-gol { font-weight: 900; font-size: 1.5em; letter-spacing: .04em; }
.ga-equipo { font-weight: 800; font-size: 1.05em; }
.ga-tipo { font-weight: 900; font-size: .7em; padding: .15em .5em; border-radius: .4em; background: rgba(0, 0, 0, .8); color: #fff; letter-spacing: .06em; }
.ga-autor { font-weight: 900; font-size: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-asist { font-weight: 600; font-size: .85em; opacity: .85; }
.ga-marcador { margin-left: .4em; padding-left: .9em; border-left: 2px solid rgba(0, 0, 0, .25); font: 900 1.3em ui-monospace, Consolas, monospace; white-space: nowrap; }
/* en la barra: sube desde encima de la barra */
.gol-anuncio.en-barra { left: 50%; bottom: calc(3vh + clamp(54px, 9vw, 120px) + 3.4em); font-size: clamp(13px, 1.8vw, 30px);
  transform: translate(-50%, 40px); max-width: calc(100% - 6vw); }
.gol-anuncio.en-barra.visible { transform: translate(-50%, 0); }
.gol-anuncio.en-barra.saliendo { transform: translate(-50%, 20px); }
/* en el moderno: grande, en el centro */
.gol-anuncio.en-moderno { left: 50%; top: 50%; font-size: clamp(16px, 2.6vw, 48px); transform: translate(-50%, -50%) scale(.8); max-width: 90vw; }
.gol-anuncio.en-moderno.visible { transform: translate(-50%, -50%) scale(1); }
.gol-anuncio.en-moderno.saliendo { transform: translate(-50%, -50%) scale(.9); }
@media (prefers-reduced-motion: reduce) { .gol-anuncio { transition: opacity .3s; } }
.gol-anuncio { width: max-content; }
.ga-titulo { flex-wrap: nowrap; white-space: nowrap; }
.ga-autor { overflow: visible; }

/* Dónde sale el rótulo de gol */
.gol-anuncio.en-barra.pos-arriba { top: 3vh; bottom: auto; transform: translate(-50%, -40px); }
.gol-anuncio.en-barra.pos-arriba.visible { transform: translate(-50%, 0); }
.gol-anuncio.en-barra.pos-arriba.saliendo { transform: translate(-50%, -20px); }
.gol-anuncio.en-moderno.pos-arriba { top: 4vh; transform: translate(-50%, -30px); }
.gol-anuncio.en-moderno.pos-arriba.visible { transform: translate(-50%, 0); }
.gol-anuncio.en-moderno.pos-arriba.saliendo { transform: translate(-50%, -15px); }
.gol-anuncio.en-moderno.pos-abajo { top: auto; bottom: 4vh; transform: translate(-50%, 30px); }
.gol-anuncio.en-moderno.pos-abajo.visible { transform: translate(-50%, 0); }
.gol-anuncio.en-moderno.pos-abajo.saliendo { transform: translate(-50%, 15px); }

/* ── Croma a elegir: verde, cian o magenta (por si un equipo usa ese color) ── */
.fondo-cyan, .fondo-cyan .tablero { background: #00ffff !important; }
.fondo-magenta, .fondo-magenta .tablero { background: #ff00ff !important; }
html:has(.fondo-cyan) { background: #00ffff; }
html:has(.fondo-magenta) { background: #ff00ff; }
.con-croma .br-periodo, .con-croma .cp-periodo, .con-croma .md-periodo, .con-croma .tb-dig.verde { color: #ffffff !important; text-shadow: none; }

/* ── Colores de los equipos (--c1 principal, --c2 secundario, --t1/--t2 texto encima) ── */
.br-goles, .br-visitante .br-goles { background: var(--c1); color: var(--t1); }
.br-lado { box-shadow: inset 0 -5px 0 var(--c2); }
.md-local, .md-visitante { box-shadow: inset 0 6px 0 var(--c1), inset 0 -4px 0 var(--c2); }
.md-equipo .md-goles { color: #fff; text-shadow: 0 0 .08em var(--c1); }
.cp-fila { box-shadow: inset 6px 0 0 var(--c1), inset 10px 0 0 var(--c2); padding-left: .8em; }
.tb-equipo { border-bottom: 4px solid var(--c1); padding-bottom: .2em; box-shadow: 0 4px 0 var(--c2); }
.gol-anuncio, .gol-anuncio.gol-visitante { background: linear-gradient(135deg, var(--c1) 0 62%, var(--c2) 62%); color: var(--t1); }
.gol-anuncio .ga-marcador { color: var(--t2); }
.m-equipo { border-top: 4px solid var(--c1); padding-top: 6px; border-radius: 4px; box-shadow: inset 0 4px 0 var(--c2); }
.pv-equipo .pv-nombre { border-bottom: 3px solid var(--c1); padding-bottom: 2px; }
/* Mi panel: los dos colores junto a cada equipo */
.colores-equipo { display: inline-flex; gap: 4px; }
.color-equipo { display: grid; justify-items: center; gap: 1px; cursor: pointer; }
.color-equipo input[type=color] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--borde); border-radius: 8px; background: none; cursor: pointer; }
.color-equipo small { font-size: .62rem; color: var(--suave); }

/* Mesa: colores de hoy de cada equipo */
.m-colores { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--caja-2); color: var(--suave); font: 700 .76rem inherit; cursor: pointer; }
.m-colores:hover { color: var(--texto); }
.m-muestra { width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.m-vista { display: grid; place-items: center; min-height: 70px; margin: 8px 0; border-radius: 14px; font-weight: 900; font-size: 1.3rem; }

/* ── Estadísticas en vivo: bloques de color de cada equipo y barras comparativas ── */
.tablero.es { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); height: 100vh; gap: 0; padding: 0; background: #1d1d20; }
.es-equipo { display: grid; align-content: center; justify-items: center; gap: 2vh; padding: 4vh 2vw; background: var(--c1); color: var(--t1);
  container-type: inline-size; min-width: 0; box-shadow: inset 0 -1.2vh 0 var(--c2); }
.es-escudo { width: min(52cqi, 34vh); height: min(52cqi, 34vh); font-size: min(52cqi, 34vh); object-fit: contain; }
.es-escudo.tb-iniciales { font-size: min(20cqi, 12vh); background: rgba(0, 0, 0, .18); color: var(--t1); }
.es-nombre-eq { font: 900 min(13cqi, 9vh)/1 "Segoe UI", system-ui, sans-serif; text-transform: uppercase; text-align: center; letter-spacing: -.01em;
  max-width: 100%; overflow-wrap: anywhere; }
.es-goles { font: 900 min(46cqi, 30vh)/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.es-centro { display: grid; grid-template-rows: auto auto auto auto 1fr; align-content: start; gap: 1.4vh; padding: 4vh 2.6vw; min-width: 0; color: #e7e7ea; background: #1d1d20; }
.es-cabeza { display: grid; grid-template-columns: 1fr 2.2fr 1fr; align-items: stretch; font-size: 2vh; }
.es-chip { display: grid; place-items: center; padding: .4em .5em; background: var(--c1); color: var(--t1); font-weight: 800; font-size: 1.5vh;
  text-transform: uppercase; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.es-titulo { display: grid; place-items: center; padding: .25em .4em; background: #f4f4f5; color: #18181b; font: 900 4.4vh/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .02em; }
.es-tiempo { display: flex; justify-content: center; align-items: baseline; gap: 1.2vw; }
.es-reloj { font: 900 5vh/1 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; color: #fff; }
.es-reloj.ultimo { color: #ff6b6b; }
.es-periodo { font-weight: 800; font-size: 2.2vh; letter-spacing: .12em; color: #a1a1aa; text-transform: uppercase; }
.es-centro .tb-aviso { justify-self: center; font-size: 2.2vh; color: #ffc23d; }
.es-filas { display: grid; align-content: space-evenly; gap: .6vh; }
.es-fila { display: grid; grid-template-columns: 3.2em 1fr 3.2em; grid-template-areas: "n n n" "a b c"; align-items: center; column-gap: .8em; row-gap: .3em; }
.es-nombre { grid-area: n; text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: .03em; color: #d4d4d8; }
.es-num { font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.es-barra { display: flex; gap: 3px; height: 1.1em; overflow: hidden; background: #3f3f46; }
.es-barra span { display: block; transition: width .6s ease; }
.es-l { background: var(--cl); } .es-v { background: var(--cv); }
.es-barra.vacia span { opacity: .18; }
.tablero.es .es-filas { font-size: 2.1vh; }
@media (prefers-reduced-motion: reduce) { .es-barra span { transition: none; } }
/* en la página del partido */
.pv-estadisticas { font-size: .95rem; gap: 14px; max-width: 720px; margin: 0 auto; color: var(--texto); }
.pv-estadisticas .es-nombre { color: var(--suave); font-size: .82rem; }
.pv-estadisticas .es-barra { height: 12px; border-radius: 6px; background: var(--caja-2); }
.tablero.es { align-items: stretch; justify-items: stretch; max-width: none; width: 100%; margin: 0; border-radius: 0; }
.tablero.es > * { height: 100%; box-sizing: border-box; }

/* Rótulo de gol «abajo» en la barra: sale sobre la barra misma (la tapa mientras dura), así se distingue de «arriba» en cualquier ventana */
.gol-anuncio.en-barra.pos-abajo { top: auto; bottom: 3vh; min-height: clamp(54px, 9vw, 120px); box-sizing: border-box; transform: translate(-50%, 30px); }
.gol-anuncio.en-barra.pos-abajo.visible { transform: translate(-50%, 0); }
.gol-anuncio.en-barra.pos-abajo.saliendo { transform: translate(-50%, 15px); }
/* en la barra el rótulo mide lo mismo que la barra: escudo/bandera a su alto */
.gol-anuncio.en-barra .ga-escudo, .gol-anuncio.en-barra .ga-escudo.tb-iniciales { font-size: 1em; width: 2.6em; height: 2.6em; object-fit: contain; }
.gol-anuncio.en-barra.pos-abajo { bottom: calc(3vh + 6px + 2.2 * clamp(12px, 1.6vw, 24px)); height: clamp(54px, 9vw, 120px); min-height: 0;
  padding-top: 0; padding-bottom: 0; overflow: hidden; }

.ga-autor.ga-solo-equipo { text-transform: uppercase; letter-spacing: .03em; }

/* Barra: con el gol «abajo» la barra va arriba de la ventana y el rótulo sale debajo de ella;
   con «arriba» la barra va abajo y el rótulo encima. Así el rótulo nunca tapa la barra. */
.diseno-barra.gol-abajo .tablero.br { justify-content: flex-start; }
.gol-anuncio.en-barra.pos-abajo { top: calc(3vh + clamp(54px, 9vw, 120px) + 6px + 2.2 * clamp(12px, 1.6vw, 24px) + 6px); bottom: auto;
  height: clamp(54px, 9vw, 120px); min-height: 0; transform: translate(-50%, -30px); }
.gol-anuncio.en-barra.pos-abajo.visible { transform: translate(-50%, 0); }
.gol-anuncio.en-barra.pos-abajo.saliendo { transform: translate(-50%, -15px); }
.gol-anuncio.en-barra.pos-arriba { top: auto; bottom: calc(3vh + clamp(54px, 9vw, 120px) + 6px + 2.2 * clamp(12px, 1.6vw, 24px) + 6px);
  height: clamp(54px, 9vw, 120px); padding-top: 0; padding-bottom: 0; overflow: hidden; }

/* Mesa: + / − al reloj sin pararlo */
.m-ajuste { display: flex; gap: 6px; }
.m-ajuste button { min-width: 52px; min-height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--borde); background: var(--caja-2);
  color: var(--texto); font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; }
.m-ajuste button:hover { border-color: var(--acento, #ffc23d); }
.m-ajuste button:active { transform: scale(.96); }
/* misma separación (16 px) entre la barra y el rótulo de gol, arriba o abajo */
.gol-anuncio.en-barra.pos-abajo { top: calc(3vh + clamp(54px, 9vw, 120px) + 16px); }
.gol-anuncio.en-barra.pos-arriba { bottom: calc(3vh + 6px + 2.2 * clamp(12px, 1.6vw, 24px) + clamp(54px, 9vw, 120px) + 16px); }

/* Mesa de selecciones: marcador que quedó en el sitio */
.m-sitio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 8px 12px;
  border-radius: 12px; border: 1px solid var(--borde); background: var(--caja-2); font-weight: 700; font-size: .9rem; }
.m-sitio.bien { border-color: rgba(246, 242, 234, .45); }
.m-sitio.mal { border-color: var(--rojo); background: rgba(239, 68, 68, .12); }
.m-ajuste { flex-wrap: wrap; justify-content: center; }


/* Barra: power play y tiempo muerto en una pestaña pegada debajo de la barra (mismo ancho), sanciones bajo cada equipo */
.br-bloque { display: grid; justify-items: stretch; max-width: 100%; }
.br-tira { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .6em; min-height: 2.2em; margin-top: 0; padding: 0 1.2em; }
.br-tira .tb-castigos { display: flex; flex-wrap: wrap; gap: .3em; }
.br-tira .tb-castigos[data-castigos="local"] { justify-content: flex-start; }
.br-tira .tb-castigos[data-castigos="visitante"] { justify-content: flex-end; }
.br-tira .tb-castigo-mini { margin: 0; padding: .25em .6em; border-radius: 0 0 .45em .45em; background: #15120d; color: #fff; font-weight: 800;
  font-variant-numeric: tabular-nums; box-shadow: inset 3px 0 0 #ff4d4f, 0 4px 12px rgba(0, 0, 0, .45); }
.br-avisos { display: flex; gap: .4em; justify-content: center; }
.br-tira .tb-aviso { padding: .3em 1em; border-radius: 0 0 .6em .6em; background: #ffc23d; color: #15110a; font-weight: 900; letter-spacing: .03em;
  white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.br-tira .tb-aviso.tm { background: #7dd3fc; color: #0b1b2b; }
.con-croma .br-tira .tb-aviso, .con-croma .br-tira .tb-castigo-mini { text-shadow: none; }

/* ── Previa del partido: una barra grande con las mismas piezas que la de transmisión ──
   paneles oscuros con el subrayado del color secundario, bloque del color principal (aquí la campaña G-P-E),
   centro negro con VS y la hora en ámbar; pestaña de arriba con la marca y el torneo, pestaña de abajo con la sede */
.tablero.pr { min-height: 100vh; display: grid; place-items: center; padding: 4vh 3vw; background: transparent; }
.diseno-previa.fondo-negro { background: #000; }
.pr-bloque { width: min(94vw, 165vh); container-type: inline-size; display: grid; justify-items: center; color: #fff;
  font-family: "Segoe UI", system-ui, sans-serif; filter: drop-shadow(0 1.2cqi 3cqi rgba(0, 0, 0, .55)); }
.pr-cabeza { display: flex; align-items: center; gap: 1.2cqi; padding: .7cqi 2.2cqi .7cqi 1cqi; background: #0b0a08; border-radius: 1.4cqi 1.4cqi 0 0;
  font-weight: 800; font-size: 1.6cqi; letter-spacing: .14em; text-transform: uppercase; color: #e9dfcd; box-shadow: inset 0 .3cqi 0 #ffc23d; }
.pr-cabeza img { height: 3.6cqi; width: auto; }
.pr-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; height: 20cqi; border-radius: 1.6cqi; overflow: hidden; }
.pr-lado { display: flex; align-items: center; gap: 1.8cqi; min-width: 0; background: #17140f; box-shadow: inset 0 -.7cqi 0 var(--c2); }
.pr-local { padding-left: 2.4cqi; }
.pr-visitante { padding-right: 2.4cqi; }
.pr-escudo { flex: none; width: 10.5cqi; aspect-ratio: 3 / 2; display: grid; place-items: center; }
.pr-escudo .pr-img { width: 100%; height: 100%; object-fit: contain; }
.pr-escudo.es-bandera .pr-img { object-fit: cover; border-radius: .9cqi; box-shadow: 0 0 0 .25cqi rgba(255, 255, 255, .22); }
.pr-escudo .pr-img.tb-iniciales { width: auto; height: 100%; aspect-ratio: 1; border-radius: 50%; font-size: 4.4cqi; background: rgba(255, 255, 255, .1); color: #fff; }
.pr-nombre { flex: 1; min-width: 0; font-weight: 900; font-size: 3.4cqi; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-visitante .pr-nombre { text-align: right; }
.pr-campana { flex: none; align-self: stretch; display: grid; place-content: center; justify-items: center; gap: .3cqi; min-width: 10cqi; padding: 0 1.2cqi;
  background: var(--c1); color: var(--t1); box-shadow: inset 0 -.7cqi 0 var(--c2); }
.pr-campana small { font-size: 1.25cqi; font-weight: 800; letter-spacing: .16em; opacity: .8; }
.pr-campana b { font: 900 3.4cqi/1 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.pr-centro { display: grid; place-content: center; justify-items: center; gap: .5cqi; min-width: 15cqi; padding: 0 2.6cqi; background: #050505; }
.pr-vs { font-weight: 900; font-size: 4.6cqi; line-height: 1; letter-spacing: .04em; }
.pr-comienza { font-size: 1.2cqi; font-weight: 800; letter-spacing: .18em; color: #b5ab9b; }
.pr-hora { font: 900 3.2cqi/1 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; color: #ffc23d; }
.pr-tira { display: flex; justify-content: center; }
.pr-tira span { padding: .7cqi 2.4cqi; background: #15120d; border-radius: 0 0 1cqi 1cqi; font-weight: 800; font-size: 1.6cqi; letter-spacing: .14em;
  text-transform: uppercase; color: #f6f2ea; box-shadow: inset 0 -.3cqi 0 #ffc23d; }
/* nombres largos de la previa: hasta dos líneas, nunca cortados */
.pr-nombre { font-size: 3cqi; white-space: normal; text-overflow: clip; overflow-wrap: normal; word-break: normal; hyphens: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }

/* sin verde en el juego: el periodo del tablero clásico en crema (los colores de la marca son negro, ámbar y crema) */
.tb-dig.verde { color: #f6f2ea !important; text-shadow: 0 0 .25em rgba(255, 255, 255, .35); }

/* Rótulo de gol legible con cualquier color de equipo (p. ej. blanco):
   el marcador va en su propia placa del color secundario y todo el texto lleva reborde negro */
.gol-anuncio .ga-marcador { margin-left: .5em; padding: .15em .55em; border-left: 0; border-radius: .45em; background: var(--c2); color: var(--t2);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); }
.gol-anuncio .ga-gol, .gol-anuncio .ga-equipo, .gol-anuncio .ga-autor, .gol-anuncio .ga-asist, .gol-anuncio .ga-marcador {
  -webkit-text-stroke: .09em #000; paint-order: stroke fill;
  text-shadow: 0 .04em .12em rgba(0, 0, 0, .55); }
/* la previa ocupa una sola columna centrada (la regla base de .tablero reparte tres columnas) */
.tablero.pr { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: 0; }
/* reborde más fino: en los textos lo justo para leerse sobre colores claros; en los números del marcador, apenas un filete */
.gol-anuncio .ga-gol, .gol-anuncio .ga-equipo, .gol-anuncio .ga-autor, .gol-anuncio .ga-asist { -webkit-text-stroke-width: .05em; }
.gol-anuncio .ga-marcador { -webkit-text-stroke-width: .035em; }

/* aviso bajo un campo con un valor que no se entiende */
.error-campo { color: var(--rojo); font-weight: 700; }
.campo input[aria-invalid="true"] { border-color: var(--rojo); }