body,html{width:100%;height:100%;margin:0}

.ds-box-registrar-usuario{width:100%;height:100%;display:flex;overflow:hidden;--ds-prev:440px;flex-wrap:wrap}

.ds-preview-info{width:var(--ds-prev);height:100%;position:relative;z-index:1;padding:16px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.ds-preview-info::after,.ds-preview-info::before{content:'';width:100%;height:100%;position:absolute;inset:0;z-index:-1}
.ds-preview-info::before{background-color:rgb(var(--ds-dark-rgb),.725)}
.ds-preview-info::after{background-image:url('../IMAGENES/dark_night.jpg');background-size:cover;background-position:center;z-index:-2}

.ds-description-app{font-family:var(--ds-font);color:var(--ds-white);font-weight:700;font-size:.825rem;width:240px;text-align:center}

.ds-form-registrar{width:0;height:100%;position:relative;padding:64px;overflow-y:auto;flex:1;z-index:1}


.ds-title-app{display:flex;align-items:center;font-family:var(--ds-font);font-size:.825rem;font-weight:500;border-bottom:2px rgb(var(--ds-dark-rgb),.325) dotted;padding-bottom:14px}

.ds-lista-preferencias{width:100%;gap:16px}
.ds-lista-preferencias .ds-item{--szi:128px;width:var(--szi);height:var(--szi);border-radius:12px;box-shadow:0 4px 4px rgb(var(--ds-dark-rgb),.325);padding:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;backdrop-filter:blur(7px)}

.ds-icono-pref{width:40px;height:40px;font-size:.975rem;color:var(--ds-star)}

.ds-titulo-pref{text-align:center;font-size:.725rem;line-height:.825rem;font-family:var(--ds-font)}

.ds-aplica-preferencia{display:flex;align-items:center;gap:4px;margin-top:auto;width:100%;flex-direction:row-reverse;flex-wrap:wrap}
.ds-aplica-preferencia input[type=checkbox]{display:none!important}

.ds-square-checkbox{position:relative;width:12px;height:12px;border:1px rgb(var(--ds-dark-rgb),.725) solid;overflow:hidden;border-radius:50%}
.ds-square-checkbox::before{--mc:2px;content:'';width:calc(100% - calc(var(--mc)*2));height:calc(100% - calc(var(--mc)*2));background-color:var(--ds-star);position:absolute;inset:0;margin:auto;transition:all .225s ease-in;transform:scale(0);border-radius:50%}

.ds-text-aplica{font-family:var(--ds-font);font-size:.495rem;font-weight:400;position:relative}
.ds-aplica-preferencia input[type=checkbox]:checked~.ds-square-checkbox{border-color:var(--ds-star)}
.ds-aplica-preferencia input[type=checkbox]:checked~.ds-square-checkbox::before{transform:scale(1)}
.ds-aplica-preferencia input[type=checkbox]:not(:checked)~.ds-text-aplica::after{content:'No Aplica'}
.ds-aplica-preferencia input[type=checkbox]:checked~.ds-text-aplica::after{content:'Aplica'}

.ds-aplica-preferencia .ds-square-checkbox{box-shadow:none!important}
.ds-aplica-preferencia input[type=checkbox]:not(:checked) ~ .ds-square-checkbox::before{display:none!important}

.ds-box-save{width:calc(100% - var(--ds-prev));min-height:56px;position:fixed;bottom:0;right:0;z-index: 2;padding:16px;display:flex;align-items:center;justify-content:space-around;background-color:var(--ds-star)}
.ds-box-save .ds-button{border:1px rgb(var(--ds-white-rgb),.725) solid}

.ds-box-loading{width:100%;height:100%;padding:1rem;display:flex;justify-content:center;align-items:center;flex-direction:column}
.ds-box-loading:not(.d-none)~*{display:none!important}

.ds-box-password{flex-direction:row;align-items:center;gap:9px;justify-content:flex-end}
.ds-icono[data-role=reset-calendar]{width:48px;height:48px;font-size:.725rem;border-radius:12px;box-shadow:0 4px 4px rgb(var(--ds-black-rgb),.225);color:var(--ds-star);cursor:pointer}
.ds-box-loading.ds-logo-animation .ds-stack .ds-icono:first-child{position:relative;z-index:0;overflow:hidden}
.ds-box-loading.ds-logo-animation .ds-stack .ds-icono:first-child::before{content:'';width:100%;height:100%;position:absolute;inset:0;margin:auto;background-image:linear-gradient(var(--ds-light),rgba(var(--ds-light-rgb),.225));animation:ds-animation-gradient 1.5s infinite;z-index:0}
.ds-box-loading.ds-logo-animation .ds-stack .ds-icono:last-child img{animation:ds-float-animation 3.5s ease-in-out infinite;filter:drop-shadow(2px 7px 7px rgba(0,0,0,.325))}

#btnRegistrarUsuario{background-image:none;background-color:var(--ds-white);color:var(--ds-black)}
.ds-dark-button{background-image:none!important;background-color:var(--ds-dark)!important;color:var(--ds-light)!important}

.ds-input.ds-read-only{
    pointer-events: none;
    border-color: transparent;
    user-select: none;
    box-shadow: 0 3px 4px 1px rgb(var(--ds-black-rgb),.225);
    border-radius: 7px; 
}

.ds-input.ds-read-only + .ds-input-counter{
    display: none;
}

@keyframes ds-animation-gradient{to{transform:rotate(360deg)}}

@media (max-width:1199.98px){
    .ds-box-registrar-usuario{--ds-prev:320px}
}

@media (max-width: 991.98px) {
    .ds-form-registrar{width:100%;padding:48px}
    .ds-box-save{width:100%}
    .ds-box-registrar-usuario{flex-direction:column;overflow:hidden}
    .ds-preview-info{width:100%;height:144px}
 
}

@media (max-width: 575.98px){
    .ds-form-registrar{padding:16px}
    .ds-box-logo{gap:0}
    .ds-box-logo .ds-logo-name{ font-size: .975rem;  }
    .ds-square-flow{font-size:.975rem;min-height:32px}
}