/* ═══════════════ base/espresso.css — o Espresso como camada de MÓDULO ═══════════════
   Nasceu em 26/09/2026, com o RH inteiro no Espresso (pedido do Juan). É a
   camada que o CRM escreveu no topo de `modulos/comercial/comercial.css`
   (25/09/2026), agora num lugar só: a tela que quer o Espresso marca o
   `<body data-espresso>` e carrega esta folha DEPOIS de `style.css` e
   `shell/shell.css` e ANTES da folha do módulo.

   As cinco regras (`design system/CLAUDE.md`, `docs/design/intent.md` §D14):
   rótulo sans cinza em caixa normal; base monocromática com vermelho só como
   acento com significado; campo preenchido com foco neutro; filete no lugar
   de sombra; teto de peso 600 e raio pequeno.

   POR QUE UMA CAMADA, E NÃO TROCAR NA ORIGEM: o que viola as regras (botão
   pílula de 44 px, rótulo e cabeçalho em caixa alta, campo contornado com
   foco vermelho, cartão com sombra) vem de `style.css` (faixa A) e de
   `shell/shell.css`. Trocar lá repintaria as 110 telas — o mutirão que a
   cláusula 3 da adoção proíbe. A camada converte módulo a módulo.

   🔴 TUDO DENTRO DE `:where()`, com especificidade de ELEMENTO. Ela vence as
   folhas globais PELA ORDEM e perde para qualquer classe do módulo — é o
   padrão, não uma ordem. A primeira versão do CRM usava `body[...] main
   button`, que vence qualquer classe, e desmontou a lista da Caixa.

   ✅ O SGQ inteiro carrega esta camada desde 26/09/2026 (as 11 telas, com
   `test_toda_tela_do_sgq_liga_a_camada_espresso`); o `sgq.css` guarda só os
   componentes próprios dele (`dt-*`, `.sgq-cal`), já nas cinco regras.
   ⚠ A camada do CRM (`comercial.css`) ainda tem cópia própria dos mesmos
   valores e migra para cá no seu commit. Até lá, mudar um valor aqui pede
   mudar lá também. */
:where(body[data-espresso], .sh-topo[data-espresso]) { --e-alvo: 32px; }

/* 1 · rótulo: sans cinza, 12/500, caixa normal (`style.css:153` põe todo
   `label` e `th` em caixa alta — e `text-transform` herda) */
:where(body[data-espresso]) label {
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-500);
  text-transform: none; letter-spacing: normal; }
:where(body[data-espresso]) th {
  font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-500); text-transform: none; letter-spacing: normal; }

/* 5 · teto de peso 600 */
:where(body[data-espresso]) b, :where(body[data-espresso]) strong,
:where(body[data-espresso]) h1, :where(body[data-espresso]) h2,
:where(body[data-espresso]) h3, :where(body[data-espresso]) h4,
:where(body[data-espresso]) .card h3 { font-weight: 600; }

/* botões: raio pequeno, 32 px, peso 500; a ação principal é TINTA ESCURA.
   ⚠ Só no `main`, no modal e em todo `<dialog>` (que fica fora do `main`):
   o trilho e os ícones do cabeçalho têm desenho próprio da casca.
   🔴 `dialog` entrou em 07/10/2026: até ali só valia o diálogo com a classe
   `modal`, e 24 diálogos de módulo (o orçamento de reajuste do CRM, os do
   Financeiro, PCP, SGI…) ficavam no dialeto velho — botão pílula verde de
   64 px, campo contornado de 56 px. Ninguém escreve UI velha de propósito;
   ela chega por esquecer a classe. `test_ui_unificada` cobra. O `.primary` continua
   sendo o nome da ação principal — só deixou de ser verde; o verde fica
   para o que ele significa (ok). */
