/*
 * DuDoctor · Flujo "Empezar consulta" (consulta.css)
 *
 * Lo que site.css NO cubre del flujo /consulta: estados del modo asistente, transiciones entre
 * pasos, pantalla de revisión, detalles de la pantalla de datos y de la confirmación. La carga
 * ConsultaController vía extraCss, siempre DESPUÉS de branding.css, tokens.css y site.css.
 *
 * MOBILE FIRST: lo base es para móvil; las mejoras van en @media (min-width: 600 / 900 / 1200).
 * Solo variables de branding.css (la marca). Sin frameworks.
 */

/* ==========================================================================
   1. EL ATRIBUTO hidden MANDA

   Varias clases del catálogo declaran display (flex / grid) y eso gana al [hidden] de la hoja
   del navegador: sin esta regla, los bloques que el HTML entrega ocultos (avisos de alerta,
   errores vacíos, vista previa de la foto, barra de progreso…) se verían siempre, también sin
   JavaScript. Se limita al flujo de consulta para no tocar el resto de la web.
   ========================================================================== */

.quiz [hidden] { display: none !important; }

/* ==========================================================================
   2. CABECERA DEL CUESTIONARIO
   ========================================================================== */

/* El titular vive dentro de .quiz__topic (fila con el icono del tema): tamaño de fila, no de h1. */
.quiz__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Nota corta y sobria: la usan el selector de tema, el cuestionario y la pantalla de datos. */
.quiz-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.quiz-note svg { flex: none; margin-top: 2px; color: var(--muted); }
.quiz-note a { font-weight: 600; }

/* Garantías bajo el selector de tema. */
.quiz-trust {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.quiz-trust li { display: flex; align-items: center; gap: var(--s-2); }
.quiz-trust svg { flex: none; color: var(--brand-accent); }

/* El antetítulo del selector («Empezar consulta» o, en una categoría, «Cambiar»): con el color FIJO de la marca,
   no con el de la categoría (lo pidió Pablo). */
.quiz .section-head__eyebrow { color: var(--brand-accent); }
.quiz .section-head__eyebrow .link-arrow { color: inherit; }

/* El formulario del cuestionario (.quiz-form), la ventana del aviso que lo frena (.quiz-dialog) y su versión sin
   JavaScript (.quiz-stop) llevan .brand-scope (la marca): la respuesta elegida, el foco, el «¿Por qué se pregunta
   esto?», el medicamento y el precio elegidos y los botones van con el color FIJO de la marca, no con el del
   tratamiento (lo pidió Pablo). Arriba, el icono del tratamiento y la barra de progreso siguen con el suyo. */

/* Las consultas a medias, antes del selector (consulta/topics, quiz-reminders.js): sin nada a medias
   (.is-resuming) no salen; con algo y con JavaScript, el selector espera a «Empezar una consulta nueva»
   (#elegir, que lo abre también con :target). Sin JavaScript, las dos cosas, una debajo de otra. */
.quiz-start:not(.is-resuming) .quiz-resume { display: none; }
.js .quiz-start.is-resuming .quiz-chooser:not(:target) { display: none; }
.quiz-resume { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.quiz-resume .section-head { margin-bottom: 0; }
.quiz-resume__new { justify-self: stretch; }
.quiz-chooser:focus { outline: none; }
@media (min-width: 600px) {
  .quiz-resume__new { justify-self: start; }
}

/* ==========================================================================
   3. PREGUNTAS
   ========================================================================== */

/* "Solo si has respondido «Sí» a…": solo tiene sentido en la versión sin JavaScript. */
.quiz__cond {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.quiz__cond svg { flex: none; margin-top: 3px; }

.quiz__help--hint { font-size: var(--fs-sm); }
.quiz__help + .quiz__help--hint { padding-top: var(--s-1); }

/* Error de una pregunta (site.css ya da color y tipografía a .field__error). */
.quiz__error { padding-top: var(--s-4); clear: both; }
.quiz__error svg { flex: none; margin-top: 2px; }
.quiz__question.has-error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent), var(--shadow-sm);
}

/* Alerta clínica: informa, no bloquea. */
.quiz-flag__go { display: block; margin-top: var(--s-1); font-weight: 600; }

/* --------------------------------------------------------------------------
   «¿Por qué se pregunta esto?»

   Un <details> nativo: se abre y se cierra sin una línea de JavaScript, y el asistente lo esconde
   y lo enseña con su pregunta porque vive DENTRO de .quiz__question. Misma gramática visual que
   las FAQs de la web (.faq__item), pero más contenida: aquí es una nota al pie de una pregunta,
   no el contenido principal de la página.
   -------------------------------------------------------------------------- */
.quiz-why {
  margin-top: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}
.quiz-why[open] { border-color: var(--accent-line); }

.quiz-why__q {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);                   /* objetivo táctil, como el resto de controles */
  padding: var(--s-2) var(--s-3);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;                         /* Firefox */
}
.quiz-why__q::-webkit-details-marker { display: none; }
.quiz-why__q svg { flex: none; color: var(--accent); }
.quiz-why__q > span { flex: 1; min-width: 0; }
.quiz-why__q::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .6;
}
.quiz-why[open] .quiz-why__q { color: var(--ink); }
.quiz-why[open] .quiz-why__q::after { transform: rotate(-135deg) translate(-2px, -2px); }

