/* ============================================================
   ConnectPr — Kit de Login & Senhas (camada visual compartilhada)
   Carregado por ÚLTIMO em cada página para sobrepor o CSS base.
   Mantém o mesmo design da tela de login em: login, recuperação
   de senha, redefinição, troca obrigatória e verificação (token).
   ============================================================ */
@keyframes ak-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes ak-pulse { 0%,100% { opacity:.45; transform:scale(.85);} 50% { opacity:1; transform:scale(1.15);} }
@keyframes ak-dash  { to { stroke-dashoffset: -40; } }

/* ---- Containers (sombra/raio consistentes) ---- */
.login-container,
.forgot-container,
.reset-container {
    box-shadow: 0 30px 70px -30px rgba(14,46,113,.45);
    border: 1px solid rgba(14,46,113,.06);
    border-radius: 20px;
}

/* ---- Painel de marca: gradiente profundo + grid mascarado ---- */
.login-carousel,
.forgot-carousel,
.reset-carousel,
.reset-visual {
    background: linear-gradient(160deg, #13347E 0%, #0E2E71 55%, #081B45 100%) !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.login-carousel::before,
.forgot-carousel::before,
.reset-carousel::before,
.reset-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 40%, #000, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 75% at 50% 40%, #000, transparent 80%);
}
.login-carousel > *,
.forgot-carousel > *,
.reset-carousel > *,
.reset-visual > * { position: relative; z-index: 2; }

/* ---- Helpers de marca (orbes / rede de dados / badge / stats) ---- */
.ak-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(26px);
    z-index: 0;
    pointer-events: none;
    animation: ak-float 9s ease-in-out infinite;
}
.ak-orb.a { top: -90px; right: -60px; width: 320px; height: 300px; background: radial-gradient(circle, rgba(43,212,158,.30), transparent 70%); }
.ak-orb.b { bottom: -110px; left: -80px; width: 320px; height: 300px; background: radial-gradient(circle, rgba(56,140,255,.28), transparent 70%); animation-delay: -3s; }

.ak-network { position: relative; height: 140px; margin: 6px 0 14px; z-index: 2; }
.ak-network svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ak-flow { animation: ak-dash 2s linear infinite; }
.ak-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: .72rem; font-weight: 600;
    color: rgba(255,255,255,.92);
    white-space: nowrap;
    box-shadow: 0 8px 18px -10px rgba(0,0,0,.5);
    z-index: 3;
}
.ak-node .ak-dot { width: 6px; height: 6px; border-radius: 50%; background: #38C9FF; box-shadow: 0 0 8px #38C9FF; animation: ak-pulse 1.8s infinite; }
.ak-node.center { background: rgba(43,227,168,.16); border-color: rgba(43,227,168,.4); color: #d7fff0; font-weight: 700; }
.ak-node.center .ak-dot { background: #2BE3A8; box-shadow: 0 0 10px #2BE3A8; }

.ak-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    font-size: .74rem; font-weight: 600;
    color: rgba(255,255,255,.92);
    margin-bottom: 14px;
}
.ak-badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: #2BE3A8; animation: ak-pulse 2s infinite; }

.ak-stats { display: flex; gap: 22px; margin-top: 16px; }
.ak-stats .stat strong { display: block; font-size: 1.15rem; font-weight: 700; line-height: 1; color: #fff; }
.ak-stats .stat span { font-size: .7rem; color: rgba(255,255,255,.62); margin-top: 3px; display: block; }

/* ---- Campos com glow no foco ---- */
.forgot-form .form-control,
.reset-form .form-control,
.reset-form-wrapper .form-group input {
    border: 2px solid #e6ebf3;
    background: #fbfcfe;
    border-radius: 10px;
}
.forgot-form .form-control:focus,
.reset-form .form-control:focus,
.reset-form-wrapper .form-group input:focus {
    border-color: var(--danddis-primary, #0E2E71);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(14,46,113,.12);
}

/* ---- Botões primários com gradiente do login ---- */
.btn-forgot,
.btn-reset,
.btn-verify,
.reset-form-wrapper .btn-primary {
    border-radius: 12px !important;
    background: linear-gradient(135deg, #0E2E71 0%, #1B53C9 100%) !important;
    box-shadow: 0 10px 24px -14px rgba(14,46,113,.7);
    color: #fff !important;
    transition: filter .2s, transform .1s;
}
.btn-forgot:hover,
.btn-reset:hover,
.btn-verify:hover,
.reset-form-wrapper .btn-primary:hover { filter: brightness(1.07); }
.btn-forgot:active,
.btn-reset:active,
.btn-verify:active,
.reset-form-wrapper .btn-primary:active { transform: translateY(1px); }
.btn-forgot:disabled,
.btn-reset:disabled,
.btn-verify:disabled { filter: grayscale(.45); opacity: .7; }

/* ---- Card único (verificação MFA / token) com identidade do login ---- */
.mfa-page-wrap { background: #F4F7FC; }
.mfa-card {
    border-radius: 18px !important;
    box-shadow: 0 30px 70px -30px rgba(14,46,113,.45) !important;
    border-top: 4px solid #1B53C9;
}
.mfa-shield { color: #0E2E71; }
.mfa-digit:focus { border-color: #1B53C9; box-shadow: 0 0 0 4px rgba(27,83,201,.14); }
.btn-verify { width: 100%; padding: .8rem; border: none; font-size: 1rem; font-weight: 600; cursor: pointer; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
    .ak-orb, .ak-flow, .ak-node .ak-dot, .ak-badge .pulse { animation: none !important; }
}