/* ==========================================================================
   BRIGHTLOOP — CUESTIONARIO DE ENCARGO
   --------------------------------------------------------------------------
   Composición de cuestionario.html y los componentes que sólo existen aquí:
   progreso por pasos, bloque de pregunta y tarjeta de opción.
   Ni un color literal: todo sale de tokens.css.

   La decisión que ordena la hoja: un formulario largo se lee en UNA columna
   estrecha. Nada de dos columnas ni de rejillas de tarjetas — la única
   excepción son las listas de opciones cortas, que a partir de 48rem pasan a
   dos columnas porque en una sola dan una tira interminable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ARMAZÓN
   -------------------------------------------------------------------------- */

.q-page { padding-block: clamp(var(--sp-8), 5vw, var(--sp-11)); }

/* 46rem es la medida de lectura del sistema. Aquí además hace de freno: por
   encima, las preguntas empiezan a parecer una tabla. */
.q-wrap { max-width: var(--narrow-max); margin-inline: auto; }


/* --------------------------------------------------------------------------
   2. PROGRESO
   Cinco pasos con nombre. Sin nombres, un formulario largo no tiene final
   visible; con ellos el cliente sabe qué le queda y de qué va.
   -------------------------------------------------------------------------- */

.q-progress {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: 30;
  padding-block: var(--sp-4);
  background-color: var(--surface-page);
  border-block-end: 1px solid var(--border-hairline);
}
.q-progress[hidden] { display: none; }

.q-progress__steps {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-progress__step {
  flex: 1 1 0;
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}

/* El riel de cada paso. Se rellena de izquierda a derecha con scaleX: una
   sola propiedad compuesta, sin reflow. */
.q-progress__rail {
  position: relative;
  height: 2px;
  border-radius: var(--r-full);
  background-color: var(--border-hairline);
  overflow: hidden;
}
.q-progress__rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--text-primary);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out);
}
.q-progress__step[data-state='done'] .q-progress__rail::after { transform: scaleX(1); }
.q-progress__step[data-state='now']  .q-progress__rail::after { transform: scaleX(0.5); }

.q-progress__name {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-small);
  color: var(--text-disabled);
  line-height: 1.2;
  transition: color var(--dur-base) var(--ease-in-out);

  /* A 320 px cinco nombres no caben. En vez de encogerlos hasta lo ilegible,
     se ocultan y queda el riel: la posición sigue leyéndose. */
  display: none;
}
.q-progress__step[data-state='now']  .q-progress__name { color: var(--text-primary); }
.q-progress__step[data-state='done'] .q-progress__name { color: var(--text-tertiary); }

@media (min-width: 40rem) {
  .q-progress__name { display: block; }
}

/* Contador de respaldo para pantallas estrechas */
.q-progress__count {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-small);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 40rem) { .q-progress__count { display: none; } }


/* --------------------------------------------------------------------------
   3. PASO
   -------------------------------------------------------------------------- */

.q-step[hidden] { display: none; }

.q-step__head {
  padding-block-end: clamp(var(--sp-7), 4vw, var(--sp-9));
  margin-block-end: clamp(var(--sp-7), 4vw, var(--sp-9));
  border-block-end: 1px solid var(--border-hairline);
}
.q-step__title { text-wrap: balance; }
.q-step__intro {
  margin-block-start: var(--sp-5);
  max-width: var(--measure-lead);
  color: var(--text-secondary);
}
.q-step__intro strong { color: var(--text-primary); font-weight: var(--fw-medium); }

/* Separación entre preguntas: generosa. Dos preguntas juntas se leen como
   una sola con dos partes, y ahí es donde la gente contesta mal. */
.q-step__body { display: grid; gap: clamp(var(--sp-9), 5vw, var(--sp-11)); }


/* --------------------------------------------------------------------------
   4. BLOQUE DE PREGUNTA
   -------------------------------------------------------------------------- */

.q-block {
  /* fieldset trae borde, padding y margen del navegador. Fuera los tres. */
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.q-legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-block-end: var(--sp-5);
}
/* El número va DENTRO del titular, en su mismo tipo y tamaño y un tono por
   debajo. Como en un formulario de papel: numera sin hacerse notar. La
   etiqueta mono en versalitas que había aquí antes era ruido — y de los que
   delatan una página hecha en serie. */
.q-legend__num {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-inline-end: var(--sp-1);
}
.q-legend__title {
  display: block;
  text-wrap: balance;
  color: var(--text-primary);
}
/* Se marca lo OPCIONAL, no lo obligatorio: el asterisco en catorce preguntas
   pinta el formulario de deberes. */
