/* Etiqueta el diagrama — usa el ANDAMIO de regiones (styles/scaffold.css): rieles
   start/end que refluyen de columnas laterales (ancho) a filas arriba/abajo (alto)
   con la imagen centrada. Aquí va solo la PIEL: etiquetas vistosas de color,
   pines, imagen y el punto conector orientado. Motor de cuerdas: core/connectRope.js.

   ESTÁNDAR (docs/estilos-de-actividad.md): todo relativo (cq*) y colores pintables
   por token var(--ww-*) — las etiquetas ciclan --ww-shape-1..4 (el skin recolorea). */

.dg-play { touch-action: none; }               /* el arrastre nunca hace scroll */

/* Rieles: se CIÑEN a su contenido para que el escenario reclame el máximo (la
   imagen grande, como en Wordwall — antes 2 columnas fijas comían el 52%). */
.dg-rail { gap: 1.4cqmin; padding: .4cqmin; overflow: visible; }

/* Etiqueta: pastilla VISTOSA de color con texto blanco y grande. */
.dg-label {
  --dg-dot: max(13px, 3.2cqmin);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 1.7cqmin 3cqmin;
  border-radius: 999px;
  background: var(--dg-color, var(--ww-accent, #6366f1));
  color: var(--dg-fg, #fff);   /* la tinta la trae el token del skin (ver player.js) */
  font-weight: 800;
  font-size: max(.8rem, 4.4cqmin);   /* piso legible; crece con el marco */
  line-height: 1.1;
  cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  max-width: 100%; overflow: visible;
  transition: transform .12s, box-shadow .15s;
}
.dg-label:active { cursor: grabbing; }
.dg-label:hover  { transform: scale(1.04); }
.dg-label-text   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-label.dg-linked  { box-shadow: 0 0 0 max(2px,.5cqmin) #6366f1, 0 2px 6px rgba(0,0,0,.18); }
.dg-label.dg-correct { box-shadow: 0 0 0 max(2px,.5cqmin) #16a34a, 0 2px 6px rgba(0,0,0,.18); }
.dg-label.dg-wrong   { box-shadow: 0 0 0 max(2px,.5cqmin) #ef4444, 0 2px 6px rgba(0,0,0,.18); opacity: .85; }

/* Punto conector (.ww-dot compartido con Emparejar) — del color del chip. */
.dg-label .ww-dot {
  width: var(--dg-dot); height: var(--dg-dot);
  background: var(--dg-color, var(--ww-accent, #6366f1)); border-color: #fff;
}

/* Hueco para el punto + su POSICIÓN según la orientación del área:
   ANCHO  → start: borde derecho · end: borde izquierdo (columnas laterales)
   ALTO   → start: borde inferior · end: borde superior  (filas arriba/abajo) */
@container player (aspect-ratio >= 1/1) {
  .dg-rail[data-rail="start"] .dg-label { padding-right: calc(var(--dg-dot) + 1.6cqmin); }
  .dg-rail[data-rail="end"]   .dg-label { padding-left:  calc(var(--dg-dot) + 1.6cqmin); }
  .dg-rail[data-rail="start"] .ww-dot { top: 50%; left: auto; right: calc(var(--dg-dot) / -2); transform: translateY(-50%); }
  .dg-rail[data-rail="end"]   .ww-dot { top: 50%; right: auto; left:  calc(var(--dg-dot) / -2); transform: translateY(-50%); }
}
@container player (aspect-ratio < 1/1) {
  .dg-rail[data-rail="start"] .dg-label { padding-bottom: calc(var(--dg-dot) + 1cqmin); }
  .dg-rail[data-rail="end"]   .dg-label { padding-top:    calc(var(--dg-dot) + 1cqmin); }
  .dg-rail[data-rail="start"] .ww-dot { left: 50%; top: auto; bottom: calc(var(--dg-dot) / -2); transform: translateX(-50%); }
  .dg-rail[data-rail="end"]   .ww-dot { left: 50%; bottom: auto; top: calc(var(--dg-dot) / -2); transform: translateX(-50%); }
}

/* Escenario: la imagen define su caja (fitImageBox por JS) y ocupa lo máximo. */
.dg-img-box { position: relative; line-height: 0; }
.dg-img { display: block; width: 100%; height: 100%; border-radius: 1cqmin; -webkit-user-drag: none; user-select: none; }

/* Pines sobre la imagen: aro blanco con centro (estilo Wordwall). */
.dg-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: max(13px, 2.8cqmin); height: max(13px, 2.8cqmin); border-radius: 50%;
  background: #fff; border: max(2px, .6cqmin) solid #475569;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  cursor: crosshair; touch-action: none; z-index: 10;
}
.dg-pin:hover  { transform: translate(-50%, -50%) scale(1.25); }
.dg-pin.dg-linked  { border-color: #6366f1; }
.dg-pin.dg-correct { border-color: #16a34a; background: #16a34a; }
.dg-pin.dg-wrong   { border-color: #ef4444; background: #ef4444; }

/* Capa de cuerdas: cubre todo el field, sin robar el puntero. */
.dg-field .ww-lines-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 5;
}

/* Botón enviar: tamaño normal (no gigante), pegado a la barra inferior. */
.dg-submit { font-size: max(.82rem, 2.8cqmin); padding: .45em 1.4em; border-radius: 999px; }

/* Editor: escenario de colocación de pines. NO es el juego (formulario) → px OK. */
.dg-edit-stage { display: flex; justify-content: center; background: var(--ww-bg-soft, #f8fafc); border: 1px solid var(--ww-card-border, #e2e8f0); border-radius: 8px; padding: 8px; max-height: 46vh; }
.dg-edit-stage .dg-img { cursor: crosshair; }
.dg-edit-pin { width: 20px; height: 20px; background: #6366f1; color: #fff; border-color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; cursor: grab; }
.dg-edit-pin:active { cursor: grabbing; }