/* ============================================================
   METALFLOW DESIGN SYSTEM — metalflow.css
   Fase 0 da reforma visual (2026-07-16).
   Fonte de verdade visual de TODAS as páginas do Metalflow.
   Referência viva: /Styleguide.html
   Regra de ouro: página nova ou reformada usa SÓ estas classes;
   CSS local fica pra layout específico da página, nunca pra
   redefinir botão/campo/tabela/cor.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Identidade: grafite/aço (base) + cobre (destaque da trefilaria) */
  --mf-ink:        #1a1a2e;  /* grafite — chrome, headers, botão secundário escuro */
  --mf-ink-2:      #2b2b45;  /* grafite claro — hover do ink */
  --mf-copper:     #b4713e;  /* cobre — ação primária, destaque */
  --mf-copper-2:   #9c5f31;  /* cobre escuro — hover */
  --mf-copper-soft:#f7ede4;  /* cobre 8% — fundos de destaque */

  --mf-bg:         #f4f6f9;  /* fundo de página */
  --mf-surface:    #ffffff;  /* cards, modais, tabelas */
  --mf-line:       #e3e8ee;  /* bordas e divisores */
  --mf-line-2:     #cfd7e0;  /* borda de input */

  --mf-text:       #1f2430;
  --mf-text-2:     #5b6472;  /* secundário / labels */
  --mf-text-3:     #8b93a1;  /* muted / placeholder */

  /* Semânticas — SÓ para estado, nunca decoração */
  --mf-ok:         #1e8e4e;  --mf-ok-soft:   #e6f5ec;
  --mf-warn:       #b97a11;  --mf-warn-soft: #fdf3e0;
  --mf-err:        #c0392b;  --mf-err-soft:  #fdecea;
  --mf-info:       #1565c0;  --mf-info-soft: #e8f1fb;

  /* Métricas únicas do sistema */
  --mf-radius:     8px;
  --mf-radius-sm:  6px;
  --mf-shadow:     0 1px 3px rgba(26,26,46,.08), 0 4px 14px rgba(26,26,46,.06);
  --mf-shadow-lg:  0 8px 30px rgba(26,26,46,.16);
  --mf-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mf-mono:       ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* Alturas FIXAS — botão e campo SEMPRE alinham lado a lado */
  --mf-h:          38px;     /* altura padrão de controle */
  --mf-h-sm:       30px;
  --mf-h-lg:       46px;     /* touch chão de fábrica */

  /* Escala de espaçamento (múltiplos de 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
}

/* ---------- 2. BASE ---------- */
.mf, .mf body { margin:0; padding:0; }
.mf{
  font-family:var(--mf-font); font-size:14px; line-height:1.45;
  color:var(--mf-text); background:var(--mf-bg);
  -webkit-font-smoothing:antialiased;
}
.mf *, .mf *::before, .mf *::after{ box-sizing:border-box; }
.mf h1{ font-size:20px; font-weight:700; margin:0 0 var(--sp-3); }
.mf h2{ font-size:16px; font-weight:700; margin:0 0 var(--sp-2); }
.mf h3{ font-size:14px; font-weight:600; margin:0 0 var(--sp-2); color:var(--mf-text-2); text-transform:uppercase; letter-spacing:.4px; }
.mf a{ color:var(--mf-info); text-decoration:none; }
.mf a:hover{ text-decoration:underline; }
.mf .muted{ color:var(--mf-text-3); }
.mf .mono{ font-family:var(--mf-mono); font-size:13px; }

/* Container full-width padrão da casa (exceção: mobile/operador usa .wrap-narrow) */
.mf .wrap{ max-width:100%; margin:0 auto; padding:18px; }
.mf .wrap-narrow{ max-width:480px; margin:0 auto; padding:16px; }

/* ---------- 3. BOTÕES ----------
   inline-flex + altura fixa = impossível desalinhar.
   Nunca usar <button> sem classe. */
.mf .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--mf-h); padding:0 16px; border-radius:var(--mf-radius);
  font:inherit; font-size:14px; font-weight:600; line-height:1;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, box-shadow .12s;
  user-select:none;
}
.mf .btn:focus-visible{ outline:2px solid var(--mf-copper); outline-offset:2px; }
.mf .btn:disabled{ opacity:.45; cursor:not-allowed; }

