/* A TELA DE ENTRADA DO SIGO — «NOTURNO INTEGRADO» (a terceira proposta, que virou a ENTRADA OFICIAL em 05/11/2026; Alan, 07:53: «guarda nossa tela de login atual em algum lugar... pra se caso precisarmos voltar pra ela.... mas aplica essa nova tela
   agora... como oficial»; a entrada antiga está guardada inteira em C:\ProjetosPython\sigo-dev\guardados\login-oficial-antes-da-troca-2026-11-05). Este arquivo é a FONTE ÚNICA do desenho: o sistema o carrega no index.html e o desenha em
   public/acesso.mjs (desenharLogin); a página de teste /login-alternativo-v3 (só com MAPA_LOGIN_ALTERNATIVO=true) carrega o MESMO arquivo e as mesmas fotos (public/img/login).
   TODO seletor daqui começa em «.lt» (ou «html:not(.dark) .lt…», as sobreposições do tema claro — a classe «dark» é a do sistema —, ou «html.lt-troca …», a troca de tema da página de teste): nada deste arquivo alcança outra tela do
   SIGO, e as variáveis moram no próprio .lt — nenhuma no :root, nenhum token ou componente compartilhado é tocado.

   COMPOSIÇÃO (Alan, 04/11/2026, à noite, com um roteiro e uma imagem de referência: «esse degrade.. ficou mto marcado… poderia ser menos marcado.. mais suave… tem que ser uma transição mais suave… talvez mesmo se pegar por cima do onibus um pouco… tanto no tema claro, quanto no
   tema escuro»): a fotografia ocupa o fundo INTEIRA e CONTÍNUA — o céu vai de uma borda à outra, sem a faixa diagonal (saiu) nem divisão entre a foto e o fundo — e embaixo o asfalto e os reflexos somem num degradê amplo e suave na cor do fundo
   (o azul-marinho no escuro e o claro no claro: a MESMA do celular, Alan, 05/11/2026); o ônibus grande à esquerda, nítido (a foto nunca é desfocada, filtrada, esticada nem espelhada: a suavização é só de camadas de CSS); os logos (SIGO · separador · Itamarati) no topo esquerdo e,
   ABAIXO deles, o nome do sistema (Alan, 04/11/2026: «acho que esse texto deveria estar abaixo dos logos»); o botão do tema no cabeçalho do painel, na linha do título; o formulário num PAINEL DE VIDRO à direita (azul-marinho translúcido, desfoque só atrás dele, borda fina
   azul-acinzentada, cantos de 24 px, sombra suave) e, embaixo dele, no computador do servidor, o painel menor do acesso de teste; a versão e os direitos centralizados no rodapé. Até 900 px de largura, ou em tela mais alta que larga: uma coluna só — a foto vira a
   faixa de cima e se dissolve no fundo, e o painel fica logo abaixo. A paleta é a da marca: azul profundo, branco e o vermelho padrão da Itamarati (o botão Entrar); o FOCO é um cinza neutro (Alan, 04/11/2026: «não ta legal… poderia ser um cinza mais neutro e mais
   discreto»: o amarelo saiu).

   DUAS VERSÕES, CLARA E ESCURA (Alan, 04/11/2026: «eu trouxe aqui as imagens pra nossa tela de login… uma pra versão clara e outra pra versão escura»): tudo o que está ACIMA da seção «O TEMA CLARO» (no fim do arquivo) é a versão ESCURA — a foto de NOITE —, a do
   sistema com «dark» guardado; sem a classe «dark» no <html> (o claro, o padrão do sistema: o tema-inicial.js a põe antes da primeira pintura só com «dark» na chave «theme») valem as sobreposições da seção final: a foto de DIA, o pé e o painel CLAROS, os textos em
   tinta escura, os campos brancos. Composição, tamanhos e textos são os MESMOS nas duas. */

