/* Rawline 600 — a fonte do Design System de Governo.
   Servida pelo proprio portal, e nao pelo CDN do Serpro, pelo mesmo motivo que
   levou a marca a ser embutida em data URI: a tela de LOGIN nao pode depender
   de um host de terceiro para se desenhar certa. Se o CDN estiver fora, o botao
   normativo apareceria com a fonte errada — e a homologacao do ITI e aprovada
   por video do fluxo de login.
   So o peso 600 (semi-bold), que e o unico que o componente usa: a familia
   inteira sao 18 arquivos, e 17 deles nunca seriam pedidos.
   Fonte: https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/ */
@font-face {
  font-family: 'rawline';
  src: url('../fonts/rawline-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;   /* o botao aparece na hora, com a fonte de fallback, e troca ao carregar */
}

/* ============================================================================
   govbr-signin.css — botao "Entrar com gov.br" (Login Unico / acesso.gov.br)

   POR QUE ESTE ARQUIVO EXISTE SEPARADO DO KIT AURORA:
   o botao do gov.br NAO e um botao do nosso design system. O roteiro tecnico
   (https://acesso.gov.br/roteiro-tecnico/iniciarintegracao.html) manda seguir o
   Design System de Governo, e a aprovacao da integracao e feita por VIDEO — um
   botao "quase igual" reprova a homologacao. Entao ele fica isolado aqui, com
   as classes e os valores oficiais, para ninguem "harmonizar" com o resto do
   portal por engano.

   Fonte dos valores: @govbr-ds/core v3 (dist/components/signin/signin.css e
   dist/components/signin/examples/signin-tipo2-image.html). O que esta abaixo
   e a transcricao literal do componente `.br-sign-in` no tipo "Externo 2"
   (texto + marca em imagem), densidade "large" e modificador "block".

   Carregar DEPOIS de aurora-login.css.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. O BLOCO NO CARTAO DE ACESSO
   O gov.br fica ACIMA do CPF/senha porque e o caminho preferencial; o separador
   deixa explicito que o acesso por CPF continua valendo (ver comentario em
   auth.js: se o gov.br cair, a unidade de saude nao pode parar de atender).
   --------------------------------------------------------------------------- */
.lg-govbr{ margin-bottom:2px }

.lg-govbr-hint{
  margin:10px 2px 0; text-align:center;
  font-size:11.5px; line-height:1.5; color:var(--ink-soft);
}

.lg-govbr-sep{
  display:flex; align-items:center; gap:8px; margin:18px 0 20px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.lg-govbr-sep::before,
.lg-govbr-sep::after{ content:''; flex:1 1 auto; height:1px; background:var(--line) }

/* ---------------------------------------------------------------------------
   2. O BOTAO OFICIAL — .br-sign-in
   Nome de classe do proprio Design System de Governo, de proposito: quem for
   auditar a integracao reconhece o componente sem precisar traduzir nada.
   --------------------------------------------------------------------------- */
.br-sign-in{
  /* Medidas do DS. --button-large = 48px; escolhida a densidade baixa porque a
     tela e usada em balcao/tablet de unidade de saude, onde alvo pequeno erra. */
  --br-signin-size:48px;
  --br-signin-img:20px;          /* --sign-in-img do DS */

  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:var(--br-signin-size);
  padding:0 16px;                /* --spacing-scale-2x */
  border:0;
  border-radius:100em;           /* --button-radius */
  overflow:hidden;
  cursor:pointer;
  white-space:nowrap; text-align:center; vertical-align:middle;
  /* Rawline primeiro (normativa do DS), Poppins do portal como rede de
     seguranca: se o woff2 nao carregar, cai numa sans-serif desenhada, e nao
     na serifa generica do navegador. */
  font-family:'rawline', 'Poppins', system-ui, sans-serif;
  font-size:16.8px;              /* --font-size-scale-up-01 */
  font-weight:600;               /* --font-weight-semi-bold */
  line-height:1;

  /* CORES OBRIGATORIAS DA MARCA GOV.BR — nao trocar por tokens do portal.
     Sao os tokens do Design System de Governo, e o botao e conferido no video
     de homologacao:
       #f8f8f8 = --gray-2                (fundo do sign-in de enfase secundaria)
       #1351b4 = --blue-warm-vivid-70    (--interactive-light, cor do texto)  */
  background-color:#f8f8f8;
  color:#1351b4;

  transition:background-image .15s ease;
}

/* modificador oficial "block" */
.br-sign-in.block{ width:100% }

/* A MARCA. max-height e a regra do DS (`.br-sign-in img{max-height:var(--sign-in-img)}`). */
.br-sign-in img{
  display:block; width:auto; max-height:var(--br-signin-img);
  margin-left:2px;
}

/* Estados: o DS pinta um veu da propria cor interativa por cima.
   rgb(19,81,180) = #1351b4; 0.16 = --surface-opacity-xs; 0.45 = --surface-opacity-md. */
.br-sign-in:not(:disabled):hover{
  background-image:linear-gradient(rgba(19,81,180,.16), rgba(19,81,180,.16));
}
.br-sign-in:not(:disabled):active{
  background-image:linear-gradient(rgba(19,81,180,.45), rgba(19,81,180,.45));
}
.br-sign-in:disabled{ cursor:not-allowed; opacity:.6 }

/* Foco do DS: tracejado dourado, 4px, deslocado 4px. #c2850c = --gold-vivid-40. */
.br-sign-in:focus{ outline:none }
.br-sign-in:focus-visible{
  outline:4px dashed #c2850c;
  outline-offset:4px;
}

/* Modo escuro do portal: o botao NAO muda. As cores sao da marca do governo,
   nao do nosso tema — a pilula clara continua sendo o padrao aprovado, e ela
   ja tem contraste de sobra sobre o vidro escuro. */

/* ---------------------------------------------------------------------------
   3. A MARCA gov.br
   Os BYTES da marca nao estao aqui: estao em auth.js, como data URI no `src` do
   <img> (constante GOVBR_MARCA_DATA_URI). Motivo: e um ativo, nao um estilo, e
   `src` e a unica forma de o <img> continuar valido e acessivel (alt="gov.br")
   caso este CSS nao carregue. O arquivo e o oficial, byte a byte:
   https://www.gov.br/++theme++padrao_govbr/img/govbr-colorido-b.png (376x136,
   fundo transparente). Vai embutido, e nao por URL, porque a tela de login nao
   pode depender de um host de terceiro para desenhar o botao certo.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   4. BLINDAGEM CONTRA REGRAS GLOBAIS DE <button>
   02-base.css encolhe TODO <button> no modo acessibilidade
   (`body.accessibility-mode button{min-height:40px;font-size:.9rem}`) e ganha
   de `.br-sign-in` por especificidade, nao por ordem de carga. As medidas deste
   botao sao normativas: quem manda nelas e o Design System de Governo, nao a
   preferencia de acessibilidade do portal — e ele ja nasce com 48px de altura e
   16.8px de texto, acima do que aquela regra tentaria impor.
   --------------------------------------------------------------------------- */
body.accessibility-mode .br-sign-in{
  min-height:var(--br-signin-size);
  height:var(--br-signin-size);
  font-size:16.8px;
}


/* ---------------------------------------------------------------------------
   ESTADO "EM BREVE" (26/08/2026)
   O botao passou a aparecer antes de a credencial do orgao sair. Ele nao pode
   parecer clicavel-e-quebrado nem sumir: fica visivelmente em espera, com selo,
   e o clique explica o porque. Nao uso [disabled] de proposito — botao
   desabilitado nao recebe clique e a pessoa fica sem saber por que nao entra.
   --------------------------------------------------------------------------- */
.lg-govbr-espera{ position:relative; }
.lg-govbr-espera .br-sign-in{
  opacity:.55;
  filter:grayscale(1);
  cursor:not-allowed;
}
.lg-govbr-espera .br-sign-in:hover,
.lg-govbr-espera .br-sign-in:focus{ opacity:.7; }
.lg-govbr-selo{
  position:absolute; top:-9px; right:8px;
  padding:2px 9px; border-radius:999px;
  background:#1351b4; color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 1px 4px rgba(0,0,0,.22);
}
.lg-govbr-espera .lg-govbr-hint{ font-style:italic; }