.login-page-body {
    background:
        radial-gradient(circle at 13% 12%, rgba(13, 110, 253, .11), transparent 32%),
        radial-gradient(circle at 90% 16%, rgba(255, 178, 22, .12), transparent 29%),
        #f7faff;
}

.login-page-body .site-footer {
    margin-top: 0;
}

.login-page {
    --portal-primary: #0969f2;
    --portal-soft: #e9f2ff;
    --portal-warm: #f7ab21;
    width: min(1380px, calc(100% - 36px));
    height: clamp(650px, calc(100svh - 108px), 684px);
    min-height: 650px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(560px, 1.18fr) minmax(555px, .98fr);
    align-items: stretch;
    gap: 0;
    margin-block: 12px;
    border: 1px solid rgba(188, 208, 237, .64);
    border-radius: 36px;
    overflow: hidden;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 32px 72px rgba(18, 47, 93, .1);
}

.auth-portal {
    position: relative;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(38px, 5vw, 50px) clamp(38px, 5vw, 50px) clamp(44px, 5vw, 54px);
    border: 0;
    border-right: 1px solid rgba(188, 208, 237, .56);
    border-radius: 0;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .94), rgba(232, 242, 255, .82)),
        #fff;
    box-shadow: none;
    isolation: isolate;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .45s ease, transform .48s cubic-bezier(.22, .75, .25, 1);
}

.portal-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .48;
    background-image:
        linear-gradient(rgba(36, 112, 216, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 112, 216, .075) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 63% 62%, #000 0, transparent 68%);
}

.portal-light {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(4px);
}

.portal-light-blue {
    right: -95px;
    bottom: 76px;
    width: 370px;
    height: 370px;
    background: radial-gradient(circle, rgba(9, 105, 242, .2), transparent 68%);
}

.portal-light-warm {
    top: -94px;
    left: -86px;
    width: 270px;
    height: 270px;
    background: radial-gradient(circle, rgba(247, 171, 33, .18), transparent 68%);
}

.portal-copy {
    position: relative;
    max-width: 438px;
    z-index: 2;
}

.portal-kicker,
.login-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--portal-primary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.portal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--portal-primary);
    box-shadow: 0 0 0 6px rgba(9, 105, 242, .11);
}

.portal-copy h1 {
    margin: 17px 0 14px;
    color: var(--text);
    font-size: clamp(2.3rem, 4vw, 3.15rem);
    line-height: 1.05;
    letter-spacing: -.065em;
}

.portal-copy p {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.72;
}

.portal-stage {
    position: relative;
    flex: 1;
    min-height: 300px;
    margin-top: 13px;
    transform: translate(var(--stage-x, 0px), var(--stage-y, 0px));
    transition: transform .55s cubic-bezier(.22, .75, .25, 1);
}

.portal-ring {
    position: absolute;
    top: 51%;
    left: 57%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.portal-ring-outer {
    width: 288px;
    height: 288px;
    border: 1px dashed rgba(9, 105, 242, .25);
    animation: portalSpin 25s linear infinite;
}

.portal-ring-outer::before,
.portal-ring-outer::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--portal-warm);
    box-shadow: 0 0 14px rgba(247, 171, 33, .6);
}

.portal-ring-outer::before {
    top: 28px;
    left: 38px;
}

.portal-ring-outer::after {
    right: 24px;
    bottom: 47px;
    background: var(--portal-primary);
    box-shadow: 0 0 14px rgba(9, 105, 242, .46);
}

.portal-ring-mid {
    width: 237px;
    height: 237px;
    border: 1px solid rgba(9, 105, 242, .2);
    box-shadow:
        inset 0 0 0 10px rgba(9, 105, 242, .035),
        0 0 30px rgba(9, 105, 242, .08);
}

.portal-ring-inner {
    width: 179px;
    height: 179px;
    border: 1px solid rgba(9, 105, 242, .18);
    background: rgba(255, 255, 255, .42);
    backdrop-filter: blur(4px);
}

.portal-track {
    position: absolute;
    top: 51%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(9, 105, 242, .34), transparent);
}

.portal-track-left {
    left: 0;
    width: calc(57% - 110px);
}

.portal-track-right {
    left: calc(57% + 110px);
    right: 0;
}

