/* ══════════════════════════════════════════════════════════════════════════
   PARTE 6 · LAS PREGUNTAS OPCIONALES AL COMPONER
   Pantalla `screen-crear-preguntas` — portada de docs/prototipo-s106/pantallas/
   crear-preguntas.html.

   Todo anclado a #screen-crear-preguntas: en el prototipo las 34 pantallas
   viven en el mismo documento y acá pasa lo mismo, así que una clase suelta se
   le escapa a las otras.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ ESTE CONTENEDOR NO LLEVA `min-height: 100dvh`, Y ES A PROPÓSITO.
   Es el defecto que documenta la fila 88 del tablero: `.screen` es un flex de
   columna y sus hijos pueden ENCOGERSE; el seguro que lo impide se llama
   `min-height: auto`, y cualquier `min-height` explícito lo apaga. Con
   `100dvh` puesto, la caja se recorta al alto del teléfono, el padding de abajo
   queda DENTRO del recorte y no empuja el scroll ni un píxel — que es cómo el
   botón de una pantalla larga termina debajo de la barra.
   Sin min-height y con `flex-shrink: 0`, la caja mide lo que mide su contenido
   y el scroll llega hasta el final. Mismo patrón que las dos pantallas del
   diario (Parte 5).
   🟨 La fila 88 sigue ABIERTA: arregla el caso general en css/base.css y
   además hay que bajar el colchón de 460px de `.create-inner`. Esta pantalla
   nace sin el defecto; las otras siete siguen con él. */
#screen-crear-preguntas .preg-wrap {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  flex-shrink: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px
           calc(env(safe-area-inset-bottom, 0px) + 48px);
}

#screen-crear-preguntas .preg-header {
  margin-bottom: 24px;
}
/* «saltar» se lleva TODAS las preguntas de una. Va arriba y en tono bajo: es
   una salida, no una acción del flujo. */
#screen-crear-preguntas .preg-skip {
  margin-left: auto;
  min-height: 44px;
  padding: 0 6px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#screen-crear-preguntas .preg-skip:hover { color: var(--accent); }

#screen-crear-preguntas .preg-title {
  font-size: 28px;
  line-height: 1.16;
  margin-bottom: 8px;
}
#screen-crear-preguntas .preg-lede {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 30px;
}

/* Las preguntas, una debajo de otra. Sin tarjetas, sin sombras y sin pasos:
   la lista ES la simplicidad que pidió Andrés el 05-ago. */
#screen-crear-preguntas .preg-item + .preg-item {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--faint);
}
#screen-crear-preguntas .preg-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
}
#screen-crear-preguntas .preg-chips { margin-bottom: 0; }

/* `.s-chip` viene con `white-space: nowrap`, que a 393px parte una opción como
   «Con sueño, para dormirme» fuera de la pantalla. Acá las opciones son frases
   cortas pero no palabras sueltas, así que se les permite envolver — y con el
   alto ya no fijo hace falta el mínimo de 44px de Apple explícito. */
#screen-crear-preguntas .preg-chip {
  text-align: left;
  white-space: normal;
  height: auto;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.3;
}
/* La elegida se marca sola: es toda la respuesta que hace falta. */
#screen-crear-preguntas .preg-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
/* «Ninguna de las anteriores» se ve como lo que es: una salida, no una
   respuesta. Encendida se marca, pero nunca con el peso de una elección. */
#screen-crear-preguntas .preg-ninguna {
  border-style: dashed;
  color: var(--muted);
}
#screen-crear-preguntas .preg-ninguna.is-on {
  background: var(--surface);
  border-style: solid;
  border-color: var(--muted);
  color: var(--ink);
}

#screen-crear-preguntas .preg-cta { margin: 34px 0 18px; }
#screen-crear-preguntas .preg-cta .s-btn { width: 100%; }
#screen-crear-preguntas .preg-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
#screen-crear-preguntas .preg-cost-flor { color: var(--accent); }

/* La salida definitiva: se ve, se alcanza con el pulgar y no compite con nada.
   Sin caja ni borde — un botón con peso al lado de «Componer» invitaría a
   apagarlas por error. Los 44px de alto son el mínimo de Apple y acá importan
   el doble: sin caja no hay nada que insinúe dónde termina el toque. */
#screen-crear-preguntas .preg-nunca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 14px 0 18px;
  padding: 8px 0;
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
  cursor: pointer;
}
#screen-crear-preguntas .preg-nunca:active { opacity: 0.6; }

#screen-crear-preguntas .preg-disclaimer {
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  opacity: 0.85;
}

/* ── El botón de componer mientras se piden las preguntas ─────────────────
   Vive en la pantalla de CREAR, no en esta, pero es de esta feature: es el
   único momento en que ese botón tiene un estado de espera.
   Mantiene su etiqueta —no se explica lo que está pasando— y solo deja de
   responder al toque. Sin animación de puntos ni spinner: la espera es de uno
   o dos segundos y un indicador que aparece y desaparece llama más la atención
   que el propio silencio. */
#btn-generate.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #screen-crear-preguntas .preg-chip { transition: none; }
}