/* =========================================================
   TOKENS — identidad visual del hub de fórmulas clínicas

   Las variables --algo definidas aquí en :root (la raíz del
   documento) funcionan como "constantes" de diseño: se escribe
   el color/tamaño UNA sola vez aquí, y en el resto del archivo
   se usa var(--color-primario) en vez de escribir "#1f5f5b" cada
   vez. Cambiar la paleta completa de la app es, en teoría, tan
   simple como cambiar estas líneas.
   ========================================================= */
:root {
  --color-primario: #1f5f5b;      /* teal profundo — cabecera, acentos fuertes */
  --color-primario-suave: #2d7873;
  --color-secundario: #a8c9b8;    /* menta suave — apoyo, fondos de icono */
  --color-fondo: #f7f3ec;         /* papel cálido */
  --color-superficie: #ffffff;
  --color-texto: #262622;
  --color-texto-suave: #6b6b63;
  --color-acento: #c9922f;        /* dorado clínico — usar con moderación */
  --color-borde: #e6e0d4;

  --fuente-display: 'Fraunces', serif;
  --fuente-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radio: 18px;
  --sombra: 0 4px 16px rgba(38, 38, 34, 0.06);
}

* { box-sizing: border-box; } /* padding y border ya no se suman al ancho/alto que uno define */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* nada de scroll en html/body — cada pantalla controla su propio scroll interno */
}

body {
  max-width: 480px;
  margin: 0 auto;
  /* 100vh a veces incluye el espacio detrás de la barra del navegador
     en el celular (y el contenido queda tapado). 100svh ("small
     viewport height") es la altura garantizada aunque esa barra esté
     visible — la primera línea es un respaldo para navegadores viejos
     que no conocen "svh" todavía; si lo entienden, la segunda gana. */
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Marca de agua del logo — fondo fijo, tenue, detrás de toda la
   app. Incrustada en base64 (no un archivo aparte) para que
   funcione igual en los 4 archivos y en la versión de un solo
   archivo para móvil. position:absolute (no fixed) porque el
   body tiene overflow:hidden, que puede recortar los elementos
   fixed — con absolute queda ligado al propio tamaño del body,
   que en móvil ya cubre toda la pantalla. z-index negativo: pinta
   detrás de cualquier pantalla o tarjeta, sin interferir con nada. */
body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImZvbmRvIiB4MT0iMCIgeTE9IjAiIHgyPSI1MTIiIHkyPSI1MTIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMmQ3ODczIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzEyM2YzYyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0idHVibyIgeDE9IjY0IiB5MT0iNjQiIHgyPSI0MjYiIHkyPSI4NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjYiIHN0b3AtY29sb3I9IiNmM2Q5YTQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZThiNTYzIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJwZWNobyIgY3g9IjAuMzUiIGN5PSIwLjMiIHI9IjAuNzUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZDhlOGUyIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KCiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHJ4PSIxMjAiIGZpbGw9InVybCgjZm9uZG8pIi8+CiAgPGVsbGlwc2UgY3g9IjEyOCIgY3k9IjExMSIgcng9IjE3OSIgcnk9IjEwMiIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC4wNiIvPgogIDxjaXJjbGUgY3g9IjQwNSIgY3k9Ijg1IiByPSI1NiIgZmlsbD0iI2U4YjU2MyIgb3BhY2l0eT0iMC4yMiIvPgoKICA8cGF0aCBkPSJNODUsODUgQzczLDE3OSA5NCwyMzAgMTU0LDI0NyBMMTU0LDI5MCIgc3Ryb2tlPSJ1cmwoI3R1Ym8pIiBzdHJva2Utd2lkdGg9IjMwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMTU0LDI0NyBDMjIyLDI2MCAyNzMsMjQzIDI5OSwxODggQzMyNCwxMzIgMzU4LDk0IDQxMCw4NSIgc3Ryb2tlPSJ1cmwoI3R1Ym8pIiBzdHJva2Utd2lkdGg9IjMwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiLz4KICA8Y2lyY2xlIGN4PSI4NSIgY3k9Ijg1IiByPSIyNiIgZmlsbD0idXJsKCN0dWJvKSIvPgoKICA8Y2lyY2xlIGN4PSIxNTQiIGN5PSIzNDEiIHI9IjU2IiBmaWxsPSJ1cmwoI3BlY2hvKSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjkiLz4KICA8ZWxsaXBzZSBjeD0iMTM3IiBjeT0iMzI0IiByeD0iMTciIHJ5PSIxMyIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC45Ii8+CgogIDxjaXJjbGUgY3g9IjQxMCIgY3k9Ijg1IiByPSIzMCIgZmlsbD0iI2U4YjU2MyIvPgogIDxjaXJjbGUgY3g9IjQxMCIgY3k9Ijg1IiByPSIxMyIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4K');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 95%;
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}

