/* Ficha técnica nova — criada junto com o cadastro do produto (Fila de Cadastro).
   Quadro grande (abre no <body>) + o bloco "Ficha técnica" do produto cadastrado na Fila.
   Decisão: montar a ficha a partir do padrão da casa ou de um produto parecido, conferir
   consumo, cor e valor contra o custo combinado e gravar no ERP. */

.ftn-modal {
  --ftn-ink: #24313b; --ftn-muted: #667085; --ftn-line: #e2e7eb; --ftn-soft: #f6f8fa;
  --ftn-good: #14653a; --ftn-good-bg: #e7f5ec; --ftn-warn: #8a5a0a; --ftn-warn-bg: #fff6e0;
  --ftn-danger: #9d2b2b; --ftn-danger-bg: #fdecec; --ftn-accent: #9d2631;
  /* a busca compartilhada (acordo_mp_comum) lê estas */
  --bon-line: var(--ftn-line); --bon-muted: var(--ftn-muted);
  color: var(--ftn-ink);
}
.ftn-modal .modal-dialog { max-width: 1180px; }
.ftn-modal .modal-header { align-items: flex-start; gap: 12px; }
.ftn-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ftn-titulo h5 { margin: 0; font-size: 1rem; font-weight: 600; }
.ftn-titulo small { color: var(--ftn-muted); font-size: .76rem; overflow-wrap: anywhere; }
/* coluna única que não cresce com a tabela: quem rola de lado é o .ftn-rola, nunca o quadro */
.ftn-modal .modal-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; background: #fff; }
.ftn-modal .modal-body > * { min-width: 0; }
.ftn-modal .modal-body.ftn-carregando { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* situação: cores, fabricante, custo combinado */
.ftn-situacao { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--ftn-muted); }
.ftn-situacao b { color: var(--ftn-ink); font-weight: 600; }
.ftn-cores-chips { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
.ftn-cor-chip { display: inline-flex; align-items: center; gap: 4px; }
.ftn-sw { width: 11px; height: 11px; flex: none; display: inline-block; vertical-align: -1px; }
.ftn-sw rect { stroke: rgba(0,0,0,.25); stroke-width: 1; }
.ftn-sw--sem rect { fill: #fff; stroke-dasharray: 2 1; }
.ftn-faixa { border: 1px solid var(--ftn-line); border-radius: 6px; padding: 8px 10px; font-size: .78rem; display: flex; gap: 8px; align-items: flex-start; }
.ftn-faixa .bi { flex: none; margin-top: 1px; }
.ftn-faixa--info { background: #eef4fb; border-color: #c9dbef; color: #1b3f66; }
.ftn-faixa--warn { background: var(--ftn-warn-bg); border-color: #f0d9a8; color: var(--ftn-warn); }
.ftn-faixa--erro { background: var(--ftn-danger-bg); border-color: #f0b4b4; color: var(--ftn-danger); }

/* começar de: dois botões grandes */
.ftn-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ftn-modo { text-align: left; border: 1px solid var(--ftn-line); border-radius: 8px; background: #fff; padding: 8px 12px;
  display: grid; gap: 2px; color: var(--ftn-ink); }
.ftn-modo b { font-size: .86rem; display: flex; align-items: center; gap: 6px; }
.ftn-modo small { color: var(--ftn-muted); font-size: .74rem; line-height: 1.35; }
.ftn-modo:hover { border-color: #c4ccd3; }
.ftn-modo.is-on { border-color: var(--ftn-accent); box-shadow: inset 0 0 0 1px var(--ftn-accent); background: #fff8f8; }
.ftn-modo:focus-visible { outline: 2px solid var(--ftn-accent); outline-offset: 1px; }

/* produtos parecidos */
.ftn-origens { border: 1px solid var(--ftn-line); border-radius: 8px; padding: 8px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ftn-origens-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: .8rem; }
.ftn-origens-head span { color: var(--ftn-muted); font-size: .74rem; }
.ftn-origens-lista { display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.ftn-origem { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: center;
  border: 1px solid var(--ftn-line); border-radius: 6px; padding: 6px 8px; font-size: .78rem; }
.ftn-origem-nome { min-width: 0; }
.ftn-origem-nome b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftn-origem-nome small { color: var(--ftn-muted); font-size: .72rem; }
.ftn-origem-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftn-origem-num small { display: block; color: var(--ftn-muted); font-size: .7rem; }
.ftn-badge { display: inline-block; font-size: .66rem; padding: 0 5px; border-radius: 3px; background: var(--ftn-good-bg); color: var(--ftn-good);
  border: 1px solid #a9d9bd; margin-right: 4px; vertical-align: 1px; }
.ftn-copiando { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--ftn-line); border-radius: 6px; padding: 6px 10px; background: var(--ftn-soft); font-size: .78rem; }
.ftn-link { border: 0; background: none; padding: 0; color: var(--ftn-accent); text-decoration: underline; font-size: .76rem; }

/* seções: matéria-prima e serviços */
.ftn-sec { border: 1px solid var(--ftn-line); border-radius: 8px; padding: 8px 10px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.ftn-sec-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ftn-sec-head h6 { margin: 0; font-size: .86rem; font-weight: 600; }
.ftn-sec-head span { font-size: .74rem; color: var(--ftn-muted); }
.ftn-rola { overflow-x: auto; min-width: 0; position: relative; }   /* relative: o texto oculto do cabeçalho (absolute) fica recortado aqui */
.ftn-tab { width: 100%; border-collapse: collapse; font-size: .78rem; min-width: 640px; }
.ftn-tab th { font-size: .7rem; font-weight: 600; color: var(--ftn-muted); text-transform: none; border-bottom: 1px solid var(--ftn-line);
  padding: 4px 6px; text-align: left; white-space: nowrap; }
.ftn-tab td { border-bottom: 1px solid var(--ftn-line); padding: 5px 6px; vertical-align: top; }
.ftn-tab tr:last-child td { border-bottom: 0; }
.ftn-tab .ftn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftn-tab .ftn-acao { width: 30px; text-align: center; }
.ftn-mat b { display: block; font-weight: 600; }
.ftn-mat small { color: var(--ftn-muted); font-size: .7rem; }
.ftn-nota { display: block; font-size: .7rem; color: var(--ftn-warn); margin-top: 2px; }
.ftn-qtd { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.ftn-qtd input, .ftn-valor input { width: 86px; text-align: right; font-variant-numeric: tabular-nums; }
.ftn-qtd span { min-width: 26px; color: var(--ftn-muted); font-size: .72rem; }
.ftn-valor { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.ftn-valor small { display: block; color: var(--ftn-muted); font-size: .68rem; text-align: right; }
.ftn-campo-erro { border-color: var(--ftn-danger) !important; box-shadow: 0 0 0 .15rem rgba(157,43,43,.15) !important; }
.ftn-cores-btn { border: 1px solid var(--ftn-line); background: #fff; border-radius: 5px; padding: 2px 8px; font-size: .72rem; white-space: nowrap; color: var(--ftn-ink); }
.ftn-cores-btn.is-falta { border-color: #f0d9a8; background: var(--ftn-warn-bg); color: var(--ftn-warn); }
.ftn-cores-btn .bi { margin-right: 3px; }
.ftn-sem-cor { color: var(--ftn-muted); font-size: .72rem; }
.ftn-cores-linha td { background: var(--ftn-soft); }
.ftn-cores-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 12px; padding: 4px 0; }
.ftn-cor { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px; align-items: center; font-size: .74rem; }
.ftn-cor label { display: flex; align-items: center; gap: 5px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ftn-cor select { font-size: .74rem; }
.ftn-cores-acoes { display: flex; gap: 12px; flex-wrap: wrap; font-size: .72rem; color: var(--ftn-muted); padding-bottom: 2px; }
.ftn-remover { border: 0; background: none; color: var(--ftn-muted); padding: 2px 4px; border-radius: 4px; }
.ftn-remover:hover, .ftn-remover:focus-visible { color: var(--ftn-danger); background: var(--ftn-danger-bg); outline: none; }
.ftn-vazio { font-size: .78rem; color: var(--ftn-muted); padding: 6px 2px; }
.ftn-incluir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-width: 560px; }
.ftn-incluir label { font-size: .72rem; color: var(--ftn-muted); margin: 0; }
.ftn-fonte { font-size: .72rem; color: var(--ftn-muted); }
.ftn-serv-forn { color: var(--ftn-muted); font-size: .74rem; }

/* avisos */
.ftn-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ftn-avisos:empty { display: none; }
.ftn-avisos li { display: flex; gap: 6px; align-items: flex-start; font-size: .74rem; padding: 6px 8px; border-radius: 6px;
  background: var(--ftn-warn-bg); border: 1px solid #f0d9a8; color: var(--ftn-warn); }
.ftn-avisos li .bi { flex: none; margin-top: 1px; }
.ftn-avisos li.ftn-info { background: #eef4fb; border-color: #c9dbef; color: #1b3f66; }
.ftn-como { font-size: .76rem; color: var(--ftn-muted); }
.ftn-como summary { cursor: pointer; color: var(--ftn-ink); }
.ftn-como ul { margin: 4px 0 0; padding-left: 18px; }

/* rodapé: o custo que vai nascer e a ação */
.ftn-modal .modal-footer { justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; position: sticky; bottom: 0; background: #fff; }
.ftn-totais { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; font-size: .76rem; color: var(--ftn-muted); min-width: 0; }
.ftn-total { display: grid; }
.ftn-total span { font-size: .68rem; }
.ftn-total strong { font-size: .95rem; color: var(--ftn-ink); font-variant-numeric: tabular-nums; }
.ftn-total small { font-size: .68rem; font-variant-numeric: tabular-nums; }
.ftn-total--good strong { color: var(--ftn-good); }
.ftn-total--warn strong { color: var(--ftn-warn); }
.ftn-botoes { display: flex; gap: 8px; margin-left: auto; }
.ftn-erro-msg { color: var(--ftn-danger); font-size: .78rem; flex-basis: 100%; }
.ftn-erro-msg:empty { display: none; }

/* conferir antes de gravar e o resultado */
.ftn-confirma { border: 1px solid #c9dbef; background: #eef4fb; border-radius: 8px; padding: 10px 12px; font-size: .8rem; color: #1b3f66; display: grid; gap: 4px; }
.ftn-confirma b { color: #12304f; }
.ftn-ok { border: 1px solid #a9d9bd; background: var(--ftn-good-bg); color: var(--ftn-good); border-radius: 8px; padding: 10px 12px;
  font-size: .82rem; display: grid; gap: 4px; }
.ftn-ok b { font-size: .9rem; }
.ftn-ok-num { font-variant-numeric: tabular-nums; }

/* bloco "Ficha técnica" do produto cadastrado, na Fila */
.ftn-bloco { border-top: 1px solid #e5e8ed; margin-top: .55rem; padding-top: .5rem; display: grid; gap: .35rem; font-size: .78rem; }
.ftn-bloco-titulo { font-weight: 600; font-size: .78rem; color: #24313b; display: flex; align-items: center; gap: 6px; }
.ftn-bloco-linha { display: flex; justify-content: space-between; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.ftn-bloco-estado { display: flex; align-items: flex-start; gap: 6px; min-width: 0; color: #4b5563; }
.ftn-bloco-estado .bi { flex: none; margin-top: 1px; }
.ftn-bloco-estado code { font-size: .74rem; }
.ftn-bloco-estado--ok .bi { color: #14653a; }
.ftn-bloco-estado--falta .bi { color: #8a5a0a; }
.ftn-bloco-estado--erro { color: #9d2b2b; }
.ftn-bloco-num { font-variant-numeric: tabular-nums; }
.ftn-bloco-carregando { color: #667085; }

@media (max-width: 767.98px) {
  .ftn-modos { grid-template-columns: 1fr; }
  .ftn-origem { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ftn-origem-num--linhas { display: none; }
  .ftn-cor { grid-template-columns: 1fr; }
  .ftn-botoes { margin-left: 0; width: 100%; }
  .ftn-botoes .btn { flex: 1; }
}

/* Ficha do MPC editada na ficha completa (quadro no <body>; cores e botões de .ftmt-modal,
   de ficha_tecnica.css). Botão "Editar a ficha do MPC" no subtotal do MPC, na tabela de materiais. */
.ftcm-abrir { border: 0; background: none; padding: 0 0 0 8px; color: #9d2631; font-size: .74rem; text-decoration: underline; }
.ftcm-abrir .bi { margin-right: 2px; }
.ftcm-modal .modal-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.ftcm-modal .modal-body > * { min-width: 0; }
.ftcm-modal .modal-title small { display: block; margin-top: 2px; }
.ftcm-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ftcm-num { border: 1px solid var(--ftmt-line); border-radius: 6px; padding: 6px 10px; min-width: 0; }
.ftcm-num span { display: block; font-size: .7rem; color: var(--ftmt-muted); }
.ftcm-num strong { display: block; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--ftmt-ink); }
.ftcm-num small { display: block; font-size: .7rem; color: var(--ftmt-muted); }
.ftcm-num--warn strong { color: #8a5a0a; }
.ftcm-faixa { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  border: 1px solid #f0d9a8; background: #fff6e0; color: #8a5a0a; border-radius: 6px; padding: 8px 10px; font-size: .78rem; }
.ftcm-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border: 1px solid var(--ftmt-line); border-radius: 8px; padding: 8px 10px 10px; }
.ftcm-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ftcm-sec-head h6 { margin: 0; font-size: .86rem; font-weight: 600; }
.ftcm-sec-head span { font-size: .74rem; color: var(--ftmt-muted); }
.ftcm-rola { overflow-x: auto; position: relative; min-width: 0; }
.ftcm-tab { width: 100%; border-collapse: collapse; font-size: .78rem; min-width: 520px; }
.ftcm-tab th { font-size: .7rem; font-weight: 600; color: var(--ftmt-muted); border-bottom: 1px solid var(--ftmt-line); padding: 4px 6px; text-align: left; white-space: nowrap; }
.ftcm-tab td { border-bottom: 1px solid var(--ftmt-line); padding: 5px 6px; vertical-align: middle; }
.ftcm-tab tr:last-child td { border-bottom: 0; }
.ftcm-tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftcm-tab td b { display: block; font-weight: 600; }
.ftcm-tab td small { display: block; color: var(--ftmt-muted); font-size: .7rem; }
.ftcm-tab .ftmt-col-acoes { white-space: nowrap; text-align: right; }
.ftcm-tab .ftmt-col-acoes .btn { margin-right: 4px; }
.ftcm-valor { width: 92px; text-align: right; font-variant-numeric: tabular-nums; display: inline-block; }
.ftcm-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ftcm-add select { width: auto; max-width: 220px; }
.ftcm-como { font-size: .74rem; color: var(--ftmt-muted); }
.ftcm-como summary { cursor: pointer; color: var(--ftmt-ink); }
.ftcm-como p { margin: 4px 0 0; }
.ftcm-erro { color: #9d2b2b; font-size: .78rem; margin-right: auto; }
.ftcm-erro:empty { display: none; }
@media (max-width: 767.98px) {
  .ftcm-resumo { grid-template-columns: 1fr; }
}

/* Ficha do produto lida agora no ERP — aberta pelo bloco "Ficha técnica" da Fila (quadro no
   <body>; base do .ftcm-modal acima e cores de .ftmt-modal). Decisão: a ficha está pronta, ou o
   que corrigir agora — sem esperar a cópia do ERP. */
.ftfe-modal .modal-dialog { max-width: 1080px; }
.ftfe-modal .modal-body.ftfe-relendo { opacity: .55; pointer-events: none; transition: opacity .15s; }
.ftfe-lido { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap;
  font-size: .74rem; color: var(--ftmt-muted); }
.ftfe-lido .bi { color: var(--ftmt-good); margin-right: 2px; }
.ftfe-link { border: 0; background: none; padding: 0; color: #9d2631; text-decoration: underline; font-size: .74rem; }
.ftcm-resumo.ftfe-resumo--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* sem custo do briefing (MPC) */
.ftfe-num--good strong { color: var(--ftmt-good); }
.ftfe-num--warn strong { color: var(--ftmt-warn); }
.ftfe-pend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ftfe-pend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
  border: 1px solid #f0d9a8; background: #fff6e0; color: #6b4708; border-radius: 6px; padding: 7px 10px; font-size: .78rem; }
.ftfe-pend li > .bi { align-self: start; margin-top: 2px; }
.ftfe-pend b { font-weight: 600; }
.ftfe-pend-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ftfe-pend-acoes .btn { white-space: nowrap; }
.ftfe-nada { color: var(--ftmt-muted); font-size: .76rem; margin: 0; }
.ftfe-falta { color: var(--ftmt-warn); font-weight: 600; }
.ftcm-tab tr.ftfe-marca td { background: #fffaf0; }
.ftcm-tab tr.ftfe-marca td:first-child { box-shadow: inset 3px 0 0 #e0a43a; }
@media (max-width: 767.98px) {
  .ftcm-resumo.ftfe-resumo--2 { grid-template-columns: 1fr; }
  .ftfe-pend li { grid-template-columns: auto minmax(0, 1fr); }
  .ftfe-pend-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}