/*==============================================================================
  Tela de Login — visual refatorado (paleta V2)
  Arquivo dedicado da tela; nenhum estilo inline no ASPX.
==============================================================================*/

.vm-login-body {
    --vml-accent: #1ab394;
    --vml-accent-dark: #18a689;
    --vml-title: #22323f;
    --vml-text: #6c757d;
    --vml-muted: #95a5a6;
    --vml-border: #e3e8ee;
    --vml-input-bg: #f7f9fb;
    --vml-link: #3498db;
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #f2f4f6 0%, #edeff1 55%, #e9eef0 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--vml-title);
    overflow-x: hidden;
}

/* ---------- Logo VM+ (idêntico ao .logo-name original do INSPINIA) ---------- */
/* Valores copiados de css/style.css: .logo-name + .middle-box h1 (font-size 170px) */
.vm-login-body .logo-name {
    color: #e6e6e6;
    font-size: 170px;
    font-weight: 800;
    letter-spacing: -10px;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 20px 0 0;
    text-align: center;
    user-select: none;
    pointer-events: none;
}

/* ---------- Linhas onduladas verdes no rodapé ---------- */
/* Paths gerados via JS na trajetória marcada pelo usuário: plano à esquerda (~72vh),
   vale raso a ~36% da largura e subida contínua que passa por trás do card até sair
   pelo alto do lado direito (~30vh) — por isso o SVG cobre a viewport inteira.
   z-index 0 = ondas atrás de card/logo/conteúdo (wrap segue em z-index 2).
   O mask dissolve as extremidades laterais para as linhas não terminarem abruptas. */
.vm-login-waves {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 96%, transparent 100%);
}

/* ---------- Coluna central ---------- */
/* Alinhada ao topo como o login original (.middle-box tinha padding-top: 40px) */
.vm-login-wrap {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px 24px;
    box-sizing: border-box;
}

/* ---------- Card ---------- */
.vm-login-card {
    position: relative;
    margin-top: 26px; /* respiro entre o logo e o card; o badge sobrepõe o logo */
    width: 100%;
    max-width: 492px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(15, 35, 70, .10), 0 4px 12px rgba(15, 35, 70, .05);
    padding: 72px 56px 26px;
    text-align: center;
    box-sizing: border-box;
}

/* Badge circular VM+ com halo, sobrepondo o topo do card */
.vm-login-badge {
    position: absolute;
    top: -56px;
    left: 50%;
    transform: translateX(-50%);
    width: 112px;
    height: 112px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* halo em tom verde quase apagado (como na referência), dissolvendo para fora */
    box-shadow: 0 0 0 10px rgba(26, 179, 148, .10), 0 0 0 20px rgba(26, 179, 148, .05), 0 0 0 30px rgba(26, 179, 148, .02), 0 8px 24px rgba(15, 35, 70, .06);
}

.vm-login-badge span {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--vml-accent);
}

/* ---------- Textos ---------- */
.vm-login-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--vml-title);
}

.vm-login-title span { color: var(--vml-accent); }

.vm-login-sub {
    font-size: 14px;
    color: var(--vml-text);
    line-height: 1.5;
    margin: 0 auto 8px;
    max-width: 300px;
}

.vm-login-sub2 {
    font-size: 14px;
    color: var(--vml-text);
    margin: 0 0 22px;
}

/* ---------- Alerta de erro ---------- */
.vm-login-alert {
    text-align: left;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #b02a37;
    border-radius: 8px;
    padding: 10px 34px 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    position: relative;
}

.vm-login-alert .close {
    position: absolute;
    top: 8px;
    right: 10px;
}

/* ---------- Campos ---------- */
.vm-login-field {
    position: relative;
    margin-bottom: 14px;
}

.vm-login-field__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: #8a929d;
    pointer-events: none;
}

.vm-login-field__icon svg {
    width: 18px;
    height: 18px;
}

.vm-login-input {
    width: 100%;
    height: 46px;
    background: var(--vml-input-bg);
    border: 1px solid var(--vml-border);
    border-radius: 9px;
    padding: 0 44px;
    font-size: 14px;
    color: var(--vml-title);
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.vm-login-input:focus {
    border-color: var(--vml-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26, 179, 148, .12);
}

.vm-login-input::placeholder { color: #9aa4ae; }

/* Autofill do Chrome: mantém o fundo cinza-claro do design (sem azul) */
.vm-login-input:-webkit-autofill,
.vm-login-input:-webkit-autofill:hover,
.vm-login-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--vml-input-bg) inset;
    box-shadow: 0 0 0 1000px var(--vml-input-bg) inset;
    -webkit-text-fill-color: var(--vml-title);
    caret-color: var(--vml-title);
    transition: background-color 99999s ease-in-out 0s;
}

