/* Herramienta Texto del Estudio de diseño (#88): textos en el lienzo, su editor y el panel
   Carácter y párrafo (herramienta-texto.js, panel-caracter.js). Usa las variables de estudio.css. */

/* ---------- En el lienzo ---------- */
.lienzo[data-herramienta="texto"] { cursor: text; }
/* Los espacios del texto se ven tal cual (los saltos de línea los pone el modelo, en cada <tspan>). */
.lienzo [data-texto] { white-space: pre; }
/* Caja invisible del texto: se puede tocar entre letras. */
.lienzo .texto-toque { fill: transparent; stroke: none; }

/* Editor: encima del texto, con su letra y su color (los pone herramienta-texto.js). */
.texto-editor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 1px dashed var(--acento);
  outline-offset: 0;
  background: transparent;
  overflow: hidden;
  resize: none;
  transform-origin: 0 0;
  font-kerning: none;
}
.texto-editor:focus-visible { outline: 1px dashed var(--acento); }
.texto-editor[hidden] { display: none; }

/* ---------- Panel Trazo con solo textos seleccionados ---------- */
/* Un texto solo lleva color, grosor y extremos: los estilos de pespunte y las fornituras no se ofrecen. */
[data-panel-trazo][data-solo-texto] :is(
  .panel-subtitulo:has(+ .trazo-estilos), .trazo-estilos, .trazo-puntadas,
  #titulo-fornitura-trazo, .fornituras-trazo, .fornitura-ajustes
) { display: none; }

/* ---------- Panel Carácter y párrafo ---------- */
.caracter { display: grid; gap: 10px; }
.caracter[disabled] .caracter-alineacion button { cursor: default; }
.caracter-fila { grid-template-columns: 76px minmax(0, 1fr); }
.caracter select {
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--hoja);
  color: var(--tinta);
  font: 400 13px/1.3 var(--letra);
}
.caracter-medidas,
.caracter-colores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.caracter-medida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 4px;
  font-size: 12px;
  color: var(--secundario);
}
.caracter-medida > span:first-child { grid-column: 1 / -1; }
.caracter-medida input[type="number"] {
  min-width: 0;
  width: 100%;
  padding: 3px 5px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--hoja);
  color: var(--tinta);
  font: 400 13px/1.3 var(--letra);
  font-variant-numeric: tabular-nums;
}
.caracter-medida input[type="color"] { grid-column: 1 / -1; width: 100%; }
.caracter-unidad { font-variant-numeric: tabular-nums; }
.caracter-alineacion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.caracter-alineacion .relleno-modo { justify-content: center; }