/*
  Diseñadores (#173): /recursos/disenadores/. Usa los tokens de /comun/taller.css.
  Todo en papel, sin fondos de color (#160). Cada ficha es un .cobra: al pasar el ratón, con el
  foco dentro o (sin ratón) al aparecer en pantalla, el boceto cobra color pieza a pieza y el nombre
  se rellena del tono de Recursos en peso 500 (.relleno-tono). En escritorio, casillas grandes en
  columnas con el boceto arriba (como las de la portada, #167); en el móvil, una lista con el
  boceto pequeño al lado del texto (como la lista de Lecciones).
*/

/* ---------- Filtro por grupo y por época (#178) ----------
   Los botones son los del Glosario (.r-filtro, en /recursos/recursos.css). Las fichas que no
   cumplen el filtro llevan [hidden]; las columnas se cuentan solo entre las que se ven. */
.d-controles { margin-bottom: 0; border-bottom: 0; }
.d-ficha[hidden], .d-grupo[hidden], .d-indice-grupo[hidden], .d-indice li[hidden] { display: none; }

/* ---------- Índice de nombres ---------- */
.d-indice {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px;
  padding-block: 20px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.d-indice ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.d-indice a { color: var(--tinta); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.d-indice a:hover { text-decoration-thickness: 2px; }
.d-rotulo { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secundario); }

/* ---------- Grupos ---------- */
.d-grupo { scroll-margin-top: 72px; }
.d-grupo h2 {
  padding: 56px 0 6px;
  font: 300 clamp(36px, 4vw, 64px)/1 var(--letra); letter-spacing: -0.03em;
  color: var(--tinta); border-bottom: 1px solid var(--tinta);
}
.d-grupo-bajada { padding-top: 12px; max-width: 46em; color: var(--secundario); }

/* ---------- Fichas: casillas grandes ---------- */
.d-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.d-ficha {
  display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 20px;
  padding: 28px clamp(16px, 2vw, 32px) 40px; border-top: 1px solid var(--linea);
  scroll-margin-top: 72px;
}
.d-ficha:nth-child(3n + 2 of :not([hidden])), .d-ficha:nth-child(3n + 3 of :not([hidden])) { border-left: 1px solid var(--linea); }
.d-ficha:nth-child(3n + 1 of :not([hidden])) { padding-left: 0; }
.d-ficha:nth-child(3n of :not([hidden])) { padding-right: 0; }
.d-ficha:target .d-nombre { text-decoration: underline var(--acento) 2px; text-underline-offset: 6px; }

.d-boceto { margin: 0; display: grid; justify-items: center; gap: 10px; }
.d-boceto .boceto { width: 100%; max-width: 280px; height: auto; overflow: visible; }
.d-prenda { display: grid; justify-items: center; gap: 2px; text-align: center; }
.d-prenda-nombre { font-size: 16px; color: var(--tinta); }
.d-prenda-ano { font-size: 13px; color: var(--secundario); font-variant-numeric: tabular-nums; }

.d-texto { display: grid; align-content: start; gap: 10px; }
.d-num { font-size: 13px; letter-spacing: .12em; color: var(--secundario); font-variant-numeric: tabular-nums; }
.d-nombre { font: 300 clamp(28px, 2.6vw, 40px)/1.05 var(--letra); letter-spacing: -0.03em; }
.d-datos { font-size: 14px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.d-frases, .d-aporte, .d-glosario { max-width: 46ch; line-height: 1.55; }
.d-aporte .d-rotulo, .d-glosario .d-rotulo { margin-right: 4px; }
.d-glosario { font-size: 14.5px; color: var(--secundario); }
.d-glosario a { color: var(--tinta); text-underline-offset: 3px; }
.d-dibujar {
  justify-self: start; margin-top: 6px; color: var(--tinta);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.d-dibujar:hover, .d-dibujar:focus-visible { text-decoration-thickness: 2px; }

/* Los estilos de la línea del boceto (.boceto) están en /recursos/recursos.css: también los usa
   la casilla de la portada de Recursos. */

/* Con el foco del teclado dentro de la ficha («Dibujar sobre este boceto», un término), también
   cobra color: el .cobra común solo mira el foco de la propia casilla. */
.d-ficha:focus-within .cobra-tinte { fill: var(--tinte); }
.d-ficha:focus-within .cobra-aparece { opacity: 1; }
.d-ficha:focus-within .relleno-tono { background-position: 0 0; font-weight: 500; }

/* ---------- Tableta: dos columnas ---------- */
@media (max-width: 1100px) {
  .d-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-ficha:nth-child(n of :not([hidden])) { padding: 28px clamp(16px, 2vw, 32px) 40px; border-left: 0; }
  .d-ficha:nth-child(2n of :not([hidden])) { border-left: 1px solid var(--linea); padding-right: 0; }
  .d-ficha:nth-child(2n + 1 of :not([hidden])) { padding-left: 0; }
}

/* ---------- Móvil: lista con el boceto al lado ---------- */
@media (max-width: 700px) {
  .d-indice { grid-template-columns: minmax(0, 1fr); }
  .d-fichas { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .d-ficha:nth-child(n of :not([hidden])) {
    grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto; gap: 0 16px;
    padding: 20px 0 24px; border-left: 0;
  }
  .d-boceto { align-self: start; }
  .d-boceto .boceto { max-width: 96px; }
  .d-prenda { justify-items: start; text-align: left; }
  .d-prenda .d-rotulo { display: none; }
  .d-prenda-nombre { font-size: 13px; line-height: 1.3; }
  .d-prenda-ano { font-size: 12px; }
  .d-nombre { font-size: 24px; }
  .d-frases, .d-aporte { font-size: 15.5px; }
}

@media print {
  .d-indice, .d-acciones { display: none; }
  .d-ficha { break-inside: avoid; }
}

/* ---------- «Ver cómo se hace, paso a paso» (#179) ----------
   El botón de la ficha, junto a «Dibujar sobre este boceto», y el diálogo que abre
   (recursos/disenadores/paso-a-paso.js): el boceto a la izquierda, dibujándose paso a paso, y a la
   derecha el texto del paso y los controles, como el reproductor de las Lecciones. En el móvil, a
   pantalla completa, con el boceto arriba. Cada trazo lleva su paso (data-paso) y su estado
   (data-estado): «hecho» (completo), «ahora» (se dibuja) y «luego» (aún no se ve). */
.d-acciones { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: 6px; }
.d-acciones .d-dibujar { margin-top: 0; }
.d-como {
  padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.d-como:hover, .d-como:focus-visible { text-decoration-thickness: 2px; }

.pasos { --dialogo-ancho: 1000px; font-size: 15px; }
.pasos[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pasos-cabecera { align-items: flex-start; padding: 18px 24px 12px; border-bottom: 1px solid var(--linea); }
.pasos-titulos { display: grid; gap: 4px; }
.pasos-rotulo { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secundario); }
.pasos-titulo { font: 300 clamp(22px, 2.4vw, 30px)/1.1 var(--letra); letter-spacing: -0.02em; }

.pasos-cuerpo {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px;
  padding: 20px 24px 24px; min-height: 0; overflow: auto;
}
.pasos-lienzo { display: grid; place-items: center; min-height: 0; }
.pasos-lienzo .boceto { width: 100%; max-width: 360px; max-height: min(64vh, 560px); height: auto; overflow: visible; }
.pasos-lado { display: grid; align-content: start; gap: 18px; }

.pasos-explicacion { display: grid; gap: 8px; min-height: 9.5em; }
.pasos-paso-titulo { font: 500 21px/1.2 var(--letra); letter-spacing: -0.01em; }
.pasos-paso-texto { color: var(--secundario); line-height: 1.55; max-width: 52ch; }
.pasos-paso-texto a { color: var(--tinta); text-underline-offset: 3px; }

/* Controles: los del reproductor de las Lecciones (videotutoriales.css, «Reproductor»). */
.pasos-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--linea); }
.pasos-boton {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); color: var(--tinta); cursor: pointer;
}
.pasos-boton svg { width: 15px; height: 15px; fill: currentColor; }
.pasos-boton:hover { border-color: var(--tinta); }
.pasos-boton[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.pasos-boton[aria-disabled="true"]:hover { border-color: var(--linea); }
.pasos-principal { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
.pasos-principal:hover { opacity: 0.88; border-color: var(--boton); }
.pasos-progreso { flex: 1 1 120px; display: grid; grid-auto-flow: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pasos-progreso button { display: block; width: 100%; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.pasos-progreso button::before { content: ""; display: block; height: 3px; background: var(--linea); }
.pasos-progreso button.hecho::before { background: var(--tinta); }
.pasos-progreso button[aria-current]::before { background: var(--acento); height: 5px; }
.pasos-cuenta { min-width: 56px; text-align: right; font-size: 13px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.pasos-ayuda { font-size: 13px; color: var(--secundario); }

.pasos-final { display: grid; justify-items: start; gap: 10px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); }
.pasos-final[hidden] { display: none; }
.pasos-final-texto { color: var(--secundario); }
.pasos-accion { color: var(--tinta); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pasos-accion:hover, .pasos-accion:focus-visible { text-decoration-thickness: 2px; }
.pasos-accion-principal { font-weight: 500; text-decoration-color: var(--acento); }

/* El boceto paso a paso. Las líneas guía del figurinista, finas y en el acento; se aclaran cuando
   la prenda ya está encajada y se borran en el último paso. */
.pasos-lienzo .b-guia { fill: none; stroke: var(--acento); stroke-width: .5; stroke-linecap: round; }
.pasos-lienzo .b-guia-rotulo { fill: var(--acento); font: 500 6.5px var(--letra); letter-spacing: .06em; text-transform: uppercase; }
.pasos-lienzo[data-avanzado] .b-guias { opacity: .5; }
.pasos-lienzo[data-ultimo] .b-guias { opacity: 0; }
.pasos-lienzo [data-estado="luego"] { visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* El trazo del paso se dibuja: pathLength="1", de dashoffset 1 a 0. */
  .pasos-lienzo [data-estado="ahora"].pasos-traza,
  .pasos-lienzo [data-estado="ahora"] .pasos-traza {
    stroke-dasharray: 1;
    animation: pasos-traza .9s var(--curva-movimiento) var(--pasos-retraso, 0s) both;
  }
  /* La tela en papel, los pespuntes y los rótulos aparecen fundidos tras su contorno (lo que solo
     se ve con color, .cobra-aparece, lo enseña el componente cobra en el último paso). */
  .pasos-lienzo .cobra-tinte[data-estado="ahora"],
  .pasos-lienzo [data-estado="ahora"] > .cobra-tinte,
  .pasos-lienzo .b-pespunte[data-estado="ahora"],
  .pasos-lienzo [data-estado="ahora"] .b-guia-rotulo {
    animation: pasos-funde .6s ease calc(var(--pasos-retraso, 0s) + .45s) both;
  }
  .pasos-lienzo .b-guias { transition: opacity .9s ease; }
  .pasos-lienzo.pausado * { animation-play-state: paused; }
}
@keyframes pasos-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pasos-funde { from { opacity: 0; } to { opacity: 1; } }

/* Tableta estrecha y móvil: a pantalla completa, el boceto arriba y el texto debajo. */
@media (max-width: 760px) {
  .pasos {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0;
    border: 0; border-radius: 0;
  }
  .pasos-cabecera { padding: 14px 16px 10px; }
  .pasos-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); align-content: start; }
  .pasos-lienzo .boceto { max-width: 100%; width: auto; height: 40dvh; max-height: none; }
  .pasos-explicacion { min-height: 0; }
}
@media (hover: none) { .pasos-ayuda { display: none; } }