.lt{
  --lt-vermelho:#de0013;                                 /* o vermelho padrão da Itamarati / do sistema (o botão Entrar) */
  --lt-pe-rgb:10,18,38;                                  /* o AZUL-MARINHO do fundo da composição de UMA coluna, em que a faixa da foto se dissolve nele (#0a1226; na página de teste é também o <meta theme-color> do escuro — no sistema, o theme-color é o do próprio sistema) */
  --lt-pe-foto-rgb:10,18,38;                             /* o PÉ da composição de DUAS colunas no ESCURO: o MESMO azul-marinho da coluna única (#0a1226, o --lt-pe-rgb) — Alan, 05/11/2026, 07:08: «na versão desktop… a versão escura você deixou a parte de baixo cinza; eu gostaria que fosse meio azulada, que é a mesma que você usa quando está na versão mobile» (de 04/11 22:34 até ali era o cinza do asfalto da foto de noite, #2b2a2b). No CLARO, o mesmo claro do celular (na seção do claro) */
  --lt-sombra-rgb:4,10,28;                               /* a sombra de leitura sob o cabeçalho, no layout de uma coluna */
  --lt-lateral:clamp(1rem,3.6vw,4.5rem);                 /* a margem externa: de 16 a 72 px (60 px em 1672) */
  --lt-logo:clamp(1.9rem,2.2vw,2.6rem);                  /* a altura dos DOIS logos E do travessão entre eles: de 30 a 42 px (37 px em 1672) */
  --lt-logos-gap:clamp(.9rem,1.5vw,1.6rem);              /* o espaço entre o SIGO, o travessão e a Itamarati: de 14 a 26 px */
  --lt-sigo-prop:4.4720497;                              /* a proporção do arquivo do SIGO de letras brancas (720 × 161); a do de letras escuras, o do claro (360 × 80), é 4,5 */
  --lt-logos-w:calc(var(--lt-logo) * (var(--lt-sigo-prop) + 3.8297872) + 2 * var(--lt-logos-gap) + 1px);   /* a LARGURA DA FILEIRA DOS LOGOS, que é também a da TINTA dela: os arquivos não têm margem transparente (medido: o SIGO tem tinta da 1ª à última coluna; a Itamarati é o retângulo vermelho inteiro, sem alfa). 3,8297872 = 900 / 235; 1 px = o travessão */
  --lt-sub-recuo:0px;                                    /* onde a caixa do nome do sistema começa na linha do cabeçalho: à esquerda (0); até 720 px, onde os logos ficam no centro, a metade da sobra */
  --lt-topo-y:clamp(1rem,2.8vw,3rem);                    /* o respiro de cima do cabeçalho (de 16 a 48 px) */
  --lt-tema-d:2.6rem;                                    /* o lado do botão do tema: 42 px em toda tela (dentro do painel não falta lugar; no toque, o alvo confortável) */
  --lt-campo:3.375rem;--lt-botao:3.5rem;                 /* 54 e 56 px em toda tela (o roteiro do Alan: campos de ~52 a 56 px e botão de ~56 px, confortáveis para o toque) */
  --lt-titulo:clamp(2rem,2.4vw,2.75rem);                 /* 32 a 44 px */
  --lt-titulo-razao:7.85;                                /* a largura do título por px de fonte, com 1,4 % de folga: «Acessar sistema» tem 7,74 (medido); o «Esqueceu a senha?» tem a dele (a regra .lt:has(…), junto do título) */
  --lt-titulo-fs:min(var(--lt-titulo),calc((100cqi - var(--lt-tema-d) - .75rem) / var(--lt-titulo-razao)));   /* o tamanho DE FATO do título: o de sempre, a não ser que não caiba numa linha só, ao lado do botão do tema — o lugar é a largura do conteúdo do painel (100cqi) menos o botão e 12 px */
  --lt-texto:clamp(1.05rem,1.1vw,1.25rem);               /* o texto auxiliar e as labels: 17 a 20 px */
  /* os CAMPOS e o FOCO (o cinza neutro; nada de amarelo): o campo é um escuro semitransparente sobre o vidro, de borda sutil — ainda assim acima de 3:1 contra o vidro e contra o próprio campo, o limite que identifica o campo; no foco a borda clareia e ganha um anel suave */
  --lt-campo-fundo:rgba(6,12,24,.5);
  --lt-campo-borda:rgba(214,222,235,.52);
  --lt-foco:rgba(236,241,248,.9);
  --lt-foco-anel:rgba(214,222,235,.2);
  --lt-foco-linha:rgba(214,222,235,.78);                 /* o contorno do foco no olho, nos links e no botão do tema */
  --lt-balao-fundo:#eaf0f8;--lt-balao-texto:#0f1824;     /* o BALÃO DA CASA do botão do tema: igual ao do sistema, que INVERTE no tema escuro (bolha clara, texto escuro) e é escuro no claro */
  --lt-balao-sombra:0 18px 36px rgba(5,10,18,.6),0 4px 10px rgba(5,10,18,.44);
  /* o PAINEL DE VIDRO (o roteiro do Alan: «fundo azul-marinho translúcido… desfoque moderado só atrás do painel… borda fina azul-acinzentada… cantos ~22–26 px… sombra suave sem brilho… escuro o bastante para a leitura; as luzes do terminal não podem competir com campos e textos») */
  --lt-painel-w:clamp(21rem,30vw,29rem);                 /* a largura: 432 px em 1440, 464 px de 1547 px para cima (o roteiro: ~420 a 470 px em tela grande), até 336 px nas menores */
  --lt-painel-p:clamp(1.5rem,2.4vw,2.5rem);              /* o respiro interno: de 24 a 40 px (35 px em 1440) */
  --lt-painel-fundo:rgba(17,32,54,.62);                  /* o vidro: o azul-marinho do roteiro, sobre o desfoque */
  --lt-painel-opaco:rgba(14,27,47,.94);                  /* sem backdrop-filter no navegador: o mesmo azul, quase opaco (a leitura nunca depende do desfoque) */
  --lt-painel-borda:rgba(170,195,230,.25);
  --lt-painel-sombra:0 1.5rem 3.5rem rgba(2,6,16,.38);
  --lt-painel-desfoque:18px;
  /* a FOTO na largura inteira (o céu de uma borda à outra): em tela mais ALTA que 16:9 ela fica no topo; em tela mais LARGA sobra foto, e 75 % do excesso sai em cima (o ônibus fica inteiro na tela e as rodas, acima do degradê do pé) */
  --lt-foto-y:min(0px,calc((100vh - 100vw * 941 / 1672) * .75));
  /* overflow-x CLIP, não hidden: hidden faria do .lt (no SPA ele é um <div>, não o <body>) uma caixa de rolagem — a lista do acesso de teste seria cortada nela e a página ganharia uma 2ª barra; o clip só corta o que passa para o lado */
  margin:0;position:relative;min-height:100vh;min-height:100dvh;overflow-x:clip;
  background:rgb(var(--lt-pe-foto-rgb));color:#fff;font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-optical-sizing:auto;
  font-size:1rem;line-height:normal;font-variant-numeric:normal;   /* dentro do sistema o <body> tem 13,5 px, linha de 1,45 e números tabulares: a tela de entrada volta ao padrão do navegador, o mesmo da página de teste (nada muda de tamanho entre as duas) */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
.lt *,.lt *::before,.lt *::after{box-sizing:border-box}
.lt [hidden]{display:none!important}
.lt-sprite{position:absolute;width:0;height:0;overflow:hidden}
.lt-ic{display:block;flex:none;width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── o cenário, em CAMADAS separadas (o roteiro do Alan): a fotografia, do jeito que veio, e por cima só o degradê do pé — o painel é outra camada, na página ─────────────────────────── */
.lt-fundo{position:fixed;inset:0;z-index:0;overflow:hidden;background:rgb(var(--lt-pe-foto-rgb))}
/* A FOTO OCUPA A LARGURA INTEIRA, na proporção do arquivo (1672 × 941): nada é cortado na lateral nem esticado. Em tela mais alta que 16:9 ela fica no topo (o céu em cima) e o que sobra embaixo é o pé, na cor do asfalto; em tela mais larga, 75 % do excesso sai em cima e 25 % embaixo (--lt-foto-y: em 2560 × 1080, a mais larga medida, o degradê do pé mal chega às rodas — ~.08).
   O PÉ DA PRÓPRIA FOTO se dissolve na cor do pé (a do asfalto) por uma máscara: inteira até 80 % da altura dela (logo abaixo das rodas) e sumindo aos poucos até a borda, numa curva suave — sem linha onde a imagem acaba. Antes ela cobria a tela (cover) e uma faixa diagonal escurecia a direita: a faixa saiu */
.lt-foto{position:absolute;left:0;top:var(--lt-foto-y);width:100%;aspect-ratio:1672/941;background:url('/img/login/sigo-login-noite.webp?v=2') center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.84) 85%,rgba(0,0,0,.5) 91%,rgba(0,0,0,.18) 96%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.84) 85%,rgba(0,0,0,.5) 91%,rgba(0,0,0,.18) 96%,transparent 100%)}
/* O DEGRADÊ DO PÉ DA TELA (a camada de cima): onde a foto passa da borda de baixo (tela mais larga que 16:9), o asfalto e os reflexos também somem na cor do pé ANTES do rodapé. Amplo (22 % da altura, de 7 a 15 rem) e com a mesma curva suave; na altura das rodas ele mal começa — a transição
   pode encostar no ônibus, como o Alan liberou («talvez mesmo se pegar por cima do onibus um pouco»), mas sem véu forte sobre ele */