/* Botão olho (mostrar/ocultar senha) */
.vm-login-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: #8a929d;
}

.vm-login-eye:hover { color: var(--vml-accent); }

.vm-login-eye svg {
    width: 19px;
    height: 19px;
}

.vm-login-eye .vm-eye-off { display: none; }
.vm-login-eye.is-visible .vm-eye-on { display: none; }
.vm-login-eye.is-visible .vm-eye-off { display: block; }

/* ---------- Lembre-se de mim ---------- */
.vm-login-remember {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 16px 0 18px;
    font-size: 14px;
    font-weight: 400;
    color: var(--vml-title);
    cursor: pointer;
    user-select: none;
}

.vm-login-remember input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 19px;
    height: 19px;
    margin: 0;
    border: 1px solid #cdd5dd;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all .12s ease;
}

.vm-login-remember input[type="checkbox"]:checked {
    background: var(--vml-accent);
    border-color: var(--vml-accent);
}

.vm-login-remember input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---------- Botão Login ---------- */
.vm-login-btn {
    width: 100%;
    height: 46px;
    background: var(--vml-accent);
    color: #fff;
    border: 0;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}

.vm-login-btn:hover {
    background: var(--vml-accent-dark);
    box-shadow: 0 6px 16px rgba(26, 179, 148, .25);
}

/* ---------- Esqueceu a senha / copyright ---------- */
.vm-login-forgot {
    display: inline-block;
    margin-top: 14px;
    font-size: 14px;
    color: var(--vml-link);
    text-decoration: none;
}

.vm-login-forgot:hover {
    color: #217dbb;
    text-decoration: underline;
}

.vm-login-copy {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--vml-muted);
}

/* Telas mais baixas: comprime o card para reduzir rolagem */
@media (max-height: 760px) {
    .vm-login-card { padding: 64px 56px 22px; }
    .vm-login-sub2 { margin-bottom: 18px; }
    .vm-login-remember { margin: 14px 0 16px; }
    .vm-login-copy { margin-top: 18px; }
}

/* ---------- Animações do card (equivalentes do animate.css, definidas localmente
   porque o animate.css foi removido do head desta tela) ---------- */
.animated {
    animation-duration: .6s;
    animation-fill-mode: both;
}

.zoomIn { animation-name: vmZoomIn; }

@keyframes vmZoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    50% { opacity: 1; }
}

/* ---------- Overlay de carregamento (UpdateProgress) ---------- */
.vm-login-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2099;
    background: rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sem box branco: o cubo e o texto ficam direto sobre o fundo translúcido */
.vm-login-progress__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.vm-login-progress__text {
    font-size: 14px;
    font-weight: 600;
    color: var(--vml-title);
    letter-spacing: .2px;
}

/* Cube Grid (SpinKit) na cor do sistema — grade 3x3 pulsando em onda diagonal */
.vm-cube-grid {
    width: 40px;
    height: 40px;
}

.vm-cg-cube {
    float: left;
    width: 33.33%;
    height: 33.33%;
    background: var(--vml-accent);
    animation: vmCubeGridScale 1.3s infinite ease-in-out;
}

/* Delays por posição na grade (onda do canto inferior esquerdo ao superior direito) */
.vm-cg-1 { animation-delay: .2s; }
.vm-cg-2 { animation-delay: .3s; }
.vm-cg-3 { animation-delay: .4s; }
.vm-cg-4 { animation-delay: .1s; }
.vm-cg-5 { animation-delay: .2s; }
.vm-cg-6 { animation-delay: .3s; }
.vm-cg-7 { animation-delay: 0s; }
.vm-cg-8 { animation-delay: .1s; }
.vm-cg-9 { animation-delay: .2s; }

@keyframes vmCubeGridScale {
    0%, 70%, 100% { transform: scale3D(1, 1, 1); }
    35% { transform: scale3D(0, 0, 1); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 560px) {
    .vm-login-card { padding: 70px 24px 26px; }
    .vm-login-body .logo-name { font-size: 96px; letter-spacing: -6px; }
}