/* ==========================================================================
   tema.css - Design system do APCBS (login + header + menu lateral)
   --------------------------------------------------------------------------
   Escrito a mao, sem build step e sem CDN: o sistema roda em rede interna
   (ACESSO_LOCAL=1) e nenhum asset externo carrega em producao.

   IMPORTANTE: todas as classes usam o prefixo .nx- de proposito.
   O bracket.css (1MB) ja ocupa os nomes utilitarios globais (tx-*, mg-*,
   pd-*, br-*) e e usado por ~182 paginas. Prefixar evita colisao.

   Tema: os tokens vivem em [data-tema="claro"] / [data-tema="escuro"] no
   elemento <html>. Trocar o atributo troca o tema inteiro, sem recarregar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Azul marinho institucional - base do menu lateral */
    --nx-marinho-900: #0a1c3d;
    --nx-marinho-800: #0f2755;
    --nx-marinho-700: #14336d;
    --nx-marinho-600: #1a4086;
    --nx-marinho-500: #2154a8;

    --nx-azul-500: #2563eb;
    --nx-azul-400: #3b82f6;
    --nx-azul-300: #60a5fa;

    --nx-raio: 10px;
    --nx-raio-lg: 16px;

    --nx-transicao: 180ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Fonte: usa a stack do sistema operacional - zero download, render imediato */
    --nx-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}

/* Tema claro (padrao) */
:root,
[data-tema="claro"] {
    --nx-bg: #f4f6fb;
    --nx-superficie: #ffffff;
    --nx-superficie-2: #f8fafc;
    --nx-borda: #e2e8f0;
    --nx-borda-forte: #cbd5e1;
    --nx-texto: #0f172a;
    --nx-texto-2: #475569;
    --nx-texto-3: #94a3b8;
    /* Cores de icone e de acao, por tema.
       Existem separadas de --nx-texto-3 e --nx-azul-500 porque estes reprovam
       o minimo WCAG AA no tema em que sao usados como icone (3:1) ou link
       (4.5:1). Nao mexa em --nx-texto-3 nem em --nx-azul-500: sao usados por
       dezenas de telas fora deste escopo.
       Contraste medido sobre --nx-superficie-2, o fundo do hover. */
    --nx-ico: #64748b;        /* 4.55:1 */
    --nx-ico-azul: #2563eb;   /* 4.94:1 */
    --nx-ico-perigo: #dc2626; /* 4.62:1 */
    --nx-ico-ok: #15803d;     /* 4.79:1 */

    /* Brilho do skeleton. Precisa de token proprio: usar --nx-superficie-2
       como realce funciona no claro, mas no escuro ele e MAIS ESCURO que
       --nx-borda e o shimmer inverte, virando uma barra estatica. */
    --nx-skeleton-brilho: rgba(255, 255, 255, .65);

    --nx-sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --nx-sombra-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --nx-campo-bg: #ffffff;
    --nx-foco-anel: rgba(37, 99, 235, .18);
}

/* Tema escuro - azul-acinzentado, tons frios e proximos entre si */
[data-tema="escuro"] {
    --nx-bg: #1a2234;
    --nx-superficie: #1e2739;
    --nx-superficie-2: #243047;
    --nx-borda: #2c3850;
    --nx-borda-forte: #3a4863;
    --nx-texto: #e7ecf5;
    --nx-texto-2: #9fadc4;
    --nx-texto-3: #6d7c96;
    /* No escuro os tons saturados do tema claro reprovam sobre o fundo
       escuro; aqui entram as versoes claras da mesma familia.
       Contraste medido sobre --nx-superficie-2 (#243047). */
    --nx-ico: #8b9ab3;        /* 4.64:1 */
    --nx-ico-azul: #60a5fa;   /* 5.20:1 */
    --nx-ico-perigo: #f87171; /* 4.78:1 */
    --nx-ico-ok: #4ade80;     /* 7.59:1 */
    --nx-skeleton-brilho: rgba(255, 255, 255, .06);
    --nx-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .32);
    --nx-sombra-sm: 0 1px 2px rgba(0, 0, 0, .22);
    --nx-campo-bg: #172032;
    --nx-foco-anel: rgba(96, 165, 250, .22);
}

/* --------------------------------------------------------------------------
   2. LOGIN
   -------------------------------------------------------------------------- */
.nx-login {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--nx-bg);
    color: var(--nx-texto);
    font-family: var(--nx-fonte);
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
    .nx-login { grid-template-columns: minmax(420px, 46%) 1fr; }
}

/* -- coluna do formulario -- */
.nx-login__painel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--nx-superficie);
}

