/* ═══ view-wizard.css ═══
   Vistas del wizard.
   El <style> inline de app.html redefine parcialmente .wiz-section,
   .wiz-section-title, .wiz-row, .chip-group, .chip*. La duplicación
   está trazada como deuda separada (CP-8); este archivo conserva
   ambas formas — la cascade real la decide el inline porque carga
   después del <link>.
   Depende de: tokens.css, base.css, layout.css, components.css.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Wizard v2 — Formulario inteligente (s26, Bloque 2) ═══
   Añadir al final de css/styles.css
   ═══════════════════════════════════════════════════════════ */

/* ── Secciones del wizard ── */
.wiz-section {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.wiz-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
  letter-spacing: -0.01em;
}

/* ── Row layout para campos lado a lado ── */
.wiz-row {
  display: flex;
  gap: 16px;
}

@media (max-width: 640px) {
  .wiz-row {
    flex-direction: column;
    gap: 0;
  }
  .wiz-section {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: var(--radius);
  }
  .wiz-section-title {
    font-size: 15px;
    margin-bottom: 14px;
    padding-bottom: 8px;
  }
  .form-label {
    font-size: 13px;
  }
  .form-hint {
    font-size: 11.5px;
  }
  .btn-lg {
    padding: 14px 24px;
    font-size: 15px;
    min-height: 48px;
  }
}

/* ── Chip groups que hacen wrap ── */
.chip-group-wrap {
  flex-wrap: wrap;
}

/* ── Chips del wizard: base funcional ──
   El tema visual sutil (padding, border, radius, colores)
   vive en el <style> inline de app.html y pisa al externo
   por orden de cascade. Aquí sólo quedan las propiedades
   no pisadas: layout flex, tipografía base, white-space,
   user-select y micro-feedback al click. */

.chip-group {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chip-group::-webkit-scrollbar { display: none; }

.chip-group.chip-group-wrap {
  flex-wrap: wrap;
  overflow-x: visible;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.chip:active {
  transform: scale(0.96);
}
/* ═══ Tone selector v34 — chips anchos del wizard ═══════════
   Anexar al final de css/styles.css.
   Selector de tono al final del wizard, justo antes de "Generar
   textos". Dos chips ("Profesional" / "Cercano") con título en
   negrita y subtítulo en texto secundario. Estilo diferenciado
   del .chip pill estándar porque aquí el control es más decisional:
   el usuario lee el subtítulo antes de elegir. Valores internos
   ('profesional' / 'emocional') casan con los .md del motor de
   prompts; "Cercano" es solo la etiqueta visible.
   ═══════════════════════════════════════════════════════════ */

.tone-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tone-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px;
  font-family: var(--font);
  text-align: left;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--c-text);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.tone-chip:hover {
  border-color: var(--c-primary);
}

.tone-chip.selected {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(194, 106, 74, 0.2);
}

.tone-chip:active {
  transform: scale(0.98);
}

.tone-chip-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.tone-chip-sub {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--c-text-muted);
  line-height: 1.35;
}

.tone-chip.selected .tone-chip-sub {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
  .tone-group {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tone-chip {
    padding: 12px 14px;
  }
}

/* v80 (Tarea 3): feedback visual permanente para inputs numéricos con
   valor por debajo del suelo de _NUMERIC_BOUNDS (wizard.js). Sustituye
   al antiguo toastError de bounds en doGenerate. Se aplica/quita al vuelo
   en el listener 'input' vía _validateNumericBound; el botón #btnGenerate
   queda deshabilitado mientras haya algún input con esta clase.
   Sin animaciones por decisión de v80. */
.wz-input-error {
  border-color: #d33;
  background-color: rgba(211, 51, 51, 0.04);
}
.wz-input-error:focus {
  border-color: #d33;
  box-shadow: 0 0 0 3px rgba(211, 51, 51, 0.12);
}