/*
 * Onboarding v3 (Toni 28/09, DEC-036/037/038): azules y cristal, aprobado en el lienzo
 * (https://claude.ai/artifact/TuHQvHV1Hp474cyN1vFQeZ v78; fuente `lienzo-v2/onb_ios.py` y `onb2.css`).
 * Negro con un degradado de azules arriba; respuestas en cristal con desenfoque e imagen a la
 * izquierda; con una respuesta se enciende la fila, con varias sale la casilla; píldoras para lo
 * corto, días en círculos; edad con rueda y altura y peso con regla; botón principal blanco.
 * Va encima de onboarding-v2.css y solo toca el cuestionario (`.question-stage`).
 */
:root {
  --v3-azul: #0a84ff;
  --v3-azul-claro: #9ccbff;
  --v3-cristal: rgba(255, 255, 255, .08);
  --v3-borde: rgba(255, 255, 255, .16);
  --v3-desenfoque: blur(28px) saturate(160%);
  --v3-gris: rgba(235, 235, 245, .62);
  --v3-gris3: rgba(235, 235, 245, .34);
}

/* ── Fondo: azules arriba que se funden en negro ── */
body:has(.question-stage)::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: min(620px, 78vh); z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 34% at 82% 4%, rgba(10, 132, 255, .6), transparent 70%),
    radial-gradient(60% 24% at 16% 36%, rgba(70, 220, 255, .4), transparent 72%),
    radial-gradient(80% 22% at 64% 50%, rgba(0, 170, 255, .24), transparent 72%),
    linear-gradient(180deg, #082c52 0%, #06203b 26%, rgba(0, 0, 0, 0) 74%);
  filter: blur(6px);
}
.question-stage { position: relative; z-index: 1; }
.question-stage .q-over { color: var(--v3-azul-claro); }
.question-stage .surface > h1 { font-size: clamp(32px, 4.4vw, 42px); letter-spacing: -.028em; line-height: 1.08; }

/* ── Cristal ── */
.question-stage .choice-list:not(.compact),
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-lista,
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-chips .choice,
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-dias .choice,
.question-stage .segmented-control,
.question-stage .numeric-field.g-medida,
.question-stage .text-shell,
.question-stage .context-note {
  background: var(--v3-cristal); -webkit-backdrop-filter: var(--v3-desenfoque); backdrop-filter: var(--v3-desenfoque);
  border: .5px solid var(--v3-borde);
}

