/* ═══════════════════════════════════════════════════════════════════════════
   prancheta-ponte.css — O VISUAL NOVO SOBRE AS CLASSES DE HOJE (v3.127.0)

   Fase 1 do redesign (Wagner, 26/09: "Pode começar pela Fase 1"). Carregada
   DEPOIS do <style> de cada tela, com os nomes de /css/prancheta.css.

   O rascunho do Claude Design vestia os ELEMENTOS da página inteira
   (`button{height:40px}`, `input{height:40px}`, `h2{…9,5px caixa-alta}`,
   `td{height:48px}`, `.chip{height:28px}`, `nav{…}`). Conferido tela a tela,
   isso quebrava:
     • `input{height:40px}` inclui checkbox e rádio — viravam quadrados de 40px;
     • `.chip{height:28px}` achatava os chips de etapa do Quadro (duas linhas);
     • `td{height:48px}` passava para a folha da memória de cálculo;
     • `h2` em caixa-alta de 9,5px apagava os títulos das telas que usam h2
       como título de verdade;
     • `nav` pegava também o menu de abas de outras telas.
   Então esta ponte tem três regras de conduta:
     1. muda COR, RAIO, SOMBRA, FONTE e FOCO — não muda altura nem espaço, que
        é o que mexe no desenho da tela (isso é da Fase 5, tela por tela);
     2. as regras de elemento usam `:where()` para ter o MESMO peso que a regra
        de elemento da página e perder para qualquer regra com classe — assim
        um `.seg button` ou `.chip` da tela continua mandando;
     3. a folha da memória de cálculo (.folha) fica de fora: ela é documento
        impresso, já aprovada, e tem desenho próprio (/css/folha.css).
   Menu e carimbo NÃO estão aqui: são as Fases 3 e 4.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. A página ─────────────────────────────────────────────────────────── */
body{background:var(--bg-central);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
body :where(input,select,textarea,button){font-family:inherit}

/* ── 2. Botões ───────────────────────────────────────────────────────────────
   Pílula, petróleo com texto branco. Era esmeralda com texto branco em quase
   toda tela — contraste 3,38:1, abaixo do que o manual aceita para texto
   (seção de contraste: "nunca texto branco sobre esmeralda"). O botão
   secundário (ghost) fica branco com fio; o de perigo, vermelho cheio.
   Só os botões "de ação": sem classe, .small, .mini, .ghost, .danger,
   .principal, .primario e .btn. Qualquer outro (chip, aba, seta do menu,
   ícone) segue o desenho da própria tela. */
button:where(:not([class])),button.small,button.mini,button.principal,button.primario,button.danger,button.ghost,.btn{
  border-radius:var(--radius-pill);
  transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast),transform var(--dur-fast),color var(--dur-fast);
}
button:where(:not([class])),button.small,button.mini,button.principal,button.primario{
  background:var(--petroleo);color:#fff;border:0;
}
button:hover:where(:not([class])),button.small:hover,button.mini:hover,button.principal:hover,button.primario:hover{background:var(--petroleo-700)}
button:active:where(:not([class])),button.small:active,button.mini:active,button.principal:active,button.primario:active,
button.ghost:active,button.danger:active,.btn:active{transform:scale(.98)}
button:active:where(:not([class])),button.small:active,button.mini:active,button.principal:active,button.primario:active{background:var(--petroleo-900)}

button.ghost,.btn{background:#fff;color:var(--ink);border:0;box-shadow:inset 0 0 0 1px var(--linha)}
button.ghost:hover,.btn:hover{background:var(--nevoa);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-strong)}

button.danger{background:var(--urgente);color:#fff;border:0;box-shadow:none}
button.danger:hover{background:#A51F15;color:#fff}

.btn.principal{background:var(--petroleo);color:#fff;box-shadow:none}
.btn.principal:hover{background:var(--petroleo-700);color:#fff}
.btn.perigo{color:var(--urgente)}

button:disabled,button[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── 3. Campos ───────────────────────────────────────────────────────────────
   Canto de 12, fio da marca e o anel de foco teal. Checkbox, rádio, faixa e
   arquivo ficam fora (eram a primeira coisa que o rascunho quebrava). */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color])),select,textarea{
  border-radius:var(--radius-md);border-color:var(--linha);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
input:hover:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not(:focus)),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--border-strong)}
input:focus:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color])),select:focus,textarea:focus{
  outline:0;border-color:var(--teal);box-shadow:var(--shadow-focus);
}
input[type=checkbox],input[type=radio]{accent-color:var(--petroleo)}

/* ── 4. Cartões e indicadores ────────────────────────────────────────────────
   Cartão branco, canto de 16, sombra leve no lugar do fio. O fio fica
   TRANSPARENTE (e não some): assim nada anda um pixel de lugar. */
.card,.kpi,.painel{border-color:transparent;border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.card.vazio,.vazio{box-shadow:none;border:1px dashed var(--linha);border-radius:var(--radius-lg);background:transparent}

/* ── 5. Abas ─────────────────────────────────────────────────────────────────
   Sublinhado esmeralda, sem a "pasta" cinza. */
.abas{border-bottom:1px solid var(--linha)}
.abas a{background:none;border:0;border-radius:0;color:var(--suave);position:relative}
.abas a:hover{color:var(--ink)}
.abas a.on{background:none;border:0;color:var(--ink);font-weight:700}
.abas a.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--esmeralda)}

/* ── 6. Tabelas ──────────────────────────────────────────────────────────────
   Cabeçalho em Ethnocentric de 9px (o tamanho do desenho), caixa-alta, na
   cor suave; números alinhados pela casa. O tamanho vem junto com a fonte
   porque a Ethnocentric é larga: no tamanho antigo (11px) a tabela do
   Controle, de 17 colunas, passava da tela. A folha da memória fica de fora.
   O Financeiro (body.tabelas-densas) mantém o cabeçalho em Arial: são as
   tabelas mais largas da casa, várias com colunas de largura fixa, e mesmo
   a 9px a Ethnocentric empurrava a do Controle 50px para fora. O desenho
   prevê "Arial Nova Cond" para tabela densa — entra na Fase 5, na tela dele. */
th:not(.folha th){color:var(--suave)}
body:not(.tabelas-densas) th:not(.folha th){font-family:var(--font-display);font-weight:400;font-size:9px;letter-spacing:.12em}
td:not(.folha td){font-variant-numeric:tabular-nums}

/* ── 7. Selos ──────────────────────────────────────────────────────────────── */
.selo,.selo-mini,.tag{border-radius:var(--radius-pill)}