/* ==========================================================================
   SYSWAY — tela de login (SPEC-053)
   --------------------------------------------------------------------------
   Carregado SÓ por Views/Home/Login.cshtml, pela seção "Styles" do
   _LayoutLogIn.cshtml. Nada aqui vale para o resto do sistema: todo seletor
   está sob `.lg-cena` ou sob `body.lg-body`.

   Origem dos valores: handoff de design da SPEC-053 (insumo externo, não versionado).

   POR QUE OS TOKENS ESTÃO AQUI, E NÃO NO site.css (SPEC-053 §4, D-01)
   O site.css já define a maior parte do que esta tela usa — e esses são usados
   daqui, não redeclarados. Faltam cinco: a primária do tema (#f04e23, de que o
   --sw-focus-ring já é derivado), o texto forte dos títulos, o muted dos
   rótulos técnicos e duas bordas suaves. Promover os cinco ao :root global por
   causa de uma tela seria mexer no sistema de design disfarçado de detalhe de
   implementação: aquele :root documenta a razão de contraste medida em cada
   linha, e é um contrato que esta SPEC não tem por que reabrir. Ficam
   escopados na cena; o dia em que uma segunda tela precisar deles é o dia de
   promovê-los, com a medição junto.
   ========================================================================== */

.lg-cena {
    /* --- tokens locais (ver o comentário acima) --- */
    --lg-primary: #f04e23; /* primária do tema — foco dos campos e a rede do fundo */
    --lg-text-strong: #3a3b45; /* 9.13:1 — títulos */
    /* O handoff pede #858796 aqui e #b7b9cc no placeholder e na versão, apresentando os dois
       como tokens do projeto. Nenhum dos dois existe no site.css, e os dois reprovam a régua
       que aquele arquivo documenta em cada linha ("contraste verificado pelo critério WCAG 2.1
       AA"): #858796 mede 3.38:1 sobre a cena e #b7b9cc mede 1.94:1 sobre o card — este último
       é o token de BORDA (--sw-border-strong), que o handoff usou como cor de texto. Em texto
       de 10 a 11px isso é ilegível para quem enxerga pouco, e a convenção do projeto prevalece
       sobre a do protótipo. O valor abaixo é o mesmo tom, escurecido até passar nos dois
       fundos claros da tela. */
    --lg-text-muted: #70727f; /* 4.76:1 no card, 4.53:1 na cena — rótulos técnicos, versão e nota legal */
    --lg-border-soft: #e3e6f0; /* divisórias do card */
    --lg-border-soft-2: #eaecf4; /* fundo do botão mostrar/ocultar */
    --lg-border-divisor: #dddfeb; /* borda do botão mostrar/ocultar */
    --lg-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    position: relative;
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--sw-surface-sunken);
    font-family: var(--lg-font);
    color: var(--sw-text);
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Neutralização do layout

   O _LayoutLogIn.cshtml desenha um <body> de tela cheia com foto de fundo,
   display:table e texto branco — que é o que as telas de AtualizacaoCadastral
   ainda usam. A cena tem o próprio fundo e o próprio texto; sem isto, o
   `color: white` do layout deixaria invisível todo texto que não tenha cor
   declarada, e o padding de 100px empurraria a cena para fora da viewport.

   A regra vence o <style> do layout por especificidade (0-1-1 contra 0-0-1),
   e não por ordem de carregamento — assim continua valendo se um dia o CSS
   passar a ser concatenado ou minificado em outra ordem.
   -------------------------------------------------------------------------- */
body.lg-body {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    color: var(--sw-text);
    background: var(--sw-surface-sunken);
}

/* ==========================================================================
   Cena
   ========================================================================== */

/* O canvas é decoração: aria-hidden no markup, e nunca recebe ponteiro. */
#lg-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* Véu sobre o fundo animado. É ele que garante o contraste do texto por cima
   da animação — sem véu, um nó da rede passando atrás da headline derruba a
   leitura por um segundo e volta. */
.lg-veu {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, rgba(248, 249, 252, .86) 0%, rgba(248, 249, 252, .5) 42%, rgba(248, 249, 252, .9) 100%);
}

.lg-grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Empilhado, sem isto cada linha estica para dividir a altura da tela: a marca
       fica no meio da metade de cima, o card no meio da de baixo, e sobra um vão entre
       os dois. Com center, as linhas ficam juntas (só o gap) e o bloco é que centra. */
    align-content: center;
    justify-content: center;
    gap: 96px;
    min-height: 100dvh;
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 28px;
}

/* ==========================================================================
   Coluna de marca
   ========================================================================== */

/* A coluna tem a largura do logo, não a da grade: esticada até 540px, com o logo
   encostado à esquerda, sobrava um vão vazio de ~290px antes do card, somado ao gap.
   Assim a distância entre marca e card é só o gap, e o par inteiro fica centrado pelo
   justify-content da .lg-grid. */
