/*
 * Tokens visuales y componentes de SkinMap. Misma familia que la web de Letícia
 * (leticia-valim-web): agua, lila y crema.
 *
 * MOBILE-FIRST DE VERDAD: todo lo que está fuera de una media query está escrito
 * para 390px de ancho. Las consultas de ancho solo ENSANCHAN; ninguna corrige un
 * diseño pensado para escritorio. Esto no es una preferencia de estilo: la
 * persona que completa este cuestionario lo hace desde el teléfono, en general
 * llegando desde Instagram.
 *
 * Los controles tienen 44px de alto mínimo (objetivo táctil cómodo) y el texto
 * de los campos es de 16px: por debajo de eso Safari en iOS hace zoom solo al
 * enfocar un input y descuadra toda la pantalla.
 */

/*
 * ── Tipografías auto-hospedadas ───────────────────────────────────────────────
 *
 * POR QUÉ NO SE CARGAN DESDE GOOGLE FONTS: cada visita a `fonts.googleapis.com`
 * le entrega a un tercero la IP del visitante y el `Referer` de la página. En una
 * app de consultas de piel eso convierte "entré a hacerme una consulta de salud"
 * en un dato que sale del servicio sin que la persona lo haya consentido — justo
 * lo que el cifrado y el consentimiento explícito se esfuerzan en evitar. Los
 * archivos viven en `/fuentes/` y no se pide nada a ningún dominio externo.
 *
 * Las dos familias son fuentes VARIABLES: UN archivo por familia cubre todo el
 * rango de pesos. Pedirle a Google los pesos por separado devolvía cinco veces
 * el mismo archivo (verificado por hash: 130 KB de los 216 eran duplicados).
 *
 * Subset `latin` (U+0000-00FF y puntuación tipográfica): cubre por completo el
 * español y el portugués, que son los dos idiomas del producto. Un carácter
 * fuera del rango cae en la tipografía del sistema, sin cuadraditos vacíos.
 *
 * `font-display: swap` — el texto se ve de entrada con la fuente del sistema y
 * cambia cuando la propia termina de cargar. En un cuestionario de once pantallas
 * es preferible leer inmediatamente con otra tipografía que mirar un hueco.
 *
 * Licencias: ambas son SIL Open Font License 1.1, que permite el auto-hospedaje.
 * El texto completo acompaña a los archivos en `public/fuentes/OFL-*.txt`.
 */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fuentes/cormorant-garamond-var-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fuentes/inter-var-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --agua: #9ec9c4;
  --agua-hondo: #6ba7a1;
  --lila: #7d6da5;
  --lila-hondo: #5d4f80;
  --crema: #f6f1ea;
  --crema-clara: #fdfbf8;
  --tinta: #2e2a33;
  --tinta-suave: #6b6472;
  --linea: #e4dcd2;
  --alerta: #b4543f;

  --radio: 16px;
  --sombra: 0 12px 40px rgba(93, 79, 128, 0.1);
  --ancho: 34rem;

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  background: linear-gradient(170deg, var(--crema-clara) 0%, var(--crema) 100%);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Salto al contenido: solo visible cuando se navega con teclado. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lila-hondo);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 20;
  border-radius: 0 0 var(--radio) 0;
}
.saltar:focus {
  left: 0;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

/*
 * Cabecera fija: marca + progreso en un solo bloque pegado arriba.
 * Es un único `sticky` a propósito. Cuando eran dos, el de abajo necesitaba un
 * `top` en rem calculado a mano contra el alto del de arriba, y cualquier cambio
 * de tamaño en la barra (un botón más alto, una tipografía distinta) los
 * superponía y tapaba contenido enfocable.
 */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(253, 251, 248, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  padding-top: max(0.9rem, env(safe-area-inset-top));
}

.marca {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lila);
  margin: 0;
}

.idiomas {
  display: flex;
  gap: 0.25rem;
}

.idiomas button {
  /* 40px de alto mínimo: aunque sea un control secundario, se toca con el pulgar
     en la esquina superior de un teléfono, que es la zona más incómoda. */
  min-height: 40px;
  padding: 0.2rem 0.8rem;
  border: 1px solid var(--linea);
  background: transparent;
  border-radius: 999px;
  color: var(--tinta-suave);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.idiomas button[aria-pressed='true'] {
  background: var(--lila);
  border-color: var(--lila);
  color: #fff;
}

/* ── Progreso ─────────────────────────────────────────────────────────────── */

.progreso {
  padding: 0 1.25rem 0.7rem;
}

.progreso[hidden] {
  display: none;
}

.progreso-riel {
  height: 4px;
  border-radius: 999px;
  background: var(--linea);
  overflow: hidden;
}

.progreso-relleno {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--agua-hondo), var(--lila));
  transition: width 0.35s ease;
}

