/* ============================================================
   Modo cliente (Tarea 5) — `quiz/show`, `quiz/resultado`, `quiz/sin_preguntas`
   y el bloque de análisis que se cuelga del resultado (`analyses/_en_quiz`).
   Fuente: docs/specs/2026-09-21-tienda-liquid-glass.md, "Modo cliente".

   SIN cápsula (decisión 5 de la spec: el candado del modo cliente es del
   servidor, y cuatro de los cinco destinos redirigirían al cuestionario) y
   SIN `_shell`: el modo cliente tiene su propia cabecera (`quiz/_cabecera`).
   Mismo fondo de tres luces que el resto de la tienda — lo único que cambia
   es la navegación, no el lenguaje visual (spec, decisión 1: la tienda no
   es "modo noche", es un solo lenguaje).

   `.quiz__pregunta`, `.quiz__progreso i`, `.quiz__paso--on`, `.quiz__nota`,
   `.quiz__opciones`, `.quiz__producto`, `.quiz__razon`, `.quiz__honesto`,
   `.quiz__sinrecomendacion`, `.quiz__vendedor` son contrato (spec,
   "Contratos que no se rompen"): los afirman `quiz_controller_test`,
   `customer_mode_test`, `herencia_entre_clientes_test` y `leads_controller_test`.
   ============================================================ */

body.tablet .quiz {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--hueco);
  padding: calc(var(--margen) + env(safe-area-inset-top))
           calc(var(--margen) + env(safe-area-inset-right))
           calc(var(--margen) + env(safe-area-inset-bottom))
           calc(var(--margen) + env(safe-area-inset-left));
}

/* ── Cabecera del modo cliente (`quiz/_cabecera`) ─────────────────────────
   Misma geometría que `.cabecera` del vendedor (`tienda/20-shell.css`), pero
   autocontenida: aquí no hay `.shell` del que tomar `--borde-izq/der`, así
   que el margen sale directo del padding de `.quiz` de arriba — misma
   rejilla, sin repetir los tokens de borde. */
body.tablet .quiz__cabecera {
  position: sticky;
  top: calc(var(--margen) + env(safe-area-inset-top));
  z-index: 40;
  flex: none;
  height: var(--cabecera);
  padding: 0 var(--space-4);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-control);
  box-shadow: var(--vidrio-relieve);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
body.tablet .quiz__marca { display: flex; flex: none; color: var(--tinta-1); }
body.tablet .quiz__marca svg { display: block; height: 20px; width: auto; }

body.tablet .quiz__avance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  max-width: 420px;
  margin: 0 auto;
}
body.tablet .quiz__cuenta { font-size: var(--text-s); color: var(--tinta-2); white-space: nowrap; }
body.tablet .quiz__titulo {
  flex: 1;
  min-width: 0;
  text-align: center;
  color: var(--tinta-1);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La barra de progreso: un `<i>` por pregunta, contiguos (sin `gap`) para
   que se lean como UNA barra y no como puntos sueltos (spec, "Modo
   cliente"). Como las respuestas son en orden, los segmentos "on" son
   siempre los primeros — por eso basta con colorearlos para que la franja
   blanca crezca de izquierda a derecha, sin más lógica que la que ya
   escribe `quiz/_cabecera`. */
body.tablet .quiz__progreso {
  display: flex;
  width: 100%;
  height: var(--space-1);
  border-radius: var(--radio-control);
  overflow: hidden;
  background: var(--vidrio-2);
}
body.tablet .quiz__progreso i { flex: 1; background: transparent; }
body.tablet .quiz__progreso i.quiz__paso--on { background: var(--solido); }

/* "Salir · NIP" (spec, decisión 5): el `.quiz__vendedor` de siempre, ahora
   como pieza de la cabecera y no como píldora fija en una esquina. Sigue
   siendo blanco sólido y legible: es la ÚNICA forma de recuperar el
   aparato. */
body.tablet .quiz__vendedor {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control);
  padding: 0 var(--space-4);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-control);
  background: var(--vidrio-2);
  color: var(--tinta-1);
  cursor: pointer;
  font: var(--weight-medium) var(--text-s) var(--font-sans);
  transition: background var(--transicion);
}
body.tablet .quiz__vendedor:hover { background: var(--vidrio-activo); }

/* ── El comentario de la respuesta anterior ────────────────────────────── */
body.tablet .quiz__nota {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radio-interior);
  background: var(--vidrio-2);
}
body.tablet .quiz__nota p { margin: 0; color: var(--tinta-1); }
body.tablet .quiz__nota-marca {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radio-control);
  background: var(--solido);
  color: var(--solido-tinta);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Pregunta: tarjeta centrada, ancho máx. 960 px (spec, "Modo cliente") ──
   Centrada también EN EL ALTO, y solo cuando cabe. `.quiz` es un flex en
   columna con `min-height: 100dvh`, así que la pregunta se quedaba pegada
   arriba con ~700 px muertos debajo en tablet. El centrado se pide con
   `margin-block: auto` y no con `justify-content: center`: un margen
   automático se reparte el espacio SOBRANTE, y cuando no sobra —el teléfono
   acostado, 844×390, donde la tarjeta es más alta que la ventana— vale 0, así
   que el borde de arriba nunca queda fuera de lo que se puede desplazar.
   Centrar el contenedor sí lo dejaba fuera de alcance. */
