/* =========================================================
   ONIRIC RECOVERY PROFILE
   Primer paso: Datos del deportista
   ========================================================= */

:root {
    --oniric-white: #f1f1ee;
    --oniric-pure-white: #ffffff;
    --oniric-black: #2d2926;

    --oniric-glass-start: rgba(255, 255, 255, 0.50);
    --oniric-glass-end: rgba(255, 255, 255, 0.30);

    --oniric-card-start: rgba(255, 255, 255, 0.50);
    --oniric-card-end: rgba(255, 255, 255, 0.58);

    --oniric-border-start: rgba(255, 255, 255, 0.60);
    --oniric-border-end: rgba(102, 102, 102, 0.10);

    --oniric-muted: rgba(255, 255, 255, 0.60);
    --oniric-error: #ffe0dc;

    --oniric-radius-card: 25px;
    --oniric-radius-pill: 999px;

    --oniric-content-width: 1000px;
	
	--RELLENO-CRISTAL: background: linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%);
	--RELLENO-CRISTAL-INV: background: linear-gradient(99deg, rgba(255, 255, 255, 0.12) 91.8%, rgba(255, 255, 255, 0.20) 8.05%);

}



/* =========================================================
   SECCIÓN GENERAL
   ========================================================= */

.oniric-recovery-test {
    position: relative;
    isolation: isolate;

    display: flex;
    width: 100%;

    /*
     * No usamos una altura fija, porque el formulario
     * puede superar la altura de la ventana.
     */
    min-height: calc(100vh - var(--oniric-layout-offset, 0px));

    /*
     * Importante:
     * no utilizar overflow: hidden aquí, porque podría
     * cortar contenido cuando el formulario crezca.
     */
    overflow: visible;

    color: var(--oniric-white);

    background-color: #151515;
}

/*
 * Fondo fotográfico fijo.
 *
 * Al usar position: fixed, la imagen queda anclada
 * a la ventana del navegador mientras el contenido
 * de la vista se desplaza.
 */
.oniric-recovery-test::before {
    position: fixed;
    z-index: -2;
    inset: -2px;

    content: "";
    pointer-events: none;

    background-color: #151515;
    background-image: var(--recovery-background-image);
    background-repeat: no-repeat;
    background-position: center 20%;
    background-size: cover;

    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

/*
 * Oscurecimiento fijo sobre la imagen.
 */
.oniric-recovery-test__overlay {
    position: fixed;
    z-index: -1;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.64) 0%,
            rgba(0, 0, 0, 0.72) 48%,
            rgba(0, 0, 0, 0.80) 100%
        );
}

/*
 * Todo el contenido se desplaza normalmente
 * sobre el fondo fijo.
 */
.oniric-recovery-test__container {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    padding-top: clamp(13rem, 18vw, 17rem);
    padding-bottom: clamp(5rem, 8vw, 7.5rem);
}

