/* Tangram — estilos del PLAYER. Contrato (docs/estilos-de-actividad.md):
   NADA con tamaño fijo (cq*/% o piso max(); un clamp con techo bajo CONGELA) y
   colores pintables por token var(--ww-*) para que los skins recoloreen. Las
   piezas y la paleta del banco NO son parte de este contrato: son DATO inline
   desde JS (game/piezas.js), como las bolas de Pelotas — la única excepción a
   "nada de #hex" que permite §3 (color de contenido, no del chrome). Los
   selectores `.ta-edit-*` son el FORMULARIO del editor (figuras de partida,
   tablero del docente y la vista de la unión): ahí sí se permite `px` —
   `EDITOR_SEL` de tests/styles.test.mjs los reconoce por el `edit` en el
   nombre. */

.ta-play { display: flex; flex-direction: column; height: 100%; }

.ta-tablero {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}

/* El SVG llena el hueco; el `viewBox` (calculado en player.js a partir de la
   silueta) es quien decide la proporción real — aquí solo se pide que ocupe
   TODO lo que le dan, nunca un tamaño propio. */
.ta-svg { width: 100%; height: 100%; touch-action: none; }

/* La silueta es la pista PASIVA (§29): UNA mancha sólida, sin costuras entre
   piezas — el tangram no regala dónde va cada una. `fill` y `stroke` son EL
   MISMO token: un `stroke:none` a secas seguía dejando ver la junta (el
   antialias del <canvas>/SVG dibuja un borde más claro donde dos polígonos
   solo se tocan por una arista, aunque el relleno sea idéntico) — con el
   trazo pintado del MISMO gris y grosor de sobra (0.02 de la rejilla, más
   ancho que el hueco de antialias) esa línea queda tapada por el propio
   color. El grupo entero lleva la opacidad (no cada polígono) para que dos
   piezas que se tocan no oscurezcan la costura al solaparse en el borde. */
.ta-silueta { opacity: .22; }
.ta-silueta polygon {
  fill: var(--ww-fg);
  stroke: var(--ww-fg);
  stroke-width: .02;
  stroke-linejoin: round;
}

/* Cada pieza es un <g> con su propio transform (translate/rotate/scale) — el
   MISMO {x,y,rot,flip} que usa game/geometria.js, así el dibujo y el cálculo
   de "resuelto" nunca pueden desincronizarse. El color es DATO (fill inline);
   aquí solo el trazo y la sombra de agarre, que sí son del chrome del juego. */
.ta-pieza polygon {
  stroke: var(--ww-bg, #fff);
  stroke-width: .006;
  stroke-linejoin: round;
  cursor: grab;
  filter: drop-shadow(0 .006px .012px rgba(0, 0, 0, .35));
}
.ta-pieza:active polygon,
.ta-pieza polygon:active { cursor: grabbing; }

/* ── Editor (formulario, px permitido: EDITOR_SEL los reconoce por "edit") ── */
/* Figuras de partida: una tira de miniaturas que se CARGAN al tablero. */
.ta-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.ta-edit-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; border: 2px solid #dee2e6; border-radius: 10px;
  background: #fff; cursor: pointer;
}
.ta-edit-tile:hover { border-color: #0d6efd; }
.ta-edit-mini { width: 100%; height: 56px; }
.ta-edit-mini polygon { fill: #888; stroke: #888; stroke-width: .02; stroke-linejoin: round; }
.ta-edit-tile__nombre { font-size: 12px; text-align: center; }

/* La mesa: el tablero (las piezas, el MISMO game/tablero.js del player) y al
   lado «así la verá la clase» (la unión gris, con las mismas reglas de
   costura que .ta-silueta). En estrecho, apilados. */
.ta-edit-mesa {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(160px, 2fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 640px) { .ta-edit-mesa { grid-template-columns: 1fr; } }
.ta-edit-tablero {
  width: 100%; aspect-ratio: 1 / 1; max-height: 520px;
  border: 2px solid #dee2e6; border-radius: 10px; background: #fff;
  touch-action: none;   /* el dedo arrastra piezas, no la página */
}
.ta-edit-fondo { fill: #fff; }
.ta-edit-tablero .ta-pieza polygon { stroke: #fff; }   /* el formulario no lleva tokens de skin */
.ta-edit-vista { display: flex; flex-direction: column; gap: 6px; }
.ta-edit-vista-svg {
  width: 100%; max-height: 220px;
  border: 1px dashed #dee2e6; border-radius: 10px; background: #fafafa;
}
.ta-edit-vista-svg .ta-silueta { opacity: 1; }
.ta-edit-vista-svg .ta-silueta polygon { fill: #666; stroke: #666; }
.ta-edit-aviso { margin: 0; }