/* ==============================
   PANEL DEL EQUIPO DE ARTE — css/arte.css
   ==============================
   Usa las variables de css/inicio.css, que es donde vive el sistema de
   colores del sitio. Nada de colores sueltos acá. */

.arte-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 80px;
  font-family: var(--font-body);
  color: var(--texto, #e8edf2);
}

.arte-cabecera { margin-bottom: 28px; }

.arte-cabecera h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  margin: 0 0 8px;
}

.arte-cabecera p {
  margin: 0;
  opacity: .78;
  max-width: 62ch;
  line-height: 1.55;
}

/* ---------- aviso de acceso ---------- */

.arte-aviso {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 20px 22px;
  margin: 24px 0;
}
.arte-aviso.malo { border-left-color: var(--danger); }
.arte-aviso h2 { margin: 0 0 8px; font-size: 18px; font-family: var(--font-display); }
.arte-aviso p { margin: 0 0 6px; opacity: .8; line-height: 1.55; }

/* ---------- secciones ---------- */

.arte-seccion {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 24px;
}

.arte-seccion > h2 {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.arte-seccion > .arte-ayuda {
  margin: 0 0 18px;
  opacity: .72;
  font-size: 14px;
  line-height: 1.55;
  max-width: 68ch;
}

/* ---------- controles ---------- */

.arte-campo { display: flex; flex-direction: column; gap: 5px; }

.arte-campo label {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}

.arte-main select,
.arte-main input[type="text"],
.arte-main input[type="number"] {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: inherit;
  border-radius: 6px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 14px;
  min-width: 0;
  width: 100%;
}

.arte-main select:focus-visible,
.arte-main input:focus-visible,
.arte-main button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.arte-main input[type="file"] {
  color: inherit;
  font-family: inherit;
  font-size: 14px;
}

/* ---------- "aplicar a todas" ---------- */

.arte-comunes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
  background: var(--bg-panel-alt, rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin: 16px 0;
}

/* ---------- filas de subida ---------- */

.arte-fila {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.arte-fila-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.arte-fila-nombrearchivo {
  grid-column: 1 / -1;
  font-size: 12.5px;
  opacity: .65;
  word-break: break-all;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.arte-quitar {
  background: none;
  border: 0;
  color: var(--danger);
  cursor: pointer;
  font-size: 12.5px;
  padding: 0;
  flex: none;
}

/* ---------- previsualización sobre el personaje ---------- */

.arte-vista {
  position: relative;
  width: 96px;
  aspect-ratio: 327 / 504;
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  flex: none;
}

.arte-vista img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.arte-medidas { font-size: 11px; opacity: .6; margin-top: 4px; text-align: center; }
.arte-medidas.ojo { color: var(--gold); opacity: 1; }

/* ---------- resultados ---------- */

.arte-resultados { margin-top: 18px; display: grid; gap: 6px; }

.arte-resultado {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--control-bg);
  border-left: 3px solid var(--green);
}
.arte-resultado.malo { border-left-color: var(--danger); }
.arte-resultado .que { opacity: .65; word-break: break-all; }
.arte-resultado .dice { margin-left: auto; text-align: right; }

/* ---------- catálogo ---------- */

.arte-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.arte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.arte-tarjeta {
  background: var(--control-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.arte-tarjeta.retirada { opacity: .58; border-style: dashed; }

.arte-tarjeta .arte-vista { width: 100%; }

.arte-tarjeta .nom {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.arte-tarjeta .meta { font-size: 11.5px; opacity: .62; line-height: 1.45; }

.arte-etiqueta {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--chip-bg);
}
.arte-etiqueta.precio { color: var(--gold); }
/* La rareza, con el color de su marco en el Bazar (css/bazar.css). */
.arte-etiqueta.rareza-comun { color: #a3a7b0; }
.arte-etiqueta.rareza-rara { color: #5598e7; }
.arte-etiqueta.rareza-epica { color: #a78bfa; }
.arte-etiqueta.rareza-legendaria { color: #f0a92e; }
.arte-etiqueta.apagada { color: var(--danger); }

.arte-tarjeta button {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: inherit;
  border-radius: 6px;
  padding: 6px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  margin-top: auto;
}
.arte-tarjeta button:hover { background: var(--control-hover); }
.arte-tarjeta button[disabled] { opacity: .45; cursor: default; }

/* Editar y Retirar, lado a lado, al pie de la tarjeta. */
.arte-tarjeta-acciones { display: flex; gap: 6px; margin-top: auto; }
.arte-tarjeta-acciones[hidden] { display: none; }
.arte-tarjeta-acciones button { flex: 1; margin-top: 0; }
.arte-tarjeta button.primario { border-color: var(--gold); color: var(--gold); }

/* El formulario de editar, dentro de la propia tarjeta. */
.arte-edicion { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.arte-edicion input { width: 100%; box-sizing: border-box; }
.arte-edicion-error { margin: 0; font-size: 12px; color: var(--danger); }

.arte-vacio { opacity: .6; padding: 20px 0; }

.arte-contador { font-size: 12.5px; opacity: .6; font-weight: 400; }

@media (max-width: 560px) {
  .arte-fila { grid-template-columns: 72px 1fr; }
  .arte-vista { width: 72px; }
}

/* El personaje y la ranura a los que va a parar cada archivo. Va
   destacado porque equivocarse acá archiva el dibujo donde nadie lo
   busca: el editor solo enseña la ropa del personaje que uno lleva
   puesto, así que una prenda en el personaje equivocado es invisible. */
.arte-destino {
  color: var(--accent);
  font-weight: 600;
}

/* ==============================
   EL VESTIDOR
   ==============================
   El maniquí donde se prueban las prendas antes de publicarlas.
   Mismas variables que el resto del panel: nada de colores sueltos. */

.vest-barra {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 2;
}

.vest-barra .arte-campo { max-width: 180px; }
.vest-derecha { margin-left: auto; }

.vest-grupo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Los interruptores son botones con aria-pressed y NO casillas: la regla
   de los controles de arriba lleva width:100% y padding 7px 9px, y un
   input[type=checkbox] ahí sale como una caja deforme del ancho de la
   columna. Las pocas casillas que hay llevan su propia regla, más abajo. */
.vest-tecla {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: inherit;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.vest-tecla:hover:not(:disabled) { background: var(--control-hover); }
.vest-tecla:disabled { opacity: .45; cursor: default; }
.vest-tecla[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--chip-bg);
}

.vest-dato {
  font-size: 12.5px;
  opacity: .75;
  margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
}

.vest-titulo {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 10px;
}

.vest-vacio {
  font-size: 13px;
  opacity: .6;
  line-height: 1.5;
  margin: 0;
}

/* ---------- la disposición ---------- */

.vest-panel {
  display: grid;
  /* minmax(0, ...) y no 290px a secas: una pista de rejilla tiene por
     mínimo automático el min-content de lo que lleva, así que un
     <select> ancho o un dibujo a escala la empujaban y la columna se
     salía. Con el 0 delante, manda la columna y no su contenido. */
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 320px);
  gap: 18px;
  align-items: start;
}

/* El overflow-x va DICHO. Si se deja en visible mientras el otro eje
   es auto, el CSS lo convierte en auto por su cuenta y aparece la barra
   horizontal en cuanto algo sobresale un píxel. Acá abajo, además, se
   arregla lo que sobresalía; esto es la red. */
.vest-rail {
  min-width: 0;
  max-height: 72vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

.vest-escena {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Un solo punto de quiebre para tableta y móvil: se apila, el escenario
   sube al principio y los raíles dejan de tener scroll propio. */
@media (max-width: 1180px) {
  .vest-panel { grid-template-columns: 1fr; }
  .vest-rail { max-height: none; overflow: visible; }
  .vest-escena { order: -1; }
}

/* ---------- el escenario ---------- */

.vest-marco {
  width: calc(327px * var(--vest-zoom, 1));
  height: calc(504px * var(--vest-zoom, 1));
  flex-shrink: 0;
}

/* LA CAJA CLAVADA. 327x504 px de CSS, sin aspect-ratio y sin porcentajes:
   dentro de acá, un píxel de CSS es un píxel del PNG que se va a subir, y
   pasar de coordenadas del ratón a píxeles del dibujo es dividir por el
   zoom y nada más.

   Si en vez de esto se usara un ancho en porcentaje -como hace
   .preview-capas del editor de perfil-, cada una de las 15 capas
   resolvería su porcentaje y redondearía a píxel de dispositivo por su
   cuenta, y dos capas podrían quedar a subpíxeles una de otra. Con la
   caja clavada y un único transform:scale, toda la pila comparte una sola
   matriz y no puede desincronizarse a ningún zoom.

   Y el 504, no el 505: el editor de perfil usa aspect-ratio 327/505 en
   cuatro sitios, pero la medida de la mayoría del catálogo es 327x504 y
   es la que este panel usa desde siempre (LIENZO, en js/arte.js). Copiar
   el 505 falsearía en un 0,2 % justo la cifra que el artista se lleva a
   su programa de dibujo. */
#vestLienzo {
  position: relative;
  width: 327px;
  height: 504px;
  transform: scale(var(--vest-zoom, 1));
  transform-origin: top left;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
  border: 1px solid var(--line);
  border-radius: 4px;
  background-color: var(--control-bg);
  background-image:
    repeating-conic-gradient(rgba(255, 255, 255, .06) 0% 25%, transparent 0% 50%);
  background-size: 16px 16px;
}

#vestLienzo.vest-arrastrando { cursor: grabbing; }

/* Fuera del paso de colocar el lienzo es para mirar. Sin esto seguiría
   ofreciendo la mano de agarrar sobre algo que ya no se mueve. */
#vestLienzo.vest-quieto { cursor: default; }

/* A partir de 2x se cuentan los píxeles en vez de mirar una mancha
   interpolada, que es justo lo que hace falta para decidir si sobra uno. */
#vestLienzo.vest-nitido img { image-rendering: pixelated; }

/* Encontrar un borde blanco sobre fondo blanco es media hora perdida. */
#vestLienzo.vest-fondo-blanco { background-color: #fff; background-image: none; }
#vestLienzo.vest-fondo-negro { background-color: #000; background-image: none; }
#vestLienzo.vest-fondo-magenta { background-color: #f0f; background-image: none; }

/* object-fit:fill y no contain: el rectángulo que calcula la ZONA A YA es
   el encaje cuando toca serlo, y dejar que el navegador lo aplique otra
   vez lo aplicaría dos veces. */
.vest-capa {
  position: absolute;
  object-fit: fill;
  pointer-events: none;
}

.vest-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vest-recuadro {
  position: absolute;
  border: 1px dashed var(--accent);
  pointer-events: none;
}

/* ---------- los números ---------- */

.vest-numeros {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
  width: 100%;
  max-width: 340px;
}
.vest-numeros .arte-campo { width: 74px; }

.vest-casilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding-bottom: 7px;
}

/* Las casillas NO entran en la regla de los controles de arriba: ahí
   saldrían con width:100% y padding, o sea deformes. */
.vest-check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin: 0;
}

.vest-instruccion {
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 44ch;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
  opacity: .85;
}

/* ---------- el rail de prendas en prueba ---------- */

.vest-prueba {
  display: grid;
  grid-template-columns: minmax(0, auto) 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bg-panel-alt);
}
.vest-prueba.vest-activa { border-color: var(--accent); }
.vest-prueba.vest-rota { border-color: var(--danger); }

.vest-prueba img {
  width: 48px;
  height: 74px;
  object-fit: contain;
  background: var(--control-bg);
  border-radius: 4px;
}

.vest-prueba .nom {
  font-size: 12.5px;
  font-weight: 600;
  word-break: break-word;
}

.vest-chip {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--chip-bg);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.vest-chip.ojo { background: var(--gold); color: #1a1205; }
.vest-chip.mala { background: var(--danger); color: #fff; }

/* ---------- el guardarropa ---------- */

.vest-ranuras {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.vest-ranura {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: inherit;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.vest-ranura[aria-pressed="true"] { border-color: var(--accent); background: var(--chip-bg); }
.vest-ranura.ocupada { font-weight: 700; }
.vest-ranura:disabled { opacity: .45; cursor: default; }

.vest-buscar {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: inherit;
  border-radius: 6px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  margin-bottom: 10px;
}

.vest-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.vest-opcion {
  background: var(--control-bg);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  color: inherit;
  text-align: center;
}
.vest-opcion:hover { border-color: var(--control-hover); }
.vest-opcion[aria-pressed="true"] { border-color: var(--accent); }

.vest-opcion img {
  width: 100%;
  aspect-ratio: 327 / 504;
  object-fit: contain;
  display: block;
  background-color: var(--bg-deep);
}

.vest-opcion span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .8;
}

/* ---------- el pie ---------- */

.vest-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.vest-pie .arte-aviso { width: 100%; margin: 0 0 8px; }

/* Mientras se arrastra un PNG por encima de la sección. */
#arteVestidor.vest-soltando { border-color: var(--accent); }

/* ==============================
   EL TALLER
   ==============================
   Los seis pasos, encima del maniquí que ya existía. Sólo lo que el
   vestidor libre no necesitaba. */

/* ---------- el carril de pasos ---------- */

.taller-carril {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0 4px;
}

.taller-hito {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 2px 4px;
  font-family: inherit;
  cursor: pointer;
}
.taller-hito:disabled { cursor: default; }

.taller-bolita {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--control-bg);
  flex-shrink: 0;
}
.taller-hito[aria-current="step"] { color: var(--texto, #e8edf2); }
.taller-hito[aria-current="step"] .taller-bolita {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.taller-hito.hecho .taller-bolita {
  background: var(--chip-bg);
  border-color: var(--green);
  color: var(--green);
}
.taller-raya { width: 22px; height: 1px; background: var(--line); }

/* ---------- el paso 1: personajes y plantillas ---------- */

.taller-personajes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.taller-personaje {
  background: var(--control-bg);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 10px 6px;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.taller-personaje:hover { border-color: var(--control-hover); }
.taller-personaje[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--chip-bg);
}
.taller-personaje .nom {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.taller-personaje .cuantas { font-size: 10.5px; opacity: .55; margin-top: 2px; }

.taller-plantilla {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  padding-left: 12px;
}

.taller-descarga {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 7px;
  line-height: 1.4;
}
.taller-descarga .que { display: block; font-weight: 700; font-size: 13px; }
.taller-descarga .como { display: block; font-size: 11.5px; opacity: .65; }

/* ---------- el paso 2: traer ---------- */

.taller-soltar {
  border: 1px dashed var(--line-hover);
  border-radius: 10px;
  padding: 22px 16px;
  text-align: center;
  margin-bottom: 12px;
}
.taller-soltar.encima { border-color: var(--accent); background: var(--chip-bg); }
.taller-soltar-texto { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.taller-soltar input[type="file"] { margin-top: 10px; font-size: 12.5px; }

/* El dibujo del archivo contra el lienzo, a escala. Es el aviso que de
   verdad se entiende: cinco de cinco prendas subidas por el panel
   llegaron con otro lienzo, y un numero en una linea no lo evito. */
.taller-comparar {
  display: flex;
  align-items: flex-end;
  /* Las dos cajas suman hasta 14+45+18+260+14 = 351 px dentro de un
     rail de 320: se salían siempre que un archivo no medía el lienzo,
     que según la historia del panel es casi siempre. El JS ya las
     dibuja al ancho que quepa; esto las apila si aún así no caben. */
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--warning-bg, rgba(240, 180, 41, .10));
}
.taller-caja { border: 2px solid; border-radius: 2px; }
.taller-caja.lienzo { border-color: var(--green); background: rgba(53, 212, 136, .10); }
.taller-caja.archivo { border-color: var(--gold); background: rgba(240, 180, 41, .10); }
.taller-comparar figcaption { font-size: 10.5px; opacity: .65; margin-top: 6px; text-align: center; }

/* ---------- el paso 3: fichar ---------- */

.taller-comunes {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.taller-comunes select { width: auto; min-width: 110px; }

.taller-ficha {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--bg-panel-alt);
  cursor: pointer;
}
.taller-ficha.elegida { border-color: var(--accent); background: var(--chip-bg); }
.taller-ficha.avisa { border-color: var(--gold); }
.taller-ficha .arch {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taller-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

/* ---------- el paso 4: los mandos ---------- */

.taller-mandos {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* La cruceta es el control preciso de verdad en el telefono, donde el
   dedo no acierta un pixel, y en el ordenador resulta mas comodo que el
   teclado para mucha gente. 44 px es el minimo para tocar con el dedo. */
.taller-cruceta {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-auto-rows: 44px;
  gap: 4px;
}

.taller-flecha {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: inherit;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.taller-flecha:hover { background: var(--control-hover); border-color: var(--accent); }
.taller-flecha:active { background: var(--chip-bg); }

.taller-cruceta .vest-dato {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 11px;
  opacity: .45;
}

.taller-finos {
  flex: 1;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.taller-finos input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  height: 30px;
}

/* ---------- el paso 5: la rejilla de conjuntos ---------- */

.taller-conjuntos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}

.taller-conjunto {
  position: relative;
  width: 100%;
  aspect-ratio: 327 / 504;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}
.taller-conjunto img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ---------- el paso 6: el resumen ---------- */

.taller-linea {
  display: grid;
  grid-template-columns: minmax(0, auto) 34px minmax(0, 1fr) minmax(0, auto);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 7px;
  background: var(--bg-panel-alt);
  font-size: 12.5px;
}
.taller-linea img { width: 34px; height: 52px; object-fit: contain; }
.taller-linea .sera { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .7; }

/* ---------- la barra de abajo ---------- */

.taller-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.taller-nav .vest-dato { margin: 0; margin-right: auto; }

.taller-primario {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 9px 18px;
  font-size: 14px;
}
.taller-primario:hover:not(:disabled) { background: var(--accent-color); }
.taller-primario:disabled { opacity: .4; }

/* Lo de "publicar tal cual" va deliberadamente pequeño y sin caja: la
   idea es que se use el lienzo, no que las dos salidas pesen igual. */
.taller-secundario {
  background: none;
  border: 0;
  padding: 4px 2px;
  font-size: 11.5px;
  opacity: .7;
  text-decoration: underline;
  cursor: pointer;
}
.taller-secundario:hover { opacity: 1; color: var(--accent-soft, #c084fc); }

/* ---------- telefono ---------- */
/* El maniqui cabe a tamaño real: 327 px entran en los 343 utiles de un
   movil de 375. En el paso de colocar eso significa que un pixel de la
   pantalla es un pixel del PNG. En el resto se encoge para dejar sitio. */

@media (max-width: 1180px) {
  .taller-carril { gap: 5px; }
  .taller-hito span:not(.taller-bolita) { display: none; }
  .taller-raya { width: 10px; }
  .taller-hito[aria-current="step"] span:not(.taller-bolita) { display: inline; }
}

@media (max-width: 720px) {
  .vest-escena { position: sticky; top: 0; z-index: 3; background: var(--bg-panel); padding-bottom: 8px; }
  .vest-marco { transform: scale(.62); transform-origin: top center; height: 313px; }
  .vest-escena.a-tamano .vest-marco { transform: none; height: auto; }
  .taller-cruceta { grid-template-columns: repeat(3, 56px); grid-auto-rows: 50px; }
  .taller-nav { position: sticky; bottom: 0; background: var(--bg-panel); padding-bottom: 10px; }
  .taller-nav .vest-dato { flex-basis: 100%; margin-right: 0; }
  .taller-campos { grid-template-columns: 1fr; }
}

/* ==============================
   EL TALLER COMO PAGINA
   ==============================
   Dentro de arte.html el taller nunca iba a verse como se diseno: le
   sobraban encima una navbar, un titulo, un parrafo de ayuda y el
   formulario viejo. En su propia pagina el alto entero es suyo, que es lo
   que necesitan el maniqui a tamano real y las tres columnas. */

body.taller-pagina {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-base);
  color: var(--texto, #e8edf2);
  font-family: var(--font-body);
}

.taller-barra-sitio {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--navbar-bg);
}
.taller-barra-sitio .nav-logo { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.taller-barra-sitio .nav-logo img { height: 24px; width: auto; }
.taller-titulo { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0; }

body.taller-pagina > .arte-aviso { margin: 24px; }

.taller-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 24px 18px;
}

.taller-pagina #vestPanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Las tres columnas se comen el alto que queda, y cada rail rueda por su
   cuenta: el maniqui no se va de la pantalla al bajar por la cola. */
.taller-pagina .vest-panel {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.taller-pagina .vest-rail { max-height: none; overflow-y: auto; overflow-x: hidden; }
.taller-pagina .vest-escena { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }

/* ---------- que nada se salga de su columna ---------- */

/* Las barras horizontales del taller no salían de un sitio: salían de
   varios, y todos son controles o dibujos que traen su propio ancho y no
   lo sueltan por su cuenta.

   La más dura es el <input type="file">. Un file mide lo que mide su
   texto -en español, «Seleccionar archivos · Ningún archivo seleccionado»
   pasa de 350 px- y no se encoge por nada. En un rail de 320 se salía
   siempre, en el paso 2, que es por donde pasa todo el mundo.

   Y en esta página no había NADA que estilara los controles: las reglas
   compartidas cuelgan de .arte-main, que es la clase de arte.html, y el
   taller usa .taller-main. Así que cada select y cada input salían con su
   ancho de fábrica. */
.taller-pagina select,
.taller-pagina input[type="text"],
.taller-pagina input[type="number"],
.taller-pagina input[type="file"] { max-width: 100%; }

.taller-soltar input[type="file"] { width: 100%; }

/* Un nombre de archivo no trae espacios donde partir: sin esto, un
   «Captura_de_pantalla_2026_09_15_113043.png» estira lo que lo lleve. */
.taller-comparar figcaption,
.taller-descarga .que,
.taller-descarga .como { overflow-wrap: anywhere; }

.taller-comparar figure { min-width: 0; max-width: 100%; margin: 0; }
.taller-caja { max-width: 100%; }
.taller-pagina .vest-barra { position: static; padding-top: 4px; }
.taller-pagina .taller-nav { flex-shrink: 0; }

@media (max-width: 720px) {
  /* En el teléfono la página entera rueda, así que los raíles dejan de
     tener scroll propio. Pero «visible» a secas devolvía la barra
     horizontal: clip en un eje y visible en el otro es la única pareja
     que el CSS NO convierte en auto, así que corta de ancho sin volver a
     convertir la caja en un contenedor con scroll. */
  body.taller-pagina {
    height: auto;
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: visible;
  }
  .taller-main { padding: 0 16px 16px; }
  .taller-pagina .vest-rail,
  .taller-pagina .vest-escena { overflow-x: clip; overflow-y: visible; }
}

/* La invitacion que queda en arte.html en lugar del taller. */
.taller-invitacion { border-left: 3px solid var(--accent); }
.taller-invitacion .boton { margin-top: 6px; display: inline-block; }