@media (max-width: 767.98px) {
    .oniric-recovery-test::before {
        background-position: 58% center;
    }

    .oniric-recovery-test__container {
        align-items: stretch;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.oniric-recovery-test__header {
    width: 100%;
    max-width: var(--oniric-content-width);
    margin-bottom: clamp(3rem, 6vw, 5rem);
    text-align: center;
}

.oniric-recovery-test__eyebrow {
    margin: 0 0 1.25rem;

    color: var(--oniric-pure-white);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.21rem;
    text-indent: 1.15rem;
    text-transform: uppercase;
}

.oniric-recovery-test__title {
    margin: 0;

    color: var(--oniric-pure-white);
    font-size: clamp(2.5rem, 4.2vw, 3rem);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -0.035em;
}


/* =========================================================
   INDICADOR DE PASOS
   ========================================================= */

.recovery-stepper {
    width: min(100%, var(--oniric-content-width));
    margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.recovery-stepper__list {
    display: flex;
    align-items: stretch;
    justify-content: space-between;

    width: 100%;
    margin: 0;
    padding: 0.625rem;

    list-style: none;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--oniric-radius-pill);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.recovery-stepper__item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    min-height: 46px;
    padding: 0.75rem 1.15rem;

    color: var(--oniric-white);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;

    /* border: 1px solid transparent; */
    border-radius: var(--oniric-radius-pill);

    opacity: 0.82;
}

.recovery-stepper__item--active {
    border-color: rgba(255, 255, 255, 0.52);
    background:
        linear-gradient(
            135deg,
            var(--oniric-glass-start) 0%,
            var(--oniric-glass-end) 100%
        );

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    opacity: 0.5;
    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);
}

.recovery-stepper__number {
    display: none;
}

.recovery-stepper__icon {
    display: none;
}

.recovery-stepper__icon img {
    display: block;
    width: 2rem;
    height: 2rem;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.recovery-profile-form {
    width: min(100%, var(--oniric-content-width));
}

.recovery-card {
    position: relative;
    overflow: hidden;

    padding: clamp(1.75rem, 4vw, 2.5rem);

    border: 1px solid transparent;
    border-radius: var(--oniric-radius-card);

background: linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.23) 91.8%);


    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.recovery-card::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(255, 255, 255, 0.20),
            transparent 36%
        );
}

.recovery-card__header,
.recovery-card__fields {
    position: relative;
    z-index: 1;
}

.recovery-card__header {
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.recovery-card__step {
    margin-bottom: 0.95rem;

    color: var(--oniric-muted);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.recovery-card__title {
    margin: 0 0 1.25rem;

    color: var(--oniric-pure-white);
    font-size: clamp(1.85rem, 3.4vw, 2.25rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.recovery-card__description {
    max-width: 720px;
    margin: 0;

    color: var(--oniric-pure-white);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.recovery-field {
    margin: 0;
}

.recovery-field__label {
    display: block;
    margin-bottom: 0.9rem;

    color: var(--oniric-white);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.recovery-field__control.form-control {
    width: 100%;
    min-height: 54px;
    padding: 1rem 2rem;

    color: var(--oniric-pure-white);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;

    border: 1px solid transparent;
    border-radius: var(--oniric-radius-pill);
    outline: none;

background: var(--RELLENO-CRISTAL, linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%));


    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.recovery-field__control.form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

.recovery-field__control.form-control:hover {
background: var(--RELLENO-CRISTAL-INV, linear-gradient(99deg, rgba(255, 255, 255, 0.12) 91.8% , rgba(255, 255, 255, 0.20) 8.05%));

}

.recovery-field__control.form-control:focus {
    color: var(--oniric-pure-white);

    border-color: transparent;


    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.12),
        0 7px 28px rgba(0, 0, 0, 0.14);

    transform: translateY(-1px);
}

.recovery-field.has-error .recovery-field__control,
.recovery-field__control.is-invalid {
    border-color: transparent;

background: var(--RELLENO-CRISTAL-INV, linear-gradient(99deg, rgba(255, 255, 255, 0.12) 91.8% , rgba(255, 255, 255, 0.20) 8.05%));


    box-shadow:
        0 0 0 3px rgba(225, 82, 62, 0.12);
}

.recovery-field__error,
.recovery-field .help-block {
    display: block;
    min-height: 1.1rem;
    margin-top: 0.55rem;

    color: var(--oniric-error);
    font-size: 0.75rem;
    line-height: 1.4;
}


/* Evita el fondo blanco del autocompletado de Chrome */
.recovery-field__control:-webkit-autofill,
.recovery-field__control:-webkit-autofill:hover,
.recovery-field__control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--oniric-pure-white);
    caret-color: var(--oniric-pure-white);

    -webkit-box-shadow:
        0 0 0 1000px rgba(255, 255, 255, 0.24) inset,
        0 4px 25px rgba(255, 255, 255, 0.16);

    transition: background-color 9999s ease-in-out 0s;
}


/* =========================================================
   BOTÓN CONTINUAR
   ========================================================= */

.recovery-profile-form__actions {
    display: flex;
    justify-content: center;
    margin-top: clamp(2.5rem, 5vw, 5rem);
}

.recovery-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;

    min-width: 220px;
    min-height: 54px;
    padding: 1.125rem 2rem;

    color: var(--oniric-white);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;

    border: 1px solid transparent;
    border-radius: var(--oniric-radius-pill);
    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.50) 0%,
            rgba(255, 255, 255, 0.30) 100%
        ) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.60) 0%,
            rgba(102, 102, 102, 0.10) 100%
        ) border-box;

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);

    transition:
        color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.recovery-submit:hover,