.quiz-why__a {
  padding: 0 var(--s-3) var(--s-3);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Pregunta IMC: dos campos y un indicador en vivo.

   La ESCALA no es lineal sobre el IMC sino sobre los TRAMOS: cada etapa ocupa lo mismo para que
   sus cuatro nombres quepan y se lean. Dentro de un tramo, el marcador sí va proporcional. El
   cálculo vive en ConsultaService::imcPosition() y consulta.js lo repite al pie de la letra.

   Sin JavaScript el marcador no se mueve al escribir: se pinta donde lo dejó el servidor (o no se
   pinta). Es honesto: el IMC de verdad lo calcula PHP al enviar.
   -------------------------------------------------------------------------- */
.quiz-imc { display: grid; gap: var(--s-4); }
.quiz-imc__fields { display: grid; gap: var(--s-3); }
@media (min-width: 600px) {
  /* Altura y peso caben de sobra en una fila en cuanto hay ancho: se leen como un solo dato. */
  .quiz-imc__fields { grid-template-columns: 1fr 1fr; }
}

.quiz-imc__out {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}
.quiz-imc__value {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;       /* que no baile al cambiar de cifra */
}
.quiz-imc__stage { color: var(--muted); font-size: var(--fs-sm); }

.imc-scale { display: grid; gap: var(--s-2); }

.imc-scale__bar {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;                   /* los cuatro tramos, iguales */
  gap: 2px;
  height: 10px;
}
.imc-scale__seg { border-radius: var(--r-pill); background: var(--bg-sunken); }
/* Los colores dicen «esto es una escala», no un diagnóstico: el que informa es el texto. */
.imc-scale__seg--1 { background: color-mix(in srgb, var(--warn) 35%, var(--bg-sunken)); }
.imc-scale__seg--2 { background: color-mix(in srgb, var(--ok) 45%, var(--bg-sunken)); }
.imc-scale__seg--3 { background: color-mix(in srgb, var(--warn) 45%, var(--bg-sunken)); }
.imc-scale__seg--4 { background: color-mix(in srgb, var(--danger) 40%, var(--bg-sunken)); }

/* El marcador se sitúa con --imc-pos (0-100 %), que escriben el servidor y consulta.js. */
.imc-scale__pin {
  position: absolute;
  top: 50%;
  left: var(--imc-pos, 0%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .imc-scale__pin { transition: left .25s var(--ease); }
}

.imc-scale__legend {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  font-size: var(--fs-xs);
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
}
.imc-scale__legend span { min-width: 0; overflow-wrap: anywhere; }

/* Foto que ya viajaba en el borrador (vuelta desde la pantalla de datos). */
.upload__kept {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}
.upload__kept .upload__meta { min-width: 0; }
.upload__remove { flex: none; margin: 0; }

/* ==========================================================================
   4. MODO ASISTENTE (consulta.js añade .is-wizard)

   Una pregunta por pantalla: lo que sobra de la versión larga se retira y cada paso entra con
   un desplazamiento corto (lo neutraliza prefers-reduced-motion desde branding.css).
   ========================================================================== */

.quiz.is-wizard .quiz__cond { display: none; }        /* la condición la resuelve el asistente */
.quiz.is-wizard .quiz__intro { margin-bottom: var(--s-4); font-size: var(--fs-sm); }

.quiz.is-wizard .quiz__question { animation: quiz-step .28s var(--ease) both; }
.quiz.is-wizard .quiz-review { animation: quiz-step .28s var(--ease) both; }

@keyframes quiz-step {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* La barra de progreso aparece pegada a la cabecera, con algo más de aire alrededor. */
.quiz.is-wizard .quiz__count { font-weight: 600; }

/* ==========================================================================
   5. PANTALLA DE REVISIÓN
   ========================================================================== */

/* --------------------------------------------------------------------------
   Medicamento que solicita el paciente: DOS pantallas del asistente sobre el MISMO bloque
   (.is-dose esconde las tarjetas que no son la elegida). UNA columna en todos los anchos: cada
   tarjeta es una fila con la portada a la izquierda desde 600px. Las dosis viven en la segunda
   pantalla; en la primera no se ven nunca (con JavaScript). Sin JavaScript se ve todo, con todas
   las dosis y la nota «Solo si…» de cada tarjeta condicionada. No se puede duplicar el marcado:
   dos <input name="treatment"> en el mismo formulario harían que PHP se quedara con el último.
   -------------------------------------------------------------------------- */

.quiz-treatments { display: block; }
.treatments { display: grid; gap: var(--s-3); }

.treatment {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1.5px solid color-mix(in srgb, var(--muted) 38%, var(--line));
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* Con :has() la tarjeta se enciende SOLA, también sin JavaScript; .is-chosen es el respaldo. La
   sombra base se combina con el anillo interior para no perderla al elegir. Dos reglas y no una
   lista: un navegador sin :has() descarta la regla ENTERA, y con ella el respaldo. */
.treatment.is-chosen { border-color: var(--accent); background: var(--accent-softer); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm); }
.treatment:has(input[name="treatment"]:checked) { border-color: var(--accent); background: var(--accent-softer); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm); }
.treatment:has(input[name="treatment"]:focus-visible) { box-shadow: var(--ring); }
@media (hover: hover) { .treatment:hover { border-color: var(--accent-line); } }

/* Filtrada por sus condiciones con las respuestas actuales (consulta.js). Sin JavaScript nadie
   pone la clase: se ven todas, con su nota, y el servidor decide al enviar. */
.quiz.is-wizard .treatment--off { display: none; }
.quiz.is-wizard .treatment__cond { display: none; }
.treatment__cond { padding-top: 0; }

/* El <label> es REJILLA con áreas, no flex ni columnas contadas: así la portada cambia de sitio
   (arriba en móvil, a la izquierda desde 600px) sin tocar el orden del DOM ni contar columnas
   —`grid-column: -1` habría metido el radio en una columna implícita fuera de la rejilla—. */
.treatment__pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "body pick";
  gap: var(--s-2) var(--s-3);
  align-items: start;
  min-height: 0;
  padding: 0;
}
.treatment--cover .treatment__pick { grid-template-areas: "cover cover" "body pick"; }
.treatment__pick input[type="radio"] { grid-area: pick; margin-top: 2px; }
.treatment__cover {
  grid-area: cover;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
}

/* Cuerpo: nombre, «Seleccionado», etiquetas y descripción apilados. Clases propias, no
   `.treatment__pick span`: pegaría su peso a las etiquetas, que son <span class="badge">. */
.treatment__body { grid-area: body; display: grid; gap: var(--s-2); min-width: 0; }
.treatment__name { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.treatment__badges { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.treatment__badges .badge { white-space: normal; }   /* una etiqueta puede llevar dos palabras largas */
/* La descripción viene de un textarea: se respetan sus saltos sin nl2br (una sola llamada a e()). */
.treatment__note { display: block; white-space: pre-line; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-base); }

/* «Seleccionado» solo existe en la pantalla de la dosis, y lo decide el CSS. */
.treatment__chosen { display: none; }
.quiz-treatments.is-dose .treatment.is-chosen .treatment__chosen { display: inline-flex; justify-self: start; }
.quiz-treatments.is-dose .treatment:has(input[name="treatment"]:checked) .treatment__chosen { display: inline-flex; justify-self: start; }

/* Las dosis: lista de opciones bajo la tarjeta. Sin JavaScript se ven siempre (no hay pantallas);
   con él, `hidden` (syncDoses) y este cinturón fuera de la pantalla de la dosis. El <legend> no es
   ítem de la rejilla del fieldset: se pinta solo, encima, y no necesita flex ni grid-column. */
.treatment__doses {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3) 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}
.quiz.is-wizard .quiz-treatments:not(.is-dose) .treatment__doses { display: none; }
.treatment__legend { display: block; width: 100%; margin-bottom: var(--s-2); padding: 0; color: var(--ink); font-size: var(--fs-base); font-weight: 700; }
.treatment__dose {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-2) var(--s-4);
  border: 1.5px solid color-mix(in srgb, var(--muted) 38%, var(--line));
  border-radius: var(--r-md);
  background: var(--bg);
  font-weight: 650;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.treatment__dose:hover { border-color: var(--accent-line); }
.treatment__dose:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); box-shadow: inset 0 0 0 1px var(--accent); }
.treatment__dose:has(input:focus-visible) { box-shadow: var(--ring); }

