.gs-auth-is-open {
overflow: hidden;
}

.gs-auth-modal[hidden] {
display: none;
}

.gs-auth-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: var(--space-md);
}

.gs-auth-modal__overlay {
position: absolute;
inset: 0;
background: rgba(35, 31, 32, .48);
backdrop-filter: blur(10px);
}

.gs-auth-modal__dialog {
position: relative;
z-index: 1;
width: min(100%, 430px);
padding: 38px;
border-radius: var(--radius-lg);
background: var(--color-blanco);
box-shadow: 0 24px 70px rgba(35, 31, 32, .22);
}

.gs-auth-modal__close {
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 999px;
background: var(--color-rojo);
color: var(--color-text-blanco);
font-size: 26px;
line-height: 1;
cursor: pointer;
transition: transform .2s ease, filter .2s ease;
}

.gs-auth-modal__close:hover {
filter: brightness(.96);
transform: scale(1.04);
}

.gs-auth-modal__header {
padding-right: 34px;
}

.gs-auth-modal__title {
max-width: 330px;
margin: 0;
color: var(--color-text-cafe);
font-size: clamp(34px, 6vw, 44px);
font-weight: var(--font-bold);
line-height: 1.04;
}

.gs-auth-modal__notice {
margin-top: 18px;
padding: 12px 14px;
border-radius: var(--radius-sm);
background: rgba(253, 113, 113, .12);
color: #a13b3b;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
}

.gs-auth-modal__form {
display: none;
margin-top: 26px;
}

.gs-auth-modal__form.is-active {
display: grid;
gap: 16px;
}

.gs-auth-modal__field {
position: relative;
display: block;
color: var(--color-text-cafe);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
}

.gs-auth-modal__field span {
position: absolute;
top: -9px;
left: 14px;
z-index: 1;
padding: 0 7px;
background: var(--color-blanco);
color: var(--color-text-cafe);
font-size: var(--text-sm);
line-height: 1;
pointer-events: none;
transition: color .2s ease;
}

.gs-auth-modal__field input {
width: 100%;
min-height: 58px;
padding: 0 48px 0 14px;
border: 1px solid rgba(105, 90, 85, .18);
border-radius: var(--radius-sm);
background: var(--color-blanco);
color: var(--color-text-negro);
font: inherit;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}

.gs-auth-modal__field input:not([type="password"]) {
padding-right: 14px;
}

.gs-auth-modal__field input:focus {
border-color: rgba(241, 145, 35, .85);
box-shadow: 0 0 0 3px rgba(241, 145, 35, .13);
}

.gs-auth-modal__field:focus-within span {
color: var(--color-primario-anaranjado);
}

.gs-auth-modal__password-toggle {
position: absolute;
right: 9px;
top: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--color-text-cafe);
cursor: pointer;
transform: translateY(-50%);
transition: background-color .2s ease, color .2s ease;
}

.gs-auth-modal__password-toggle:hover {
background: rgba(105, 90, 85, .08);
color: var(--color-primario);
}

.gs-auth-modal__password-eye {
position: relative;
display: block;
width: 20px;
height: 14px;
border: 2px solid currentColor;
border-radius: 999px / 70%;
}

.gs-auth-modal__password-eye::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
transform: translate(-50%, -50%);
}

.gs-auth-modal__password-toggle.is-visible .gs-auth-modal__password-eye::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 25px;
height: 2px;
border-radius: 999px;
background: currentColor;
transform: translate(-50%, -50%) rotate(-42deg);
}

.gs-auth-modal__submit {
width: 100%;
margin-top: 6px;
border: 0;
border-radius: 999px;
}

.gs-auth-modal__submit:disabled {
opacity: .68;
cursor: wait;
}

.gs-auth-modal__switch {
border: 0;
background: transparent;
color: var(--color-primario);
font-size: var(--text-sm);
font-weight: var(--font-regular);
text-decoration: none;
cursor: pointer;
}

.gs-auth-modal__switch:hover {
color: var(--color-primario-oscuro);
}

@media (max-width: 480px) {
.gs-auth-modal {
align-items: center;
padding: var(--space-sm);
}

.gs-auth-modal__dialog {
padding: 32px 24px 26px;
border-radius: var(--radius-md);
}

.gs-auth-modal__title {
font-size: 32px;
}
}