/* ==========================================================================
   Mipplet — bienvenida: los datos del bebé, una pregunta a la vez.
   ========================================================================== */

.onb {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 100dvh;
  overflow-x: clip;
  isolation: isolate;
}
.onb::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -260px;
  left: 50%;
  width: 900px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(185 165 245 / 0.32), transparent);
  pointer-events: none;
}

.onb__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--gutter) 0;
}
.onb__count { font-size: var(--fs-label); font-weight: var(--fw-semi); color: var(--text-3); }

.onb__progress {
  display: grid;
  grid-auto-flow: column;
  gap: 6px;
  width: min(100% - 2 * var(--gutter), 480px);
  margin: var(--s-6) auto 0;
}
.onb__progress span {
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  overflow: hidden;
}
.onb__progress span::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-nav) var(--ease-out);
}
.onb__progress span.is-done::after { transform: none; }

.onb__main {
  width: min(100% - 2 * var(--gutter), 480px);
  margin: 0 auto;
  padding-block: var(--s-8) var(--s-12);
}

/* --- La ficha del bebé ---------------------------------------------------- */
.ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
  border-radius: var(--r-float);
  transition: transform var(--dur-nav) var(--ease-spring);
}
.ficha__avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.ficha__avatar .icon { width: 24px; height: 24px; }
.ficha__name {
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ficha__name.is-empty { color: var(--text-3); font-weight: var(--fw-semi); }
.ficha__meta { font-size: var(--fs-caption); color: var(--text-2); }
.ficha__meta:empty { display: none; }
.ficha { min-height: 76px; }
.ficha.is-pulse { animation: ficha-pulse 420ms var(--ease-spring); }
@keyframes ficha-pulse { 40% { transform: scale(1.03); } }

/* --- Pasos ---------------------------------------------------------------- */
.paso { margin-top: var(--s-10); }
.paso.is-entering { animation: paso-in var(--dur-nav) var(--ease-out); }
.paso.is-entering.is-back { animation-name: paso-in-back; }
@keyframes paso-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes paso-in-back { from { opacity: 0; transform: translateX(-24px); } }

.paso__title {
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: var(--ls-heading);
}
.paso__lead { margin-top: var(--s-3); color: var(--text-2); }
.paso__body { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.paso__note { font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--accent); min-height: 1.6em; }
.paso__actions { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-10); }
.paso__actions .btn--primary { flex: 1; }
.paso__actions .btn--ghost { padding-inline: var(--s-4); }

.input--lg { height: 60px; font-size: 1.25rem; font-weight: var(--fw-semi); letter-spacing: -0.01em; }

/* Opciones grandes (radio) */
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.opcion { position: relative; }
.opcion input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.opcion span {
  display: grid;
  place-items: center;
  min-height: 72px;
  border-radius: var(--r-input);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-size: 1.125rem;
  font-weight: var(--fw-semi);
  transition: box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.opcion input:hover + span { box-shadow: inset 0 0 0 1px var(--accent-muted); }
.opcion input:active + span { transform: scale(0.97); }
.opcion input:checked + span { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.opcion input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft); }
.field.is-invalid .opcion span { box-shadow: inset 0 0 0 1.5px var(--error); }

.medidas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* --- Listo ---------------------------------------------------------------- */
.listo { margin-top: var(--s-10); text-align: center; animation: rise var(--dur-nav) var(--ease-out); }
.listo .done-mark { margin: 0 auto; }
.listo .paso__title { margin-top: var(--s-6); }
.listo .paso__lead { max-width: 26rem; margin-inline: auto; }
.listo .btn { margin-top: var(--s-10); }

.onb .auth__alert { margin-top: var(--s-5); }

@media (max-width: 520px) {
  .paso { margin-top: var(--s-8); }
  .paso__actions { margin-top: var(--s-8); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) .onb::before { background: radial-gradient(closest-side, rgb(118 84 214 / 0.18), transparent); }
}
:root[data-theme="night"] .onb::before { background: radial-gradient(closest-side, rgb(118 84 214 / 0.18), transparent); }

/* --- Calendario propio ---------------------------------------------------- */
.cal { padding: var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-card); }
.field.is-invalid .cal { box-shadow: inset 0 0 0 1.5px var(--error), var(--e-1); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 0 0 var(--s-2) var(--s-1); }
.cal__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-button);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.cal__title:hover { background: var(--accent-soft); }
.cal__title:focus-visible { border-radius: var(--r-button); }
.cal__title .icon { color: var(--text-3); transition: transform var(--dur-comp) var(--ease-out); }
.cal__title[aria-expanded="true"] .icon { transform: rotate(180deg); }
.cal__nav { display: flex; }
.cal__nav [disabled] { opacity: 0.3; }

.cal__week, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__week span { padding-block: var(--s-2); text-align: center; font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--text-3); }
.cal__days { gap: 2px; }
.cal__days.is-sliding { animation: cal-slide var(--dur-comp) var(--ease-out); }
.cal__days.is-sliding.is-back { animation-name: cal-slide-back; }
@keyframes cal-slide { from { opacity: 0; transform: translateX(14px); } }
@keyframes cal-slide-back { from { opacity: 0; transform: translateX(-14px); } }

.cal__day {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.cal__day:hover { background: var(--accent-soft); }
.cal__day:active { transform: scale(0.92); }
.cal__day:focus-visible { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent); }
.cal__day[aria-current="date"]::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.cal__day[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); animation: cal-pick 320ms var(--ease-spring); }
.cal__day[aria-pressed="true"]::after { background: var(--on-primary); }
.cal__day[disabled] { color: var(--text-3); opacity: 0.4; pointer-events: none; }
@keyframes cal-pick { from { transform: scale(0.7); } }

.cal__picker { display: grid; gap: var(--s-4); padding: var(--s-2) var(--s-1) 0; animation: rise var(--dur-comp) var(--ease-out); }
.cal__years { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cal__months { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.cal__chip {
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-button);
  background: var(--surface-sunken);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.cal__chip:hover { background: var(--accent-soft); }
.cal__chip:focus-visible { border-radius: var(--r-button); }
.cal__chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.cal__chip[disabled] { opacity: 0.35; pointer-events: none; }