.portal-node {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--portal-primary);
    box-shadow: 0 0 0 6px rgba(9, 105, 242, .08), 0 0 16px rgba(9, 105, 242, .36);
}

.portal-node-one {
    top: 32%;
    left: 16%;
}

.portal-node-two {
    top: 72%;
    left: 29%;
    background: var(--portal-warm);
}

.portal-node-three {
    top: 31%;
    right: 10%;
}

.portal-scanner {
    position: absolute;
    top: calc(51% - 105px);
    left: calc(57% - 108px);
    width: 216px;
    height: 2px;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent, #4eb2ff, var(--portal-primary), transparent);
    box-shadow: 0 0 17px rgba(9, 105, 242, .5);
    animation: portalScan 3.8s ease-in-out infinite;
}

.portal-brand {
    position: absolute;
    top: 51%;
    left: 57%;
    width: 114px;
    height: 114px;
    display: grid;
    place-items: center;
    padding: 19px;
    border: 1px solid rgba(9, 105, 242, .12);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(12, 54, 119, .12);
    transform: translate(-50%, -50%);
}

.portal-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portal-brand strong {
    color: var(--portal-primary);
    font-size: .72rem;
    text-align: center;
}

.portal-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    position: relative;
    z-index: 2;
    padding: 4px;
    margin: 0 -4px -4px;
}

.portal-benefit {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border: 1px solid rgba(172, 199, 237, .56);
    border-radius: 15px;
    background: rgba(255, 255, 255, .8);
}

.portal-benefit .material-icons {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(9, 105, 242, .08);
    color: var(--portal-primary);
    font-size: 17px;
}

.portal-benefit span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.portal-benefit strong {
    color: var(--text);
    font-size: .68rem;
    line-height: 1.28;
}

.portal-benefit small {
    color: #687c99;
    font-size: .61rem;
    line-height: 1.25;
}

.login-panel {
    display: flex;
    align-items: stretch;
    background:
        radial-gradient(circle at 90% 16%, rgba(247, 171, 33, .07), transparent 30%),
        rgba(255, 255, 255, .84);
}

.login-container {
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(32px, 4vw, 48px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .45s ease .08s, transform .48s cubic-bezier(.22, .75, .25, 1) .08s;
}

.login-page.is-ready .auth-portal,
.login-page.is-ready .login-container {
    opacity: 1;
    transform: translateY(0);
}

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

.auth-view:not([hidden]) {
    animation: authViewIn .22s ease both;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 38px;
    color: var(--text);
    font-size: .8rem;
    font-weight: 700;
}

.login-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.auth-switch {
    width: 100%;
    display: flex;
    gap: 4px;
    margin-bottom: clamp(25px, 3vw, 34px);
    padding: 4px;
    border: 1px solid #e1eaf7;
    border-radius: 14px;
    background: #f4f8fe;
}

.auth-switch button {
    flex: 1;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    color: #637895;
    background: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.auth-switch button.is-active {
    color: #fff;
    background: var(--portal-primary);
    box-shadow: 0 9px 18px rgba(9, 105, 242, .18);
}

.auth-switch button:focus-visible {
    outline: 3px solid rgba(9, 105, 242, .2);
    outline-offset: 1px;
}

.auth-view-login {
    margin: auto 0;
    padding-bottom: clamp(35px, 7vh, 72px);
}

.auth-view-register {
    margin-top: 0;
}

.auth-view-pending {
    margin: auto 0;
    padding-bottom: clamp(40px, 7vh, 76px);
    display: grid;
    justify-items: center;
    text-align: center;
}

.auth-view-pending .login-kicker {
    margin-top: 28px;
}

.auth-view-pending h2 {
    margin-top: 12px;
}

.auth-view-pending > p {
    max-width: 310px;
    margin: 0 0 28px;
}

.auth-processing-mark {
    position: relative;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    color: var(--portal-primary);
    background:
        radial-gradient(circle, rgba(9, 105, 242, .13), transparent 62%),
        #f8fbff;
}

.auth-processing-mark .material-icons {
    z-index: 2;
    font-size: 31px;
}

.auth-processing-ring {
    position: absolute;
    inset: 11px;
    border: 1px dashed rgba(9, 105, 242, .4);
    border-radius: 50%;
    animation: processingSpin 3.4s linear infinite;
}

.auth-processing-ring::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--portal-warm);
    box-shadow: 0 0 12px rgba(247, 171, 33, .55);
}

.auth-processing-scan {
    position: absolute;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--portal-primary), transparent);
    box-shadow: 0 0 12px rgba(9, 105, 242, .42);
    animation: processingScan 1.7s ease-in-out infinite;
}

.auth-processing-track {
    width: min(300px, 100%);
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(9, 105, 242, .1);
}

.auth-processing-track span {
    display: block;
    height: 100%;
    width: 43%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #177bfd, #f7ab21);
    animation: processingTrack 1s ease-in-out infinite;
}

.login-page.is-pending .auth-switch {
    opacity: .65;
}

.login-page.is-register .login-brand {
    margin-bottom: 15px;
}

.login-page.is-register .auth-switch {
    margin-bottom: 14px;
}

.auth-view-register h2 {
    margin-top: 7px;
    font-size: 1.72rem;
}

.login-box h2 {
    margin: 12px 0 9px;
    color: var(--text);
    font-size: clamp(1.62rem, 3vw, 1.94rem);
    line-height: 1.15;
    letter-spacing: -.045em;
}

.login-box > p {
    margin-bottom: 31px;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.6;
}

.auth-view-register .login-box > p,
.auth-view-register > p {
    margin-bottom: 13px;
}

.register-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 10px;
}

.register-name,
.register-address,
.register-neighborhood {
    grid-column: span 4;
}

.register-document,
.register-phone,
.register-number {
    grid-column: span 2;
}

.register-password {
    grid-column: span 3;
}

.auth-view-register .input-group {
    margin-bottom: 10px;
}

.auth-view-register .input-shell {
    min-height: 45px;
}

.auth-view-register .input-shell input {
    height: 43px;
}

.auth-view-register .floating-label {
    top: 15px;
}

.input-group {
    margin-bottom: 19px;
}

.input-shell {
    position: relative;
    min-height: 49px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 14px;
    border: 1px solid #dde6f3;
    border-radius: 14px;
    background: #f8fbff;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.input-shell > .material-icons {
    color: #91a4bf;
    font-size: 20px;
    flex: 0 0 auto;
}

