/* ---------- Estampados propios con rapport (#129) ---------- */
/* La pestaña Estampados del panel de Relleno (panel-relleno.js) y el modo de edición del motivo
   (modo-motivo.js): su barra sobre la Mesa de trabajo, la tesela y sus repeticiones atenuadas.
   Usa los tokens de /comun/taller.css, que ya cambian en modo oscuro. */

/* Cuatro pestañas de Textura: Generadas, Fotos, Mías y Estampados. */
.textura-clases { display: flex; }
.textura-clases [role="tab"] { flex: 1 1 auto; padding-inline: 3px; white-space: nowrap; letter-spacing: -0.01em; }

.texturas-estampados { display: grid; gap: 8px; }
.texturas-estampados[hidden] { display: none; }
.muestra-estampado { display: block; width: 100%; height: 100%; }
.muestra-estampado svg { display: block; width: 100%; height: 100%; }
.estampados-botones { display: flex; flex-wrap: wrap; gap: 4px; }
.estampados-botones .degradado-boton { white-space: nowrap; }

/* ---------- Modo de edición del motivo ---------- */
/* La barra va arriba, donde están las pestañas de las caras (que no se usan en este modo). */
.motivo-barra {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 6px 10px;
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: 13px/1.3 var(--letra);
}
.motivo-barra[hidden] { display: none; }
.estudio-escenario[data-reglas] .motivo-barra { top: calc(var(--regla) + 8px); left: calc(var(--regla) + 8px); }
.motivo-titulo {
  font: 500 11.5px/1.2 var(--letra);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}
.motivo-campo { display: inline-flex; align-items: center; gap: 5px; color: var(--secundario); white-space: nowrap; }
.motivo-campo[hidden] { display: none; }
.motivo-campo input,
.motivo-campo select {
  padding: 3px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: 13px/1.3 var(--letra);
  font-variant-numeric: tabular-nums;
}
.motivo-campo input[type="number"] { width: 64px; }
.motivo-campo input[type="text"] { width: 130px; }
.motivo-hueco { flex: 1; }
.motivo-barra .motivo-hecho { border-color: var(--acento); background: var(--acento); color: var(--fondo); }
.motivo-barra .motivo-hecho:hover { border-color: var(--acento); }

/* Mientras se edita un motivo no se cambia de cara ni se sale del Diseño provisional. */
body[data-modo-motivo] .caras,
body[data-modo-motivo] [data-proyecto] .estudio-accion,
body[data-modo-motivo] [data-exportar],
body[data-modo-motivo] [data-vista-3d-abrir],
body[data-modo-motivo] [data-ficha-abrir],
body[data-modo-motivo] [data-herramienta="cota"],
body[data-modo-motivo] .meta-accion[data-tamano-abrir] { display: none; }
/* Las medidas de la barra siguen a la vista, pero no abren el tamaño de la Mesa (la del motivo es provisional). */
body[data-modo-motivo] .estudio-medidas[data-tamano-abrir] { pointer-events: none; }

/* La tesela: borde continuo en la nota de color; el paso (con la separación), discontinuo. */
.lienzo .motivo-tesela { pointer-events: none; }
.lienzo .motivo-tesela rect { fill: none; vector-effect: non-scaling-stroke; }
.lienzo .motivo-borde { stroke: var(--acento); stroke-width: 1.5; }
.lienzo .motivo-paso { stroke: var(--secundario); stroke-width: 1; stroke-dasharray: 4 3; }
/* Las repeticiones, atenuadas: se ven, pero no se confunden con lo que se edita. */
.lienzo .motivo-repeticiones { opacity: 0.4; pointer-events: none; }