/* ============================================================
   DIREÇÃO VISUAL — "PRONTUÁRIO"

   Camada carregada DEPOIS de styles.css, e que só sobrescreve.
   Nenhuma regra antiga foi reescrita: desligar a direção inteira
   é remover a linha desta folha do index.html.

   A decisão dominante: a tela se comporta como um documento
   clínico bem diagramado, não como um painel. O que organiza
   são RÉGUAS, não cartões flutuantes. Serifada nos números e
   títulos — é o que dá o tom de registro. O bordô vira carimbo:
   aparece pouco e com autoridade.
   ============================================================ */

:root{
  /* papel levemente quente no lugar do cinza azulado.
     29/09: o papel escureceu 4% (#faf8f6 → #f0ece8). Não é troca de
     paleta, é o palco: enquanto o fundo ficava a 2% do branco do
     cartão, sombra nenhuma levantava nada. O relevo vem do contraste
     entre o palco e a peça, não da sombra sozinha. */
  --bg:#f0ece8;
  --panel:#ffffff;
  --panel-2:#f4f0ed;
  --panel-3:#eae4e0;
  --line:#d8cfcb;
  --line-soft:#e6dedb;
  --text:#1f1a1a;
  --text-2:#5c5150;
  --text-3:#7a6d6d;

  /* 29/09/2026 — A DECISÃO DE CIMA FOI REVISTA PELO USUÁRIO.
     Estes quatro valores diziam "documento não tem cantos gordos nem
     sombra", e como este `:root` não tem escopo eles valiam para o
     SISTEMA INTEIRO, não só para o documento: os 14px/10px declarados
     no styles.css nunca chegaram à tela, e `--shadow-sm:none` anulava
     as cinco regras que pediam sombra sutil. O sistema era plano por
     acidente antes de ser plano por escolha.
     Ver docs/revisao-layout/profundidade-3d.html. */
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 18px 50px rgba(31,26,26,.16);
  --shadow-sm:var(--e1);

  --serif:'Newsreader','Iowan Old Style',Georgia,'Times New Roman',serif;
}

body{background:var(--bg)}

/* ---------- o cartão deixa de flutuar ---------- */
.card{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.card::before{display:none}            /* a faixa de acento no topo sai */
.card-head{
  background:none;
  border-bottom:2px solid var(--text);
  padding:0 0 var(--sp-2);
  margin-bottom:var(--sp-4);
  gap:var(--sp-3);
}
.card-head h3{
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--text-2);
}
.card-head h3::before{display:none}    /* o marcador vertical sai */
.card-head h3 svg{width:14px;height:14px;color:var(--text-3)}
.card-head .sub{color:var(--text-3)}
.card-pad{padding:0}
/* dentro de modal o cartão volta a ter caixa, senão o conteúdo se perde */
.modal .card,.card.card-plain{background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:0}
.modal .card-head,.card.card-plain .card-head{padding:var(--sp-3) var(--sp-4);margin-bottom:0;
  border-bottom:1px solid var(--line-soft)}
.modal .card-pad,.card.card-plain .card-pad{padding:var(--sp-4)}

