/* ============================================================
   BASE — a PALETA e o casco, para as SETE telas.

   🔴 POR QUE EXISTEM DOIS ARQUIVOS DE CSS, e por que ninguem deve junta-los:

     base.css     o que TODA tela usa: as cores com significado e o casco
                  (reset + body). Muda aqui, muda em todas.
     quadro.css   so' o QUADRO (index.html). Ele e' a unica tela com REGRA DE
                  NEGOCIO dentro — card, curador, cotacao, movimentos, os
                  modais. As outras seis sao administracao e leitura: cadastro,
                  regras, painel, relatorios, login, troca de senha.

   Juntar os dois devolveria o arquivo de 3.414 linhas onde estilo e logica
   dividiam o mesmo endereco — e foi ali que um teste de OUTRO tijolo quebrou
   por uma funcao ter entrado antes de um trecho. Separar reduz a superficie de
   colisao: mexer em cor deixa de poder quebrar assercao de comportamento.

   ⚠️ A PALETA MORA AQUI, UMA VEZ SO', e isto foi MEDIDO antes de decidir: as
   sete telas declaravam o mesmo `:root` sete vezes, com valores IDENTICOS em
   todo token compartilhado. Era um gemeo de sete copias esperando divergir — e
   o tema claro/escuro, que e' o proximo tijolo, teria de manter as sete em
   sincronia. Agora ele mexe num arquivo.

   ⚠️ AS CORES TEM SIGNIFICADO, e nao sao decoracao:
     --verde     no prazo
     --amarelo   atencao / fica de olho
     --vermelho  atrasado / grave
   Elas alimentam o COR do quadro (`COR[c.situacao]`), a faixa do card e a linha
   da lista. Trocar por gosto muda o que a pessoa LE, nao como a tela parece.
   ============================================================ */

:root {
  --verde: #2e9e5b;
  --amarelo: #e8a33d;
  --vermelho: #dc2626;
  --bg: #f4f5f7;
  --col-bg: #ebecf0;
  --card-bg: #ffffff;
  --tinta: #172b4d;
  --tinta-fraca: #6b778c;
  --borda: #dfe1e6;
  /* 🔴 `--acento` SOBE PARA CA' EM 01/09/2026, e ele NAO e' cor nova: ja' existia
     no `login.html` (o botao de entrar, a borda do campo em foco) com este valor
     exato. O que muda e' o LUGAR — ele passa a viver com os outros tokens
     compartilhados, em vez de so' na tela que o estreou.

     ⚠️ E POR QUE AZUL PODE, num app em que cor tem significado: as cores do quadro
     sao a REGUA DO PRAZO (`COR[situacao]`: verde, amarelo, vermelho) e a gravidade
     do chip de medida. Azul nao esta em nenhuma das duas escalas — usa-lo para
     "clique aqui" nao rouba sentido de ninguem. Usar verde ou amarelo, sim. */
  --acento: #0c66e4;
}

/* O CASCO. Identico em seis das sete telas (medido) — o login e' a excecao, por
   ser cartao centrado, e sobrescreve o `body` no proprio <style>. Por isso o
   <link> vem SEMPRE antes do <style> em cada tela: o especifico ganha do comum,
   que e' como cascata deve funcionar. */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--tinta);
}

/* ============================================================
   A BARRA LATERAL (21/08). Mora AQUI, e nao num terceiro arquivo, porque ela e'
   exatamente o que o cabecalho deste arquivo define como "base": o que TODA
   tela usa. Um `barra.css` seria uma rota a mais, uma linha a mais no
   inventario e um <link> a mais em cada tela, para servir 40 linhas.

   ⚠️ O DESLOCAMENTO VAI EM `body.com-barra`, NUNCA no `body` cru. O login
   carrega este arquivo e NAO tem barra: e' cartao centrado, e um `padding-left`
   no body comum tiraria o cartao do centro da tela de entrada. A classe e' o
   interruptor, e quem a poe e' a tela que de fato tem a barra.

   ⚠️ z-index 40, ABAIXO do 50 do `.modal-overlay` (quadro.css). Modal e' modal:
   quando um abre, ele cobre a barra tambem. Inverter isso deixaria a navegacao
   clicavel por cima de um dialogo aberto.
   ============================================================ */
/* BACKLOG (aceite visual de 21/08, para decidir no bloco 5): com a barra ocupando
   200px, o Quadro passou a precisar de rolagem horizontal e a ultima coluna fica
   cortada. As duas saidas sao a barra RECOLHER ou as colunas ESTREITAREM (hoje
   260px, em quadro.css). Nao construido: e' decisao de leitura, nao de codigo. */
:root { --barra-larg: 200px; }

body.com-barra { padding-left: var(--barra-larg); }

