/* ─── Materiais / KITs (Tarefas 4 e 6) ─────────────────────────────────
   Vocabulário próprio do catálogo de materiais e do editor de KIT. Reaproveita
   o sistema visual já estabelecido: `.card`/`.tabela-admin` (tarja dourada de
   3px, cantos 2px, DESIGN.md), `.btn-*`, `.form-grupo`, `.modal-overlay`,
   `.fin-sugestoes` (financeiro.css, mesmo combobox de `caixa.js`). Só o
   painel lateral (spec §3.2/§3.3 — "painel lateral no desktop, tela cheia
   <768px") é novo: não existia casca de gaveta partilhada no sistema. */

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

/* ─── Painel lateral (gaveta) ───────────────────────────────────────── */
.fm-painel-overlay {
  justify-content: flex-end;
  padding: 0;
}
.fm-painel {
  width: 560px;
  max-width: 92vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
  border-top: none;
  border-left: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  animation: fm-entrar .18s ease-out;
}
@keyframes fm-entrar {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.fm-painel .modal-corpo { background: var(--cor-fundo); }

@media (max-width: 767px) {
  .fm-painel {
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-left: none;
    border-top: 3px solid var(--gold);
  }
  .fm-painel-overlay { align-items: stretch; }
}

/* ─── Cabeçalho/rodapé de tela (aba Materiais) ─────────────────────── */
.fm-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.fm-titulo {
  font-family: var(--fonte-serif);
  font-size: 24px;
  color: var(--navy);
  margin: 0 0 4px;
}
.fm-subtitulo {
  font-size: 12px;
  color: var(--cor-texto-secundario);
  margin: 0 0 18px;
  max-width: 62ch;
}

.fm-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fm-busca {
  flex: 1 1 240px;
  min-width: 180px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie);
  font-size: 13px;
}
.fm-busca:focus-visible, .fm-filtro:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.fm-filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fm-filtro {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie);
  font-size: 12px;
}

/* ─── Tabela de materiais ───────────────────────────────────────────── */
.fm-tabela-wrap { overflow-x: auto; }
.fm-tabela { min-width: 720px; }
.fm-tabela td.fm-acoes { text-align: right; white-space: nowrap; }
.fm-nome-cel { font-weight: 700; color: var(--navy); }
.fm-sku-cel { color: var(--cor-texto-secundario); font-size: 11px; }

.fm-paginacao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--cor-texto-secundario);
}
.fm-paginacao .btn { min-height: 44px; min-width: 44px; }

/* ─── Estados vazio / erro / carregando ────────────────────────────── */
.fm-vazio, .fm-carregando {
  text-align: center;
  padding: 46px 20px;
  color: var(--cor-texto-secundario);
}
.fm-vazio i, .fm-carregando i { display: block; font-size: 28px; margin-bottom: 10px; color: var(--gold); }
.fm-erro-resumo {
  border: 1px solid var(--cor-perigo);
  border-left: 3px solid var(--cor-perigo);
  border-radius: var(--raio-borda);
  background: rgba(165,32,32,.08);
  color: var(--cor-perigo);
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: 12px;
}

/* ─── Badges de estado de custo (cor nunca sozinha — sempre com ícone/texto) */
.fm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fm-badge-pendente { background: rgba(181,137,58,.16); color: var(--cor-aviso); }
.fm-badge-ok { background: rgba(61,107,74,.14); color: var(--cor-sucesso); }
.fm-badge-inativo { background: rgba(9,16,38,.08); color: var(--cor-texto-secundario); }
.fm-badge-alerta { background: rgba(165,32,32,.14); color: var(--cor-perigo); }
.fm-custo-oculto { color: var(--cor-texto-secundario); font-style: italic; font-size: 12px; }

/* ─── Formulário do material ────────────────────────────────────────── */
.fm-toggle-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 16px;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--gold);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie);
}
.fm-toggle-linha p { margin: 2px 0 0; font-size: 11px; color: var(--cor-texto-secundario); }
.fm-campos-estoque[hidden] { display: none; }

