/* ===========================================================================
   Estilo comum do PAINEL e das páginas institucionais.
   ===========================================================================
   A página de resgate (`/s/`) NÃO usa este arquivo, e isso é decisão, não
   descuido: ela carrega o CSS inteiro embutido no HTML, porque uma folha
   externa é mais uma ida à rede antes do primeiro pixel, num caminho que tem
   de abrir em menos de um segundo com sinal ruim. Aqui a pessoa está sentada,
   logada, sem pressa — o custo de uma requisição extra vale a manutenção.

   Estrutura copiada do `cinerea-site/comum.css`.

   ---------------------------------------------------------------------------
   O ACENTO DAQUI É AQUA, E NÃO O VERMELHO DA PÁGINA DE RESGATE
   ---------------------------------------------------------------------------
   Este arquivo nasceu antes de a marca existir, com `--acento:#B91C1C` e um
   comentário dizendo "aqui é emergência, e a cor tem de dizer aja". Estava
   errado por dois motivos, e o erro só apareceu ao abrir o painel do lado da
   página inicial:

   1. **O painel não é emergência.** Quem está aqui está sentado, logado, sem
      pressa, cadastrando o remédio da mãe. Pintar isso de vermelho de socorro
      é pedir urgência de quem não está com pressa nenhuma.
   2. **Gasta o vermelho.** `#B91C1C` é a cor de uma tela só, a de resgate, e
      ela funciona por ser a única. Um painel vermelho e uma ficha vermelha
      ensinam o olho que vermelho é a cor do produto — e aí a tela que precisa
      gritar não grita mais. O CLAUDE.md registra isso como decisão: nenhum
      dos três vermelhos é cor de marca.

   A marca é Água. `--acento` é um aqua mais fundo (`#0B7C77`) e não o
   `#12B0A8` do símbolo, por contraste: texto branco sobre `#12B0A8` dá 2,7:1,
   reprovado em qualquer critério de leitura. Sobre `#0B7C77` dá 5:1, nos dois
   temas — por isso o botão não muda de cor no escuro. Quem muda é `--realce`,
   que é aqua usado COMO TEXTO (link, foco, destaque) e precisa de contraste
   contra o fundo, não contra si mesmo.

   `--perigo` continua vermelho, e agora quer dizer só uma coisa: perigo.
   =========================================================================== */

:root{
  --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fundo:#FAFAFA; --painel:#FFFFFF; --texto:#171717; --fraco:#5A5A5A;
  --linha:#E2E2E2;
  --acento:#0B7C77; --realce:#0B7C77;
  --perigo:#B91C1C; --bom:#15803D;
}
@media (prefers-color-scheme: dark){
  :root{
    --fundo:#121212; --painel:#1B1B1B; --texto:#F4F4F4; --fraco:#A8A8A8;
    --linha:#2E2E2E;
    /* `--acento` não clareia: ele é fundo de botão com texto branco, e o
       contraste que importa é contra o branco, que não muda com o tema.
       `--realce` clareia porque vira texto sobre fundo escuro. */
    --acento:#0B7C77; --realce:#2DD4CB;
    --perigo:#F87171; --bom:#4ADE80;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--fundo); color:var(--texto);
  font-family:var(--fonte); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--realce)}

label{
  display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fraco); margin:15px 0 6px;
}
/* Rótulo que ENVOLVE conteúdo não é rótulo de campo.
   O estilo acima existe para a etiqueta curta acima de um input; quando o
   `<label>` embrulha uma caixa de seleção com texto dentro (`.marca`,
   `.cond`), ele impunha caixa alta e 11px a frases inteiras — as instruções
   de socorro do painel apareceram TODAS EM MAIÚSCULA, que é justamente o
   texto que mais precisa ser lido com calma.
   O reset mora aqui, e não em cada tela, para não voltar no próximo `<label>`
   que alguém escrever em volta de alguma coisa. */
label.marca, label.cond{
  text-transform:none; letter-spacing:normal;
  font-size:inherit; color:inherit; margin:0;
}
input,select,textarea{
  width:100%; padding:12px 13px; border:1px solid var(--linha); border-radius:9px;
  background:var(--fundo); color:var(--texto);
  /* 16px cravado nos campos: abaixo disso o Safari do iPhone dá zoom sozinho
     ao focar, e a pessoa perde o formulário de vista no meio do cadastro. */
  font-family:inherit; font-size:16px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--realce);outline-offset:-1px;border-color:var(--realce)}
textarea{min-height:88px;resize:vertical;line-height:1.5}

.bt{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 22px;
  background:var(--acento); color:#fff; border:none; border-radius:9px;
  font-family:inherit; font-size:15.5px; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.bt:active{filter:brightness(.9)}
.bt[disabled]{opacity:.45;cursor:default}
.bt2{background:transparent;color:var(--texto);border:1px solid var(--linha);font-weight:500}
.bt2:active{background:var(--linha)}
.btfrouxo{
  background:none;border:none;color:var(--fraco);text-decoration:underline;
  cursor:pointer;font-family:inherit;font-size:14px;padding:6px 2px;
}
.btfrouxo:active{color:var(--realce)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}