@charset "UTF-8";
/* ==========================================================================
   sgm-login.css — estilo da tela de entrada

   Estava num <style> no <head> do login.html. Saiu de lá porque o markup
   passou a viver dentro do Pascal (html\uHtmlLogin.pas) e o gerador corta
   tudo antes do <body> — o CSS ia junto com o lixo e a tela subia crua.

   Carregado pelo ServerModule, como as demais folhas.
   ========================================================================== */
/* ==========================================================================
   Tela de entrada — segue o modelo da Plataforma Fiorilli
   --------------------------------------------------------------------------
   Formulário à esquerda, faixa de marca à direita. No tablet a faixa vira
   uma tarja no topo; no telefone ela sai de cena, porque quem abre pelo
   celular quer o campo de senha, não a apresentação.
   ========================================================================== */

body { min-height: 100vh; min-height: 100dvh; background: #f4f5f6; }

/* --------------------------------------------------------------------------
   Moldura do uniGUI

   O TUniHTMLFrame é desenhado dentro de um painel do ExtJS, que traz borda,
   fundo e um respiro do tema. Numa tela que desenha a própria moldura — duas
   faixas de ponta a ponta — isso aparece como um risco escuro na borda.

   O escopo é a classe que TfLogin.UniFormShow põe no <body>: assim as demais
   telas continuam com o painel padrão do uniGUI.
   -------------------------------------------------------------------------- */

/* O TUniLoginForm é um x-window, não um x-panel. Conferido no DevTools:

     .x-window-default {
       padding: 4px 4px 4px 4px;      ← a moldura que se via
       border-width: 1px;
       border-style: solid;
       background-color: #ced9e7;
     }

   São os 4px de padding deixando o fundo #ced9e7 aparecer em volta.

   ⚠️ SÓ ESTAS PROPRIEDADES. Uma primeira tentativa acrescentou
   height/width: 100% !important nos elementos internos e overrides nos
   .x-panel — o ExtJS calcula esses tamanhos em px por JavaScript, e forçar
   percentual por cima deixou a tela EM BRANCO. O que resolve a borda é só o
   que está aqui.

   O :has(.login) mira apenas a janela que contém a tela de entrada, então um
   diálogo futuro mantém a moldura do tema. O seletor pela classe no <body> é
   o caminho alternativo, para navegador sem :has().

   ⚠️ ESTE CSS SOZINHO NÃO RESOLVE — e foi o que deixou a borda cinza que
   sobrou por três rodadas. O ExtJS mede a janela NO RENDER e grava o tamanho
   interno inline em px (style="width:1270px" num viewport de 1280). Nessa
   hora o .login ainda não existe no DOM: ele chega depois, pelo
   hLogin.HTML.Text. Ou seja, quando este seletor passa a casar, a conta já
   foi feita com os 5px de moldura — e os 10px que o CSS libera viram faixa
   morta à direita e embaixo, mostrando o #f4f5f6 do <body>.

   Quem fecha o buraco é o par no Delphi, e mexer aqui sem ele não adianta:

     uLogin.pas  → AddJS de updateLayout() dentro de SGM.aoExistir('.login')
     uLogin.dfm  → hLogin.LayoutConfig.Height = '100%'  (a Width já existia;
                   sem a Height o frame ficava 11px mais baixo que a janela)

   Medido no navegador: corpo da janela 1270x710 antes, 1280x720 depois, e os
   oito pontos de borda caindo em .login__area / .login__marca. */

.x-window-default:has(.login),
body.sgm-tela-login .x-window-default {
  padding: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  background-color: transparent !important;
}

.login {
  display: grid;
  grid-template-columns: 58fr 42fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --------------------------------------------------------------------------
   Lado do formulário
   -------------------------------------------------------------------------- */

.login__area {
  display: grid;
  place-items: center;
  padding: var(--sgm-8) var(--sgm-6);
  background: #f4f5f6;
}

.login__form { width: 100%; max-width: 375px; }

.login__id { text-align: center; margin-bottom: var(--sgm-6); }

.login__brasao {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto var(--sgm-4);
  border-radius: var(--sgm-r);
  overflow: hidden;
}

/* Com brasão a moldura some — a imagem é a identidade, não precisa de caixa
   colorida em volta. */
.login__brasao img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Sem brasão cadastrado o ícone assume, com corpo que preenche o quadrado em
   vez de boiar no meio dele. O lugar tem sempre o mesmo tamanho, então a
   troca de um pelo outro não desloca nada na tela. */
.login__brasao[data-sem-brasao] {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  color: var(--color-primary-500);
  font-size: 32px;
}

.login__entidade {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #1f2a33;
  text-transform: uppercase;
  line-height: 1.3;
}

.login__acesse {
  margin-top: 5px;
  font-size: var(--sgm-t-base);
  color: #64737f;
}

/* O alternador Usuário/CPF (.login__abas/.login__aba) saiu em 2026-08-06:
   o campo passou a ser único e quem decide se veio login ou CPF é
   TSgmAuth.Autenticar. O "OU" (.login__ou) saiu junto com o botão de
   certificado, que era do template e não tem fluxo no SGM. */

/* ---- entidade (só em instalação SIAFIC) ---- */

.login__entidades { margin-bottom: var(--sgm-4); }

/* [hidden] perde para display:block de qualquer regra posterior; com o
   atributo sendo a única coisa que separa o bloco de aparecer numa
   instalação comum, vale garantir. */
.login__entidades[hidden] { display: none; }

/* ---- campos ---- */

.login__campos { display: flex; flex-direction: column; gap: var(--sgm-3); }

/* O .sgm-dialog entra junto porque os diálogos do termo e da troca de senha
   ficam FORA de <main class="login"> — se ficassem dentro, virariam item da
   grade de duas colunas. Os campos da troca de senha têm de ter o mesmo
   corpo dos da entrada: é a mesma tela, em dois momentos. */
.login .sgm-input,
.sgm-dialog .sgm-input {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: var(--sgm-r-sm);
  background: #fff;
}

/* A borda cinza vale só FORA do foco — e o :not(:focus) não é preciosismo.
   Sem ele esta regra e a `.sgm-input:focus` do sgm-base.css empatam em
   especificidade (0,2,0), e o desempate é a ordem dos arquivos: esta folha
   carrega depois, então o cinza vencia TAMBÉM no campo focado. Com o
   `outline: none` que a regra de foco traz, o campo focado ficava idêntico
   ao não focado: o Tab andava e não se via nada acontecer. */
.login .sgm-input:not(:focus),
.sgm-dialog .sgm-input:not(:focus) { border-color: #dfe3e7; }
.login .sgm-input::placeholder,
.sgm-dialog .sgm-input::placeholder { color: var(--color-on-surface-variant); }

.login__senha { position: relative; }
.login__senha .sgm-input { padding-right: 44px; }

.login__olho {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--color-on-surface-variant);
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--sgm-fast) var(--sgm-ease),
              background-color var(--sgm-fast) var(--sgm-ease);
}
.login__olho:hover { color: var(--color-primary-500); background: var(--color-primary-50); }

.login__esqueci {
  align-self: flex-end;
  font-size: var(--sgm-t-base);
  color: #4a5964;
}
.login__esqueci:hover { color: var(--color-primary-500); }

.login__erro {
  display: none;
  align-items: flex-start;
  gap: var(--sgm-2);
  padding: 10px 12px;
  border: 1px solid var(--color-error-outline);
  background: var(--color-error-container);
  border-radius: var(--sgm-r-sm);
  color: #8c1c14;
  font-size: var(--sgm-t-sm);
}
.login__erro[data-visivel="true"] { display: flex; }
.login__erro i { margin-top: 2px; }
/* o aviso do Assinador traz links e uma lista de passos */
.login__erro a { color: inherit; font-weight: 600; text-decoration: underline; }
.login__erro ol { margin: 6px 0; padding-left: 18px; }
.login__erro li + li { margin-top: 3px; }

/* ---- botões ---- */

.login .sgm-btn--primary {
  min-height: 46px;
  border-radius: var(--sgm-r-sm);
  background: #0a5551;
  border-color: #0a5551;
  font-size: var(--sgm-t-base);
  font-weight: 600;
  box-shadow: none;
}
.login .sgm-btn--primary:hover:not(:disabled) {
  background: #084440;
  border-color: #084440;
  transform: none;
  box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 8px 20px rgba(16, 24, 40, .12);
}

/* --------------------------------------------------------------------------
   Diálogos da entrada — termo de responsabilidade e troca de senha

   A caixa, o fundo, o cabeçalho e o pé vêm do componente .sgm-dialog
   (sgm-components.css), o mesmo da ajuda dos quadros. Aqui ficam só as
   três diferenças desta tela.
   -------------------------------------------------------------------------- */

/* O pé é justify-content: flex-end. A caixa de aceite precisa ficar do outro
   lado, longe dos botões: marcar por engano ao mirar em "Não aceito" seria
   fácil demais com eles encostados. */
.login__aceite { margin-right: auto; }

/* Local/data, nome e documento fecham o termo, como no legado — separados do
   texto e sem o recuo dos parágrafos. */
.login__assina {
  margin-top: var(--sgm-4);
  margin-bottom: 0;
  color: var(--color-on-surface);
  font-weight: 600;
}
.login__assina + .login__assina { margin-top: 2px; font-weight: 400; }

/* Botão desabilitado precisa PARECER desabilitado: o Aceito nasce assim e só
   libera com a caixa marcada, e sem isto o usuário clica sem entender. */
.sgm-dialog .sgm-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* No telefone o pé com caixa de aceite + dois botões não cabe em uma linha. */
@media (max-width: 560px) {
  .sgm-dialog__pe { flex-wrap: wrap; }
  .login__aceite { margin-right: 0; width: 100%; }
}

/* ---- rodapé ---- */

.login__rodape {
  margin-top: var(--sgm-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: var(--sgm-t-sm);
  color: var(--color-on-surface-variant);
}
.login__rodape i { color: var(--color-primary-500); font-size: 12px; }
.login__rodape strong { color: #4a5964; font-weight: 700; }

/* --------------------------------------------------------------------------
   Lado da marca
   -------------------------------------------------------------------------- */

.login__marca {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sgm-8);
  padding: var(--sgm-10) var(--sgm-10) var(--sgm-12);
  background: linear-gradient(158deg, #0c4f4b 0%, #0d5f58 42%, #0f776a 100%);
  color: #fff;
  overflow: hidden;
}

/* malha de pontos: profundidade sem arquivo externo — prefeitura sem
   internet abre a tela exatamente igual */
.login__marca::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(80% 70% at 60% 30%, #000 25%, transparent 100%);
  pointer-events: none;
}

.login__marca > * { position: relative; z-index: 1; }

.login__plataforma { display: flex; align-items: center; gap: var(--sgm-3); }

.login__plataforma-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--sgm-r-sm);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .20);
  font-size: 15px;
}

