/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Fundo escuro em tons de azul-marinho, com luzes desfocadas que se movem devagar. */
.cx-auth[b-sdtmavfbo4] {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(ellipse at top, #1c2b5e 0%, transparent 60%),
        linear-gradient(160deg, #0a1030 0%, #0d1638 45%, #0a1a2e 100%);
}

.cx-auth-bg[b-sdtmavfbo4] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cx-orb[b-sdtmavfbo4] {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    animation: cx-float-b-sdtmavfbo4 22s ease-in-out infinite alternate;
}

/* Azul (marca), verde-água (botão Entrar) e roxo. */
.cx-orb-1[b-sdtmavfbo4] { width: 520px; height: 520px; background: #405189; top: -160px; left: -120px; }
.cx-orb-2[b-sdtmavfbo4] { width: 420px; height: 420px; background: #0ab39c; bottom: -140px; right: -100px; opacity: .35; animation-duration: 26s; animation-delay: -8s; }
.cx-orb-3[b-sdtmavfbo4] { width: 360px; height: 360px; background: #6a4bc4; top: 35%; left: 60%; opacity: .3; animation-duration: 30s; animation-delay: -15s; }

/* Grade de pontos discreta, mais visível no centro. */
.cx-grid[b-sdtmavfbo4] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

@keyframes cx-float-b-sdtmavfbo4 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(60px, 40px) scale(1.08); }
    100% { transform: translate(-40px, 70px) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
    .cx-orb[b-sdtmavfbo4] { animation: none; }
}

.cx-auth-content[b-sdtmavfbo4] {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 0 2rem;
}

.cx-auth-logo[b-sdtmavfbo4] {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.cx-auth-logo-icon[b-sdtmavfbo4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.75rem;
    color: #fff;
    background: linear-gradient(135deg, #405189, #0ab39c);
    box-shadow: 0 10px 30px rgba(10, 179, 156, .35);
}

.cx-auth-logo-text[b-sdtmavfbo4] {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: #fff;
}

.cx-auth-tagline[b-sdtmavfbo4] {
    margin: 1rem 0 0;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, .8);
}

/* Card (vem das páginas): bordas arredondadas, sombra profunda, faixa colorida no topo. */
.cx-auth-content[b-sdtmavfbo4]  .card {
    position: relative;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}

.cx-auth-content[b-sdtmavfbo4]  .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #405189, #0ab39c, #6a4bc4);
}

.cx-auth-footer[b-sdtmavfbo4] {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Cada estado do Blazor (classe no <dialog>) mostra só os seus elementos. */
.components-reconnect-first-attempt-visible[b-12etgr0ywe],
.components-reconnect-repeated-attempt-visible[b-12etgr0ywe],
.components-reconnect-failed-visible[b-12etgr0ywe],
.components-pause-visible[b-12etgr0ywe],
.components-resume-failed-visible[b-12etgr0ywe],
.components-rejoining-animation[b-12etgr0ywe] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-retrying[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-failed[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-12etgr0ywe] {
    display: block;
}

/* Botões/ícones voltam ao display próprio (inline-flex / flex) quando visíveis. */
#components-reconnect-modal.components-reconnect-failed button.components-reconnect-failed-visible[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-paused button.components-pause-visible[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-resume-failed a.components-resume-failed-visible[b-12etgr0ywe] {
    display: inline-flex;
    align-items: center;
}

/* O spinner do Bootstrap é inline-block; o @keyframes dele precisa desse display. */
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-12etgr0ywe] {
    display: inline-block;
}

/* Visual de card do Velzon (cores do tema claro/escuro). */
#components-reconnect-modal[b-12etgr0ywe] {
    background-color: var(--vz-secondary-bg);
    color: var(--vz-body-color);
    width: min(24rem, calc(100vw - 2rem));
    margin: 20vh auto;
    padding: 2rem 1.5rem;
    border: 1px solid var(--vz-border-color);
    border-radius: var(--vz-border-radius-lg, .5rem);
    box-shadow: 0 5px 20px rgba(30, 32, 37, .2);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-12etgr0ywe 0.5s both;
}

    #components-reconnect-modal[open][b-12etgr0ywe] {
        animation: components-reconnect-modal-slideUp-b-12etgr0ywe 0.6s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-12etgr0ywe 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }

    #components-reconnect-modal[b-12etgr0ywe]::backdrop {
        background-color: rgba(0, 0, 0, 0.45);
        animation: components-reconnect-modal-fadeInOpacity-b-12etgr0ywe 0.5s ease-in-out;
        opacity: 1;
    }

@keyframes components-reconnect-modal-slideUp-b-12etgr0ywe {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-12etgr0ywe {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-12etgr0ywe {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-12etgr0ywe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
}

    .components-reconnect-container h5[b-12etgr0ywe],
    .components-reconnect-container p[b-12etgr0ywe] {
        margin: 0;
    }

.components-rejoining-animation[b-12etgr0ywe] {
    width: 3rem;
    height: 3rem;
    margin-bottom: .5rem;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-icon.components-reconnect-failed-visible[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-paused .components-reconnect-icon.components-pause-visible[b-12etgr0ywe],
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-icon.components-resume-failed-visible[b-12etgr0ywe] {
    display: block;
    width: 4rem;
    height: 4rem;
    margin-bottom: .5rem;
}