.nx-login__caixa {
    width: 100%;
    max-width: 380px;
}

.nx-login__logo {
    display: block;
    max-width: 190px;
    height: auto;
    margin: 0 auto 28px;
}

/*
 * A logo vem em duas cores: marinho (a mesma cor do menu lateral) para o tema
 * claro, branca para o escuro. A branca sozinha sumia contra o fundo claro do
 * login.
 *
 * O padrao e mostrar a clara e esconder a escura, porque o tema claro tambem
 * e o estado sem [data-tema] definido no <html>.
 */
.nx-login__logo--escuro { display: none; }

:root[data-tema="escuro"] .nx-login__logo--claro  { display: none; }
:root[data-tema="escuro"] .nx-login__logo--escuro { display: block; }

.nx-login__titulo {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
    text-align: center;
    margin: 0 0 6px;
    color: var(--nx-texto);
}

.nx-login__sub {
    font-size: 14px;
    text-align: center;
    color: var(--nx-texto-2);
    margin: 0 0 28px;
}

/* -- coluna da imagem -- */
.nx-login__arte {
    position: relative;
    display: none;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .nx-login__arte { display: block; }
}

.nx-login__arte img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nx-login__arte::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
                rgba(10, 28, 61, .88) 0%,
                rgba(15, 39, 85, .78) 50%,
                rgba(26, 64, 134, .72) 100%);
}

/* --------------------------------------------------------------------------
   3. FORMULARIO
   -------------------------------------------------------------------------- */

/*
 * box-sizing nos controles do tema.
 *
 * Sem isto, o `width: 100%` do .nx-input soma o padding e a borda POR FORA da
 * largura do pai: o campo de login (padding 44+14 + 2px de borda) media 440px
 * dentro de uma caixa de 380px, e o de senha, que ganha `padding-right: 50px`
 * para abrir espaco ao olho, media 476px. Os dois vazavam a caixa e cada um
 * por uma sobra diferente -- dai a impressao de campos desalinhados entre si e
 * em relacao ao botao. O .nx-btn parecia certo so por acidente: nao tem
 * padding lateral, entao 100% ja batia com os 380px.
 *
 * O reset e escopado nas classes do tema em vez de um `*` global de proposito:
 * esta folha e carregada junto do bracket.css (1MB, ~182 paginas), que foi
 * escrito no modelo de caixa padrao. Um reset global mudaria a largura
 * calculada de tudo que ja existe nas telas internas.
 */
.nx-input,
.nx-btn,
.nx-olho,
.nx-campo,
.nx-campo__wrap,
.nx-login__caixa {
    box-sizing: border-box;
}

/*
 * .nx-controle -- largura unica dos controles do formulario.
 *
 * Aplicada no input de login, no de senha e no botao Entrar para que os tres
 * ocupem exatamente a mesma coluna. O `display: block` importa: o input e
 * inline-block por padrao e herda o alinhamento de linha do pai, o que deixava
 * a borda direita parando em pontos diferentes conforme o padding de cada um
 * (o campo de senha reserva 50px a direita para o botao do olho, o de login
 * so 14px).
 *
 * As tres declaracoes juntas tornam a largura independente do padding: mesmo
 * que alguma folha carregada depois reponha o box-sizing padrao, o max-width
 * segura a caixa dentro do container.
 */
.nx-controle {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
}

.nx-campo { margin-bottom: 14px; }

.nx-campo__wrap { position: relative; display: block; }

.nx-campo__ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nx-texto-3);
    font-size: 15px;
    pointer-events: none;
    transition: color var(--nx-transicao);
}

.nx-input {
    width: 100%;
    height: 50px;
    /*
     * Padding assimetrico: a esquerda reserva os 44px do icone, a direita fica
     * no respiro normal de 14px. Antes eram 44px dos dois lados, o que abria um
     * vazio a direita em todo campo que nao tem botao de olho (login, e-mail) e
     * deixava o texto sem centro visual. Quem precisa da folga a direita e so o
     * campo de senha, via .nx-campo__wrap--olho abaixo.
     */
    padding: 0 14px 0 44px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nx-texto);
    background: var(--nx-campo-bg);
    border: 1px solid var(--nx-borda);
    border-radius: var(--nx-raio);
    outline: none;
    transition: border-color var(--nx-transicao), box-shadow var(--nx-transicao);
    -webkit-appearance: none;
}

.nx-input::placeholder { color: var(--nx-texto-3); }

.nx-input:hover { border-color: var(--nx-borda-forte); }