.progreso-texto {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ── Contenedor ───────────────────────────────────────────────────────────── */

main {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 7rem;
}

.cargando {
  min-height: 60dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
}

h1 {
  font-family: var(--display);
  font-size: clamp(2.3rem, 11vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.sub {
  color: var(--tinta-suave);
  margin: 0 0 1.75rem;
}

.estado {
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

.puntos {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.puntos li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

.puntos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--agua);
}

/* ── Preguntas ────────────────────────────────────────────────────────────── */

.pregunta {
  border: 0;
  margin: 0 0 1.9rem;
  padding: 0;
}

/*
 * Reserva para la cabecera fija cuando el navegador hace scroll hacia un elemento
 * (al enfocar un campo con Tab, al saltar al campo que devolvió error, o al
 * autoscroll del teclado en iOS). Sin esto el destino del scroll queda DEBAJO de
 * la cabecera: el campo existe pero no se ve ni se puede tocar — verificado en
 * Chrome, donde el click terminaba en la barra en vez del input.
 */
.pregunta,
.eje,
.campo,
.error,
#contenido h1,
#contenido h2 {
  scroll-margin-top: 7.5rem;
}

.enunciado {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 0.15rem;
  padding: 0;
}

.ayuda {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

.enunciado + .campo,
.enunciado + .chips,
.enunciado + .escala {
  margin-top: 0.7rem;
}

.campo {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--crema-clara);
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
}

textarea.campo {
  min-height: 120px;
  resize: vertical;
}

.campo:focus-visible,
.chip input:focus-visible + span,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--lila);
  outline-offset: 2px;
}

/*
 * Al cambiar de pantalla se enfoca el encabezado para que un lector de pantalla
 * anuncie dónde está la persona. Ese foco NO se dibuja: un `tabindex="-1"` solo
 * se enfoca por código —nunca con Tab—, así que ocultar el anillo acá no le
 * quita la referencia visual a nadie que navegue con teclado, y evita el recuadro
 * negro sobre el título que aparecía en cada paso.
 */
[tabindex='-1']:focus {
  outline: none;
}

/* ── Opciones (chips) ─────────────────────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: block;
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.chip span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--crema-clara);
  font-size: 0.92rem;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip input:checked + span {
  background: var(--lila);
  border-color: var(--lila);
  color: #fff;
}

.chips.columna {
  flex-direction: column;
}

.chips.columna .chip span {
  border-radius: 12px;
  justify-content: flex-start;
}

/* ── Escala 1-5 del mapa ──────────────────────────────────────────────────── */

.eje {
  border: 0;
  margin: 0 0 1.6rem;
  padding: 0 0 1.4rem;
  border-bottom: 1px solid var(--linea);
}

.eje:last-of-type {
  border-bottom: 0;
}

.escala {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}

.escala .chip span {
  justify-content: center;
  border-radius: 12px;
  padding: 0.6rem 0;
  font-variant-numeric: tabular-nums;
}

/* El número elegido tiene que cantar: en la captura de QA, el blanco sobre lila
   en peso normal se leía más flojo que los números sin marcar. */
.escala .chip input:checked + span {
  font-weight: 600;
}

.escala-extremos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--tinta-suave);
}

/* ── Fotos ────────────────────────────────────────────────────────────────── */

.fotos-guia {
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem;
  background: var(--crema-clara);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.fotos-guia ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

.fotos-lista {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.fotos-lista li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--crema-clara);
}

.fotos-lista img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
}

.fotos-lista .meta {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
}

.fotos-lista .meta small {
  display: block;
  color: var(--tinta-suave);
}

.archivo {
  display: block;
  width: 100%;
  font-size: 0.9rem;
}

.archivo input[type='file'] {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  font: inherit;
  font-size: 0.9rem;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--lila);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.btn:hover:not(:disabled) {
  background: var(--lila-hondo);
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.btn-secundario {
  background: transparent;
  color: var(--lila-hondo);
  border: 1px solid var(--linea);
}

.btn-secundario:hover:not(:disabled) {
  background: rgba(125, 109, 165, 0.08);
}

.btn-chico {
  min-height: 40px;
  width: auto;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
}

/* Barra de acciones: fija abajo, fuera del alcance del gesto del teléfono. */
.acciones {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  gap: 0.6rem;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
  background: rgba(253, 251, 248, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea);
}

.acciones .btn-secundario {
  flex: 0 0 30%;
}

.acciones .btn:not(.btn-secundario) {
  flex: 1;
}

/* ── Consentimiento y avisos ──────────────────────────────────────────────── */

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--crema-clara);
  font-size: 0.9rem;
  cursor: pointer;
}

.consentimiento input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  accent-color: var(--lila);
}