.recovery-submit:focus-visible {
    color: var(--oniric-pure-white);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.54) 100%
        ) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.20) 100%
        ) border-box;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.20),
        0 4px 25px rgba(255, 255, 255, 0.22);

    outline: none;
    transform: translateY(-2px);
}

.recovery-submit:active {
    transform: translateY(0);
}

.recovery-submit:disabled,
.recovery-submit.is-disabled {
    color: rgba(241, 241, 238, 0.54);
    cursor: not-allowed;
    opacity: 0.72;
    transform: none;
}

.recovery-submit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1.25rem;
    line-height: 1;

    transition: transform 180ms ease;
}

.recovery-submit:hover .recovery-submit__icon {
    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .oniric-recovery-test__container {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .recovery-stepper {
        overflow-x: auto;
        padding-bottom: 0.4rem;
        scrollbar-width: none;
    }

    .recovery-stepper::-webkit-scrollbar {
        display: none;
    }

    .recovery-stepper__list {
        width: max-content;
        min-width: 100%;
    }

    .recovery-stepper__item {
        flex: 0 0 auto;
        min-width: 130px;
    }
}


@media (max-width: 767.98px) {
    .oniric-recovery-test {
        background-position: 58% center;
    }

    .oniric-recovery-test__container {
        align-items: stretch;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .oniric-recovery-test__header {
        margin-bottom: 2.5rem;
    }

    .oniric-recovery-test__eyebrow {
        margin-bottom: 1rem;

        font-size: 0.75rem;
        letter-spacing: 0.65rem;
        text-indent: 0.65rem;
    }

    .recovery-stepper {
        width: 100%;
        min-width: 0;
        margin-bottom: 2.5rem;
        padding-bottom: 0;
        overflow: visible;
    }

    .recovery-stepper__list {
        width: 100%;
        min-width: 0;
        gap: 0;
        padding: 0.5rem;
    }

    .recovery-stepper__item,
    .recovery-stepper__item--active {
        display: flex;
        flex: 1 1 20%;
        min-width: 0;
        min-height: 3.75rem;
        padding: 0.45rem 0.25rem;
        justify-content: center;
    }

    .recovery-stepper__number,
    .recovery-stepper__label,
    .recovery-stepper__item--active .recovery-stepper__label {
        display: none;
    }

    .recovery-stepper__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .recovery-stepper__link,
    .recovery-stepper__content {
        gap: 0;
        justify-content: center;
    }

    .recovery-card {
        padding: 1.5rem;
        border-radius: 20px;
    }

    .recovery-card__header {
        margin-bottom: 2.25rem;
    }

    .recovery-field__control.form-control {
        padding-right: 1.35rem;
        padding-left: 1.35rem;
    }

    .recovery-submit {
        width: 100%;
        gap: 2rem;
    }
}


@media (max-width: 419.98px) {
    .oniric-recovery-test__eyebrow {
        letter-spacing: 0.42rem;
        text-indent: 0.42rem;
    }

    .recovery-card {
        padding: 1.25rem;
    }

    .recovery-card__description {
        font-size: 0.92rem;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .recovery-field__control,
    .recovery-submit,
    .recovery-submit__icon {
        transition: none;
    }
}

/* =========================================================
   SELECTS DEL RECOVERY PROFILE
   ========================================================= */

.recovery-field__select.form-select {
    min-height: 54px;
    padding: 1rem 3.5rem 1rem 2rem;
	border-radius: 1.5625rem;

    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 400;

    cursor: pointer;

background: linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%);
box-shadow: 0 4px 25px 0 rgba(255, 255, 255, 0.25);
backdrop-filter: blur(3.4000000953674316px);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M1 1L7.5 7.5L14 1' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.31) 0%,
            rgba(255, 255, 255, 0.18) 100%
        );

    background-position:
        right 2rem center,
        center;

    background-repeat:
        no-repeat,
        no-repeat;

    background-size:
        15px 9px,
        100% 100%;
}

.recovery-field__select.form-select:focus {
    color: #ffffff;

border-radius: 1.5625rem;
background: linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%);
box-shadow: 0 4px 25px 0 rgba(255, 255, 255, 0.25);
backdrop-filter: blur(3.4000000953674316px);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M1 1L7.5 7.5L14 1' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.24) 100%
        );

    background-position:
        right 2rem center,
        center;

    background-repeat:
        no-repeat,
        no-repeat;

    background-size:
        15px 9px,
        100% 100%;
}

