/* =========================================================================
   Tela de login (theme-builder)
   Moldura em app/templates/theme-builder/login.html
   Conteudo do formulario em app/control/admin/LoginForm.php (injetado via AJAX)
   As cores de marca vem de FranquiaService::getVariables() -> {VARIABLES-CSS}
   ========================================================================= */

body.builder-template-login {
    --login-ink: #191831;
    --login-ink-soft: #3a3956;
    --login-muted: #71708c;
    --login-muted-2: #b0afc6;
    --login-field-border: #e2e1ee;
    --login-field-bg: #fbfbfe;
    --login-radius: 12px;

    margin: 0;
    background: #fff;
    color: var(--login-ink);
    font-family: 'Instrument Sans', 'Sora', system-ui, sans-serif;
}

.login-v2 {
    display: block;
    height: auto;
    min-height: 100vh;
    background: #fff;
}

.login-v2 *,
.login-v2 *::before,
.login-v2 *::after {
    box-sizing: border-box;
}

.login-v2__main {
    display: flex;
    min-height: 100vh;
}

/* ---------- Painel de marca (esquerda) ---------- */

.login-v2__brand {
    position: relative;
    width: 56%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 60px;
    background: var(--login-panel-bg, #0b0b18);
}

.login-v2__brand::before,
.login-v2__brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
}

.login-v2__brand::before {
    top: -160px;
    left: -120px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, var(--login-aurora-a, rgba(96, 80, 224, .55)), transparent 65%);
    animation: login-aurora-a 14s ease-in-out infinite;
}

.login-v2__brand::after {
    bottom: -200px;
    right: -140px;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, var(--login-aurora-b, rgba(168, 80, 224, .35)), transparent 65%);
    animation: login-aurora-b 18s ease-in-out infinite;
}

@keyframes login-aurora-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(60px, -40px) scale(1.15); }
}

@keyframes login-aurora-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-50px, 50px) scale(1.1); }
}

.login-v2__synapses {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    z-index: 1;
}

.login-v2__synapses circle {
    animation: login-pulse-dot 3.6s ease-in-out infinite;
}

.login-v2__synapses circle:nth-child(odd) {
    animation-duration: 4.4s;
    animation-delay: .6s;
}

.login-v2__synapses circle:nth-child(3n) {
    animation-delay: 1.2s;
}

@keyframes login-pulse-dot {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

.login-v2__brand > :not(.login-v2__synapses) {
    position: relative;
    z-index: 2;
}

.login-v2__logo-chip {
    display: inline-flex;
    align-self: flex-start;
    background: rgba(255, 255, 255, .92);
    border-radius: 12px;
    padding: 10px 16px;
}

.login-v2__logo-chip img {
    height: 30px;
    max-width: 220px;
    display: block;
    object-fit: contain;
}

.login-v2__copy h1 {
    margin: 0;
    font-family: 'Space Grotesk', 'Sora', sans-serif;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 600;
    color: #fff;
    max-width: 520px;
    text-wrap: pretty;
}

.login-v2__copy p {
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .6);
    max-width: 440px;
}

.login-v2__tags {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
}

.login-v2__tags .sep {
    opacity: .4;
}

/* ---------- Variante: painel de marca com arte propria ----------
   Franquias que tem uma arte de login propria (ex.: smartplusai) mostram a
   imagem no lugar da aurora + texto. Ver FranquiaService::getLoginBrandArt(). */

.login-v2__brand--art {
    align-items: center;
    justify-content: center;
    padding: 4%;
}

.login-v2__brand--art::before,
.login-v2__brand--art::after,
.login-v2__brand--art .login-v2__synapses,
.login-v2__brand--art .login-v2__logo-chip,
.login-v2__brand--art .login-v2__copy,
.login-v2__brand--art .login-v2__tags {
    display: none;
}

.login-v2__brand-art {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- Painel do formulario (direita) ---------- */

.login-v2__form {
    width: 44%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    overflow: auto;
}

.login-v2__form #adianti_div_content {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-v2__form [page-name="LoginForm"],
.login-v2__form [page-name="SystemRequestPasswordResetForm"],
.login-v2__form [page-name="SystemPasswordResetForm"] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-v2 #login-wrapper.login-v2-box {
    margin: 0 !important;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.login-v2-title {
    margin: 0;
    font-family: 'Space Grotesk', 'Sora', sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--login-ink);
}

.login-v2-subtitle {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--login-muted);
}

/* ---------- Neutraliza a "chrome" do BootstrapFormBuilder ---------- */

.login-v2-form,
.login-v2-form .card-body,
.login-v2-form .panel-body,
.login-v2-form .tab-content,
.login-v2-form .card-footer,
.login-v2-form .panel-footer {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.login-v2-form .tab-pane {
    padding: 0 !important;
    margin: 0 !important;
}

.login-v2-form .form-group,
.login-v2-form .tformrow {
    margin: 0 0 16px 0 !important;
}

.login-v2-form .tformrow:last-child {
    margin-bottom: 0 !important;
}

.login-v2-form .fb-field-container {
    padding: 0 !important;
    min-height: 0 !important;
}

.login-v2-form .fb-inline-field-container {
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    height: auto !important;
}

/* ---------- Campos ---------- */

.login-v2-form label.login-v2-label {
    display: block;
    margin: 0 0 7px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--login-ink-soft);
    line-height: 1.2;
}

