/* ===== Puzzles online · EducaFichas ===== */
.pz-generador{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start;padding-bottom:20px}
@media (max-width:820px){
  .pz-generador{grid-template-columns:1fr}
  .pz-generador .panel{order:2}
}
.pz-galeria{display:flex;flex-direction:column;gap:10px}
.pz-tema-titulo{display:block;font-family:var(--titular);font-weight:800;font-size:1rem;margin:0 0 4px}
.pz-imagenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.pz-miniatura{font:inherit;font-size:.72rem;line-height:1.15;font-weight:700;color:var(--tinta);background:#fff;border:2px solid var(--linea);border-radius:10px;padding:4px;cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:stretch;text-align:center}
.pz-miniatura img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.pz-miniatura:hover{border-color:var(--azul)}
@media (max-width:820px){.pz-imagenes{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}.pz-miniatura{font-size:.8rem}}
.pz-miniatura[aria-pressed=true]{border-color:var(--azul);background:var(--azul-claro)}
.pz-miniatura:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.pz-opciones{display:flex;flex-wrap:wrap;gap:8px}
.pz-opciones .boton{flex:1 1 auto;font-size:.9rem;padding:8px 10px}

.pz-zona{width:100%;max-width:max(300px,min(760px,calc((100vh - 120px) * .76)));margin:0 auto;display:flex;flex-direction:column;gap:12px;scroll-margin-top:10px}
.pz-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pz-contador{font-family:var(--titular);font-weight:800;font-size:1.3rem;color:var(--tinta)}
.pz-mensaje{margin:0;font-weight:700;min-height:1.4em;color:var(--suave);line-height:1.3}
.pz-mensaje.bien{color:#15803d}
.pz-mensaje.mal{color:#c2410c}

/* Tablero: siempre 4:3, las piezas se colocan en % */
.pz-tablero{position:relative;width:100%;aspect-ratio:4/3;background:#fff;border:3px solid var(--tinta);border-radius:10px;box-shadow:0 6px 0 var(--linea);user-select:none;-webkit-user-select:none}
.pz-guia{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:7px}
.pz-fantasma{opacity:.22;transition:opacity .3s}
.pz-sin-fondo .pz-fantasma{opacity:0}
.pz-hueco{fill:none;stroke:#9aa5c0;stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.pz-hueco.pz-lleno{stroke:none}
.pz-hueco.pz-cerca{fill:rgba(242,183,5,.35);stroke:var(--amarillo);stroke-dasharray:none;stroke-width:3}
.pz-hueco.pz-pista{animation:pz-parpadeo 1s ease-in-out infinite}
@keyframes pz-parpadeo{0%,100%{fill:rgba(47,91,211,.08);stroke:#9aa5c0}50%{fill:rgba(47,91,211,.35);stroke:var(--azul);stroke-width:4}}

/* Piezas */
.pz-pieza{display:block;overflow:visible;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pz-borde{fill:none;stroke:rgba(31,42,68,.55);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pz-bandeja .pz-pieza,.pz-arrastrando{cursor:grab;filter:drop-shadow(0 4px 6px rgba(31,42,68,.35))}
.pz-arrastrando{position:fixed;z-index:60;cursor:grabbing;filter:drop-shadow(0 10px 14px rgba(31,42,68,.4));pointer-events:none}
.pz-colocada{position:absolute;pointer-events:none;animation:pz-encaja .35s ease-out}
.pz-completo .pz-borde{stroke:transparent;transition:stroke .8s}
.pz-completo .pz-hueco{stroke:none}
.pz-final{position:absolute;inset:0;width:100%;height:100%;border-radius:7px;pointer-events:none;animation:pz-aparece .9s ease-out .25s both}
@keyframes pz-aparece{from{opacity:0}to{opacity:1}}
@keyframes pz-encaja{0%{transform:scale(1.08)}60%{transform:scale(.97)}100%{transform:scale(1)}}
.pz-nueva{animation:pz-sale .4s ease-out}
@keyframes pz-sale{0%{transform:scale(.4) translateY(30px);opacity:0}100%{transform:none;opacity:1}}
.pz-vuelve{animation:pz-sacude .4s ease-in-out}
@keyframes pz-sacude{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.pz-nueva,.pz-vuelve,.pz-colocada,.pz-hueco.pz-pista{animation:none}}

/* Bandeja donde sale cada pieza */
.pz-bandeja{display:flex;align-items:center;justify-content:center;padding:8px;background:var(--azul-claro);border:2px dashed #b9c7ef;border-radius:14px;min-height:120px;touch-action:manipulation}
.pz-fin{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px;text-align:center}
.pz-fin b{font-family:var(--titular);font-size:1.6rem;color:#15803d}
.pz-fin-botones{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pz-fin-botones .boton{flex:0 0 auto}

/* Botones de temas y enlace a todos */
.pz-temas{margin:-6px 0 20px}
.pz-temas .chip[aria-current=page]{background:var(--azul);border-color:var(--azul);color:#fff}
.pz-ver-todos{font-weight:700;font-size:.9rem;text-decoration:none}
.pz-ver-todos:hover{text-decoration:underline}