.login__plataforma-nome {
  font-size: var(--sgm-t-md);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.login__plataforma-sub {
  font-size: var(--sgm-t-sm);
  color: rgba(255, 255, 255, .72);
  margin-top: 1px;
}

.login__bemvindo {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .88);
  line-height: 1.25;
}

.login__sistema {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin-bottom: var(--sgm-4);
}

.login__texto {
  font-size: var(--sgm-t-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, .80);
  max-width: 42ch;
}

.login__pontos {
  display: flex;
  flex-direction: column;
  gap: var(--sgm-3);
}

.login__ponto {
  display: flex;
  align-items: center;
  gap: var(--sgm-3);
  font-size: var(--sgm-t-base);
  color: rgba(255, 255, 255, .90);
}

.login__ponto-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 10px;
}

/* --------------------------------------------------------------------------
   Adaptação
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .login {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  /* a marca vai para o topo e encolhe para uma tarja */
  .login__marca {
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sgm-5);
    padding: var(--sgm-5) var(--sgm-6);
  }
  .login__area { grid-row: 2; align-items: start; padding-top: var(--sgm-8); }

  .login__bemvindo { font-size: 1rem; }
  .login__sistema  { font-size: 1.3rem; margin-bottom: 0; }
  .login__texto,
  .login__pontos   { display: none; }
}