.input-shell:focus-within {
    border-color: var(--portal-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(9, 105, 242, .1);
}

.input-shell.is-invalid {
    border-color: #e45151;
    background: #fff9f9;
    box-shadow: 0 0 0 4px rgba(228, 81, 81, .09);
}

.input-shell.is-invalid > .material-icons,
.input-shell.is-invalid .floating-label {
    color: #d74747;
}

.input-shell.is-invalid:focus-within {
    border-color: #df4444;
    box-shadow: 0 0 0 4px rgba(228, 81, 81, .14);
}

.input-shell:focus-within > .material-icons,
.input-shell:focus-within .floating-label {
    color: var(--portal-primary);
}

.input-shell input {
    flex: 1;
    min-width: 0;
    height: 47px;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: .9rem;
    padding: 0;
    transition: padding .18s ease;
}

.login-page .input-shell input {
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
}

.login-page .input-shell input:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.login-page .input-shell input::placeholder {
    color: transparent;
}

.floating-label {
    position: absolute;
    left: 45px;
    top: 17px;
    pointer-events: none;
    color: #8295af;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1;
    transform-origin: left top;
    transition: transform .18s ease, color .18s ease;
}

.floating-field:focus-within input,
.floating-field:has(input:not(:placeholder-shown)) input {
    padding: 14px 0 0;
}

.floating-field input:focus ~ .floating-label,
.floating-field input:not(:placeholder-shown) ~ .floating-label,
.floating-field.has-value .floating-label {
    color: #60738d;
    transform: translateY(-10px) scale(.78);
}

.password-wrapper {
    position: relative;
}

.toggle-btn {
    width: 35px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.toggle-btn img {
    width: 20px;
    height: 20px;
    opacity: .58;
}

.toggle-btn:hover img {
    opacity: .88;
}

.alert {
    min-height: 0;
    display: block;
    margin: 6px 0 0;
    color: #e24343;
    font-size: .73rem;
    font-weight: 500;
}

.login-alert:not(:empty) {
    margin: 4px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff1f1;
}

.auth-feedback {
    display: none;
    margin: 4px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #067440;
    background: #edf9f3;
    font-size: .76rem;
    font-weight: 600;
}

.auth-feedback:not(:empty) {
    display: block;
}

.btn {
    width: 100%;
    min-height: 55px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(120deg, #075ee3, #1385ff);
    box-shadow: 0 14px 28px rgba(9, 105, 242, .23);
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.btn .material-icons {
    font-size: 18px;
}

.btn-spinner {
    width: 18px;
    height: 18px;
    display: none;
    border: 2px solid rgba(255, 255, 255, .42);
    border-top-color: #fff;
    border-radius: 50%;
    animation: buttonSpin .7s linear infinite;
}

.btn.is-busy .btn-spinner {
    display: block;
}

.btn.is-busy .btn-arrow {
    display: none;
}

.btn:hover {
    box-shadow: 0 20px 34px rgba(9, 105, 242, .3);
    transform: translateY(-2px);
}

.btn:disabled {
    opacity: .72;
    cursor: wait;
    transform: none;
}

.btn:focus-visible,
.toggle-btn:focus-visible {
    outline: 3px solid rgba(9, 105, 242, .25);
    outline-offset: 2px;
}

.register-submit {
    min-height: 49px;
    margin-top: 4px;
}

@keyframes portalSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes portalScan {
    0%, 100% { opacity: .2; transform: translateY(-38px); }
    24%, 74% { opacity: .78; }
    50% { opacity: .52; transform: translateY(74px); }
}

@keyframes buttonSpin {
    to { transform: rotate(360deg); }
}

@keyframes authViewIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes processingSpin {
    to { transform: rotate(360deg); }
}

@keyframes processingScan {
    0%, 100% { transform: translateY(-25px); opacity: .2; }
    50% { transform: translateY(25px); opacity: .9; }
}

@keyframes processingTrack {
    from { transform: translateX(-110%); }
    to { transform: translateX(250%); }
}

.layout-restaurante.login-page-body {
    background:
        radial-gradient(circle at 12% 12%, rgba(10, 103, 239, .13), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(255, 159, 26, .14), transparent 29%),
        #f6f9ff;
}

.layout-restaurante .auth-portal {
    border-color: rgba(155, 186, 230, .44);
}

.layout-restaurante .portal-light-warm {
    background: radial-gradient(circle, rgba(255, 159, 26, .2), transparent 68%);
}

@media (min-width: 981px) and (max-width: 1180px) {
    .login-page {
        grid-template-columns: minmax(390px, .9fr) minmax(510px, 1fr);
        width: calc(100% - 26px);
    }

    .auth-portal {
        padding-inline: 30px;
    }

    .portal-copy h1 {
        font-size: 2.4rem;
    }

    .portal-benefit {
        padding-inline: 8px;
    }
}

@media (max-width: 980px) {
    .login-page {
        grid-template-columns: 1fr;
        width: min(500px, calc(100% - 36px));
        height: auto;
        min-height: calc(100vh - 80px);
        margin-block: clamp(22px, 6vh, 46px);
        gap: 0;
        border-radius: 27px;
    }

    .auth-portal {
        display: none;
    }

    .login-panel,
    .login-container {
        max-width: none;
    }

    .login-container {
        height: auto;
        min-height: 0;
    }

    .auth-view-login {
        margin: 0;
        padding-bottom: 0;
    }

    .auth-view-pending {
        min-height: 330px;
        padding-bottom: 0;
    }
}

@media (max-width: 560px) {
    .login-page {
        min-height: calc(100vh - 76px);
        width: calc(100% - 30px);
        margin: 18px auto 32px;
    }

    .login-container {
        padding: 27px 20px;
    }

    .login-brand {
        margin-bottom: 27px;
    }

    .register-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .register-name,
    .register-address,
    .register-neighborhood,
    .register-document,
    .register-phone,
    .register-number,
    .register-password {
        grid-column: span 1;
    }

}

@media (prefers-reduced-motion: reduce) {
    .portal-ring,
    .portal-scanner,
    .btn-spinner,
    .auth-processing-ring,
    .auth-processing-scan,
    .auth-processing-track span,
    .auth-view:not([hidden]) {
        animation: none !important;
    }

    .portal-stage,
    .btn,
    .input-shell {
        transition-duration: .01ms !important;
    }

    .auth-portal,
    .login-container {
        opacity: 1;
        transform: none;
    }
}