/* Todo el contenido real de la app debe pintarse encima de la
   marca de agua (que quedó en z-index:0 dentro del stacking
   context del body). */
.pantalla {
  position: relative;
  z-index: 1;
}


/* =========================================================
   SISTEMA DE PANTALLAS
   ========================================================= */
.pantalla {
  display: none;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  width: 100%;
  animation: aparecer 0.22s ease-out;
}
.pantalla.activa {
  display: flex;
}
#pantalla-menu {
  overflow-y: auto;
}
#pantalla-formula {
  overflow: hidden;
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   PANTALLA: MENÚ / HUB
   ========================================================= */
.cabecera-hub {
  background: var(--color-primario);
  padding: 32px 24px 40px;
  border-radius: 0 0 28px 28px;
}
.cabecera-eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secundario);
}
.cabecera-titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(26px, 8vw, 34px);
  color: #ffffff;
}

.lista-formulas {
  /* esto antes tenia flex:1 con su propio overflow-y:auto, para que
     la cabecera y el pie no se movieran y nomas las tarjetas
     scrollearan por dentro. ya no sirve asi porque ahora la
     pantalla del menu tiene mas cosas abajo (separador + buscador
     CIE-10 + tarjeta de donacion + pie) y si esta lista sigue
     pidiendo flex:1 se come todo el espacio y aplasta lo de abajo
     (el mismo problema que tuvimos con .info-fuente hace rato).
     mejor dejar que ocupe nomas lo que necesita su contenido, y
     que #pantalla-menu (ya tiene overflow-y:auto, mas abajo) sea
     el que scrollea toda la pantalla */
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  /* Antes era "center" (se veía bien centrado con solo 4 tarjetas
     en pantallas altas), pero con más fórmulas agregadas el
     contenido ya no cabe en una pantalla — centrar contenido que
     desborda hace que el pie de página termine superponiéndose con
     la última tarjeta en vez de quedar debajo. "flex-start" crece
     hacia abajo de forma predecible sin importar cuántas tarjetas
     haya, y sigue viéndose bien con pocas gracias al gap. */
  justify-content: flex-start;
  gap: 20px;
}

.tarjeta-formula {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-family: var(--fuente-ui);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tarjeta-formula:active {
  transform: scale(0.98);
}
.tarjeta-formula:hover {
  box-shadow: 0 6px 20px rgba(38, 38, 34, 0.1);
}

.tarjeta-icono {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(31, 95, 91, 0.08);
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarjeta-icono svg { width: 30px; height: 30px; }

.tarjeta-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tarjeta-nombre {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 21px;
  color: var(--color-texto);
}
.tarjeta-detalle {
  font-size: 14px;
  color: var(--color-texto-suave);
}

.tarjeta-flecha {
  color: var(--color-primario);
  font-size: 20px;
  flex-shrink: 0;
}

.tarjeta-formula--proxima {
  opacity: 0.55;
  cursor: not-allowed;
}
.tarjeta-formula--proxima:active {
  transform: none;
}
.tarjeta-etiqueta {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-acento);
  background: rgba(201, 146, 47, 0.12);
  padding: 5px 10px;
  border-radius: 100px;
}

/* =========================================================
   PANTALLA: MENÚ — separador + buscador CIE-10
   (sección de referencia, aparte de las tarjetas de fórmula:
   no calcula nada, solo busca código + nombre de un padecimiento)
   ========================================================= */
.separador-seccion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 20px 14px;
}
.separador-seccion .linea { flex: 1; height: 1px; background: var(--color-borde); }
.separador-seccion .etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.seccion-cie10 {
  margin: 0 20px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
}
.cie10-encabezado {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.cie10-icono {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(201, 146, 47, 0.12);
  color: var(--color-acento);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cie10-icono svg { width: 26px; height: 26px; }
.cie10-titulo-bloque { min-width: 0; }
.cie10-nombre {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--color-texto);
  margin: 0 0 2px;
}
.cie10-subtitulo {
  font-size: 13px;
  color: var(--color-texto-suave);
  margin: 0;
}

.cie10-buscador {
  position: relative;
  margin-bottom: 14px;
}
.cie10-buscador input {
  width: 100%;
  padding: 13px 16px 13px 42px;
  border: 1.5px solid var(--color-borde);
  border-radius: 12px;
  font-family: var(--fuente-ui);
  font-size: 15px;
  color: var(--color-texto);
  background: var(--color-fondo);
  outline: none;
  transition: border-color 0.15s ease;
}
.cie10-buscador input:focus { border-color: var(--color-primario); }
.cie10-buscador svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-texto-suave);
  pointer-events: none;
}

