/* ============================================================================
   We Ötzi · Cotizador de clientes — capa de página sobre el DS Bauhaus
   Requiere /shared/css/ds/tokens.css + /shared/css/ds/components.css.
   Regla: cero hex sueltos — todo color vía var(--token).
   ========================================================================== */

/* ---------- Base / layout ---------- */
.hidden { display: none !important; }

.quotation-page { margin: 0; min-height: 100vh; }

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-md);
  box-sizing: border-box;
  /* La barra inferior es sticky: el contenido no lleva padding extra abajo. */
}

/* Sombra dura de selección (Figma: 3px offset) */
.quotation-page { --q-shadow-sel: 3px 3px 0 var(--neutral-500); }

/* ---------- Topbar ---------- */
.q-topbar-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  border-left: var(--border-hairline) solid var(--border-subtle);
  padding-left: var(--space-4);
  margin-left: var(--space-2);
  align-self: center;
  white-space: nowrap;
}

.quotation-client-header .wo-topbar-left { display: flex; align-items: stretch; }

/* ---------- Pantalla (Figma: numeral + H1 + bloques) ---------- */
.step { animation: om-fade-in var(--duration-fade) var(--ease-standard); }

.q-screen {
  max-width: 1044px;
  margin: 0 auto;
  padding: var(--space-12) 0 var(--space-16);
}

.q-screen-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.q-screen-num {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  color: var(--sand-350);
  flex: none;
}

.q-screen-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, var(--title-xl-size));
  line-height: 1.06;
  letter-spacing: var(--h1-track);
  color: var(--ink);
  margin: 0;
}

.q-screen-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
}

.q-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-top: var(--space-10);
}

.q-block { min-width: 0; }
.q-block--full { width: 100%; }

.q-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
}

/* El Figma escribe la consigna del presupuesto en mono, en caja normal. */
#block-budget .q-block-label { text-transform: none; letter-spacing: 0.02em; }

.q-block-help {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-faint);
  margin: var(--space-4) 0 0;
}

/* Contenedor de la tarjeta de artista (solo deep link ?artist=usuario) */
.question-container {
  max-width: 720px;
  margin: 0 auto;
}

.actions-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.wo-btn [data-wo-icon] { width: 18px; height: 18px; }

/* ---------- Barra inferior fija (Figma: ATRÁS · CONTINUAR) ---------- */
.q-footbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  max-width: 1044px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 80px;
  padding: var(--space-5) 0;
  background: var(--surface-page);
  border-top: var(--border-hairline) solid var(--border-subtle);
}

.q-footbar #back-btn { margin-right: auto; }
.q-footbar #continue-btn { margin-left: auto; }

/* ---------- Confirmar artista ---------- */
.q-artist-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
}

.q-artist-avatar { position: relative; }
.q-avatar-fallback { display: grid; place-content: center; width: 100%; height: 100%; color: var(--neutral-400); }
.q-artist-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.q-artist-name {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  color: var(--ink);
  margin: 0;
}

.q-artist-meta { color: var(--text-muted); margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

.q-artist-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--border-subtle);
  width: 100%;
}

.q-detail-item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--body-s-size); color: var(--text-body); }

.q-artist-price {
  font-family: var(--font-mono);
  font-size: var(--body-m-size);
  letter-spacing: 0.04em;
  color: var(--neutral-500);
  background: var(--yellow-100);
  padding: var(--space-2) var(--space-4);
  margin: 0;
}

/* ---------- Campos de texto ---------- */
.tel-group,
.city-input-group {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.tel-group .country-select { width: 128px; flex: none; }
.tel-group .wo-input { flex: 1; }

.city-input-group .wo-input { flex: 1; }
.city-input-group .btn-gps { width: var(--control-h-md); height: var(--control-h-md); flex: none; }
.city-input-group .btn-gps.loading { opacity: var(--opacity-muted); pointer-events: none; }

.textarea-wrapper .wo-textarea { min-height: 148px; font-size: var(--body-m-size); }

.textarea-counter {
  font-family: var(--font-mono);
  font-size: var(--meta-s-size);
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
  margin-top: var(--space-2);
}

.error-msg {
  margin: var(--space-2) 0 0;
  color: var(--status-error-fg);
  font-size: var(--body-s-size);
}

/* Checkboxes (preferencia de contacto) */
.checkbox-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.wo-check.checkbox-option {
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--border-strong);
  background: var(--surface-card);
}

