/* ---------- Panel Transformar (panel-transformar.js), en el grupo de pestañas de Alinear ---------- */
/* Como en Illustrator: punto de referencia a la izquierda, X/Y y An/Al en dos columnas, candado de
   proporción a la derecha y el ángulo debajo. Usa los tokens de /comun/taller.css. */

.transformar { display: grid; gap: 6px; }
.transformar-campos {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) minmax(0, 1fr) 18px;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 6px 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.transformar-campos:disabled { opacity: 0.5; }

/* Punto de referencia: 3 × 3 cuadraditos unidos por un marco, como el icono de Illustrator. */
.transformar-referencia {
  grid-row: 1 / span 2;
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(3, 9px);
  grid-template-rows: repeat(3, 9px);
  gap: 3px;
  padding: 2px;
  justify-self: start;
  background:
    linear-gradient(var(--linea), var(--linea)) center / calc(100% - 9px) 1px no-repeat,
    linear-gradient(var(--linea), var(--linea)) center / 1px calc(100% - 9px) no-repeat;
  outline: 1px solid var(--linea);
  outline-offset: -6px;
}
.transformar-referencia input {
  appearance: none;
  width: 9px;
  height: 9px;
  margin: 0;
  border: 1px solid var(--secundario);
  border-radius: 1px;
  background: var(--fondo);
  cursor: pointer;
}
.transformar-referencia input:checked { background: var(--acento); border-color: var(--acento); }
.transformar-referencia input:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.transformar-campos:disabled .transformar-referencia input { cursor: default; }

.transformar-campo {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: var(--secundario);
}
.transformar-campo > span { width: 13px; flex: none; }
.transformar-campo input {
  width: 100%;
  min-width: 0;
  padding: 3px 4px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 12px var(--letra);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.transformar-campo input:focus { border-color: var(--acento); outline: none; box-shadow: inset 0 0 0 1px var(--acento); }
.transformar-campo input::placeholder { color: var(--secundario); }
.transformar-angulo { grid-column: 2; grid-row: 3; }
.transformar-angulo svg,
.transformar-candado svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Candado de proporción: une An y Al; con él, la cadena se cierra en el acento. */
.transformar-candado {
  grid-row: 1 / span 2;
  grid-column: 4;
  width: 18px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--secundario);
  cursor: pointer;
}
.transformar-candado:hover:not(:disabled) { background: var(--superficie); color: var(--tinta); }
.transformar-candado .transformar-candado-eslabon { opacity: 0; }
.transformar-candado[aria-pressed="true"] { color: var(--acento); }
.transformar-candado[aria-pressed="true"] .transformar-candado-eslabon { opacity: 1; }
.transformar .panel-pista[hidden] { display: none; }