.cie10-resultados {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 40px;
}
.cie10-fila {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
/* el iconito de copiar va siempre visible a la derecha de la fila,
   asi de una vez se ve que se puede tocar para copiar y no hay que
   adivinarle */
.cie10-icono-copiar {
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
  width: 18px;
  height: 18px;
  color: var(--color-texto-suave);
  opacity: 0.6;
}
.cie10-icono-copiar svg {
  width: 100%;
  height: 100%;
}
.cie10-fila:active {
  background: var(--color-secundario);
}
/* cuando le dan tap se pone verde un momentito y aparece el
   mensajito de "copiado", nomas pa que sepan que si jaló */
.cie10-fila--copiado {
  background: rgba(31, 95, 91, 0.1);
  border-color: var(--color-primario);
}
.cie10-fila--copiado::after {
  content: 'Copiado ✓';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-primario);
  background: var(--color-superficie);
  padding: 2px 8px;
  border-radius: 100px;
}
/* mientras se ve el mensajito de "copiado" el iconito estorba, mejor
   se esconde tantito */
.cie10-fila--copiado .cie10-icono-copiar {
  visibility: hidden;
}
.cie10-codigo {
  flex-shrink: 0;
  font-family: var(--fuente-ui);
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  background: var(--color-primario);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.cie10-nombre-padecimiento {
  font-size: 14.5px;
  color: var(--color-texto);
  line-height: 1.35;
  /* el catalogo de la DGIS viene todo en mayusculas, lo dejo tal
     cual llega y nomas lo transformo aqui pa que se vea normal,
     sin tocar el dato de verdad */
  text-transform: lowercase;
}
.cie10-nombre-padecimiento::first-letter {
  text-transform: uppercase;
}
.cie10-vacio {
  text-align: center;
  padding: 22px 10px;
  color: var(--color-texto-suave);
  font-size: 14px;
}
.cie10-estado-inicial {
  text-align: center;
  padding: 26px 10px;
  color: var(--color-texto-suave);
  font-size: 13.5px;
  line-height: 1.5;
}
.cie10-conteo {
  font-size: 12px;
  color: var(--color-texto-suave);
  margin: 2px 0 10px;
}
.cie10-fuente {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-borde);
  font-size: 11.5px;
  color: var(--color-texto-suave);
  line-height: 1.5;
}

/* =========================================================
   PANTALLA: MENÚ — tarjeta de donación
   ========================================================= */
.tarjeta-donacion {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 20px 0;
  padding: 18px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-family: var(--fuente-ui);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tarjeta-donacion:active {
  transform: scale(0.98);
}
.tarjeta-donacion:hover {
  box-shadow: 0 6px 20px rgba(38, 38, 34, 0.1);
}
.donacion-icono {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(201, 146, 47, 0.12);
  color: var(--color-acento);
  display: flex;
  align-items: center;
  justify-content: center;
}
.donacion-icono svg { width: 24px; height: 24px; }
.donacion-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.donacion-titulo {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-texto);
}
.donacion-detalle {
  font-size: 12.5px;
  color: var(--color-texto-suave);
  line-height: 1.4;
}
.donacion-flecha {
  color: var(--color-primario);
  font-size: 18px;
  flex-shrink: 0;
}

