/* ============================================================
   WIZARD — Generador de diseños con IA (modal dentro de Printio)
   Paleta consistente con base.css (claro/azul Printio)
   ============================================================ */

/* ── Modal overlay + container ─────────────────────────────── */
.wz-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);   /* unificado con modal via base.css */
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
  animation: wzFade 0.2s ease-out;
}
.wz-modal-overlay[hidden] { display: none; }
@keyframes wzFade { from { opacity: 0; } to { opacity: 1; } }

.wz-modal {
  position: relative;
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 40px);
  background: var(--surface);   /* unificado con modal de pedido — antes era --bg (teal) */
  border-radius: var(--radio-xl, 18px);
  box-shadow: 0 24px 64px rgba(15, 45, 94, 0.20);   /* alineado con --sombra base + brand color */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: wzSlide 0.22s ease-out;
}
/* El chat (.wz-cf) es el único contenido de este paso — 1080px le sobraba
   espacio a los costados (el resto de los pasos, con grids de 2 columnas,
   sí lo necesitan). Angostamos el modal SOLO cuando adentro hay un chat. */
.wz-modal:has(.wz-cf) {
  max-width: 860px;
}

/* Scroll vertical delgado y del color de la marca — sin esto, Windows/Chrome
   dibuja la barra nativa gris ancha con flechitas arriba/abajo, que desentona
   fuerte con un modal minimalista. Aplica al modal entero y al hilo del chat
   (ambos tienen overflow-y propio). */
.wz-modal,
.wz-chat-msgs {
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: var(--borde-activo) transparent;   /* Firefox */
}
.wz-modal::-webkit-scrollbar,
.wz-chat-msgs::-webkit-scrollbar {
  width: 8px;
}
.wz-modal::-webkit-scrollbar-track,
.wz-chat-msgs::-webkit-scrollbar-track {
  background: transparent;
}
.wz-modal::-webkit-scrollbar-thumb,
.wz-chat-msgs::-webkit-scrollbar-thumb {
  background: var(--borde-activo);
  border-radius: 8px;
}
.wz-modal::-webkit-scrollbar-thumb:hover,
.wz-chat-msgs::-webkit-scrollbar-thumb:hover {
  background: var(--acento);
}
@keyframes wzSlide { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.wz-modal-header {
  display: flex;
  justify-content: space-between;   /* título izq · X der */
  align-items: center;
  padding: 11px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Stepper 1-2-3 oculto: header minimalista (solo título + cerrar) */
#wz-stepper-header { display: none; }
.wz-modal-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--texto);
}
.wz-modal-titulo i {
  color: var(--acento);
  font-size: 18px;
}
.wz-modal-close {
  background: transparent;
  border: 0;
  color: var(--texto-tenue);
  font-size: 26px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s;
}
.wz-modal-close:hover {
  background: var(--acento-tenue);
  color: var(--texto);
}

/* Botón "reiniciar" del header — mismo lenguaje visual que la × de cerrar
   (ícono fantasma circular, sin pastilla/texto compitiendo con el título)
   en vez del botón con borde+texto que tenía antes. El contexto ("qué
   hace") lo da el tooltip nativo (title=), no un label siempre visible —
   ya habíamos probado esto en el chat y se sentía "ruidoso" ahí (Frank
   2026-08-21: "en ese lugar no puede ir, está mal" sobre la versión con
   pastilla). Solo se muestra durante el chat (ver render() en wizard.js). */
.wz-modal-reiniciar {
  background: transparent;
  border: 0;
  color: var(--texto-tenue);
  font-size: 15px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s;
  flex-shrink: 0;
}
.wz-modal-reiniciar[hidden] { display: none; }
.wz-modal-reiniciar:hover {
  background: var(--acento-tenue);
  color: var(--acento);
}

/* ── Stepper ────────────────────────────────────────────────── */
.wz-stepper {
  margin: 0 12px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 360px;
}
.wz-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
}
.wz-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--borde);
  color: var(--texto-tenue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s;
  z-index: 1;
}
.wz-step-label {
  font-size: 10px;
  color: var(--texto-tenue);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: center;
}
.wz-step-line {
  flex: 0 0 auto;
  height: 2px;
  background: var(--borde);
  width: 28px;
  margin-bottom: 16px;
}
.wz-step.activo .wz-step-num {
  background: var(--acento);
  border-color: var(--acento);
  color: white;
  box-shadow: 0 4px 12px rgba(26, 79, 138, 0.35);
  transform: scale(1.05);
}
.wz-step.activo .wz-step-label {
  color: var(--texto);
  font-weight: 600;
}
.wz-step.completado .wz-step-num {
  background: var(--exito);
  border-color: var(--exito);
  color: white;
}
.wz-step.completado + .wz-step-line {
  background: var(--exito);
}

/* ── Contenido principal ────────────────────────────────────── */
.wz-main {
  flex: 1;
  margin: 0;
  padding: 0 24px 24px;
}
.wz-paso {
  background: white;
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 36px 40px;
  box-shadow: 0 2px 10px rgba(15, 45, 94, 0.04);
}
.wz-paso h2 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
}
.wz-paso .wz-subtitulo {
  color: var(--texto-mid);
  margin: 0 0 28px;
  font-size: 14px;
}

/* ── Cards seleccionables (productos, estilos, paletas) ────── */
.wz-grid-cards {
  display: grid;
  gap: 14px;
}
.wz-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wz-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wz-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .wz-grid-3, .wz-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .wz-grid-2 { grid-template-columns: 1fr; }
}

.wz-card {
  background: var(--surface);
  border: 2px solid var(--borde);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.wz-card:hover {
  background: var(--acento-tenue);
  border-color: var(--texto-tenue);
  transform: translateY(-2px);
}
.wz-card.activa {
  background: white;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.15);
}
.wz-card-icono {
  font-size: 28px;
  color: var(--acento);
}
.wz-card-titulo {
  font-weight: 600;
  font-size: 14px;
}
.wz-card-sub {
  font-size: 11px;
  color: var(--texto-tenue);
  line-height: 1.3;
}
.wz-card-preview {
  width: 100%;
  height: 90px;
  border-radius: 8px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, var(--surface), var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--acento);
  border: 1px solid var(--borde);
}

/* ── Tamaños / opciones simples ────────────────────────────── */
.wz-opciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.wz-opcion {
  background: var(--surface);
  border: 2px solid var(--borde);
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  font-family: inherit;
  color: var(--texto);
}
.wz-opcion:hover {
  background: var(--acento-tenue);
  border-color: var(--texto-tenue);
}
.wz-opcion.activa {
  background: var(--acento);
  border-color: var(--acento);
  color: white;
}