.nx-input:focus {
    border-color: var(--nx-azul-500);
    box-shadow: 0 0 0 4px var(--nx-foco-anel);
}

.nx-campo__wrap:focus-within .nx-campo__ico { color: var(--nx-azul-500); }

/*
 * Campo com botao de revelar senha: o input precisa parar antes do botao,
 * senao o texto digitado passa por baixo do olho.
 */
.nx-campo__wrap--olho .nx-input { padding-right: 50px; }

/* botao de revelar senha */
.nx-olho {
    position: absolute;
    /*
     * inset em vez de top:50% + translateY: o transform arredonda meio pixel em
     * alguns zooms e o icone ficava um fio acima do centro. Ancorando nas duas
     * bordas com a mesma folga, o centro sai exato em qualquer altura de campo.
     */
    right: 6px;
    top: 6px;
    bottom: 6px;
    width: 38px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--nx-texto-3);
    border-radius: 8px;
    cursor: pointer;
    transition: color var(--nx-transicao), background var(--nx-transicao);
}

.nx-olho:hover {
    color: var(--nx-texto-2);
    background: var(--nx-superficie-2);
}

.nx-olho:focus-visible {
    outline: 2px solid var(--nx-azul-500);
    outline-offset: 1px;
}

.nx-link {
    display: inline-block;
    font-size: 13px;
    color: var(--nx-azul-500);
    text-decoration: none;
    transition: color var(--nx-transicao);
}

.nx-link:hover { color: var(--nx-azul-400); text-decoration: underline; }

/*
 * A linha abaixo do campo de senha carrega dois itens: o "Lembrar-me" a
 * esquerda e o "Esqueceu a senha?" a direita. Era text-align:right quando
 * havia so o link; virou flex para acomodar os dois.
 *
 * wrap + gap: em tela estreita os dois quebram em linhas separadas em vez de
 * espremer o texto do checkbox.
 */
.nx-esqueceu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 10px;
}

/* "Lembrar-me": o label envolve caixa e texto, entao clicar na palavra marca. */
.nx-lembrar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    /* texto-2, nao texto-3: o cinza claro reprova no contraste sobre branco. */
    color: var(--nx-texto-2);
    cursor: pointer;
    user-select: none;
}

.nx-lembrar__check {
    width: 16px;
    height: 16px;
    margin: 0;
    /* accent-color pinta o check nativo com a cor do sistema, sem precisar
       esconder o input e redesenhar a caixa - o que costuma custar o
       comportamento de teclado e de leitor de tela. */
    accent-color: var(--nx-azul-500);
    cursor: pointer;
    flex: none;
}

.nx-lembrar__check:focus-visible {
    outline: 2px solid var(--nx-azul-500);
    outline-offset: 2px;
}

.nx-lembrar:hover { color: var(--nx-texto); }

/* --------------------------------------------------------------------------
   4. BOTAO
   -------------------------------------------------------------------------- */
.nx-btn {
    width: 100%;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, var(--nx-marinho-600), var(--nx-azul-500));
    border: 0;
    border-radius: var(--nx-raio);
    cursor: pointer;
    transition: transform var(--nx-transicao), box-shadow var(--nx-transicao), filter var(--nx-transicao);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .28);
}

.nx-btn:hover:not(:disabled) {
    filter: brightness(1.07);
    box-shadow: 0 6px 20px rgba(37, 99, 235, .36);
}

.nx-btn:active:not(:disabled) { transform: translateY(1px); }

.nx-btn:disabled { opacity: .65; cursor: not-allowed; }

.nx-btn:focus-visible {
    outline: 2px solid var(--nx-azul-300);
    outline-offset: 2px;
}

.nx-btn__seta { transition: transform var(--nx-transicao); }
.nx-btn:hover:not(:disabled) .nx-btn__seta { transform: translateX(3px); }

/* divisor "ou" */
.nx-divisor {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    color: var(--nx-texto-3);
    font-size: 13px;
}

.nx-divisor::before,
.nx-divisor::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--nx-borda);
}

.nx-rodape {
    text-align: center;
    font-size: 13px;
    color: var(--nx-texto-2);
}

/* Versao do sistema, logo abaixo do "Desenvolvido por".
   Herda a cor do .nx-rodape (--nx-texto-2). Nao usa --nx-texto-3: aquele
   token reprova no contraste minimo AA sobre o fundo claro. */