/* Honeypot: fuera de la vista y fuera del recorrido del teclado, pero presente
   en el DOM para que un bot que completa todo lo que encuentra caiga acá. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.error {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--alerta);
  border-radius: 0 10px 10px 0;
  background: rgba(180, 84, 63, 0.08);
  color: var(--alerta);
  font-size: 0.9rem;
}

.error[hidden] {
  display: none;
}

.aviso {
  margin: 2rem 0 0;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

.tarjeta-fin {
  padding: 1.5rem 1.25rem;
  border-radius: var(--radio);
  background: var(--crema-clara);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
  text-align: center;
}

.enlace {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--lila-hondo);
}

/* ── Espera del análisis ──────────────────────────────────────────────────── */
/* El motor tarda entre 35 y 130 segundos: la barra es indeterminada a propósito
   (no hay un porcentaje real que informar) pero se mueve, que es lo que separa
   "está trabajando" de "se colgó". */

.espera-riel {
  position: relative;
  height: 4px;
  margin: 1.5rem 0 1rem;
  border-radius: 999px;
  background: var(--linea);
  overflow: hidden;
}

.espera-pulso {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--agua-hondo), var(--lila));
  animation: vaiven 1.8s ease-in-out infinite;
}

@keyframes vaiven {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

.espera-paso {
  margin: 0 0 0.35rem;
  min-height: 3rem;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

.espera-reloj {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lila);
  font-variant-numeric: tabular-nums;
}

/* ── Devolución ───────────────────────────────────────────────────────────── */

.bloque {
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--crema-clara);
}

.bloque h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
}

.bloque p {
  margin: 0 0 0.5rem;
}

.bloque-evitar {
  border-left: 3px solid var(--alerta);
}

/*
 * Advertencias de seguridad (embarazo, medicación, procedimiento reciente).
 * Se distinguen del bloque "a evitar" sin gritar: la barra en lila de marca en vez
 * del rojo de alerta. La persona tiene que leerlas, no asustarse con ellas — el
 * tono del producto es acompañar, y una advertencia en rojo sobre un embarazo se
 * lee como si algo estuviera mal cuando no lo está.
 */
.bloque-advertencia {
  border-left: 3px solid var(--lila);
  background: rgba(125, 109, 165, 0.07);
}

.score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border-radius: var(--radio);
  background: linear-gradient(135deg, rgba(158, 201, 196, 0.25), rgba(125, 109, 165, 0.18));
}

.score-num {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 1;
  color: var(--lila-hondo);
  font-variant-numeric: tabular-nums;
}

.score-tag {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.aviso-parcial {
  margin: 0 0 1.25rem;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--agua-hondo);
  border-radius: 0 10px 10px 0;
  background: rgba(158, 201, 196, 0.16);
  font-size: 0.88rem;
}

/*
 * Ocupa el lugar del puntaje cuando queda reservado (menor de edad, o edad sin
 * registrar). Se centra y se le da aire como al score, para que se lea como una
 * decisión y no como un bloque de error: no hay número porque preferimos no darlo,
 * no porque algo haya fallado.
 */
/*
 * Aviso de "esto no es una consulta médica" en la pantalla inicial.
 * Tiene que leerse de verdad, no ser un texto legal que la vista saltea: cuerpo casi
 * de lectura normal (0.88rem, no letra chica), fondo propio y barra en lila de marca.
 * Sobrio a propósito — es información para decidir, no una advertencia que asuste.
 */
.aviso-medico {
  margin: 1.75rem 0 1.5rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--lila);
  border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--crema-clara);
  font-size: 0.88rem;
  line-height: 1.55;
}

.aviso-medico p {
  margin: 0 0 0.6rem;
  color: var(--tinta);
}

.aviso-medico p:last-child {
  margin-bottom: 0;
}

.aviso-medico-titulo {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lila-hondo);
}

.aviso-cuidado {
  margin: 1.5rem auto 1.75rem;
  max-width: 30rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--lila);
  border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--crema-clara);
  font-size: 0.92rem;
  text-align: left;
}

.rutina {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.rutina li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linea);
}

.rutina li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rutina-paso {
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lila);
}

.rutina-categoria {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(158, 201, 196, 0.3);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.rutina-que {
  margin: 0.4rem 0 0.2rem;
  font-weight: 500;
}

.activos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.activos li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea);
}

.activos li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.activos p {
  margin: 0.2rem 0 0;
}

/* ── A partir de tablet: solo se ensancha y se separa ─────────────────────── */

@media (min-width: 720px) {
  main {
    padding: 2.5rem 1.5rem 8rem;
  }

  .barra {
    padding: 1.1rem 1.5rem;
  }

  .progreso {
    padding: 0 1.5rem 0.8rem;
  }

  .acciones {
    padding: 1rem 1.5rem;
    border-radius: var(--radio) var(--radio) 0 0;
    border: 1px solid var(--linea);
    border-bottom: 0;
  }

  .escala .chip span {
    padding: 0.75rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}