@media (max-width: 767px) {
  .login__marca { padding: var(--sgm-4); }
  .login__plataforma-sub { display: none; }
  .login__bemvindo { display: none; }
  .login__sistema { font-size: 1.1rem; }

  .login__area { padding: var(--sgm-6) var(--sgm-4); }
  .login__form { max-width: none; }
  .login__brasao { width: 54px; height: 54px; }
  .login__entidade { font-size: .9375rem; }
}

/* ---- entrar sem senha: e-CPF e Google (core\uSgmLoginExterno.pas) ----
   O bloco e os dois botões nascem com [hidden]; a classe do botão define
   display, então o [hidden] precisa ser reforçado aqui. */
.login__externo { display: flex; flex-direction: column; gap: var(--sgm-2); }
.login__externo[hidden],
.login__ext[hidden] { display: none; }
.login__ou {
  display: flex;
  align-items: center;
  gap: var(--sgm-2);
  font-size: var(--sgm-t-sm, 12px);
  /* o cinza do .login__acesse: 4,89:1 sobre o branco. O #6b7a86 de antes
     dava 4,42:1, abaixo dos 4,5 da WCAG (confere-contraste). */
  color: #64737f;
}
.login__ou::before,
.login__ou::after { content: ""; flex: 1; height: 1px; background: #dfe5ea; }
.login__ext {
  gap: var(--sgm-2);
  border: 1px solid #d5dde3;
  background: #fff;
  color: #1d2b36;
  font-weight: 500;
}
.login__ext:hover { border-color: var(--color-primary-500); background: var(--color-primary-50); }
.login__ext svg { width: 16px; height: 16px; flex: none; }