.wo-check.checkbox-option:hover { background: var(--surface-input-hover); }

/* ---------- Opciones anchas (COLOR, Sí/No) ---------- */
.q-wide-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.q-wide-options--pair { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); }

.q-wide-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--body-m-size);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--duration-press), box-shadow var(--duration-press), background var(--duration-press);
}

.q-wide-option:hover { transform: translate(-2px, -2px); box-shadow: var(--q-shadow-sel); }
.q-wide-option:active { transform: none; box-shadow: none; }

.q-wide-option.is-selected {
  background: var(--blue-300);
  border-color: var(--blue-300);
  color: var(--white);
  box-shadow: var(--q-shadow-sel);
}

/* NIVEL DE PERSONALIZACIÓN (Figma 06): 3 opciones anchas; la seleccionada
   muestra el check a la derecha. */
.q-wide-options--triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.q-wide-option .q-option-check { display: none; margin-left: var(--space-3); flex: none; }
.q-wide-option.is-selected .q-option-check { display: inline-flex; }

/* ---------- Modo de idea (Figma 01: 286:9421 / 419:2321) ---------- */
.q-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.q-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 96px;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--body-m-size);
  font-weight: var(--weight-bold);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform var(--duration-press), box-shadow var(--duration-press), background var(--duration-press);
}

.q-mode-card:hover { transform: translate(-2px, -2px); box-shadow: var(--q-shadow-sel); }
.q-mode-card:active { transform: none; box-shadow: none; }

.q-mode-card.is-selected {
  background: var(--blue-300);
  border-color: var(--blue-300);
  color: var(--white);
  box-shadow: var(--q-shadow-sel);
}

/* ---------- Tamaño (Figma 04: indicador de escala + nombre centrados) ---------- */
.q-size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-6);
}

.q-size-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 200px;
  padding: var(--space-6) var(--space-5);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-none);
  text-align: center;
  cursor: pointer;
  transition: transform var(--duration-press), box-shadow var(--duration-press);
}

.q-size-card:hover { transform: translate(-2px, -2px); box-shadow: var(--q-shadow-sel); }
.q-size-card:active { transform: none; box-shadow: none; }

.q-size-card.is-selected {
  border: var(--border-hairline) solid var(--blue-300);
  box-shadow: var(--q-shadow-sel);
}

/* Rectángulo punteado que crece con el tamaño (Figma 04). */
.q-size-indicator {
  display: block;
  background: var(--sand-150);
  border: var(--border-hairline) dashed var(--border-muted);
  margin-bottom: var(--space-4);
}

.q-size-indicator--s { width: 24px; height: 16px; }
.q-size-indicator--m { width: 40px; height: 28px; }
.q-size-indicator--l { width: 64px; height: 44px; }
.q-size-indicator--xl { width: 96px; height: 64px; }

.q-size-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
}

.q-size-range {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  color: var(--text-muted);
}

.q-size-card.is-selected .q-size-name { color: var(--blue-300); }

.q-inline-link {
  display: inline-block;
  margin-top: var(--space-5);
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border-hairline) solid var(--border-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}

.q-inline-link:hover { color: var(--neutral-500); border-bottom-color: var(--neutral-500); }
.q-inline-link.is-selected { color: var(--blue-300); border-bottom-color: var(--blue-300); }

/* ---------- Chips (fecha y lado) ---------- */
.q-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.q-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-500);
  cursor: pointer;
  transition: transform var(--duration-press), box-shadow var(--duration-press), background var(--duration-press);
}

.q-chip:hover { transform: translate(-2px, -2px); box-shadow: var(--q-shadow-sel); }
.q-chip:active { transform: none; box-shadow: none; }
.q-chip.is-active { background: var(--yellow-300); color: var(--neutral-500); }

/* ---------- Calendario embebido (Figma 06) ---------- */
.q-calendar {
  width: 350px;
  max-width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-strong);
  box-sizing: border-box;
}

.q-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.q-cal-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}

