/* ============================================================
   El formulario del plan, paso a paso.

   Mismo lenguaje que el registro de la bitácora —cabecera con el nombre
   del paso, barra de rayas, dos botones al pie— porque es el mismo gesto:
   contestar una cosa y seguir. Lo que cambia es que aquí las preguntas son
   de opción, así que ocupan tarjetas grandes en vez de listas.
   ============================================================ */

.panel-pasos { padding-top: 20px; }

/* El .form del sitio es una rejilla de dos columnas, pensada para los ocho
   campos sueltos que había antes. Con los pasos dentro, cada fieldset caía
   en una columna y los botones del pie en la otra: medido a 1280, el
   formulario quedaba en 109 px de ancho con el botón al lado. Aquí manda el
   paso, y las columnas se arman dentro de él. */
.panel-pasos .form { display: block; }

.plan-paso-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.plan-paso-cuenta {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Cuatro rayas en vez de un porcentaje: se lee de un vistazo cuánto falta
   sin tener que interpretar un número. */
.plan-barra-pasos { display: flex; gap: 5px; margin-bottom: 18px; }
.plan-barra-pasos i {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(120, 200, 255, 0.16);
  transition: background 0.3s;
}
.plan-barra-pasos i.on { background: linear-gradient(90deg, var(--cyan), var(--violet)); }

/* Un fieldset trae borde, márgenes y un ancho mínimo propios del navegador
   que rompen la rejilla si no se apagan. */
.plan-paso {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  animation: entrar-paso 0.28s ease both;
}
@keyframes entrar-paso {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

.plan-paso-titulo {
  float: none;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
}
.plan-paso-ayuda {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.form-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-rejilla .field:last-child { grid-column: 1 / -1; }

/* ---------- Tarjetas de opción ----------
   Los cinco niveles de actividad estaban en un desplegable: había que
   abrirlo para leerlos y elegir a ciegas entre textos de una línea. En
   tarjetas se ven los cinco de una vez, y cada una es un objetivo cómodo
   para el dedo. */
.opciones { display: grid; gap: 10px; }

.opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 12px 16px;
  background: rgba(4, 8, 16, 0.55);
  border: 1px solid var(--panel-br);
  border-radius: 13px;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}
.opcion:hover { border-color: rgba(34, 230, 255, 0.4); }

/* El círculo de la izquierda es el propio radio, dibujado: así lo mueve el
   teclado y lo lee el lector de pantalla sin trucos. */
.opcion input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid rgba(120, 200, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.opcion input:checked {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 5px var(--cyan);
}
.opcion input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.opcion:has(input:checked) {
  background: rgba(34, 230, 255, 0.09);
  border-color: rgba(34, 230, 255, 0.55);
}

/* La tarjeta es un <label>, y en styles.css todo label va en mayúsculas y
   espaciado: es el estilo de las etiquetas de campo, no el de una frase.
   Aquí dentro hay texto corriente, así que se devuelve a la normalidad. */
.opcion-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-transform: none;
  letter-spacing: normal;
}
.opcion-nombre {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.opcion-desc { font-size: 14.5px; line-height: 1.4; color: var(--ink-faint); font-weight: 400; }

/* ---------- Los botones del pie ----------
   El que avanza manda: ocupa lo que sobre y el de atrás se encoge. Puestos
   al mismo peso, el pulgar duda. */
.plan-paso-pies {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(120, 200, 255, 0.12);
}
.plan-paso-pies .btn { min-height: 52px; }
.plan-paso-pies .plan-avanza { flex: 1; }
.plan-paso-pies #btn-atras { flex: 0 0 auto; padding-left: 20px; padding-right: 20px; }
/* «Reiniciar» solo sale en el último paso, y ahí ya hay dos botones. En una
   fila de tres se salía del panel por la derecha -medido a 375-, y como el
   cuerpo recorta el desbordamiento no se veía salir: se veía cortado. Va
   debajo, en su propio renglón. */
.plan-paso-pies #btn-reset { flex: 1 0 100%; }

/* En el teléfono el botón que avanza ocupa todo el ancho, que es lo cómodo
   para el pulgar. En escritorio, estirado a 990 px se veía como una barra:
   ahí basta con que sea el más grande de la fila. */
@media (min-width: 861px) {
  .plan-paso-pies .plan-avanza { flex: 0 0 auto; min-width: 260px; }
  .plan-paso-pies #btn-reset { flex: 0 0 auto; margin-left: auto; }
}
.plan-paso-pies [hidden] { display: none; }

/* ---------- La foto del hero ----------
   La página abre con un formulario, que es lo más frío que puede haber. La
   foto dice de qué va esto antes de pedir el primer número: comida de
   verdad, con sus gramos. Es una imagen generada, la misma de la portada. */
.plan-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: center;
}
.plan-hero-foto {
  width: 100%;
  /* La etiqueta trae height="560" para reservar el hueco antes de que baje
     la foto. Sin este height:auto ese 560 manda y la proporción de abajo se
     ignora: la misma trampa que ya se cazó en la foto del catálogo. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--panel-br);
}

@media (max-width: 860px) {
  .plan-hero { grid-template-columns: 1fr; gap: 18px; }
  /* En el teléfono la foto va DESPUÉS del texto: primero se lee qué es
     esto, y la imagen acompaña. Arriba solo empujaría el formulario. */
  .plan-hero-foto { order: 2; max-width: 420px; aspect-ratio: 16 / 10; }
}

@media (max-width: 700px) {
  /* Se midió paso por paso a 375x700: con la barra del sitio encima quedan
     624 px utiles, y los dos primeros pasos medían 700 y 705. Estos recortes
     los bajan a caber, que es de lo que se trataba: el botón de avanzar se
     ve sin rodar la pantalla. */
  .plan-paso-titulo { font-size: 22px; }
  .plan-paso-ayuda { font-size: 15px; margin-bottom: 14px; }
  .plan-barra-pasos { margin-bottom: 14px; }
  .opciones { gap: 8px; }
  .plan-paso-pies { margin-top: 18px; padding-top: 16px; }
  /* Peso y estatura caben en dos columnas; edad y sexo piden su renglón. */
  .form-rejilla { gap: 14px; }
  .form-rejilla .field:nth-child(3) { grid-column: 1 / -1; }
  .opcion { min-height: 52px; padding: 9px 14px; }
  .opcion-nombre { font-size: 15.5px; }
  .opcion-desc { font-size: 14px; }
}