/* Pantalla de la DOSIS: la tarjeta elegida y, debajo, el recuadro de dosis destacado. */
.quiz-treatments.is-dose .treatment__doses { margin-top: var(--s-2); padding: var(--s-4); border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--bg); }

/* «Prefiero que lo decida el médico»: la misma forma que una tarjeta, en gris y a trazo discontinuo. */
.treatment__none {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-2) var(--s-4);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--ink-soft);
}
.treatment__none:has(input:checked) { border-style: solid; border-color: var(--accent); background: var(--accent-softer); color: var(--ink); }

/* --------------------------------------------------------------------------
   El PRECIO que elige el paciente (solo con varios: ConsultaController::renderQuestionnaire()).
   Una pantalla del asistente detrás de los medicamentos; las tarjetas son las .option-card de la
   marca: aquí solo el importe, el tachado y la línea de debajo.
   -------------------------------------------------------------------------- */
.quiz-prices__list { margin-top: var(--s-3); }
.quiz-price__amount { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.02em; }
.quiz-price__old { margin-right: var(--s-1); color: var(--muted); font-size: var(--fs-base); font-weight: 500; letter-spacing: 0; }
.quiz-price__line { font-size: var(--fs-sm); color: var(--ink-soft); }
.quiz-prices__note { margin-top: var(--s-3); }