.q-cal-nav {
  width: 32px;
  height: 32px;
  display: grid;
  place-content: center;
  background: transparent;
  border: var(--border-hairline) solid var(--border-subtle);
  color: var(--neutral-500);
  cursor: pointer;
}

.q-cal-nav:hover { background: var(--surface-input-hover); }

.q-cal-dow,
.q-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.q-cal-dow span {
  font-family: var(--font-mono);
  font-size: var(--meta-s-size);
  letter-spacing: var(--meta-s-track);
  text-align: center;
  color: var(--text-faint);
  padding-bottom: var(--space-2);
}

.q-cal-day {
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--neutral-500);
  cursor: pointer;
}

.q-cal-day:hover { background: var(--surface-input-hover); }
.q-cal-day.is-empty { pointer-events: none; }
.q-cal-day.is-adjacent { color: var(--text-faint); pointer-events: none; }
.q-cal-day.is-past { color: var(--text-faint); cursor: not-allowed; }
.q-cal-day.is-past:hover { background: transparent; }
.q-cal-day.is-selected { background: var(--blue-300); color: var(--white); }

/* ---------- Presupuesto por tramos (Figma 06) ---------- */
.q-budget-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
}

.q-budget-tier {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.q-budget-bar {
  display: block;
  width: 100%;
  background: var(--sand-350);
  transition: background var(--duration-press);
}

.q-budget-tier:hover .q-budget-bar { background: var(--neutral-300); }
.q-budget-tier.is-active .q-budget-bar { background: var(--blue-300); }

.q-budget-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
}

.q-budget-tier.is-active .q-budget-label { color: var(--blue-300); }

/* ---------- Selector de zona (Figma 03: aside silueta + grilla) ---------- */
/* Layout del frame 318:20160: columna izquierda de 376px (aside 318:19919)
   + grilla de zonas en 3 columnas a la derecha. */
.q-body-layout {
  display: grid;
  grid-template-columns: 376px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.q-body-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  background: var(--surface-stage);
  padding: var(--space-8) var(--space-6);
}

.q-body-aside .q-sil { width: 100%; max-width: 280px; height: auto; display: block; }

.q-sil-seg {
  fill: var(--neutral-100);
  stroke: var(--sand-350);
  stroke-width: 2;
  transition: fill var(--duration-press);
}

.q-sil-seg.is-active { fill: var(--blue-300); stroke: var(--blue-300); }

.q-body-aside-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-on-dark);
  margin: 0;
}

/* Toggle del aside: solo existe colapsado en pantallas chicas. */
.q-body-aside-toggle { display: none; margin: 0 0 var(--space-6); }

.q-body-layout .q-zone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.q-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-6);
}

.q-zone-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.q-zone-media {
  display: block;
  height: 155px;
  background: var(--surface-media);
  border: var(--border-hairline) solid var(--border-strong);
  overflow: hidden;
  transition: transform var(--duration-press), box-shadow var(--duration-press), border-color var(--duration-press);
}

.q-zone-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-zone-media.is-empty { background: var(--sand-150); }

.q-zone-tile:hover .q-zone-media { transform: translate(-2px, -2px); box-shadow: var(--q-shadow-sel); }
.q-zone-tile:active .q-zone-media { transform: none; box-shadow: none; }

.q-zone-tile.is-selected .q-zone-media {
  border-color: var(--blue-300);
  box-shadow: var(--q-shadow-sel);
}

.q-zone-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
}

.q-zone-tile.is-selected .q-zone-label { color: var(--blue-300); }

.empty-sheet-msg {
  font-size: var(--body-s-size);
  color: var(--text-muted);
  margin: var(--space-2) 0;
}

.q-side-panel {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-strong);
}

.q-side-zone {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 var(--space-5);
}

/* ---------- Estilos de tatuaje (Figma 02: 5 cards de ~178px por fila) ---------- */
.styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--space-6);
}

.style-card-wrap { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.style-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: transform var(--duration-press), box-shadow var(--duration-press), border-color var(--duration-press);
}

.style-card:hover { transform: translate(-2px, -2px); box-shadow: var(--q-shadow-sel); }
.style-card:active { transform: none; box-shadow: none; }