:where(:where(body[data-espresso]) :where(main, .modal, dialog)) button {
  font-weight: 500; font-size: var(--t-sm); letter-spacing: normal;
  min-height: var(--e-alvo); padding: 0 var(--s-3);
  border: 1px solid var(--divider); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink-800); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* `box-shadow: none` no `.primary` e no `.danger` (26/09/2026): o `style.css`
   dá a cada um uma sombra COLORIDA (verde, vermelha) com especificidade de
   classe, que a regra genérica de `button` acima não alcança — o botão saía
   escuro com um halo verde embaixo, em toda tela do Espresso. */
:where(:where(body[data-espresso]) :where(main, .modal, dialog)) button.primary {
  background: var(--ink-800); border-color: var(--ink-800); color: var(--tinta-cheia);
  box-shadow: none; }
:where(:where(body[data-espresso]) :where(main, .modal, dialog)) button.ghost { background: var(--surface); border-color: var(--divider); }
:where(:where(body[data-espresso]) :where(main, .modal, dialog)) button.danger {
  background: var(--surface); border-color: var(--red-500); color: var(--red-700);
  box-shadow: none; }
:where(:where(body[data-espresso]) :where(main, .modal, dialog)) button.big { min-height: 40px; padding: 0 var(--s-4); }
:where(:where(body[data-espresso]) :where(main, .modal, dialog)) button:not(:disabled):active {
  transform: scale(.98); box-shadow: none; filter: none; }
:where(:where(body[data-espresso]) :where(main, .modal, dialog)) button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--ink-100); border-color: var(--ink-300); }
@media (hover: hover) and (pointer: fine) {
  :where(:where(body[data-espresso]) :where(main, .modal, dialog)) button:not(:disabled):hover { transform: none; background: var(--ink-50); }
  :where(:where(body[data-espresso]) :where(main, .modal, dialog)) button.primary:not(:disabled):hover { background: var(--ink-900); }
  :where(:where(body[data-espresso]) :where(main, .modal, dialog)) button.danger:not(:disabled):hover { background: var(--red-wash); }
}

/* 3 · campo preenchido, não contornado; foco branco com anel NEUTRO. Vale
   também para o modal (ele fica fora do `main`). */
