/* ============================================================
   Playground de tokens: comparador APCA y generador por semilla.
   ============================================================ */
.playground {
  max-width: var(--lectura-max);
  margin: 0 auto;
  padding: var(--espacio-xl) var(--espacio-lg) var(--espacio-2xl);
  font-family: var(--fuente-sans);
}
.playground section.tarjeta { margin: var(--espacio-lg) 0; }

.grupo-control {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--espacio-sm); margin: var(--espacio-md) 0;
}
.grupo-control label { font-weight: var(--peso-media); font-size: var(--fs-pequeno); }
.controles-apca { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--espacio-md); }
.controles-apca .campo { display: inline-block; width: auto; max-width: 230px; }

input[type="color"] {
  width: 48px; height: var(--control); padding: 2px;
  border: 1px solid var(--color-borde); border-radius: var(--radio-md);
  background: var(--color-fondo-base); cursor: pointer;
}
input[type="range"] { width: min(100%, 360px); accent-color: var(--color-accion-primaria); }

.muestra-apca {
  display: flex; flex-direction: column; gap: var(--espacio-2xs);
  padding: var(--espacio-lg); margin: var(--espacio-md) 0;
  border: 1px solid var(--color-borde); border-radius: var(--radio-md);
}
.muestra-apca .grande { font-size: var(--fs-titulo-3); font-weight: var(--peso-semibold); }
.lc-resultado { font-size: var(--fs-titulo-3); font-weight: var(--peso-semibold); font-variant-numeric: tabular-nums; }
.veredicto caption { text-align: left; font-size: var(--fs-etiqueta); color: var(--color-texto-secundario); padding-bottom: var(--espacio-2xs); }
.cumple { color: var(--color-exito-texto); font-weight: var(--peso-media); }
.no-cumple { color: var(--color-error); font-weight: var(--peso-media); }

.muestras-semilla {
  --semilla-primaria: var(--azul-600);
  --semilla-activa: var(--azul-700);
  --semilla-suave: var(--azul-100);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--espacio-md); padding: var(--espacio-lg); margin: 0 0 var(--espacio-md);
  border: 1px solid var(--color-borde); border-radius: var(--radio-md);
}
.muestras-semilla .boton-primario { background: var(--semilla-primaria); }
.muestras-semilla .boton-primario:hover { background: var(--semilla-activa); }
#demo-enlace { color: var(--semilla-primaria); font-weight: var(--peso-media); }
#demo-badge { background: var(--semilla-suave); color: var(--semilla-activa); }

.lista-roles {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--espacio-2xs) var(--espacio-md);
  font-size: var(--fs-pequeno); margin: 0 0 var(--espacio-md);
}
.lista-roles dt { font-weight: var(--peso-media); }
.lista-roles dd { margin: 0; font-family: var(--fuente-mono); display: flex; align-items: center; gap: var(--espacio-xs); }
.muestra-color {
  width: 1rem; height: 1rem; display: inline-block;
  border: 1px solid var(--color-borde); border-radius: var(--radio-sm);
}
#estado-copia { font-size: var(--fs-pequeno); color: var(--color-exito-texto); min-height: 1.5em; }