.quiz-review { display: block; }
.quiz-review .card__head { gap: var(--s-3); }
.answers__edit { white-space: nowrap; }
.answers__a--empty { font-weight: 500; font-style: italic; color: var(--muted); }

/* ==========================================================================
   6. PANTALLA DE DATOS (identificación, ventana «Inicia sesión», consentimientos y pago)
   ========================================================================== */

.quiz-step__title {
  margin-bottom: var(--s-3);
  font-size: var(--fs-xl);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.quiz-send { display: grid; gap: var(--s-4); }
.quiz-send__title { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.quiz-send__hint { margin-top: var(--s-2); margin-bottom: var(--s-5); color: var(--ink-soft); }

/* «Tu cuenta» (modo «current»): quién envía la consulta y el cambio de cuenta, en un solo recuadro.
   En el móvil el cambio va debajo, tras una raya, a todo el ancho; desde 600px, a la derecha. La
   etiqueta va sin mayúsculas: en mayúsculas y con espaciado se partía en dos líneas en el móvil. El
   enlace mide --tap de alto: es un objetivo táctil, no una nota. */
.quiz-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-softer);
}
.quiz-identity__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.quiz-identity__hint { font-size: var(--fs-sm); color: var(--muted); }
.quiz-identity__name { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.quiz-identity__email { font-size: var(--fs-sm); color: var(--ink-soft); overflow-wrap: anywhere; }
.quiz-identity__switch {
  grid-column: 1 / -1;
  padding-top: var(--s-1);
  border-top: 1px solid var(--accent-line);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.quiz-identity__switch a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 650; }

/* «¿Ya tienes cuenta? Inicia sesión aquí», encima de los campos del alta. Con JavaScript su enlace
   abre la ventana .login-dialog (consulta.js); sin él, lleva al modo «acceso» de la pantalla. */
.quiz-login {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-softer);
}
.quiz-login > svg { flex: none; margin-top: 3px; color: var(--accent); }
.quiz-login a { font-weight: 700; }