.style-card.selected {
  border-color: var(--blue-300);
  box-shadow: var(--q-shadow-sel);
}

.style-card-cover {
  display: block;
  height: 155px;
  background: var(--surface-media);
  overflow: hidden;
}

.style-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.style-card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  color: var(--text-faint);
}

.style-check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 24px;
  height: 24px;
  display: grid;
  place-content: center;
  background: var(--blue-300);
  color: var(--white);
}

.style-check [data-wo-icon] { width: 14px; height: 14px; }

.style-card-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
  margin: 0;
}

.style-card-title.is-selected { color: var(--blue-300); }

.styles-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16) 0;
  color: var(--text-muted);
}

/* ---------- Referencias (Figma 01 y 05) ---------- */
.q-drop-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  margin: 0;
}

.q-drop-hint { color: var(--text-muted); margin: 0; }

.wo-dropzone.upload-area {
  max-width: 406px;
  border: var(--border-hairline) solid var(--border-strong);
  background: var(--surface-page);
}

.wo-dropzone.is-full { opacity: var(--opacity-disabled); pointer-events: none; }

.q-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.q-ref-cell { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.q-ref-tile {
  position: relative;
  height: 155px;
  background-size: cover;
  background-position: center;
  border: var(--border-hairline) solid var(--border-strong);
}

/* Nota por referencia (Figma 05): input de solo borde inferior. */
.q-ref-note {
  width: 100%;
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border-hairline) solid var(--border-muted);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--body-s-size);
  color: var(--ink);
}

.q-ref-note::placeholder { color: var(--text-faint); }
.q-ref-note:hover { border-bottom-color: var(--border-strong); }
.q-ref-note:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.q-ref-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-strong);
  color: var(--neutral-500);
  cursor: pointer;
}

.q-ref-remove:hover { background: var(--neutral-200); }
.q-ref-remove [data-wo-icon] { width: 16px; height: 16px; }

.q-ref-add {
  height: 155px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: transparent;
  border: var(--border-hairline) dashed var(--border-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}

.q-ref-add:hover { border-color: var(--border-strong); color: var(--neutral-500); }

/* ---------- Resumen (Figma 08) ---------- */
.q-summary-block { display: block; }

.q-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-7);
}

/* Figma 08: 3 columnas estrictas, sin celdas anchas — IDEA | ESTILO |
   UBICACIÓN / TAMAÑO | REFERENCIAS | PRESUPUESTO / FECHA. */
.q-summary-item { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.q-summary-k {
  font-family: var(--font-mono);
  font-size: var(--meta-s-size);
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  color: var(--text-faint);
}

.q-summary-v {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.q-moodboard { margin-top: var(--space-10); }
.q-moodboard-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.q-moodboard-thumb {
  width: 80px;
  height: 80px;
  background-size: cover;
  background-position: center;
  border: var(--border-hairline) solid var(--border-strong);
}

.q-final {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--border-hairline) solid var(--border-strong);
}

.q-final-title {
  font-family: var(--font-display);
  font-size: var(--title-sm-size);
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.q-final-copy {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 0 var(--space-6);
}

.q-final-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.q-final-actions .wo-btn { min-height: 48px; }


/* ---------- Éxito ---------- */
.success-content {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-12) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.success-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-content: center;
  background: var(--yellow-300);
  color: var(--neutral-500);
  border: var(--border-strong-width) solid var(--border-strong);
}

.success-icon [data-wo-icon] { width: 32px; height: 32px; }

.success-content h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, var(--title-lg-size));
  color: var(--ink);
  margin: 0;
}

.success-quote-id {
  font-family: var(--font-mono);
  font-size: var(--body-s-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.highlight-text { background: var(--yellow-300); color: var(--neutral-500); padding: 0 var(--space-1); }

.success-msg { font-size: var(--body-l-size); color: var(--text-body); margin: 0; }
.success-msg span { font-weight: var(--weight-bold); }

.create-account-section,
.next-steps-section {
  width: 100%;
  border: var(--border-hairline) solid var(--border-strong);
  background: var(--surface-card);
  padding: var(--space-6);
  text-align: left;
}

.create-account-section h3,
.next-steps-section h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.benefits-intro { color: var(--text-muted); margin: 0 0 var(--space-3); }

.benefits-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.benefits-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--body-s-size);
  color: var(--text-body);
}