.lg-marca {
    flex: 0 0 auto;
}

/* "SYSWAY" embaixo do logo, centrado nele. O width:fit-content faz o bloco ter a
   largura do logo — sem ele, o centro seria o da coluna inteira e o logo sairia do
   alinhamento à esquerda da marca. */
.lg-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

/* O PNG do logo tem fundo BRANCO, não transparente. Sobre o cinza da cena o
   retângulo apareceria; o multiply o dissolve. Trocar por um SVG transparente
   é melhoria registrada na SPEC-053 (D-05) — e quando ela vier, este
   mix-blend-mode sai junto, senão o logo escurece sobre qualquer fundo. */
.lg-logo-img {
    display: block;
    height: 168px;
    width: auto;
    mix-blend-mode: multiply;
}

.lg-logo-nome {
    font-size: 38px;
    font-weight: 600;
    letter-spacing: .16em;
    /* O letter-spacing também entra DEPOIS da última letra; centrado, o texto sairia
       deslocado para a esquerda. A margem negativa devolve esse espaço. */
    margin-right: -.16em;
    text-transform: uppercase;
    color: var(--sw-text);
}

/* ==========================================================================
   Card
   ========================================================================== */

.lg-card-wrap {
    flex: 0 1 424px;
    width: 100%;
    min-width: 300px;
    max-width: 424px;
}

.lg-card {
    background: var(--sw-surface);
    border: 1px solid var(--lg-border-soft);
    border-radius: 6px;
    padding: 32px 30px 26px;
    box-shadow: 0 1px 2px rgba(16, 29, 48, .04), 0 18px 40px -22px rgba(16, 29, 48, .22);
}

.lg-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--lg-border-soft);
}

.lg-tag {
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lg-text-muted);
}

/* O selo diz em qual ambiente a aplicação está rodando. A cor vem do modificador
   (--ok em produção, --aviso nos demais) — ver Login.cshtml. */
.lg-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--sw-warning-text);
}

    .lg-status i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.lg-status--ok {
    color: var(--sw-success-text);
}

.lg-card h1 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--lg-text-strong);
}

.lg-card-nota {
    margin: 0 0 26px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sw-text-secondary);
}

/* ==========================================================================
   Campos
   ========================================================================== */

.lg-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sw-text);
}

.lg-linha-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 7px;
}

    .lg-linha-label .lg-label {
        margin: 0;
    }

/* O "esqueci minha senha" é um <button> (abre modal, não navega) desenhado como
   link: o botão nativo herdaria a moldura do agente do usuário. */
.lg-link-min {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 11.5px;
    /* Texto na cor da marca usa --sw-brand-deep (7,14:1), e não --sw-brand
       (3,61:1): com 11,5px o critério é 1.4.3 AA, mínimo 4,5:1. O hover se
       distingue pelo sublinhado, que não depende de percepção de cor. */
    color: var(--sw-brand-deep);
    cursor: pointer;
}

    .lg-link-min:hover {
        color: var(--sw-brand-deep);
        text-decoration: underline;
    }

.lg-input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    font-family: var(--lg-font);
    font-size: 13.5px;
    color: var(--sw-text);
    background: var(--sw-surface-sunken);
    border: 1px solid var(--sw-border);
    border-radius: 4px;
    outline: none;
    transition: border-color .14s, box-shadow .14s, background .14s;
}

    /* O placeholder é a dica, não o rótulo — quem nomeia o campo é o <label>. Ainda assim é
       texto, e texto passa na mesma régua: 4.53:1 sobre o fundo do campo. */
    .lg-input::placeholder {
        color: var(--lg-text-muted);
    }

    .lg-input:focus {
        border-color: var(--lg-primary);
        box-shadow: 0 0 0 3px var(--sw-focus-ring);
        background: var(--sw-surface);
    }

    /* Autofill. Esta é a tela em que o gerenciador de senhas do navegador age em quase todo
       acesso, e o Chromium pinta o campo autopreenchido de azul-claro por cima do
       `background` — o campo fica destoando dos vizinhos sem que nada no código o explique.
       O fundo do autofill não é `background`, é uma camada própria: a única forma de cobri-la
       é uma sombra interna sólida. O `-webkit-text-fill-color` vai junto porque o `color`
       também é ignorado nesse estado. */
    .lg-input:-webkit-autofill,
    .lg-input:-webkit-autofill:hover {
        -webkit-text-fill-color: var(--sw-text);
        box-shadow: 0 0 0 1000px var(--sw-surface-sunken) inset;
    }

    /* Com foco, a sombra interna do autofill e o anel de foco convivem — o anel primeiro. */
    .lg-input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--sw-text);
        box-shadow: 0 0 0 3px var(--sw-focus-ring), 0 0 0 1000px var(--sw-surface) inset;
    }

