/* ==========================================================================
   La bienvenida, contada por el monigote (24-oct-2026)

   Antonio: «La bienvenida debe ser con lo que tenemos actualmente… que lo
   explique el monigote que hemos creado». La tarjeta, el progreso, las
   opciones y el foco del recorrido siguen en styles.css (.onboarding-*,
   .ob-*); aquí solo lo nuevo: la viñeta de cada paso y lo que se ajusta
   alrededor. Va después de menu-superior.css.

   La viñeta (<figure class="ob-vineta" data-vineta="NN">) es 4:5, como la
   PNG de ChatGPT (img/onboarding/bienvenida-NN.png, 1000×1250). Mientras no
   está, se ve un marco con el bocadillo escrito; cuando llega, la imagen
   tapa el marco y el texto queda solo para el lector de pantalla.
   ========================================================================== */

.onboarding-card { max-width: 480px; }

.ob-vineta {
    position: relative;
    margin: 0 auto 10px;
    height: clamp(150px, 30vh, 270px);
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    background: #FFFBEA;
    border: 2px dashed #E9D27A;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 10px 0;
    box-sizing: border-box;
}
/* En los pasos con formulario, más pequeña para que entren los campos. */
.ob-vineta.is-pequena { height: clamp(110px, 19vh, 180px); padding-top: 8px; }

/* El bocadillo, arriba, como en las viñetas. */
.ob-bocadillo {
    position: relative;
    background: #fff;
    border: 2px solid #1d1d1f;
    border-radius: 16px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    font-style: italic;
    color: #1d1d1f;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
}
.ob-bocadillo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-right: 2px solid #1d1d1f;
    border-bottom: 2px solid #1d1d1f;
    transform: translateX(-50%) rotate(45deg);
}
.ob-vineta.is-pequena .ob-bocadillo { font-size: 11.5px; padding: 6px 8px; border-radius: 12px; }

/* Debajo del bocadillo, en el marco, una chistera de referencia (no es el
   dibujo: el dibujo es la PNG). */
.ob-vineta::after {
    content: "";
    flex: 1 1 auto;
    width: 60%;
    margin-top: 14px;
    background: center 40% / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 12h28v32H18z' fill='%231d1d1f'/%3E%3Cpath d='M18 36h28v5H18z' fill='%23FFCC00'/%3E%3Cellipse cx='32' cy='46' rx='26' ry='5' fill='%231d1d1f'/%3E%3C/svg%3E");
    opacity: 0.22;
}

/* Con la PNG: la imagen ocupa la viñeta y el texto se queda para el lector. */
.ob-vineta.con-png {
    background: #fff;
    border: 0;
    padding: 0;
}
.ob-vineta.con-png::after { content: none; }
.ob-vineta-png {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ob-vineta.con-png .ob-bocadillo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* «Sobre ti»: sexo en una fila y edad, altura y peso en tres cajas. */
.onboarding-options.ob-sexo { flex-direction: row; justify-content: center; gap: 10px; }
.onboarding-options.ob-sexo .onboarding-option { flex: 1; justify-content: center; text-align: center; }
.ob-datos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.ob-datos .onboarding-input-row {
    padding: 8px 10px;
    margin: 0;
    min-width: 0;
    max-width: none;
    align-items: center;
    gap: 4px;
    cursor: text;
}
.ob-datos .onboarding-input-row input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 20px;
    text-align: right;
}
.ob-datos .onboarding-input-row span { flex: 0 0 auto; font-size: 11px; }

.ob-plan-edit-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* El recorrido: sin barra abajo desde el 24-oct-2026, la tarjeta no
   necesita dejarle sitio. */
.onboarding-overlay.ob-card-bottom { padding-bottom: 16px; }
.onboarding-overlay.ob-spotlight-mode .onboarding-card { max-height: calc(100dvh - 140px); }
.onboarding-step.ob-tour p { margin-bottom: 4px; }

/* Escritorio con altura de sobra: la pequeña, algo más grande. */
@media (min-width: 481px) and (min-height: 820px) {
    .ob-vineta.is-pequena { height: clamp(150px, 23vh, 220px); }
}
@media (max-width: 480px) {
    .ob-vineta { height: clamp(150px, 28vh, 240px); }
    .ob-vineta.is-pequena { height: clamp(120px, 20vh, 170px); }
    .ob-bocadillo { font-size: 12.5px; }
}
@media (max-height: 720px) {
    .ob-vineta { height: clamp(120px, 24vh, 200px); }
    .ob-vineta.is-pequena { height: clamp(96px, 15vh, 130px); }
}
@media (prefers-reduced-motion: reduce) {
    .onboarding-step.active { animation: none; }
}