.lt-fundo::after{content:'';position:absolute;inset:auto 0 0 0;height:clamp(7rem,22vh,15rem);pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--lt-pe-foto-rgb),0) 0,rgba(var(--lt-pe-foto-rgb),.08) 18%,rgba(var(--lt-pe-foto-rgb),.3) 40%,rgba(var(--lt-pe-foto-rgb),.62) 64%,rgba(var(--lt-pe-foto-rgb),.88) 84%,rgb(var(--lt-pe-foto-rgb)) 100%)}

/* ── a página: cabeçalho, a área do formulário e o rodapé ─────────────────────────────────────────────────────────────────────────────────────── */
.lt-pagina{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}

/* o cabeçalho tem DUAS linhas (Alan, 04/11/2026: o nome do sistema «deveria estar abaixo dos logos»): os logos e, logo abaixo, o nome do sistema (o botão do tema saiu daqui: está no cabeçalho do painel) */
.lt-topo{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;padding:var(--lt-topo-y) var(--lt-lateral) 0}
.lt-logos{display:flex;align-items:center;gap:var(--lt-logos-gap);min-width:0}
/* OS DOIS LOGOS E O TRAVESSÃO TÊM A MESMA ALTURA (Alan, 04/11/2026, apontando o logo da Itamarati: «diminui um pouco o logo da itamarti pra ficar na mesma altura do SIGO» e, apontando o travessão: «o travessão tem a mesma altura dos logos»): uma variável só, --lt-logo, lida pelos três; a largura de cada logo sai da proporção do arquivo (SIGO 720 × 161 → ~165 px; Itamarati 900 × 235 → ~141 px em 1672).
   Antes a Itamarati tinha 58 px contra 37 do SIGO, e o travessão 46 (logo + 9,6 px de «respiro»): agora nenhum passa do outro, nem em cima nem embaixo */
.lt-logo-sigo{display:block;height:var(--lt-logo);width:auto;max-width:100%;object-fit:contain}
.lt-logo-claro{display:none}   /* o SIGO tem DOIS arquivos: o de letras brancas (escuro, o base) e o de letras escuras (claro); o tema claro troca um pelo outro na seção final */
.lt-sep{flex:none;width:1px;height:var(--lt-logo);background:rgba(255,255,255,.32)}
.lt-logo-ita{display:block;height:var(--lt-logo);width:auto;max-width:100%;object-fit:contain;border-radius:.3rem}
/* O NOME DO SISTEMA COM A LARGURA VISUAL DOS LOGOS (Alan, 04/11/2026, 22:40 e 22:43: «deixa a largura desse texto com a mesma largura dos logos... pra casar certinho com a largura dos logos e ficar simétrico» e «a mesma largura VISUAL»): a TINTA do texto começa na borda esquerda do SIGO
   e acaba na borda direita da Itamarati. A conta usa as constantes MEDIDAS no navegador (Manrope 500, espaçamento .02em): o texto tem 20,1875 px de avanço por px de fonte; a tinta do «S» começa .03 em depois da caixa e a do «l» final acaba .095 em antes dela. A fonte é a largura dos logos
   ÷ 20,365 — o texto natural fica 1,5 % abaixo do encaixe — e o justificado (o da última linha também) estica os quatro espaços entre as palavras até as pontas; o recuo de −.03 em leva a tinta do «S» à borda e a caixa passa .095 em da borda direita dos logos (a tinta do «l» acaba nela).
   Uma linha só, sempre (nowrap); a altura da linha é a de antes (1,35 × a fonte antiga), para o cabeçalho não mudar de altura. Fica na 2ª linha do cabeçalho, à esquerda; até 720 px, centralizado sob os logos centralizados (--lt-sub-recuo) */
.lt-sub{margin:0;flex:1 1 100%;padding:0 calc(100% - var(--lt-sub-recuo) - var(--lt-logos-w) - .095em) 0 var(--lt-sub-recuo);font-size:calc(var(--lt-logos-w) / 20.365);line-height:calc(clamp(1rem,1.25vw,1.3rem) * 1.35);
  font-weight:500;letter-spacing:.02em;text-indent:-.03em;text-align:justify;text-align-last:justify;white-space:nowrap;color:rgba(214,222,235,.84);text-shadow:0 1px 8px rgba(0,0,0,.55)}

/* O BOTÃO DO TEMA (Alan, 04/11/2026: a tela tem versão clara e escura, trocadas pelo tema do sistema e por um botão) fica NO CABEÇALHO DO PAINEL, na linha do título «Acessar sistema», à direita (Alan, 04/11/2026, ~22:50: «esse item de tema era pra estar dentro do card de login no topo
   direito» e «e eu já tinha pedido isso» — o roteiro da 2ª proposta, de 03/11: «Dentro do cartão… Cabeçalho — Título: Acessar sistema… No canto superior direito, coloque um pequeno botão com ícone de lua…»; a imagem de referência desta noite o punha no canto da página). O CENTRO dele é o
   centro da 1ª linha do título e a borda direita é a do conteúdo do painel (a mesma dos campos e do «Entrar»). No HTML ele é o ÚLTIMO elemento do painel (a ordem do Tab e do leitor de tela: campos, links, Entrar e por último o tema) e o CSS o põe aqui. Superfície própria como a dos campos
   (fundo e borda); mostra o SOL no escuro (o clique leva ao claro) e a LUA no claro; sem animação além do hover */
