/*
  Estudio de diseño: aplicación a pantalla completa (dirección C, vista «Estudio de diseño").
  Barra superior, herramientas a la izquierda con su atajo, Mesa de trabajo sobre gris neutro
  y paneles a la derecha. Usa los tokens de /comun/taller.css.
*/

body.aplicacion {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.estudio {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.estudio:focus { outline: none; }

/* ---------- Barra superior ---------- */
.estudio-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 48px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--linea);
  font-size: 13.5px;
}

.estudio-titulo { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.estudio-medidas { font-size: 12px; color: var(--secundario); }
/* Un aviso largo se parte en dos líneas dentro de su hueco en vez de bajar los botones a otra fila
   (eso cambiaría el alto de la Mesa de trabajo y la volvería a encajar). */
.estudio-seleccion { flex: 1 1 10em; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--acento); }
.estudio-seleccion[data-aviso] { color: var(--tinta); }
.estudio-hueco { flex: 1; }

/* Proyecto: Diseño nuevo, abrir y descargar; aviso discreto si no hay guardado automático. */
.estudio-proyecto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.estudio-guardado { font-size: 12px; color: var(--secundario); cursor: help; }
.estudio-guardado[hidden] { display: none; }

.estudio-accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 500 13px/1.2 var(--letra);
  cursor: pointer;
}
.estudio-accion:hover:not(:disabled) { border-color: var(--tinta); }
.estudio-accion:disabled { color: var(--secundario); opacity: 0.55; cursor: default; }
.estudio-accion svg,
.herramienta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Cuerpo: herramientas · escenario · paneles ---------- */
.estudio-cuerpo {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 268px;
  grid-template-rows: minmax(0, 1fr); /* los paneles se desplazan dentro, sin alargar la página */
  min-height: 0;
}

.estudio-herramientas {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 8px 6px;
  border-right: 1px solid var(--linea);
}

.herramienta {
  position: relative;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}
.herramienta:hover { background: var(--superficie); }
.herramienta[aria-pressed="true"] {
  background: var(--superficie);
  color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--linea);
}
/* Como en Illustrator: flecha llena para Selección, hueca para Selección directa. */
.herramienta[data-herramienta="seleccion"] svg path { fill: currentColor; }
.herramienta kbd {
  position: absolute;
  right: 3px;
  bottom: 2px;
  padding: 0;
  border: 0;
  font: 500 9px/1 var(--mono);
  color: var(--secundario);
}

.estudio-escenario {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--mesa);
  overflow: hidden;
}

.lienzo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
}

.lienzo .hoja {
  fill: var(--hoja);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.08)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.14));
}

.lienzo[data-herramienta="seleccion"],
.lienzo[data-herramienta="directa"] { cursor: default; }

/* Trazados: un trazo invisible y ancho para poder tocar líneas finas. */
.lienzo .trazado-toque {
  fill: none;
  stroke: transparent;
  stroke-width: 10;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
}

