/* =====================================================================
   TsQualy V1551 — Módulo Fornecedores no PADRÃO VISUAL do sistema
   (Avaliação de Fornecimento + Cadastro de Fornecedores)
   Carregado DEPOIS das folhas do módulo. Só aparência: não muda HTML, rotas ou dados.
   Referências do padrão: padrao-visual-v1490 (tokens, botões, campos), padrao-cartao-v803
   (cabeçalho de cartão), padrao-selos-v804 (selos), padrao-tabelas-v804 (tabelas),
   padrao-botoes-global-v1118 (papéis dos botões).
   As cores das FAIXAS de atendimento continuam vindo da configuração de cada modelo (são dados).
   ===================================================================== */

/* 1. Cabeçalho de cartão com ações (título + botões na mesma linha) — mesmo desenho do V803:
      barra laranja fina, título 15px/700 azul-escuro, linha fina separando o conteúdo. */
#main .card > .fav-sec-topo:first-child,
#main .card > .fav-item-topo:first-child {
  display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 8px 12px !important;
  margin: 0 0 12px !important; padding: 0 0 10px !important; border-bottom: 1px solid #edf1f5 !important;
}
#main .card > .fav-sec-topo:first-child > h3,
#main .card > .fav-item-topo:first-child > h3 {
  display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 auto 0 0 !important; padding: 0 !important;
  font: 700 var(--tq-fs-secao)/1.25 var(--tq-fonte) !important; color: var(--tq-azul-900) !important;
  text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; background: none !important;
}
#main .card > .fav-sec-topo:first-child > h3::before,
#main .card > .fav-item-topo:first-child > h3::before {
  content: "" !important; display: block !important; flex: 0 0 3px !important; height: 18px !important;
  border-radius: 2px !important; background: var(--tq-laranja) !important;
}
#main .fav-sec-tit { font: 700 var(--tq-fs-secao)/1.25 var(--tq-fonte) !important; color: var(--tq-azul-900) !important; }

/* 2. Abas internas (Configuração) — mesmo desenho das abas do topo: texto azul, aba ativa sublinhada em laranja */
#main .fav-abas {
  display: flex !important; gap: 2px !important; border: 0 !important; border-bottom: 1px solid var(--tq-borda) !important;
  border-radius: 0 !important; background: transparent !important; overflow-x: auto; margin: 0 0 14px !important;
}
#main .fav-aba, #main .fav-aba + .fav-aba {
  border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: transparent !important;
  min-height: 40px; padding: 0 14px !important; margin-bottom: -1px; font: 600 var(--tq-fs-corpo)/1 var(--tq-fonte) !important;
  color: var(--tq-texto-2) !important; white-space: nowrap; box-shadow: none !important;
}
#main .fav-aba:hover { color: var(--tq-azul-900) !important; background: transparent !important; }
#main .fav-aba.is-on { color: var(--tq-azul-900) !important; border-bottom-color: var(--tq-laranja) !important; background: transparent !important; }

/* 3. Selos de situação — formato e cores do V804 */
#main .fav-selo, .fav-modal .fav-selo {
  display: inline-flex !important; align-items: center !important; height: 22px !important; padding: 0 10px !important; border-radius: 11px !important;
  border: 1px solid var(--mps-neutro-bd, #dce3ec) !important; background: var(--mps-neutro-bg, #eef1f5) !important; color: var(--mps-neutro-fg, #4f5b6d) !important;
  font: 600 12px/1 var(--tq-fonte) !important; white-space: nowrap !important; text-decoration: none !important;
}
#main .fav-selo--concluida, #main .fav-selo--concluido { color: var(--mps-normal-fg) !important; background: var(--mps-normal-bg) !important; border-color: var(--mps-normal-bd) !important; }
#main .fav-selo--em_andamento, #main .fav-selo--aberto { color: var(--mps-info-fg) !important; background: var(--mps-info-bg) !important; border-color: var(--mps-info-bd) !important; }
#main .fav-selo--pendente, #main .fav-selo--rascunho { color: var(--mps-atencao-fg) !important; background: var(--mps-atencao-bg) !important; border-color: var(--mps-atencao-bd) !important; }
#main .fav-selo--atrasada { color: var(--mps-critico-fg) !important; background: var(--mps-critico-bg) !important; border-color: var(--mps-critico-bd) !important; }
#main .fav-selo--cancelada, #main .fav-selo--cancelado { color: var(--mps-neutro-fg) !important; background: var(--mps-neutro-bg) !important; border-color: var(--mps-neutro-bd) !important; }
#main .fav-tag { border-radius: 11px !important; font: 600 var(--tq-fs-mini)/1.6 var(--tq-fonte) !important; color: var(--mps-info-fg) !important; background: var(--mps-info-bg) !important; border: 1px solid var(--mps-info-bd) !important; padding: 0 8px !important; }