.recovery-field__select.form-select option {	
    color: #111;
	border-radius: 1.5625rem;
background: linear-gradient(99deg, rgba(255, 255, 255, 0.35) 8.05%, rgba(255, 255, 255, 0.21) 91.8%);
box-shadow: 0 4px 25px 0 rgba(255, 255, 255, 0.25);
backdrop-filter: blur(3.4000000953674316px);
}

.recovery-field__select:invalid,
.recovery-field__select option[value=""] {
    color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 767.98px) {
    .recovery-field__select.form-select {
        padding-right: 3rem;
        padding-left: 1.35rem;
        background-position:
            right 1.35rem center,
            center;
    }
}

/* =========================================================
   MEDIDOR DE CALIDAD DEL SUEÑO
   ========================================================= */

.recovery-range {
    display: flex;
    align-items: center;
    gap: 1.25rem;

    width: 100%;
    min-height: 3.375rem;
}

.recovery-range__input {
    width: 100%;
    height: 1.5625rem;
    margin: 0;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;
}

/* Línea: Chrome, Edge y Safari */
.recovery-range__input::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.95);
}

/* Control: Chrome, Edge y Safari */
.recovery-range__input::-webkit-slider-thumb {
    width: 1.5625rem;
    height: 1.5625rem;
    margin-top: -0.71875rem;

    border: 0;
    border-radius: 50%;

    cursor: grab;

    background: #a2a2a2;

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.25);

    appearance: none;
    -webkit-appearance: none;
}

.recovery-range__input::-webkit-slider-thumb:active {
    cursor: grabbing;
}

/* Línea: Firefox */
.recovery-range__input::-moz-range-track {
    width: 100%;
    height: 2px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.95);
}

/* Control: Firefox */
.recovery-range__input::-moz-range-thumb {
    width: 1.5625rem;
    height: 1.5625rem;

    border: 0;
    border-radius: 50%;

    cursor: grab;

    background: #a2a2a2;

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.25);
}

.recovery-range__value {
    display: inline-flex;
    flex: 0 0 3.25rem;
    align-items: center;
    justify-content: center;

    min-width: 3.25rem;
    min-height: 2rem;
    padding: 0.3125rem 0.75rem;

    color: #f1f1ee;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.75rem;
    line-height: 1;

    border: 1px solid transparent;
    border-radius: 5.6875rem;

    background:
        linear-gradient(
            99deg,
            rgba(255, 255, 255, 0.35) 8.05%,
            rgba(255, 255, 255, 0.21) 91.8%
        ) padding-box,
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.60),
            rgba(102, 102, 102, 0.10)
        ) border-box;

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.25);

    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);
}

.recovery-range__input:focus-visible {
    outline: none;
}

.recovery-range__input:focus-visible::-webkit-slider-thumb {
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.18),
        0 4px 25px rgba(255, 255, 255, 0.25);
}

.recovery-range__input:focus-visible::-moz-range-thumb {
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.18),
        0 4px 25px rgba(255, 255, 255, 0.25);
}