/* ── Toggle (¿diseñar reverso?) ────────────────────────────── */
.wz-toggle-grupo {
  margin-top: 28px;
  padding: 18px;
  background: var(--surface);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.wz-toggle-info { flex: 1; }
.wz-toggle-titulo { font-weight: 600; font-size: 14px; }
.wz-toggle-sub { font-size: 12px; color: var(--texto-tenue); margin-top: 2px; }
.wz-switch {
  position: relative;
  width: 50px;
  height: 28px;
  background: var(--borde);
  border-radius: 28px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.wz-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.wz-switch.activo {
  background: var(--acento);
}
.wz-switch.activo::after {
  transform: translateX(22px);
}

/* ── Tabs (frente / reverso) ───────────────────────────────── */
.wz-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 24px;
  width: fit-content;
}
.wz-tab {
  background: transparent;
  border: 0;
  padding: 8px 18px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-mid);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wz-tab.activa {
  background: white;
  color: var(--acento);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Form de contenido ─────────────────────────────────────── */
.wz-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wz-form-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wz-form-grupo.full { grid-column: 1 / -1; }
.wz-form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-mid);
}
.wz-form-input,
.wz-form-textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  background: white;
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s;
}
.wz-form-input:focus,
.wz-form-textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.08);
}
.wz-form-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* ── Paletas predefinidas (Paso 5) ─────────────────────────── */
.wz-paleta {
  background: var(--surface);
  border: 2px solid var(--borde);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wz-paleta:hover {
  border-color: var(--texto-tenue);
}
.wz-paleta.activa {
  background: white;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.15);
}
.wz-paleta-colores {
  display: flex;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--borde);
}
.wz-paleta-color {
  flex: 1;
}
.wz-paleta-nombre {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

/* Custom color pickers */
.wz-paleta-custom {
  background: var(--surface);
  border: 2px dashed var(--borde);
  border-radius: 10px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.wz-color-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.wz-color-pick input[type="color"] {
  width: 100%;
  height: 42px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}

/* ── Subir logo (Paso 5) ───────────────────────────────────── */
.wz-upload {
  margin-top: 20px;
  border: 2px dashed var(--borde);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.wz-upload:hover {
  border-color: var(--acento);
  background: var(--acento-tenue);
}
.wz-upload i { font-size: 28px; color: var(--texto-tenue); }
.wz-upload-titulo { font-weight: 600; }
.wz-upload-sub { font-size: 12px; color: var(--texto-tenue); }
.wz-upload-preview {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  padding: 10px;
  border-radius: 8px;
}
.wz-upload-preview img {
  width: 40px; height: 40px;
  object-fit: contain;
  background: white;
  border-radius: 4px;
}
.wz-upload-preview button {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--error);
  cursor: pointer;
  padding: 6px 10px;
}

/* ── Footer con navegación (dentro del modal, sticky bottom) ─ */
.wz-footer {
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid var(--borde);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 5;
  border-bottom-left-radius: var(--radio-xl, 18px);
  border-bottom-right-radius: var(--radio-xl, 18px);
}
.wz-footer-spacer { flex: 1; }
.wz-btn {
  padding: 12px 24px;
  border-radius: 8px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.wz-btn-primary {
  background: var(--acento);
  color: white;
}
.wz-btn-primary:hover { background: var(--acento-hover); }
.wz-btn-primary:disabled {
  background: var(--borde);
  color: var(--texto-tenue);
  cursor: not-allowed;
}
.wz-btn-ghost {
  background: transparent;
  color: var(--texto-mid);
  border: 1px solid var(--borde);
}
.wz-btn-ghost:hover { background: var(--surface); }
.wz-btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Pantalla de resultados ────────────────────────────────── */
.wz-resultados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.wz-variante {
  background: white;
  border: 2px solid var(--borde);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.15s;
}
.wz-variante:hover {
  border-color: var(--acento);
  box-shadow: 0 4px 16px rgba(26, 79, 138, 0.1);
}
.wz-variante-disenios {
  display: flex;
  gap: 12px;
  background: var(--bg);
  padding: 12px;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
}
.wz-variante-lado {
  /* Cada lado conserva la proporción real del producto (aspect-ratio inline
     desde JS). flex:1 1 0 + min-width:0 reparte el ancho disponible entre
     los dos lados. max-height limita la altura para que volantes verticales
     no se vayan fuera de pantalla — cuando llega al tope, aspect-ratio reduce
     el ancho automáticamente para mantener la proporción. */
  flex: 1 1 0;
  min-width: 0;
  max-height: 60vh;
  background: linear-gradient(135deg, #ffffff, #e3eef8);
  border: 1px solid var(--borde);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: var(--texto-tenue);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  padding: 6px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.wz-variante-lado-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(26, 79, 138, 0.85);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wz-variante-lado img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain (no cover): la imagen de gpt-image-2 viene en proporciones fijas
     (1024x1024, 1024x1536, 1536x1024) que no calzan exacto con la proporción
     real del producto. cover recortaba los bordes (texto, logo). contain
     muestra la imagen completa; cualquier diferencia con el aspect del
     contenedor se ve como mínima barra del fondo (no se pierde diseño). */
  object-fit: contain;
}
/* Marca de agua diagonal sobre el preview hasta que el cliente pague */
.wz-marca-agua {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: 4px;
  transform: rotate(-25deg);
  pointer-events: none;
  z-index: 2;
  font-family: 'DM Sans', sans-serif;
}
.wz-variante-acciones button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wz-variante-acciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wz-variante-acciones button {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--borde);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--texto-mid);
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.wz-variante-acciones button:hover {
  background: var(--acento-tenue);
  color: var(--acento);
}
.wz-variante-acciones button.aprobar {
  background: var(--acento);
  color: white;
  border-color: var(--acento);
  flex: 2;
}
.wz-variante-acciones button.aprobar:hover {
  background: var(--acento-hover);
}

/* ── Resumen lateral antes de generar ─────────────────────── */
.wz-resumen {
  background: var(--acento-tenue);
  border-radius: 12px;
  padding: 18px;
  margin-top: 24px;
}
.wz-resumen h4 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--acento);
}
.wz-resumen-fila {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
}
.wz-resumen-fila strong { color: var(--texto); }
.wz-resumen-fila span { color: var(--texto-mid); }

/* ── Loader de generación ─────────────────────────────────── */
.wz-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 20px;
  background: white;
  border-radius: 16px;
  border: 1px solid var(--borde);
}
.wz-loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--surface);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: wzSpin 1s linear infinite;
}
@keyframes wzSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   VISTA ÚNICA (Diseñar con IA · súper sencillo)
   ============================================================ */
.wz-vista {
  padding: 24px 28px 40px;
  max-width: 920px;
  margin: 0 auto;
}
.wz-seccion {
  margin-bottom: 32px;
  animation: wzFadeIn 0.25s ease-out;
}
.wz-seccion-titulo {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--texto);
}
.wz-seccion-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--texto-mid);
}
@keyframes wzFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tamaños debajo del producto */
.wz-tamaños-wrap {
  margin-top: 16px;
}
.wz-tamaños-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-mid);
  margin-bottom: 8px;
}
.wz-opcion-sub {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
  font-weight: 400;
}

/* Form grid 2 cols + full width helper */
.wz-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wz-form-full {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .wz-form-grid { grid-template-columns: 1fr; }
}

/* Modo estilo (IA decide vs Yo elijo) */
.wz-modo-estilo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wz-modo-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 2px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--texto);
  font-family: inherit;
  transition: all 0.15s;
}
.wz-modo-opt:hover {
  border-color: var(--acento);
  background: var(--acento-tenue);
}
.wz-modo-opt.activa {
  border-color: var(--acento);
  background: var(--acento-tenue);
  box-shadow: 0 0 0 3px rgba(26, 122, 176, 0.15);
}
.wz-modo-opt i {
  font-size: 22px;
  color: var(--acento);
  width: 28px;
  text-align: center;
}
.wz-modo-opt strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
}
.wz-modo-sub {
  font-size: 11px;
  color: var(--texto-mid);
  margin-top: 2px;
}
@media (max-width: 600px) {
  .wz-modo-estilo { grid-template-columns: 1fr; }
}

/* Card de estilo cuando hay 3 cols en grid */
.wz-card-estilo .wz-card-preview {
  height: 70px;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* CTA final: botón generar
   Gradiente de "fade in" para que el contenido detrás se vea atenuado
   cuando se aproxima al CTA fijo. Antes terminaba en --bg (teal) que
   contrastaba con el resto del wizard ahora unificado en --surface. */
.wz-cta-final {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, var(--surface) 30%);
  padding: 24px 0 0;
  margin-top: 32px;
  text-align: center;
}
.wz-btn-generar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--acento);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  min-width: 240px;
  box-shadow: 0 4px 12px rgba(26, 122, 176, 0.3);
}
.wz-btn-generar:not(:disabled):hover {
  background: var(--acento-fuerte, #1565a0);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26, 122, 176, 0.4);
}
/* Pulse breve cuando el CTA se habilita (patrón Stripe/Framer). Dos
   repeticiones y queda quieto — el pulso infinito molesta. La clase
   .wz-btn-pulse-listo la agrega JS cuando puedeContinuar pasa a true. */
.wz-btn-generar.wz-btn-pulse-listo {
  animation: wzBtnPulse 0.9s cubic-bezier(.22, 1, .36, 1) 2;
}
@keyframes wzBtnPulse {
  0%   { box-shadow: 0 4px 12px rgba(26, 122, 176, 0.3),
                     0 0 0 0 rgba(26, 122, 176, 0.45); }
  50%  { box-shadow: 0 4px 14px rgba(26, 122, 176, 0.35),
                     0 0 0 10px rgba(26, 122, 176, 0); }
  100% { box-shadow: 0 4px 12px rgba(26, 122, 176, 0.3),
                     0 0 0 0 rgba(26, 122, 176, 0); }
}
.wz-btn-generar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.wz-cta-motivo {
  margin-top: 10px;
  font-size: 12px;
  color: var(--texto-mid);
  font-style: italic;
}

/* Botón secundario (Empezar de nuevo) */
.wz-btn-secundario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--texto-mid);
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.wz-btn-secundario:hover {
  background: var(--surface);
  color: var(--texto);
}