/* 4. Indicadores (cards de número) — cartão branco do sistema, rótulo pequeno, número azul-escuro */
#main .fav-kpi {
  background: var(--tq-painel) !important; border: 1px solid var(--tq-borda) !important; border-radius: var(--tq-raio-cartao) !important;
  box-shadow: 0 1px 2px rgba(18, 49, 94, .05) !important; padding: 12px 16px !important; font-family: var(--tq-fonte) !important;
}
#main .fav-kpi > span { font: 600 var(--tq-fs-mini)/1.35 var(--tq-fonte) !important; color: var(--tq-texto-2) !important; text-transform: uppercase; letter-spacing: .3px !important; }
#main .fav-kpi > strong { font: 700 24px/1.15 var(--tq-fonte) !important; color: var(--tq-azul-900) !important; }
#main button.fav-kpi:hover { border-color: var(--tq-azul-600) !important; }
#main .fav-kpi--destaque { background: var(--tq-azul-800) !important; border-color: var(--tq-azul-800) !important; }
#main .fav-kpi--destaque > span { color: #c9d4e3 !important; } #main .fav-kpi--destaque > strong { color: #fff !important; }

/* 5. Botões próprios do módulo que não passam pelo padrão global — mesma medida e cor do botão secundário */
#main .fav-sel-btn-mais {
  min-height: var(--tq-altura-botao-p) !important; padding: 0 14px !important; border-radius: var(--tq-raio) !important;
  border: 1px solid #8db8f6 !important; background: #fff !important; color: var(--mp-action-blue, #1766b3) !important;
  font: 600 var(--tq-fs-rotulo)/1 var(--tq-fonte) !important; box-shadow: none !important;
}
#main .fav-sel-btn-mais:hover { background: var(--tq-azul-100) !important; }
#main .fav-link, .fav-modal .fav-link { color: var(--tq-azul-600) !important; font-weight: 600; }
#main .fav-link.fav-perigo, .fav-modal .fav-link.fav-perigo { color: var(--tq-vermelho) !important; }
#main button.secondary.fav-perigo { color: var(--mp-action-red, #dc3939) !important; border-color: var(--mp-action-red-border, #f0a8a4) !important; background: #fff !important; }
#main .fav-progresso i, #main .fav-sel-barra i { background: var(--tq-azul-600) !important; }

/* 6. Filtros e campos dentro do módulo — medida e foco do padrão (também nas janelas do módulo, que ficam fora do #main) */
.fav-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
.fav-modal select {
  min-height: var(--tq-altura-campo) !important; border: 1px solid var(--tq-borda-forte) !important; border-radius: var(--tq-raio) !important;
  font: 400 var(--tq-fs-corpo) var(--tq-fonte) !important; color: var(--tq-texto) !important; background: #fff; padding: 0 10px; box-sizing: border-box;
}
.fav-modal textarea { border: 1px solid var(--tq-borda-forte) !important; border-radius: var(--tq-raio) !important; font: 400 var(--tq-fs-corpo)/1.45 var(--tq-fonte) !important; padding: 8px 10px; }
.fav-modal input:focus, .fav-modal select:focus, .fav-modal textarea:focus {
  border-color: var(--tq-azul-600) !important; box-shadow: 0 0 0 3px rgba(23, 102, 179, .14) !important; outline: none !important;
}
#main .fav-campo > span, #main .fav-campo > legend, .fav-modal .fav-campo > span, .fav-modal .fav-campo > legend {
  font: 600 var(--tq-fs-rotulo)/1.3 var(--tq-fonte) !important; color: var(--tq-texto-2) !important;
}

/* 7. Janelas do módulo — mesmo cabeçalho, rodapé e botões das janelas do sistema */
.fav-modal { border-radius: var(--tq-raio-cartao) !important; font-family: var(--tq-fonte) !important; color: var(--tq-texto); }
.fav-modal-topo { padding: 14px 18px !important; border-bottom: 1px solid #edf1f5 !important; }
.fav-modal-topo h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 !important;
  font: 700 var(--tq-fs-secao)/1.25 var(--tq-fonte) !important; color: var(--tq-azul-900) !important;
}
.fav-modal-topo h3::before { content: ""; flex: 0 0 3px; height: 18px; border-radius: 2px; background: var(--tq-laranja); }
.fav-modal-rodape { border-top: 1px solid #edf1f5 !important; background: #fafbfd; }
.fav-modal-rodape button { min-height: var(--tq-altura-botao) !important; border-radius: var(--tq-raio) !important; font: 600 var(--tq-fs-corpo)/1 var(--tq-fonte) !important; }
.fav-modal-rodape button.primary { background: var(--tq-laranja) !important; border: 1px solid var(--tq-laranja) !important; color: #fff !important; }
.fav-modal-rodape button.primary:hover { background: var(--tq-laranja-hover) !important; border-color: var(--tq-laranja-hover) !important; }
.fav-modal-rodape button.secondary { background: #fff !important; border: 1px solid #8db8f6 !important; color: var(--mp-action-blue, #1766b3) !important; }
.fav-modal-rodape button.secondary:hover { background: var(--tq-azul-100) !important; }

/* 8. Avisos e notas — cores do padrão (atenção em âmbar, informação em azul) */
#main .fav-alerta { border-color: var(--mps-alerta-bd, #f3c99d) !important; background: var(--mps-alerta-bg, #fdecd9) !important; color: var(--mps-alerta-fg, #8a3b00) !important; border-radius: var(--tq-raio) !important; }
#main .fav-muted, .fav-modal .fav-muted { color: var(--tq-texto-3) !important; }
#main .fav-txt-alerta { color: var(--mps-alerta-fg, #8a3b00) !important; }
#main .fav-erro { color: var(--tq-vermelho) !important; }