@media (max-width: 575.98px) {
    .recovery-range {
        gap: 0.875rem;
    }

    .recovery-range__value {
        flex-basis: 2.75rem;
        min-width: 2.75rem;
    }
}

/* =========================================================
   CAMPOS NUMÉRICOS DEL RECOVERY PROFILE
   ========================================================= */

/* Chrome, Edge, Safari y navegadores WebKit */
.recovery-field__control[type="number"]::-webkit-inner-spin-button,
.recovery-field__control[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

/* Firefox */
.recovery-field__control[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* =========================================================
   SECCIONES INTERNAS DEL PASO 5
   ========================================================= */

.recovery-form-section {
    width: 100%;
}

.recovery-form-section + .recovery-form-section {
    margin-top: 2.5rem;
}

.recovery-form-section__title {
    margin: 0 0 1.5rem;

    color: #ffffff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.025em;
}


/* =========================================================
   CONSENTIMIENTO
   ========================================================= */

.recovery-consent {
    margin-top: 2.5rem;
}

.recovery-consent__field {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.875rem;

    margin: 0;
}

.recovery-consent__input {
    flex: 0 0 auto;

    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1rem 0 0;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 0.35rem;

    cursor: pointer;

    background-color: rgba(255, 255, 255, 0.16);

    appearance: none;
    -webkit-appearance: none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.recovery-consent__input:checked {
    border-color: #ffffff;

    background-color: rgba(255, 255, 255, 0.78);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.2 8L11 1' stroke='%232D2926' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
}

.recovery-consent__input:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.14);
}

.recovery-consent__label {
    flex: 1 1 16rem;
    margin: 0;

    color: rgba(255, 255, 255, 0.88);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.6;

    cursor: pointer;
}

.recovery-consent__label a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

.recovery-consent__label a:hover {
    color: #ffffff;
    opacity: 0.78;
}

.recovery-consent__field .recovery-field__error {
    flex-basis: 100%;
    margin-left: 2.125rem;
}


/* =========================================================
   RESPONSIVE PASO 5
   ========================================================= */

@media (max-width: 767.98px) {
    .recovery-form-section + .recovery-form-section,
    .recovery-consent {
        margin-top: 2rem;
    }

    .recovery-form-section__title {
        margin-bottom: 1.25rem;
        font-size: 1.1rem;
    }
}

.recovery-stepper__link,
.recovery-stepper__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.recovery-stepper__link {
    cursor: pointer;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.recovery-stepper__link:hover {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
    transform: translateY(-2px);
}

.recovery-stepper__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
    border-radius: 0.5rem;
}

.recovery-stepper__item--completed
.recovery-stepper__number {
    opacity: 1;
}

.recovery-stepper__item--disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.recovery-stepper__item--disabled
.recovery-stepper__content {
    pointer-events: none;
}

.recovery-profile-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.recovery-profile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
}

.recovery-profile-back:hover {
    text-decoration: none;
}

.recovery-back__icon,
.recovery-submit__icon {
    line-height: 1;
}

@media (max-width: 575.98px) {
    .recovery-profile-form__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .recovery-profile-form__actions > a,
    .recovery-profile-form__actions > button {
        width: 100%;
    }
}

/* ==========================================================================
   RECOVERY PROFILE — RETÍCULA COMÚN ONIRIC
   La anchura exterior se obtiene desde .oniric-page-frame
   ========================================================================== */

.oniric-recovery-test__container {
    position: relative;
    z-index: 2;

    /*
     * No establecer aquí width, max-width ni padding horizontal.
     * Esas propiedades pertenecen a .oniric-page-frame.
     */
}


/*
 * Contenedor interior del cuestionario.
 *
 * La página respeta la retícula general de hasta 1626px,
 * pero el formulario mantiene un ancho de lectura adecuado.
 */

.oniric-recovery-test__content {
    display: flex;
    align-items: stretch;

    width: 100%;

    margin-right: auto;
    margin-left: auto;
}