.lg-senha {
    position: relative;
}

    /* Espaço reservado para o botão MOSTRAR/OCULTAR, que fica por cima do campo. */
    .lg-senha .lg-input {
        padding-right: 84px;
    }

.lg-olho {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 34px;
    padding: 0 11px;
    font-family: var(--lg-font);
    font-size: 10.5px;
    letter-spacing: .08em;
    /* O cinza de apoio do sistema mede 3.98:1 sobre este fundo cinza-claro, e o rótulo tem
       10.5px. Sobre o botão vale o texto principal, que dá 5.62:1. */
    color: var(--sw-text);
    background: var(--lg-border-soft-2);
    border: 1px solid var(--lg-border-divisor);
    border-radius: 3px;
    cursor: pointer;
}

    .lg-olho:hover {
        color: var(--sw-brand-deep);
    }

/* O aviso de Caps Lock está SEMPRE no DOM (é uma região viva, role="status") e é o texto
   que entra e sai. Vazio, não pode ocupar espaço nenhum — daí o :empty. */
.lg-aviso {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--sw-warning-text);
}

    .lg-aviso:empty {
        margin-top: 0;
    }

.lg-espaco {
    height: 22px;
}

/* --------------------------------------------------------------------------
   Mensagens do Parsley

   Quem valida é o Parsley, como em todo o sistema — o que muda aqui é só a
   APARÊNCIA da lista, para caber na escala tipográfica do card (o global usa
   0.875rem/600, que ao lado de um label de 11px lê como destaque, não como
   mensagem). A cor e a borda vermelha do campo continuam vindo do site.css.

   O container de cada campo está declarado no markup
   (data-parsley-errors-container): sem ele o Parsley insere a lista logo após
   o <input>, o que no campo de senha significa DENTRO do .lg-senha
   posicionado, empurrando o botão MOSTRAR para fora do lugar.
   -------------------------------------------------------------------------- */
.lg-cena .parsley-errors-list {
    margin: 0;
    font-size: 11.5px;
    font-weight: 400;
}

    .lg-cena .parsley-errors-list li {
        margin-top: 7px;
    }

/* ==========================================================================
   Botão
   ========================================================================== */

.lg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    font-family: var(--lg-font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sw-text-on-brand);
    background: var(--sw-brand);
    border: 1px solid #c03e1c;
    border-radius: 4px;
    cursor: pointer;
    transition: background .14s, transform .1s;
}

    .lg-btn:hover {
        background: var(--sw-brand-deep);
    }

    .lg-btn:active {
        transform: translateY(1px);
    }

    .lg-btn[disabled] {
        opacity: .75;
        cursor: default;
    }

.lg-spin {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lg-spin .7s linear infinite;
}

@keyframes lg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.lg-card-rodape {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--lg-border-soft);
    font-size: 11.5px;
    color: var(--lg-text-muted);
}

.lg-legal {
    margin: 16px 4px 0;
    font-size: 11px;
    line-height: 1.55;
    color: var(--lg-text-muted);
    text-align: center;
}

/* ==========================================================================
   Responsivo — abaixo de 900px as colunas empilham (a marca vai para cima)
   ========================================================================== */

@media (max-width: 900px) {
    .lg-grid {
        gap: 40px;
        padding: 40px 22px;
    }

    /* A marca ocupa a linha inteira para forçar o empilhamento (o logo pequeno caberia
       ao lado do card); o logo, dentro dela, fica centrado sobre o card. */
    .lg-marca {
        flex-basis: 100%;
    }

    .lg-logo {
        margin-inline: auto;
    }

    .lg-logo-img {
        height: 110px;
    }

    /* Na mesma proporção do logo, que encolhe de 168 para 110px. */
    .lg-logo-nome {
        font-size: 26px;
    }
}

/* Segundo ponto de quebra, que o handoff não previu: abaixo de ~380px o card, preso
   ao min-width de 300px, come o respiro lateral da cena. Medido em 320px — a largura
   do iPhone SE, que ainda aparece na base. Logo e "SYSWAY" encolhem juntos, na mesma
   proporção. */
@media (max-width: 380px) {
    .lg-grid {
        padding: 32px 16px;
    }

    .lg-card-wrap {
        min-width: 0;
    }

    .lg-logo-img {
        height: 88px;
    }

    .lg-logo-nome {
        font-size: 22px;
        letter-spacing: .12em;
        margin-right: -.12em;
    }
}

/* Quem pediu ao sistema operacional para reduzir movimento não recebe nem o
   fundo animado (login-bg.js desenha um frame e para) nem o spinner girando. */
@media (prefers-reduced-motion: reduce) {
    .lg-spin {
        animation: none;
    }
}