body.tablet .quiz__tarjeta { width: min(960px, 100%); margin: auto; }
body.tablet .quiz__pregunta {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--tinta-1);
}
body.tablet .quiz__ayuda { margin: 0 0 var(--hueco); color: var(--tinta-2); }

/* Opciones: 2 columnas, 1 en compacto (spec). Icono en cuadro de vidrio. */
body.tablet .quiz__opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (orientation: portrait) and (max-width: 599px) {
  body.tablet .quiz__opciones { grid-template-columns: 1fr; }
}
/* `button_to` envuelve cada opción en un `<form>`: sin `display: contents` el
   hijo de la rejilla es el formulario y no el botón (mismo patrón que
   `.pantallas__lista form` y `.quien__menu`). Y aun de hijo directo, un
   control de formulario mide su CONTENIDO aunque sea `display: flex` —de ahí
   el `width: 100%`—: sin las dos reglas cada opción quedaba del ancho de su
   texto y las cuatro flotaban sueltas en una tarjeta enorme, en vez de llenar
   su columna como en los bocetos. */
body.tablet .quiz__opciones form { display: contents; }
body.tablet .opcion {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--tap) * 1.5);
  padding: var(--space-4);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-interior);
  background: var(--vidrio-2);
  color: var(--tinta-1);
  text-align: left;
  font: var(--weight-regular) var(--text-l) var(--font-sans);
  cursor: pointer;
  transition: background var(--transicion);
}
body.tablet .opcion:hover,
body.tablet .opcion:focus-visible { background: var(--vidrio-activo); }
body.tablet .opcion__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radio-interior);
  background: var(--vidrio-1);
  border: 1px solid var(--vidrio-borde);
  font-size: var(--text-l);
}
body.tablet .opcion__texto { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
body.tablet .opcion__texto b { font-weight: var(--weight-medium); }
body.tablet .opcion__texto small { color: var(--tinta-2); font-size: var(--text-s); }

/* ── Resultado: dos columnas en horizontal (recomendación · análisis +
   correo), una en vertical con la recomendación primero (spec, "Modo
   cliente"). ─────────────────────────────────────────────────────────────── */
body.tablet .quiz__resultado-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hueco);
  align-items: start;
}
@media (orientation: portrait) {
  body.tablet .quiz__resultado-grid { grid-template-columns: 1fr; }
}
body.tablet .quiz__col-reco,
body.tablet .quiz__col-analisis { display: flex; flex-direction: column; gap: var(--hueco); min-width: 0; }

body.tablet .quiz__reco,
body.tablet .quiz__sinrecomendacion { display: flex; flex-direction: column; gap: var(--space-3); }
body.tablet .quiz__intro { margin: 0; color: var(--tinta-2); }
body.tablet .quiz__producto {
  margin: 0;
  font-size: var(--text-stat);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--tinta-1);
}
/* La razón por presión va pegada al nombre del colchón, como el pie de una
   frase: sin `margin: 0` el navegador le ponía su margen de párrafo y era lo
   único del resultado separado a otro ritmo. */
body.tablet .quiz__razon { max-width: 60ch; margin: 0; color: var(--tinta-1); font-size: var(--text-l); }
body.tablet .quiz__honesto { max-width: 60ch; margin: 0; color: var(--tinta-2); }
body.tablet .quiz__honesto b { font-weight: var(--weight-medium); color: var(--tinta-1); }
body.tablet .quiz__no { align-self: flex-start; }

/* El correo: tarjeta de vidrio propia, separada de la recomendación (spec:
   "análisis + correo" comparten columna, pero cada quien su tarjeta). */
body.tablet .quiz__cierre { display: flex; flex-direction: column; gap: var(--space-3); }
body.tablet .quiz__cierre h2 { margin: 0; font-size: var(--text-l); font-weight: var(--weight-medium); color: var(--tinta-1); }
body.tablet .quiz__cierre p { margin: 0; color: var(--tinta-2); }
body.tablet .quiz__cierre .input { width: 100%; }
/* «Enviar reporte» es la ÚNICA acción primaria de toda la pantalla (spec,
   "Modo cliente"): a todo lo ancho de su tarjeta, para que no se confunda
   con "Ver en la pantalla" (secundario, en la columna de al lado). */
body.tablet .quiz__cierre .btn[type="submit"] { width: 100%; }
body.tablet .consentimiento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-s);
  color: var(--tinta-2);
}

/* ── Diálogos: piel de --vidrio-flota (spec, "Modo cliente") ─────────────── */
body.tablet .salir,
body.tablet .aviso-privacidad {
  width: min(420px, 100%);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-tarjeta);
  padding: var(--relleno);
  color: var(--tinta-1);
  box-shadow: var(--vidrio-relieve), var(--shadow-pop);
}
body.tablet .aviso-privacidad { width: min(640px, 100%); }
body.tablet .salir::backdrop,
body.tablet .aviso-privacidad::backdrop { background: rgba(5, 9, 24, .6); }
body.tablet .salir h2,
body.tablet .aviso-privacidad h2 { margin-top: 0; color: var(--tinta-1); }
body.tablet .salir p,
body.tablet .aviso-privacidad p { color: var(--tinta-2); }