/* Todos los bloques principales ocupan el mismo ancho interior */

.oniric-recovery-test__header,
.oniric-recovery-test__content
.recovery-profile-stepper,
.oniric-recovery-test__content
.recovery-profile-form {
    width: 100%;
}


/* El formulario no debe tener otro límite de ancho heredado */

.recovery-profile-form {
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}


/* Card principal */

.recovery-card {
    width: 100%;
    max-width: none;
}


/* Barra de acciones alineada con el card */

.recovery-profile-form__actions {
    width: 100%;
}


/* Banner final: la retícula la controla oniric-page-frame */

.oniric-image-banner-block
.oniric-banner-content-inner.oniric-page-frame {
    width: var(--oniric-page-width);
    max-width: var(--oniric-page-max-width);

    margin-right: auto;
    margin-left: auto;
}



/* ==========================================================================
   ESTADO DE GENERACIÓN DEL INFORME — PASO 5
   ========================================================================== */

.recovery-profile-processing {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    color: #fff;
    background: rgba(2, 7, 10, 0.82);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.recovery-profile-processing.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.recovery-profile-processing__panel {
    display: grid;
    justify-items: center;
    width: min(100%, 34rem);
    padding: clamp(1.75rem, 4vw, 3rem);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(105, 166, 255, 0.18), transparent 12rem),
        rgba(8, 16, 22, 0.92);
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.42);
}

.recovery-profile-processing__spinner {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.4rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #7caeff;
    border-radius: 50%;
    animation: recovery-profile-processing-spin 0.9s linear infinite;
}

.recovery-profile-processing__eyebrow {
    margin: 0;
    color: #8ab9ff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13rem;
    text-transform: uppercase;
}

.recovery-profile-processing__message {
    max-width: 29rem;
    margin: 0.8rem 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    line-height: 1.6;
}

.recovery-profile-is-submitting {
    overflow: hidden;
}

@keyframes recovery-profile-processing-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .recovery-profile-processing,
    .recovery-profile-processing__spinner {
        transition: none;
        animation: none;
    }
}


/* ==========================================================================
   AYUDA DE MÉTRICAS WEARABLE — PASO 5
   ========================================================================== */

.recovery-field__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.recovery-wearable-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    color: #2d2926;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease;
}

.recovery-wearable-help:hover,
.recovery-wearable-help:focus-visible {
    background: #ffffff;
    transform: scale(1.08);
}

.recovery-wearable-help:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.recovery-wearable-modal .modal-content {
    overflow: hidden;
    color: #f1f1ee;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, #1e2429, #101619);
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.48);
}

.recovery-wearable-modal .modal-header {
    align-items: flex-start;
    padding: 1.6rem 1.6rem 1rem;
    border: 0;
}

.recovery-wearable-modal .modal-title {
    margin: 0;
    color: #ffffff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
}

.recovery-wearable-modal .modal-body {
    padding: 0 1.6rem 1.6rem;
    color: rgba(241, 241, 238, 0.84);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.94rem;
    line-height: 1.65;
}

.recovery-wearable-modal .modal-body p + p {
    margin-top: 0.9rem;
}

.recovery-wearable-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.85;
}

.recovery-wearable-modal__eyebrow {
    margin: 0 0 0.45rem;
    color: #e1523e;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12rem;
}

.recovery-wearable-modal__where {
    display: grid;
    gap: 0.4rem;
    margin-top: 1.35rem;
    padding: 1rem;
    border-left: 2px solid #e1523e;
    border-radius: 0 0.65rem 0.65rem 0;
    background: rgba(255, 255, 255, 0.07);
}

.recovery-wearable-modal__where strong {
    color: #ffffff;
    font-size: 0.78rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .recovery-wearable-modal .modal-dialog {
        margin: 1rem;
    }

    .recovery-wearable-modal .modal-header {
        padding: 1.35rem 1.35rem 0.8rem;
    }

    .recovery-wearable-modal .modal-body {
        padding: 0 1.35rem 1.35rem;
    }
}