.nx-rodape__versao {
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   5. ALERTA
   -------------------------------------------------------------------------- */
.nx-alerta {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: calc(100% - 32px);
    max-width: 440px;
    padding: 14px 16px;
    border-radius: var(--nx-raio);
    background: var(--nx-superficie);
    border: 1px solid var(--nx-borda);
    border-left: 3px solid var(--nx-azul-500);
    box-shadow: var(--nx-sombra);
    color: var(--nx-texto);
    font-size: 14px;
}

.nx-alerta--erro   { border-left-color: #dc2626; }
.nx-alerta--ok     { border-left-color: #16a34a; }
.nx-alerta__ico    { flex: none; margin-top: 1px; }
.nx-alerta--erro .nx-alerta__ico { color: #dc2626; }
.nx-alerta--ok   .nx-alerta__ico { color: #16a34a; }
.nx-alerta__corpo { flex: 1; min-width: 0; }
.nx-alerta__titulo{ font-weight: 600; margin: 0 0 2px; }
.nx-alerta__texto { margin: 0; color: var(--nx-texto-2); font-size: 13px; }

.nx-alerta__fechar {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--nx-texto-3);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.nx-alerta__fechar:hover { color: var(--nx-texto); }

/* --------------------------------------------------------------------------
   6. SELETOR DE TEMA
   -------------------------------------------------------------------------- */
/* Seletor segmentado: as duas opcoes ficam visiveis, a ativa e destacada.
   Um grupo de radio, nao dois botoes soltos - e uma escolha entre opcoes
   mutuamente exclusivas, entao o leitor de tela deve anuncia-la como tal. */
.nx-tema {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--nx-borda);
    background: var(--nx-superficie-2);
    border-radius: 999px;
}

.nx-tema__op {
    position: relative;
    width: 32px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--nx-texto-3);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: color var(--nx-transicao), background var(--nx-transicao);
}

.nx-tema__op:hover { color: var(--nx-texto-2); }

/* opcao ativa */
.nx-tema__op[aria-checked="true"] {
    background: var(--nx-azul-500);
    color: #fff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, .35);
}

[data-tema="escuro"] .nx-tema__op[aria-checked="true"] {
    background: var(--nx-azul-500);
    color: #fff;
}

.nx-tema__op:focus-visible {
    outline: 2px solid var(--nx-azul-500);
    outline-offset: 2px;
}

/* posicionamento no canto da tela de login */
.nx-tema-login {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 30;
}

/* --------------------------------------------------------------------------
   7. ANIMACAO DE ENTRADA
   -------------------------------------------------------------------------- */
@keyframes nx-sobe {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes nx-aparece {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.nx-anima {
    opacity: 0;
    animation: nx-sobe .55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* escalonamento sutil dos elementos do formulario */
.nx-atraso-1 { animation-delay: .05s; }
.nx-atraso-2 { animation-delay: .12s; }
.nx-atraso-3 { animation-delay: .19s; }
.nx-atraso-4 { animation-delay: .26s; }
.nx-atraso-5 { animation-delay: .33s; }
.nx-atraso-6 { animation-delay: .40s; }

.nx-anima-arte {
    opacity: 0;
    animation: nx-aparece .9s ease forwards;
}

/*
 * Entrada da coluna do formulario: desliza da esquerda ate a posicao final.
 *
 * O painel inteiro se move, e os filhos (.nx-anima) so aparecem por opacidade
 * -- ver .nx-login__painel .nx-anima abaixo. Se os dois transladassem ao mesmo
 * tempo o movimento somava e ficava agitado, justamente o oposto de sutil.
 *
 * A curva (0.22, 1, 0.36, 1) desacelera no fim: o painel chega e assenta, sem
 * quicar. O translate e pequeno (-40px) de proposito -- entrada longa demais
 * atrasa a leitura de quem so quer logar.
 *
 * will-change avisa o navegador para promover a camada antes de comecar, o que
 * evita o tranco no primeiro quadro em maquina fraca.
 */
@keyframes nx-desliza-esq {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: none; }
}

.nx-anima-painel {
    opacity: 0;
    will-change: transform, opacity;
    animation: nx-desliza-esq .7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/*
 * Dentro do painel que ja desliza, os elementos internos trocam o nx-sobe por
 * um fade puro -- o deslocamento vertical deles brigaria com o horizontal do
 * pai. Os atrasos (.nx-atraso-*) continuam valendo e mantem o escalonamento.
 */
.nx-anima-painel .nx-anima {
    animation-name: nx-aparece;
    animation-duration: .5s;
}

/* Respeita quem pediu menos movimento no sistema operacional */
@media (prefers-reduced-motion: reduce) {
    .nx-anima,
    .nx-anima-arte,
    .nx-anima-painel {
        animation: none;
        opacity: 1;
        transform: none;
    }
    * { transition-duration: .01ms !important; }
}