.fm-embalagens { margin-top: 6px; }
.fm-embalagem-linha {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) .8fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  margin-bottom: 8px;
  background: var(--cor-superficie);
}
.fm-embalagem-linha input[type="text"],
.fm-embalagem-linha input[type="number"] {
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  font-size: 12px;
}
.fm-embalagem-preview {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--cor-texto-secundario);
  background: var(--cor-fundo);
  border-radius: var(--raio-borda);
  padding: 6px 9px;
}
.fm-embalagem-remover, .fm-linha-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie);
  color: var(--cor-perigo);
  cursor: pointer;
}
.fm-embalagem-remover:focus-visible, .fm-linha-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

@media (max-width: 767px) {
  .fm-embalagem-linha { grid-template-columns: 1fr; }
}

/* ─── Editor de KIT ─────────────────────────────────────────────────── */
.fm-kit-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--cor-borda);
}
.fm-kit-cabecalho h3 { margin: 0 0 3px; font-family: var(--fonte-serif); font-size: 17px; color: var(--navy); }
.fm-kit-meta { font-size: 11px; color: var(--cor-texto-secundario); display: flex; gap: 10px; flex-wrap: wrap; }

.fm-kit-linha {
  display: grid;
  grid-template-columns: minmax(180px,1.6fr) .7fr .5fr auto minmax(120px,1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--cor-borda);
}
.fm-kit-linha.fm-kit-linha-cab {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-texto);
  background: var(--cor-fundo);
}
/* `:not([type="checkbox"])` — sem isto, o checkbox de "Confirmado" herda
   `width:100%` e ocupa a coluna inteira (o glifo fica invisível, mas a
   caixa clicável estica-se), empurrando o texto "Confirmado" para fora do
   `<label>` flex, sobre a coluna "Observação" ao lado. Mesmo bug já
   documentado e corrigido globalmente em `base.css` (página Tarefas da
   Equipe) — esta regra, mais específica, escapava a esse arranjo. */
.fm-kit-linha input:not([type="checkbox"]), .fm-kit-linha select {
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  font-size: 12px;
  width: 100%;
}
.fm-kit-unidade { font-size: 12px; color: var(--cor-texto-secundario); }
.fm-kit-acoes-linha { display: flex; gap: 4px; }
.fm-kit-linha .fm-material-busca { position: relative; }
.fm-kit-material-wrap .fm-material-sugestoes {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra);
  max-height: 220px;
  overflow-y: auto;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.fm-kit-material-wrap { position: relative; }

.fm-kit-rodape {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0 0;
  margin-top: 12px;
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}
.fm-kit-contagem { font-size: 12px; color: var(--cor-texto-secundario); display: flex; gap: 14px; flex-wrap: wrap; }
.fm-kit-contagem strong { color: var(--navy); }
.fm-kit-pendencia { color: var(--cor-perigo); font-weight: 700; }