:where(body[data-espresso]) :where(main, .modal, dialog) input:where(:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"])),
:where(body[data-espresso]) :where(main, .modal, dialog) select,
:where(body[data-espresso]) :where(main, .modal, dialog) textarea {
  background: var(--ink-100); border: 1px solid transparent; border-radius: var(--r-xs);
  padding: 6px var(--s-2); font-size: var(--t-sm); color: var(--ink-800); }
:where(body[data-espresso]) :where(main, .modal, dialog) input:where(:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"])),
:where(body[data-espresso]) :where(main, .modal, dialog) select { min-height: var(--e-alvo); }
:where(body[data-espresso]) :where(main, .modal, dialog) input:focus,
:where(body[data-espresso]) :where(main, .modal, dialog) select:focus,
:where(body[data-espresso]) :where(main, .modal, dialog) textarea:focus {
  outline: none; background: var(--surface); border-color: var(--ink-300);
  box-shadow: 0 0 0 3px var(--ink-100); }

/* 3b · campo numérico nunca corta o conteúdo: o preenchimento (16 px) e a seta do
   navegador comem a largura, e um `width: 7ch` deixava «2026» como «202»
   (parâmetros legais, 14/10/2026; problema recorrente nos filtros de ano). Dentro
   de tabela a largura segue a do módulo. */
:where(body[data-espresso]) :where(main, .modal, dialog) input[type="number"]:not(:where(td, th) *) { min-width: 5.5rem; }

/* A caixa de marcar segue o tema do Liga (`body[data-theme]`), e não o do
   sistema: com o Windows escuro, o checkbox NATIVO saía preto sobre a página
   clara (achado no CRM, 25/09/2026). */
:where(body[data-espresso]:not([data-theme="dark"])) { color-scheme: light; }
:where(body[data-espresso]) input:is([type="checkbox"], [type="radio"]) { accent-color: var(--ink-900); }

/* 4 · filete define o objeto; sombra só no que flutua (menu, modal) */
:where(body[data-espresso]) main .card {
  border: 1px solid var(--divider); border-radius: var(--r-sm); box-shadow: none; }

/* 2 · abas e segmentos em CINZA (o vermelho é acento com significado) */
:where(body[data-espresso]) .gr-pills { border-radius: var(--r-xs); background: var(--ink-50); }
:where(body[data-espresso]) .gr-pills button {
  min-height: 26px; border: 0; border-radius: 4px; font-weight: 500; font-size: var(--t-sm);
  background: transparent; color: var(--ink-500); }
:where(body[data-espresso]) .gr-pills button.active {
  background: var(--surface); color: var(--ink-800); box-shadow: 0 0 0 1px var(--divider); }

/* o cabeçalho da casca, dentro do módulo: mesmos botões pequenos.
   🔴 E NA TELA INICIAL (30/09/2026, pedido do Juan: *"os botões superiores
   ainda não estão em Espresso"*): `/` marca só o `<header data-espresso>`, e
   não o `<body>`, porque o mesmo arquivo tem o `#login` — a porta de entrada
   de todo mundo — e o lançador, que convertem no seu próprio commit.
   O hover era vermelho (`shell.css`), e vermelho aqui é acento com
   significado: passar o mouse não significa nada. O "Sair" da casca é um
   `<button>`, então o transform de `style.css` (sobe no hover, afunda no
   toque) é anulado aqui, com especificidade própria. */
:where(body[data-espresso], .sh-topo[data-espresso]) .sh-botao {
  min-height: var(--e-alvo); padding: 0 var(--s-3); border-radius: var(--r-xs);
  font-weight: 500; font-size: var(--t-sm); box-shadow: none; }
@media (pointer: coarse) { :where(body[data-espresso], .sh-topo[data-espresso]) .sh-botao { min-height: var(--e-alvo); } }
/* filete e hover SÓ no cabeçalho: um `primary sh-botao` no corpo da página
   leva o fundo escuro dele (abaixo), e uma borda/fundo genéricos aqui o
   apagariam — esta regra tem especificidade de classe. */
:where(body[data-espresso] .sh-topo, .sh-topo[data-espresso]) .sh-botao {
  border: 1px solid var(--divider); }
@media (hover: hover) and (pointer: fine) {
  :where(body[data-espresso] .sh-topo, .sh-topo[data-espresso]) .sh-botao:hover {
    background: var(--ink-50); border-color: var(--divider); color: var(--ink-800); }
  .sh-topo[data-espresso] button.sh-botao:not(:disabled):hover { transform: none; }
}
.sh-topo[data-espresso] button.sh-botao:not(:disabled):active {
  transform: scale(.98); box-shadow: none; filter: none; }
/* a ação principal em forma de link (`<a class="primary sh-botao">`, que o
   `button.primary` não alcança): tinta escura, como o botão principal */
:where(body[data-espresso]) main .sh-botao.primary {
  background: var(--ink-800); border: 1px solid var(--ink-800); color: var(--tinta-cheia); }
@media (hover: hover) and (pointer: fine) {
  :where(body[data-espresso]) main .sh-botao.primary:hover {
    background: var(--ink-900); border-color: var(--ink-900); color: var(--tinta-cheia); }
}

/* (02/10/2026) As correções de `.sh-rotulo` e `.sh-cal-bloco` que moravam aqui
   saíram: a casca converteu na ORIGEM (`shell/shell.css`), e a cópia aqui seria
   a segunda verdade do mesmo valor (D0). */

/* Competência em ano e mês (04/11/2026): `Liga.competenciaCampo` põe o seletor de mês e o de ano no lugar do `<input type="month">`. */
.lg-competencia { display: flex; gap: 8px; align-items: center; min-width: 0; }
.lg-competencia select { flex: 1 1 0; min-width: 0; }
.lg-competencia select:last-child { flex: 0 0 min(40%, 6.5rem); }