/* ── Lista con imagen (pregunta principal y subpreguntas con imagen) ── */
.question-stage .choice-list:not(.compact),
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-lista { width: 100%; display: flex; flex-direction: column; gap: 0; border-radius: 24px; overflow: hidden; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-lista { margin-top: 0; }
.question-stage .choice-list:not(.compact) .choice,
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-lista .choice {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; margin: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 17px; font-weight: 400; color: #fff; text-align: left;
}
.question-stage .choice-list:not(.compact) .choice + .choice::before,
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-lista .choice + .choice::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: .5px solid rgba(255, 255, 255, .12); }
.question-stage .choice-list .choice.con-imagen + .choice::before,
.question-stage .choice-list .choice + .choice.con-imagen::before { left: 70px; }
.question-stage .choice-list:not(.compact) .choice:hover,
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-lista .choice:hover { background: rgba(255, 255, 255, .05); }
/* una sola respuesta: se enciende la fila, sin marca */
.question-stage .choice-list:not(.compact) .choice[data-kind="single"][aria-pressed="true"],
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-lista .choice[data-kind="single"][aria-pressed="true"] {
  background: linear-gradient(90deg, rgba(10, 132, 255, .36), rgba(10, 132, 255, .16)); font-weight: 600; color: #fff;
}
/* «Otra …» abierta (DEC-042, lienzo v89): la fila elegida y, dentro del mismo fondo azul, el campo con contador y dictado. */
.question-stage .choice-list .otra-abierta { position: relative; background: linear-gradient(90deg, rgba(10, 132, 255, .36), rgba(10, 132, 255, .16)); }
.question-stage .choice-list .otra-abierta .choice[aria-pressed="true"] { background: none; }
.question-stage .choice-list .otra-abierta::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: .5px solid rgba(255, 255, 255, .12); }
.question-stage .choice-list .otra-abierta .custom-answer { margin: 0; padding: 0 14px 14px; }
.question-stage .choice-list .otra-abierta .custom-answer label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.question-stage .choice-list .otra-abierta textarea { width: 100%; border-radius: 14px; background: rgba(0, 0, 0, .25); border: .5px solid rgba(255, 255, 255, .18); color: #fff; }
.question-stage .choice[aria-pressed="true"] + .choice::before,
.question-stage .choice[aria-pressed="true"]::before { opacity: 0; }
.question-stage .choice .choice-check { display: none !important; }
/* la imagen, sin círculo, como iOS (DEC-163; OnboardingViews.swift `lista`: emoji de 24 en 32 de ancho, crece al elegir) */
.question-stage .choice-vis { width: 32px; flex: none; display: grid; place-items: center; font-size: 24px; line-height: 1; background: none; transition: transform .18s ease; }
.question-stage .choice-vis--cifra { font-size: 15px; font-weight: 700; color: var(--v3-azul-claro); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.question-stage .choice[aria-pressed="true"] .choice-vis { transform: scale(1.12); }
/* varias respuestas: casilla a la derecha */
.question-stage .choice-cb { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .34); flex: none; display: grid; place-items: center; margin-left: auto; }
.question-stage .choice-cb svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.question-stage .choice[aria-pressed="true"] .choice-cb { background: var(--v3-azul); border-color: var(--v3-azul); }
.question-stage .choice[aria-pressed="true"] .choice-cb svg { opacity: 1; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-lista .choice[data-kind="multi"][aria-pressed="true"] { background: rgba(10, 132, 255, .14); font-weight: 600; }
/* El deporte actual (CORE-11) deja las tarjetas de la v2: lista con imagen como las demás */
.question-stage [data-step-id="CORE-11"] .choice-list:not(.compact) { display: flex; flex-direction: column; gap: 0; }
.question-stage [data-step-id="CORE-11"] .choice-list:not(.compact) .choice { flex-direction: row; align-items: center; min-height: 60px; padding: 10px 16px; border-radius: 0; font-size: 17px; }
.question-stage [data-step-id="CORE-11"] .choice-list:not(.compact) .choice::before { display: block; }
.question-stage [data-step-id="CORE-11"] .choice-list:not(.compact) .choice[aria-pressed="true"] { box-shadow: none; }

/* ── Respuestas cortas: píldoras ── */
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-chips .choice {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; height: auto; padding: 8px 16px; border-radius: 21px;
  font-size: 15px; font-weight: 500; color: #fff; box-shadow: none; width: auto; flex: none;
}
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-chips .choice .choice-vis { display: none; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-chips .choice .choice-cb { width: 16px; height: 16px; border: 0; margin: 0; display: none; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-chips .choice[aria-pressed="true"] { background: var(--v3-azul); border-color: var(--v3-azul); font-weight: 600; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-chips .choice[aria-pressed="true"] .choice-cb { display: grid; background: none; }

/* ── Días: círculos con la inicial ── */
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-dias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-dias .choice[data-corto] { display: grid; place-items: center; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; justify-content: center; font-size: 0; box-shadow: none; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-dias .choice[data-corto]::after { content: attr(data-corto); font-size: 16px; font-weight: 600; color: #fff; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-dias .choice[data-corto] > * { display: none; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-dias .choice:not([data-corto]) { min-height: 42px; padding: 8px 16px; border-radius: 21px; font-size: 15px; font-weight: 500; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-dias .choice:not([data-corto]) .choice-vis,
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-dias .choice:not([data-corto]) .choice-cb { display: none; }
.question-stage .choice-list.compact:not(.segmented):not(.tiles).g-dias .choice[aria-pressed="true"] { background: var(--v3-azul); border-color: var(--v3-azul); }

/* ── Rótulos de las subpreguntas ── */
.question-stage .question-group legend { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: -.01em; color: rgba(235, 235, 245, .78); }

/* ── Unidades: control segmentado de cristal ── */
.question-stage .segmented-control { padding: 3px; border-radius: 16px; gap: 3px; }
.question-stage .segmented-control button { min-height: 48px; border-radius: 13px; background: transparent; }
.question-stage .segmented-control button[aria-pressed="true"] { background: rgba(255, 255, 255, .2); color: #fff; }

/* ── Edad, altura y peso: cifra grande, rueda y regla ── */
.question-stage .numeric-field.g-medida { position: relative; border-radius: 24px; padding: 14px 18px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
.question-stage .numeric-field.g-medida > label { grid-column: 1 / -1; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--v3-gris); }
.question-stage .g-cifra { position: relative; display: flex; align-items: baseline; gap: 6px; }
.question-stage .g-cifra::after { content: attr(data-unidad); font-size: 17px; font-weight: 600; color: var(--v3-gris); }
.question-stage .g-cifra input {
  width: 3.2ch; field-sizing: content; min-width: 2ch; padding: 0; border: 0; background: transparent; color: #fff; box-shadow: none; outline: none;
  font: 700 44px/1 ui-rounded, 'SF Pro Rounded', -apple-system, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.question-stage .g-cifra input::-webkit-outer-spin-button,
.question-stage .g-cifra input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.question-stage .g-cifra input:focus-visible { border-radius: 8px; box-shadow: 0 0 0 2px var(--v3-azul); }
/* rueda de la edad */
.question-stage .g-rueda { position: relative; width: 120px; height: 130px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 52px 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); }
.question-stage .g-rueda::-webkit-scrollbar { display: none; }
.question-stage .g-rueda button { display: block; width: 100%; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--v3-gris); font-size: 17px; font-variant-numeric: tabular-nums; scroll-snap-align: center; cursor: pointer; padding: 0; }
.question-stage .g-rueda button[aria-selected="true"] { background: rgba(255, 255, 255, .12); color: #fff; font-size: 21px; font-weight: 600; }
/* regla de altura y peso */
.question-stage .g-regla { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer;
  --t: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 1.5px, transparent 1.5px 60px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 1.5px, transparent 1.5px 12px); }
.question-stage .g-regla::-webkit-slider-runnable-track { height: 40px; background: var(--t); background-size: 100% 22px, 100% 12px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; }
.question-stage .g-regla::-moz-range-track { height: 40px; background: var(--t); background-size: 100% 22px, 100% 12px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; }
.question-stage .g-regla::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 40px; border-radius: 2px; background: var(--v3-azul); box-shadow: 0 0 12px rgba(10, 132, 255, .8); }
.question-stage .g-regla::-moz-range-thumb { width: 4px; height: 40px; border: 0; border-radius: 2px; background: var(--v3-azul); box-shadow: 0 0 12px rgba(10, 132, 255, .8); }
.question-stage .g-regla:focus-visible { outline: 2px solid var(--v3-azul); outline-offset: 4px; border-radius: 6px; }
.question-stage .surface .measurement-grid,
.question-stage .surface [data-unit-panel]:not([hidden]) { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.question-stage .surface .numeric-field.g-medida { width: 100%; box-sizing: border-box; }
.question-stage .g-regla { border: 0; box-shadow: none; padding: 0; }

/* ── Texto libre y avisos ── */
.question-stage .text-shell { border-radius: 22px; }
.question-stage .context-note { border-radius: 16px; }

/* ── Botones: el principal, blanco sobre negro ── */
.question-actions [data-continue].primary,
.question-actions [data-continue].primary:hover { background: #fff; color: #000; border-radius: 26px; }
.question-actions [data-back].secondary,
.question-actions [data-back].secondary:hover { border-radius: 26px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: var(--v3-desenfoque); backdrop-filter: var(--v3-desenfoque); }
.question-stage .defer { color: var(--v3-azul-claro); }
/* DEC-046: «Saltar» en naranja (el de iOS y Android) donde se puede aplazar y falta algo; con todo contestado, «Continuar». */
.question-actions [data-defer].primary.saltar,
.question-actions [data-defer].primary.saltar:hover { background: #FF9F0A; color: #000; border-radius: 26px; border: 0; }
.question-actions [hidden] { display: none !important; }

/* ── Barra de secciones ── */
.onb-secciones li[data-estado="actual"] > i { box-shadow: inset 0 0 0 1.5px var(--v3-azul-claro); }

@media (prefers-reduced-motion: reduce) { .question-stage .g-rueda { scroll-behavior: auto; } }

/* ── Respuesta escrita y resumen con pendientes (ONB-002, 28/09): el mismo cristal que las respuestas ── */
.question-stage .escrita { margin-top: 18px; }
.question-stage .escrita-abrir { color: var(--v3-azul-claro); font-weight: 600; }
.question-stage .escrita-titulo { display: block; font-weight: 600; font-size: 15px; opacity: .78; margin-bottom: 8px; }
.question-stage .escrita .text-shell { margin-top: 0; width: 100%; }
.question-stage .escrita .text-footer { display: flex; gap: 12px; align-items: center; }
.question-stage .escrita .text-footer [data-escrita-usar] { color: var(--v3-azul-claro); font-weight: 600; margin-left: auto; }
.question-stage .escrita-msg { font-size: 14px; margin: 10px 4px 0; opacity: .85; }
.question-stage .escrita-msg--dudosa { color: #ff9f0a; opacity: 1; }
.question-stage .escrita-propuesta { margin-top: 10px; width: auto; }
.question-stage .summary-pendientes h2 { color: var(--v3-azul-claro); }
.question-stage .summary-pendientes .summary-row .defer, .question-stage .context-note .defer { color: var(--v3-azul-claro); font-weight: 600; }
.question-stage [data-capacidad] strong { color: #ff9f0a; }
.question-stage .summary-pendientes .summary-row { align-items: center; gap: 12px; }
.question-stage .summary-pendientes .summary-row span:first-child { flex: 1 1 auto; min-width: 0; color: var(--text); }
.question-stage .summary-pendientes .summary-row .defer,
.question-stage .context-note .defer { flex: none; width: auto; min-height: 0; margin: 0; padding: 4px 0; white-space: nowrap; background: none; border: 0; }
.question-stage .summary-pendientes .field-help { margin: 0 4px 10px; }
/* Solo para el lector de pantalla: la leyenda que repetiría el título del paso (SAFE-02). */
.question-stage .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Nombre (DEC-047): «Empezamos · ¿Cómo te llamamos?», como en iOS y Android; editable en el resumen ── */
.question-stage .surface--nombre .nombre-shell { margin-top: 22px; width: 100%; }
.question-stage .nombre-input { width: 100%; box-sizing: border-box; height: 52px; padding: 0 20px; border-radius: 26px; border: 1px solid var(--v3-borde);
  background: var(--v3-cristal); -webkit-backdrop-filter: var(--v3-desenfoque); backdrop-filter: var(--v3-desenfoque); color: #fff; font: inherit; font-size: 17px; }
.question-stage .nombre-input::placeholder { color: var(--v3-gris3); }
.question-stage .nombre-input:focus-visible { outline: none; border-color: var(--v3-azul); box-shadow: 0 0 0 1px var(--v3-azul); }
.question-actions [data-nombre-continuar].primary,
.question-actions [data-nombre-continuar].primary:hover { background: #fff; color: #000; border-radius: 26px; }
.question-stage .summary-nombre .summary-row--nombre { padding: 0; border: 0; }
.question-stage .summary-nombre .nombre-input--resumen { height: 48px; }

/* ── Lo que iOS cambió después del 28/09 (tableros OnbWebV2, DEC-163) ── */
/* Pregunta única centrada en vertical (onb-centrado-20260929); si no cabe, empieza arriba como siempre. */
.question-stage:not(:has(.question-group)) { align-content: safe center; }
/* Nada se lee detrás del pie en el móvil: el contenido pasa difuminado por detrás (onb-escrita-luego-difuminado-20260928). */
@media (max-width: 760px) {
  .question-actions::before {
    content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
    top: -28px; bottom: calc(-1 * (var(--measurement-banner-height, 0px) + var(--safe-bottom, 0px) + 10px));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 40%);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 28px); mask-image: linear-gradient(180deg, transparent, #000 28px);
  }
}