/* ============================================================
   Prodac — Site interno · SISTEMA VISUAL "PLAQUETA"
   Fonte única de tokens e primitivas. Toda página carrega este
   arquivo ANTES do seu <style> próprio.

   O mundo está descrito em DESIGN.md. Em uma frase: o site é um
   conjunto de PLAQUETAS DE IDENTIFICAÇÃO — blocos estampados de
   campos fixos, lidos por posição. Profundidade vem de SULCO
   GRAVADO, nunca de sombra.
   ============================================================ */

:root{
  /* ---- CHAPA: alumínio escovado, neutro FRIO ------------------
     Não é creme, não é branco puro. É metal claro. */
  --chapa:        #eceef0;   /* área de conteúdo                 */
  --chapa-clara:  #f6f7f8;   /* superfície de plaqueta e registro */
  --chapa-campo:  #e3e6e9;   /* campo rebaixado, cabeçalho        */

  /* ---- ANODIZADO: a moldura (trilho, topo da gaveta) --------- */
  --anod:         #23282d;
  --anod-alto:    #2e343a;   /* hover                            */
  --anod-baixo:   #1a1e22;   /* recorte                          */
  --anod-txt:     #c3cad1;   /* texto sobre anodizado  (8,98:1)  */
  --anod-txt-2:   #8b939b;   /* secundário sobre anodizado (4,77:1) */

  /* ---- GRAVAÇÃO: a tinta ------------------------------------- */
  --gravado:      #14181b;   /* principal          16,65:1 */
  --gravado-2:    #474e55;   /* secundário          7,87:1 */
  --gravado-3:    #5e666e;   /* rótulo, placeholder 5,44:1 */

  /* ---- SULCO: toda separação é gravada ------------------------
     Linha escura + linha de luz = o corte na chapa. É o ÚNICO
     recurso de profundidade no plano claro. */
  --sulco:        #c8ccd1;
  --sulco-luz:    #ffffff;
  /* Sulco de CONTROLE (05/08/2026). O --sulco acima dá 1,50:1 contra a chapa
     clara — abaixo do piso de 3:1 que a WCAG 1.4.11 exige para a borda de um
     componente. Numa tela com poucos controles isso passa despercebido; no
     Banco de Preços, com ~40 campos empilhados, o olho não achava aresta
     nenhuma e o conjunto lia como bagunça. Este dá 3,57:1 e é o contorno de
     tudo que se pode TOCAR — botão, campo, seletor. A separação estrutural
     (linha de tabela, divisória) continua no --sulco: a diferença de peso
     entre os dois é o que diz "isto é um controle, aquilo é uma divisa".
     Adotado primeiro no banco.html; as outras páginas migram quando o Victor
     quiser — até lá elas seguem com a borda fraca. */
  --sulco-campo:  #7d848b;

  /* ---- ESMALTE: o verde que preenche o caractere estampado ----
     Estado, marca e ação. Nunca decoração.
     ⚠ --esmalte-vivo (#00a651) dá 3,19:1 com texto branco:
     nunca é fundo de texto. Quem carrega texto é --esmalte. */
  --esmalte:      #00803e;   /* ação e estado positivo   5,05:1 */
  --esmalte-vivo: #00a651;   /* acento sobre escuro, indicador  */
  --esmalte-forte:#00662f;   /* hover da ação            7,14:1 */
  --esmalte-fundo:#dcefe3;   /* tinta de fundo                  */
  --esmalte-cod:  #00722f;   /* verde sobre tinta verde  5,08:1 */
  --esmalte-anel: rgba(0,166,81,.42);

  /* ---- TARJA: declinado, perdido, atenção -------------------- */
  --tarja:        #a4501a;   /* 5,61:1 no branco · 4,72:1 na tinta */
  --tarja-fundo:  #f6e9df;
  --tarja-linha:  #e0c3a8;

  /* ---- ALERTA / PERIGO --------------------------------------- */
  --alerta:       #8f5f0a;
  --alerta-tint:  #fdf9ef;
  --alerta-linha: #f0e0b0;
  --alerta-ink:   #7a6420;
  --perigo:       #c0392b;
  --perigo-tint:  #fdeaea;
  --perigo-linha: #f0c9c4;
  --online:       #22c55e;
  --online-anel:  #b6f0cb;

  /* ---- TIPOGRAFIA ---------------------------------------------
     Só fonte de sistema: o site roda offline e não baixa nada.
     Bahnschrift É o DIN 1451 — a letra da sinalização industrial
     e das placas de identificação. Escolha material, não estilo. */
  --din: "Bahnschrift","DIN Alternate","Segoe UI",system-ui,sans-serif;
  --val: "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --cod: "Cascadia Mono",Consolas,ui-monospace,monospace;

  --t-nano:   10px;   /* inicial de avatar, contador          */
  --t-micro:  11px;   /* rótulo em caixa alta, carimbo, cabeç. */
  --t-sm:     13px;   /* secundário, célula densa             */
  --t-base:   14px;   /* corpo, campo                         */
  --t-sub:    16px;   /* título de modal e de gaveta          */
  --t-titulo: 20px;   /* título de página                     */
  --t-metrica:42px;   /* número de campo — caractere estampado */

  --p-normal: 400;
  --p-medio:  500;
  --p-semi:   600;
  --p-forte:  700;

  --lh-densa: 1.3;
  --lh-corpo: 1.5;
  --tr-caixa-alta: .13em;   /* tracking do rótulo em caixa alta */
  --tr-titulo:     .26em;   /* tracking do título de plaqueta   */

  /* ---- ESPAÇAMENTO (escala de 4) ----------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px;

  /* ---- FORMA — cantos vivos. Raio máximo 3px. ---------------- */
  --r-sm:  2px;
  --r-md:  3px;
  --r-lg:  3px;
  --r-pill:999px;   /* só para o que é genuinamente redondo */
  --chanfro: 9px;   /* corte de canto da plaqueta */

  /* ---- ELEVAÇÃO ----------------------------------------------
     Sombra só existe no que REALMENTE está por cima da chapa:
     gaveta e modal. No plano, a profundidade é o sulco. */
  --sh-1: none;
  --sh-2: none;
  --sh-3: 0 10px 24px rgba(12,16,20,.16);
  --sh-4: 0 24px 60px rgba(12,16,20,.30);

  /* ---- MOVIMENTO ---------------------------------------------
     Plaqueta é objeto rígido: não desliza, não pulsa, não brilha. */
  --dur: 130ms;
  --dur-lenta: 190ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  --alvo: 34px;

  /* ============================================================
     APELIDOS — nomes do sistema anterior apontando para o mundo
     novo. Existem para banco.html e calc-ar-externo.html não
     quebrarem antes de serem migrados. Some quando os dois forem.
     ============================================================ */
  --ink: var(--gravado); --ink-2: var(--gravado-2); --ink-3: var(--gravado-3);
  --ink-mute: #a8b0b7;
  --superficie: var(--chapa-clara);
  --superficie-crome: var(--chapa-campo);
  --superficie-baixa: var(--chapa-campo);
  --superficie-baixa-h: #d8dde2;
  --fundo: var(--chapa);
  --tinta-solida: var(--anod);
  --linha: var(--sulco); --linha-suave: var(--sulco); --linha-forte: #b4bac1;
  --verde: var(--esmalte-vivo); --verde-esc: var(--esmalte);
  --verde-forte: var(--esmalte-forte); --verde-claro: var(--esmalte-fundo);
  --verde-ring: var(--esmalte-anel);
  --ok: var(--esmalte); --ok-tint: var(--esmalte-fundo);
  --fonte: var(--val); --fonte-num: var(--val);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur:0ms; --dur-lenta:0ms; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
}