.mf .btn-primary{ background:var(--mf-copper); color:#fff; }
.mf .btn-primary:hover:not(:disabled){ background:var(--mf-copper-2); }

.mf .btn-dark{ background:var(--mf-ink); color:#fff; }
.mf .btn-dark:hover:not(:disabled){ background:var(--mf-ink-2); }

.mf .btn-outline{ background:var(--mf-surface); color:var(--mf-text); border-color:var(--mf-line-2); }
.mf .btn-outline:hover:not(:disabled){ border-color:var(--mf-copper); color:var(--mf-copper); }

.mf .btn-ghost{ background:transparent; color:var(--mf-text-2); }
.mf .btn-ghost:hover:not(:disabled){ background:rgba(26,26,46,.06); color:var(--mf-text); }

.mf .btn-danger{ background:var(--mf-err); color:#fff; }
.mf .btn-danger:hover:not(:disabled){ background:#a53125; }

.mf .btn-ok{ background:var(--mf-ok); color:#fff; }
.mf .btn-ok:hover:not(:disabled){ background:#187a41; }

.mf .btn-sm{ height:var(--mf-h-sm); padding:0 10px; font-size:12.5px; border-radius:var(--mf-radius-sm); }
.mf .btn-lg{ height:var(--mf-h-lg); padding:0 22px; font-size:15px; }  /* operador/touch */
.mf .btn-block{ width:100%; }

/* Grupo de botões: alinhamento e respiro garantidos */
.mf .btn-row{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.mf .btn-row .spacer{ flex:1; }

/* ---------- 4. CAMPOS ----------
   Mesma altura dos botões. Largura NUNCA é 100% por padrão —
   é a classe de tamanho que define (mata campo gigante). */
.mf .input, .mf .select, .mf .textarea{
  height:var(--mf-h); padding:0 10px; border:1px solid var(--mf-line-2);
  border-radius:var(--mf-radius); font:inherit; font-size:14px;
  color:var(--mf-text); background:var(--mf-surface);
  transition:border-color .12s, box-shadow .12s;
}
.mf .textarea{ height:auto; min-height:72px; padding:8px 10px; resize:vertical; }
.mf .input:focus, .mf .select:focus, .mf .textarea:focus{
  outline:none; border-color:var(--mf-copper); box-shadow:0 0 0 3px rgba(180,113,62,.15);
}
.mf .input::placeholder{ color:var(--mf-text-3); }
.mf .input:disabled, .mf .select:disabled{ background:var(--mf-bg); color:var(--mf-text-3); }
.mf .input.err, .mf .select.err{ border-color:var(--mf-err); }

/* Larguras padronizadas — escolher a MENOR que serve */
.mf .w-xs{ width:72px; }   /* qtd, % */
.mf .w-sm{ width:110px; }  /* data, código curto */
.mf .w-md{ width:180px; }  /* item, lote */
.mf .w-lg{ width:280px; }  /* nome, e-mail */
.mf .w-full{ width:100%; } /* só quando o campo é o protagonista da linha */

/* Formulário em grade: label em cima, campos alinhados por linha */
.mf .form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, max-content)); gap:var(--sp-3) var(--sp-4); align-items:end; }
.mf .field{ display:flex; flex-direction:column; gap:4px; }
.mf .field > label{ font-size:12px; font-weight:600; color:var(--mf-text-2); text-transform:uppercase; letter-spacing:.3px; }
.mf .field .hint{ font-size:11.5px; color:var(--mf-text-3); }

/* ---------- 5. TABELAS ----------
   Cabeçalho fixo, zebra, quebra CONTROLADA (mata linha quebrada). */
.mf .table-wrap{ overflow:auto; border:1px solid var(--mf-line); border-radius:var(--mf-radius); background:var(--mf-surface); }
.mf table.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.mf .table th{
  position:sticky; top:0; z-index:1;
  background:var(--mf-ink); color:#fff; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.4px;
  padding:9px 10px; text-align:left; white-space:nowrap;
}
.mf .table td{ padding:8px 10px; border-top:1px solid var(--mf-line); vertical-align:middle; }
.mf .table tbody tr:nth-child(even){ background:#f8fafc; }
.mf .table tbody tr:hover{ background:var(--mf-copper-soft); }
.mf .table td.num, .mf .table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.mf .table td.nowrap{ white-space:nowrap; }
.mf .table td.trunc{ max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* célula longa NÃO quebra a linha: corta com … e title mostra o resto */

/* ---------- 6. CARDS / SEÇÕES ---------- */
.mf .card{ background:var(--mf-surface); border:1px solid var(--mf-line); border-radius:var(--mf-radius); box-shadow:var(--mf-shadow); padding:var(--sp-4); }
.mf .card + .card{ margin-top:var(--sp-4); }
.mf .card-head{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.mf .card-head h2{ margin:0; }
.mf .card-head .spacer{ flex:1; }

/* ---------- 7. CHIPS DE ESTADO ---------- */
.mf .chip{ display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px; border-radius:11px; font-size:11.5px; font-weight:700; letter-spacing:.2px; white-space:nowrap; }
.mf .chip-ok{   background:var(--mf-ok-soft);   color:var(--mf-ok); }
.mf .chip-warn{ background:var(--mf-warn-soft); color:var(--mf-warn); }
.mf .chip-err{  background:var(--mf-err-soft);  color:var(--mf-err); }
.mf .chip-info{ background:var(--mf-info-soft); color:var(--mf-info); }
.mf .chip-neutral{ background:#eef1f5; color:var(--mf-text-2); }

/* ---------- 8. BANNERS ---------- */
.mf .banner{ display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--mf-radius); font-size:13.5px; border:1px solid transparent; margin:var(--sp-2) 0; }
.mf .banner-ok{   background:var(--mf-ok-soft);   border-color:#bfe5cd; color:#155f36; }
.mf .banner-warn{ background:var(--mf-warn-soft); border-color:#f0dcb2; color:#7c5407; }
.mf .banner-err{  background:var(--mf-err-soft);  border-color:#f2c4be; color:#8e2b20; }
.mf .banner-info{ background:var(--mf-info-soft); border-color:#c4dcf5; color:#0e4c8c; }

/* ---------- 9. ABAS ---------- */
.mf .tabs{ display:flex; gap:2px; border-bottom:2px solid var(--mf-line); margin-bottom:var(--sp-4); }
.mf .tabs .tab{
  height:var(--mf-h); padding:0 16px; display:inline-flex; align-items:center;
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
  font:inherit; font-size:14px; font-weight:600; color:var(--mf-text-2); cursor:pointer;
}
.mf .tabs .tab:hover{ color:var(--mf-text); }
.mf .tabs .tab.active{ color:var(--mf-copper); border-bottom-color:var(--mf-copper); }

/* ---------- 10. MODAL ---------- */
.mf .modal-bg{ position:fixed; inset:0; background:rgba(26,26,46,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:9999; }
.mf .modal{ background:var(--mf-surface); border-radius:var(--mf-radius); box-shadow:var(--mf-shadow-lg); width:100%; max-width:640px; max-height:calc(100vh - 80px); overflow:auto; }
.mf .modal-head{ display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--mf-line); position:sticky; top:0; background:var(--mf-surface); }
.mf .modal-head h3{ margin:0; text-transform:none; font-size:15px; color:var(--mf-text); }
.mf .modal-body{ padding:16px; }
.mf .modal-foot{ display:flex; justify-content:flex-end; gap:var(--sp-2); padding:12px 16px; border-top:1px solid var(--mf-line); position:sticky; bottom:0; background:var(--mf-surface); }
.mf .modal-x{ margin-left:auto; background:none; border:none; font-size:18px; cursor:pointer; color:var(--mf-text-3); line-height:1; padding:4px; }
.mf .modal-x:hover{ color:var(--mf-text); }
.mf .hidden{ display:none !important; }

/* ---------- 11. UTILITÁRIOS (poucos, de propósito) ---------- */
.mf .flex{ display:flex; align-items:center; gap:var(--sp-2); }
.mf .flex-wrap{ flex-wrap:wrap; }
.mf .gap-1{ gap:var(--sp-1); } .mf .gap-3{ gap:var(--sp-3); } .mf .gap-4{ gap:var(--sp-4); }
.mf .mt-2{ margin-top:var(--sp-2); } .mf .mt-4{ margin-top:var(--sp-4); }
.mf .mb-2{ margin-bottom:var(--sp-2); } .mf .mb-4{ margin-bottom:var(--sp-4); }
.mf .right{ margin-left:auto; }
.mf .center{ text-align:center; }

/* Estado vazio: sempre orienta a próxima ação, nunca só "vazio" */
.mf .empty{ padding:36px 16px; text-align:center; color:var(--mf-text-3); }
.mf .empty b{ display:block; color:var(--mf-text-2); margin-bottom:4px; font-size:14px; }

/* ---------- 12. ACESSIBILIDADE / MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .mf *, .mf *::before, .mf *::after{ transition:none !important; animation:none !important; }
}

/* ---------- 13. RESPONSIVO ---------- */
@media (max-width: 720px){
  .mf .wrap{ padding:12px; }
  .mf .form-grid{ grid-template-columns:1fr 1fr; }
  .mf .btn-row .btn{ flex:1 1 auto; }
  .mf .w-lg{ width:100%; }
}