.lt-tema{position:absolute;top:calc(var(--lt-painel-p) + (var(--lt-titulo-fs) * 1.1 - var(--lt-tema-d)) / 2);right:var(--lt-painel-p);z-index:2;display:grid;place-items:center;width:var(--lt-tema-d);height:var(--lt-tema-d);padding:0;font:inherit;
  border:1px solid rgba(214,222,235,.36);border-radius:.7rem;background:rgba(7,12,24,.55);color:#fff;cursor:pointer;transition:background-color .15s,border-color .15s}
.lt-tema:hover{border-color:rgba(214,222,235,.55);background:rgba(7,12,24,.72)}
.lt-tema .lt-ic{width:1.3rem;height:1.3rem}
.lt-tema .lt-ic-lua{display:none}
/* O BALÃO DA CASA no botão do tema (Alan, 04/11/2026: o tooltip nativo, «padrão win xp», saiu; o botão não tem mais «title»): imita o balão padrão do sistema (public/style.css, .balao-flutuante) — bolha de cantos arredondados (12 px), texto de 12 px, sombra de popover e a setinha de 5 px — e abre ABAIXO do botão,
   alinhada à borda direita dele (assim nunca é cortada na borda da tela), no hover e no foco do teclado (:focus-visible; o clique do mouse não deixa o balão preso). É CSS puro: o texto vem de data-balao (o login-alternativo-v3.js o troca junto com o aria-label, que segue dizendo a ação). Como no sistema, é ESCURO no tema claro e INVERTIDO no escuro.
   SÓ NA PÁGINA DE TESTE (.lt-avulsa, o <body> dela): na entrada oficial o balão é o DO SISTEMA (o do app.js, que abre em todo data-balao) — com os dois, o botão teria dois balões */
.lt-avulsa .lt-tema::before,.lt-avulsa .lt-tema::after{display:none;position:absolute;z-index:3;pointer-events:none}
.lt-avulsa .lt-tema:hover::before,.lt-avulsa .lt-tema:hover::after,.lt-avulsa .lt-tema:focus-visible::before,.lt-avulsa .lt-tema:focus-visible::after{display:block}
.lt-avulsa .lt-tema::after{content:attr(data-balao);top:calc(100% + 10px);right:0;padding:8px 12px;border-radius:12px;background:var(--lt-balao-fundo);color:var(--lt-balao-texto);box-shadow:var(--lt-balao-sombra);
  font-size:12px;font-weight:400;line-height:1.45;letter-spacing:0;text-align:left;white-space:nowrap}
.lt-avulsa .lt-tema::before{content:'';top:calc(100% + 5px);right:calc(var(--lt-tema-d) / 2 - 5px);border:5px solid transparent;border-top:0;border-bottom-color:var(--lt-balao-fundo)}

/* a área do formulário: o painel à direita, mais ou menos no meio da altura útil e levemente ELEVADO (mais respiro embaixo do que em cima). Uma COLUNA (05/11/2026): embaixo do painel de entrada vem o do acesso de teste, quando existe —
   com um painel só, a posição é a de sempre (à direita, no meio da altura) */
.lt-principal{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:clamp(.75rem,2vh,2rem) var(--lt-lateral) clamp(2rem,7vh,5.5rem)}

/* ── O PAINEL DE VIDRO (o roteiro do Alan, 04/11/2026): UM painel, à direita — o azul-marinho translúcido sobre um desfoque moderado do que está atrás DELE (a foto em si nunca é desfocada), borda fina azul-acinzentada, cantos de 24 px, sombra suave sem brilho e respiro de 24 a 40 px.
   Escuro o bastante para a leitura: as luzes do terminal, atrás dele, ficam desfocadas e apagadas pelo azul. Sem backdrop-filter no navegador, o fundo é mais opaco. Não é um diálogo: é o conteúdo permanente da página (main > section) ─────────────────────────────────────────── */
.lt-acesso{position:relative;container-type:inline-size;width:min(100%,var(--lt-painel-w));padding:var(--lt-painel-p);border:1px solid var(--lt-painel-borda);border-radius:24px;background:var(--lt-painel-opaco);box-shadow:var(--lt-painel-sombra)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .lt-acesso{background:var(--lt-painel-fundo);-webkit-backdrop-filter:blur(var(--lt-painel-desfoque));backdrop-filter:blur(var(--lt-painel-desfoque))}
}

.lt-titulo{margin:0;padding-right:calc(var(--lt-tema-d) + .75rem);font-size:var(--lt-titulo-fs);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:#fff}   /* o título nunca passa por baixo do botão do tema: a reserva à direita (o botão e 12 px), e o tamanho que cabe nela (--lt-titulo-fs; o painel é um contêiner, e 100cqi é a largura do conteúdo dele) */
.lt:has(.lt-lead[hidden]){--lt-titulo-razao:9.15}   /* o pedido do «Esqueceu a senha?» (o JS troca o título e esconde a frase de apoio): 9,02 px por px de fonte (medido), mais 1,4 % — sem isto, ao lado do botão, ele quebrava em duas linhas (1440 × 900, 1280 × 720, 768 × 1024, 390 × 844).
   A variável muda no PRÓPRIO .lt (onde --lt-titulo-fs é declarada e resolvida; mudada no painel, não chegaria ao título); o botão acompanha o tamanho */
/* O BLOCO DO FORMULÁRIO É COMPACTO (Alan, 04/11/2026: «dá uma otimizada nesse bloco… pra ficar mais compacto… aquele risco amarelo não vejo mta necessidade»): sem o risco amarelo, labels coladas no campo e espaços curtos entre os grupos; os campos (54 px) e o botão (56 px) seguem o roteiro */
.lt-lead{margin:.55rem 0 1.25rem;font-size:var(--lt-texto);line-height:1.4;color:rgba(214,222,235,.86)}

.lt-form{display:flex;flex-direction:column}
.lt-form label{display:block;margin:0 0 .4rem;font-size:var(--lt-texto);font-weight:600;line-height:1.2;color:#f4f7fb}
.lt-form label:not(:first-child){margin-top:.9rem}
.lt-form input{display:block;width:100%;height:var(--lt-campo);padding:0 1.1rem;border:1px solid var(--lt-campo-borda);border-radius:.7rem;background:var(--lt-campo-fundo);color:#fff;
  font:inherit;font-size:1.05rem;font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
.lt-form input::placeholder{color:rgba(204,214,230,.74);opacity:1}
.lt-form input:hover{border-color:rgba(214,222,235,.64)}
.lt-form input:focus-visible{border-color:var(--lt-foco);background:rgba(6,12,24,.62);box-shadow:0 0 0 3px var(--lt-foco-anel)}
.lt-form input[aria-invalid="true"]{border-color:#ff7683}
.lt-senha{position:relative}
.lt-senha input{padding-right:3.7rem}
.lt-olho{position:absolute;top:50%;right:.4rem;transform:translateY(-50%);display:grid;place-items:center;width:2.7rem;height:2.7rem;border:0;border-radius:.6rem;
  background:transparent;color:rgba(214,222,235,.82);cursor:pointer;transition:background-color .15s,color .15s}
.lt-olho:hover{background:rgba(255,255,255,.1);color:#fff}
.lt-olho .lt-ic{width:1.35rem;height:1.35rem}
.lt-olho:focus-visible,.lt-link:focus-visible,.lt-tema:focus-visible{outline:3px solid var(--lt-foco-linha);outline-offset:2px}

.lt-primeiro{margin-top:.55rem}
.lt-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.15rem 1.25rem}   /* «Primeiro acesso?» à esquerda e «Esqueceu a senha?» à direita, quando existe; com 14 px (Alan, 05/11/2026, 07:20: «esses itens podem ter uma fonte menor... tá muito grande»; eram 16) */
.lt-link{appearance:none;border:0;background:none;padding:.25rem 0;font:inherit;font-size:.875rem;font-weight:600;color:#e8eef8;
  text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.24em;cursor:pointer;border-radius:.3rem}
.lt-link:hover{color:#fff;text-decoration-thickness:.13em}
.lt-ajuda{margin:.55rem 0 0;font-size:.92rem;line-height:1.5;color:rgba(214,222,235,.84)}
.lt-ajuda-solta{margin:.55rem 0 1.25rem}   /* o texto do «Esqueceu a senha?»: o mesmo espaço da frase do login */

.lt-info{margin-top:1rem;padding:.7rem .95rem;border:1px solid rgba(214,222,235,.3);border-radius:.7rem;background:rgba(255,255,255,.08);color:#fff;font-size:.92rem;font-weight:600;line-height:1.4}
.lt-erro{margin-top:1rem;padding:.7rem .95rem;border:1px solid rgba(255,128,138,.55);border-radius:.7rem;background:rgba(120,12,26,.5);color:#ffe3e6;font-size:.92rem;font-weight:600;line-height:1.4}
/* o aviso de erro de entrada aparece logo embaixo do botão, DENTRO do painel. Não há mais vaga reservada para ele (no painel de vidro ela era um vão vazio sob o botão, e os respiros de cima e de baixo ficavam desiguais): o painel cresce quando o aviso chega */
.lt-vaga .lt-erro{margin-top:.85rem}

/* O BOTÃO «ENTRAR» É O VERMELHO PADRÃO DA ITAMARATI (Alan, 04/11/2026, vendo o botão amarelo do prompt: «esse botão a cor deve ser vermelho da cor padrão itamarati»; o mesmo que ele já tinha escolhido na segunda proposta em 03/11): o mesmo degradê, a mesma borda e o mesmo texto do botão de entrada
   OFICIAL (.login-submit, public/acesso.css) e dos botões primários do sistema — o vermelho oficial #de0013 (--lt-vermelho, uma linha para trocar); a sombra segue preta (sem sombra colorida). Largura total, ~56 px, texto claro em peso forte; o contorno do foco é branco (tinta no claro) */
.lt-entrar{margin-top:.95rem;width:100%;height:var(--lt-botao);border-radius:.7rem;border:1px solid color-mix(in srgb,var(--lt-vermelho) 78%,transparent);
  background:linear-gradient(92deg,color-mix(in srgb,var(--lt-vermelho) 86%,#7c0008),color-mix(in srgb,var(--lt-vermelho) 94%,#ff6872));color:#fff5f6;
  font:inherit;font-size:1.12rem;font-weight:800;letter-spacing:.01em;box-shadow:0 .35rem .9rem rgba(0,0,0,.28);cursor:pointer;transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease,box-shadow .28s ease}
/* O «ENTRAR» AO PASSAR O MOUSE (Alan, 05/11/2026, 07:40: «melhora a animação nesse botão ao passar o mouse.. ele dá um salto muito seco»): sobe 2 px com a sombra mais funda, num movimento de .28 s que desacelera no fim — era 1 px em .05 s, e o
   bloco do «menos movimento» ainda zerava a transição no Windows dele (saiu: a regra da casa, abaixo); ao clicar, desce rápido (.08 s) */
@media (hover:hover){.lt-entrar:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 .6rem 1.3rem rgba(0,0,0,.32)}}
.lt-entrar:active:not(:disabled){transform:translateY(1px);transition-duration:.08s;box-shadow:0 .15rem .5rem rgba(0,0,0,.28)}
.lt-entrar:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lt-entrar:disabled{cursor:progress;filter:saturate(.8) brightness(.9);box-shadow:none}
.lt-entrar[aria-busy="true"]::before{content:'';display:inline-block;width:1.05em;height:1.05em;margin-right:.6em;vertical-align:-.16em;border:.16em solid currentColor;border-right-color:transparent;border-radius:50%;animation:lt-gira .8s linear infinite}
@keyframes lt-gira{to{transform:rotate(360deg)}}

/* ── as peças que a ENTRADA OFICIAL tem e a página de teste não tinha (05/11/2026): o aviso, os links do painel da agência e do acesso livre, e o acesso de teste ─────────────────────────────── */
/* O AVISO (a sessão que terminou, o acesso livre desligado, sem conexão): a caixa de informação do painel, logo abaixo da frase de apoio, antes dos campos — o primeiro que se lê depois do título */
.lt-aviso{margin:0 0 1rem}
/* «Painel da agência» e «Continuar sem login» (só quando o servidor os liga): links discretos, centralizados, embaixo do «Entrar» e do aviso de erro; a linha que fica vazia (o acesso livre desligado no meio) some */
.lt-mais{display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem 1.25rem;margin-top:.75rem}
.lt-mais:empty{display:none}
/* O ACESSO DE TESTE (só no computador do servidor, com MAPA_LOGIN_TESTE ligado — o Alan entra no 3021 por ele): um SEGUNDO painel de vidro, menor, logo abaixo do de entrada. Assim o painel de entrada fica igual ao da produção, e o que é só de
   teste se vê separado, com o selo DEV. A lista é a PRÓPRIA do sistema (csUnica; seletor nativo é proibido), no desenho dos campos do painel; o «Entrar» dele é um botão de contorno (o vermelho é só do «Entrar» de verdade) */
.lt-teste{width:min(100%,var(--lt-painel-w));margin-top:.9rem;padding:.9rem 1.1rem 1.05rem;border:1px solid var(--lt-painel-borda);border-radius:18px;background:var(--lt-painel-opaco);box-shadow:var(--lt-painel-sombra)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .lt-teste{background:var(--lt-painel-fundo);-webkit-backdrop-filter:blur(var(--lt-painel-desfoque));backdrop-filter:blur(var(--lt-painel-desfoque))}
}
.lt-teste-cab{display:flex;align-items:center;gap:.65rem}
.lt-teste-cab .lt-ic{width:1.15rem;height:1.15rem;color:rgba(214,222,235,.82)}
.lt-teste-titulo{margin:0;font-size:.95rem;font-weight:700;line-height:1.25;color:#f4f7fb}
.lt-teste-texto{margin:.1rem 0 0;font-size:.8rem;line-height:1.3;color:rgba(214,222,235,.86)}
.lt-teste-selo{margin-left:auto;padding:.22rem .5rem;border:1px solid rgba(214,222,235,.36);border-radius:999px;font-size:.62rem;font-weight:800;letter-spacing:.12em;line-height:1;color:#ffc2c8}
.lt-teste-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;margin-top:.75rem}
.lt-teste .cs-wrap{min-width:0}
.lt-teste .cs-btn{height:2.75rem;padding:0 .9rem;border:1px solid var(--lt-campo-borda);border-radius:.7rem;background:var(--lt-campo-fundo);color:#fff;font-size:.95rem}
.lt-teste .cs-btn:hover{border-color:rgba(214,222,235,.64);background:var(--lt-campo-fundo)}
.lt-teste .cs-btn.cs-vazia span{color:rgba(204,214,230,.74)}
.lt-teste-entrar{display:inline-flex;align-items:center;gap:.45rem;height:2.75rem;padding:0 1.05rem;border:1px solid rgba(214,222,235,.36);border-radius:.7rem;background:rgba(7,12,24,.55);color:#fff;
  font:inherit;font-size:.95rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s}
.lt-teste-entrar .lt-ic{width:1.1rem;height:1.1rem}
.lt-teste-entrar:hover:not(:disabled){border-color:rgba(214,222,235,.55);background:rgba(7,12,24,.72)}
.lt-teste-entrar:disabled{opacity:.5;cursor:not-allowed}
.lt-teste-entrar:focus-visible{outline:3px solid var(--lt-foco-linha);outline-offset:2px}

/* ── o rodapé: HTML, no fluxo da página (nunca fixo sobre o painel), centralizado e discreto, sobre o pé; nada dele está na fotografia ──────────────────────────────── */
.lt-rodape{padding:1rem var(--lt-lateral) calc(1.1rem + env(safe-area-inset-bottom,0px));text-align:center;color:rgba(214,222,235,.8);text-shadow:0 1px 6px rgba(0,0,0,.65)}
.lt-rodape p{margin:0}
.lt-versao{font-size:clamp(.85rem,.9vw,.98rem);font-weight:600;letter-spacing:.02em}   /* a 1ª linha do rodapé é a VERSÃO, como na tela de Gestão de Jornadas (Alan, 04/11/2026) */
.lt-legal{margin-top:.2rem!important;font-size:clamp(.74rem,.78vw,.84rem);line-height:1.5;color:rgba(196,206,224,.72)}

/* ── notebook de pouca altura (1366 × 768, 1280 × 720): espaços e tamanhos um pouco menores, o painel inteiro à vista (e a página rola se ainda faltar) ──────────────────────────────── */
@media (min-width:1101px) and (max-height:820px){
  .lt{--lt-titulo:clamp(1.9rem,2.1vw,2.3rem);--lt-texto:clamp(1rem,1.05vw,1.1rem);--lt-topo-y:clamp(.9rem,2vw,1.6rem);--lt-painel-p:clamp(1.5rem,2.2vw,2rem)}
  .lt-principal{padding-block:.5rem 1.2rem}
  .lt-rodape{padding-block:.6rem}
}

/* ── uma coluna só: celular, tablet em pé e janela em pé — a foto vira a FAIXA DE CIMA (o ônibus inteiro, entre o cabeçalho e o painel) e se dissolve no fundo numa curva suave; o painel começa onde a foto acaba ──────────────────────────
   --lt-faixa é a altura da faixa: no máximo 90 % da largura (assim o ônibus, que ocupa 62 % da largura da foto, cabe inteiro na tela estreita) e no máximo 46 % da altura (sobra espaço para o formulário). O espaçador (::before) leva o painel para baixo da faixa, descontado o cabeçalho. */
@media (max-width:900px),(max-aspect-ratio:1/1){
  .lt{--lt-titulo:clamp(1.85rem,5vw,2.4rem);--lt-texto:1.05rem;--lt-faixa:clamp(13rem,min(90vw,46dvh),30rem);--lt-cabecalho:6.4rem;--lt-painel-p:clamp(1.25rem,5vw,2rem);background:rgb(var(--lt-pe-rgb))}
  .lt-fundo{background:rgb(var(--lt-pe-rgb))}   /* aqui o fundo segue o do <meta theme-color> (o azul-marinho no escuro, o claro no claro): a cor do asfalto vale só nas duas colunas, onde a foto chega ao pé da tela */
  .lt-foto{top:0;height:var(--lt-faixa);aspect-ratio:auto;background-size:cover;background-position:left 58%;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,rgba(0,0,0,.82) 72%,rgba(0,0,0,.45) 84%,rgba(0,0,0,.15) 93%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 62%,rgba(0,0,0,.82) 72%,rgba(0,0,0,.45) 84%,rgba(0,0,0,.15) 93%,transparent 100%)}   /* a foto some na base da faixa, no fundo; nada é desenhado por cima dela */
  .lt-fundo::after{inset:0 0 auto 0;height:8rem;background:linear-gradient(180deg,rgba(var(--lt-sombra-rgb),.5),rgba(var(--lt-sombra-rgb),0))}   /* aqui o pé é o próprio fundo: a camada de cima vira só a sombra de leitura sob o cabeçalho */
  .lt-principal{flex-direction:column;justify-content:flex-start;align-items:center;padding:0 var(--lt-lateral) 1.25rem}
  .lt-principal::before{content:'';flex:none;display:block;height:max(0px,calc(var(--lt-faixa) - var(--lt-cabecalho) - 2.25rem))}   /* o painel já começa sobre a base esmaecida da foto: cabe mais tela sem rolar */
  .lt-acesso,.lt-teste{width:min(100%,27rem)}
}
/* tablet em pé (largura de 721 a 900 px): o cabeçalho tem duas linhas, com o nome do sistema à esquerda, sob os logos (como nas telas largas); abaixo de 721 px o cabeçalho é o do celular (logos e nome centralizados).
   A altura nominal do cabeçalho (--lt-cabecalho) é a do espaçador do título: 6,7 rem põe o painel no mesmo ponto de antes (o cabeçalho de uma linha, de 4,6 rem nominais, ganhou a linha do nome do sistema: ~35 px a mais) */
@media (min-width:721px) and (max-width:900px),(min-width:721px) and (max-aspect-ratio:1/1){
  .lt{--lt-cabecalho:6.7rem}
}
/* celular e tablet pequeno em pé (até 720 px de largura): o cabeçalho fica em DUAS linhas e CENTRALIZADO — os logos e, embaixo, o nome do sistema (Alan, 04/11/2026: «quando for mobile... esse item deve estar centralizado»), com a tinta casando com a dos logos nas duas pontas */
@media (max-width:720px){
  .lt{--lt-sub-recuo:calc((100% - var(--lt-logos-w)) / 2)}
  .lt-topo{justify-content:center}
}
@media (max-width:420px){
  .lt{--lt-logo:1.65rem;--lt-cabecalho:min(6.4rem,calc(var(--lt-faixa) * .196 + 2.25rem))}   /* o SIGO segue com os 26 px que tinha no celular; só a Itamarati desce até ele. O cabeçalho nominal (o do espaçador) é o de sempre, MENOS onde a faixa da foto fica baixa (celular baixo, ou
     estreito): aí ele encolhe o bastante para o painel começar ~4 px abaixo das rodas do ônibus (que acabam a 80,4 % da faixa) — o cabeçalho de verdade tem ~76 px; antes o painel encostava 2 a 5 px nelas em 360 × 640 e 375 × 667 */
  .lt-form input{padding:0 .95rem}
  .lt-senha input{padding-right:3.5rem}
  .lt-rodape{padding-block:.6rem .8rem}
  .lt-legal{font-size:.72rem}
  .lt-teste-linha{grid-template-columns:minmax(0,1fr)}
  .lt-teste-entrar{justify-content:center}
}
@media (max-height:520px) and (orientation:landscape){
  .lt-principal{align-items:flex-start}
}

/* ═══ O TEMA CLARO (Alan, 04/11/2026: «uma pra versão clara e outra pra versão escura»): sobreposições «html:not(.dark) .lt…» — valem sempre que o <html> NÃO tem a classe «dark» do sistema (o claro é o padrão; o tema-inicial.js põe a classe
   antes da primeira pintura só com «dark» guardado na chave «theme», e a troca do botão a põe e tira) ═══════════════════════
   Tudo o que está acima é o ESCURO (a foto de noite). Aqui muda SÓ a pele: a foto de DIA (o mesmo enquadramento), o pé e o fundo no claro #e9eef6 (nas duas composições), o painel de vidro CLARO (branco translúcido, a mesma geometria),
   o logo do SIGO de letras escuras, os textos em tinta escura (#1d2229; o texto de apoio em cinza-azulado), os campos brancos de borda firme (3:1 contra o branco e contra o vidro), o foco em CINZA escuro (os mesmos critérios do escuro: neutro, e mais de 3:1 contra o campo e o vidro), o erro e o
   aviso em tons claros. O botão «Entrar» segue VERMELHO #de0013 com texto claro, igual ao do escuro. Composição, tamanhos e textos: os mesmos. Os contrastes foram medidos no navegador, pixel a pixel sob as letras, e ficam fixados em test/login-alternativo-v3.test.mjs. */
html:not(.dark) .lt{
  --lt-tinta:#1d2229;                                    /* título, rótulos e links: a tinta escura */
  --lt-apoio:#434d5c;                                    /* a frase de apoio e o texto de ajuda: cinza-azulado */
  --lt-borda:#646f80;                                    /* a borda dos campos e do botão do tema: 5,1:1 contra o branco do campo e 3,4:1 contra o ponto mais escuro do vidro claro (sobre a fachada do terminal, em 1024 × 768) */
  --lt-sigo-prop:4.5;                                    /* a proporção do SIGO de letras escuras (360 × 80): a fileira dos logos — e o nome do sistema — acompanha o arquivo do tema */
  --lt-pe-rgb:233,238,246;                               /* o CLARO do <meta theme-color> do claro (#e9eef6) e o fundo da composição de uma coluna */
  --lt-pe-foto-rgb:233,238,246;                          /* o PÉ de duas colunas no claro: o MESMO claro do celular (#e9eef6, o --lt-pe-rgb) — Alan, 05/11/2026: «na versão Clara eu gostaria que você deixasse a mesma cor no desktop… mesma cor que você usa no rodapé na versão Clara do mobile» (de 04/11 22:34 até aqui era o cinza do asfalto da foto de dia, #6a696b) */
  --lt-sombra-rgb:233,238,246;                           /* no celular, a sombra de leitura sob o cabeçalho vira um véu claro */
  --lt-foco:#333b47;--lt-foco-anel:rgba(51,59,71,.18);--lt-foco-linha:#333b47;   /* o foco: um cinza escuro e neutro (11,3:1 contra o branco do campo) */
  --lt-balao-fundo:#1d2229;--lt-balao-texto:#eceff3;     /* o balão da casa no tema claro: o escuro do sistema */
  --lt-balao-sombra:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  --lt-painel-fundo:rgba(248,250,253,.72);--lt-painel-opaco:rgba(246,248,252,.96);   /* o vidro CLARO: branco translúcido sobre o desfoque (quase opaco sem backdrop-filter) */
  --lt-painel-borda:rgba(92,112,140,.24);--lt-painel-sombra:0 1.5rem 3.5rem rgba(22,34,56,.16);
  color:var(--lt-tinta);
}
html:not(.dark) .lt-foto{background-image:url('/img/login/sigo-login-dia.webp?v=2')}

html:not(.dark) .lt-logo-escuro{display:none}
html:not(.dark) .lt-logo-claro{display:block}
html:not(.dark) .lt-sep{background:rgba(29,34,41,.3)}
html:not(.dark) .lt-sub{color:#2b3544;text-shadow:0 1px 8px rgba(255,255,255,.55)}

html:not(.dark) .lt-titulo{color:var(--lt-tinta)}
html:not(.dark) .lt-lead{color:var(--lt-apoio)}
html:not(.dark) .lt-ajuda{color:var(--lt-tinta)}
html:not(.dark) .lt-form label{color:var(--lt-tinta)}
html:not(.dark) .lt-form input{border-color:var(--lt-borda);background:#fff;color:var(--lt-tinta)}
html:not(.dark) .lt-form input::placeholder{color:#5f6b7c}
html:not(.dark) .lt-form input:hover{border-color:#4a5565}
html:not(.dark) .lt-form input:focus-visible{border-color:var(--lt-foco);background:#fff;box-shadow:0 0 0 3px var(--lt-foco-anel)}   /* o foco do campo claro: a borda e o anel em cinza escuro (as variáveis) — explícito aqui porque a regra do campo claro, acima, é mais específica que a de foco do base e senão a esconderia */
html:not(.dark) .lt-form input[aria-invalid="true"]{border-color:#c4001a}
html:not(.dark) .lt-olho{color:#4a5565}
html:not(.dark) .lt-olho:hover{background:rgba(29,34,41,.08);color:var(--lt-tinta)}
html:not(.dark) .lt-link,html:not(.dark) .lt-link:hover{color:var(--lt-tinta)}
html:not(.dark) .lt-info{border-color:#8d99ab;background:rgba(255,255,255,.88);color:var(--lt-tinta)}
html:not(.dark) .lt-erro{border-color:#e3a0a9;background:rgba(253,236,238,.96);color:#9c1424}
html:not(.dark) .lt-entrar{box-shadow:0 .35rem .9rem rgba(30,16,22,.26)}
@media (hover:hover){html:not(.dark) .lt-entrar:hover:not(:disabled){box-shadow:0 .6rem 1.3rem rgba(30,16,22,.3)}}   /* a sombra do «Entrar» ao passar o mouse, no tom da sombra do claro */
html:not(.dark) .lt-entrar:focus-visible{outline-color:var(--lt-tinta)}

html:not(.dark) .lt-tema{border-color:var(--lt-borda);background:#fff;color:var(--lt-tinta);box-shadow:0 0 0 1px rgba(255,255,255,.7)}
html:not(.dark) .lt-tema:hover{border-color:#4a5565;background:#f3f6fb}
html:not(.dark) .lt-tema .lt-ic-sol{display:none}
html:not(.dark) .lt-tema .lt-ic-lua{display:block}

/* as peças da entrada oficial no claro: o painel do acesso de teste segue o vidro claro (as variáveis), os textos em tinta, a lista e o botão brancos de borda firme, como os campos */
html:not(.dark) .lt-teste-cab .lt-ic{color:#4a5565}
html:not(.dark) .lt-teste-titulo{color:var(--lt-tinta)}
html:not(.dark) .lt-teste-texto{color:var(--lt-apoio)}
html:not(.dark) .lt-teste-selo{border-color:var(--lt-borda);color:#9c1424}
html:not(.dark) .lt-teste .cs-btn{border-color:var(--lt-borda);background:#fff;color:var(--lt-tinta)}
html:not(.dark) .lt-teste .cs-btn:hover{border-color:#4a5565;background:#fff}
html:not(.dark) .lt-teste .cs-btn.cs-vazia span{color:#5f6b7c}
html:not(.dark) .lt-teste-entrar{border-color:var(--lt-borda);background:#fff;color:var(--lt-tinta)}
html:not(.dark) .lt-teste-entrar:hover:not(:disabled){border-color:#4a5565;background:#f3f6fb}

/* o rodapé do claro: tinta sobre o pé claro liso, nas DUAS composições (Alan, 05/11/2026: o pé de duas colunas do claro voltou ao mesmo claro do celular — o texto claro com sombra, que existia para o asfalto cinza, saiu) */
html:not(.dark) .lt-rodape{color:#3d4756;text-shadow:none}
html:not(.dark) .lt-legal{color:#4a5565}

/* A TROCA DE TEMA (Alan, 04/11/2026: «uma transição legal pra quando alternar entre os temas»; 05/11/2026, ~08:00: dentro do sistema, «o mesmo tipo de transição/animação que você colocou na tela de login»): o ESMAECER — a View Transitions API guarda a tela
   de antes, aplica o tema novo e o JS anima SÓ a opacidade da tela NOVA, de 0 a 1 em 400 ms, por cima da de antes (que fica inteira por baixo); nada se move nem cresce. Na ENTRADA OFICIAL é a mesma troca do sistema (o app.js): o style.css desliga a
   animação padrão da API pela classe «tema-troca» e as transições pela «tema-instantaneo». As duas regras daqui, com a classe «lt-troca», são da PÁGINA DE TESTE (o JS dela põe a classe no <html> antes de a troca começar e a tira depois dela):
   desligam as transições dos campos e dos botões (senão o fundo branco do campo «derreteria» no quadro que a API captura) e a animação padrão da API, e misturam sem modo */
html.lt-troca .lt *{transition:none}
html.lt-troca::view-transition-old(root),html.lt-troca::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* SEM BLOQUEIO DE «MENOS MOVIMENTO» NO CSS (05/11/2026): a regra da casa do sistema — os Windows daqui têm a animação desligada, e o pedido é VER o movimento. O bloco que zerava transições e animações com essa preferência saiu: com ele o
   «Entrar» saltava seco no Windows do Alan e o carregando do botão nem girava. A troca de tema é o esmaecer, sempre (o JS) */