/* ============================================================
   Base
   ============================================================ */
*{ box-sizing:border-box }
html,body{ margin:0; height:100% }
body{
  font-family:var(--val);
  font-size:var(--t-base);
  line-height:var(--lh-corpo);
  color:var(--gravado);
  background:var(--chapa);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit }
button{ cursor:pointer }
.hidden{ display:none!important }

:where(a,button,input,select,textarea,[tabindex],summary):focus-visible{
  outline:2px solid var(--esmalte);
  outline-offset:2px;
}
:where(a,button,input,select,textarea):focus:not(:focus-visible){ outline:none }

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   ÁTOMOS DA PLAQUETA
   ============================================================ */

/* rótulo de campo — a unidade atômica */
.rot,.rotulo{
  font-family:var(--din);font-size:var(--t-micro);font-weight:var(--p-semi);
  text-transform:uppercase;letter-spacing:var(--tr-caixa-alta);
  color:var(--gravado-3);white-space:nowrap;
}
/* todo número é tabular: coluna de valor tem que alinhar */
.val,.num{ font-variant-numeric:tabular-nums }
.cod{ font-family:var(--cod);font-size:var(--t-micro);letter-spacing:-.02em }

/* sulco: use estas duas em vez de sombra */
.sulco-b{ border-bottom:1px solid var(--sulco); box-shadow:0 1px 0 var(--sulco-luz) }
.sulco-t{ border-top:1px solid var(--sulco); box-shadow:0 -1px 0 var(--sulco-luz) }