.benefits-list [data-wo-icon] { width: 16px; height: 16px; color: var(--blue-400); }

.account-actions,
.success-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.next-steps-content { font-size: var(--body-s-size); line-height: var(--body-s-lh); color: var(--text-body); }
.next-steps-content p { margin: 0 0 var(--space-3); }

.account-reminder {
  width: 100%;
  font-size: var(--body-s-size);
  color: var(--text-muted);
  border-left: var(--border-rule-width) solid var(--yellow-300);
  background: var(--surface-card);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.account-reminder p { margin: 0; display: flex; gap: var(--space-2); align-items: flex-start; }
.account-reminder [data-wo-icon] { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.social-links { display: flex; gap: var(--space-3); }

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--meta-m-size);
  letter-spacing: var(--meta-m-track);
  text-transform: uppercase;
  color: var(--neutral-500);
  border-bottom: var(--border-strong-width) solid var(--neutral-500);
  padding-bottom: 2px;
}

.social-btn:hover { color: var(--black); text-decoration: none; }

.upload-warning { width: 100%; text-align: left; }

/* ---------- Toast ---------- */
.form-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-8);
  transform: translate(-50%, 16px);
  max-width: min(480px, calc(100vw - 32px));
  background: var(--surface-overlay);
  color: var(--text-on-dark);
  border: var(--border-strong-width) solid var(--surface-overlay-border);
  padding: var(--space-4) var(--space-5);
  font-size: var(--body-s-size);
  line-height: var(--body-s-lh);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fade) var(--ease-standard), transform var(--duration-fade) var(--ease-standard);
  z-index: 1100;
}

.form-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Modales de borrador / reuso de email ---------- */
.draft-recovery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 33, 29, var(--opacity-subtle));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  z-index: 1000;
}

.draft-recovery-modal {
  background: var(--surface-card);
  border: var(--border-strong-width) solid var(--border-strong);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-8);
  text-align: center;
}

.recovery-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  display: grid;
  place-content: center;
  background: var(--yellow-300);
  color: var(--neutral-500);
  border: var(--border-strong-width) solid var(--border-strong);
}

.recovery-title {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.recovery-subtitle { color: var(--text-muted); margin: 0 0 var(--space-5); }

.draft-summary-info {
  border: var(--border-hairline) solid var(--border-subtle);
  background: var(--surface-input);
  padding: var(--space-4);
  text-align: left;
  font-size: var(--body-s-size);
  margin-bottom: var(--space-5);
}

.draft-summary-info p { margin: 0 0 var(--space-1); }
.draft-summary-info p:last-child { margin-bottom: 0; }

.reuse-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.reuse-label {
  font-family: var(--font-mono);
  font-size: var(--meta-s-size);
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  color: var(--text-muted);
}

.reuse-value { font-weight: var(--weight-bold); color: var(--ink); }
.reuse-value.highlight { background: var(--yellow-300); color: var(--neutral-500); padding: 0 var(--space-1); }

.reuse-question { font-size: var(--body-m-size); color: var(--text-body); margin: 0 0 var(--space-5); }

.steps-progress-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  text-align: left;
  margin-bottom: var(--space-5);
}

.steps-column {
  border: var(--border-hairline) solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
}

.steps-column h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--meta-s-size);
  letter-spacing: var(--meta-s-track);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

.steps-completed-column h4 { color: var(--success-fg); }
.steps-pending-column h4 { color: var(--text-muted); }

.steps-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--body-s-size);
  color: var(--text-body);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 180px;
  overflow-y: auto;
}

.recovery-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- Login embebido ---------- */
.q-login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 33, 29, var(--opacity-subtle));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  z-index: 1200;
}

.q-login-modal {
  position: relative;
  background: var(--surface-card);
  border: var(--border-strong-width) solid var(--border-strong);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-8);
}

.q-login-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-strong);
  color: var(--neutral-500);
  cursor: pointer;
}

.q-login-close:hover { background: var(--neutral-200); }

.q-login-header { text-align: center; margin-bottom: var(--space-6); }