/* ============================================================
   PASO 2 — Prompt libre con guía
   ============================================================ */

/* Botón "Atrás" — más visible que un link, tipo pill outline */
.wz-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid var(--acento);
  color: var(--acento);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  font-family: inherit;
  transition: all 0.15s;
}
.wz-back:hover {
  background: var(--acento);
  color: #fff;
  transform: translateX(-2px);
}
.wz-back i {
  font-size: 11px;
}

.wz-paso2-encabezado {
  margin-bottom: 12px;
}
.wz-paso2-encabezado .wz-seccion-titulo {
  font-size: 18px;
  margin: 0;
}
.wz-paso2-encabezado .wz-seccion-sub {
  font-size: 12.5px;
  margin: 2px 0 0;
}

/* Layout 2 columnas (textarea + checklist lateral). En móvil: stacked. */
.wz-paso2-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 760px) {
  .wz-paso2-layout {
    grid-template-columns: 1fr;
  }
}

/* Textarea principal del prompt — fondo blanco para destacar del modal celeste */
.wz-prompt-input {
  width: 100%;
  min-height: 200px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.wz-prompt-input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 122, 176, 0.15);
}
.wz-prompt-input::placeholder {
  color: var(--texto-tenue);
  opacity: 0.75;
  white-space: pre-line;
}

/* ============================================================
   Diseñador IA — chat conversacional (modo por defecto del paso 2)
   ============================================================ */
.wz-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wz-chat-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 18px;
  background: #f5f8fc;
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  scroll-behavior: smooth;
}
.wz-chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  animation: wzFadeIn 0.25s ease-out;
}
.wz-chat-msg-usuario {
  justify-content: flex-end;
}
.wz-chat-msg-asistente {
  justify-content: flex-start;
}
.wz-chat-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(15, 45, 94, 0.25);
}
.wz-chat-burbuja {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
.wz-chat-msg-asistente .wz-chat-burbuja {
  background: #fff;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 5px;
}
.wz-chat-msg-usuario .wz-chat-burbuja {
  background: var(--acento);
  color: #fff;
  border-bottom-right-radius: 5px;
}
/* Indicador "escribiendo…" (tres puntos) */
.wz-chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.wz-chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-tenue);
  opacity: 0.5;
  animation: wzTyping 1.2s infinite ease-in-out;
}
.wz-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.wz-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wzTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Fila de input del chat */
.wz-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.wz-chat-input-row.wz-chat-input-oculto { display: none; }
.wz-chat-input {
  flex: 1 1 auto;
  resize: none;
  overflow-y: hidden;   /* JS (_chatAutosize) lo cambia a auto solo si excede max-height */
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  max-height: 120px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wz-chat-input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 122, 176, 0.15);
}
.wz-chat-send {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: none;
  background: var(--acento);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.wz-chat-send:hover:not(:disabled) { background: var(--acento-hover); }
.wz-chat-send:active:not(:disabled) { transform: scale(0.94); }
.wz-chat-send:disabled { opacity: 0.5; cursor: default; }

/* Adjuntar imagen de referencia — atajo visible al paste/drag (que siguen
   funcionando igual). Estilo "ghost" para no competir con el botón enviar. */
.wz-chat-attach {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--borde);
  background: #fff;
  color: var(--texto-tenue);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.wz-chat-attach:hover {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--acento-tenue);
}

/* Adjuntos dentro del chat (logo / inspiración) */
.wz-chat-adjuntos {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.wz-chat-adjunto {
  width: 40px;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--borde);
  background: #fff;
  color: var(--texto-tenue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.wz-chat-adjunto:hover { border-color: var(--acento); color: var(--acento); }
.wz-chat-adjunto.tiene {
  border-color: var(--acento);
  background: var(--acento-tenue);
  color: var(--acento);
}
/* Burbuja con imagen adjunta (logo / inspiración) */
.wz-chat-burbuja-img {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.wz-chat-burbuja-img img {
  width: 120px;
  max-width: 40vw;
  height: auto;
  border-radius: 10px;
  display: block;
  background: #fff;
}
.wz-chat-burbuja-img span {
  font-size: 12px;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Link de escape entre modos (chat ⟷ texto) */
.wz-chat-escape {
  align-self: center;
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wz-chat-escape:hover { color: var(--acento); }

/* ============================================================
   Workspace "chat + lienzo" — Paso 2 fusionado con los resultados.
   El diseño aparece y evoluciona en el lienzo (izq) mientras el chat
   (der) sigue vivo como control. En móvil se apila.
   ============================================================ */
.wz-workspace {
  display: flex;
  gap: 16px;
  height: min(68vh, 620px);
  min-height: 440px;
}
.wz-ws-canvas {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  background: #f5f8fc;
  border: 1.5px solid var(--borde);
  border-radius: 16px;
  padding: 18px;
}
.wz-ws-chat {
  flex: 0 0 380px;
  max-width: 42%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.wz-ws-chat-head { padding: 2px 2px 0; }
.wz-ws-chat-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wz-ws-chat-titulo i { color: var(--acento); }
.wz-ws-chat-sub { font-size: 12.5px; color: var(--texto-tenue); }
/* En el workspace el chat ocupa el alto disponible y scrollea internamente */
.wz-ws-chat .wz-chat { flex: 1 1 auto; min-height: 0; }
.wz-ws-chat .wz-chat-msgs { flex: 1 1 auto; max-height: none; min-height: 0; }
.wz-ws-cta { margin-top: 0; }
.wz-ws-cta .wz-btn-generar { width: 100%; }

/* Estado vacío del lienzo (antes de generar) */
.wz-ws-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--texto-tenue);
  padding: 30px;
  gap: 6px;
}
.wz-ws-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--acento-tenue);
  color: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 6px;
}
.wz-ws-empty h3 { margin: 0; color: var(--texto); font-size: 18px; }
.wz-ws-empty p { margin: 0; max-width: 320px; font-size: 13.5px; line-height: 1.5; }

/* Dentro del lienzo los resultados se apilan vertical (hay menos ancho) */
.wz-ws-canvas .wz-resultados-grid { display: block; }
.wz-ws-canvas .wz-variante-disenios { flex-direction: column; }

/* Overlay "aplicando ajuste" sobre un lado durante el refine por chat */
.wz-lado-cargando {
  position: absolute;
  inset: 0;
  background: rgba(15, 45, 94, 0.78);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  border-radius: inherit;
  z-index: 6;
  backdrop-filter: blur(3px);
}
.wz-lado-cargando i { font-size: 24px; }

/* Responsive: apilar lienzo + chat en pantallas chicas */
@media (max-width: 860px) {
  .wz-workspace {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .wz-ws-chat {
    flex: none;
    max-width: 100%;
  }
  .wz-ws-canvas { min-height: 260px; }
  .wz-ws-chat .wz-chat-msgs { max-height: 42vh; }
}

/* ============================================================
   Chat de COLUMNA ÚNICA (estilo GPT-imágenes) + barra fija de
   "Tu diseño actual". Los diseños viven inline en el hilo.
   ============================================================ */
.wz-cf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: min(72vh, 660px);
  min-height: 460px;
}
.wz-cf-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wz-cf-titulo i { color: var(--acento); }
.wz-cf-sub { font-size: 12.5px; color: var(--texto-tenue); }

/* Contador de créditos (vive en el header del modal, ver index.html) */
.wz-creditos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--acento);
  background: var(--acento-tenue);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.wz-creditos[hidden] { display: none; }
.wz-creditos.wz-creditos-bajo { color: #b45309; background: #fef3c7; }

/* ============================================================
   Modal "sin créditos" (registro + packs)
   ============================================================ */
.wz-sincred-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 45, 94, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: wzFadeIn 0.18s ease-out;
}
.wz-sincred {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: 26px 24px 22px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(15, 45, 94, 0.3);
}
.wz-sincred-x {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  color: var(--texto-tenue);
  font-size: 22px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.wz-sincred-x:hover { background: var(--acento-tenue); }
.wz-sincred-ic {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #fef3c7;
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.wz-sincred h3 { margin: 0 0 6px; font-size: 19px; color: var(--texto); }
.wz-sincred p { margin: 0 0 16px; font-size: 13.5px; color: var(--texto-mid); line-height: 1.5; }
.wz-sincred-form { display: flex; flex-direction: column; gap: 8px; }
.wz-sincred-input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.wz-sincred-input:focus { outline: none; border-color: var(--acento); }
.wz-sincred-btn {
  margin-top: 2px;
  border: none;
  background: var(--acento);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
}
.wz-sincred-btn:hover { background: var(--acento-hover); }
.wz-sincred-err { color: #dc2626; font-size: 12.5px; min-height: 16px; }
.wz-sincred-sep {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 12px;
  margin: 16px 0 12px;
}
.wz-sincred-sep::before, .wz-sincred-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borde);
}
.wz-sincred-sep span { padding: 0 12px; }
.wz-sincred-packs { display: flex; gap: 8px; }
.wz-pack {
  position: relative;
  flex: 1;
  border: 1.5px solid var(--borde);
  background: #fff;
  border-radius: 14px;
  padding: 14px 8px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.wz-pack:hover { border-color: var(--acento); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 45, 94, 0.12); }
.wz-pack strong { font-size: 20px; color: var(--texto); line-height: 1; }
.wz-pack span { font-size: 11px; color: var(--texto-tenue); }
.wz-pack b { margin-top: 6px; font-size: 14px; color: var(--acento); }
.wz-pack-best { border-color: var(--acento); }
.wz-pack-tag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--acento);
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.wz-cf .wz-chat-msgs { flex: 1 1 auto; max-height: none; min-height: 0; }

/* Barra fija "Tu diseño actual" */
.wz-pinned {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--acento);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 45, 94, 0.10);
}
.wz-pinned[hidden] { display: none; }
.wz-pinned-prev { display: flex; gap: 6px; flex: 0 0 auto; }
.wz-pinned-prev img {
  height: 46px;
  width: auto;
  max-width: 80px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--borde);
  background: #fff;
}
.wz-pinned-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wz-pinned-info strong { font-size: 13.5px; color: var(--texto); }
.wz-pinned-info span { font-size: 12px; color: var(--texto-tenue); }
.wz-pinned-usar {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  background: var(--acento);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s;
}
.wz-pinned-usar:hover { background: var(--acento-hover); }