.pie-hub {
  padding: 18px 28px 28px;
  text-align: center;
}
.pie-hub p {
  margin: 0;
  font-size: 12px;
  color: var(--color-texto-suave);
  line-height: 1.5;
}

/* =========================================================
   PANTALLA: DETALLE DE FÓRMULA (estructura base)
   ========================================================= */
.cabecera-formula {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-superficie);
}
.btn-volver {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--color-fondo);
  color: var(--color-primario);
  font-size: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-volver svg {
  width: 18px;
  height: 18px;
}
.titulo-formula {
  flex: 1;
  text-align: center;
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 20px;
}

.contenido-formula {
  flex: 1;
  min-height: 0;
  padding: 14px 20px 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.placeholder-formula {
  color: var(--color-texto-suave);
  text-align: center;
  margin-top: 60px;
  font-size: 14px;
}

/* =========================================================
   PANTALLA DE FÓRMULA — contenido interno (Rabito y similares)
   ========================================================= */
.pantalla-formula-int {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Se probó "justify-content: safe center" para mantener el
     centrado visual de las pantallas cortas (Rabito, IMC, etc.) sin
     romper las largas (Glasgow) — pero al probarlo de verdad con
     Playwright, no se comportó de forma confiable: el contenido de
     Glasgow seguía quedando fuera de alcance con scroll, señal de
     que "safe" no se puede dar por garantizado en todos los
     navegadores/dispositivos reales. Se optó por "flex-start", la
     misma solución ya verificada y funcionando en el hub — las
     pantallas cortas ya no quedan perfectamente centradas en
     pantallas muy altas, pero TODAS son 100% alcanzables con scroll,
     sin excepción, en cualquier navegador. */
  justify-content: flex-start;
  gap: 22px;
}

.grupo-resultado {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Selector de sexo pequeño (solo se usa dentro de campos-medidas ahora) */
.selector-sexo {
  display: flex;
  gap: 10px;
}
.opcion-sexo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.opcion-sexo svg {
  width: 18px;
  height: 30px;
}
.opcion-sexo.activo {
  border-color: var(--color-primario);
  background: var(--color-primario);
  color: #ffffff;
}

/* Selector tipo "segmented control", integrado como un campo más
   (sexo, GMFCS) — misma altura y estilo que los inputs de texto,
   para que se vea claramente como un dato por llenar. */
.campo-segmentado {
  display: flex;
  border: 1.5px solid var(--color-borde);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-superficie);
}
.opcion-segmentada {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 4px;
  border: none;
  border-left: 1.5px solid var(--color-borde);
  background: transparent;
  color: var(--color-texto-suave);
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.opcion-segmentada:first-child {
  border-left: none;
}
.opcion-segmentada svg {
  width: 13px;
  height: 22px;
}
.opcion-segmentada.activo {
  background: var(--color-primario);
  color: #ffffff;
}
.descripcion-gmfcs {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--color-texto-suave);
  text-align: center;
  min-height: 14px;
}

/* Variante en lista vertical de .campo-segmentado — para escalas con
   opciones de texto largo (ej. Glasgow: "Localiza el dolor"), que no
   caben bien en botones horizontales lado a lado. */
.campo-lista {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--color-borde);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-superficie);
}
.opcion-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border: none;
  border-top: 1.5px solid var(--color-borde);
  background: transparent;
  color: var(--color-texto);
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.opcion-lista:first-child {
  border-top: none;
}
.opcion-lista-puntaje {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  border-radius: 100px;
  background: var(--color-fondo);
  color: var(--color-texto-suave);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.opcion-lista.activo {
  background: var(--color-secundario);
  font-weight: 600;
}
.opcion-lista.activo .opcion-lista-puntaje {
  background: var(--color-primario);
  color: #ffffff;
}

/* Sección plegable de "Sobre esta fórmula" — usa <details>/<summary>
   nativo de HTML (sin JS: el navegador ya sabe abrir/cerrar solo),
   colapsada por default para no estorbar visualmente. */
.info-fuente {
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  background: var(--color-superficie);
  overflow: hidden;
  /* Sin esto, dentro de .campos-medidas (que es flex-column), el
     propio overflow:hidden de aquí arriba (necesario para las
     esquinas redondeadas) le da permiso al navegador de "aplastar"
     esta caja por debajo de su altura real de contenido cuando no
     alcanza el espacio — pasaba en Glasgow, donde las 3 listas ya
     ocupan mucho: la sección de información se comprimía a 2px de
     alto, con el texto invisible aunque estuviera "abierta".
     flex-shrink:0 la protege de ese aplastamiento; el contenedor
     que sí debe crecer/encogerse es el scroll de #contenido-formula,
     no esta caja. */
  flex-shrink: 0;
}
.info-fuente summary {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primario);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-fuente summary::-webkit-details-marker {
  display: none;
}
.info-fuente summary::after {
  content: '▾';
  margin-left: auto;
  transition: transform 0.15s ease;
}
.info-fuente[open] summary::after {
  transform: rotate(180deg);
}
.info-fuente-contenido {
  padding: 0 14px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-texto-suave);
}
.info-fuente-contenido p {
  margin: 0 0 8px;
}
.info-fuente-contenido p:last-child {
  margin-bottom: 0;
}
.info-fuente-contenido strong {
  color: var(--color-texto);
}