.login-v2-form .form-control,
.login-v2-form .tfield {
    width: 100% !important;
    height: 50px !important;
    border: 1.5px solid var(--login-field-border) !important;
    border-radius: var(--login-radius) !important;
    padding: 0 16px !important;
    font-size: 15px;
    font-family: inherit;
    color: var(--login-ink);
    background: var(--login-field-bg) !important;
    box-shadow: none;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.login-v2-form .form-control:focus,
.login-v2-form .tfield:focus {
    border-color: var(--login-brand, #5148c8) !important;
    box-shadow: 0 0 0 4px var(--login-brand-ring, rgba(81, 72, 200, .12)) !important;
    background: #fff !important;
}

.login-v2-form .form-control::placeholder {
    color: var(--login-muted-2);
}

.login-v2-form .select2-container,
.login-v2-form .select2-selection {
    height: 50px !important;
    border-radius: var(--login-radius) !important;
}

/* olho de exibir/ocultar senha: vem pronto do TPassword (tpassword_start) */

.login-v2-form .tpassword {
    position: relative;
    display: block;
    width: 100%;
}

.login-v2-form .tpassword input {
    padding-right: 48px !important;
    border-radius: var(--login-radius) !important;
}

.login-v2-form .tpassword button {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 40px;
    height: 40px;
    min-width: 0;
    padding: 0;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #9a99b5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.login-v2-form .tpassword button:hover {
    color: var(--login-ink-soft);
    background: #f1f0f9 !important;
}

/* ---------- Botao ---------- */

.login-v2-form .card-footer,
.login-v2-form .panel-footer {
    margin-top: 28px !important;
}

.login-v2-form .btn.login-v2-btn,
.login-v2-form .btn-primary.login-v2-btn {
    width: 100%;
    height: 52px;
    margin: 0;
    border: none !important;
    border-radius: var(--login-radius) !important;
    background: linear-gradient(120deg, var(--login-brand-dark, #4a41c4), var(--login-brand-light, #6f52e0)) !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 20px var(--login-brand-shadow, rgba(81, 72, 200, .28)) !important;
    transition: transform .15s, box-shadow .15s;
}

.login-v2-form .btn.login-v2-btn:hover,
.login-v2-form .btn-primary.login-v2-btn:hover {
    opacity: 1 !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px var(--login-brand-shadow, rgba(81, 72, 200, .28)) !important;
}

.login-v2-form .btn.login-v2-btn:active {
    transform: translateY(0);
}

/* ---------- Rodape ---------- */

.login-v2-box .login-esqueci-senha {
    align-self: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--login-brand, #5148c8);
    text-decoration: none !important;
}

.login-v2-box .login-esqueci-senha:hover {
    text-decoration: underline !important;
}

.login-v2-copyright {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--login-muted-2);
}

/* ---------- Loading (blockUI) ----------
   O tema pinta o spinner com --preloader-color (= --main-color, azul escuro) e
   o texto com --text-color-strong. Sobre o painel escuro do login os dois somem,
   entao aqui o loader vira branco. */

.builder-template-login .blockUI.blockMsg {
    --preloader-color: #fff;
}

.builder-template-login .blockUI.blockMsg .loader-text {
    color: #fff;
    font-family: 'Instrument Sans', 'Sora', system-ui, sans-serif;
    font-size: 14px;
}

.builder-template-login .blockUI.blockOverlay {
    background: #0b0b18 !important;
    opacity: .55 !important;
}

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
    .login-v2__main {
        flex-direction: column;
    }

    .login-v2__brand {
        width: 100%;
        min-height: 340px;
        padding: 32px 28px;
        gap: 28px;
    }

    .login-v2__tags {
        display: none;
    }

    .login-v2__form {
        width: 100%;
        padding: 48px 24px 64px;
    }
}

/* -------------------------------------------------------------------------
   Compatibilidade: outras telas publicas usam esta mesma moldura
   (SystemRequestPasswordResetForm, SystemPasswordResetForm, FranquiaLoginForm,
   wizard novo-cliente). Elas mantem o #login-wrapper + .logo-menu antigos.
   ------------------------------------------------------------------------- */

.login-v2__form #login-wrapper:not(.login-v2-box) {
    margin: 0 auto !important;
    width: 100%;
    max-width: 420px;
}

.login-v2__form .card,
.login-v2__form .panel {
    border: none;
    box-shadow: none;
    background: none;
}

.login-v2__form .card-header,
.login-v2__form .panel-heading {
    background: none;
    border: none;
    padding-left: 0;
    padding-right: 0;
}