/* Tarjeta de diseño dentro del hilo (frente + reverso + versión) */
.wz-card-diseno {
  max-width: 80%;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wz-card-lados { display: flex; gap: 8px; }
.wz-card-lado {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f0f4fa;
  border: 1px solid var(--borde);
}
.wz-card-lado img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Slot de la retira mientras se genera (la tira ya se ve, esto llena el
   hueco de al lado en vez de dejarlo vacío o hacer esperar a mostrar algo). */
.wz-card-lado-cargando {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--acento);
  font-size: 20px;
}
.wz-card-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(15, 45, 94, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.wz-card-foot { font-size: 11.5px; color: var(--texto-tenue); font-weight: 600; padding-left: 2px; }

/* Tarjeta "generando…" mientras corre la IA */
.wz-card-generando {
  max-width: 80%;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.wz-card-gen-anim {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--acento-tenue);
  color: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.wz-card-gen-txt { font-size: 13.5px; font-weight: 700; color: var(--texto); max-width: 260px; line-height: 1.4; }
.wz-card-gen-sub {
  font-size: 12px;
  color: var(--texto-tenue);
  max-width: 260px;
  line-height: 1.4;
  min-height: 16px;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.wz-card-gen-sub.visible { opacity: 1; }

@media (max-width: 640px) {
  .wz-card-diseno, .wz-card-generando { max-width: 92%; }
  .wz-pinned { flex-wrap: wrap; }
  .wz-pinned-usar { width: 100%; justify-content: center; }
}

/* Imágenes ampliables */
.wz-card-lado img, .wz-pinned-prev img { cursor: zoom-in; }

/* ============================================================
   Lightbox: ver el diseño en grande (tira ⟷ retira), fondo borroso
   ============================================================ */
.wz-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 60px;
  background: rgba(15, 45, 94, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: wzFadeIn 0.18s ease-out;
}
.wz-lb-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 92vw;
  max-height: 88vh;
}
.wz-lb-contenido img {
  max-width: min(900px, 90vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  background: #fff;
}
.wz-lb-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.wz-lb-dots { display: inline-flex; gap: 6px; }
.wz-lb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  display: inline-block;
}
.wz-lb-dot.on { background: #fff; }
.wz-lb-cerrar {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wz-lb-cerrar:hover { background: rgba(255, 255, 255, 0.28); }
.wz-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wz-lb-nav:hover { background: rgba(255, 255, 255, 0.28); }
.wz-lb-prev { left: 24px; }
.wz-lb-next { right: 24px; }

@media (max-width: 640px) {
  .wz-lightbox { padding: 20px; }
  .wz-lb-nav { width: 40px; height: 40px; }
  .wz-lb-prev { left: 8px; }
  .wz-lb-next { right: 8px; }
}

/* ============================================================
   Chips de producto / tamaño dentro del chat (paso 1 integrado)
   ============================================================ */
.wz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 6px 38px;   /* alinea con las burbujas del diseñador */
  animation: wzFadeIn 0.25s ease-out;
}
/* Chips de tamaño: el grid con columnas 1fr los estiraba mucho (ocupaba
   demasiado espacio) — vuelven a ser compactos (ancho pegado al contenido,
   como el resto de los chips), solo que más chicos que antes para que
   entren más por fila y las filas queden parejas de forma natural. */
.wz-chips-grid { display: flex; flex-wrap: wrap; }
.wz-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1.5px solid var(--borde);
  color: var(--texto);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 45, 94, 0.06);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
}
.wz-chip:hover {
  border-color: var(--acento);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 45, 94, 0.14);
}
.wz-chip:active { transform: translateY(0) scale(0.98); }

/* Producto: ícono en badge circular + texto */
.wz-chip-prod { padding: 12px 18px 12px 12px; border-radius: 16px; }
.wz-chip-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--acento-tenue);
  color: var(--acento);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
}
.wz-chip-prod:hover .wz-chip-ic { background: var(--acento); color: #fff; }
.wz-chip-txt { font-size: 14px; }

/* Tamaño: dos líneas centradas, alineadas en grilla prolija. line-height:1
   en vez del default del navegador (~1.4-1.5) — sin esto el espacio entre
   la medida y su nombre no era el gap:0 sino el aire propio de cada línea
   de texto (Frank 2026-08-21: "achicar el espacio entre la medida y su
   nombre, así el chip se hará un poco más compacto"). */
.wz-chip-medida {
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 6px 11px;
  text-align: center;
  align-items: center;
}
.wz-chip-medida strong { font-size: 12px; line-height: 1; color: var(--texto); }
.wz-chip-medida span { font-size: 10px; line-height: 1; font-weight: 600; opacity: 0.7; color: var(--texto-tenue); }
.wz-chip-medida:hover strong { color: var(--acento); }

/* Secundario: mismo borde sólido que el resto (el punteado que tenía antes
   se veía desprolijo al lado de los chips normales — Frank: "esa regla que
   le pusiste está fea"), diferenciado solo por color más apagado. */
.wz-chip-sec {
  color: var(--texto-tenue);
  box-shadow: none;
  font-weight: 600;
}
.wz-chip-sec:hover { border-color: var(--acento); color: var(--acento); }
.wz-chip-sec.wz-chip-medida strong { color: var(--texto-tenue); }
.wz-chip-sec.wz-chip-medida:hover strong { color: var(--acento); }


/* Botón "✏️" por lado, para regenerar solo el frente o solo el reverso */
.wz-card-lado-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--texto);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 45, 94, 0.25);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.wz-card-lado-btn:hover { background: var(--acento); color: #fff; transform: scale(1.08); }

/* Píldora "Editando: frente/reverso" sobre el input, tras tocar el ✏️ */
.wz-lado-pill[hidden] { display: none; }
.wz-lado-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 0 0 6px 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--acento-tenue);
  color: var(--acento);
  font-size: 12px;
  font-weight: 700;
}
.wz-lado-pill button {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
}
.wz-lado-pill button:hover { opacity: 1; }

