/* ---------- Panel Muestras del Estudio de diseño (#128, panel-muestras.js) ---------- */
/* La paleta del Diseño, armonías, revisión del daltonismo y variaciones de color, y sus cuadros
   (dialogos-color.js). Usa los tokens de /comun/taller.css, que ya cambian en modo oscuro: los
   colores de las muestras son del Diseño y se ven igual en claro y en oscuro, con un filete. */

.paleta select,
.paleta input[type="text"] {
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: 400 13px/1.3 var(--letra);
}
.paleta input[type="color"] {
  flex: none;
  width: 30px;
  height: 26px;
  padding: 1px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--hoja);
  cursor: pointer;
}
.paleta .degradado-boton { white-space: nowrap; }

/* Muestras: cuadros grandes del color, en rejilla. La elegida lleva el anillo de la nota verde. */
.paleta-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.paleta[data-sin-muestras] .paleta-lista { display: none; }
.paleta-muestra {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--muestra);
  /* Un filete claro por dentro: un blanco o un negro se ven en los dos modos. */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
  cursor: pointer;
}
.paleta-muestra:hover { border-color: var(--tinta); }
.paleta-muestra[aria-pressed="true"] { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.paleta-muestra:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.paleta-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
}
.paleta-fila > span:first-child { flex: none; width: 52px; color: var(--secundario); }
.paleta-fila > select,
.paleta-fila > input[type="text"] { flex: 1; }
.paleta-anadir { flex-wrap: wrap; }
.paleta-anadir > select { flex: 1 1 120px; }
.paleta-valores { font-size: 11.5px; line-height: 1.35; color: var(--secundario); white-space: pre-line; }

.paleta-aplicar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--secundario); }
.paleta-aplicar > span { margin-right: auto; white-space: nowrap; }
.paleta[data-sin-muestras] .paleta-aplicar { display: none; }
.paleta .degradado-boton[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }

.paleta-edicion,
.paleta-variacion {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}
.paleta-edicion[hidden],
.paleta-variacion[hidden] { display: none; }
.paleta-botones { display: flex; flex-wrap: wrap; gap: 4px; }

/* Tiras de colores: armonía, variaciones y comparación. */
.paleta-tiras {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.paleta-tira {
  flex: 1;
  min-width: 0;
  height: 22px;
  border: 1px solid var(--linea);
  border-radius: 1px;
}
.paleta-tiras-pequenas .paleta-tira { height: 12px; }

.paleta-variaciones { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.paleta-variacion-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 500 12.5px/1.2 var(--letra);
  text-align: left;
  cursor: pointer;
}
.paleta-variacion-fila:hover { border-color: var(--tinta); }
.paleta-variacion-fila[aria-pressed="true"] { border-color: var(--acento); box-shadow: inset 2px 0 0 var(--acento); }
.paleta-variacion-nombre { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.paleta-variacion-colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.paleta-variacion-color { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; color: var(--secundario); }
.paleta-variacion-color span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Aviso de la vista simulada, abajo a la izquierda de la Mesa de trabajo. */
.vision-aviso {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: 500 12.5px/1.3 var(--letra);
}
.estudio-escenario[data-reglas] .vision-aviso { left: calc(var(--regla) + 8px); }
.vision-aviso[hidden] { display: none; }

/* ---------- Cuadros: comparar variaciones y carta de color (dialogos-color.js) ---------- */
/* Sobre el marco común de los diálogos (/comun/taller.css, .dialogo .dialogo-amplio). */
.dialogo-color { --dialogo-ancho: 1100px; max-height: calc(100dvh - 32px); }
.dialogo-color[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.dialogo-color-cabecera { justify-content: flex-start; border-bottom: 1px solid var(--linea); padding-bottom: 14px; }
.dialogo-color-cabecera .dialogo-cerrar { margin-left: auto; }

.comparar-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 16px;
  overflow: auto;
  list-style: none;
}
.comparar-ficha { display: grid; gap: 8px; align-content: start; }
.comparar-ficha figure { display: grid; gap: 8px; margin: 0; }
/* La hoja de cada variación es papel blanco, como la Mesa de trabajo, también en modo oscuro. */
.comparar-ficha img { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: contain; background: #fff; border: 1px solid var(--linea); }
.comparar-ficha figcaption { display: grid; gap: 6px; }
.comparar-nombre { font-weight: 500; }
.comparar-ficha > .dialogo-boton { justify-self: start; }

.dialogo-carta { --dialogo-ancho: 720px; }
.carta-hoja { overflow: auto; padding: 16px; background: var(--mesa, #e9e9e6); }
.carta-hoja svg { display: block; width: 100%; height: auto; max-width: 600px; margin: 0 auto; box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); }

/* Imprimir la carta: solo su hoja, a lo ancho de la página. */
@page carta-de-color { size: A4 portrait; margin: 0; }
@media print {
  body[data-imprimiendo-carta] { height: auto; overflow: visible; }
  body[data-imprimiendo-carta] > :not(.estudio),
  body[data-imprimiendo-carta] .estudio > :not(.dialogo-carta) { display: none !important; }
  body[data-imprimiendo-carta] .dialogo-carta {
    position: static;
    inset: 0 auto auto 0;
    width: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    display: block;
  }
  body[data-imprimiendo-carta] .dialogo-carta::backdrop { display: none; }
  body[data-imprimiendo-carta] .dialogo-color-cabecera,
  body[data-imprimiendo-carta] .dialogo-carta .dialogo-botones { display: none; }
  body[data-imprimiendo-carta] .carta-hoja { padding: 0; background: none; overflow: visible; }
  body[data-imprimiendo-carta] .carta-hoja svg { max-width: none; box-shadow: none; }
  /* Con nombre: el A4 vertical sin márgenes es solo de la carta (la ficha técnica imprime en horizontal). */
  body[data-imprimiendo-carta] { page: carta-de-color; }
}