/* Arco de resultado
   clamp(mínimo, preferido, máximo): el tamaño "preferido" (46vh,
   8vh, etc. = % de la altura de pantalla) se usa mientras quede
   entre el mínimo y el máximo — así el arco y el número se ven
   proporcionales tanto en un celular chico como en uno grande,
   sin quedar nunca demasiado chico ni demasiado enorme. */
.arco-resultado {
  position: relative;
  width: clamp(190px, 46vh, 260px);
  max-width: 100%;
}
.arco-svg {
  width: 100%;
  display: block;
}
/* Línea gris de fondo, siempre visible detrás del progreso o las zonas */
.arco-fondo {
  fill: none;
  stroke: var(--color-borde);
  stroke-width: 14;
  stroke-linecap: round;
}
/* Usada en Rabito/PC: su stroke-dashoffset lo controla app.js en
   cada actualizar(), para que se vea "llenar" según cuántos campos
   ya se completaron (ver el comentario de este truco en app.js). */
.arco-progreso {
  fill: none;
  stroke: var(--color-primario);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}
/* Usada en IMC/TFG: cada <path class="arco-zona"> lo genera app.js
   (construirTresZonasSvg) con un color distinto, para los 3 tercios */
.arco-zona {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}
/* El puntito que marca el resultado exacto sobre el arco de zonas.
   Su posición (cx, cy) y color los mueve app.js con JavaScript puro
   (marcador.setAttribute) — aquí en CSS solo se define cómo se ve. */
.arco-marcador {
  stroke: #ffffff;
  stroke-width: 2.5;
  transition: cx 0.25s ease, cy 0.25s ease, fill 0.25s ease;
}
.arco-centro {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.arco-valor {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(34px, 8vh, 54px);
  color: var(--color-texto);
  line-height: 1;
}

/* Resultado simple, sin arco — para escalas de puntaje corto y sin
   rango numérico continuo (ej. Glasgow: solo 13 valores posibles,
   de 3 a 15), donde el arco no aporta nada que el texto no diga ya. */
.resultado-simple {
  text-align: center;
  padding: 20px 0 8px;
}
.resultado-simple .arco-valor {
  font-size: clamp(48px, 14vh, 76px);
}
.arco-unidad {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-texto-suave);
}

.etiqueta-resultado {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-texto);
  text-align: center;
}
.nota-estimacion {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-texto-suave);
}
.categoria-imc {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: color 0.25s ease;
}
.nota-metodo {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--color-primario-suave);
  text-align: center;
  max-width: 280px;
}
.peso-ideal {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--color-texto-suave);
  text-align: center;
}
.diferencia-peso {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-texto);
  text-align: center;
}

/* Campos de medidas */
.campos-medidas {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.campo-etiqueta {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-texto-suave);
}
.aviso-campo {
  font-size: 11px;
  font-weight: 600;
  color: #c9634a;
  min-height: 0;
}
.aviso-campo:empty {
  display: none;
}
.campo-input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-borde);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--color-superficie);
}
.campo-input-wrap:focus-within {
  border-color: var(--color-primario);
}
.campo-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--fuente-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-texto);
  background: transparent;
  width: 100%;
  -moz-appearance: textfield;
}
.campo-input-wrap input::-webkit-outer-spin-button,
.campo-input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.campo-unidad {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-texto-suave);
}