/* «Pago del tratamiento», el último recuadro (PAGAR AL ENVIAR): lo que se paga, destacado (a la derecha
   desde 600px); lo que incluye y qué viene después; cómo pagar, en las tarjetas de opción de la marca
   con su explicación; y, con el pago en línea elegido, sus campos (partials/online-pay en modo
   `checkout`) en un panel blanco a todo el ancho de la tarjeta. */
.quiz-pay__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.quiz-pay__head .quiz-send__hint { margin-bottom: 0; }
.quiz-pay__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.quiz-pay__label { flex: 1 0 100%; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 650; }
.quiz-pay__amount { color: var(--ink); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quiz-pay__terms { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.quiz-pay__terms li { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.quiz-pay__terms svg { flex: none; margin-top: 2px; color: var(--accent); }
.quiz-pay__change { margin: 0 0 var(--s-4); font-size: var(--fs-sm); }
.quiz-pay .option-card { background: var(--bg); }
.quiz-pay .option-card__hint { color: var(--ink-soft); font-size: var(--fs-sm); }
.quiz-pay__only { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.quiz-pay__only svg { flex: none; margin-top: 2px; color: var(--accent); }
.quiz-pay__panel { margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.quiz-pay__panel .online-pay { max-width: none; margin: 0; }
.quiz-pay__saved { margin-bottom: var(--s-4); }

/* Pagar al enviar, ya ENVIADO (online-pay.js pone [data-checkout-done]: la cuenta, el tratamiento y su
   pedido están guardados) y el pago sin hacer: lo de arriba se recoge (enviarlo otra vez no haría
   nada) y solo queda el pago, con el aviso de que ya está guardado. */
.quiz-send[data-checkout-done] .quiz-send__step,
.quiz-send[data-checkout-done] .quiz-pay__choice,
.quiz-send[data-checkout-done] .quiz-pay__change,
.quiz-send[data-checkout-done] .quiz-send__back { display: none; }

/* La ventana «Inicia sesión» (<dialog> modal): entra en ese momento, sin enviar la consulta. Ocupa
   casi todo el ancho en el móvil y 440px como mucho; si no cabe de alto (teclado abierto), se
   desplaza por dentro. */
.login-dialog {
  width: min(440px, calc(100vw - 2 * var(--s-4)));
  max-height: calc(100vh - 2 * var(--s-4));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  overscroll-behavior: contain;
}
/* ::backdrop no hereda las variables de :root en Safari anterior a 17.4 (sería transparente): el color va escrito, --night (#0c1a26) al 60 %. */
.login-dialog::backdrop { background: rgba(12, 26, 38, .6); }
.login-dialog__form { display: grid; gap: var(--s-4); padding: var(--s-5); }
.login-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.login-dialog__title { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.login-dialog__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) 0 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.login-dialog__close:hover { background: var(--bg-sunken); color: var(--ink); }
.login-dialog__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.login-dialog__hint { color: var(--ink-soft); }
.login-dialog__actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--s-2); }
.login-dialog__actions > .btn { flex: 1 1 auto; }

/* ==========================================================================
   7. CONFIRMACIÓN (consulta enviada)
   ========================================================================== */

.done-code {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  width: 100%;
  margin-top: var(--s-2);
}
.done-code__label {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.done-code__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}
.done-code .code-badge { font-size: var(--fs-xl); padding: var(--s-3) var(--s-4); }
.done-code__hint { max-width: 32rem; font-size: var(--fs-sm); color: var(--muted); }

/* El botón de copiar solo sirve con JavaScript (lo atiende consulta.js). Pequeño de letra (.btn--sm),
   pero con el objetivo táctil entero: es lo que se pulsa para copiar la referencia y el IBAN exactos. */
.done-code__copy { display: none; min-height: var(--tap); }
.js .done-code__copy { display: inline-flex; }
.done-code__copy.is-copied { border-color: var(--ok); color: var(--ok); }

.done-meta {
  width: 100%;
  margin-top: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  text-align: left;
}

.done-actions { width: 100%; }
.done-actions .btn { flex: 1 1 100%; }

/* "¿Qué pasa ahora?": línea de tiempo vertical, también en escritorio (el bloque es estrecho). */
.done-steps { display: grid; gap: var(--s-5); list-style: none; counter-reset: ddr-done; }
.done-steps__item {
  position: relative;
  min-height: 36px;
  padding-left: 52px;
  counter-increment: ddr-done;
}
.done-steps__item::before {
  content: counter(ddr-done);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: 750;
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.done-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px; top: 46px;
  bottom: calc(var(--s-5) * -1 + 8px);
  width: 2px;
  border-radius: 2px;
  background: var(--accent-line);
}
.done-steps__title { font-size: var(--fs-base); letter-spacing: -0.01em; }
.done-steps__text { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--ink-soft); }
.done-steps__text .code-badge { vertical-align: baseline; }

.done-foot { justify-content: center; margin-top: var(--s-5); text-align: center; }

/* ==========================================================================
   8. MEJORAS PARA PANTALLAS MAYORES
   ========================================================================== */

@media (min-width: 600px) {
  .quiz__title { font-size: var(--fs-md); }
  .quiz-trust { grid-auto-flow: column; justify-content: space-between; gap: var(--s-4); }
  .quiz-step__title { font-size: var(--fs-2xl); }
  .quiz.is-wizard .quiz__intro { font-size: var(--fs-base); }

  /* Tarjeta HORIZONTAL: portada de ancho fijo a la izquierda, cuerpo en medio, radio a la derecha.
     Sigue una por fila: el paciente las recorre en columna. */
  .treatment { padding: var(--s-4); }
  .treatment--cover .treatment__pick { grid-template-columns: 148px minmax(0, 1fr) auto; grid-template-areas: "cover body pick"; }
  .treatment__doses { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .done-code .code-badge { font-size: var(--fs-2xl); padding: var(--s-3) var(--s-6); }
  .done-actions .btn { flex: 0 1 auto; min-width: 200px; }
  .done-meta { padding: var(--s-5); }
  .done-steps__item { padding-left: 60px; }
  .done-steps__item::before { width: 44px; height: 44px; font-size: var(--fs-base); }
  .done-steps__item::after { left: 21px; top: 54px; }
  .done-steps__title { font-size: var(--fs-md); }
  .done-steps__text { font-size: var(--fs-base); }

  /* La ventana «Inicia sesión»: con sitio, los dos botones a su ancho, a la derecha. */
  .login-dialog__form { padding: var(--s-6); }
  .login-dialog__actions > .btn { flex: 0 1 auto; }

  /* «Pago del tratamiento»: lo que se paga, a la derecha del título. */
  .quiz-pay__head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-4); }
  .quiz-pay__total { flex-direction: column; align-items: flex-end; text-align: right; }
  .quiz-pay__label { flex: none; }
  .quiz-pay__panel { padding: var(--s-5); }

  /* «Tu cuenta»: el cambio de cuenta, a la derecha de quién la envía y sin raya. */
  .quiz-identity { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--s-4) var(--s-5); }
  .quiz-identity__switch { grid-column: auto; padding-top: 0; border-top: 0; text-align: right; }
}

