.modal-axs {
    display: none;
    margin: 0;
    position: fixed;
    top: var(--h-header);
    left: 0;
    width: 100%;
    height: var(--h-body);
    text-align: center;
    z-index: var(--z-modal);

    overflow-y: auto;

    &:before {
        content: '';
        position: fixed;
        top: var(--h-header);
        left: 0;
        width: 100%;
        height: var(--h-body);
        background: rgba(var(--color-lightgrey-rgb), 0.6);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        opacity: 1;
        z-index: -1;
    }

    & .modal-dialogo {
        text-align: left;
        margin: 0 auto;
        position: relative;
        max-width: 1900px;
        min-height: 100%;
    }

    & .modal-contenido {
        background: transparent;
        border: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        margin: 0;
        position: relative;
        max-width: 1900px;
        padding: var(--variable-2) var(--variable-2) var(--variable-2) 0;

        & .modal-cabecera {
            background: linear-gradient(15deg, rgba(var(--color-modalheader,var(--color-main-rgb)), 1) 0%, 40%, rgba(var(--color-modalheader,var(--color-main-rgb)), 0.7) 75%);
            border-radius: var(--variable-2);
            color: var(--color-white);
            padding: var(--variable-4);
            position: sticky;
            top: var(--variable-2);
            z-index: 10; /* Un z-index más alto para asegurar que pase por encima del cuerpo */

            margin: 0 0 var(--variable-2) 0;
            box-shadow: 0 0 10px var(--color-lightgrey);
            border: none;
            backdrop-filter: blur(7px);

            container-type: scroll-state;
            container-name: modal-axs-cabecera;

            & h3,
            & h4 {
                margin: 0;
                color: var(--color-white);
            }

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 0;
                background: white;
                border-radius: var(--variable-2);
            }
        }

        & .modal-cuerpo {
            background: linear-gradient(15deg, rgba(var(--color-lightblue-rgb), 1) 0%, 20%, rgba(var(--color-white-rgb), 1) 75%);
            border-radius: var(--variable-2);
            padding: var(--variable-4);
            position: relative;
            margin: 0 0 var(--variable-2) 0;
            box-shadow: 0 0 10px var(--color-lightgrey);
            border: none;
        }

        & .modal-pie {
            display: flex;
            justify-content: end;
            padding: 0 0 var(--variable-2) 0;
            align-items: center;
            border: none;
            margin: 0 0 var(--variable-2) 0;
        }
    }

    &.modal-fix-blur-chrome:before {
        content: ' ';
    }
}

@container modal-axs-cabecera scroll-state(stuck: top) {
    border-radius: 0;
}