/*
  Tamaño del Diseño (#130): «Diseño nuevo» y «Tamaño de la Mesa de trabajo» (dialogo-tamano.js),
  el botón de las medidas de la barra superior y las opciones del PNG en el menú Exportar.
  El marco del diálogo es el común de /comun/taller.css («Diálogos», #124); aquí, lo propio del tamaño.
*/

/* Las medidas de la barra son un botón: abren el tamaño de la Mesa de trabajo. */
button.estudio-medidas {
  padding: 2px 6px;
  margin: 0 -6px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: transparent;
  font: 12px var(--letra);
  font-variant-numeric: tabular-nums;
  color: var(--secundario);
  cursor: pointer;
}
button.estudio-medidas:hover { border-color: var(--linea); color: var(--tinta); }

/* Las opciones del PNG que no son del perfil del Diseño se ocultan. */
.exportar-caras[hidden] { display: none; }

/* ---------- Tamaño ---------- */
.dialogo-tamano { --dialogo-ancho: 720px; }
.dialogo-tamano .dialogo-nota:empty { display: none; }
.dialogo-tamano .dialogo-principal:disabled { opacity: 0.45; cursor: default; }
/* Los botones siempre a la vista, aunque el cuerpo se desplace (en el móvil). */
.dialogo-tamano .dialogo-botones { position: sticky; bottom: 0; background: var(--fondo); }

.tamano-nombre { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.tamano-unidades { display: grid; gap: 4px; }
.tamano-nombre[hidden] { display: none; }
.tamano-nombre span, .tamano-unidades span { color: var(--secundario); font-size: 12px; }
.tamano-unidades select { justify-self: start; }

/* Perfil: dos pestañas grandes, como los perfiles de Archivo > Nuevo. */
.tamano-perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tamano-perfil { position: relative; cursor: pointer; }
/* El radio cubre toda la tarjeta, invisible: el clic en cualquier punto lo marca. */
.tamano-perfil input, .tamano-formato input, .tamano-icono input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.tamano-perfil > span {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.tamano-perfil strong { font-weight: 500; }
.tamano-perfil small { font-size: 12px; color: var(--secundario); }
.tamano-perfil:hover > span { border-color: var(--secundario); }
.tamano-perfil input:checked + span { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.tamano-perfil input:focus-visible + span { outline: 2px solid var(--foco, var(--acento)); outline-offset: 2px; }

.tamano-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; align-items: start; }

/* Formatos: tarjetas con la proporción dibujada. */
.tamano-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.tamano-formato {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
}
.tamano-formato:hover { border-color: var(--secundario); }
.tamano-formato:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.tamano-formato:has(input:focus-visible) { outline: 2px solid var(--foco, var(--acento)); outline-offset: 2px; }
.tamano-formato svg { width: 24px; height: 24px; }
.tamano-formato rect { fill: var(--fondo); stroke: var(--secundario); stroke-width: 1.2; }
.tamano-formato:has(input:checked) rect { stroke: var(--acento); }
.tamano-formato span { display: grid; min-width: 0; }
.tamano-formato strong { font-weight: 500; font-size: 12.5px; line-height: 1.2; }
.tamano-formato small { font-size: 11px; color: var(--secundario); white-space: nowrap; }

.tamano-principal, .tamano-lado { display: grid; gap: 10px; align-content: start; min-width: 0; }
.tamano-error { color: var(--tinta); }

/* Vista previa de la proporción. */
.tamano-vista-previa { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 8px; border-radius: var(--radio); background: var(--superficie); }
.tamano-vista-previa svg { width: 120px; height: 120px; }
.tamano-vista-previa rect { fill: var(--fondo); stroke: var(--tinta); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tamano-vista-previa figcaption { font-size: 12px; color: var(--secundario); text-align: center; }

.tamano-medidas { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.tamano-medidas label { display: contents; }
.tamano-medidas label span { font-size: 12px; color: var(--secundario); }

.tamano-orientacion { grid-template-columns: 1fr 1fr; }
.dialogo-tamano .tamano-icono {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-size: 12px;
  cursor: pointer;
}
.tamano-icono:has(input:checked) { border-color: var(--acento); color: var(--acento); }
.tamano-icono:has(input:focus-visible) { outline: 2px solid var(--foco, var(--acento)); outline-offset: 2px; }
.dialogo-tamano .tamano-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (max-width: 640px) {
  .tamano-cuerpo { grid-template-columns: 1fr; }
  .tamano-vista-previa svg { width: 80px; height: 80px; }
}