/* ---------- indicadores viram uma faixa dividida por réguas ---------- */
.grid.g-4,.grid.g-3{
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.kpi{
  background:none;border:0;border-radius:0;box-shadow:none;
  border-right:1px solid var(--line-soft);
  padding:var(--sp-4) var(--sp-5);
}
.kpi:last-child{border-right:0}
.kpi:first-child{padding-left:0}
.kpi::before{display:none}
.kpi:hover{box-shadow:none;border-color:var(--line-soft)}
.kpi:has(.k-ico){padding-left:var(--sp-5)}
.kpi:first-child:has(.k-ico){padding-left:0}
.kpi .k-ico{display:none}              /* o ícone redondo é decoração de painel */
.kpi .k-label{
  font-size:var(--fs-xs);font-weight:var(--fw-medium);
  letter-spacing:.13em;color:var(--text-2);
}
.kpi .k-value{
  font-family:var(--serif);
  font-weight:var(--fw-bold);
  border-bottom:0;                      /* a régua da faixa já separa */
  padding-bottom:0;
  margin-top:var(--sp-2);
  letter-spacing:-.01em;
}
.kpi.kpi-forte .k-value{color:var(--primary);font-size:var(--fs-3xl)}
/* Faixa com mais de uma linha (seis indicadores em g-3, oito em g-4): só o
   primeiro da faixa perdia o recuo, e o da segunda linha — com ou sem ícone —
   começava 24px para dentro. Cada linha começa na margem e termina sem régua,
   e a linha de baixo ganha a régua de cima. */
@media(min-width:901px){
  .grid.g-3>.kpi:nth-child(3n+1){padding-left:0}
  .grid.g-3>.kpi:nth-child(3n){border-right:0}
  .grid.g-3>.kpi:nth-child(n+4){border-top:1px solid var(--line-soft)}
}
@media(min-width:1201px){
  .grid.g-4>.kpi:nth-child(4n+1){padding-left:0}
  .grid.g-4>.kpi:nth-child(4n){border-right:0}
  .grid.g-4>.kpi:nth-child(n+5){border-top:1px solid var(--line-soft)}
}
@media(min-width:901px) and (max-width:1200px){
  .grid.g-4>.kpi:nth-child(2n+1){padding-left:0}
  .grid.g-4>.kpi:nth-child(2n){border-right:0}
  .grid.g-4>.kpi:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

/* ---------- cabeçalho da página: régua grossa, como topo de ficha ---------- */
.page-head{
  border-bottom:2px solid var(--text);
  padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.page-head .ph-txt p{
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);font-weight:var(--fw-medium);
}
.page-head .ph-txt.ph-pessoa h2{font-family:var(--serif);font-weight:var(--fw-bold);letter-spacing:-.01em}
.topbar{background:var(--panel);border-bottom:1px solid var(--line)}
.topbar h2{font-family:var(--serif);letter-spacing:-.01em}
.topbar-mark{box-shadow:none;border-radius:var(--radius-sm)}
/* um acento só: cada módulo tinha o seu (azul, roxo, verde, laranja), um
   arco-íris que disputava com as cores de situação. O bordô é o carimbo. */
.main[data-mod]{--accent:var(--primary);--accent-soft:var(--primary-soft)}

/* ---------- tabela como livro de registro ---------- */
.table-wrap{border:0}
table{font-variant-numeric:tabular-nums}
th{
  background:none;
  border-bottom:1px solid var(--text);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;
  letter-spacing:.11em;color:var(--text-3);
}
td{
  border-bottom:1px solid var(--line-soft);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;
}
th:last-child,td:last-child{padding-right:0}
tbody tr:hover td{background:rgba(168,124,28,.05)}
.row-danger{background:none}
.row-danger td{background:rgba(165,18,44,.035)}
/* a barra vermelha é sombra interna: sem recuo, cobria o começo do horário da tela Hoje */
tbody tr.row-danger td:first-child{padding-left:var(--sp-3)}
/* na Hoje as linhas marcadas e as normais se alternam: recuo igual para o horário alinhar */
.hoje-bloco tbody td:first-child{padding-left:var(--sp-3)}

/* ---------- situação: ponto + texto, sem pílula preenchida ---------- */
.badge{
  background:none!important;
  padding:0;
  border-radius:0;
  font-weight:var(--fw-medium);
  gap:var(--sp-2);
}
.badge::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none;
}
.b-green{color:#186641}
.b-red{color:#8e0f24}
.b-amber{color:var(--amber-2)}
.b-blue{color:#2f6f8f}
.b-teal{color:#1f7a6b}
.b-purple{color:#5d4a86}
.b-gray{color:var(--text-3)}
/* na barra lateral e no protético o selo ainda precisa de fundo para ser lido */
.pr-card .badge,.sidebar .badge{padding:3px 10px;border-radius:var(--radius-pill)}
.pr-card .badge.b-green{background:var(--green-soft)}
.pr-card .badge.b-red{background:var(--red-soft)}
.pr-card .badge.b-amber{background:var(--amber-soft)}

/* ---------- botões: carimbo, não pílula ---------- */
.btn{border-radius:var(--radius-sm);font-weight:var(--fw-medium)}
.btn-primary{box-shadow:none}
.btn-ghost{background:none;border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--text-3);background:none}

/* ---------- abas e chips: régua embaixo, sem caixa ---------- */
.tabs{border-bottom:1px solid var(--line)}
.tab{letter-spacing:.06em;font-size:var(--fs-sm);text-transform:uppercase;
  font-weight:var(--fw-medium);padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;margin-right:var(--sp-4)}
.tab.active{border-bottom-color:var(--primary)}
.chip{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:var(--sp-2) 0;margin-right:var(--sp-4);color:var(--text-3);
  font-weight:var(--fw-medium)}
.chip.active{background:none;color:var(--text);border-bottom-color:var(--gold)}

/* ---------- formulário: campo com linha, não com caixa ---------- */
.field input,.field select,.field textarea{
  border-radius:0;border:0;border-bottom:1px solid var(--line);
  background:none;padding-left:0;padding-right:0;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-bottom-color:var(--primary);border-bottom-width:2px;background:none;
}
.field label{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}

/* ---------- pílulas de estatística viram bloco com régua ---------- */
.pill-stat{background:none;border:0;border-left:2px solid var(--gold);
  border-radius:0;padding:var(--sp-1) var(--sp-3)}
.pill-stat .v{border-bottom:0;padding-bottom:0;font-family:var(--serif)}

/* ---------- modal: folha, não caixa flutuante ---------- */
.modal{border-radius:var(--radius);border:1px solid var(--line)}
/* O cabeçalho do modal é `position:sticky`. Tirar o fundo dele — que era o
   reflexo automático de "documento não tem caixa" — fazia o conteúdo passar
   POR TRÁS do título ao rolar. Mantém o fundo, tira só o degradê. */
.modal-head{border-bottom:2px solid var(--text);background:var(--panel)}
.modal-head h3{font-family:var(--serif);font-weight:var(--fw-bold)}

/* ---------- avisos ---------- */
.int-aviso{border-radius:0;border-left-width:2px}
.empty{color:var(--text-3)}

/* a barra lateral vinho fica como está — é o que o sistema tem de mais
   reconhecível, e a direção foi escolhida justamente por não brigar com ela */

/* ============================================================
   A LOGO NA BARRA — marca vazada, em branco

   O arquivo original (`logo.png`) tem 1646×1390 px, mas a marca
   ocupa só 60% da largura e 34% da altura — o resto é margem. E é
   `Format24bppRgb`: SEM canal alfa, fundo branco opaco. Por isso a
   regra antiga precisava de `background:#fff`, raio 12 e sombra —
   uma placa flutuante, com `object-fit:cover` cortando a marca.
   Ou seja: um cartão, justamente o que esta direção elimina.

   `logo-branca.png` resolve na origem: margem recortada, fundo
   transparente e arte recolorida em branco, com o antisserrilhado
   das bordas preservado. O dente fica VAZADO — o vinho da barra
   aparece através dele, que é a mesma relação figura-fundo do
   original, com as camadas trocadas.

   Os outros recortes ficam em assets/ para favicon, impresso e
   tela de login: logo-transp, logo-dourada e os três do símbolo.
   ============================================================ */
.brand{
  flex-direction:column;
  padding:18px var(--sp-4) 0;
  border-bottom:0;
}
.brand img,.brand svg{
  width:100%;height:auto;max-height:none;
  background:none;border-radius:0;box-shadow:none;
  object-fit:contain;
}
/* o filete dourado fecha o cabeçalho e abre o menu — é a régua que
   separa "de quem é o sistema" de "onde eu vou" */
.brand .fio{
  height:1px;width:100%;margin-top:14px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* ---------- o menu de réguas ---------- */
.nav-item{
  border-radius:0;margin:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px var(--sp-4);
}
.nav-item.active{
  background:rgba(255,255,255,.07);
  box-shadow:inset 3px 0 0 var(--gold);
  font-weight:var(--fw-medium);
}
.nav-label{letter-spacing:.18em}


/* ---------- receituário: linha de medicamento ----------
   O número fica fora do bloco de campos para a lista ficar numerada em
   coluna própria, alinhada com o que sai impresso na receita. */
/* o aviso de alergia e o de medicamento de risco entram como terceira
   coisa da linha: sem wrap, viravam coluna e espremiam o formulário */
.rec-linha{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft)}
.rec-linha:last-of-type{border-bottom:0}
.rec-linha-n{flex:none;width:22px;height:22px;margin-top:var(--sp-4);border-radius:50%;
  background:var(--panel-2);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.rec-tirar{flex:none;margin-top:var(--sp-4)}
/* A pré-visualização mostra a folha em tamanho real (210 mm). Como isso é mais
   largo que o modal, o contêiner rola na horizontal em vez de espremer o
   documento — espremer daria uma prévia que não corresponde ao papel. */
.rec-folha{background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius);margin-top:var(--sp-3);
  overflow:auto;max-height:60vh;padding:var(--sp-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.rec-folha .doc-folha,.rec-folha .rec-via{flex:none;box-shadow:0 2px 12px rgba(31,26,26,.14)}
.rec-folha .rec-corte{display:none}   /* as folhas já aparecem separadas */

/* ---------- receituário: prescrições salvas ---------- */
.rec-barra{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.rec-painel{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);margin:var(--sp-3) 0}
.rec-painel-t{display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  font-weight:var(--fw-medium);color:var(--text-2)}
.rec-painel-t svg{width:14px;height:14px}
.rec-salvas{max-height:300px;overflow:auto}
.rec-salva{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft)}
.rec-salva:last-child{border-bottom:0}
.rec-salva:hover{background:rgba(168,124,28,.05)}
.rec-salva-i{flex:1;min-width:0}
.rec-salva-n{font-weight:var(--fw-medium);display:flex;align-items:center;gap:var(--sp-2)}
.rec-salva-d{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* os exemplos que vêm com o sistema ficam marcados: são para revisar, não
   para sair prescrevendo */
.rec-tag{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-2);border:1px solid var(--amber-2);border-radius:var(--radius-sm);
  padding:1px 5px;font-weight:var(--fw-medium)}

/* ============================================================
   AS TRÊS TELAS DE DESENHO PRÓPRIO

   Odontograma, central radial da Inteligência e quadros do
   Protético foram desenhadas antes desta camada e ficaram meio
   termo: cantos de 8 a 14px onde o resto do sistema já tinha 4,
   sombra de elevação onde o resto usa régua, e um fundo rosado
   no odontograma que era o único da casa.

   O DESENHO em si não é tocado — o dente continua o mesmo dente,
   o círculo continua círculo. O que muda é a moldura em volta,
   que é justamente o que fazia essas três telas parecerem de
   outro sistema.

   Continua valendo a regra da camada: isto só sobrescreve, e
   tirar a folha do index.html devolve tudo ao que era.
   ============================================================ */

/* ---------- odontograma ---------- */
/* O gradiente rosa (#fbf7f8 → #f7eef0) era o único fundo colorido do
   sistema. Vira o mesmo papel dos outros painéis, com uma régua em cima —
   o quadro passa a ser uma seção do documento, não um widget pousado nele. */
.odo-wrap{background:var(--panel-2);border-radius:var(--radius);
  border-top:2px solid var(--line)}
.odo-wrap.odo-wrap-sel{border-radius:var(--radius)}
.odo-tooth{border-radius:var(--radius-sm)}
.odo-sel-tooth{border-radius:var(--radius-sm)}
.odo-legend i{border-radius:var(--radius-sm)}

/* ---------- Inteligência ---------- */
/* A central radial saiu em 14/09/2026; fica o canto dos alertas. */
.int-alerta{border-radius:var(--radius)}

/* ---------- quadros do Protético ---------- */
/* `.pr-card` já usava o token; o que destoava era a sombra do hover, que
   levantava o quadro do papel. Vira a mesma resposta dos outros: a borda
   escurece. Os anéis coloridos das etapas ficam — são estado do trabalho. */
.pr-card:hover{box-shadow:none;border-color:var(--line);transform:none}
.tl-num button{border-radius:var(--radius-sm)}
.tl-et-nome{border-radius:var(--radius-sm)}
.tl-et-btn{border-radius:var(--radius-sm)}

/* Estado da sincronização com o banco (js/supa.js). Frase, não layout:
   bloco que quebra a 375px (§5, .evo-retorno). */
.supa-estado{display:block;margin-top:4px;font-size:var(--fs-xs);line-height:1.35;color:var(--text-2)}
.supa-estado.supa-sem-rede,.supa-estado.supa-sessao{color:var(--amber,#8a5a00)}
.supa-estado.supa-erro,.supa-estado.supa-recusa{color:var(--red,#a3222f)}

/* ============================================================
   RELEVO — A CAIXA VOLTA, O TOM FICA (29/09/2026)

   A direção Prontuário achatava o sistema inteiro de propósito:
   "o que organiza são RÉGUAS, não cartões flutuantes". O usuário
   reviu essa decisão em 29/09 depois de ver o hoje × proposto de
   docs/revisao-layout/profundidade-3d.html.

   O QUE FICA da direção: serifa nos números e títulos, a paleta de
   papel quente, o bordô como carimbo (um acento só), as tabelas
   como livro de registro, o selo de situação como ponto + texto,
   a barra lateral vinho e o menu de réguas.

   O QUE VOLTA: cartão, KPI, campo e chip tornam a ser CAIXA, e
   recebem a escala de elevação declarada no styles.css.

   Apagar este bloco devolve a direção Prontuário como ela era —
   desde que os quatro valores do `:root` lá em cima voltem a
   4px / 3px / none / #faf8f6.
   ============================================================ */

/* ---------- o cartão volta a flutuar ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--e2),var(--e-top);
  /* NÃO ponha `overflow:hidden` aqui, por mais que o styles.css tenha.
     O `<th>` das tabelas é `position:sticky` com `top` da altura da barra
     do topo; `overflow:hidden` faz do cartão um contêiner de rolagem, e o
     sticky passa a se medir a partir DELE — o cabeçalho desce 56px para
     dentro do cartão e senta em cima da primeira linha. É o §5 outra vez
     ("overflow cria contêiner de rolagem nos DOIS eixos"), e foi por isso
     que a direção Prontuário pôs `visible` aqui.
     Consequência aceita: o canto arredondado não recorta o conteúdo. Não
     precisa — a faixa de acento está escondida e as células não têm fundo
     próprio nesta direção. */
  overflow:visible;
}
/* A faixa de acento no topo continua escondida (`.card::before`, lá em
   cima): um acento só é decisão da direção, e é ela que deixa o realce
   de luz aparecer na borda superior. */
.card-head{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-bottom:1px solid var(--line-soft);
  padding:var(--sp-4) var(--sp-5);
  margin-bottom:0;
}
.card-pad{padding:var(--sp-5)}

/* ---------- a faixa de indicadores volta a ser uma fila de caixas ---------- */
.grid.g-4,.grid.g-3{gap:var(--sp-5);border-top:0;border-bottom:0}
.kpi{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--e2),var(--e-top);
  padding:var(--sp-4) var(--sp-5);
}
.kpi:last-child,.kpi:first-child{border-right:1px solid var(--line-soft)}
.kpi:first-child,.kpi:has(.k-ico),.kpi:first-child:has(.k-ico){padding-left:var(--sp-5)}
.kpi:hover{box-shadow:0 8px 24px rgba(56,40,36,.12);border-color:var(--line)}
/* As três consultas de nth-child lá em cima zeravam recuo e régua para a
   faixa dividida. Numa fila de caixas elas não fazem sentido: cada caixa
   tem os quatro lados. Repetidas aqui com os mesmos limites de largura,
   senão a primeira de cada linha continua colada na margem. */
@media(min-width:901px){
  .grid.g-3>.kpi:nth-child(3n+1){padding-left:var(--sp-5)}
  .grid.g-3>.kpi:nth-child(3n){border-right:1px solid var(--line-soft)}
  .grid.g-3>.kpi:nth-child(n+4){border-top:1px solid var(--line-soft)}
}
@media(min-width:1201px){
  .grid.g-4>.kpi:nth-child(4n+1){padding-left:var(--sp-5)}
  .grid.g-4>.kpi:nth-child(4n){border-right:1px solid var(--line-soft)}
  .grid.g-4>.kpi:nth-child(n+5){border-top:1px solid var(--line-soft)}
}
@media(min-width:901px) and (max-width:1200px){
  .grid.g-4>.kpi:nth-child(2n+1){padding-left:var(--sp-5)}
  .grid.g-4>.kpi:nth-child(2n){border-right:1px solid var(--line-soft)}
  .grid.g-4>.kpi:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

/* ---------- campo: caixa de novo, com o rótulo em versalete ----------
   Fora `[type=checkbox]` e `[type=radio]`: o §5 já registrou que
   `.field input` pega qualquer input dentro de um `.field`, e um rádio
   de 18px com sombra de caixa fica com cara de defeito. */
.field input:not([type=checkbox]):not([type=radio]),
.field select,.field textarea{
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  padding:10px var(--sp-3);
  box-shadow:var(--e1);
}
.field input:not([type=checkbox]):not([type=radio]):focus,
.field select:focus,.field textarea:focus{
  border-color:var(--primary);
  border-bottom-width:1px;   /* a direção punha 2px, que era o sublinhado */
}

/* ---------- chip volta a ser pílula ---------- */
.chip{
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  padding:5px 11px;
  margin-right:0;
  color:var(--text-2);
}
.chip.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-2)}

/* ---------- abas: saem do formato de documento ----------
   Continuam sublinhado (é assim no styles.css também), mas com o recuo
   dos dois lados e sem caixa alta — a versão da direção era a de ficha. */
.tab{
  padding:11px var(--sp-4);
  margin-right:var(--sp-1);
  text-transform:none;
  letter-spacing:normal;
  font-size:var(--fs-base);
}

/* ---------- botões ---------- */
.btn{box-shadow:var(--e1),var(--e-top)}
.btn-primary{box-shadow:var(--e1),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-ghost{background:var(--panel-2)}
.btn-ghost:hover{background:var(--panel-3);border-color:var(--line)}

/* ---------- topo e quadros ---------- */
.topbar{box-shadow:var(--e1)}
.pr-card:hover{box-shadow:var(--e2);border-color:var(--line);transform:translateY(-2px)}