/* Medida personalizada inline */
.wz-custom-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-custom-input {
  width: 72px;
  padding: 9px 10px;
  border: 1.5px solid var(--borde);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
}
.wz-custom-input:focus { outline: none; border-color: var(--acento); }
.wz-custom-x, .wz-custom-cm { color: var(--texto-tenue); font-weight: 600; }

/* Hint "agrandar gratis hasta…" de la medida personalizada */
.wz-cc-hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--texto-mid);
  background: var(--acento-tenue);
  border-radius: 10px;
  padding: 8px 12px;
  max-width: 460px;
  animation: wzFadeIn 0.2s ease-out;
}
.wz-cc-hint.visible { display: flex; flex-wrap: wrap; }
.wz-cc-hint > i { color: var(--acento); }
.wz-cc-hint strong { color: var(--acento); }
.wz-cc-hint-btn {
  border: none;
  background: var(--acento);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}
.wz-cc-hint-btn:hover { background: var(--acento-hover); }

/* Volver de "medida personalizada" a los tamaños estándar — link chiquito
   y discreto (texto plano), no un botón con borde compitiendo con "Listo". */
.wz-cc-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 2px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color 0.15s;
}
.wz-cc-volver:hover { color: var(--acento); }
.wz-cc-volver i { font-size: 11px; }

/* Chips (atajos) — agrupados en una "card" propia con título prominente */
.wz-chips-wrap {
  margin-top: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.wz-chips-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.wz-chips-label i {
  color: var(--acento);
  font-size: 13px;
}
.wz-chips-help {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--texto-mid);
}
.wz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.wz-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--acento-tenue);
  border: 1.5px solid var(--acento);
  border-radius: 999px;
  color: var(--acento);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.wz-chip:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(26, 122, 176, 0.3);
}
.wz-chip i {
  font-size: 12px;
  color: inherit;
}

/* Upload de logo en versión compacta para el paso 2 */
.wz-upload-compact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  width: auto;
  text-align: left;
}
.wz-upload-compact i {
  font-size: 16px;
  color: var(--acento);
}
.wz-upload-compact span {
  font-size: 13px;
  color: var(--texto-mid);
  font-weight: 600;
}

/* Columna lateral: checklist */
.wz-checklist-col {
  position: sticky;
  top: 0;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px;
}
@media (max-width: 760px) {
  .wz-checklist-col { position: static; }
}
.wz-checklist-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.wz-checklist-label i {
  color: var(--acento);
  font-size: 11px;
}
.wz-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wz-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--borde);
  transition: opacity 0.2s;
  opacity: 0.55;
}
.wz-check-item:last-child {
  border-bottom: none;
}
.wz-check-item.completo {
  opacity: 1;
}
.wz-check-marca {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--borde);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.wz-check-marca i {
  color: #fff;
  font-size: 7px;
  opacity: 0;
  transition: opacity 0.2s;
}
.wz-check-item.completo .wz-check-marca {
  background: var(--exito, #16a34a);
  border-color: var(--exito, #16a34a);
}
.wz-check-item.completo .wz-check-marca i {
  opacity: 1;
}
.wz-check-icono {
  display: none;
}
.wz-check-label {
  font-size: 11.5px;
  color: var(--texto-mid);
  font-weight: 500;
  line-height: 1.25;
}
.wz-check-item.completo .wz-check-label {
  color: var(--texto);
  font-weight: 600;
}
.wz-checklist-nota {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--texto-tenue);
  font-style: italic;
  line-height: 1.4;
}

/* Indicador de estado del análisis (LLM) en el checklist */
.wz-checklist-estado {
  font-size: 11px;
  margin: -4px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  transition: opacity 0.2s;
}
.wz-checklist-estado:empty {
  display: none;
}
.wz-checklist-estado.estado-pend {
  color: var(--texto-tenue);
  font-style: italic;
}
.wz-checklist-estado.estado-analizando {
  color: var(--acento);
  font-weight: 600;
}
.wz-checklist-estado.estado-ok {
  color: var(--exito, #16a34a);
  font-weight: 600;
}
.wz-checklist-estado.estado-err {
  color: var(--texto-tenue);
  font-style: italic;
}
.wz-checklist-estado i {
  font-size: 10px;
}

/* ============================================================
   PASO 1 — Mejoras de presentación
   ============================================================ */

/* ── Stepper: continuidad visual del flujo del wizard (3 pasos) ──
   Vive en el HEADER del modal (no en el contenido) — patrón Stripe Checkout.
   Compacto y centrado, no compite con el título. */
.wz-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  max-width: 380px;
}
.wz-step {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s ease;
  opacity: 0.55;
}
.wz-step.activa { opacity: 1; }
.wz-step.completada { opacity: 0.95; }
.wz-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--borde);
  color: var(--texto-mid);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;        /* DM Sans hereda ~1.45 → el número queda bajo */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.wz-step.activa .wz-step-num {
  background: var(--acento);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(26, 122, 176, 0.18);
}
.wz-step.completada .wz-step-num {
  background: #16a34a;
  color: #fff;
}
.wz-step.completada .wz-step-num i { font-size: 9px; }
.wz-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-mid);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wz-step.activa .wz-step-label { color: var(--texto); }
.wz-step-line {
  flex: 1;
  min-width: 18px;
  max-width: 36px;
  height: 2px;
  background: var(--borde);
  border-radius: 999px;
  transition: background 0.25s ease;
}
/* Línea entre pasos completados se tinta de verde */
.wz-step.completada + .wz-step-line {
  background: #16a34a;
  opacity: 0.6;
}
/* En mobile, escondemos los labels y mostramos solo los números */
@media (max-width: 600px) {
  .wz-step-label { display: none; }
  .wz-stepper { gap: 4px; max-width: 200px; }
  .wz-step-line { max-width: 24px; }
}

/* Cards de producto: grid con icono a la izquierda y bloque de texto
   (título arriba + descripción abajo) a la derecha. Sin el grid, los 3
   hijos (icono/título/sub) iban en una sola línea horizontal y la card
   se sentía desordenada. */
.wz-vista .wz-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.wz-vista .wz-grid-2 .wz-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
  padding: 18px 20px;
  min-height: 0;
  position: relative;
  /* Easing ease-out-quart (Linear/Stripe) para que todo aterrice suave. */
  transition: background 0.22s cubic-bezier(.22, 1, .36, 1),
              border-color 0.22s cubic-bezier(.22, 1, .36, 1),
              box-shadow 0.22s cubic-bezier(.22, 1, .36, 1),
              opacity 0.22s ease,
              transform 0.22s cubic-bezier(.22, 1, .36, 1);
}
/* Patrón "dim the rest" (Stripe, Vercel, Linear): cuando el grid tiene
   una card seleccionada, las demás se atenúan para que la elegida domine. */
.wz-vista .wz-grid-2:has(.wz-card.activa) .wz-card:not(.activa) {
  opacity: 0.4;
  filter: saturate(0.7);
  box-shadow: none;
}
/* Patrón "lift + ring" (Linear, Framer, shadcn): la card seleccionada
   sube un poco, tiene un anillo de color, sombra suave y fondo tintado.
   Comunicación física + redundancia visual del estado. */