/* Puntos y manecillas de la pluma y la selección directa, en el acento. */
.lienzo .punto {
  fill: var(--hoja);
  stroke: var(--acento);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: move;
}
.lienzo .punto.elegido { fill: var(--acento); }
.lienzo .manecilla { fill: var(--acento); cursor: move; }
.lienzo .manecilla-linea {
  stroke: var(--acento);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.lienzo[data-herramienta="pluma"] .punto,
.lienzo[data-herramienta="pluma"] .manecilla { pointer-events: none; }
/* La Capa activa está oculta o bloqueada: las herramientas de dibujo no pueden dibujar. */
.lienzo[data-sin-dibujo]:not([data-herramienta="seleccion"]) { cursor: not-allowed; }

/* Caja de selección: líneas finas y asas en el acento, del mismo tamaño a cualquier zoom. */
.lienzo .seleccion-caja,
.lienzo .seleccion-forma,
.lienzo .seleccion-tallo,
.lienzo .marco {
  fill: none;
  stroke: var(--acento);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.lienzo .seleccion-forma { stroke-opacity: 0.55; }
.lienzo .marco { stroke-dasharray: 3 3; fill: var(--acento); fill-opacity: 0.06; }

.lienzo .asa {
  fill: var(--hoja);
  stroke: var(--acento);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.lienzo [data-asa="nw"], .lienzo [data-asa="se"] { cursor: nwse-resize; }
.lienzo [data-asa="ne"], .lienzo [data-asa="sw"] { cursor: nesw-resize; }
.lienzo [data-asa="n"], .lienzo [data-asa="s"] { cursor: ns-resize; }
.lienzo [data-asa="e"], .lienzo [data-asa="w"] { cursor: ew-resize; }
.lienzo [data-asa="rotar"] { cursor: grab; }

.lienzo .vista-previa {
  fill: none;
  stroke: var(--acento);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.estudio-puntero {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 12px;
  color: var(--secundario);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---------- Meta inferior: orientación, cuadrícula y zoom ---------- */
.estudio-meta {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.meta-grupo {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.meta-accion {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}
.meta-accion:hover,
.meta-zoom:hover { background: var(--superficie); }
.meta-accion[aria-pressed="true"] { color: var(--acento); background: var(--superficie); }
.meta-accion svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.meta-zoom {
  min-width: 56px;
  height: 26px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Desplazar con la Mano (H) o con Espacio. */
.lienzo[data-herramienta="mano"],
.lienzo[data-mano] { cursor: grab; }
.lienzo[data-desplazando] { cursor: grabbing; }

/* Cuadrícula en mm: finas, del mismo grosor a cualquier zoom. */
.lienzo .cuadricula { pointer-events: none; }
.lienzo .cuadricula path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1; }
.lienzo .cuadricula-10 { stroke: var(--secundario); stroke-opacity: 0.3; }
.lienzo .cuadricula-mm { stroke: var(--secundario); stroke-opacity: 0.12; display: none; }
.lienzo[data-cuadricula-fina] .cuadricula-mm { display: inline; }

/* ---------- Paneles ---------- */
.estudio-paneles {
  position: relative; /* lo oculto en posición absoluta se desplaza con los paneles, no alarga la página */
  border-left: 1px solid var(--linea);
  overflow: auto;
  font-size: 13px;
}

.panel {
  display: grid;
  gap: 10px;
  padding: 14px 14px 16px;
  border-bottom: 1px solid var(--linea);
}

.panel-titulo {
  font: 500 11.5px/1.2 var(--letra);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secundario);
}

.capas { margin: 0; padding: 0; list-style: none; }

/* Fila: ojo · candado · nombre · marca de selección · número de formas (dirección C). */
.capa {
  display: grid;
  grid-template-columns: 22px 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
}
.capa[aria-current] { background: var(--superficie); box-shadow: inset 2px 0 0 var(--acento); }

.capa-interruptor {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--secundario);
  cursor: pointer;
}
.capa-interruptor svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.capa-interruptor:hover { color: var(--tinta); }
/* El candado solo se ve si la Capa está bloqueada, o al pasar por encima. */
.capa-interruptor[aria-label="Bloqueada"][aria-pressed="false"] svg { opacity: 0; }
.capa-interruptor[aria-label="Bloqueada"][aria-pressed="false"]:hover svg,
.capa-interruptor[aria-label="Bloqueada"][aria-pressed="false"]:focus-visible svg { opacity: 0.45; }
.capa-interruptor[aria-pressed="true"][aria-label="Bloqueada"] { color: var(--tinta); }

.capa-nombre {
  min-width: 0;
  padding: 5px 4px;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.capa.oculta .capa-nombre { color: var(--secundario); }
.capa-campo {
  min-width: 0;
  padding: 3px 4px;
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: var(--hoja);
  color: #141414;
  font: inherit;
}
.capa-marca { width: 7px; height: 7px; background: var(--acento); }
.capa-marca[hidden] { display: none; }
.capa-cuenta { font: 11px var(--mono); color: var(--secundario); }

.capas-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--linea);
}
.capas-accion {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}
.capas-accion:hover:not(:disabled) { background: var(--superficie); }
.capas-accion:disabled { color: var(--secundario); opacity: 0.45; cursor: default; }
.capas-accion svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Pantallas estrechas: se puede abrir, sin paneles ---------- */
@media (max-width: 820px) {
  .estudio-cuerpo { grid-template-columns: 48px minmax(0, 1fr); }
  .estudio-paneles { display: none; }
  /* Solo el icono; el nombre sigue disponible para lectores de pantalla. */
  .estudio-accion span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Exportar (menú de la barra superior) ---------- */
.estudio-exportar { position: relative; }
.estudio-exportar [aria-expanded="true"] { border-color: var(--tinta); }
.estudio-exportar-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  display: grid;
  min-width: 220px;
  padding: 4px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.estudio-exportar-menu[hidden] { display: none; }
.estudio-exportar-menu button {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 500 13px/1.2 var(--letra);
  text-align: left;
  cursor: pointer;
}
.estudio-exportar-menu button:hover { background: var(--superficie); }
.estudio-exportar-menu small { font: 11.5px var(--mono); color: var(--secundario); }

/* ---------- Relleno (ninguno, color liso, Textura) y Trazo: panel-relleno.js ---------- */
.panel-campos {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.panel-campos:disabled { opacity: 0.5; }
.panel-campos .oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.panel-pista { margin: 0; font-size: 12px; color: var(--secundario); }
[data-panel-relleno]:not([data-sin-seleccion]) .panel-pista { display: none; }
.panel-subtitulo {
  margin: 4px 0 0;
  font: 500 11px/1.2 var(--letra);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secundario);
}

.relleno-modos { display: flex; align-items: center; gap: 4px; }
.relleno-modo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 500 12.5px/1.2 var(--letra);
  cursor: pointer;
}
.relleno-modo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.relleno-modo svg .lleno { fill: currentColor; fill-opacity: 0.25; }
.relleno-modo:hover:not(:disabled) { border-color: var(--tinta); }
.relleno-modo[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }

.panel-campos input[type="color"] {
  width: 30px;
  height: 26px;
  padding: 1px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--hoja);
  cursor: pointer;
}
.relleno-color { margin-left: auto; }

/* Pestañas Generadas / Fotos / Mías (dirección C). */
.textura-clases { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linea); border-radius: var(--radio); }
.textura-clases [role="tab"] {
  padding: 5px 4px;
  border: 0;
  background: transparent;
  color: var(--secundario);
  font: 500 12px/1.2 var(--letra);
  cursor: pointer;
}
.textura-clases [role="tab"] + [role="tab"] { border-left: 1px solid var(--linea); }
.textura-clases [aria-selected="true"] { background: var(--superficie); color: var(--tinta); }
.textura-clases [role="tab"]:disabled { cursor: default; opacity: 0.6; }

.muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px; }
.muestra {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--hoja);
  overflow: hidden;
  cursor: pointer;
}
.muestra svg { display: block; width: 100%; height: 100%; }
.muestra:hover:not(:disabled) { border-color: var(--tinta); }
.muestra[aria-pressed="true"] { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
/* Texturas generadas agrupadas por familia (Ligamentos, Cuadros, Estampados, Punto y otros). */
.muestras-familia { grid-column: 1 / -1; display: grid; gap: 4px; }
.muestras-familia + .muestras-familia { margin-top: 4px; }
.muestras-familia-titulo {
  margin: 0;
  font: 500 11px/1.2 var(--letra);
  color: var(--secundario);
}

/* Texturas fotográficas y subidas: miniaturas, créditos y subida (panel-relleno.js). */
[role="tabpanel"][hidden],
.campo[hidden],
.panel-nota[hidden] { display: none; }
.texturas-fotos,
.texturas-mias { display: grid; gap: 8px; }
.muestra img { display: block; width: 100%; height: 100%; object-fit: cover; }
.panel-nota { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--secundario); }
.panel-nota a { color: inherit; }
.panel-aviso { margin: 0; font-size: 12px; color: var(--tinta); }
.panel-aviso:empty { display: none; }
.creditos summary { font-size: 11.5px; color: var(--secundario); cursor: pointer; }
.creditos ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 3px; font-size: 11px; line-height: 1.35; color: var(--secundario); }
.creditos a { color: inherit; }
.subir-imagen {
  justify-self: start;
  padding: 5px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font: 500 12.5px/1.2 var(--letra);
  color: var(--tinta);
  cursor: pointer;
}
.subir-imagen:hover { border-color: var(--tinta); }
.subir-imagen:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.panel-campos:disabled .subir-imagen { cursor: default; }
/* Teñir fotos y subidas (#43). */
.campo-tinte { grid-template-columns: auto minmax(0, 1fr); }
.tinte-activo { display: inline-flex; align-items: center; gap: 6px; color: var(--secundario); cursor: pointer; }
.tinte-activo input { margin: 0; accent-color: var(--acento); }