/* ==========================================================================
   EL AVISO QUE FRENA EL CUESTIONARIO (consulta/questionnaire.php, [data-quiz-stop]; lo pidió Pablo: «mejorar
   el diseño», «el fondo tiene que ser del mismo color que las preguntas del cuestionario, no blanco»): sobre el
   MISMO fondo que el cuestionario (--bg-soft, como .quiz, y ocupando su sitio: flex 1) y como una tarjeta de
   pregunta (.quiz__question: su borde, su radio y su sombra), con la raya de aviso arriba, el motivo en su
   recuadro y los dos botones apilados a todo el ancho de la tarjeta. Es lo que se ve SIN JavaScript: con él
   (consulta.js) la tarjeta se oculta y el aviso es una ventana (.quiz-dialog, abajo) con las mismas piezas; de
   ahí las reglas de [hidden].
   ========================================================================== */
.quiz[hidden], .quiz-stop[hidden] { display: none; }
.quiz-stop { flex: 1; padding-block: var(--s-5) var(--s-7); background: var(--bg-soft); }
.quiz-stop__card {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line);
  border-top: 4px solid var(--warn);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.quiz-stop__icon { background: var(--warn-soft); color: var(--warn); }
.quiz-stop__title { margin: 0; color: var(--ink); font-size: var(--fs-xl); letter-spacing: -0.02em; }
/* El título recibe el foco por código al llegar (consulta.js): no es un control, sin anillo. */
.quiz-stop__title:focus, .quiz-stop__title:focus-visible { outline: none; box-shadow: none; }
.quiz-stop__reason {
  width: 100%;
  max-width: 56ch;
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  color: var(--ink);
  text-align: left;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.quiz-stop__text { max-width: 56ch; margin: 0; color: var(--ink-soft); }
.quiz-stop__actions { display: grid; gap: var(--s-2); width: 100%; max-width: 500px; margin-top: var(--s-2); }
.quiz-stop__form { margin: 0; }
.quiz-stop__actions .btn { width: 100%; justify-content: center; white-space: normal; }
.quiz-stop__fine { max-width: 52ch; margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
/* El aviso que frena, en su VENTANA ([data-quiz-dialog]; lo pidió Pablo: «tiene que ser un modal»): la de ui.js
   (.ui-dialog, en site.css) con las mismas piezas que la tarjeta, la raya de aviso arriba y los botones apilados
   a todo su ancho. La abre consulta.js; sin JavaScript se ve la tarjeta. */
.quiz-dialog { max-width: 520px; border-top: 4px solid var(--warn); }
.quiz-dialog__body {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-5);
  text-align: center;
}
.quiz-dialog .quiz-stop__actions { margin-top: var(--s-1); }
@media (min-width: 720px) {
  .quiz-stop__card { padding: var(--s-7) var(--s-8); }
  .quiz-dialog__body { padding: var(--s-6) var(--s-6) var(--s-5); }
}