.wz-vista .wz-grid-2 .wz-card.activa {
  transform: scale(1.015);
  background: rgba(26, 122, 176, 0.06);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 122, 176, 0.18),
              0 10px 24px -8px rgba(15, 45, 94, 0.18);
}
/* Check superpuesto arriba a la derecha (redundancia visual del seleccionado) */
.wz-vista .wz-grid-2 .wz-card.activa::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 45, 94, 0.3);
  animation: wzCheckPop 0.35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes wzCheckPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.wz-vista .wz-grid-2 .wz-card-icono {
  grid-row: 1 / span 2;
  grid-column: 1;
  font-size: 28px;
  align-self: center;
  color: var(--acento);
}
.wz-vista .wz-grid-2 .wz-card-titulo {
  grid-column: 2;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.wz-vista .wz-grid-2 .wz-card-sub {
  grid-column: 2;
  font-size: 12px;
  color: var(--texto-tenue);
  line-height: 1.3;
}

/* Reveal de la sección Tamaño: la sección aparece con fade+slide y las
   opciones hijas caen en cascada (stagger ~40ms). Patrón Linear/Framer. */
.wz-tamaños-wrap {
  margin-top: 20px;
  animation: wzRevealSection 0.42s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes wzRevealSection {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wz-tamaños-wrap .wz-tamaños-label {
  animation: wzRevealLabel 0.32s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes wzRevealLabel {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.wz-tamaños-wrap .wz-opcion {
  animation: wzRevealCard 0.38s cubic-bezier(.22, 1, .36, 1) both;
}
/* Stagger: cada opción entra 45ms después de la anterior (~270ms total). */
.wz-tamaños-wrap .wz-opcion:nth-child(1) { animation-delay: 0.08s; }
.wz-tamaños-wrap .wz-opcion:nth-child(2) { animation-delay: 0.12s; }
.wz-tamaños-wrap .wz-opcion:nth-child(3) { animation-delay: 0.16s; }
.wz-tamaños-wrap .wz-opcion:nth-child(4) { animation-delay: 0.20s; }
.wz-tamaños-wrap .wz-opcion:nth-child(5) { animation-delay: 0.24s; }
.wz-tamaños-wrap .wz-opcion:nth-child(6) { animation-delay: 0.28s; }
.wz-tamaños-wrap .wz-opcion:nth-child(7) { animation-delay: 0.32s; }
@keyframes wzRevealCard {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wz-tamaños-wrap .wz-opciones {
  display: grid;
  /* 3 columnas fijas en desktop → 6 items quedan 3×2 balanceado.
     Antes era auto-fill que dejaba 5+1 (Personalizada solita abajo). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 600px) {
  .wz-tamaños-wrap .wz-opciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.wz-tamaños-wrap .wz-opcion {
  text-align: center;
  padding: 12px 10px;
  position: relative;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--borde);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  /* Transiciones suaves para que el cambio de estado activa/inactiva no
     se sienta como un "flash" — todo se interpola en ~180ms. */
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.wz-tamaños-wrap .wz-opcion:hover {
  border-color: var(--acento);
  background: var(--acento-tenue);
  transform: translateY(-1px);
}
.wz-tamaños-wrap .wz-opcion.activa {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
  box-shadow: 0 2px 6px rgba(26, 122, 176, 0.25);
}
.wz-tamaños-wrap .wz-opcion strong {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}
.wz-tamaños-wrap .wz-opcion .wz-opcion-sub {
  font-size: 10.5px;
  margin-top: 3px;
  line-height: 1.2;
  opacity: 0.85;
}

/* Botón "girar orientación" — solo se renderea en la card activa.
   Esquina superior derecha, pequeño, semi-transparente. Hover gira el
   icono 90° para anticipar el efecto. La clase .rotada (cuando la
   orientación ya está invertida) deja el icono permanentemente girado. */
.wz-opcion-girar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease;
  z-index: 5;
}
.wz-opcion-girar i {
  font-family: 'Font Awesome 6 Free';  /* explícito por si hereda DM Sans */
  font-weight: 900;                     /* fa-solid necesita 900, la card hereda 500 */
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
}
.wz-opcion-girar:hover {
  background: rgba(255, 255, 255, 0.32);
}
.wz-opcion-girar:hover i {
  transform: rotate(90deg);
}
.wz-opcion-girar.rotada i {
  transform: rotate(90deg);
}
.wz-opcion-girar.rotada:hover i {
  transform: rotate(180deg);
}
/* Card custom es fondo blanco — fondo del botón debe ser tinte azul */
.wz-opcion-custom.activa .wz-opcion-girar {
  background: rgba(15, 45, 94, 0.10);
}
.wz-opcion-custom.activa .wz-opcion-girar:hover {
  background: rgba(15, 45, 94, 0.18);
}
.wz-tamaños-wrap .wz-opcion.activa .wz-opcion-sub {
  opacity: 0.9;
}

/* Botón "Personalizada": dashed para indicar visualmente "no estándar" */
.wz-opcion-custom {
  border-style: dashed !important;
}
.wz-opcion-custom strong i {
  color: var(--acento);
  margin-right: 4px;
  font-size: 11px;
}
.wz-opcion-custom.activa {
  border-style: solid !important;
}
.wz-opcion-custom.activa strong i {
  color: #fff;
}

/* Panel inline al elegir "Personalizada" — compacto, integrado al ritmo */
/* Panel de medida personalizada — aparece como continuación de la card
   "Personalizada" cuando está seleccionada. Antes parecía un cuadrito
   secundario (dashed + bg distinto) — ahora hereda la estética card:
   blanco, borde solido sutil, padding cómodo. Visualmente "pertenece"
   al conjunto de cards de tamaño. */
/* Panel custom: UNA sola card con jerarquía interna clara.
   Fila 1: grupo de inputs con label "Medida" + "Base 9×5.5" a la derecha.
   Fila 2 (hint): SIN card propia — solo un border-top sutil de separación.
   El "Usar máximo" del hint es un link inline, no un botón sólido. */
.wz-medida-custom {
  margin-top: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 45, 94, 0.04);
  animation: wzFadeIn 0.2s ease-out;
}
.wz-medida-custom-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
/* "BASE 9 × 5.5" — separador visual antes para que se sienta unida al grupo
   de inputs sin estar pegada (el gap del row la separa). */
.wz-medida-custom-row > .wz-medida-custom-info {
  padding-left: 24px;
  border-left: 1px solid var(--borde);
}
@media (max-width: 520px) {
  .wz-medida-custom-row > .wz-medida-custom-info {
    border-left: none;
    padding-left: 0;
  }
}
/* Grupo cohesivo: label + ancho + × + alto + cm — todo junto como un
   solo bloque, así "Medida" se siente como el título del control. */
.wz-medida-custom-grupo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wz-medida-custom-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
}
.wz-medida-custom-input {
  width: 72px;
  padding: 8px 10px;
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
  font-family: inherit;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wz-medida-custom-input:hover { border-color: var(--texto-tenue); }
.wz-medida-custom-input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.15);
}
.wz-medida-custom-x {
  font-size: 14px;
  color: var(--texto-tenue);
  font-weight: 500;
}
.wz-medida-custom-cm {
  font-size: 12px;
  color: var(--texto-mid);
  font-weight: 600;
  margin-left: 2px;
}
/* "Base 9 × 5.5" — info secundaria a la derecha del row. Sin border-left
   ni separadores, alineada al extremo por space-between del row padre. */
.wz-medida-custom-info {
  font-size: 11px;
  font-weight: 500;
  color: var(--texto-tenue);
  line-height: 1.4;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wz-medida-custom-info strong {
  color: var(--texto-mid);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  margin-left: 4px;
}
@media (max-width: 520px) {
  .wz-medida-custom-info {
    flex-basis: 100%;
    margin-top: 6px;
  }
}

/* Hint dinámico — NO es otra card. Es una fila debajo separada por un
   border-top sutil, mismo bg que el panel padre. Cero borders/shadows
   propios para no romper la jerarquía visual. */
.wz-medida-custom-hint {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 12px;
  color: var(--texto-mid);
  animation: wzFadeIn 0.2s ease-out;
}
.wz-medida-custom-hint.visible {
  display: flex;
}
.wz-medida-custom-hint i {
  color: var(--acento);
  font-size: 12px;
}
.wz-medida-custom-hint strong {
  font-weight: 700;
  color: var(--texto);
}
/* "Usar máximo →" como link inline, no botón sólido. Apoya el hint, no
   compite con el CTA principal del paso (Continuar). Separado del texto
   por un border-left sutil (mismo patrón que "BASE" arriba). */
.wz-medida-hint-aplicar {
  padding: 4px 0 4px 18px;
  background: none;
  color: var(--acento);
  border: none;
  border-left: 1px solid var(--borde);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wz-medida-hint-aplicar i {
  color: inherit;
  font-size: 10px;
  transition: transform 0.15s;
}
.wz-medida-hint-aplicar:hover {
  color: var(--acento-fuerte, #0F2D5E);
}
.wz-medida-hint-aplicar:hover i {
  transform: translateX(2px);
}

/* Pulse glow: cuando "Usar máximo" autorrellena los inputs, ambos se
   iluminan con un halo de color acento que se desvanece en 600ms.
   Sincronizado con la animación del counter (~480ms) para que el glow
   termine justo después de que el número llegue al destino. */
@keyframes wzInputPulse {
  0% {
    border-color: var(--acento);
    box-shadow: 0 0 0 0 rgba(26, 79, 138, 0.35), inset 0 0 0 0 rgba(26, 79, 138, 0);
    background: #fff;
  }
  35% {
    border-color: var(--acento);
    box-shadow: 0 0 0 6px rgba(26, 79, 138, 0.18), inset 0 0 0 0 rgba(26, 79, 138, 0.08);
    background: rgba(26, 79, 138, 0.04);
  }
  100% {
    border-color: var(--borde);
    box-shadow: 0 0 0 0 rgba(26, 79, 138, 0), inset 0 0 0 0 rgba(26, 79, 138, 0);
    background: #fff;
  }
}
.wz-medida-custom-input.wz-input-pulse {
  animation: wzInputPulse 0.6s ease-out;
}

/* ============================================================
   Paso 2 — Barra de uploads compacta (Logo + Inspiración)
   Una sola fila debajo del textarea. Altura mínima para no
   robar espacio al campo principal.
   ============================================================ */
.wz-uploads-barra {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.wz-upload-slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px dashed var(--borde);
  border-radius: 8px;
  min-height: 44px;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.wz-upload-slot-vacia {
  cursor: pointer;
  color: var(--texto-mid);
}
.wz-upload-slot-vacia:hover {
  border-color: var(--acento);
  background: var(--acento-tenue);
  color: var(--acento);
}
.wz-upload-slot-vacia > i {
  color: var(--acento);
  font-size: 16px;
  flex-shrink: 0;
}
.wz-upload-slot-tiene {
  border-style: solid;
  border-color: var(--acento);
}
.wz-upload-slot-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wz-upload-slot-label i {
  color: var(--acento);
  font-size: 12px;
}
.wz-upload-slot-vacia .wz-upload-slot-label {
  color: inherit;
}
.wz-upload-slot-meta {
  font-size: 11px;
  color: var(--texto-tenue);
  font-style: italic;
  margin-left: auto;
  white-space: nowrap;
}

/* Thumbnails de logo y referencias dentro del slot */
.wz-upload-slot-thumb {
  position: relative;
  width: 32px;
  height: 32px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.wz-upload-slot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wz-upload-slot-quitar {
  position: absolute;
  top: -4px;
  right: -4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  cursor: pointer;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
}
.wz-upload-slot-quitar:hover {
  background: #ef4444;
}

/* Slot de referencias con thumbnails: grilla horizontal */
.wz-upload-slot-refs {
  align-items: center;
}
.wz-upload-slot-thumbs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.wz-upload-slot-add {
  width: 32px;
  height: 32px;
  border: 1.5px dashed var(--borde);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--texto-mid);
  flex-shrink: 0;
  transition: all 0.15s;
}
.wz-upload-slot-add:hover {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--acento-tenue);
}
.wz-upload-slot-add i {
  font-size: 12px;
}

@media (max-width: 600px) {
  .wz-uploads-barra { flex-direction: column; }
  .wz-upload-slot { width: 100%; }
}

/* ============================================================
   Puente lateral wizard → catálogo (paso 1)
   Para el cliente que entró al wizard y se da cuenta de que sí
   tenía el archivo guardado.
   ============================================================ */
.wz-puente-catalogo {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(15, 45, 94, 0.22);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--texto-mid);
  text-align: center;
}
.wz-puente-catalogo button {
  background: transparent;
  border: none;
  color: var(--acento);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: all 0.15s;
}
.wz-puente-catalogo button:hover {
  background: var(--acento-tenue);
  text-decoration: underline;
}
.wz-puente-catalogo button i {
  font-size: 10px;
}

/* ============================================================
   Panel lateral "Asistente IA" (paso 2)
   Estructura: header fijo + body que cambia según estado.
   ============================================================ */
.wz-feedback-col {
  position: sticky;
  top: 0;
}
.wz-feedback-content {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
}
@media (max-width: 760px) {
  .wz-feedback-col { position: static; }
}

/* Header fijo "Asistente IA · subtitulo" */
.wz-fb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--acento), var(--acento-fuerte, #1565a0));
  color: #fff;
}
.wz-fb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.wz-fb-header-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.wz-fb-header-txt strong {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.wz-fb-header-txt span {
  font-size: 10.5px;
  opacity: 0.85;
  font-style: italic;
}

/* Cuerpo: cambia según estado */
.wz-fb-body {
  padding: 12px 14px 14px;
  animation: wzFadeIn 0.25s ease-out;
}
.wz-fb-mensaje {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto);
}
.wz-fb-mensaje-tenue {
  color: var(--texto-mid);
  font-style: italic;
}
.wz-fb-lista {
  margin: 8px 0 0;
  padding: 0 0 0 18px;
  font-size: 12px;
  color: var(--texto);
  line-height: 1.5;
}
.wz-fb-lista li {
  margin: 4px 0;
}

/* Estado "analizando": spinner + mensaje */
.wz-fb-body-trabajando {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 14px;
}
.wz-fb-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acento-tenue);
  color: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Estado "todo OK" — verde, con badge resultado */
.wz-feedback-content:has(.wz-fb-body-ok) {
  border-color: var(--exito, #16a34a);
}
.wz-feedback-content:has(.wz-fb-body-ok) .wz-fb-header {
  background: linear-gradient(135deg, #16a34a, #15803d);
}
.wz-fb-body-ok {
  background: rgba(22, 163, 74, 0.04);
}
.wz-fb-resultado {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--exito, #16a34a);
  font-size: 14px;
}
.wz-fb-resultado i {
  font-size: 18px;
}
.wz-fb-resultado strong {
  font-weight: 700;
}

/* Estado "te falta" — ámbar sutil en el cuerpo */
.wz-feedback-content:has(.wz-fb-body-falta) {
  border-color: rgba(245, 158, 11, 0.5);
}
.wz-fb-body-falta {
  background: rgba(245, 158, 11, 0.04);
}
.wz-fb-body-falta .wz-fb-lista li {
  position: relative;
  padding-left: 4px;
}
.wz-fb-body-falta .wz-fb-lista li::marker {
  color: #b45309;
}

/* Estado "error": gris dasheado */
.wz-feedback-content:has(.wz-fb-body-error) {
  border-style: dashed;
  border-color: var(--borde);
}
.wz-feedback-content:has(.wz-fb-body-error) .wz-fb-header {
  background: linear-gradient(135deg, #64748b, #475569);
}

/* Lista de progreso: items cubiertos con check verde, pendientes con círculo vacío */
.wz-fb-lista-progreso {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.wz-fb-lista-progreso li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.4;
  transition: opacity 0.2s;
}
.wz-fb-lista-progreso .wz-fb-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--borde);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  background: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.wz-fb-lista-progreso .wz-fb-check i {
  font-size: 8px;
  color: #fff;
}
.wz-fb-lista-progreso li.cubierto .wz-fb-check {
  background: var(--exito, #16a34a);
  border-color: var(--exito, #16a34a);
}
.wz-fb-lista-progreso li.cubierto .wz-fb-item-txt {
  color: var(--texto);
  font-weight: 500;
}
.wz-fb-lista-progreso li.pendiente .wz-fb-item-txt {
  color: var(--texto-mid);
  opacity: 0.7;
}

/* Mini indicador "actualizando…" — barra fina arriba del body con análisis previo */
.wz-fb-actualizando {
  padding: 6px 14px;
  background: rgba(26, 122, 176, 0.08);
  border-bottom: 1px solid rgba(26, 122, 176, 0.18);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--acento);
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: italic;
}
.wz-fb-actualizando i {
  font-size: 9px;
}

/* Loader progresivo — card central que va revelando info real del
   preprocesador (paleta, tipografía, mood) y el estado del proceso.
   Cada mensaje aparece con fade+slide y reemplaza al anterior. */
.wz-loader-card {
  margin-top: 28px;
  min-height: 90px;
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.wz-loader-card.saliendo {
  opacity: 0;
  transform: translateY(-10px);
}
.wz-loader-card.entrando {
  animation: wzMsgEntrar 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wzMsgEntrar {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Mensaje simple: ícono + texto, pill elegante */
.wz-loader-msg {
  padding: 14px 24px;
  background: linear-gradient(135deg, rgba(26, 122, 176, 0.08), rgba(26, 122, 176, 0.04));
  border: 1px solid rgba(26, 122, 176, 0.18);
  border-radius: 14px;
  font-size: 14px;
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(26, 122, 176, 0.08);
  text-align: center;
}
.wz-loader-msg > i {
  color: var(--acento);
  font-size: 16px;
  flex-shrink: 0;
}

/* Variantes especiales: paleta, tipografía, mood */
.wz-loader-msg-paleta,
.wz-loader-msg-tipografia,
.wz-loader-msg-mood {
  display: block;
  padding: 18px 28px;
  text-align: center;
}
.wz-loader-msg-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--texto-mid);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wz-loader-msg-titulo i {
  color: var(--acento);
  font-size: 12px;
}
.wz-loader-msg-swatches {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.wz-loader-msg-swatch {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  animation: wzSwatchPulse 2.4s ease-in-out infinite;
}
@keyframes wzSwatchPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.wz-loader-msg-sub {
  font-size: 12px;
  font-style: italic;
  color: var(--texto-mid);
  margin-top: 6px;
}
.wz-loader-msg-tipo {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
  letter-spacing: 0.2px;
}
.wz-loader-msg-quote {
  font-size: 15px;
  font-style: italic;
  color: var(--texto);
  letter-spacing: 0.2px;
}

/* ============================================================
   Skeleton del reverso mientras se genera (UX progresiva)
   Aparece después de que el frente termina, ocupando el slot
   donde después irá el reverso real.
   ============================================================ */
.wz-variante-lado.wz-variante-skeleton {
  background: linear-gradient(135deg, #f0f4f8, #e2e8f0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.wz-variante-lado.wz-variante-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 70%
  );
  animation: wzShimmer 2s ease-in-out infinite;
}
@keyframes wzShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.wz-skeleton-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(26, 122, 176, 0.15);
  color: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  position: relative;
  z-index: 1;
}
.wz-skeleton-label {
  font-size: 13px;
  color: var(--texto-mid);
  font-weight: 600;
  position: relative;
  z-index: 1;
}

/* Contenedor de los mensajes progresivos dentro del esqueleto del reverso.
   Recibe el mismo HTML que el loader principal (.wz-loader-msg, paleta, etc.) */
.wz-skeleton-mensaje {
  position: relative;
  z-index: 2;
  max-width: 85%;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.wz-skeleton-mensaje.saliendo {
  opacity: 0;
  transform: translateY(-10px);
}
.wz-skeleton-mensaje.entrando {
  animation: wzMsgEntrar 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Dentro del esqueleto los mensajes son un poco más compactos */
.wz-skeleton-mensaje .wz-loader-msg {
  padding: 12px 20px;
  font-size: 13px;
}
.wz-skeleton-mensaje .wz-loader-msg-swatch {
  width: 38px;
  height: 38px;
}

/* ============================================================
   Paleta visual del loader — aparece cuando el director de arte
   eligió los colores del diseño. Le da al cliente algo concreto
   para mirar mientras espera la generación.
   ============================================================ */
.wz-loader-paleta {
  margin: 20px 0 8px;
  text-align: center;
  animation: wzFadeIn 0.5s ease-out;
}
.wz-loader-paleta-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texto-mid);
  margin-bottom: 12px;
}
.wz-loader-swatches {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.wz-loader-swatch {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  animation: wzSwatchPulse 2.4s ease-in-out infinite;
  cursor: default;
  transition: transform 0.2s;
}
.wz-loader-swatch:hover {
  transform: translateY(-4px) scale(1.08);
}
@keyframes wzSwatchPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.wz-loader-swatch-hex {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: 'Courier New', monospace;
  color: var(--texto-tenue);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.3px;
  opacity: 0;
  transition: opacity 0.2s;
}
.wz-loader-swatch:hover .wz-loader-swatch-hex {
  opacity: 1;
}
.wz-loader-mood {
  margin-top: 24px;
  font-size: 12px;
  font-style: italic;
  color: var(--texto-mid);
  text-transform: lowercase;
  letter-spacing: 0.3px;
}

/* ============================================================
   Mejorar lado (tira o retira) — botón flotante sobre la imagen
   y overlay con prompt para feedback del cliente.
   ============================================================ */
.wz-btn-mejorar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--acento);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(15, 45, 94, 0.45);
  z-index: 4;
  opacity: 1;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, box-shadow 0.2s;
}
.wz-variante-lado:hover .wz-btn-mejorar,
.wz-btn-mejorar:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(15, 45, 94, 0.6);
}
.wz-btn-mejorar:hover {
  background: var(--acento-hover);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.wz-btn-mejorar i {
  font-size: 11px;
}

/* Overlay completo sobre la imagen, con caja del prompt centrada */
.wz-mejora-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 45, 94, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 5;
  animation: wzFadeIn 0.2s ease-out;
  box-sizing: border-box;
}
.wz-mejora-box {
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 14px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wz-mejora-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.3;
}
.wz-mejora-textarea {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 70px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.wz-mejora-textarea:focus {
  border-color: var(--acento);
}
.wz-mejora-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.wz-mejora-cancelar,
.wz-mejora-aplicar {
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, transform 0.1s;
}
.wz-mejora-cancelar {
  background: transparent;
  color: var(--texto-mid);
  border: 1px solid #e2e8f0;
}
.wz-mejora-cancelar:hover {
  background: #f7fafc;
}
.wz-mejora-aplicar {
  background: var(--acento);
  color: #fff;
  border: 1px solid var(--acento);
}
.wz-mejora-aplicar:hover {
  filter: brightness(1.08);
}
.wz-mejora-aplicar:active {
  transform: scale(0.97);
}

/* Estado de loading (mientras el modelo trabaja) */
.wz-mejora-loading {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 240px;
}
.wz-mejora-loading > i {
  font-size: 28px;
  color: var(--acento);
}
.wz-mejora-loading-txt {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
}
.wz-mejora-loading-sub {
  font-size: 12px;
  color: var(--texto-mid);
  min-height: 16px;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 320px;
  line-height: 1.4;
}
.wz-mejora-loading-sub.saliendo {
  opacity: 0;
  transform: translateY(-6px);
}
.wz-mejora-loading-sub.entrando {
  animation: wzMsgEntrar 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wz-mejora-error {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}

@keyframes wzFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   "Mejorar ambos lados" — botón global de la variante + overlay
   que cubre tira + retira + acciones a la vez.
   ============================================================ */
.wz-variante-acciones-mejora {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.wz-btn-mejorar-ambos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(26, 122, 176, 0.08), rgba(26, 122, 176, 0.04));
  color: var(--acento);
  border: 1.5px dashed rgba(26, 122, 176, 0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.wz-btn-mejorar-ambos:hover {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
  border-style: solid;
}
.wz-btn-mejorar-ambos:active {
  transform: scale(0.98);
}
.wz-btn-mejorar-ambos i {
  font-size: 12px;
}

/* Overlay que cubre toda la variante (tira + retira + acciones) */
.wz-mejora-ambos-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 45, 94, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
  animation: wzFadeIn 0.2s ease-out;
  border-radius: 12px;
  box-sizing: border-box;
}
.wz-variante {
  position: relative;
}
.wz-mejora-ambos-box {
  max-width: 480px;
}
.wz-mejora-subtitulo {
  font-size: 12px;
  color: var(--texto-mid);
  margin-top: -4px;
  line-height: 1.4;
}