.q-legend__flag {
  display: inline-block;
  margin-inline-start: var(--sp-3);
  padding: 0.1875rem var(--sp-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-normal);
  letter-spacing: var(--tr-small);
  color: var(--text-tertiary);
  vertical-align: middle;
}

.q-help {
  margin-block: calc(var(--sp-5) * -1) var(--sp-5);
  max-width: var(--measure-prose);
  color: var(--text-secondary);
}
.q-note {
  margin-block-start: var(--sp-4);
  max-width: var(--measure-prose);
  color: var(--text-tertiary);
}

.q-block[data-invalid='true'] .q-legend__title { color: var(--feedback-error); }

.q-error {
  display: block;
  margin-block-start: var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--feedback-error);
}
.q-error[hidden] { display: none; }


/* --------------------------------------------------------------------------
   5. OPCIONES — la tarjeta que se pulsa
   El input nativo sigue ahí: teclado, lectores de pantalla y autorelleno
   funcionan sin una línea de JS. Sólo se le quita la pintura del navegador.
   -------------------------------------------------------------------------- */

.q-options { display: grid; gap: var(--sp-3); }

@media (min-width: 48rem) {
  .q-options--two { grid-template-columns: 1fr 1fr; }
}

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 3.25rem;                 /* E4 — objetivo táctil de sobra */
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-sm);
  background-color: var(--surface-raised);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-in-out),
    background-color var(--dur-fast) var(--ease-in-out);
}
.opt:hover { border-color: var(--border-strong); }

.opt__input {
  /* No se esconde con display:none — eso lo saca del orden de tabulación. */
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opt__mark {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--border-strong);
  background-color: var(--surface-page);
  transition:
    border-color var(--dur-fast) var(--ease-in-out),
    background-color var(--dur-fast) var(--ease-in-out);
}
/* Redonda para «una sola», cuadrada para «varias». La forma dice cuántas se
   pueden marcar antes de que nadie lea la ayuda. */
.opt__input[type='radio']    ~ .opt__mark { border-radius: var(--r-full); }
.opt__input[type='checkbox'] ~ .opt__mark { border-radius: var(--r-xs); }

.opt__mark::after {
  content: '';
  display: block;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-in-out);
}
.opt__input[type='radio'] ~ .opt__mark::after {
  width: 0.5rem; height: 0.5rem;
  margin: 0.25rem;
  border-radius: var(--r-full);
  background-color: var(--action-text);
}
/* La marca de verificación son dos trazos girados: sin icono, sin fuente. */
.opt__input[type='checkbox'] ~ .opt__mark::after {
  width: 0.3125rem; height: 0.5625rem;
  margin: 0.0625rem auto 0;
  border: 1.5px solid var(--action-text);
  border-block-start: 0;
  border-inline-start: 0;
  transform: rotate(43deg);
}

.opt__text {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-ui);
  color: var(--text-primary);
}

.opt:has(.opt__input:checked) {
  border-color: var(--text-primary);
  background-color: var(--surface-sunken);
}
.opt .opt__input:checked ~ .opt__mark {
  border-color: var(--action-bg);
  background-color: var(--action-bg);
}
.opt .opt__input:checked ~ .opt__mark::after { opacity: 1; }

/* El anillo lo pinta la tarjeta, no el input invisible */
.opt:has(.opt__input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Tope alcanzado en una pregunta de varias respuestas: lo no marcado se apaga
   pero NO se deshabilita — un input deshabilitado no explica por qué. */
.q-options[data-full='true'] .opt:not(:has(.opt__input:checked)) {
  opacity: 0.5;
}

.q-count {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-small);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
/* Al intentar una cuarta: el contador pasa a decir por qué no ha entrado */
.q-count[data-warn] { color: var(--feedback-error); }


/* --------------------------------------------------------------------------
   6. CAMPOS Y CONDICIONALES
   -------------------------------------------------------------------------- */

.q-fields { display: grid; gap: var(--sp-6); }
@media (min-width: 48rem) {
  .q-fields--two { grid-template-columns: 1fr 1fr; }
}

.q-field-inline { margin-block-start: var(--sp-3); }

/* Lo que aparece al elegir una opción cuelga de ella con una guía vertical:
   se ve que pertenece a la respuesta de arriba y no es una pregunta nueva. */
.q-branch {
  display: grid;
  gap: var(--sp-6);
  margin-block-start: var(--sp-6);
  padding-inline-start: clamp(var(--sp-5), 3vw, var(--sp-7));
  border-inline-start: 1px solid var(--border-strong);
}
.q-branch[hidden] { display: none; }

.q-fine {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border-hairline);
  max-width: var(--measure-prose);
  color: var(--text-tertiary);
}