.textura-ajustes { display: grid; gap: 8px; }
.textura-ajustes[hidden] { display: none; }
.campo {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.campo > span:first-child { color: var(--secundario); }
.campo input[type="range"] { width: 100%; min-width: 0; accent-color: var(--acento); }
.campo-valor { font-size: 11.5px; text-align: right; color: var(--tinta); }
.campo-colores { grid-template-columns: 52px minmax(0, 1fr); }
.textura-colores { display: flex; flex-wrap: wrap; gap: 8px; }
.campo-color { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--secundario); }

/* ---------- Reglas y guías (reglas.js) ---------- */
/* Reglas en mm arriba y a la izquierda; con ellas, la Mesa de trabajo deja su sitio. */
.estudio-escenario { --regla: 20px; --guia: #1f6f66; }
.regla,
.regla-esquina { display: none; }
.estudio-escenario[data-reglas] .lienzo {
  position: absolute;
  top: var(--regla);
  left: var(--regla);
  width: calc(100% - var(--regla));
  height: calc(100% - var(--regla));
}
.estudio-escenario[data-reglas] .regla,
.estudio-escenario[data-reglas] .regla-esquina {
  display: block;
  position: absolute;
  background: var(--fondo);
  touch-action: none;
  user-select: none;
}
.regla-horizontal { top: 0; left: var(--regla); width: calc(100% - var(--regla)); height: var(--regla); box-shadow: inset 0 -1px var(--linea); cursor: s-resize; }
.regla-vertical { top: var(--regla); left: 0; width: var(--regla); height: calc(100% - var(--regla)); box-shadow: inset -1px 0 var(--linea); cursor: e-resize; }
.regla-esquina { top: 0; left: 0; width: var(--regla); height: var(--regla); border: solid var(--linea); border-width: 0 1px 1px 0; box-sizing: border-box; }
.regla .regla-marcas { fill: none; stroke: var(--secundario); stroke-width: 1; }
.regla text { font: 9px/1 var(--mono); fill: var(--secundario); }
.regla .regla-puntero { stroke: var(--acento); stroke-width: 1; }
/* Soltar una guía sobre la regla la borra. */
.estudio-escenario[data-guia-fuera] .regla { background: var(--superficie); }

/* Guías en verde petróleo, finas a cualquier zoom; se cogen con las herramientas de selección. */
.lienzo .guia {
  stroke: var(--guia);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
  pointer-events: none;
}
.lienzo .elegida .guia { stroke-width: 2; }
.lienzo .guia-toque {
  stroke: transparent;
  stroke-width: 7;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.lienzo:is([data-herramienta="seleccion"], [data-herramienta="directa"]):not([data-guias-bloqueadas]) .guia-toque {
  pointer-events: stroke;
}
.lienzo [data-orientacion="horizontal"] .guia-toque { cursor: ns-resize; }
.lienzo [data-orientacion="vertical"] .guia-toque { cursor: ew-resize; }
.lienzo .guia-etiqueta {
  fill: var(--guia);
  font-family: var(--mono);
  paint-order: stroke;
  stroke: var(--fondo);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* ---------- Relleno con degradado (#56, editor-degradado.js) ---------- */
.relleno-modos { flex-wrap: wrap; }
.degradado { display: grid; gap: 8px; }
.degradado[hidden] { display: none; }
.degradado-clases { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--linea); border-radius: var(--radio); }
.degradado-clases button {
  padding: 5px 4px;
  border: 0;
  background: transparent;
  color: var(--secundario);
  font: 500 12px/1.2 var(--letra);
  cursor: pointer;
}
.degradado-clases button + button { border-left: 1px solid var(--linea); }
.degradado-clases [aria-pressed="true"] { background: var(--superficie); color: var(--tinta); }
/* Barra: el degradado sobre un damero (para ver la opacidad), con una asa por parada debajo. */
.degradado-barra {
  position: relative;
  height: 22px;
  margin: 0 7px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background:
    var(--degradado, transparent),
    repeating-conic-gradient(#d6d6d3 0% 25%, #ffffff 0% 50%) 0 0 / 10px 10px;
  cursor: copy;
}
.degradado-asa {
  position: absolute;
  top: 100%;
  width: 14px;
  height: 14px;
  margin: 2px 0 0 -7px;
  padding: 0;
  border: 2px solid var(--hoja);
  border-radius: 50%;
  background: var(--color-parada, #000000);
  box-shadow: 0 0 0 1px var(--tinta);
  cursor: ew-resize;
  touch-action: none;
}
.degradado-asa[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--acento); }
.degradado-parada { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.degradado-parada > span { width: 52px; color: var(--secundario); }
.degradado-boton {
  padding: 4px 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 500 12px/1.2 var(--letra);
  cursor: pointer;
}
.degradado-boton:hover:not(:disabled) { border-color: var(--tinta); }
.degradado-boton:disabled { cursor: default; opacity: 0.5; }

/* ---------- Reflejo (O): eje en el lienzo y cuadro «Reflejar» (herramienta-reflejo.js) ---------- */
.lienzo .eje-reflejo {
  fill: none;
  stroke: var(--acento);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.lienzo .eje-reflejo-linea { stroke-dasharray: 6 4; }
.dialogo-reflejo {
  min-width: 260px;
  padding: 18px 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: 13px/1.4 var(--letra);
}
.dialogo-reflejo::backdrop { background: rgba(0, 0, 0, 0.18); }
.dialogo-reflejo form { display: grid; gap: 14px; }
.dialogo-titulo { margin: 0; font: 500 15px/1.2 var(--letra); }
.dialogo-ejes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.dialogo-ejes legend { padding: 0 4px; font-size: 12px; color: var(--secundario); }
.dialogo-ejes label,
.dialogo-vista-previa { display: flex; align-items: center; gap: 8px; }
.dialogo-angulo input[type="number"] {
  width: 72px;
  padding: 3px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: inherit;
  font: 13px var(--mono);
}
.dialogo-botones { display: flex; gap: 8px; }
.dialogo-botones button {
  padding: 6px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 500 13px/1.2 var(--letra);
  cursor: pointer;
}
.dialogo-botones button:hover { border-color: var(--tinta); }
/* Como en Illustrator: «Copiar» a la izquierda; «Cancelar» y «OK» a la derecha. */
.dialogo-botones .dialogo-copiar { order: 1; margin-right: auto; }
.dialogo-botones .dialogo-cancelar { order: 2; }
.dialogo-botones .dialogo-ok { order: 3; border-color: var(--tinta); background: var(--tinta); color: var(--fondo); }