.application-form-steps {

    &__head {
        margin-bottom: 56px;

        @media (--viewport-ms-max) {
            margin-bottom: 40px;
        }

        .title-l {
            span {
                color: var(--color-text-error);
            }
        }
    }

    .steps-nav__list.oneLine {
        margin-top: 0;
        margin-bottom: 40px;

        .steps-nav__list-item {
            padding-bottom: 0;
        }
    }

    .quota-simulation-summary {
        margin-bottom: 40px;
        padding: 32px 40px;

        &.withBtn {
            @media (--viewport-ms-max) {
                flex-direction: row;
            }

            @media (--viewport-xs-max) {
                flex-direction: column;
            }

            .btn {
                display: flex;

                .icon {
                    fill: var(--color-icon-accent);
                }
            }
        }
    }

    .form-list-flex__field {
        margin-bottom: 0;
        /* para evitar el margen del componente form-list*/

        h4 {
            color: var(--color-text-accent);
            margin: 56px 0 32px;
        }

        .field-top .label-m {
            span {
                color: var(--color-text-subtle);
            }
        }

        .prelabel {
            .title-s {
                color: var(--color-text-accent-bold);
            }
        }
    }

    .legal {
        margin: 8px 0 40px;

        @media (--viewport-ms-max) {
            margin: 10px 0 40px;
        }

        @media (--viewport-xs-max) {
            margin: 16px 0 40px;
        }
    }

    .btns { display: flex; gap: 30px; justify-content: center;}

    .form-btn {
        display: flex;
        justify-content: center;
        margin-top: 8px;

        @media (--viewport-ms-max) {
            margin-top: 10px;
        }

        @media (--viewport-xs-max) {
            margin-top: 16px;
        }
    }


    &__step {
        display: none;

        &.show {
            display: block;
        }

        &.edition {
            .quota-simulation-summary {
                background-color: var(--color-background-subtle);

                .caption-label {
                    color: var(--color-text-subtle);
                }
            }
        }
    }
}