/* Consentimiento: la casilla vive fuera de la rejilla de opciones porque no
   es una respuesta, es un requisito legal. Y va sin premarcar. */
.q-consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface-raised);
  cursor: pointer;
}
.q-consent:has(.opt__input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.q-consent .opt__mark { margin-block-start: 0.125rem; }
.q-consent__text {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
/* El input invisible tapa toda la casilla; sin esto, el enlace a la política
   queda debajo y no se puede abrir. */
.q-consent__text a { position: relative; z-index: 1; }

/* Extensiones de archivo dentro de una opción */
.opt__text code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text-secondary);
}


/* --------------------------------------------------------------------------
   7. MODELOS — la pregunta que va con captura real
   Mientras no haya capturas, el hueco se enseña vacío y dicho. No se pone un
   mockup genérico: eso es exactamente lo que la sección 04 promete no hacer.
   -------------------------------------------------------------------------- */

.q-models { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .q-models { grid-template-columns: repeat(3, 1fr); } }

.model {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-sm);
  background-color: var(--surface-raised);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-in-out);
}
.model:hover { border-color: var(--border-strong); }
.model:has(.opt__input:checked) { border-color: var(--text-primary); }
.model:has(.opt__input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Altura reservada: la captura entrará aquí sin mover nada (E6) */
.model__shot {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xs);
  background-color: var(--surface-sunken);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  text-align: center;
}
.model__shot span {
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-small);
  color: var(--text-tertiary);
}
.model__foot { display: flex; align-items: center; gap: var(--sp-3); }
.model__name { font-size: var(--fs-body-sm); color: var(--text-primary); }


/* --------------------------------------------------------------------------
   8. NAVEGACIÓN
   Pegada abajo: en el paso 5 hay ocho preguntas y el botón queda a dos
   pantallas de distancia. Ahí es donde se pierde la gente que ya había
   terminado.
   -------------------------------------------------------------------------- */

.q-nav {
  position: sticky;
  inset-block-end: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-start: clamp(var(--sp-9), 5vw, var(--sp-11));
  padding-block: var(--sp-5);
  background-color: var(--surface-page);
  border-block-start: 1px solid var(--border-hairline);
}
.q-nav__hint {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  text-align: end;
}
@media (max-width: 29.99rem) {
  .q-nav { flex-wrap: wrap; }
  .q-nav__hint { display: none; }
  .q-nav .btn { flex: 1 1 auto; }
}


/* --------------------------------------------------------------------------
   9. PORTADA Y CIERRE
   -------------------------------------------------------------------------- */

.q-cover { padding-block: clamp(var(--sp-8), 6vw, var(--sp-12)); }
.q-cover__title { text-wrap: balance; max-width: 16ch; }
.q-cover__lead {
  margin-block-start: clamp(var(--sp-6), 3vw, var(--sp-8));
  max-width: var(--measure-lead);
}
.q-cover__actions {
  margin-block-start: clamp(var(--sp-7), 4vw, var(--sp-9));
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

/* Los cinco bloques, dichos antes de empezar: lo que hace que el formulario
   tenga un tamaño conocido en vez de un tamaño temido.
   Sin numerarlos y sin rayas: son cinco, se cuentan solos, y el orden ya lo
   da la lectura. Lo que separa un bloque del siguiente es el aire. */
.q-map {
  margin-block-start: clamp(var(--sp-9), 5vw, var(--sp-11));
  display: grid;
  gap: clamp(var(--sp-6), 3vw, var(--sp-7));
  max-width: var(--measure-prose);
}
.q-map__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--sp-4) var(--sp-6);
}
.q-map__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h4);
  color: var(--text-primary);
}
.q-map__desc {
  display: block;
  margin-block-start: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-normal);
  letter-spacing: var(--tr-body);
  color: var(--text-secondary);
}
.q-map__time {
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.q-done { padding-block: clamp(var(--sp-9), 6vw, var(--sp-12)); }
.q-done__title { text-wrap: balance; max-width: 14ch; }
.q-done__lead { margin-block-start: var(--sp-7); max-width: var(--measure-lead); }
.q-done__extra {
  margin-block-start: var(--sp-8);
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-7));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface-sunken);
  max-width: var(--measure-prose);
}
.q-done__extra[hidden] { display: none; }
.q-done__extra p + p { margin-block-start: var(--sp-4); }