.q-login-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  display: grid;
  place-content: center;
  background: var(--yellow-300);
  color: var(--neutral-500);
  border: var(--border-strong-width) solid var(--border-strong);
}

.q-login-icon-success { background: var(--success-bg); color: var(--success-fg); }

.q-login-header h2 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.q-login-subtitle { color: var(--text-muted); margin: 0; font-size: var(--body-s-size); }

.q-form-group { margin-bottom: var(--space-4); }

.q-form-message {
  min-height: 20px;
  font-size: var(--body-s-size);
  margin-bottom: var(--space-3);
}

.q-msg-error { color: var(--status-error-fg); }
.q-msg-success { color: var(--status-success-fg); }
.q-msg-info { color: var(--status-info-fg); }

.q-btn-submit .q-spinner { width: 20px; height: 20px; border-width: 2px; border-color: var(--neutral-300); border-top-color: var(--white); }

.q-login-footer {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--body-s-size);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.q-login-back { margin: 0; }

.q-decision-text { text-align: center; font-size: var(--body-m-size); color: var(--text-body); margin: 0 0 var(--space-5); }

.q-decision-actions { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- Loading overlay ---------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 33, 29, var(--opacity-subtle));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  z-index: 1300;
}

.loading-overlay .wo-spinner { border-color: var(--neutral-300); border-top-color: var(--yellow-300); width: 36px; height: 36px; }

.loading-msg {
  font-family: var(--font-mono);
  font-size: var(--meta-m-size);
  letter-spacing: var(--meta-m-track);
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

/* ---------- Flatpickr (tema claro DS) ---------- */
.flatpickr-calendar {
  border-radius: var(--radius-none);
  border: var(--border-strong-width) solid var(--border-strong);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-body);
}

.flatpickr-day { border-radius: var(--radius-none); }

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--neutral-500);
  border-color: var(--neutral-500);
  color: var(--white);
}

.flatpickr-day.inRange {
  background: var(--yellow-100);
  border-color: var(--yellow-100);
  box-shadow: -5px 0 0 var(--yellow-100), 5px 0 0 var(--yellow-100);
}

.flatpickr-day.today { border-color: var(--yellow-300); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .q-screen { padding: var(--space-10) 0 var(--space-12); }
  .q-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-budget-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* El aside de la silueta se colapsa detrás del toggle. */
  .q-body-layout { grid-template-columns: 1fr; }
  .q-body-layout .q-zone-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .q-body-aside-toggle { display: inline-block; }
  .q-body-aside { display: none; max-width: 376px; width: 100%; }
  .q-body-aside.is-open { display: flex; margin-bottom: var(--space-6); }
}

@media (max-width: 768px) {
  #main-content { padding: 0 var(--margin-xs) var(--space-8); }

  .q-topbar-tag { display: none; }

  .q-screen { padding: var(--space-8) 0 var(--space-10); }
  .q-screen-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .q-blocks { gap: var(--space-8); }

  .q-footbar { min-height: 68px; padding: var(--space-3) 0; gap: var(--space-3); }
  .q-footbar #continue-btn { flex: 1; max-width: 240px; }

  .q-wide-options,
  .q-wide-options--pair,
  .q-wide-options--triple { grid-template-columns: 1fr; }

  .q-mode-toggle { grid-template-columns: 1fr; gap: var(--space-4); }

  .q-calendar { width: 100%; }

  .steps-progress-container { grid-template-columns: 1fr; }

  .actions-row { flex-direction: column; align-items: stretch; }
  .actions-row .wo-btn { width: 100%; }

  .q-final-actions { flex-direction: column; align-items: stretch; }
  .q-final-actions .wo-btn { width: 100%; }

  .account-actions,
  .success-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  .q-summary-grid { grid-template-columns: 1fr; }

  .q-size-grid,
  .q-zone-grid,
  .q-body-layout .q-zone-grid,
  .styles-grid,
  .q-ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

  .q-zone-media,
  .style-card-cover,
  .q-ref-tile,
  .q-ref-add { height: 120px; }

  .q-budget-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

  .checkbox-options { grid-template-columns: 1fr; }

  .q-chips .q-chip { flex: 1 1 auto; justify-content: center; }
}