/* chanfro da chapa — 4 cantos */
.chanfro{
  clip-path:polygon(var(--chanfro) 0,calc(100% - var(--chanfro)) 0,100% var(--chanfro),
                    100% calc(100% - var(--chanfro)),calc(100% - var(--chanfro)) 100%,
                    var(--chanfro) 100%,0 calc(100% - var(--chanfro)),0 var(--chanfro));
}

/* ============================================================
   PRIMITIVAS
   ============================================================ */

/* --- Botão: DIN em caixa alta, canto vivo, aresta de luz ----- */
.btn,.btn-sm{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--din);font-size:12px;font-weight:var(--p-semi);
  letter-spacing:.08em;text-transform:uppercase;
  min-height:var(--alvo);padding:0 var(--s4);
  border:1px solid var(--esmalte-forte);border-radius:var(--r-sm);
  background:var(--esmalte);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:background var(--dur) var(--ease);
}
.btn{ width:100% }
.btn:hover,.btn-sm:hover{ background:var(--esmalte-forte) }
.btn:active,.btn-sm:active{ background:#00552a;box-shadow:none }
.btn:disabled,.btn-sm:disabled{
  background:var(--chapa-campo);color:#8d949b;border-color:var(--sulco);
  box-shadow:none;cursor:not-allowed;
}

.btn-out{
  background:var(--chapa-clara);color:var(--gravado-2);border-color:var(--sulco);
  box-shadow:inset 0 1px 0 var(--sulco-luz);
}
.btn-out:hover{ background:#fff;color:var(--gravado) }
.btn-out:active{ background:var(--chapa-campo) }
.btn-out:disabled{ background:var(--chapa-clara);color:#8d949b }

.btn-del{ background:var(--chapa-clara);color:var(--tarja);border-color:var(--tarja-linha) }
.btn-del:hover{ background:var(--tarja-fundo);color:var(--tarja) }

.btn[aria-busy="true"],.btn-sm[aria-busy="true"]{ color:transparent;position:relative;pointer-events:none }
.btn[aria-busy="true"]::after,.btn-sm[aria-busy="true"]::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:girar .6s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg) } }

/* --- Campo: rebaixado na chapa ------------------------------- */
.campo{ display:block;margin-bottom:var(--s3) }
.campo>label{
  display:block;font-family:var(--din);font-size:var(--t-micro);font-weight:var(--p-semi);
  text-transform:uppercase;letter-spacing:var(--tr-caixa-alta);
  color:var(--gravado-3);margin-bottom:var(--s1);
}
.campo input,.campo select{
  width:100%;min-height:var(--alvo);padding:0 var(--s3);
  border:1px solid var(--sulco);border-radius:var(--r-sm);
  background:var(--chapa-clara);color:var(--gravado);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.045);
}
.campo input::placeholder{ color:var(--gravado-3) }
.campo input:focus-visible,.campo select:focus-visible{
  outline:none;border-color:var(--esmalte);box-shadow:0 0 0 2px var(--esmalte-anel);
}

/* --- Carimbo: estado estampado dentro de um quadro ----------- */
.carimbo{
  display:inline-block;
  font-family:var(--din);font-size:var(--t-micro);font-weight:var(--p-semi);
  letter-spacing:var(--tr-caixa-alta);text-transform:uppercase;
  color:var(--gravado-2);padding:2.5px 8px;
  box-shadow:inset 0 0 0 1px currentColor;
}
.carimbo.ok      { color:var(--esmalte-cod);background:var(--esmalte-fundo) }
.carimbo.perdido { color:var(--tarja);background:var(--tarja-fundo) }
.carimbo.atencao { color:var(--alerta);background:var(--alerta-tint) }

/* --- Pílula / etiqueta (compat) ------------------------------ */
.pill,.tag,.badge-min{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--din);font-size:var(--t-micro);font-weight:var(--p-semi);
  letter-spacing:.06em;padding:2px 8px;white-space:nowrap;border-radius:var(--r-sm);
}
.tag,.badge-min{ background:var(--chapa-campo);box-shadow:inset 0 0 0 1px var(--sulco);color:var(--gravado-2) }
.pill.sim{ background:var(--tarja-fundo);color:var(--tarja) }
.pill.nao{ background:var(--esmalte-fundo);color:var(--esmalte-cod) }

/* --- Avatar: quadrado de canto vivo, iniciais em DIN --------- */
.avatar,.mini{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  position:relative;border-radius:var(--r-sm);color:#fff;overflow:visible;
  font-family:var(--din);font-weight:var(--p-semi);letter-spacing:.04em;line-height:1;
}
.avatar{ width:28px;height:28px;font-size:var(--t-micro);background:var(--anod) }
.mini{ width:24px;height:24px;font-size:var(--t-nano);background:#5a6675 }
.avatar.foto,.mini.foto{ padding:0 }
.avatar.foto img,.mini.foto img{ width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm) }