.barra {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--barra-larg);
  height: 100vh;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  background: var(--card-bg);
  border-right: 1px solid var(--borda);
  overflow-y: auto;
}
.barra-marca {
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  padding: 2px 8px 12px;
}
.barra-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.barra-item {
  display: block;
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
}
.barra-item:hover { background: var(--col-bg); }
/* ONDE A PESSOA ESTA'. Marcado, nunca sumido — a barra nao muda de tamanho
   entre telas. Peso e fundo, sem cor nova: as tres cores deste arquivo tem
   significado de PRAZO (ver o cabecalho) e usar uma delas para dizer "voce esta
   aqui" faria a navegacao falar a lingua do alarme. */
.barra-item.atual { background: var(--col-bg); font-weight: 700; }
/* O rodape empurrado para baixo: `margin-top:auto` num flex column. Sem altura
   fixa — o interruptor de tema entra aqui depois sem mexer em nada. */
.barra-rodape {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.barra-eu { font-size: 12px; color: var(--tinta-fraca); padding: 2px 8px 8px; line-height: 1.5; }
.barra-eu strong { display: block; color: var(--tinta); font-weight: 600; }
.barra-eu-papel { display: block; }
.barra-sair { color: var(--tinta-fraca); }

/* ============================================================
   O SELO DO FORNECEDOR — Tijolo A, fase A3 (17/09/2026).

   🔴 RÓTULO, NÃO MENSAGEM (§2 da spec). Ele não interrompe, não tem botão e não
   aparece e some: é como o nome do fornecedor sempre aparece. Por isso o peso
   visual é BAIXO por padrão — quem não liga, não lê — e só o ⚠️ destaca.

   ⚠️ O ❔ É NEUTRO, NUNCA APAGADO. Cinza claro demais o faria sumir, e selo que
   some é o "não sei" virando "sim" por omissão — a armadilha 1 pela porta do CSS.
   ============================================================ */
.selo-forn { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: baseline; }
.selo-forn-eixo { font-size: 0.82em; line-height: 1; cursor: help; user-select: none; }
/* 24/09/2026: resposta do registro (SRM) vinda do cache alem da validade — o
   titulo diz "possivelmente desatualizado"; o tracejado avisa sem trocar a cor,
   que neste app significa estado, nao idade da informacao. */
.selo-desatualizado { opacity: 0.6; text-decoration: underline dotted; }
.selo-sim { opacity: 0.75; }                 /* discreto: confere e sai da frente */
.selo-vencida { opacity: 1; }                /* destacado: o prazo passou, e a data vai no title */
.selo-nao { opacity: 1; }                    /* destacado: é o que muda a decisão */
.selo-naosei { opacity: 0.6; filter: grayscale(0.35); } /* neutro, e ainda legível */
.nome-forn { display: inline; }
/* `.nome-forn` carrega o prefixo + o nome no proprio texto (ver nomeComSelo). */
.selo-forn-campo { display: inline-flex; align-items: center; margin-left: 4px; }

/* ⚠️ MORA NO base.css, E NAO NO quadro.css, POR MEDIDA: o `quadro.css` e'
   carregado SO' pelo index.html, e o selo aparece tambem no medidas.html (o
   ranking de concentracao). Posto no quadro.css, o selo do relatorio da Direcao
   sairia sem estilo nenhum — visivel, torto, e ninguem olhando. E' a armadilha 2
   da spec pela porta do CSS: quatro dos cinco lugares. */

/* ============================================================
   O OLHO DA SENHA — 22/09/2026. Mora AQUI, e nao no <style> de cada tela, pelo
   mesmo motivo do selo do fornecedor logo acima: o comportamento e' UM
   (olho-senha.js, servido em /olho-senha.js) e ele aparece em TRES telas —
   login.html, configuracoes.html e admin.html. Estilo escrito em uma delas
   deixaria as outras duas com o botao sem forma: visivel, torto, e ninguem
   olhando, porque a tela de login so' se ve quando se esta' de fora.
   ============================================================ */
.olho-caixa {
  position: relative;
  display: block;
}
/* O campo dentro da caixa continua ocupando a largura toda; o padding da
   direita e' o que abre espaco para o botao sem empurrar o texto digitado por
   baixo dele. */
.olho-caixa > input {
  width: 100%;
  padding-right: 34px;
}
.olho-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--tinta-fraca);
  cursor: pointer;
  border-radius: 4px;
}
.olho-btn:hover { color: var(--tinta); background: rgba(0, 0, 0, 0.05); }
/* O foco continua VISIVEL mesmo com o botao fora da ordem de tabulacao
   (tabindex="-1"): quem chega nele por clique ou por leitor de tela precisa ver
   onde esta'. Remover o contorno seria trocar acessibilidade por estetica. */
.olho-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }