/**
 * Tema claro del visor, alineado con el diseño del sitio.
 * El visor expone variables --c-lpv-*; aquí solo las redefinimos.
 */
.tbc-partida {
  margin: 0;
}

.tbc-partida__titulo {
  margin-bottom: 12px;
  font-size: var(--tx--11, 0.6875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black-l-3, #767676);
}

.tbc-tablero.lpv {
  --c-lpv-bg: var(--white, #fff);
  --c-lpv-bg-pane: var(--50, #f7f7fa);
  --c-lpv-bg-movelist: var(--white, #fff);
  --c-lpv-bg-controls: var(--white, #fff);
  --c-lpv-bg-player: var(--50, #f7f7fa);
  --c-lpv-bg-variation: var(--50, #f7f7fa);

  --c-lpv-font: var(--900, #212121);
  --c-lpv-font-shy: var(--black-l-3, #767676);
  --c-lpv-font-bg: var(--white, #fff);
  --c-lpv-pgn-text: var(--900, #212121);
  --c-lpv-past-moves: var(--black-l-2, #525252);

  --c-lpv-border: var(--border, #ebebeb);
  --c-lpv-side-border: var(--border, #ebebeb);

  --c-lpv-accent: var(--900, #212121);
  --c-lpv-accent-over: var(--white, #fff);
  --c-lpv-current-move: var(--900, #212121);
  --c-lpv-move-hover: var(--100, #f5f5f5);
  --c-lpv-fbt-hover: var(--100, #f5f5f5);

  border: 1px solid var(--border, #ebebeb);
  border-radius: var(--rad--16, 1rem);
  box-shadow: none;
}

/* Los controles, con el mismo aire que el resto del sitio */
.tbc-tablero .lpv__controls {
  border-top: 1px solid var(--border, #ebebeb);
}

.tbc-tablero .lpv__side {
  border-left: 1px solid var(--border, #ebebeb);
}

/* La jugada activa, en negro sólido como los botones */
.tbc-tablero .lpv__moves move.current {
  background: var(--900, #212121);
  color: var(--white, #fff);
}

@media (max-width: 767px) {
  .tbc-tablero .lpv__side {
    border-left: 0;
    border-top: 1px solid var(--border, #ebebeb);
  }
}

/**
 * Barra de controles: las cuatro flechas juntas a la izquierda y el menú a la
 * derecha. Los botones de inicio y final los añade tbc-init.js al final de la
 * barra, así que el orden visual lo pone `order`.
 */
.tbc-tablero .lpv__controls {
  justify-content: flex-start;
  gap: 2px;
  padding: 6px 8px;
}

.tbc-tablero .lpv__controls > button {
  flex: 0 0 auto;
  width: 44px;
  height: 40px;
  border-radius: var(--rad--8, 0.5rem);
  font-size: 1.125rem;
}

.tbc-tablero .lpv__controls .tbc-goto--first { order: 1; }
.tbc-tablero .lpv__controls .lpv__controls__goto--prev { order: 2; }
.tbc-tablero .lpv__controls .lpv__controls__goto--next { order: 3; }
.tbc-tablero .lpv__controls .tbc-goto--last { order: 4; }

/* El menú, empujado al extremo derecho */
.tbc-tablero .lpv__controls .lpv__controls__menu {
  order: 9;
  margin-left: auto;
}

/* Al abrir el menú el visor saca sus propios botones de inicio y final: usamos los nuestros */
.tbc-tablero .lpv__controls .lpv__controls__goto--first,
.tbc-tablero .lpv__controls .lpv__controls__goto--last {
  display: none;
}

.tbc-tablero .lpv__controls > button.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Lista de jugadas: todo al mismo cuerpo (el visor la sube a 18 y las jugadas a 1.1em) */
.tbc-tablero .lpv__side,
.tbc-tablero .lpv__side * {
  font-size: 14px;
}

/**
 * Insignias de jugada sobre la casilla de destino: !!, ?, ??…
 * El visor no las dibuja; las coloca tbc-init.js y aquí se les da forma.
 */
.tbc-tablero .tbc-nag {
  position: absolute;
  z-index: 10;
  transform: translate(-45%, -45%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6%;
  height: 6%;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;   /* de reserva: el tamaño real lo pone tbc-init.js */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  pointer-events: none;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}

.tbc-tablero .tbc-nag--brillante   { background: #22ac38; }   /* !!  */
.tbc-tablero .tbc-nag--bien        { background: #4da3d5; }   /* !   */
.tbc-tablero .tbc-nag--interesante { background: #a77edb; }   /* !?  */
.tbc-tablero .tbc-nag--impreciso   { background: #f2c33d; }   /* ?!  */
.tbc-tablero .tbc-nag--error       { background: #e58f25; }   /* ?   */
.tbc-tablero .tbc-nag--grave       { background: #df5353; }   /* ??  */