/* --- Registro (tabela) --------------------------------------- */
table{
  width:100%;border-collapse:collapse;background:var(--chapa-clara);
  table-layout:fixed;
}
th{
  position:relative;text-align:left;padding:9px var(--s3);
  font-family:var(--din);font-size:10px;font-weight:var(--p-semi);
  letter-spacing:.15em;text-transform:uppercase;color:var(--gravado-3);
  background:var(--chapa-campo);white-space:nowrap;
  border-bottom:1px solid var(--sulco);box-shadow:0 1px 0 var(--sulco-luz);
}
td{
  padding:10px var(--s3);font-size:var(--t-sm);vertical-align:middle;
  border-bottom:1px solid var(--sulco);box-shadow:0 1px 0 var(--sulco-luz);
}
tbody tr:last-child td{ border-bottom:0;box-shadow:none }
tbody tr:hover>td{ background:#fff }

/* --- Estado vazio -------------------------------------------- */
.vazio-estado{
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding:var(--s8) var(--s5);text-align:center;color:var(--gravado-2);
}
.vazio-estado .ve-t{
  font-family:var(--din);font-size:var(--t-base);font-weight:var(--p-semi);
  letter-spacing:.08em;text-transform:uppercase;color:var(--gravado);
}
.vazio-estado .ve-d{ font-size:var(--t-sm);max-width:46ch;line-height:var(--lh-corpo) }
.vazio-estado svg{ color:#a8b0b7 }

/* --- Esqueleto ------------------------------------------------ */
.sk{
  display:block;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--chapa-campo) 25%,#d6dbe0 37%,var(--chapa-campo) 63%);
  background-size:400% 100%;animation:sk 1.2s ease-in-out infinite;
}
@keyframes sk{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* --- Aviso ---------------------------------------------------- */
.aviso{
  background:var(--alerta-tint);border:1px solid var(--alerta-linha);
  color:var(--alerta-ink);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);font-size:var(--t-sm);line-height:var(--lh-corpo);
}

/* --- Ícone ---------------------------------------------------- */
svg.ic-svg{ flex:0 0 auto;vertical-align:-.14em }

/* --- Barra de módulo (banco, calc, painel) -------------------- */
/* flex-wrap (05/08/2026): sem ele o min-content desta barra era 369px — logo
   (38) + h1 (115) + "voltar" (133) + gaps + padding — e abaixo disso o layout
   viewport esticava além da tela. A PÁGINA INTEIRA deslocava e o lado direito
   saía do quadro, em qualquer módulo. Parecia bug dos filtros do banco; era
   daqui. Medido: a 320px o documento ia a 349px de largura. */
.topo-modulo{
  background:var(--anod);color:#fff;
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s2) var(--s5);
  border-bottom:2px solid var(--esmalte-vivo);
}
.topo-modulo img{ height:38px;width:auto }
.topo-modulo h1{ min-width:0 }
.topo-modulo h1{
  font-family:var(--din);font-size:var(--t-sub);margin:0;font-weight:var(--p-semi);
  letter-spacing:.16em;text-transform:uppercase;line-height:var(--lh-densa);
}
.topo-modulo .volta{
  margin-left:auto;color:var(--anod-txt);text-decoration:none;
  font-family:var(--din);font-size:12px;font-weight:var(--p-semi);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  /* media 26px de altura — abaixo do alvo de 36px do produto */
  display:inline-flex;align-items:center;min-height:36px;
  padding:0 var(--s2);
}
.topo-modulo .volta:hover{ color:#fff;background:var(--anod-alto) }
.topo-modulo .volta:focus-visible{ outline:2px solid #fff;outline-offset:2px }

/* --- Aviso flutuante (toast): substitui o alert() -------------
   Bloco anodizado com filete de estado no topo, a mesma gramática
   da barra de módulo. Some sozinho; não interrompe o trabalho.
   Sombra é legítima aqui: está realmente por cima da chapa. */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);
  z-index:1000;display:flex;align-items:center;gap:10px;
  max-width:min(520px,calc(100vw - 32px));
  padding:12px var(--s4);
  background:var(--anod);color:#fff;
  border-top:2px solid var(--tarja);
  box-shadow:var(--sh-3);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-lenta) var(--ease),transform var(--dur-lenta) var(--ease);
}
.toast.show{ opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto }
.toast.ok{ border-top-color:var(--esmalte-vivo) }
.toast-ic{
  flex:0 0 auto;width:20px;height:20px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--din);font-weight:var(--p-forte);font-size:12px;line-height:1;
  background:var(--tarja);color:#fff;
}
.toast.ok .toast-ic{ background:var(--esmalte) }
.toast-txt{ font-family:var(--val);font-size:var(--t-sm);line-height:var(--lh-densa) }