.fm-kit-banner {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: var(--raio-borda);
  border-left: 3px solid var(--gold);
  background: rgba(181,137,58,.16);
  color: var(--cor-aviso);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fm-kit-banner i { flex: none; }

@media (max-width: 767px) {
  .fm-kit-linha { grid-template-columns: 1fr; }
  .fm-kit-linha.fm-kit-linha-cab { display: none; }
  .fm-kit-acoes-linha { justify-content: flex-end; }
}


/* ===================================================================
   Materiais e Margem (Tarefa 16) — prefixo `mm-`.

   Nasceu como `<style>` embutido em `relatorios_materiais.js`: o agente
   que o escreveu tinha `index.html` proibido, e um ficheiro CSS sem
   `<link>` seria invisivel no browser. Movido para aqui na consolidacao,
   quando o link passou a existir. Sem colisao com o prefixo `fm-` acima.
   =================================================================== */
.mm-painel { display: flex; flex-direction: column; gap: 18px; }
.mm-filtros-resumo { display: none; }
.mm-filtros { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.mm-filtro { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--cor-texto-secundario); min-width: 160px; }
.mm-filtro select, .mm-filtro input { min-height: 44px; }
.mm-exportar .btn, .mm-vazio-grafico .btn, .mm-vazio-tabela .btn { min-height: 44px; }
.mm-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mm-kpi {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-top: 3px solid var(--gold);
  border-radius: var(--raio-borda); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.mm-kpi small { font-size: 11.5px; color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: .02em; }
.mm-kpi b { font-family: var(--fonte-serif); font-size: 22px; color: var(--navy); font-weight: 800; }
.mm-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.mm-status-ok { color: var(--cor-sucesso); }
.mm-status-aviso { color: var(--cor-aviso); }
.mm-status-perigo { color: var(--cor-perigo); }
.mm-status-neutro { color: var(--cor-texto-secundario); }
.mm-pendente {
  display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--cor-aviso);
  background: rgba(181,137,58,.12); border-radius: var(--raio-borda); padding: 2px 6px;
}
.mm-duas-colunas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.mm-panel {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-top: 3px solid var(--gold);
  border-radius: var(--raio-borda); padding: 14px 16px;
}
.mm-panel h3 { margin: 0 0 10px; font-size: 14px; color: var(--navy); }
.mm-grafico svg { width: 100%; height: auto; display: block; }
.mm-legenda { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.mm-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 10px; }
.mm-swatch:first-child { margin-left: 0; }
.mm-alt-tabular summary { cursor: pointer; font-size: 12px; color: var(--cor-texto-secundario); margin-top: 8px; }
.mm-vazio-grafico, .mm-vazio-tabela { text-align: center; padding: 24px 10px; color: var(--cor-texto-secundario); }
.mm-alertas { display: flex; flex-direction: column; gap: 8px; }
.mm-alerta { border-radius: var(--raio-borda); padding: 8px 10px; font-size: 12.5px; border-left: 3px solid var(--cor-borda-forte); }
.mm-alerta-perigo { border-left-color: var(--cor-perigo); background: rgba(165,32,32,.06); }
.mm-alerta-aviso { border-left-color: var(--cor-aviso); background: rgba(181,137,58,.08); }
.mm-sem-excecoes { color: var(--cor-sucesso); display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mm-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.mm-linha-alerta { background: rgba(165,32,32,.05); }
.mm-exportar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.mm-tabela-scroll { overflow-x: auto; }
@media (max-width: 1024px) {
  .mm-kpis { grid-template-columns: repeat(2, 1fr); }
  .mm-duas-colunas { grid-template-columns: 1fr; }
}
@media (min-width: 481px) {
  .mm-filtros-disclosure > .mm-filtros { display: flex !important; }
}
@media (max-width: 480px) {
  .mm-filtros-resumo {
    display: flex; align-items: center; min-height: 44px; padding: 8px 4px; cursor: pointer;
    font-weight: 700; color: var(--navy); list-style: none;
  }
  .mm-filtros-resumo::-webkit-details-marker { display: none; }
  .mm-filtros-resumo::after { content: '▾'; margin-left: 6px; color: var(--gold); }
  .mm-filtros-disclosure[open] .mm-filtros-resumo::after { content: '▴'; }
  .mm-filtros { flex-direction: column; align-items: stretch; }
  .mm-kpis { grid-template-columns: 1fr; }
  .mm-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mm-tabela-scroll table.mm-tabela thead { display: none; }
  .mm-tabela-scroll table.mm-tabela, .mm-tabela-scroll table.mm-tabela tbody, .mm-tabela-scroll table.mm-tabela tr { display: block; width: 100%; }
  .mm-tabela-scroll table.mm-tabela tr { border: 1px solid var(--cor-borda); border-top: 3px solid var(--gold); border-radius: var(--raio-borda); margin-bottom: 10px; padding: 8px 10px; }
  .mm-tabela-scroll table.mm-tabela td { display: flex; justify-content: space-between; gap: 10px; text-align: right; border: 0; padding: 4px 0; }
  .mm-tabela-scroll table.mm-tabela td[data-rotulo]::before { content: attr(data-rotulo); font-weight: 700; color: var(--cor-texto-secundario); text-align: left; }
}