/* ===== Paleta oficial Baumaster ===== */
:root {
  --brand-green-900:#183d26; --brand-green-800:#24522f; --brand-green-700:#2f63ee;
  --brand-green-600:#3d7d49; --brand-green-500:#6f93f5; --brand-green-100:#eaf4ec; --brand-green-50:#f4f9f5;
  --neutral-900:#18201b; --neutral-700:#4f5b53; --neutral-500:#7b867e; --neutral-300:#d8ded9;
  --neutral-200:#e7ebe8; --neutral-100:#f2f4f2; --neutral-50:#f8f9f8;
  --danger-700:#b33a32; --danger-100:#fdeceb; --warning-700:#a46b13; --warning-100:#fff4dc;
  --info-700:#315f8b; --info-100:#eaf2fa; --white:#ffffff;
  --stage-captured:#5278a8; --stage-waiting:#a88b45; --stage-quoting:#b87837; --stage-completed:#2f63ee;
}
:root {
  --bg: #f4f7f6;
  --surface: #ffffff;
  --surface-soft: #eef4f2;
  --ink: #162120;
  --muted: #61706d;
  --line: #d7e1de;
  --line-strong: #a8bbb6;
  --primary: #2f63ee;
  --primary-dark: #0b5f59;
  --primary-soft: #dff3ef;
  --warning: #b45309;
  --danger: #b33a32;
  --danger-soft: #fee4e2;
  --focus: #2563eb;
  --shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.72;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Logo da marca no topo (clicável → página inicial) */
.brand-link {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.brand-logo-svg {
  height: 34px;
  width: auto;
  display: block;
}

/* Cabecalho baixo em todo o site: a altura que ele ocupava saia da area de
   trabalho de todas as telas, e nenhuma delas precisa de um cabecalho alto. */
.topbar,
.supplier-header {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar h1,
.supplier-header h1,
.workspace-header h2,
.supplier-toolbar h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.supplier-header {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.supplier-header p {
  margin: 0;
  color: var(--muted);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.top-actions,
.workspace-actions,
.supplier-actions,
.form-actions,
.tool-row,
.supplier-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 0;
  position: relative;
  /* Sem transição no grid-template-columns: o navegador não interpola valores
     com minmax() e a barra ficava PRESA na largura antiga ao recolher — a
     coluna continuava 320px mesmo com a classe aplicada. Antes isso não
     aparecia porque recolher era display:none, que não anima mesmo. */
}

.sidebar {
  padding: 18px;
  background: #fbfdfc;
  border-right: 1px solid var(--line);
  overflow: auto;
}

/* Barra lateral recolhível */
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sidebar-head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #98a2b3;
  font-weight: 700;
}
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  color: #475467;
  flex: none;
}
.sidebar-toggle:hover {
  background: #f1f5f4;
}
/* ===== Bloco "Organização" dentro do negócio ==============================
   O pregão é o NEGÓCIO e a prefeitura é a ORGANIZAÇÃO que o contém, como no
   Pipedrive. Daqui se chega à ficha dela, onde estão todos os outros pregões. */
.bloco-org {
  background: #fff;
  border: 1px solid #e3e8e3;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 1px 4px rgba(20, 40, 20, 0.06);
}
.org-nome {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: #1d4ed8;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.3;
}
.org-nome:hover span:last-child {
  text-decoration: underline;
}
.org-simb {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #e8eefc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.org-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #eef2f1;
  font-size: 12.5px;
}
.org-numeros span {
  display: block;
  color: #7b867e;
  font-size: 11.5px;
}

/* Ganho e Perdido sólidos, como no Pipedrive — verde cheio e vermelho cheio.
   Em contorno eles se confundiam com os outros botões da barra; sendo a decisão
   mais importante da tela, precisam pesar mais que o resto. */
.bt-ganho,
.bt-perdido {
  flex: none;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font: 700 13.5px system-ui, "Segoe UI", Arial;
  color: #fff;
  cursor: pointer;
}
.bt-ganho {
  background: var(--bm-ok-2);
}
.bt-ganho:hover {
  background: #275a31;
}
.bt-perdido {
  background: #b33a32;
}
.bt-perdido:hover {
  background: #99312a;
}

/* Nome do negócio: texto, não formulário. A caixa e o lápis aparecem no hover
   (e ficam enquanto ela digita), como o título do negócio no Pipedrive. */
.titulo-negocio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 75%;
}
.titulo-negocio input[data-inline-title] {
  font: inherit;
  /* Letra fina e grande, como o título do negócio no Pipedrive: quem pesa na
     barra é o nome, não a espessura dele. */
  font-weight: 400;
  font-size: 26px;
  color: #1a1a1a;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 7px;
  background: transparent;
  /* A largura acompanha o texto digitado. Sem isso o campo ficava com a
     largura do atributo "size", que chuta pela média das letras e sobrava —
     jogando o "- UF" para longe do nome. */
  field-sizing: content;
  min-width: 90px;
  max-width: 62vw;
  outline: none;
  text-overflow: ellipsis;
}
.titulo-negocio:hover input[data-inline-title] {
  border-color: #d6dedc;
  background: #fff;
}
.titulo-negocio input[data-inline-title]:focus {
  border-color: #2f63ee;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(47, 99, 238, 0.14);
}
.titulo-lapis {
  font-size: 14px;
  color: #8a978f;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.titulo-negocio:hover .titulo-lapis,
.titulo-negocio:focus-within .titulo-lapis {
  opacity: 1;
}
.titulo-uf {
  color: #1a1a1a;
  font-weight: 400;
  font-size: 26px;
  white-space: nowrap;
  margin-left: -4px;
}

/* Ganho / Perdido / "⋯" na ponta direita da barra do título, como no
   Pipedrive: à esquerda o nome do negócio, à direita a decisão. */
.acoes-negocio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
}

/* Menu "⋯" do cabeçalho, como no Pipedrive: o que é destrutivo mora aqui
   dentro, não solto ao lado de Ganho/Perdido. Apagar pregão não tem volta. */
.menu-mais {
  position: relative;
  display: inline-flex;
  flex: none;
}
.menu-mais-lista {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  min-width: 244px;
  padding: 5px;
  z-index: 60;
}
.menu-mais.aberto .menu-mais-lista {
  display: block;
}
.menu-mais-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  background: none;
  border-radius: 7px;
  /* Mesma letra do menu "⋯" do Pipedrive: 15px, peso normal, uma linha só.
     Em 13,5px e negrito o menu parecia um aviso, não uma lista de opções. */
  font: 400 15px system-ui, "Segoe UI", Arial;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  color: #33475b;
}
.menu-mais-item:hover {
  background: #f1f5f4;
}
/* Linha separando o que é reversível (duplicar, mesclar) do que não é. */
.menu-mais-risco {
  display: block;
  height: 1px;
  margin: 5px 4px;
  background: var(--line);
}
.menu-mais-item i {
  width: 16px;
  height: 16px;
  flex: none;
}
.menu-mais-item.perigo {
  color: #b33a32;
}
.menu-mais-item.perigo:hover {
  background: #fdeceb;
}

/* Área de anexo grande e óbvia, no lugar do botãozinho no canto do título. */
.drop-anexo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1.5px dashed #cfd8d3;
  border-radius: 10px;
  background: #fbfdfc;
  cursor: pointer;
  text-align: left;
  color: #3a4a42;
}
.drop-anexo:hover,
.drop-anexo.sobre {
  border-color: #2f63ee;
  background: #f0f5ff;
}
.drop-anexo i {
  width: 20px;
  height: 20px;
  color: #2f63ee;
  flex: none;
}
.drop-anexo b {
  display: block;
  font-size: 13px;
}
.drop-anexo small {
  display: block;
  font-size: 11.5px;
  color: #7b867e;
}

/* ===== Trilha da esteira no alto do edital ================================
   Setas encaixadas como no Pipedrive, com as NOSSAS quatro etapas do funil.
   O recorte em seta é clip-path e o encaixe vem do margin-left negativo. */
.bmTrilha {
  display: flex;
  margin-top: 12px;
  overflow-x: auto;
}
.bmPasso {
  flex: 1 1 0;
  min-width: 118px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px 7px 22px;
  background: #eef1ee;
  color: #8a978f;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
  margin-left: -10px;
  line-height: 1.35;
}
.bmPasso:first-child {
  margin-left: 0;
  padding-left: 12px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}
.bmPasso:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%);
}
.bmPassoNome {
  font: 700 11.5px system-ui, "Segoe UI", Arial;
  white-space: nowrap;
  flex: none;
}
.bmPassoFato {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
  min-width: 0;
}
/* Ponto separando etapa e fato, agora que os dois moram na mesma linha. */
.bmPassoFato::before {
  content: "· ";
}
.bmPasso.ok {
  background: #dff0e3;
  color: var(--bm-ok-2);
}
.bmPasso.atual {
  background: #2f63ee;
  color: #fff;
}
.bmPasso.ok.ganho {
  background: var(--bm-ok-2);
  color: #fff;
}
.bmPasso.alerta {
  background: #fdeceb;
  color: #b33a32;
}

/* ===== Aba Dados em duas colunas, como o negócio do Pipedrive =============
   Dados do pregão à esquerda (coluna estreita, conferência), anotações à
   direita (área principal, onde ela realmente trabalha). */
.edital-2col {
  display: grid;
  grid-template-columns: minmax(300px, 350px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}
.edital-lado {
  min-width: 0;
}
.edital-principal {
  min-width: 0;
}
/* As abas ficam no alto da área principal — o lugar que elas ocupam no negócio
   do Pipedrive — em vez de penduradas no cabeçalho da página. */
.edital-principal .tabs {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
/* Dados do pregão compactos: dois por linha e campos baixos, para caber tudo
   numa olhada — antes eram sete campos altos empilhados e era preciso rolar
   para ver a data do pregão, que é o que ela mais confere. */
/* Trava de segurança da coluna da esquerda.
   A coluna tem 350px e o formulário dentro dela é um grid. Sem esta trava, o
   trilho do grid cresce até caber o item mais teimoso — e QUALQUER conteúdo
   comprido (nome de arquivo, objeto sem espaços, um item novo amanhã) vaza por
   cima da área da direita, levando junto tudo o que vier depois. Com
   minmax(0, 1fr) o trilho nunca passa da largura da coluna. */
.edital-lado {
  min-width: 0;
}
.panel-form.edital-dados {
  grid-template-columns: minmax(0, 1fr);
}

/* Título do bloco e o "Salvar" pequeno na mesma linha, no canto direito. */
.dados-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
/* Valor do negócio: o número mais importante do bloco, então é o maior. */
.valor-negocio {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0 0 6px !important;
}
.valor-negocio > span:first-child {
  font: 700 11.5px system-ui, "Segoe UI", Arial;
  color: #5c6b63;
}
/* "R$" e o número na MESMA linha: o input do formulário vem com width:100% e,
   sem flex-wrap:nowrap + flex:1, ele quebrava para baixo do cifrão. */
/* Precisa desempatar com `.edital-dados > label span { display:block }` (regra
   do Objeto): sem isto o "R$" caía numa linha e o número noutra. */
.edital-dados .valor-negocio .valor-caixa {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  margin-bottom: 0;
}
.edital-dados .valor-negocio .valor-caixa b {
  display: inline;
  font: 700 14px system-ui;
  color: #7b867e;
  flex: none;
  margin: 0;
}
/* "N itens" ao lado do dinheiro, como o "16 produtos" do Pipedrive: é o
   caminho para a aba Itens, que saiu da fileira de abas. */
.valor-itens {
  flex: none;
  border: none;
  background: none;
  color: #1d4ed8;
  font: 600 12.5px system-ui, "Segoe UI", Arial;
  cursor: pointer;
  padding: 2px 4px;
  white-space: nowrap;
}
.valor-itens:hover {
  text-decoration: underline;
}
.panel-form.edital-dados .valor-caixa input {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #2f63ee !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
}

/* Quem está entrando, na tela de login: Thais ou Jhony. */
.quem-bt {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 9px 16px;
  font: 600 14px system-ui, "Segoe UI", Arial;
  color: #3a4a42;
  cursor: pointer;
}
.quem-bt:hover {
  background: #f1f5f4;
}
.quem-bt.ativo {
  background: #2f63ee;
  border-color: #2f63ee;
  color: #fff;
}

/* ===== Programar atividade ================================================ */
.ativ-titulo {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  font: 600 16px system-ui, "Segoe UI", Arial;
  outline: none;
  margin-bottom: 12px;
}
.ativ-titulo:focus {
  border-color: #2f63ee;
  box-shadow: 0 0 0 2px rgba(47, 99, 238, 0.12);
}
.ativ-tipos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ativ-tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font: 600 13px system-ui, "Segoe UI", Arial;
  color: #3a4a42;
  cursor: pointer;
}
.ativ-tipo i {
  width: 15px;
  height: 15px;
}
.ativ-tipo:hover {
  background: #f1f5f4;
}
.ativ-tipo.ativo {
  background: #f0f5ff;
  border-color: #2f63ee;
  color: #2f63ee;
}
.ativ-linha-campos {
  display: grid;
  grid-template-columns: 1fr 110px 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 620px) {
  .ativ-linha-campos { grid-template-columns: 1fr; }
}
.ativ-linha-campos label,
.ativ-desc-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 700 11.5px system-ui, "Segoe UI", Arial;
  color: #5c6b63;
}
.ativ-linha-campos input,
.ativ-linha-campos select,
.ativ-desc-campo textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: 400 13.5px system-ui, "Segoe UI", Arial;
  background: #fff;
  outline: none;
  width: 100%;
}
.ativ-linha-campos input:focus,
.ativ-linha-campos select:focus,
.ativ-desc-campo textarea:focus {
  border-color: #2f63ee;
  box-shadow: 0 0 0 2px rgba(47, 99, 238, 0.12);
}
.ativ-desc-campo textarea {
  resize: vertical;
}

/* Atividade programada na linha do tempo, como a do Pipedrive: bolinha para
   marcar como feita, o que fazer em destaque e o prazo embaixo. */
.ativ-linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
}
.ativ-linha.feita {
  opacity: 0.55;
}
.ativ-linha.feita .ativ-corpo b {
  text-decoration: line-through;
}
.ativ-icone {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f5f4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #5c6b63;
}
.ativ-icone i {
  width: 15px;
  height: 15px;
}
.ativ-check input {
  width: 17px;
  height: 17px;
  margin-top: 6px;
  cursor: pointer;
}
.ativ-corpo {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ativ-corpo b {
  font-size: 14.5px;
  font-weight: 600;
}
.ativ-corpo small {
  font-size: 12px;
  color: #7b867e;
}
.ativ-desc {
  color: #5c6b63 !important;
  margin-top: 2px;
}
/* Atalho da atividade: liga (tel:) ou escreve (mailto:) usando o contato da
   organização. Só aparece quando o contato existe. */
.ativ-atalho {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  border: 1px solid #cfe0d3;
  background: #f0f5ff;
  color: #2f63ee;
  border-radius: 7px;
  padding: 4px 9px;
  font: 700 12px system-ui, "Segoe UI", Arial;
  text-decoration: none;
  align-self: center;
}
.ativ-atalho:hover {
  background: #2f63ee;
  border-color: #2f63ee;
  color: #fff;
}
.ativ-atalho i {
  width: 13px;
  height: 13px;
}
.ativ-prio {
  align-self: center;
  font-size: 11px;
  flex: none;
}
.ativ-vencido {
  display: inline-block;
  background: #fdeceb;
  color: #b42318;
  border: 1px solid #f3c2c2;
  border-radius: 4px;
  padding: 0 5px;
  font: 800 10px system-ui;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

/* Janela dos itens, no formato do "Adicionar produtos ao negócio" do Pipedrive. */
.itens-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 9998;
  overflow: auto;
}
.itens-janela {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 1180px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}
.itens-cabeca,
.itens-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}
.itens-cabeca {
  border-bottom: 1px solid var(--line);
}
.itens-cabeca h2 {
  margin: 0;
  font-size: 17px;
}
.itens-rodape {
  border-top: 1px solid var(--line);
}
.itens-corpo {
  padding: 14px 18px;
  overflow: auto;
}

/* Quando o pregão foi perdido: quando foi e por quê, à vista nos dados. */
.bloco-perda {
  display: grid;
  gap: 2px;
  background: #fdeceb;
  border: 1px solid #f3c2c2;
  border-radius: 9px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #8f322c;
}
.bloco-perda b {
  font-size: 12.5px;
}

.dados-auto {
  font-size: 11px;
  color: #98a2b3;
  flex: none;
}

/* Rótulo à ESQUERDA e campo à direita, como o bloco de detalhes do Pipedrive.
   Empilhado (rótulo em cima do campo) cada dado gastava duas linhas; assim o
   pregão inteiro cabe numa olhada, que é o que ela pediu. */
.edital-dados .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
.edital-dados .form-grid > label:first-child {
  grid-column: auto;
}
.edital-dados label {
  margin-bottom: 0;
}
.edital-dados .form-grid > label {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.edital-dados label span {
  font-size: 11.5px;
  font-weight: 700;
  color: #5c6b63;
  margin-bottom: 0;
  line-height: 1.2;
}
/* Dois seletores e !important porque `.panel-form input` (styles.css:2506) fixa
   height:44px !important — com a mesma especificidade a última regra venceria,
   e a minha vem antes. Somar `.edital-dados` ao `.panel-form` desempata. */
/* Os campos parecem TEXTO, como o painel de detalhes do Pipedrive: sem caixa
   branca, no fundo da página. A moldura só aparece quando o mouse passa por
   cima ou quando ela está digitando. Não há botão de salvar — cada tecla
   agenda a gravação, então sair do campo já deixou salvo. */
.panel-form.edital-dados input,
.panel-form.edital-dados select {
  height: 27px !important;
  /* min-height precisa vir junto: existe um `min-height:42px` geral para
     input/select/textarea, e min-height ganha de height — sem isto o campo
     continuava com 42px mesmo com a altura definida. */
  min-height: 27px !important;
  padding: 0 8px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.panel-form.edital-dados textarea {
  padding: 7px 9px !important;
  font-size: 12.5px !important;
  border-radius: 7px !important;
  /* Sem o min-height geral de 42px o Objeto para de sobrar espaço em branco e
     "Arquivos do pregão" sobe. Se o texto for maior, ela arrasta o canto. */
  min-height: 0 !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.edital-dados label:hover input,
.edital-dados label:hover select,
.edital-dados label:hover textarea {
  background: #fff !important;
  border-color: #dfe6e2 !important;
}
.panel-form.edital-dados input:focus,
.panel-form.edital-dados select:focus,
.panel-form.edital-dados textarea:focus {
  background: #fff !important;
  border-color: #2f63ee !important;
  box-shadow: 0 0 0 2px rgba(47, 99, 238, 0.12) !important;
}
/* Objeto: rótulo em cima, porque é texto comprido e precisa da largura toda. */
.edital-dados > label {
  margin-top: 6px;
  display: block;
}
.edital-dados > label span {
  display: block;
  margin-bottom: 2px;
}
@media (max-width: 980px) {
  .edital-2col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Anotações do pregão ================================================
   Ideia da "anotação fixada" do Pipedrive: o que não pode ser esquecido sobe
   para o topo, com fundo amarelo, e o resto fica embaixo em ordem de data. */
/* Ocupa toda a coluna da direita. Com max-width fixo sobrava uma faixa branca
   à direita das anotações justamente na tela larga, onde há mais espaço. */
.anotacoes {
  max-width: none;
}
.nota-nova {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  margin-bottom: 16px;
}
.nota-nova textarea {
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  resize: vertical;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 4px 2px;
}
.nota-nova-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid #eef2f1;
  padding-top: 8px;
  margin-top: 6px;
}
.nota-nova-rodape small {
  color: var(--muted);
  font-size: 12px;
  margin-right: auto;
}
/* Seletor do que se está escrevendo: anotação, recado ou atividade. Substitui
   as abas separadas de Recados e (o que seria) Atividade. */
.nota-tipo {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eef2f1;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.nota-tipo-bt {
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  padding: 6px 11px;
  font: 600 13px system-ui, "Segoe UI", Arial;
  color: #667085;
  cursor: pointer;
}
.nota-tipo-bt:hover {
  background: #f1f5f4;
}
.nota-tipo-bt.ativo {
  background: #f0f5ff;
  border-color: #cfe0d3;
  color: #2f63ee;
}
.nota-extra {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.nota-extra select,
.nota-extra input {
  height: 34px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}
.nota.recado {
  background: #f6f9ff;
  border-color: #d9e4fb;
}
.nota.atividade {
  background: #fffaf0;
  border-color: #f3e2c2;
}
.nota.atividade.feita {
  opacity: 0.6;
}
.nota.atividade.feita p {
  text-decoration: line-through;
}
.ativ-check input {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 4px;
  cursor: pointer;
}

/* Grampinho + Cancelar/Salvar pequenos, como o rodapé do editor do Pipedrive. */
.nota-clipe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: #3a4a42;
  border-radius: 7px;
  padding: 5px 10px;
  font: 600 12.5px system-ui, "Segoe UI", Arial;
  cursor: pointer;
  flex: none;
}
.nota-clipe:hover {
  border-color: #2f63ee;
  color: #2f63ee;
  background: #f0f5ff;
}
.nota-clipe i {
  width: 15px;
  height: 15px;
}
.nota-bt-cancelar,
.nota-bt-salvar {
  border-radius: 7px;
  padding: 5px 13px;
  font: 600 12.5px system-ui, "Segoe UI", Arial;
  cursor: pointer;
  flex: none;
}
.nota-bt-cancelar {
  border: 1px solid var(--line);
  background: #fff;
  color: #3a4a42;
}
.nota-bt-cancelar:hover {
  background: #f1f5f4;
}
.nota-bt-salvar {
  border: 1px solid #2f63ee;
  background: #2f63ee;
  color: #fff;
}
.nota-bt-salvar:hover {
  background: #275a31;
}
/* Arquivos escolhidos e ainda não salvos. */
.nota-pendentes:empty {
  display: none;
}
.nota-pendentes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.nota-pendente,
.nota-anexo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f4;
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-size: 12px;
  color: #3a4a42;
}
.nota-anexos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.nota-anexo a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #2f63ee;
  text-decoration: none;
  font-weight: 600;
}
.nota-anexo a:hover {
  text-decoration: underline;
}
.nota-anexo i {
  width: 13px;
  height: 13px;
}
.nota-titulo {
  margin: 18px 0 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #98a2b3;
}
.nota {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
}
.nota.fixada {
  background: #fffbe8;
  border-color: #f0dfa8;
}
.nota header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.nota-quando {
  font-size: 12px;
  color: var(--muted);
}
.nota-acoes {
  display: flex;
  gap: 4px;
}
.nota-bt {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  color: #a4790f;
}
.nota-bt:hover {
  background: #f1f5f4;
}
.nota-bt.apagar {
  color: #b33a32;
  font-size: 13px;
}
.nota p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #1f2a24;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* O lápis fica em cinza-esverdeado, para não disputar com a estrela dourada
   nem com o ✕ vermelho: editar é o gesto mais comum dos três e o menos grave. */
.nota-bt[data-action="editar-nota"] {
  color: #5b6b62;
}
.nota-editada {
  font-style: italic;
}
/* A edição acontece no próprio cartão, no lugar do texto — mesmo tamanho de
   letra, para ela ver a nota como ela vai ficar. */
.nota-edicao-texto {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  resize: vertical;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  color: #1f2a24;
  padding: 8px 10px;
  border: 1px solid #b9c9c0;
  border-radius: 8px;
  background: #fff;
}
.nota-edicao-texto:focus {
  outline: 2px solid #2f5e45;
  outline-offset: 0;
  border-color: #2f5e45;
}
.nota-edicao-bts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Card no formato do Pipedrive: número do pregão em cima, VALOR do negócio, e a
   organização logo abaixo. Antes o título era a prefeitura e o número do pregão
   nem aparecia — dois pregões da mesma cidade ficavam com o card idêntico. */
.process-card-valor {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 700;
  color: #667085;
}
.process-card-valor.real {
  color: #2f63ee;
}
.process-card-orgnome {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: #667085;
  line-height: 1.3;
}
.org-simb-mini {
  flex: none;
  font-size: 10px;
}
/* Quanto está em jogo em cada etapa do funil. */
/* ===== Aba Respostas compacta ============================================
   A tabela mostra o que se lê de relance — item, quem cotou, o modelo e o
   mínimo. Custo, lucro, extra, markup e frete abrem na janelinha do ⚙: eram
   cinco colunas de conta que empurravam a tabela para 1.220 px de largura e
   obrigavam a rolar para o lado. */
.responses-compacta {
  table-layout: fixed;
  width: 100%;
  /* !important para vencer o `min-width:1040px` que vale para TODA table do
     sistema — era ele que fazia a barra de rolagem de baixo aparecer. */
  min-width: 0 !important;
}
/* A coluna da descrição leva toda a sobra; as outras ficam do tamanho pedido.
   Sem isso o navegador engorda todas juntas e os campinhos ficam enormes. */
.responses-compacta th:nth-child(2) {
  width: 100%;
}
.responses-compacta th,
.responses-compacta td {
  padding: 8px;
  vertical-align: middle;
}
/* Número do item + as setas de ordem, lado a lado na coluna #. */
.resp-ordem-cel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.resp-ordem {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Mesmo comportamento do lapisinho da descrição: apagadas até o mouse
   passar pela linha, para não poluir uma tabela que ela lê de relance. */
.resp-ordem button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 2px;
  line-height: 0.9;
  font-size: 10px;
  color: #98a2b3;
  opacity: 0.5;
  border-radius: 4px;
}
tr:hover .resp-ordem button {
  opacity: 1;
}
.resp-ordem button:hover:not(:disabled),
.resp-ordem button:focus:not(:disabled) {
  opacity: 1;
  color: #2f63ee;
  background: #f1f5f4;
}
.resp-ordem button:disabled {
  opacity: 0.18;
  cursor: default;
}
.responses-compacta .resp-num {
  font-weight: 700;
  color: #475467;
  text-align: center;
}
/* Duas linhas de descrição; clicar abre o resto.
   Fora do escopo de .responses-compacta de propósito: a aba Proposta mostra a
   MESMA descrição e tem de ficar igual — presa à tabela de Respostas, lá o
   texto vinha inteiro e uma linha só passava de 2.600 px de altura. */
.resp-desc {
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resp-desc.aberta {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.resp-desc b {
  display: block;
  font-size: 13px;
  color: #1a1a1a;
}
.resp-desc span {
  color: #7b867e;
}
.responses-compacta .resp-forn {
  font-size: 12px;
  color: #3a4a42;
}
.responses-compacta .resp-modelo {
  font-size: 12px;
}
/* Marca e modelo lado a lado, não empilhados: empilhados, cada linha crescia
   duas alturas de campo à toa. */
.resp-marca-modelo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.resp-marca-modelo input {
  width: 100%;
  min-width: 0;
  font-size: 12px !important;
}
/* Custo do vendedor: campo grande, número em VERMELHO (é dinheiro que sai) e a
   origem dele logo embaixo. */
.responses-compacta .resp-custo-cel input {
  width: 100%;
  text-align: right;
  font-weight: 700;
  color: #b33a32;
}
/* Veio do preço que o vendedor mandou: a borda verde diz isso sem mudar a cor
   do número, que continua sendo o custo. */
.responses-compacta .resp-custo-cel input.do-vendedor {
  border-color: #86c79b;
  background: #f6fdf8;
}
.resp-origem {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.2;
  color: #7b867e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ajuste-custo-lido {
  color: #24522f;
}

/* Lápis do descritivo: fica discreto ao lado do texto e aparece de verdade
   quando o mouse passa pela linha. */
.resp-desc-cel {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.resp-desc-cel .resp-desc {
  flex: 1 1 auto;
  min-width: 0;
}
/* Item ainda sem descrição: um convite para escrever, no lugar de uma célula
   vazia sem altura para acertar com o mouse. Clicar abre direto a escrita. */
.resp-desc-vazia {
  cursor: pointer;
  font-size: 12.5px;
  color: #98a2b3;
  font-style: italic;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.resp-desc-vazia:hover {
  color: #2f63ee;
  border-color: #b7cbbd;
  background: #f7faf8;
  font-style: normal;
}
.resp-lapis {
  flex: none;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 1;
  padding: 3px;
  border-radius: 6px;
  color: #98a2b3;
  opacity: 0.5;
}
.resp-lapis i,
.resp-lapis svg {
  width: 14px;
  height: 14px;
  display: block;
}
tr:hover .resp-lapis {
  opacity: 1;
}
.resp-lapis:hover,
.resp-lapis:focus {
  opacity: 1;
  color: #2f63ee;
  background: #f1f5f4;
}
.resp-aviso-desc {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #a46b13;
}

/* ===== Editor com formatação =============================================
   Barrinha de botões em cima e o texto embaixo, num campo do próprio
   navegador. Usado no descritivo do item e no texto da proposta. */
.editor-formatado {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.fmt-barra {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  background: #f7faf9;
  border-bottom: 1px solid #eef2f1;
  flex-wrap: wrap;
}
.fmt-bt {
  min-width: 28px;
  height: 26px;
  border: 1px solid transparent;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  font: 600 13px system-ui, "Segoe UI", Arial;
  color: #3a4a42;
  line-height: 1;
}
.fmt-bt:hover {
  background: #fff;
  border-color: var(--line);
}
.fmt-texto {
  padding: 10px 12px;
  font: 400 13px/1.55 system-ui, "Segoe UI", Arial;
  color: #1a1a1a;
  overflow-y: auto;
  max-height: 52vh;
  outline: none;
}
.fmt-texto:focus {
  box-shadow: inset 0 0 0 2px rgba(47, 99, 238, 0.12);
}
.fmt-texto p {
  margin: 0 0 8px;
}
.fmt-texto p:last-child {
  margin-bottom: 0;
}
.prop-declaracoes {
  margin-bottom: 14px;
}
.prop-rot {
  display: block;
  font: 700 11.5px system-ui, "Segoe UI", Arial;
  color: #5c6b63;
  margin-bottom: 5px;
}
.prop-rot small {
  font-weight: 400;
  color: #98a2b3;
}

/* Janela do descritivo: quadrada e grande, porque aqui ela lê e reescreve o
   texto que o vendedor vai receber — e os descritivos de edital passam de mil
   letras. Precisa dos dois nomes de classe para vencer o `width:300px` da
   janelinha de ajuste, que vem depois neste arquivo. */
.ajuste-caixa.edicao-desc {
  width: min(780px, 92vw);
}
.edicao-aviso {
  margin: 0 0 10px;
  background: #fff8e6;
  border: 1px solid #e3c07a;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 12px;
  color: #7a5b00;
  line-height: 1.4;
}
/* Rodapé da janela de descrição: botões menores e com ar embaixo. Grandes e
   colados na borda, eles pareciam sair do quadro. */
.edicao-rodape {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.edicao-rodape button {
  padding: 7px 14px;
  font-size: 13px;
  min-height: 0;
  height: auto;
}

/* ===== Cabeçalho da aba Proposta =========================================
   Os termos são valores curtos ("60 dias", "Conforme edital"): empilhados em
   duas colunas gastavam meia tela antes de a tabela dos itens aparecer. */
.prop-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f1;
  margin-bottom: 12px;
}
.prop-quem {
  font-size: 13px;
  color: #667085;
}
.prop-quem strong {
  color: #1a1a1a;
}
.prop-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.prop-acoes button {
  font-size: 13px;
  padding: 8px 12px;
}
.prop-termos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  margin-bottom: 14px;
}
.prop-termos label {
  display: block;
  font: 700 11.5px system-ui, "Segoe UI", Arial;
  color: #5c6b63;
  margin: 0;
}
.prop-termos label input {
  display: block;
  width: 100%;
  margin-top: 4px;
  height: 36px !important;
  min-height: 36px !important;
  font-size: 13px !important;
}
.prop-termos .prop-larga {
  grid-column: span 2;
}
.prop-ia {
  display: inline-block;
  background: #e6f7ec;
  color: #2f63ee;
  border: 1px solid #86c79b;
  border-radius: 999px;
  padding: 0 6px;
  margin-left: 5px;
  font: 700 9.5px system-ui;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: 1px;
}
/* As três tabelas do pregão acompanham a largura da tela.
   Precisam anular duas heranças antigas: o `min-width:1040px` que vale para
   TODA table do sistema (por isso a barra de rolagem de baixo aparecia) e o
   `min-width:360px` da quarta coluna da tabela de itens. */
.proposta-tabela,
.itens-compacta {
  table-layout: fixed;
  width: 100%;
  min-width: 0 !important;
}
.itens-compacta td:nth-child(4) {
  min-width: 0 !important;
}
/* As larguras da tabela de itens são porcentagens no próprio HTML (somando
   100%), então aqui não se mexe nelas — misturar "100%" com pixels fazia o
   navegador encolher justamente a coluna da descrição. */
/* CADA campo dentro da sua célula.
   `.short-input` tem `min-width: 92px` — pensado para os formulários largos do
   sistema. Nestas tabelas compactas a célula é menor que isso, então o campo
   transbordava: o número do item passava por cima da descrição, e a
   quantidade e o valor do edital encostavam um no outro parecendo uma caixa
   só. Aqui o mínimo é zero e cada um fica do tamanho da sua coluna. */
.itens-compacta .short-input,
.responses-compacta .short-input,
.proposta-tabela .short-input {
  min-width: 0 !important;
}
/* Número do item é de 1 a 3 dígitos: campo pequeno e centrado, em vez de
   esticar com a coluna. */
.itens-compacta [data-item-field="numero"] {
  width: 52px !important;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  padding: 0 2px !important;
  text-align: center;
}
/* Quantidade: o campo e as duas setinhas lado a lado, tudo dentro da coluna. */
.qtd-campo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.itens-compacta .qtd-campo [data-item-field="quantidade"] {
  width: 46px !important;
  max-width: 100%;
  padding: 0 2px !important;
  text-align: center;
}
.qtd-setas {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: none;
}
/* Cada seta com metade da altura do campo: as duas juntas formam um bloco do
   mesmo tamanho da caixinha da quantidade, como as setas de qualquer formulário
   — em vez de dois botõezinhos soltos boiando no meio da célula. */
.qtd-seta {
  width: 18px;
  height: 20px;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
}
.qtd-seta:hover {
  background: #f1f5f4;
  color: #2f63ee;
  border-color: #b7cbbd;
}
.qtd-seta i,
.qtd-seta svg {
  width: 10px;
  height: 10px;
  display: block;
}
/* A lixeira da última coluna: o botão do sistema tem 40 px e a coluna tem 46,
   com 8 px de recheio de cada lado — sobravam 30. Ele passava 3 px da janela,
   e eram esses 3 px que ainda faziam aparecer a barra de rolagem de baixo.
   O `:not(.empty-cell)` deixa de fora a linha do "nenhum item encontrado", que
   também é a última célula da linha dela e não tem nada a ver com isso.
   O `min-height` precisa vir junto: o botão do sistema tem min-height 40px, e
   em CSS o mínimo ganha do `height` por mais específica que seja a regra — sem
   ele a lixeira ficava um retângulo em pé, 28 de largura por 40 de altura. */
.itens-compacta td:last-child:not(.empty-cell) {
  padding-left: 2px;
  padding-right: 2px;
}
.itens-compacta td:last-child .icon-button {
  width: 28px;
  height: 28px;
  min-height: 28px;
}
.proposta-tabela td,
.proposta-tabela th {
  padding: 8px 6px;
}
/* Tudo numa linha só: os títulos e os valores curtos ("1 UN", "sem cotação")
   quebravam em duas linhas e faziam cada linha da tabela crescer. */
.proposta-tabela th {
  font-size: 10px;
  white-space: nowrap;
}
.proposta-tabela td {
  white-space: nowrap;
}
.proposta-tabela td span[style*="border-radius:999px"] {
  font-size: 10px !important;
  white-space: nowrap;
}
/* A descrição é a única coluna que pode quebrar linha. */
.proposta-tabela td:nth-child(3) {
  white-space: normal;
}
@media (max-width: 1100px) {
  .prop-termos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prop-termos .prop-larga {
    grid-column: span 2;
  }
}

/* Objeto do pregão: sem rolagem por dentro do campo — ele cresce até caber. */
.panel-form.edital-dados textarea[data-cresce] {
  overflow: hidden !important;
  resize: none !important;
}
/* A célula continua sendo célula (é ela que acompanha a altura da linha e
   centraliza o conteúdo); quem organiza valor e botão lado a lado é o div de
   dentro. Com o flex no próprio <td>, abrir a descrição fazia a linha crescer
   e o mínimo ficava plantado no topo. */
.responses-compacta .resp-min-cel {
  vertical-align: middle;
}
.responses-compacta .resp-min-linha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
  min-width: 0;
}
/* O valor pode encolher; o botão do markup, não. Assim um número grande
   aperta a si mesmo em vez de empurrar o botão para fora da coluna. */
.responses-compacta .resp-min-linha .min-disputa {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* O botão mostra o markup atual: o número continua à vista, sem gastar coluna. */
.resp-ajuste {
  border: 1px solid var(--line);
  background: #fff;
  color: #667085;
  border-radius: 7px;
  padding: 3px 5px;
  font: 600 11px system-ui, "Segoe UI", Arial;
  cursor: pointer;
  flex: none;
}
.resp-ajuste:hover {
  border-color: #2f63ee;
  color: #2f63ee;
  background: #f0f5ff;
}

/* Janelinha de ajuste do item, no meio da tela.
   Encostada no botão ela caía para fora da tela quando o item era um dos de
   baixo — o "mínimo de disputa" ficava escondido atrás do botão do Monitor.
   No centro, aparece inteira sempre, seja qual for a linha. */
.ajuste-markup {
  position: fixed;
  inset: 0;
  /* Acima da janela dos itens (9998): o lapisinho do descritivo é apertado de
     DENTRO dela, e mais embaixo a janelinha abria escondida atrás. */
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.28);
}
.ajuste-caixa {
  width: 300px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  padding: 16px;
}
.ajuste-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.ajuste-topo .ghost-button {
  padding: 2px 7px;
}
.ajuste-caixa label {
  display: block;
  font: 700 11px system-ui, "Segoe UI", Arial;
  color: #5c6b63;
  margin-bottom: 8px;
}
.ajuste-caixa label input {
  display: block;
  width: 100%;
  margin-top: 3px;
  text-align: right;
}
.ajuste-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ajuste-custo input {
  font-weight: 700 !important;
  color: #24522f !important;
}
.ajuste-resultado {
  border-top: 1px solid #eef2f1;
  margin-top: 4px;
  padding-top: 9px;
  font-size: 12px;
  color: #667085;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ajuste-resultado b {
  font-size: 15px;
  color: #2f63ee;
}
.ajuste-dica {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  color: #98a2b3;
  line-height: 1.35;
}

/* Valor da etapa ao lado do nome da coluna. O margin-right:auto empurra a
   bolinha da contagem para a ponta direita, deixando nome e valor juntos. */
.pipeline-total {
  margin-right: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: #2f63ee;
  white-space: nowrap;
  text-transform: none;
}

/* Histórico da ORGANIZAÇÃO (a prefeitura) dentro do card do NEGÓCIO (o pregão).
   O Pipedrive põe só o nome da organização no card e obriga a abrir a ficha
   para ver o histórico; aqui o que decide a triagem já vem junto. */
.process-card-org {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11.5px;
  color: #667085;
}
.process-card-org .sep {
  color: #cbd5d1;
}
/* Aviso de anotação fixada direto no card. No Pipedrive a anotação fixada só
   aparece dentro do negócio — daqui você vê que tem recado importante sem abrir. */
.process-card-nota {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #a4790f;
}

/* Contadores do funil com NOME junto do número. Eram só um troféu e uma
   lixeira soltos: dava para ver "173" e "38" sem fazer ideia do que eram, e
   era preciso clicar para descobrir. O Pipedrive também usa ícone mudo aqui —
   escrever o que é custa dois centímetros e economiza a dúvida. */
.bmPastilha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  white-space: nowrap;
}
.bmPastilha b {
  font-weight: 800;
}
.bmPastilha span {
  font-weight: 600;
  font-size: 12.5px;
}

/* Resumo do dia, fixo em cima das quatro colunas do funil. Quieto quando não
   há nada de urgente hoje (fundo neutro, borda fina); vira aviso amarelo só
   quando falta resposta de vendedor para alguma disputa de hoje. */
.resumo-dia {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin-bottom: 12px;
  border: 1px solid #e6eceb;
  border-radius: 10px;
  background: #f8fbfa;
  font-size: 13px;
  color: #3a4a42;
}
.resumo-dia i {
  width: 16px;
  height: 16px;
  flex: none;
  color: #667085;
}
.resumo-dia b {
  font-weight: 800;
  color: #1a1a1a;
}
.resumo-dia.urgente {
  background: #fff8e6;
  border-color: #e3c07a;
  color: #7a5b00;
}
.resumo-dia.urgente i {
  color: #a4790f;
}
.resumo-dia.urgente b {
  color: #7a5b00;
}

/* Filtro rápido de urgência, dentro de cada coluna do funil: "dos 16
   aguardando cotação, quais são de hoje?" sem abrir card por card. */
.lane-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 2px 8px;
}
.lane-chip {
  border: 1px solid #dfe6e2;
  background: #fff;
  color: #5c6b63;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.lane-chip:hover {
  border-color: #b7cbbd;
  background: #f7faf8;
}
.lane-chip.ativo {
  border-color: #2f63ee;
  background: #eaf3ec;
  color: #2f63ee;
}

/* ===== Menu principal da barra lateral ===================================== */
#bmNav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.bmNavItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  color: #183d26;
  white-space: nowrap;
  overflow: hidden;
}
.bmNavItem:hover {
  background: #eef3ff;
}
.bmNavItem.on {
  background: #2f63ee;
  color: #fff;
  font-weight: 600;
}
.bmNavIco {
  width: 19px;
  height: 19px;
  flex: none;
}
/* Quantos pregões estão chamando agora, sem precisar abrir o Monitor. */
.bmNavBadge {
  margin-left: auto;
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #b33a32;
  color: #fff;
  font: 700 11px system-ui, "Segoe UI", Arial;
  text-align: center;
  line-height: 17px;
}
.bmNavBadge[hidden] {
  display: none;
}
.bmNavItem.on .bmNavBadge {
  background: #fff;
  color: #b33a32;
}
/* "Configurações" do Monitor: vem de monitor-plus.js já posicionado logo abaixo
   do Monitor de Pregões. Aqui só recebe a mesma aparência dos outros itens,
   recuado para se ler como filho dele. */
.bmMenuCfg {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 28px !important;
  margin: 2px 0 !important;
  border-radius: 8px;
  font: 600 13px system-ui, "Segoe UI", Arial;
  color: #2f63ee;
  background: transparent !important;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.bmMenuCfg:hover {
  background: #eef3ff !important;
}
/* A engrenagem é texto (emoji), não SVG: ocupa a mesma caixa dos outros
   símbolos para os itens ficarem alinhados na vertical. */
.bmNavSimb {
  width: 19px;
  flex: none;
  text-align: center;
  font-size: 15px;
  line-height: 1;
}

/* ===== Barra lateral recolhida: vira um trilho só de símbolos ==============
   Antes ela sumia por completo (display:none) e, com a lista escondida, não
   dava para trocar de tela sem abrir tudo de novo. Agora encolhe para uma
   faixa: os símbolos continuam ali, clicáveis, com o nome no title. */
.layout.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}
.layout.sidebar-collapsed .sidebar {
  padding: 18px 10px;
  overflow: visible;
}
.layout.sidebar-collapsed .sidebar-head {
  justify-content: center;
}
.layout.sidebar-collapsed .sidebar-head .eyebrow,
.layout.sidebar-collapsed .bmNavTxt,
.layout.sidebar-collapsed .upload-box,
.layout.sidebar-collapsed .side-heading,
.layout.sidebar-collapsed .quote-list {
  display: none;
}
/* O atalho de importar existe só no trilho — com a barra aberta quem faz esse
   papel é a caixa "Anexar edital", que é maior e aceita arrastar o arquivo. */
.bmNavSoTrilho {
  display: none;
}
.layout.sidebar-collapsed .bmNavSoTrilho {
  display: flex;
}

/* Nome do item ao passar o mouse no trilho. É nosso, e não a tarja do próprio
   navegador (title=), porque aquela leva quase um segundo para aparecer — num
   menu só de símbolos, esperar um segundo para saber onde se está clicando não
   serve. Esta aparece na hora, ao lado do símbolo. */
.layout.sidebar-collapsed .bmNavItem::after,
.layout.sidebar-collapsed .bmMenuCfg::after {
  content: attr(data-rot);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #1f2a24;
  color: #fff;
  font: 600 12.5px system-ui, "Segoe UI", Arial;
  padding: 6px 10px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 80;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}
.layout.sidebar-collapsed .bmNavItem:hover::after,
.layout.sidebar-collapsed .bmNavItem:focus-visible::after,
.layout.sidebar-collapsed .bmMenuCfg:hover::after {
  opacity: 1;
  visibility: visible;
}
/* A barra tem overflow visível no trilho para a tarja poder sair dela. */
.layout.sidebar-collapsed .sidebar,
.layout.sidebar-collapsed #bmNav {
  overflow: visible;
}
.layout.sidebar-collapsed .bmNavItem,
.layout.sidebar-collapsed .bmMenuCfg {
  justify-content: center;
  padding: 10px 0 !important;
  gap: 0;
  position: relative;
}
/* No trilho o número não cabe: vira uma bolinha no canto do símbolo, que é o
   suficiente para avisar que tem pregão chamando. */
.layout.sidebar-collapsed .bmNavBadge {
  position: absolute;
  top: 5px;
  right: 11px;
  margin: 0;
  min-width: 9px;
  height: 9px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  box-shadow: 0 0 0 2px #fbfdfc;
}
/* Sem o texto, o recuo do "filho" não significa mais nada — e ainda entortava
   o símbolo para fora do centro. */
.layout.sidebar-collapsed .bmMenuCfg {
  font-size: 17px;
}
.layout.sidebar-collapsed .workspace {
  padding-left: 18px;
}
#sidebarExpand {
  display: none;
}
.layout.sidebar-collapsed #sidebarExpand {
  display: none;
}

.workspace {
  padding: 22px;
  overflow: auto;
}

.upload-box {
  display: grid;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.file-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.primary-button,
.ghost-button,
.danger-ghost,
.ghost-link,
.icon-button,
.tab-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 750;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.primary-button {
  padding: 0 14px;
  background: var(--primary);
  color: #fff;
}

.primary-button:hover {
  background: var(--primary-dark);
}

.ghost-button,
.ghost-link {
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.compact-link {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

.ghost-button:hover,
.ghost-link:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.danger-ghost {
  padding: 0 12px;
  border: 1px solid #f3b5af;
  background: var(--danger-soft);
  color: var(--danger);
}

.icon-button {
  width: 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}

.icon-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.icon-button.danger {
  color: var(--danger);
}

.full {
  width: 100%;
}

.side-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}

.quote-list {
  display: grid;
  gap: 8px;
}

.quote-list-item {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: left;
  color: var(--ink);
}

.quote-list-item.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.quote-title {
  font-weight: 850;
}

.quote-subtitle,
.quote-meta,
.muted,
.compact {
  color: var(--muted);
}

.quote-subtitle,
.quote-meta {
  font-size: 13px;
}

.compact {
  margin: 0;
}

.workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.process-funnel {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.process-funnel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.process-funnel-title h2 {
  margin: 0;
  font-size: 18px;
}

.process-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.process-lane {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
}

.process-lane.em_cotacao {
  border-color: #f0c48d;
}

.process-lane.concluido {
  border-color: #8ecab8;
}

.process-lane.descartado {
  border-color: #e7b4b4;
  background: #fcf6f6;
}

.process-card-list {
  display: grid;
  gap: 8px;
}

.process-card {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.process-card.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.process-card strong,
.process-card small,
.process-card span {
  min-width: 0;
}

.process-card small {
  color: var(--muted);
}

.workspace-header p {
  margin: 4px 0 0;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.metric {
  min-height: 74px;
  display: grid;
  gap: 2px;
  align-content: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.metric span {
  font-size: 24px;
  font-weight: 850;
}

.metric small {
  color: var(--muted);
}

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.tab-button {
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}

.tab-button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.tab-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-form {
  display: grid;
  gap: 16px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.documents-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
}

.documents-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.documents-box-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.documents-list {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* Uma LINHA por arquivo, não um cartão — a versão antiga gastava ~145px de
   altura por anexo, e dois já enchiam a coluna inteira. A linha inteira abre
   o arquivo; ver/baixar/excluir só aparecem no hover, para o botão vermelho de
   excluir não morar cravado do lado de "Baixar" o tempo todo. */
.doc-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 4px;
  border-radius: 8px;
}
.doc-linha:hover {
  background: #fff;
}

.doc-abrir {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.doc-icone {
  flex: none;
  width: 18px;
  height: 18px;
}

.doc-texto {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.doc-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink, #1a1a1a);
}

.doc-meta {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.doc-copia {
  color: #a46b13;
}

/* Ver, Baixar e Excluir: escondidos até passar o mouse na linha, senão a
   lista inteira vira uma parede de ícones vermelhos e cinzas. */
.doc-acao {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: #98a2b3;
  opacity: 0;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
}
.doc-linha:hover .doc-acao {
  opacity: 1;
}
.doc-acao:hover {
  background: #f1f5f4;
  color: #2f63ee;
}
.doc-acao i,
.doc-acao svg {
  width: 15px;
  height: 15px;
}
.doc-excluir:hover {
  background: #fdecea;
  color: #b33a32;
}

/* Área de anexar: grande e chamativa sem arquivo nenhum, fininha quando a
   lista já tem o quê mostrar — senão ela empurrava os anexos para baixo. */
.drop-anexo-fino {
  flex-direction: row;
  gap: 8px;
  padding: 8px 10px;
  min-height: 0;
}
.drop-anexo-fino i {
  margin: 0;
}
.drop-anexo-fino b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
  outline: none;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.search-field {
  position: relative;
  flex: 1 1 220px;
}

.search-field svg {
  position: absolute;
  left: 10px;
  top: 12px;
  color: var(--muted);
}

.search-field input {
  padding-left: 36px;
}

.tool-row {
  margin-bottom: 12px;
}

.notice-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 750;
}

.notice-line.warn {
  background: #fff4e5;
  border-color: #f0b15a;
  color: #92400e;
}

/* A janela .desc-modal saiu junto com o segundo editor de descritivo: hoje o
   texto do item e mudado num lugar so, a janela do lapisinho (.edicao-desc). */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1040px;
}

th,
td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

th {
  background: #f8fbfa;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.items-table td:nth-child(4) {
  min-width: 360px;
}

.responses-table td:first-child {
  min-width: 300px;
}

.responses-table td:first-child span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.center-cell {
  text-align: center;
}

.check-input {
  width: 22px;
  min-height: 22px;
  accent-color: var(--primary);
}

.short-input {
  min-width: 92px;
}

.product-input {
  min-width: 190px;
}

.description-input {
  min-height: 58px;
}

.empty-cell,
.empty-inline {
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

.supplier-form {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) minmax(140px, 1fr) minmax(180px, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}

.supplier-list {
  display: grid;
  gap: 10px;
}

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pipeline-lane {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
}

.pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.pipeline-head strong {
  display: inline-flex;
  min-width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}

.empty-lane {
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
}

.supplier-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.supplier-card.em_cotacao {
  border-color: #f0c48d;
}

.supplier-card.concluido {
  border-color: #8ecab8;
}

.supplier-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.supplier-card h3 {
  margin: 0 0 3px;
}

.supplier-card p,
.supplier-card small {
  margin: 0;
}

.status-pill {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.status-pill.em_cotacao {
  background: #fff2d8;
  color: #92400e;
}

.status-pill.concluido {
  background: #dff3ef;
  color: var(--bm-ok-escuro);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--border, #e2e8f0);
  width: fit-content;
}

.back-link:hover {
  background: #dff3ef;
}

.back-link i {
  width: 16px;
  height: 16px;
}

.pregao-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff2d8;
  color: #92400e;
  font-size: 13px;
  font-weight: 700;
  width: fit-content;
}

.pregao-date strong {
  font-weight: 850;
}

.pregao-date.sem-data {
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 600;
}

.pregao-date i {
  width: 15px;
  height: 15px;
}

.assign-input {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
}

/* Tabela de itens cabe inteira sem rolagem horizontal (no desktop). */
.items-table {
  width: 100%;
  table-layout: fixed;
}

.items-table th,
.items-table td {
  padding: 6px 8px;
}

.items-table input,
.items-table textarea,
.items-table select {
  width: 100%;
  box-sizing: border-box;
}

.items-table th:nth-child(1),
.items-table td:nth-child(1) { width: 44px; }
.items-table th:nth-child(2),
.items-table td:nth-child(2) { width: 52px; }
.items-table th:nth-child(3),
.items-table td:nth-child(3) { width: 15%; }
.items-table th:nth-child(5),
.items-table td:nth-child(5) { width: 60px; }
.items-table th:nth-child(6),
.items-table td:nth-child(6) { width: 96px; }
.items-table th:nth-child(7),
.items-table td:nth-child(7) { width: 140px; }
.items-table th:nth-child(8),
.items-table td:nth-child(8) { width: 40px; }

.config-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

.config-intro .muted {
  font-size: 14px;
}

.config-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.config-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.config-card-head h2 {
  margin: 0;
  font-size: 18px;
}

.config-sellers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-soft, #f1f5f9);
  flex-wrap: wrap;
}

.seller-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seller-info code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 700;
}

.seller-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.seller-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.seller-form input {
  flex: 1 1 180px;
}

.produtos-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  max-height: 320px;
  overflow: auto;
}

.produto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-soft, #f1f5f9);
}

.agenda-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.agenda-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
}

.agenda-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.agenda-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-soft, #f1f5f9);
}

.agenda-item-title {
  font-size: 14px;
  margin-bottom: 4px;
}

.agenda-item-mins {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.agenda-min {
  font-size: 14px;
}

.agenda-min b {
  font-weight: 800;
  color: var(--primary-dark, #2f63ee);
}

.agenda-table td,
.agenda-table th {
  vertical-align: top;
  padding: 10px 12px;
}

.agenda-table td:first-child a {
  font-weight: 800;
  color: var(--primary-dark, #2f63ee);
  text-decoration: none;
}

.agenda-table tr.agenda-row-first td {
  border-top: 2px solid var(--line, #e2e8f0);
}

.agenda-table td:last-child {
  font-weight: 700;
  white-space: nowrap;
}

.ai-button {
  border-color: #7c3aed !important;
  color: #6d28d9 !important;
}

.ai-button:hover {
  background: #f5f3ff !important;
}

.detail-topbar {
  margin-bottom: 10px;
}

.process-card {
  cursor: pointer;
  position: relative;
}

.process-card-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #b33a32;
  opacity: 0.5;
  cursor: pointer;
}

.process-card-del:hover {
  opacity: 1;
  background: rgba(180, 35, 24, 0.1);
}

.process-card-del i {
  width: 14px;
  height: 14px;
}

.process-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 4px 0;
}

.process-card-meta span b {
  font-weight: 800;
}

.quote-list-item {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding-right: 30px;
}

.supplier-timeline {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.progress-line {
  height: 8px;
  margin: 10px 0 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.progress-line span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.message-form {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}

.message-list {
  display: grid;
  gap: 10px;
}

.message {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.message.from-supplier {
  border-color: #f0c48d;
  background: #fff8ed;
}

.message div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.message p {
  margin: 8px 0 0;
  white-space: pre-wrap;
}

.message time {
  color: var(--muted);
  font-size: 12px;
}

.empty-state {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.empty-state svg {
  width: 42px;
  height: 42px;
  color: var(--primary);
}

.empty-state h2,
.empty-state p {
  margin: 0;
}

.toast {
  position: fixed;
  right: 18px;
  /* Acima do botão flutuante do Monitor (36 px de altura, 18 px do rodapé), que
     mora no mesmo canto e cobria metade do aviso — inclusive o que diz que o
     preço do vendedor foi jogado fora. */
  bottom: 64px;
  /* Acima de TUDO, inclusive das janelas com véu escuro (itens 9998, edição
     10005). Com 20 ele era pintado atrás de dois véus empilhados: quem editava
     o descritivo pela janela de itens nunca via "Descritivo alterado", nem o
     aviso de que o preço do vendedor tinha sido jogado fora. */
  z-index: 10050;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  background: var(--danger);
}

.supplier-shell {
  min-height: 100vh;
}

.supplier-main {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.login-panel,
.thurow-toolbar,
.thurow-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.login-panel {
  width: min(420px, 100%);
  margin: 34px auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.login-panel h2,
.thurow-toolbar h2,
.thurow-card h3 {
  margin: 0;
}

.thurow-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.thurow-list {
  display: grid;
  gap: 10px;
}

.thurow-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.thurow-card.em_cotacao {
  border-color: #f0c48d;
}

.thurow-card.concluido {
  border-color: #8ecab8;
}

.supplier-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.supplier-summary div,
.supplier-object,
.quote-item,
.supplier-messages {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.supplier-summary div {
  min-height: 74px;
  padding: 14px;
  display: grid;
  align-content: center;
  gap: 2px;
}

.supplier-summary span,
.quote-total span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.supplier-summary strong {
  font-size: 21px;
}

.supplier-object,
.supplier-messages {
  padding: 14px;
}

.supplier-object h2,
.supplier-object p {
  margin: 0;
}

.supplier-object h2 {
  margin-bottom: 6px;
  font-size: 16px;
}

.quote-form {
  display: grid;
  gap: 12px;
}

.quote-item {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.quote-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
  gap: 12px;
  align-items: start;
}

.item-number {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

/* ===================== CELULAR (responsivo) ===================== */
@media (max-width: 760px) {
  /* Evita o zoom automático do iOS ao focar campos */
  input,
  select,
  textarea,
  .short-input,
  .product-input,
  .description-input,
  .assign-input {
    font-size: 16px;
  }

  /* Cabeçalhos */
  .topbar,
  .supplier-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
    min-height: 0;
  }
  .topbar h1,
  .supplier-header h1 {
    font-size: 20px;
  }
  .top-actions,
  .workspace-actions {
    width: 100%;
  }
  .top-actions > *,
  .workspace-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Painel do comprador vira coluna única */
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 14px;
  }
  .workspace {
    padding: 14px;
  }
  .workspace-header {
    flex-direction: column;
    align-items: stretch;
  }
  .metric-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-lanes {
    grid-template-columns: 1fr;
  }

  /* Abas roláveis na horizontal */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-button {
    white-space: nowrap;
  }

  /* Tabelas largas rolam na horizontal */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- PORTAL DO FORNECEDOR (uso no celular) ---------- */
  .supplier-main {
    padding: 14px;
  }
  .supplier-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .thurow-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .thurow-toolbar .top-actions {
    width: 100%;
  }
  .thurow-card {
    flex-direction: column;
    align-items: stretch;
  }
  .thurow-card .primary-button {
    width: 100%;
    justify-content: center;
  }

  .supplier-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .supplier-toolbar h2 {
    font-size: 18px;
  }
  .supplier-toolbar .primary-button {
    width: 100%;
    justify-content: center;
  }

  .quote-item-head {
    grid-template-columns: 1fr;
  }
  .quantity-box {
    justify-self: start;
  }
  .quote-grid,
  .quote-grid.simple {
    grid-template-columns: 1fr;
  }

  .login-panel {
    width: 100%;
  }

  /* Alvos de toque maiores */
  .primary-button,
  .ghost-button,
  .danger-ghost,
  .ghost-link,
  .back-link,
  .tab-button {
    min-height: 44px;
  }
}

.quote-item h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.quantity-box {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-soft);
  text-align: center;
}

.quantity-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quote-grid.simple,
.quote-fixed-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-fixed-row {
  display: grid;
  gap: 10px;
}

.quote-fixed-row div {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fbfa;
}

.quote-fixed-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-fixed-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.quote-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.quote-total strong {
  font-size: 17px;
}

.is-busy {
  position: relative;
}

@media (max-width: 1040px) {
  .layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .metric-row,
  .supplier-summary,
  .quote-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-form,
  .message-form {
    grid-template-columns: 1fr 1fr;
  }

  .pipeline-board {
    grid-template-columns: 1fr;
  }

  .supplier-form button,
  .message-form button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .top-actions,
  .workspace-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .layout {
    display: block;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: none;
  }

  .workspace {
    padding: 14px;
  }

  .workspace-header {
    display: grid;
  }

  .process-funnel-title,
  .thurow-toolbar,
  .thurow-card {
    grid-template-columns: 1fr;
    display: grid;
  }

  .process-lanes {
    grid-template-columns: 1fr;
  }

  .metric-row,
  .form-grid.two,
  .supplier-summary,
  .quote-fixed-row,
  .quote-grid.simple,
  .quote-grid,
  .supplier-form,
  .message-form {
    grid-template-columns: 1fr;
  }

  .tab-panel {
    padding: 12px;
    box-shadow: none;
  }

  .supplier-card {
    grid-template-columns: 1fr;
  }

  .supplier-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 44px;
  }

  .quote-item-head {
    grid-template-columns: 1fr;
  }

  .supplier-main {
    padding: 12px;
  }
}

@media (max-width: 460px) {
  .topbar h1,
  .supplier-header h1,
  .workspace-header h2 {
    font-size: 21px;
  }

  .top-actions,
  .workspace-actions,
  .supplier-actions {
    grid-template-columns: 1fr;
  }

  .primary-button,
  .ghost-button,
  .danger-ghost,
  .ghost-link {
    width: 100%;
  }

  .tabs {
    gap: 6px;
  }

  .tab-button {
    min-width: 108px;
  }
}

/* ===== Padronizacao de estados ===== */
input:focus, select:focus, textarea:focus { border-color: var(--brand-green-600) !important; box-shadow: 0 0 0 3px var(--brand-green-100) !important; outline: none !important; }
button:disabled { background: var(--neutral-200) !important; color: var(--neutral-500) !important; border-color: var(--neutral-200) !important; cursor: not-allowed !important; }

/* === ETAPA3-POLIMENTO (Baumaster) === */
.workspace-header { margin-bottom: 10px !important; }
.workspace-header h2 { font-size: 21px !important; line-height: 1.3; }
.workspace-header .eyebrow { margin-bottom: 2px !important; }
.workspace-header p.muted { margin: 4px 0 0 !important; }
.tabs { margin-top: 14px !important; margin-bottom: 14px !important; gap: 6px !important; flex-wrap: wrap; }
.tab-button { height: 40px !important; padding: 0 14px !important; border-radius: 10px !important; border: 1px solid #d8dfda !important; background: #fff !important; color: #1c2a1e !important; font-size: 13.5px !important; display: inline-flex; align-items: center; gap: 7px; }
.tab-button:hover { background: #eef5ef !important; border-color: #6f93f5 !important; }
.tab-button.active { background: #2f63ee !important; border-color: #2f63ee !important; color: #fff !important; }
.tab-button.active i, .tab-button.active svg { color: #fff !important; stroke: #fff !important; }
.form-grid.two { grid-template-columns: 1.6fr 1fr !important; gap: 14px 16px !important; }
.panel-form label span { font-size: 12px !important; font-weight: 600 !important; color: #566158 !important; }
.panel-form input, .panel-form select { height: 44px !important; border: 1px solid #d8dfda !important; border-radius: 10px !important; background: #fff !important; padding: 0 12px !important; font-size: 14px !important; color: #1c2a1e !important; box-shadow: none !important; }
.panel-form textarea { border: 1px solid #d8dfda !important; border-radius: 10px !important; padding: 10px 12px !important; line-height: 1.5; font-size: 14px !important; box-shadow: none !important; }
.panel-form input:focus, .panel-form select:focus, .panel-form textarea:focus { border-color: #2f63ee !important; outline: 2px solid rgba(47, 99, 238,.15) !important; }
.documents-box { border-radius: 14px !important; }

/* ETAPA3B */
.tabs { margin-top: 6px !important; }
.workspace-header { margin-bottom: 4px !important; }

/* ===== Monitor de Pregões (acompanhamento da sessão pública) ===== */
#bmMonitorView { padding: 16px 20px 40px; }
.mon-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.mon-titulo h2 { margin: 0; font-size: 20px; }
.mon-sub { font-size: 12px; color: #667085; }
.mon-acoes { display: flex; align-items: center; gap: 12px; }
.mon-check { font-size: 12px; color: #475467; display: flex; align-items: center; gap: 5px; }
.mon-btn { border: 1px solid #d6e0dc; background: #fff; color: #0f766e; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mon-btn:hover { background: #f0faf7; }
.mon-btn:disabled { opacity: .6; cursor: default; }

.mon-avisos { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.mon-avisos-cab { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #9a3412; margin-bottom: 8px; }
.mon-link { border: none; background: none; color: #0f766e; font-size: 12px; cursor: pointer; text-decoration: underline; }
.mon-aviso { display: block; width: 100%; text-align: left; border: none; border-left: 3px solid #f59e0b; background: #fff; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; }
.mon-aviso:hover { background: #fffbeb; }
.mon-aviso.t-disputa { border-left-color: #dc2626; }
.mon-aviso.t-ultrapassado { border-left-color: #dc2626; }
.mon-aviso.nosso { background: #fef2f2; }
.mon-aviso-tit { display: block; font-size: 13px; font-weight: 700; color: #1a1a1a; }
.mon-aviso-org { display: block; font-size: 11px; color: #667085; }
.mon-aviso-txt { display: block; font-size: 12px; color: #344054; margin-top: 2px; }

.mon-corpo { display: grid; grid-template-columns: 330px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .mon-corpo { grid-template-columns: 1fr; } }

.mon-lista { background: #fff; border: 1px solid #e6eceb; border-radius: 12px; padding: 10px; max-height: 78vh; overflow-y: auto; }
.mon-busca { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #e6eceb; border-radius: 9px; font-size: 13px; margin-bottom: 8px; }
.mon-card { position: relative; display: block; width: 100%; text-align: left; border: 1px solid #eef2f1; background: #fff; border-radius: 10px; padding: 10px 11px; margin-bottom: 6px; cursor: pointer; }
.mon-card:hover { background: #f7faf9; }
.mon-card.sel { border-color: #0f766e; background: #f0faf7; }
.mon-card strong { display: block; font-size: 13px; color: #1a1a1a; }
.mon-meta { display: block; font-size: 11px; color: #667085; margin-top: 1px; }
.mon-sit { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; background: #e6f7ec; color: #0f766e; border-radius: 5px; padding: 1px 6px; margin-top: 5px; }
.mon-sit.fim { background: #f1f5f4; color: #667085; }
.mon-fase { display: block; font-size: 11px; color: #475467; margin-top: 4px; }
.mon-tag { display: inline-block; font-size: 10px; background: #eef2ff; color: #3730a3; border-radius: 5px; padding: 1px 6px; margin-top: 4px; }
.mon-badge { position: absolute; top: 8px; right: 8px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; }
.mon-vazio-lista, .mon-vazio, .mon-erro { padding: 16px; color: #667085; font-size: 13px; }
.mon-erro { color: #b42318; }

.mon-painel { background: #fff; border: 1px solid #e6eceb; border-radius: 12px; padding: 14px 16px; min-height: 300px; }
.mon-cab { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #eef2f1; padding-bottom: 12px; }
.mon-cab h3 { margin: 0 0 3px; font-size: 17px; }
.mon-cab-meta { font-size: 12px; color: #667085; }
.mon-cab-obj { font-size: 12px; color: #475467; margin-top: 6px; max-width: 70ch; }
.mon-cab-lado { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mon-situacao { font-size: 12px; font-weight: 700; color: #0f766e; background: #e6f7ec; border-radius: 6px; padding: 2px 9px; }
.mon-concorro { font-size: 11px; border-radius: 6px; padding: 2px 8px; }
.mon-concorro.sim { background: #e6f7ec; color: #0f766e; }
.mon-concorro.nao { background: #f1f5f4; color: #667085; }
.mon-link-portal { font-size: 11px; color: #0f766e; }
.mon-fase-atual { font-size: 13px; color: #344054; background: #f7faf9; border-radius: 8px; padding: 8px 10px; margin: 12px 0; }
/* "O que fazer agora" — prazo com hora marcada e volta da sessão. Amarelo de
   aviso, e vermelho quando falta menos de um dia: é o bloco que evita perder o
   pregão por prazo, não pode se parecer com o resto da tela. */
.mon-agora { border: 1px solid #e3c07a; background: #fff8e6; border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.mon-agora-tt { font: 800 11px system-ui; letter-spacing: .06em; text-transform: uppercase; color: #7a5b00; margin-bottom: 6px; }
.mon-agora-lin { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: #5c4700; padding: 3px 0; }
.mon-agora-lin b { font-weight: 700; }
.mon-agora-lin span { white-space: nowrap; font-weight: 600; }
.mon-agora-lin.urgente { color: #b42318; }
.mon-agora-lin.volta { border-top: 1px dashed #e3c07a; margin-top: 4px; padding-top: 6px; color: #3a4a42; }

.mon-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.mon-tab th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: #7b867e; padding: 6px 8px; border-bottom: 1px solid #eef2f1; }
.mon-tab td { padding: 8px; border-bottom: 1px solid #f4f7f6; vertical-align: top; }
.mon-tab tr.na-frente { background: #f0faf7; }
.mon-tab td.desc { color: #475467; max-width: 30ch; }
.mon-tab td.verde { color: #0f766e; font-weight: 700; }
.mon-tab td.vermelho { color: #b42318; font-weight: 700; }
.mon-marca { display: block; font-size: 10px; color: #667085; }
.mon-qtd { display: block; font-size: 10px; color: #98a2b3; font-weight: 400; }
.mon-min { width: 110px; padding: 5px 7px; border: 1px solid #e6eceb; border-radius: 7px; font-size: 12px; }
.mon-min.perigo { border-color: #dc2626; background: #fef2f2; }
.mon-alerta-min { display: block; font-size: 10px; color: #b42318; margin-top: 2px; }
.mon-dica { font-size: 11.5px; color: #667085; margin: 8px 0 18px; }

.mon-chat-cab { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #eef2f1; padding-top: 12px; }
.mon-chat-cab span { font-size: 11px; color: #667085; }
.mon-chat { max-height: 46vh; overflow-y: auto; margin-top: 8px; }
.mon-msg { display: grid; grid-template-columns: 150px 130px 1fr; gap: 8px; padding: 7px 8px; border-bottom: 1px solid #f4f7f6; font-size: 12.5px; }
@media (max-width: 800px) { .mon-msg { grid-template-columns: 1fr; gap: 2px; } }
.mon-msg-quem { font-weight: 600; color: #475467; }
.mon-msg-hora { color: #98a2b3; font-size: 11px; }
.mon-msg-txt { color: #1a1a1a; }
.mon-msg.o-pregoeiro { background: #f0f7ff; }
.mon-msg.o-pregoeiro .mon-msg-quem { color: #1d4ed8; }
.mon-msg.o-sistema .mon-msg-quem { color: #7b867e; }
.mon-msg.acao { border-left: 3px solid #f59e0b; }

/* Etiquetas de etapa do pregão e destaque das palavras-chave */
.mon-etapa { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border-radius: 5px; padding: 2px 7px; margin: 5px 5px 0 0; }
.mon-etapa.grande { font-size: 12px; padding: 3px 11px; }
.mon-etapa.c-vermelho { background: #fee2e2; color: #b42318; }
.mon-etapa.c-laranja  { background: #ffedd5; color: #9a3412; }
.mon-etapa.c-amarelo  { background: #fef3c7; color: #92400e; }
.mon-etapa.c-azul     { background: #dbeafe; color: #1d4ed8; }
.mon-etapa.c-roxo     { background: #ede9fe; color: #5b21b6; }
.mon-etapa.c-verde    { background: #dcfce7; color: #166534; }
.mon-etapa.c-cinza    { background: #f1f5f4; color: #667085; }
.mon-marca-palavra { background: #fde68a; color: #78350f; border-radius: 3px; padding: 0 3px; font-weight: 600; }
.mon-btn.peq { font-size: 11px; padding: 4px 9px; }

/* ==========================================================================
   REPAGINAÇÃO — outubro/2026
   ==========================================================================
   "Tem como repaginar isso? pra ficar com cara de profissional."

   O que mudou é só a APARÊNCIA. Nada saiu do lugar e nada funciona diferente:
   mesmas telas, mesmos botões, mesma ordem. O que fazia a tela parecer feita
   aos poucos era cada peça ter o seu próprio verde, a sua própria borda e o
   seu próprio tamanho de letra (e emoji no lugar de ícone). Aqui fica UMA
   paleta, UMA medida de canto, UMA sombra e UMA família de etiquetas — e as
   peças antigas passam a apontar para elas.

   Este bloco vem por último de propósito: ele ganha das regras de cima sem
   precisar reescrevê-las. As medidas de largura ficam dentro de
   @media (min-width: 1041px), para as regras de tela pequena, lá em cima,
   continuarem valendo como estavam.
   ========================================================================== */
:root {
  --bm-fundo: #f4f5f7;
  --bm-papel: #ffffff;
  --bm-papel-2: #f8f9fb;
  --bm-linha: #e4e7ec;
  --bm-linha-forte: #cfd4dc;
  --bm-tinta: #101828;
  --bm-tinta-2: #344054;
  --bm-tinta-3: #667085;
  --bm-tinta-4: #98a2b3;
  --bm-verde: #2f63ee;
  --bm-verde-escuro: #234fc4;
  --bm-verde-claro: #eaf1ff;
  --bm-verde-borda: #bcd0fb;
  /* O VERDE QUE SIGNIFICA ALGO (ganho, ok, concluído) — a marca é o azul, acima. Os nomes
     --bm-verde* ficaram (262 regras os usam) e hoje valem o AZUL da marca. */
  --bm-ok: #216e3f;
  --bm-ok-escuro: #185530;
  --bm-ok-claro: #e7f3eb;
  --bm-ok-borda: #b9dcc5;
  --bm-ok-2: #2f6b3b;
  --bm-ok-3: #4f8f5a;
  --bm-azul: #175cd3;
  --bm-azul-claro: #eff4ff;
  --bm-azul-borda: #c7d7fe;
  --bm-ambar: #93370d;
  --bm-ambar-claro: #fffaeb;
  --bm-ambar-borda: #fedf89;
  --bm-vermelho: #b42318;
  --bm-vermelho-claro: #fef3f2;
  --bm-vermelho-borda: #fecdca;
  --bm-raio: 8px;
  --bm-raio-g: 12px;
  --bm-sombra-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --bm-sombra-2: 0 4px 12px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --bm-foco: 0 0 0 3px rgba(47, 99, 238, 0.16);

  /* Os nomes antigos passam a valer os novos: todas as telas herdam a paleta
     sem que cada regra precise ser reescrita. (O "--primary-dark" antigo era um
     verde-azulado: o botão principal mudava de cor ao passar o mouse.) */
  --bg: var(--bm-fundo);
  --surface: var(--bm-papel);
  --surface-soft: #f2f4f7;
  --ink: var(--bm-tinta);
  --muted: var(--bm-tinta-3);
  --line: var(--bm-linha);
  --line-strong: var(--bm-linha-forte);
  --primary: var(--bm-verde);
  --primary-dark: var(--bm-verde-escuro);
  --primary-soft: var(--bm-verde-claro);
  --danger: var(--bm-vermelho);
  --shadow: var(--bm-sombra-2);
}

body {
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Botões e campos: uma altura, um canto, um foco --------------------- */
.primary-button,
.ghost-button,
.danger-ghost,
.ghost-link,
.icon-button,
.tab-button {
  border-radius: var(--bm-raio);
  font-weight: 600;
}
.primary-button {
  box-shadow: var(--bm-sombra-1);
}
.primary-button:hover {
  background: var(--bm-verde-escuro);
}
.ghost-button,
.ghost-link {
  border-color: var(--bm-linha-forte);
  color: var(--bm-tinta-2);
  box-shadow: var(--bm-sombra-1);
}
.ghost-button:hover,
.ghost-link:hover {
  border-color: #b8bfc9;
  background: var(--bm-papel-2);
}
.primary-button:focus-visible,
.ghost-button:focus-visible,
.lane-chip:focus-visible,
.card-acao:focus-visible,
.bmNavItem:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}

/* ---- Cabeçalho ----------------------------------------------------------- */
.topbar {
  padding: 10px 20px;
  gap: 16px;
  background: var(--bm-papel);
  border-bottom: 1px solid var(--bm-linha);
}
.topbar .brand-logo-svg {
  height: 32px;
}
.topbar #globalSearch {
  height: 40px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
  color: var(--bm-tinta);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.topbar #globalSearch::placeholder {
  color: var(--bm-tinta-4);
}
.topbar #globalSearch:hover {
  border-color: var(--bm-linha-forte);
}
.topbar #globalSearch:focus {
  border-color: var(--bm-verde);
  background: var(--bm-papel);
  box-shadow: var(--bm-foco);
}
.topbar .gs-icon {
  color: var(--bm-tinta-4);
}
.topbar .gs-plus {
  width: 40px;
  height: 40px;
  border-radius: var(--bm-raio);
  background: var(--bm-verde);
  box-shadow: var(--bm-sombra-1);
  transition: background 0.15s ease;
}
.topbar .gs-plus:hover {
  background: var(--bm-verde-escuro);
}
.topbar .gs-plus i,
.topbar .gs-plus svg {
  width: 20px;
  height: 20px;
}
.topbar .gs-results,
.topbar .account-dropdown {
  border: 1px solid var(--bm-linha);
  border-radius: 10px;
  box-shadow: var(--bm-sombra-2);
}
.topbar .top-actions {
  gap: 4px;
}
/* Os botões da direita deixam de ser quatro caixas com borda: ficam só o
   símbolo, e a caixa aparece ao passar o mouse. */
.topbar .top-actions .ghost-button {
  min-height: 38px;
  min-width: 38px;
  padding: 0 9px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--bm-tinta-2);
}
.topbar .top-actions .ghost-button:hover,
.topbar .top-actions .account-menu.open > .ghost-button,
.topbar .top-actions .bell-menu.open > .ghost-button {
  background: #f2f4f7;
  border-color: transparent;
}
.topbar .account-trigger {
  padding: 0 6px 0 4px;
  gap: 4px;
}
.topbar .account-avatar {
  width: 30px;
  height: 30px;
  background: var(--bm-verde);
  font-size: 13px;
}
.topbar .account-item {
  font-size: 14px;
  color: var(--bm-tinta-2);
  border-radius: 6px;
}
.topbar .account-item:hover {
  background: #f2f4f7;
}

/* ---- Menu lateral -------------------------------------------------------- */
.sidebar {
  background: var(--bm-papel);
  border-right: 1px solid var(--bm-linha);
}
.sidebar-head .eyebrow {
  color: var(--bm-tinta-4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.sidebar-toggle {
  border-color: var(--bm-linha);
  border-radius: 6px;
  color: var(--bm-tinta-3);
}
.sidebar-toggle:hover {
  background: #f2f4f7;
}
#bmNav {
  gap: 2px;
  border-bottom-color: var(--bm-linha);
}
.bmNavItem {
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--bm-raio);
  color: var(--bm-tinta-2);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.bmNavItem .bmNavIco {
  width: 18px;
  height: 18px;
  color: var(--bm-tinta-3);
}
.bmNavItem:hover {
  background: #f2f4f7;
  color: var(--bm-tinta);
}
/* O item da tela em que ela está: fundo claro e letra verde, em vez do bloco
   verde cheio — que pesava mais que tudo o que está à direita dele. */
.bmNavItem.on {
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
  font-weight: 600;
}
.bmNavItem.on .bmNavIco {
  color: var(--bm-verde);
}
.bmNavItem.on .bmNavBadge {
  background: var(--bm-vermelho);
  color: #fff;
}
.bmNavBadge {
  background: var(--bm-vermelho);
}
.bmMenuCfg {
  min-height: 34px;
  padding: 0 10px 0 28px !important;
  color: var(--bm-tinta-3);
  font: 500 13px Inter, "Segoe UI", system-ui, Arial;
}
.bmMenuCfg:hover {
  background: #f2f4f7 !important;
  color: var(--bm-tinta);
}
.bmMenuCfg .bmNavSimb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--bm-tinta-4);
}
.bmMenuCfg .bmNavSimb svg {
  width: 15px;
  height: 15px;
}
.bmMenuCfg:hover .bmNavSimb {
  color: var(--bm-tinta-2);
}
.upload-box {
  border-bottom-color: var(--bm-linha);
}
.file-label {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px dashed var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
  color: var(--bm-tinta-3);
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.file-label:hover {
  border-color: var(--bm-verde);
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
}
.file-label svg,
.file-label i {
  width: 16px;
  height: 16px;
}
.upload-box .primary-button.full {
  min-height: 40px;
}

/* ---- Resumo do dia ------------------------------------------------------- */
.resumo-dia {
  padding: 10px 14px;
  margin-bottom: 0;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font-size: 13.5px;
  box-shadow: var(--bm-sombra-1);
}
.resumo-dia i,
.resumo-dia svg {
  color: var(--bm-tinta-3);
}
.resumo-dia b {
  color: var(--bm-tinta);
  font-weight: 700;
}
.resumo-dia.urgente {
  background: var(--bm-ambar-claro);
  border-color: var(--bm-ambar-borda);
  color: var(--bm-ambar);
}
.resumo-dia.urgente i,
.resumo-dia.urgente svg {
  color: #dc6803;
}
.resumo-dia.urgente b {
  color: #7a2e0e;
}

/* ---- Barra de filtros do funil ------------------------------------------ */
.funil-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.funil-filtros,
.funil-contadores {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.funil-busca {
  position: relative;
}
.funil-busca > i,
.funil-busca > svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--bm-tinta-4);
  pointer-events: none;
}
.funil-busca input,
.funil-campo input,
.funil-campo select {
  height: 36px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta);
  font-size: 13px;
  outline: none;
  box-shadow: var(--bm-sombra-1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.funil-busca input {
  width: 210px;
  padding: 0 28px 0 32px;
}
.funil-campo input,
.funil-campo select {
  padding: 0 10px;
}
.funil-busca input:focus,
.funil-campo input:focus,
.funil-campo select:focus {
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}
.funil-limpar {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaecf0;
  color: var(--bm-tinta-2);
  font-size: 10px;
  line-height: 1;
}
.funil-limpar:hover {
  background: #d0d5dd;
}
.funil-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.funil-campo .rot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bm-tinta-3);
  font-size: 13px;
  font-weight: 500;
}
.funil-campo .rot i,
.funil-campo .rot svg {
  width: 15px;
  height: 15px;
  color: var(--bm-tinta-4);
}
.funil-limpar-datas {
  min-height: 36px;
  font-size: 12.5px;
}
.bmPastilha {
  min-height: 36px;
  padding: 0 12px;
  gap: 7px;
  color: var(--bm-tinta-2);
  font-size: 13px;
}
.bmPastilha i,
.bmPastilha svg {
  width: 15px;
  height: 15px;
  color: var(--bm-tinta-3);
}
.bmPastilha b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bmPastilha span {
  font-weight: 500;
  font-size: 13px;
}
.bmPastilha.ganhos.tem b,
.bmPastilha.ganhos.tem svg,
.bmPastilha.ganhos.tem i {
  color: var(--bm-ok);
}
.bmPastilha.lixeira.tem b,
.bmPastilha.lixeira.tem svg,
.bmPastilha.lixeira.tem i {
  color: var(--bm-vermelho);
}

/* ---- Colunas do funil ---------------------------------------------------- */
.process-funnel {
  gap: 14px;
}
.process-lane,
.process-lane.em_cotacao,
.process-lane.concluido {
  gap: 8px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--bm-raio-g);
  background: #eceef2;
}
.process-lane.lane-drop {
  outline: 2px dashed var(--bm-verde);
  outline-offset: -3px;
  background: var(--bm-verde-claro);
  border-radius: var(--bm-raio-g);
}
/* A etapa é dita por um ponto de cor ao lado do nome, não mais pela borda da
   coluna inteira (duas colunas tinham borda colorida e duas não). */
.process-lane .pipeline-head {
  justify-content: flex-start;
  gap: 8px;
  min-height: 28px;
  padding: 2px 4px 0;
  color: var(--bm-tinta-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lane-ponto {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--bm-tinta-4);
}
.process-lane.captado .lane-ponto { background: #2e90fa; }
.process-lane.aguardando .lane-ponto { background: #f79009; }
.process-lane.em_cotacao .lane-ponto { background: #7a5af8; }
.process-lane.concluido .lane-ponto { background: #12b76a; }
.lane-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.process-lane .pipeline-head strong {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bm-papel);
  border: 1px solid var(--bm-linha);
  color: var(--bm-tinta-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.process-lane .pipeline-total {
  margin-left: auto;
  margin-right: 0;
  color: var(--bm-tinta-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.lane-chips {
  gap: 6px;
  padding: 0 2px 4px;
}
.lane-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--bm-linha);
  border-radius: 999px;
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font-size: 12px;
  font-weight: 500;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.lane-chip b {
  color: var(--bm-tinta-4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lane-chip:hover {
  border-color: var(--bm-linha-forte);
  background: var(--bm-papel-2);
}
.lane-chip.ativo {
  border-color: var(--bm-verde);
  background: var(--bm-verde);
  color: #fff;
}
.lane-chip.ativo b {
  color: rgba(255, 255, 255, 0.82);
}
.process-lane .empty-lane {
  min-height: 72px;
  border: 1px dashed var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  color: var(--bm-tinta-4);
  font-size: 13px;
}

/* ---- Cartão do pregão ---------------------------------------------------- */
.process-card {
  gap: 6px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--bm-linha);
  border-radius: 10px;
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-1);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.process-card:hover {
  border-color: var(--bm-linha-forte);
  box-shadow: var(--bm-sombra-2);
}
.process-card:focus-visible {
  outline: none;
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}
.process-card.active {
  border-color: var(--bm-verde);
  background: var(--bm-papel);
  box-shadow: var(--bm-foco);
}
/* A faixa de cor da esquerda continua dizendo o mesmo de antes (azul: em
   triagem; verde: já tem preço; vermelho: ninguém tem ou está na lixeira) —
   só ficou mais fina, e por dentro do canto arredondado. */
.process-card.barra-azul,
.process-card.barra-verde,
.process-card.barra-vermelha {
  background-image: linear-gradient(to right, var(--barra) 0, var(--barra) 3px, transparent 3px);
}
.process-card.barra-azul { --barra: #2e90fa; }
.process-card.barra-verde { --barra: #12b76a; }
.process-card.barra-vermelha { --barra: #f04438; }
.process-card .bm-ico {
  width: 14px;
  height: 14px;
  flex: none;
}
.process-card-titulo {
  padding-right: 26px;
  color: var(--bm-tinta);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.process-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.bm-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--bm-linha);
  border-radius: 999px;
  background: var(--bm-papel-2);
  color: var(--bm-tinta-2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bm-tag .bm-ico {
  width: 11px;
  height: 11px;
}
.bm-tag.verde { background: var(--bm-ok-claro); border-color: var(--bm-ok-borda); color: var(--bm-ok-escuro); }
.bm-tag.azul { background: var(--bm-azul-claro); border-color: var(--bm-azul-borda); color: var(--bm-azul); }
.bm-tag.vermelho { background: var(--bm-vermelho-claro); border-color: var(--bm-vermelho-borda); color: var(--bm-vermelho); }
.bm-tag.neutro { background: var(--bm-papel-2); border-color: var(--bm-linha); color: var(--bm-tinta-3); }
.process-card .process-card-valor {
  margin-top: 0;
  color: var(--bm-tinta);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.process-card .process-card-valor.real {
  color: var(--bm-verde);
}
.process-card .process-card-orgnome {
  align-items: flex-start;
  gap: 6px;
  margin-top: 0;
  color: var(--bm-tinta-2);
  font-size: 12.5px;
  line-height: 1.35;
}
.process-card .process-card-orgnome .bm-ico {
  margin-top: 2px;
  color: var(--bm-tinta-4);
}
.process-card a.process-card-orgnome:hover span {
  color: var(--bm-azul);
  text-decoration: underline;
}
.process-card .process-card-nota {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  color: #b54708;
  font-size: 12px;
  font-weight: 600;
}
.process-card .process-card-org {
  margin-top: 0;
  gap: 6px;
  color: var(--bm-tinta-3);
  font-size: 12px;
}
.process-card .process-card-org .ganhos {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bm-ok);
  font-weight: 600;
}
.process-card .process-card-org .ganhos .bm-ico {
  width: 12px;
  height: 12px;
}
.process-card .process-card-org .sep {
  color: var(--bm-linha-forte);
}
.process-card .process-card-meta {
  gap: 4px 12px;
  margin: 2px 0 0;
  padding-top: 8px;
  border-top: 1px solid #f0f2f5;
  color: var(--bm-tinta-3);
  font-size: 12px;
}
.process-card .process-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.process-card .process-card-meta .bm-ico {
  width: 13px;
  height: 13px;
  color: var(--bm-tinta-4);
}
.process-card .process-card-meta b {
  color: var(--bm-tinta-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.process-card .process-card-objeto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--bm-tinta-3);
  font-size: 12.5px;
  line-height: 1.4;
}
.process-card .process-card-triagem {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bm-azul-claro);
  color: var(--bm-azul);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}
.process-card .process-card-triagem .bm-ico {
  width: 13px;
  height: 13px;
  margin-top: 1px;
}
.process-card .process-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--bm-azul);
  font-size: 12.5px;
  font-weight: 500;
}
.process-card .process-card-link .bm-ico {
  width: 13px;
  height: 13px;
}
.process-card .process-card-link:hover {
  text-decoration: underline;
}
.process-card-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.card-acao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: 6px;
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--bm-sombra-1);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.card-acao .bm-ico {
  width: 13px;
  height: 13px;
}
.card-acao:hover {
  background: var(--bm-papel-2);
}
.card-acao.ganho {
  border-color: var(--bm-ok-borda);
  color: var(--bm-ok-escuro);
}
.card-acao.ganho:hover {
  background: var(--bm-ok-claro);
  border-color: var(--bm-ok);
}
.card-acao.perdido:hover,
.card-acao.perigo:hover {
  background: var(--bm-vermelho-claro);
  border-color: var(--bm-vermelho-borda);
  color: var(--bm-vermelho);
}
.card-acao.perigo {
  color: var(--bm-vermelho);
}
/* A lixeirinha do canto só aparece ao passar o mouse (ou com o teclado no
   card): eram dezenas de lixeiras vermelhas disputando a atenção com o que
   importa. Em tela de toque ela fica sempre visível. */
.process-card .process-card-del {
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--bm-tinta-4);
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.process-card:hover .process-card-del,
.process-card:focus-within .process-card-del,
.process-card .process-card-del:focus-visible {
  opacity: 1;
}
.process-card .process-card-del:hover {
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
}
@media (hover: none) {
  .process-card .process-card-del {
    opacity: 0.6;
  }
}

/* ---- Botão flutuante do Monitor ------------------------------------------ */
body #bmMFab {
  gap: 8px;
  padding: 0 16px;
  height: 44px;
  background: var(--bm-verde);
  font: 600 14px/1 Inter, "Segoe UI", system-ui, Arial;
  box-shadow: 0 8px 20px -4px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.12);
  transition: background 0.15s ease, transform 0.15s ease;
}
body #bmMFab:hover {
  background: var(--bm-verde-escuro);
  transform: translateY(-1px);
}
body #bmMFab svg {
  width: 17px;
  height: 17px;
}

/* ---- Barras de rolagem discretas ----------------------------------------- */
.sidebar,
.workspace,
.process-card-list {
  scrollbar-width: thin;
  scrollbar-color: #cfd4dc transparent;
}

/* ---- Medidas de tela grande ---------------------------------------------- */
@media (min-width: 1041px) {
  .layout {
    grid-template-columns: 264px minmax(0, 1fr);
  }
  .sidebar {
    padding: 14px 12px;
  }
  .workspace {
    padding: 20px 24px;
  }
  .process-lanes {
    gap: 14px;
  }
}

/* ---- Acertos de precedência ---------------------------------------------- */
/* O Monitor injeta o seu próprio estilo para este item, depois deste arquivo. */
.sidebar .bmMenuCfg {
  color: var(--bm-tinta-3);
  font: 500 13px Inter, "Segoe UI", system-ui, Arial;
}
.sidebar .bmMenuCfg:hover {
  color: var(--bm-tinta);
}
/* O convite de anexar cabe em duas linhas (a barra lateral ficou mais estreita). */
.sidebar .file-label span {
  white-space: normal;
  line-height: 1.3;
}

/* ==========================================================================
   DENTRO DO PREGÃO — Negócio, Arquivos, Organização e Pessoa
   ==========================================================================
   A estrutura é a do Pipedrive: o NEGÓCIO (o pregão) pertence a uma
   ORGANIZAÇÃO (a prefeitura), que tem uma PESSOA (quem atende). Cada um no
   seu bloco, todos com o mesmo cabeçalho. Ver blocoOrganizacao e blocoPessoa
   em app/02-lista.js e renderDadosFixos em app/03-edital.js. */
.workspace-header h2 {
  font-size: 22px !important;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--bm-tinta);
}
.bt-ganho,
.bt-perdido {
  height: 36px;
  padding: 0 18px;
  border-radius: var(--bm-raio);
  font: 600 13.5px Inter, "Segoe UI", system-ui, Arial;
  box-shadow: var(--bm-sombra-1);
  transition: background 0.15s ease;
}
.bt-ganho { background: var(--bm-ok); }
.bt-ganho:hover { background: var(--bm-ok-escuro); }
.bt-perdido { background: #d92d20; }
.bt-perdido:hover { background: var(--bm-vermelho); }
.menu-mais-lista {
  border: 1px solid var(--bm-linha);
  border-radius: 10px;
  box-shadow: var(--bm-sombra-2);
}

/* A trilha das etapas: as mesmas quatro do funil, com as mesmas cores sóbrias. */
.bmTrilha {
  margin-top: 14px;
  border-radius: var(--bm-raio);
}
.bmPasso {
  padding-top: 8px;
  padding-bottom: 8px;
  background: #eaecf0;
  color: var(--bm-tinta-3);
  transition: filter 0.12s ease;
}
.bmPasso:hover {
  filter: brightness(0.97);
}
.bmPassoNome {
  font: 600 12px Inter, "Segoe UI", system-ui, Arial;
}
.bmPassoFato {
  font-size: 11.5px;
}
.bmPasso.ok {
  background: var(--bm-ok-claro);
  color: var(--bm-ok-escuro);
}
.bmPasso.ok.ganho {
  background: var(--bm-ok);
  color: #fff;
}
.bmPasso.atual {
  background: var(--bm-verde);
  color: #fff;
}
.bmPasso.alerta {
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
}

/* As abas da direita. */
.tab-button {
  height: 36px !important;
  padding: 0 13px !important;
  border-radius: var(--bm-raio) !important;
  border: 1px solid var(--bm-linha) !important;
  background: var(--bm-papel) !important;
  color: var(--bm-tinta-2) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  box-shadow: var(--bm-sombra-1);
}
.tab-button svg,
.tab-button i {
  width: 16px;
  height: 16px;
  color: var(--bm-tinta-3);
}
.tab-button:hover {
  background: var(--bm-papel-2) !important;
  border-color: var(--bm-linha-forte) !important;
}
.tab-button.active {
  background: var(--bm-verde) !important;
  border-color: var(--bm-verde) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Os quatro blocos da esquerda. */
.edital-lado {
  display: grid;
  gap: 12px;
  align-content: start;
}
.lado-bloco,
.panel-form.edital-dados.lado-bloco,
.documents-box.lado-bloco,
.bloco-org.lado-bloco {
  display: block;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g) !important;
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-1);
}
.lado-cabeca {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.lado-cabeca b {
  color: var(--bm-tinta);
  font-size: 13.5px;
  font-weight: 650;
}
.lado-ico {
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #f2f4f7;
  color: var(--bm-tinta-3);
}
.lado-ico .bm-ico {
  width: 14px;
  height: 14px;
}
.edital-dados .lado-ico { background: var(--bm-verde-claro); color: var(--bm-verde); }
.documents-box .lado-ico { background: #fff6ed; color: #c4320a; }
.bloco-org .lado-ico { background: var(--bm-azul-claro); color: var(--bm-azul); }
.bloco-pessoa .lado-ico { background: #f4f3ff; color: #5925dc; }
.lado-conta {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f2f4f7;
  color: var(--bm-tinta-2);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lado-dica {
  margin: 8px 0 0;
  color: var(--bm-tinta-4);
  font-size: 12px;
  line-height: 1.35;
}

/* Negócio: o valor em destaque, e cada dado numa linha de rótulo e valor. */
.edital-dados .valor-negocio {
  margin: 0 0 8px !important;
  padding: 10px 12px;
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
}
.edital-dados .valor-negocio > span:first-child,
.edital-dados label span,
.lado-linha > span {
  color: var(--bm-tinta-3);
  font: 500 12px Inter, "Segoe UI", system-ui, Arial;
}
.panel-form.edital-dados .valor-caixa input {
  color: var(--bm-tinta) !important;
  font-size: 18px !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.edital-dados .valor-negocio .valor-caixa b {
  color: var(--bm-tinta-3);
}
.valor-itens {
  color: var(--bm-azul);
  font: 500 12.5px Inter, "Segoe UI", system-ui, Arial;
}
.panel-form.edital-dados input,
.panel-form.edital-dados select,
.panel-form.edital-dados textarea {
  color: var(--bm-tinta) !important;
  font-weight: 500;
}
.edital-dados label:hover input,
.edital-dados label:hover select,
.edital-dados label:hover textarea {
  border-color: var(--bm-linha-forte) !important;
}
.panel-form.edital-dados input:focus,
.panel-form.edital-dados select:focus,
.panel-form.edital-dados textarea:focus {
  border-color: var(--bm-verde) !important;
  box-shadow: var(--bm-foco) !important;
}
.edital-dados .lado-objeto {
  display: block;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #f0f2f5;
}
.edital-dados .lado-objeto span {
  display: block;
  margin-bottom: 4px;
}

/* Organização e Pessoa: os campos da ficha, editáveis no lugar. */
.lado-campos {
  display: grid;
  gap: 2px;
}
.lado-linha {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
}
.lado-linha input {
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--bm-tinta);
  font-size: 12.5px;
  font-weight: 500;
  outline: none;
  box-shadow: none;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.lado-linha input::placeholder {
  color: var(--bm-tinta-4);
  font-weight: 400;
}
.lado-linha:hover input {
  border-color: var(--bm-linha-forte);
  background: var(--bm-papel);
}
.lado-linha input:focus {
  border-color: var(--bm-verde);
  background: var(--bm-papel);
  box-shadow: var(--bm-foco);
}
/* Gravou: o campo pisca de verde. Não gravou: fica vermelho até dar certo. */
.lado-linha input.salvo {
  border-color: #12b76a;
  background: #f6fef9;
}
.lado-linha input.erro {
  border-color: #f04438;
  background: var(--bm-vermelho-claro);
}
.bloco-org .org-nome {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--bm-tinta);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.bloco-org .org-nome .bm-ico {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  flex: none;
  color: var(--bm-tinta-4);
}
.bloco-org .org-nome:hover,
.bloco-org .org-nome:hover .bm-ico {
  color: var(--bm-azul);
}
.bloco-org .org-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
  padding-top: 0;
  border-top: 0;
}
.bloco-org .org-numeros > div {
  padding: 8px 10px;
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
}
.bloco-org .org-numeros > div.largo {
  grid-column: 1 / -1;
}
.bloco-org .org-numeros b {
  display: block;
  color: var(--bm-tinta);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.bloco-org .org-numeros span {
  color: var(--bm-tinta-3);
  font-size: 11.5px;
}
.bloco-org .org-numeros .bom b { color: var(--bm-ok); }
.bloco-org .org-numeros .ruim b { color: var(--bm-vermelho); }
.pessoa-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pessoa-acoes:not(:empty) {
  margin-top: 10px;
}
.pessoa-acao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: 6px;
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--bm-sombra-1);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pessoa-acao .bm-ico {
  width: 13px;
  height: 13px;
}
.pessoa-acao:hover {
  background: var(--bm-verde-claro);
  border-color: var(--bm-verde-borda);
  color: var(--bm-verde-escuro);
}

/* Arquivos. */
.documents-box.lado-bloco .documents-list:empty {
  display: none;
}
.documents-box.lado-bloco .drop-anexo {
  border: 1px dashed var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
}
.documents-box.lado-bloco .drop-anexo:hover,
.documents-box.lado-bloco .drop-anexo.sobre {
  border-color: var(--bm-verde);
  background: var(--bm-verde-claro);
}

/* A linha-resumo do negócio, logo abaixo do nome (ver resumoDoNegocio). */
.negocio-resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 6px;
  color: var(--bm-tinta-3);
  font-size: 13px;
}
.negocio-resumo > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.negocio-resumo .bm-ico {
  width: 14px;
  height: 14px;
  color: var(--bm-tinta-4);
}
.negocio-resumo .quando {
  margin-left: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  background: #f2f4f7;
  color: var(--bm-tinta-2);
}
.negocio-resumo .quando.perto {
  background: var(--bm-ambar-claro);
  color: var(--bm-ambar);
  box-shadow: inset 0 0 0 1px var(--bm-ambar-borda);
}
.negocio-resumo .quando.passou {
  background: #f2f4f7;
  color: var(--bm-tinta-3);
}

/* ==========================================================================
   MONITOR (acompanhamento do pregão) — o mesmo padrão, sem mexer no que faz
   ==========================================================================
   O Monitor traz o seu próprio estilo, escrito dentro de monitor-plus.js e
   posto na página DEPOIS deste arquivo. Por isso as regras daqui começam por
   #bmOV (a tela cheia do Monitor): é o que as faz valer sobre as de lá.
   Só aparência: tamanho de letra, cor, borda e canto. O vermelho do "não
   verificadas" e do "pede ação" continua vermelho — é aviso, não enfeite. */
#bmOV #bmOVcard {
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--bm-tinta);
}
#bmOV #bmAcTop {
  gap: 8px;
  padding: 8px 16px;
  background: var(--bm-papel);
  border-bottom: 1px solid var(--bm-linha);
}
#bmOV .bmChip {
  padding: 7px 12px;
  border-radius: var(--bm-raio);
  background: var(--bm-tinta-2);
  font: 600 12px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV .bmChip:hover {
  background: var(--bm-verde);
}
#bmOV .bmChip.sel {
  background: var(--bm-verde);
  box-shadow: 0 0 0 2px var(--bm-verde-borda);
}

/* A lista da esquerda. */
#bmOV #bmAcLeft {
  border-right: 1px solid var(--bm-linha);
}
#bmOV #bmAcLBar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bm-linha);
}
#bmOV #bmAcLBar b {
  color: var(--bm-tinta);
  font-size: 15px;
  font-weight: 650;
}
#bmOV #bmAcLBar .ct {
  color: var(--bm-tinta-4);
  font-size: 11.5px;
}
#bmOV #bmAcRec {
  border-color: var(--bm-linha);
  border-radius: 6px;
  color: var(--bm-tinta-3);
}
#bmOV #bmAcRec:hover {
  background: #f2f4f7;
  color: var(--bm-tinta);
}
#bmOV #bmAcFiltros {
  gap: 6px;
  padding: 10px 12px 0;
}
/* As abas de etapa: um ponto de cor no lugar do emoji, o número em cinza. */
#bmOV .bmFiltro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--bm-linha);
  border-radius: 999px;
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font: 500 12px Inter, "Segoe UI", system-ui, Arial;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
#bmOV .bmFiltro:hover {
  border-color: var(--bm-linha-forte);
  background: var(--bm-papel-2);
  color: var(--bm-tinta);
}
#bmOV .bmFiltro.on {
  border-color: var(--bm-verde);
  background: var(--bm-verde);
  color: #fff;
}
#bmOV .bmFiltro.mini {
  border-style: solid;
  color: var(--bm-tinta-3);
}
#bmOV .bmFiltro.mini.on {
  color: #fff;
}
.bmFiltro svg {
  width: 14px;
  height: 14px;
}
.bmFiltroPonto {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--bm-tinta-4);
}
.bmFiltro[data-f=""] .bmFiltroPonto { background: #12b76a; }
.bmFiltro[data-f="disputa"] .bmFiltroPonto { background: #f04438; }
.bmFiltro[data-f="semproposta"] .bmFiltroPonto { background: #98a2b3; }
.bmFiltro[data-f="negociacao"] .bmFiltroPonto { background: #2e90fa; }
.bmFiltro[data-f="habilitacao"] .bmFiltroPonto { background: #f79009; }
.bmFiltro[data-f="vencedor"] .bmFiltroPonto { background: #7a5af8; }
.bmFiltro[data-f="andamento"] .bmFiltroPonto { background: #0ba5ec; }
.bmFiltro[data-f="arrematei"] .bmFiltroPonto { background: #eaaa08; }
.bmFiltro[data-f="recurso"] .bmFiltroPonto { background: #9e77ed; }
.bmFiltro[data-f="retificado"] .bmFiltroPonto { background: #dc6803; }
.bmFiltro[data-f="desclassificado"] .bmFiltroPonto { background: #d92d20; }
.bmFiltro[data-f="homologados"] .bmFiltroPonto { background: #039855; }
.bmFiltro.on .bmFiltroPonto {
  background: #fff;
}
.bmFiltroN {
  color: var(--bm-tinta-4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bmFiltro.on .bmFiltroN {
  color: rgba(255, 255, 255, 0.85);
}
#bmOV #bmAcBusca {
  padding: 10px 12px 0;
}
#bmOV #bmAcSearch {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  color: var(--bm-tinta);
  font-size: 13px;
  outline: none;
  box-shadow: var(--bm-sombra-1);
}
#bmOV #bmAcSearch:focus {
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}
#bmOV #bmAcList {
  padding: 10px 12px;
}
#bmOV .bmLic {
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--bm-linha);
  border-left: 3px solid var(--bm-linha-forte);
  border-radius: 10px;
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-1);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#bmOV .bmLic:hover {
  border-color: var(--bm-linha-forte);
  box-shadow: var(--bm-sombra-2);
}
#bmOV .bmLic.sel {
  border-color: var(--bm-verde);
  border-left-color: var(--bm-verde);
  background: #f6fbf8;
  box-shadow: var(--bm-foco);
}
#bmOV .bmLic .pf {
  color: var(--bm-tinta);
  font-size: 13.5px;
  font-weight: 600;
}
#bmOV .bmLic .l2 {
  margin-top: 4px;
  color: var(--bm-tinta-3);
  font-size: 12px;
}
#bmOV .bmLic .nv {
  padding: 2px 8px;
  background: #d92d20;
  font: 600 10.5px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV .bmPill {
  padding: 3px 9px;
  border-radius: 999px;
  font: 600 10.5px Inter, "Segoe UI", system-ui, Arial;
}

/* O pregão escolhido, à direita. */
#bmOV #bmAcRHead {
  padding: 14px 18px;
  background: var(--bm-papel);
  border-bottom: 1px solid var(--bm-linha);
}
#bmOV #bmAcRHead .hNome > b {
  color: var(--bm-tinta);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.005em;
}
#bmOV #bmAcRHead .hSub {
  margin-top: 4px;
  color: var(--bm-tinta-3);
  font-size: 12.5px;
}
#bmOV #bmAcRHead .hSub b {
  color: var(--bm-tinta-2);
}
#bmOV #bmAcAcoes {
  gap: 6px;
}
#bmOV .bmTag {
  padding: 4px 10px;
  border: 1px solid var(--bm-linha);
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font: 500 11.5px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV .bmTag.sim {
  background: var(--bm-ok-claro);
  border-color: var(--bm-ok-borda);
  color: var(--bm-ok-escuro);
}
#bmOV .bmTag.nao {
  background: #f2f4f7;
  color: var(--bm-tinta-3);
}
#bmOV .bmTag.link {
  border-color: var(--bm-linha-forte);
  color: var(--bm-tinta-2);
}
#bmOV .bmTag.link:hover {
  border-color: var(--bm-verde);
  color: var(--bm-verde-escuro);
}
#bmOV .bmTag.acao {
  background: var(--bm-verde);
  border-color: var(--bm-verde);
  color: #fff;
}
#bmOV .bmAgoraP {
  padding: 4px 11px;
  border-color: var(--bm-linha);
  background: #f2f4f7;
  color: var(--bm-tinta-2);
  font: 500 12px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV .bmAgoraP.volta {
  background: var(--bm-azul-claro);
  border-color: var(--bm-azul-borda);
  color: var(--bm-azul);
}
#bmOV .bmAgoraP.urgente {
  background: var(--bm-vermelho-claro);
  border-color: var(--bm-vermelho-borda);
  color: var(--bm-vermelho);
}
#bmOV #bmAcFase {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--bm-ambar-borda);
  border-radius: var(--bm-raio);
  background: var(--bm-ambar-claro);
  color: #7a2e0e;
  font-size: 12.5px;
}
#bmOV #bmAcTabs {
  padding: 0 18px;
  border-bottom: 1px solid var(--bm-linha);
}
#bmOV #bmAcTabs button {
  margin-right: 22px;
  padding: 12px 2px;
  color: var(--bm-tinta-3);
  font: 500 13.5px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV #bmAcTabs button:hover {
  color: var(--bm-tinta);
}
#bmOV #bmAcTabs button.sel {
  color: var(--bm-tinta);
  font-weight: 600;
  border-bottom-color: var(--bm-verde);
}
#bmOV #bmAcTabs .n {
  padding: 1px 6px;
  background: #f2f4f7;
  color: var(--bm-tinta-2);
  font: 600 11px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV #bmAcTabs .n.alerta {
  background: #d92d20;
  color: #fff;
}
#bmOV #bmAcSo {
  padding: 5px 10px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: 6px;
  color: var(--bm-tinta-2);
  font: 500 12px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV #bmAcSo:hover {
  border-color: var(--bm-verde);
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
}

/* As mensagens. */
#bmOV .bmMsgHd {
  padding: 6px 16px;
  background: var(--bm-verde);
  font: 600 12px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV .bmMsgHd.nv {
  background: #d92d20;
}
#bmOV .bmMsgHd.ok {
  background: var(--bm-ok);
}
#bmOV #bmVerificar,
#bmOV #bmDesfazer.undo {
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font: 600 11.5px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV #bmVerificar.ok {
  background: #fff;
  color: var(--bm-ok-escuro);
}
#bmOV #bmVerificar.ok:disabled {
  background: rgba(255, 255, 255, 0.55);
  color: var(--bm-ok-escuro);
}
#bmOV #bmDesfazer.undo {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
#bmOV #bmDesfazer.undo:disabled {
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
#bmOV .bmMsgFiltro {
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bm-linha);
  background: var(--bm-papel);
}
#bmOV .bmMsgFiltro input {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  font-size: 13px;
  outline: none;
}
#bmOV .bmMsgFiltro input:focus {
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}
#bmOV .bmChipF {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: 999px;
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font: 500 12px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV .bmChipF:hover {
  background: var(--bm-papel-2);
}
#bmOV .bmChipF.sel {
  border-color: var(--bm-verde);
  background: var(--bm-verde);
  color: #fff;
}
#bmOV .bmMsg {
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid #f0f2f5;
  font-size: 13px;
  line-height: 1.45;
}
#bmOV .bmMsg:hover {
  background: var(--bm-papel-2);
}
#bmOV .bmMsg .o {
  width: 78px;
  color: var(--bm-tinta-3);
  font-weight: 600;
}
#bmOV .bmMsg .d {
  width: 134px;
  color: var(--bm-tinta-4);
  font-variant-numeric: tabular-nums;
}
#bmOV .bmMsg .m {
  color: var(--bm-tinta);
}
#bmOV .bmMsg.pend.citame {
  background: var(--bm-vermelho-claro);
  box-shadow: inset 3px 0 0 #d92d20;
}
#bmOV .bmMsg.pend.citame .o {
  color: var(--bm-vermelho);
}
#bmOV .bmDiv {
  padding: 6px 18px;
  background: var(--bm-papel-2);
  border-color: var(--bm-linha);
  color: var(--bm-tinta-3);
  font: 600 11px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV #bmAcCompose {
  padding: 12px 18px;
  border-top: 1px solid var(--bm-linha);
  background: var(--bm-papel);
}
#bmOV #bmAcCompose textarea {
  padding: 10px 12px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  outline: none;
}
#bmOV #bmAcCompose textarea:focus {
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}

/* Itens e mínimo: mesmas bordas e cantos; os números não mudam de lugar. */
#bmOV .bmIt {
  border-color: var(--bm-linha);
  border-radius: 10px;
  box-shadow: var(--bm-sombra-1);
}
#bmOV .bmItC {
  background: var(--bm-papel-2);
  border-radius: 6px;
}
#bmOV .bmItC.min {
  background: var(--bm-papel);
  border: 1px dashed var(--bm-linha-forte);
}
#bmOV .bmRoboBt {
  border-radius: var(--bm-raio);
  background: var(--bm-verde);
  font: 600 13px Inter, "Segoe UI", system-ui, Arial;
}
#bmOV .bmRoboBt:hover {
  background: var(--bm-verde-escuro);
}
#bmOV .bmRoboBt.on {
  background: #d92d20;
}
#bmOV .bmRoboBt.on:hover {
  background: var(--bm-vermelho);
}
#bmOV #bmAcSo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin: 0 0 0 auto;
  padding: 0 10px;
  align-self: center;
  white-space: nowrap;
}

/* O VALOR TEM A LINHA INTEIRA. Ele dividia a linha com o rótulo "Valor" e com o
   "2 itens", e um número de seis dígitos saía cortado ("R$ 624.148,6" — faltava
   o fim, justamente os centavos e, com milhões, o número inteiro). Agora o
   rótulo e o "N itens" ficam em cima, e o valor embaixo, de ponta a ponta. */
.edital-dados .valor-negocio {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  position: relative;
}
.edital-dados .valor-negocio .valor-caixa {
  position: static;
  gap: 6px;
}
.edital-dados .valor-negocio .valor-itens {
  position: absolute;
  top: 9px;
  right: 10px;
  padding: 0;
}
.panel-form.edital-dados .valor-caixa input {
  width: 100% !important;
  padding-left: 4px !important;
  text-overflow: ellipsis;
}
/* Os outros campos do Negócio: quando o texto não cabe, reticências em vez de
   corte seco (o nome inteiro aparece ao clicar no campo). */
.panel-form.edital-dados .form-grid input {
  text-overflow: ellipsis;
}

/* O CARTÃO É UM LINK (ver renderProcessCard): o link cobre o cartão inteiro,
   para o botão direito oferecer "abrir em nova guia" em qualquer ponto dele. O
   que tem função própria — a lixeirinha, a organização, "abrir edital no
   portal", os botões de Ganho/Perdido — fica por cima do link; e o que tem
   explicação ao passar o mouse (as etiquetas e o valor) também. */
.process-card .process-card-abrir {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.process-card .process-card-abrir:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.process-card .process-card-del {
  z-index: 2;
}
.process-card a.process-card-orgnome,
.process-card .process-card-link,
.process-card .process-card-acoes,
.process-card .process-card-tags,
.process-card .process-card-valor {
  position: relative;
  z-index: 2;
}
.process-card .process-card-tags,
.process-card .process-card-valor {
  width: fit-content;
}

/* IMPORTAR EDITAL, DENTRO DA COLUNA CAPTADOS. Saiu do menu da esquerda, que
   ficou só com a navegação. O botão largo abre o seletor de arquivos; o
   quadradinho ao lado, o de uma pasta inteira. */
.lane-importar {
  display: flex;
  gap: 6px;
  padding: 0 2px 8px;
}
.lane-importar-bt,
.lane-importar-pasta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  border: 1px solid var(--bm-verde-borda);
  border-radius: var(--bm-raio);
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.lane-importar-bt {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 12px;
}
.lane-importar-pasta {
  flex: 0 0 34px;
  padding: 0;
}
.lane-importar .bm-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.lane-importar-bt:hover,
.lane-importar-pasta:hover {
  background: var(--bm-verde);
  border-color: var(--bm-verde);
  color: #fff;
}
.lane-importar-bt:focus-visible,
.lane-importar-pasta:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.lane-importar-bt[disabled],
.lane-importar-pasta[disabled] {
  opacity: 0.65;
  cursor: progress;
  background: var(--bm-verde-claro);
  border-color: var(--bm-verde-borda);
  color: var(--bm-verde-escuro);
}

/* ==========================================================================
   MENU DA ESQUERDA EM GRUPOS — "Home" e, embaixo, grupos com nome de ação
   (Encontrar, Cotar, Disputar, Monitorar, Cadastrar, Visão de dados) que
   abrem e mostram os seus itens. Um aberto por vez. A montagem está em
   public/app/09-iniciar.js (MENU / htmlGrupo).
   ========================================================================== */
#bmNav {
  gap: 2px;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.bmGrupo {
  display: flex;
  flex-direction: column;
  position: relative;
}
/* O nome do grupo: mesma medida dos itens, com a setinha na ponta. */
.bmGrupoCab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--bm-raio);
  background: transparent;
  color: var(--bm-tinta-2);
  font: 500 14px Inter, "Segoe UI", system-ui, Arial;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}
.bmGrupoCab .bmNavIco {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--bm-tinta-3);
}
.bmGrupoCab .bmNavTxt {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bmGrupoSeta {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--bm-tinta-4);
  transition: transform 0.16s ease;
}
.bmGrupoCab:hover {
  background: #f2f4f7;
  color: var(--bm-tinta);
}
.bmGrupoCab:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.bmGrupo.aberto > .bmGrupoCab {
  background: #f2f4f7;
  color: var(--bm-tinta);
  font-weight: 600;
}
.bmGrupo.aberto > .bmGrupoCab .bmGrupoSeta {
  transform: rotate(180deg);
}
/* O grupo que guarda a tela em que ela está: letra e símbolo verdes e a
   barrinha na ponta — dá para saber onde se está mesmo com o grupo fechado. */
.bmGrupo.temAtivo > .bmGrupoCab {
  color: var(--bm-verde-escuro);
  font-weight: 600;
  box-shadow: inset -3px 0 0 var(--bm-verde);
}
.bmGrupo.temAtivo > .bmGrupoCab .bmNavIco,
.bmGrupo.temAtivo > .bmGrupoCab .bmGrupoSeta {
  color: var(--bm-verde);
}
/* Com o grupo aberto o número já aparece no item, lá dentro. */
.bmGrupo.aberto > .bmGrupoCab .bmNavBadge {
  display: none;
}

/* A lista do grupo. Fechada, ela continua montada (altura zero), e não
   "display: none": o monitor-plus.js procura o item do Monitor entre o que
   está montado na página para pendurar o seu "Configurações" logo abaixo. */
.bmSub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.18s ease;
}
.bmGrupo.aberto > .bmSub {
  max-height: 360px;
  visibility: visible;
  padding: 4px 0 8px;
}
.bmSubTit {
  display: none;
}
/* Os itens de dentro: sem símbolo, com o texto alinhado ao nome do grupo. */
#bmNav .bmSubItem,
#bmNav .bmSub .bmMenuCfg {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin: 0 !important;
  padding: 0 10px 0 38px !important;
  border-radius: var(--bm-raio);
  background: transparent !important;
  color: var(--bm-tinta-2);
  font: 500 13.5px Inter, "Segoe UI", system-ui, Arial;
  cursor: pointer;
}
#bmNav .bmSubItem:hover,
#bmNav .bmSub .bmMenuCfg:hover {
  background: #f2f4f7 !important;
  color: var(--bm-tinta);
}
#bmNav .bmSubItem.on {
  background: var(--bm-verde-claro) !important;
  color: var(--bm-verde-escuro);
  font-weight: 600;
}
/* O "Configurações" que o Monitor pendura aqui vira um item como os outros
   (a engrenagem dele sobra: os itens de dentro não têm símbolo). */
#bmNav .bmSub .bmMenuCfg .bmNavSimb {
  display: none;
}

/* ---- Barra recolhida: só os símbolos; a lista do grupo abre ao lado ------- */
.layout.sidebar-collapsed .bmGrupoCab {
  justify-content: center;
  gap: 0;
  padding: 0;
}
.layout.sidebar-collapsed .bmGrupoSeta {
  display: none;
}
.layout.sidebar-collapsed .bmGrupo.aberto > .bmGrupoCab {
  background: transparent;
}
.layout.sidebar-collapsed .bmGrupoCab:hover,
.layout.sidebar-collapsed .bmGrupo:hover > .bmGrupoCab {
  background: #f2f4f7;
}
.layout.sidebar-collapsed .bmGrupo.temAtivo > .bmGrupoCab {
  background: var(--bm-verde-claro);
  box-shadow: none;
}
.layout.sidebar-collapsed .bmGrupo.aberto > .bmGrupoCab .bmNavBadge {
  display: block;
}
.layout.sidebar-collapsed .bmSub,
.layout.sidebar-collapsed .bmGrupo.aberto > .bmSub {
  position: absolute;
  left: calc(100% + 14px);
  top: -6px;
  z-index: 90;
  min-width: 228px;
  max-height: none;
  overflow: visible;
  padding: 8px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-2);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
/* Uma ponte invisível entre o símbolo e a caixinha: sem ela o mouse "cai" no
   vão de 14px a caminho da lista e ela some antes de ser alcançada. */
.layout.sidebar-collapsed .bmSub::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 16px;
}
.layout.sidebar-collapsed .bmGrupo:hover > .bmSub,
.layout.sidebar-collapsed .bmGrupo:focus-within > .bmSub {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.layout.sidebar-collapsed .bmSubTit {
  display: block;
  padding: 4px 10px 8px;
  color: var(--bm-tinta-4);
  font: 600 11px Inter, "Segoe UI", system-ui, Arial;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Dentro da caixinha os itens voltam a ter texto (o trilho esconde o texto e
   centraliza o símbolo de tudo que é item do menu). */
.layout.sidebar-collapsed #bmNav .bmSub .bmNavItem,
.layout.sidebar-collapsed #bmNav .bmSub .bmMenuCfg {
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px !important;
  font-size: 13.5px;
  white-space: nowrap;
}
.layout.sidebar-collapsed .bmSub .bmNavTxt {
  display: inline;
}
.layout.sidebar-collapsed .bmSub .bmNavItem::after,
.layout.sidebar-collapsed .bmSub .bmMenuCfg::after {
  content: none;
}
.layout.sidebar-collapsed .bmSub .bmNavBadge {
  position: static;
  margin-left: auto;
  min-width: 20px;
  height: auto;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 17px;
  box-shadow: none;
}

/* ==========================================================================
   CABEÇALHO NO JEITO DA EFFECTI — o botão do canto que abre e recolhe o menu,
   o nome da empresa no lugar da logo, o botão da conta com o nome de quem
   está usando, o menu da conta em lista simples e os avisos do sino em
   cartões.
   ========================================================================== */
/* O botão do canto (três riscos / seta). */
.topbar-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--bm-raio);
  background: transparent;
  color: var(--bm-tinta-2);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.topbar-menu svg {
  width: 22px;
  height: 22px;
}
.topbar-menu:hover {
  background: #f2f4f7;
  color: var(--bm-tinta);
}
.topbar-menu:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
/* O nome da empresa: uma tarja discreta, como a da Effecti. Encolhe com
   reticências antes de apertar a busca. */
.topbar .brand-nome {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 420px;
  padding: 7px 12px;
  border-radius: 6px;
  background: #f2f4f7;
  color: var(--bm-tinta);
  font: 700 14.5px Inter, "Segoe UI", system-ui, Arial;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .brand-nome:hover {
  background: #e9edf2;
}
.topbar .brand-nome:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
/* Sem a palavra "MENU" e o botão que moravam em cima dele, o menu sobe. */
.sidebar > #bmNav:first-child {
  margin-top: 0;
}

/* O botão da conta: bonequinho + nome de quem está usando + setinha. */
.topbar .account-trigger {
  gap: 8px;
  padding: 0 8px 0 10px;
  max-width: 220px;
}
.topbar .account-quem-ico {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--bm-tinta-3);
}
.topbar .account-quem-nome {
  min-width: 0;
  color: var(--bm-tinta-2);
  font: 500 14px Inter, "Segoe UI", system-ui, Arial;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* O menu da conta: lista simples, um símbolo do mesmo traço em cada item
   (os dois que o Monitor acrescenta chegam como desenho, não como figurinha). */
.topbar #accountDropdown {
  min-width: 232px;
}
.topbar .account-item {
  gap: 10px;
  padding: 10px 12px;
}
.topbar .account-item svg,
.topbar .account-item i {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--bm-tinta-3);
}
.topbar .account-item-danger,
.topbar .account-item-danger svg,
.topbar .account-item-danger i {
  color: var(--bm-vermelho);
}

/* ---- O sino: cada aviso num cartão ---------------------------------------- */
.topbar .bell-dropdown {
  min-width: 340px;
  max-width: 380px;
  padding: 8px;
}
.topbar .bell-head {
  padding: 4px 6px 8px;
  color: var(--bm-tinta-4);
  font: 600 11px Inter, "Segoe UI", system-ui, Arial;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar .bell-item {
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--bm-raio);
  background: #f2f4f7;
}
.topbar .bell-item.lida {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--bm-linha);
}
.topbar .bell-item-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topbar .bell-item strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--bm-tinta);
  font-size: 14px;
  font-weight: 600;
}
.topbar .bell-item.lida strong {
  color: var(--bm-tinta-3);
  font-weight: 500;
}
.bell-ponto {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--bm-verde);
}
.bell-visto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--bm-tinta-3);
  cursor: pointer;
}
.bell-visto .bm-ico {
  width: 17px;
  height: 17px;
}
.bell-visto:hover {
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
}
.bell-visto:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.topbar .bell-item p {
  margin: 4px 0 0;
  color: var(--bm-tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}
.bell-vencido {
  color: var(--bm-vermelho);
  font-weight: 600;
}
.bell-vence {
  color: var(--bm-ambar, #a46b13);
  font-weight: 600;
}
.topbar .bell-empty {
  padding: 14px 8px;
  color: var(--bm-tinta-3);
  font-size: 13.5px;
}
.topbar .bell-mark {
  margin-top: 2px;
  border-top: 0;
  color: var(--bm-tinta);
  font-weight: 600;
}
.topbar .bell-mark svg,
.topbar .bell-mark i {
  color: var(--bm-tinta-2);
}

/* Em tela estreita o nome de quem está logado dá lugar só ao bonequinho, e o
   nome da empresa encolhe mais cedo. */
@media (max-width: 900px) {
  .topbar .account-quem-nome {
    display: none;
  }
  .topbar .brand-nome {
    max-width: 180px;
  }
}

/* COM O MONITOR ABERTO, OS MENUS DO CABEÇALHO ABRIAM POR BAIXO DELE: a tela do
   Monitor é uma camada fixa que começa logo abaixo do cabeçalho e fica acima de
   tudo; a conta, o sino e os aplicativos abriam (a setinha virava) e ficavam
   escondidos atrás dela. Enquanto o Monitor está na tela, o cabeçalho sobe para
   a camada de cima. Só nesse caso: fora dele, as janelas do sistema (itens,
   duplicados...) precisam continuar cobrindo o cabeçalho. */
body:has(#bmOV[style*="display: block"]) .topbar {
  position: relative;
  z-index: 100002;
}

/* ---- Acertos do menu em grupos (achados na revisão) ---------------------- */
/* Com a barra recolhida e o grupo "Monitorar" aberto, a bolinha vermelha
   aparecia mesmo com ZERO pregões chamando: a regra que a mostra ganhava do
   atributo "hidden". Só mostra quando há número. */
.layout.sidebar-collapsed .bmGrupo.aberto > .bmGrupoCab .bmNavBadge[hidden] {
  display: none;
}
/* A tarja com o nome do "Home" não aparecia na barra recolhida: o item corta
   o que passa da borda, e a tarja fica justamente fora dela. */
.layout.sidebar-collapsed .bmNavItem {
  overflow: visible;
}
/* Janela estreita com a barra recolhida: a caixinha do grupo abria fora da
   tela e criava rolagem para o lado. Ali ela abre embaixo do símbolo. */
@media (max-width: 760px) {
  .layout.sidebar-collapsed .bmSub,
  .layout.sidebar-collapsed .bmGrupo.aberto > .bmSub {
    left: 0;
    top: 100%;
    min-width: 200px;
  }
  .layout.sidebar-collapsed .bmSub::before {
    left: 0;
    top: -8px;
    bottom: auto;
    width: 100%;
    height: 8px;
  }
}

/* O texto do aviso do sino é um link para onde ele se resolve. */
.topbar .bell-item-ir {
  display: block;
  margin: 4px 0 0;
  color: var(--bm-tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  text-decoration: none;
}
.topbar .bell-item-ir:hover {
  color: var(--bm-tinta);
  text-decoration: underline;
}
.topbar .bell-mark[hidden] {
  display: none;
}

/* ==========================================================================
   PAINEL DE ENTRADA — outubro/2026
   ==========================================================================
   "Cria um painel assim de entrada no meu sistema."

   A tela que abre em "/" (public/app/02b-painel.js): saudação, cinco cartões
   de número, as etapas do funil em sequência, alertas e prazos, próximas
   disputas e a evolução mês a mês.

   Tem de parecer do MESMO sistema que o funil: mesmas cores do tema, mesmo
   canto, mesma sombra, as etiquetas (.bm-tag), os chips (.lane-chip) e os
   botões (.card-acao) que o funil já usa. As quatro cores das etapas são as
   das bolinhas das colunas (.lane-ponto) — lá elas dependem de estar dentro
   de uma coluna; aqui ganham nome para valer também fora dela.
   ========================================================================== */
.painel {
  --etapa-captado: #2e90fa;
  --etapa-aguardando: #f79009;
  --etapa-em_cotacao: #7a5af8;
  --etapa-concluido: #12b76a;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1480px;
  /* Folga no pé: o botão "Monitor" flutua no canto de baixo da página e, sem
     ela, ficava por cima da última linha do último quadro (o valor ganho do
     mês mais antigo) mesmo com a página rolada até o fim. */
  padding-bottom: 64px;
}
.painel .bm-ico {
  flex: none;
}
.painel .captado .lane-ponto { background: var(--etapa-captado); }
.painel .aguardando .lane-ponto { background: var(--etapa-aguardando); }
.painel .em_cotacao .lane-ponto { background: var(--etapa-em_cotacao); }
.painel .concluido .lane-ponto { background: var(--etapa-concluido); }

/* ---- Saudação ------------------------------------------------------------ */
.painel-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.painel-ola h2 {
  margin: 0;
  color: var(--bm-tinta);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.painel-ola p {
  margin: 4px 0 0;
  color: var(--bm-tinta-3);
  font-size: 13.5px;
}
.painel-frase {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font-size: 13.5px;
  line-height: 1.35;
  box-shadow: var(--bm-sombra-1);
}
.painel-frase .bm-ico {
  width: 16px;
  height: 16px;
  color: var(--bm-tinta-3);
}
.painel-frase.urgente {
  border-color: var(--bm-ambar-borda);
  background: var(--bm-ambar-claro);
  color: var(--bm-ambar);
}
.painel-frase.urgente .bm-ico {
  color: var(--bm-ambar);
}

/* ---- Os cinco cartões de número ----------------------------------------- */
.painel-numeros {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.painel-numero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background-color: var(--bm-papel);
  color: var(--bm-tinta);
  text-decoration: none;
  box-shadow: var(--bm-sombra-1);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.painel-numero:hover {
  border-color: var(--bm-linha-forte);
  box-shadow: var(--bm-sombra-2);
}
.painel-numero:focus-visible {
  outline: none;
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}
.painel-numero-rot {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: var(--bm-tinta-3);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
.painel-numero-rot .bm-ico {
  width: 15px;
  height: 15px;
  color: var(--bm-tinta-4);
}
.painel-numero-valor {
  color: var(--bm-tinta);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.painel-numero-apoio {
  color: var(--bm-tinta-3);
  font-size: 12.5px;
  line-height: 1.35;
}
/* A cor só entra quando há o que fazer — é a mesma faixa fina da esquerda do
   cartão do pregão, e o número e o ícone acompanham. Cartão em zero fica neutro. */
.painel-numero.ambar,
.painel-numero.vermelho,
.painel-numero.azul,
.painel-numero.verde {
  background-image: linear-gradient(to right, var(--tom) 0, var(--tom) 3px, transparent 3px);
}
.painel-numero.ambar { --tom: var(--etapa-aguardando); --tom-letra: var(--bm-ambar); }
.painel-numero.vermelho { --tom: var(--bm-vermelho); --tom-letra: var(--bm-vermelho); }
.painel-numero.azul { --tom: var(--etapa-captado); --tom-letra: var(--bm-azul); }
.painel-numero.verde { --tom: var(--etapa-concluido); --tom-letra: var(--bm-ok); }
.painel-numero.ambar .painel-numero-valor,
.painel-numero.vermelho .painel-numero-valor,
.painel-numero.azul .painel-numero-valor,
.painel-numero.verde .painel-numero-valor,
.painel-numero.ambar .painel-numero-rot .bm-ico,
.painel-numero.vermelho .painel-numero-rot .bm-ico,
.painel-numero.azul .painel-numero-rot .bm-ico,
.painel-numero.verde .painel-numero-rot .bm-ico {
  color: var(--tom-letra);
}

/* ---- Quadros -------------------------------------------------------------- */
.painel-quadro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-1);
}
.painel-quadro-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.painel-quadro-topo h3 {
  margin: 0;
  color: var(--bm-tinta);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.painel-quadro-topo p {
  margin: 2px 0 0;
  color: var(--bm-tinta-3);
  font-size: 12.5px;
  line-height: 1.4;
}
.painel-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  border-radius: 6px;
  color: var(--bm-verde);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.painel-link:hover {
  color: var(--bm-verde-escuro);
  text-decoration: underline;
}
.painel-link:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.painel-link .bm-ico {
  width: 14px;
  height: 14px;
}
.painel-duas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: start;
}
.painel-vazio,
.painel-calmo {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  color: var(--bm-tinta-3);
  font-size: 13.5px;
  line-height: 1.5;
}
.painel-vazio b {
  color: var(--bm-tinta-2);
  font-weight: 600;
}
.painel-calmo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.painel-calmo .bm-ico {
  width: 18px;
  height: 18px;
  color: var(--bm-verde);
}
.painel-nota {
  margin: 0;
  color: var(--bm-tinta-4);
  font-size: 12px;
}

/* ---- As etapas do funil, em sequência ----------------------------------- */
.painel-etapas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}
.painel-etapa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
}
.painel-etapa-topo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
.painel-etapa-topo:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.painel-etapa-nome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  color: var(--bm-tinta-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.painel-etapa-qtd {
  color: var(--bm-tinta);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.painel-etapa-topo:hover .painel-etapa-qtd {
  color: var(--bm-verde);
}
.painel-etapa-valor {
  min-height: 17px;
  color: var(--bm-tinta-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.painel-etapa-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.painel .lane-chip {
  cursor: pointer;
  font-family: inherit;
}
/* Atalho em zero: continua no lugar (as quatro etapas ficam alinhadas), mas
   apagado e sem clique — abriria uma coluna vazia. */
.painel .lane-chip.vazio {
  border-color: var(--bm-linha);
  background: transparent;
  color: var(--bm-tinta-4);
  cursor: default;
}
.painel-seta {
  display: flex;
  align-items: center;
  color: var(--bm-tinta-4);
}
.painel-seta .bm-ico {
  width: 18px;
  height: 18px;
}
.painel-desfecho {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--bm-linha);
  color: var(--bm-tinta-2);
  font-size: 13px;
}
.painel-desfecho-rot {
  margin-right: 4px;
  color: var(--bm-tinta-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.painel-desfecho-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: 999px;
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  text-decoration: none;
  box-shadow: var(--bm-sombra-1);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.painel-desfecho-item:hover {
  background: var(--bm-papel-2);
}
.painel-desfecho-item:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.painel-desfecho-item .bm-ico {
  width: 14px;
  height: 14px;
}
.painel-desfecho-item b,
.painel-desfecho-taxa b {
  color: var(--bm-tinta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.painel-desfecho-item.ganho b,
.painel-desfecho-item.ganho .bm-ico {
  color: var(--bm-ok);
}
.painel-desfecho-item.perdido b {
  color: var(--bm-vermelho);
}
.painel-desfecho-item em {
  margin-left: 2px;
  color: var(--bm-tinta-3);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.painel-desfecho-taxa {
  margin-left: auto;
  color: var(--bm-tinta-3);
}

/* ---- Alertas e prazos ---------------------------------------------------- */
.painel-alertas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.painel-alerta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 2px 12px;
  padding: 12px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
}
.painel-alerta.vermelho {
  border-color: var(--bm-vermelho-borda);
  background: var(--bm-vermelho-claro);
}
.painel-alerta.ambar {
  border-color: var(--bm-ambar-borda);
  background: var(--bm-ambar-claro);
}
.painel-alerta-ico {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bm-papel);
  color: var(--bm-tinta-3);
}
.painel-alerta-ico .bm-ico {
  width: 15px;
  height: 15px;
}
.painel-alerta.vermelho .painel-alerta-ico { color: var(--bm-vermelho); }
.painel-alerta.ambar .painel-alerta-ico { color: var(--bm-ambar); }
/* O texto não é uma caixa: o título, a explicação e a lista entram direto na
   grade do alerta — assim a lista de pregões usa a largura toda, por baixo do
   botão, em vez de ficar espremida ao lado dele. */
.painel-alerta-texto {
  display: contents;
}
.painel-alerta-texto > strong {
  grid-column: 2;
  grid-row: 1;
  display: block;
  color: var(--bm-tinta);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
}
.painel-alerta-texto > p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: var(--bm-tinta-2);
  font-size: 12.5px;
  line-height: 1.45;
}
.painel-alerta-linhas {
  grid-column: 2 / -1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.painel-alerta > .card-acao {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.painel-alerta-linhas > small {
  padding: 2px 8px;
  color: var(--bm-tinta-3);
  font-size: 12px;
}
.painel .card-acao {
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Linhas que abrem um pregão ----------------------------------------- */
.painel-linhas {
  display: flex;
  flex-direction: column;
}
.painel-linha {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 9px 8px;
  border-top: 1px solid var(--bm-linha);
  cursor: pointer;
}
.painel-linhas .painel-linha:first-child {
  border-top: 0;
}
.painel-linha:hover {
  background: var(--bm-papel-2);
}
/* O link que cobre a linha inteira — o mesmo do cartão do funil. */
.painel-linha .process-card-abrir {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
}
.painel-linha .process-card-abrir:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.painel-quando {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.painel-quando b {
  color: var(--bm-tinta-2);
  font-size: 13px;
  font-weight: 700;
}
.painel-quando.perto b {
  color: var(--bm-ambar);
}
.painel-quando small {
  color: var(--bm-tinta-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.painel-linha-nome {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.painel-linha-nome strong,
.painel-linha-nome small,
.painel-linha.curta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.painel-linha-nome strong {
  color: var(--bm-tinta);
  font-size: 13.5px;
  font-weight: 600;
}
.painel-linha-nome small {
  color: var(--bm-tinta-3);
  font-size: 12px;
}
.painel-linha-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.painel-linha-etapa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bm-tinta-2);
  font-size: 12.5px;
  white-space: nowrap;
}
.painel-linha.curta {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 5px 8px;
  border-top: 0;
  border-radius: 6px;
  color: var(--bm-tinta-2);
  font-size: 12.5px;
}
.painel-linha.curta small {
  color: var(--bm-tinta-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.painel-linha.curta b {
  color: var(--bm-tinta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.painel-alerta .painel-linha.curta:hover {
  background: var(--bm-papel);
}

/* ---- Evolução mês a mês -------------------------------------------------- */
.painel-evolucao {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
.painel-grafico {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.painel-grafico-grade {
  stroke: var(--bm-linha);
  stroke-width: 1;
}
.painel-grafico-grade.eixo {
  stroke: var(--bm-linha-forte);
}
.painel-grafico-escala,
.painel-grafico-rotulo {
  fill: var(--bm-tinta-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.painel-grafico-valor {
  fill: var(--bm-tinta-2);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.painel-grafico-barra.ganho { fill: var(--bm-ok); }
.painel-grafico-barra.perdido { fill: var(--bm-vermelho); }
.painel-grafico-alvo {
  fill: transparent;
}
.painel-grafico-mes.clicavel {
  cursor: pointer;
}
.painel-grafico-mes.clicavel:hover .painel-grafico-alvo {
  fill: var(--bm-papel-2);
}
.painel-grafico-mes:hover .painel-grafico-rotulo {
  fill: var(--bm-tinta);
}
.painel-legenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--bm-tinta-2);
  font-size: 12.5px;
  white-space: nowrap;
}
.painel-legenda i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.painel-legenda i.ganho { background: var(--bm-ok); }
.painel-legenda i.perdido { margin-left: 10px; background: var(--bm-vermelho); }
.painel-meses {
  display: flex;
  flex-direction: column;
}
.painel-mes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 92px 96px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--bm-linha);
  border-radius: 6px;
  color: var(--bm-tinta-2);
  font-size: 13px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.painel-mes:first-child {
  border-top: 0;
}
.painel-mes:hover {
  background: var(--bm-papel-2);
}
.painel-mes:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.painel-mes-nome {
  overflow: hidden;
  color: var(--bm-tinta);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.painel-mes-nome::first-letter {
  text-transform: uppercase;
}
.painel-mes-conta,
.painel-mes-valor {
  text-align: right;
  white-space: nowrap;
}
.painel-mes-conta b {
  color: var(--bm-tinta);
  font-weight: 700;
}
.painel-mes-conta.ganho b { color: var(--bm-ok); }
.painel-mes-conta.perdido b { color: var(--bm-vermelho); }
.painel-mes-valor {
  color: var(--bm-tinta-3);
}

/* ---- Tela média: os quadros se reorganizam ------------------------------- */
/* Com o menu aberto sobra pouco mais de 800px para o painel: cinco cartões
   lado a lado ficariam espremidos, e as quatro etapas também. */
@media (max-width: 1180px) {
  .painel-numeros {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Duas etapas por linha; a seta do meio sairia apontando para fora da tela. */
  .painel-etapas {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    row-gap: 10px;
  }
  .painel-etapas .painel-seta:nth-of-type(2) {
    display: none;
  }
  .painel-duas,
  .painel-evolucao {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Tela estreita: uma coluna só ---------------------------------------- */
@media (max-width: 760px) {
  .painel-ola h2 {
    font-size: 21px;
  }
  .painel-frase {
    width: 100%;
  }
  .painel-numeros {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  /* O cartão deita: o nome e a linha de apoio à esquerda, o número à direita. */
  .painel-numero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "rot valor" "apoio valor";
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
  }
  .painel-numero-rot { grid-area: rot; min-height: 0; }
  .painel-numero-apoio { grid-area: apoio; }
  .painel-numero-valor { grid-area: valor; font-size: 26px; }
  .painel-quadro {
    padding: 14px;
  }
  .painel-etapas {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
  /* Empilhadas, as setas apontam para baixo — todas as três. */
  .painel-etapas .painel-seta,
  .painel-etapas .painel-seta:nth-of-type(2) {
    display: flex;
    justify-content: center;
    transform: rotate(90deg);
  }
  .painel-desfecho-taxa {
    width: 100%;
    margin-left: 0;
  }
  .painel-alerta {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .painel-alerta-linhas {
    grid-column: 2;
  }
  .painel-alerta > .card-acao {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
    margin-top: 8px;
  }
  .painel-linha {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .painel-linha > .painel-linha-lado {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-self: start;
    gap: 10px;
  }
  .painel-linha.curta {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .painel-mes {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .painel-mes-valor {
    grid-column: 1 / -1;
    text-align: left;
  }
  .painel-mes-valor:empty {
    display: none;
  }
}

/* >>> cinco-certidao */

/* ==========================================================================
   HABILITAÇÃO — certidão vencida não pode parecer válida (13/10/2026)
   ==========================================================================
   As marcas dos documentos casados na aba Habilitação, o resumo do alto da aba
   e as duas janelas do dossiê (public/app/06-habilitacao.js). O verde é só de
   quem vale no dia da sessão; os outros levam etiqueta com o motivo ESCRITO —
   a cor reforça, nunca é a única pista. */
.hab-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-bottom: 7px;
  color: var(--bm-tinta);
}
.hab-doc .hab-doc-nome {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.hab-doc.verde .hab-doc-nome {
  color: var(--bm-ok);
}
/* O "ver" é um botão como os outros, que nascem com 40px de altura: aqui ele
   fica na linha do nome e da etiqueta, então acompanha a altura delas. */
.hab-doc .ghost-button {
  min-height: 22px;
}
.hab-doc .bm-ico,
.hab-resumo .bm-ico {
  flex: none;
  width: 13px;
  height: 13px;
}
/* Nesta aba a etiqueta leva uma frase ("emitido há 75 dias na data da sessão —
   o edital aceita até 60"): quebra a linha em vez de vazar da coluna. */
.hab-doc .bm-tag,
.hab-pergunta .bm-tag {
  height: auto;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.35;
  white-space: normal;
}
/* A família de etiquetas tinha verde, azul, vermelho e neutro; faltava a cor
   do "confira você", que não é erro nem está certo. */
.bm-tag.ambar {
  background: var(--bm-ambar-claro);
  border-color: var(--bm-ambar-borda);
  color: var(--bm-ambar);
}
.hab-doc .bm-tag.vermelho {
  font-weight: 700;
}
.hab-doc .hab-doc-fazer {
  flex-basis: 100%;
  color: var(--bm-tinta-3);
  font-size: 11.5px;
}

/* O resumo do alto: "2 documentos não valem na data da sessão (20/10)". */
.hab-resumo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
  color: var(--bm-tinta-2);
  font-size: 13px;
  line-height: 1.45;
}
.hab-resumo .bm-ico {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.hab-resumo.vermelho {
  border-color: var(--bm-vermelho-borda);
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
}
.hab-resumo.ambar {
  border-color: var(--bm-ambar-borda);
  background: var(--bm-ambar-claro);
  color: var(--bm-ambar);
}
.hab-resumo a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* As janelas do dossiê: a pergunta antes de baixar e o aviso do que ficou de
   fora. Usam a moldura das outras janelas (.itens-janela), só mais estreita. */
.itens-janela.hab-pergunta {
  max-width: 660px;
}
.hab-pergunta .itens-cabeca h2 {
  color: var(--bm-tinta);
  line-height: 1.3;
}
.hab-pergunta-lista {
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
  list-style: none;
}
.hab-pergunta-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 9px 12px;
  color: var(--bm-tinta);
  font-size: 13px;
}
.hab-pergunta-lista li + li {
  border-top: 1px solid var(--bm-linha);
}
.hab-pergunta-sub {
  margin: 0 0 8px;
  color: var(--bm-tinta-2);
  font-size: 13px;
  font-weight: 600;
}
.hab-pergunta-nota {
  margin: 0 0 8px;
  color: var(--bm-tinta-3);
  font-size: 12.5px;
  line-height: 1.5;
}
.hab-pergunta-nota a {
  color: var(--bm-verde);
  font-weight: 600;
}
.hab-pergunta-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* >>> cinco-copia */

/* ==========================================================================
   CÓPIA DO BANCO — tela "Saúde do sistema" (/saude), outubro/2026
   ==========================================================================
   O botão "Baixar cópia do banco" que mora no item "Cópia fora do servidor",
   a frase de onde guardar o arquivo, e o diálogo pequeno que pede a senha de
   novo antes de entregar (o arquivo leva a senha do Portal e a chave da IA).

   Tudo aqui usa a paleta da repaginação, lá em cima. Os seletores levam o
   ".sd-item" na frente de propósito: a própria saude.html tem uma regra para
   todo parágrafo de item, e ela vem depois desta folha.
   ========================================================================== */
.sd-copia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}
.sd-copia-bt {
  min-height: 36px;
  font-size: 13.5px;
}
.sd-copia-bt svg {
  flex: none;
}
.sd-item p.sd-copia-nota {
  margin: 0;
  color: var(--bm-tinta-3);
  font-size: 12.5px;
}
.sd-item p.sd-copia-aviso {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--bm-verde-borda);
  border-radius: var(--bm-raio);
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
  font-size: 13px;
}
.sd-item p.sd-copia-aviso.ruim {
  border-color: var(--bm-vermelho-borda);
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
}

.sd-copia-dialogo {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel);
  color: var(--bm-tinta);
  box-shadow: var(--bm-sombra-2);
}
/* Navegador antigo, que não conhece <dialog>, mostraria a caixa fechada no pé
   da página. */
.sd-copia-dialogo:not([open]) {
  display: none;
}
.sd-copia-dialogo::backdrop {
  background: rgba(16, 24, 40, 0.45);
}
.sd-copia-dialogo form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}
.sd-copia-dialogo h2 {
  margin: 0;
  font-size: 17px;
}
.sd-copia-dialogo p {
  margin: 0;
  color: var(--bm-tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}
.sd-copia-dialogo p.sd-copia-erro {
  padding: 8px 10px;
  border: 1px solid var(--bm-vermelho-borda);
  border-radius: var(--bm-raio);
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
}
/* `hidden` sozinho perderia para o `display` de qualquer regra de cima. */
.sd-copia-dialogo p.sd-copia-erro[hidden] {
  display: none;
}
.sd-copia-botoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* >>> pedido organizacao */
/* ===== FICHA DA PREFEITURA PREENCHIDA PELA IA (pedido "organizacao") =========
   Dentro do pregão, blocos Organização e Pessoa (public/app/02-lista.js):
   - o botão "Preencher com IA" no cabeçalho do bloco Organização;
   - o sinal pequeno junto do nome do campo que ninguém digitou (IA, PNCP ou
     Portal) — junto do nome, e não depois do campo, para não comer a largura
     do e-mail e do endereço;
   - a linha "o edital do pregão X traz…", embaixo do campo;
   - a frase que explica o sinal e o recado do que o botão fez.
   Azul, e não verde: verde aqui é "gravou" e "ganhou". O sinal pede conferência,
   não comemora. */
.lado-cabeca .lado-ia-bt {
  margin-left: auto;
  flex: none;
  height: 26px;
  padding: 0 9px;
  font-family: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.lado-ia-bt .bm-ico {
  width: 12px;
  height: 12px;
  color: var(--bm-azul);
}
.lado-ia-bt:hover {
  background: var(--bm-azul-claro);
  border-color: var(--bm-azul-borda);
  color: var(--bm-azul);
}
.lado-ia-bt:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.lado-ia-bt[disabled] {
  opacity: 0.65;
  cursor: progress;
}
.lado-linha.da-ia > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ficha-ia {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 16px;
  padding: 0 5px;
  border: 1px solid var(--bm-azul-borda);
  border-radius: 999px;
  background: var(--bm-azul-claro);
  color: var(--bm-azul);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
}
.ficha-ia[data-fonte="pncp"],
.ficha-ia[data-fonte="portal"] {
  border-color: var(--bm-linha);
  background: var(--bm-papel-2);
  color: var(--bm-tinta-3);
}
.ficha-outros {
  display: block;
  margin: -1px 0 4px;
  padding-left: 112px;
  color: var(--bm-tinta-4);
  font-size: 11.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ficha-outros b {
  /* O valor desce inteiro para a linha de baixo quando não cabe ao lado da
     frase: telefone partido em "(51)" e "3655-1288" não se lê. */
  display: inline-block;
  max-width: 100%;
  color: var(--bm-tinta-3);
  font-weight: 600;
}
/* Endereço e e-mail: o nome em cima e o campo na largura toda do bloco. Na
   coluna da direita cabiam uns 28 caracteres e o endereço saía cortado no meio.
   (O campo recua 9px — borda e respiro dele — para o texto alinhar com o nome.) */
.lado-linha.larga {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-top: 5px;
}
.lado-linha.larga input {
  width: calc(100% + 9px);
  margin-left: -9px;
}
.lado-linha.larga + .ficha-outros {
  padding-left: 0;
}
.lado-dica.ficha-ia-dica {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.ficha-ia-dica .bm-ico {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 2px;
  color: var(--bm-azul);
}
.ficha-ia-recado {
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--bm-azul-borda);
  border-radius: var(--bm-raio);
  background: var(--bm-azul-claro);
  color: var(--bm-tinta-2);
  font-size: 12px;
  line-height: 1.45;
}
.ficha-ia-recado.aviso {
  border-color: var(--bm-ambar-borda);
  background: var(--bm-ambar-claro);
  color: var(--bm-ambar);
}

/* >>> pedido banco */
/* ==========================================================================
   BANCO DE LICITAÇÕES (public/pcp.html) — NADA PARA COLAR NO TEMA
   ==========================================================================
   Esta tela é uma página à parte e NÃO carrega o styles.css (abre sozinha e
   dentro de um quadro, em /?busca=1). Por isso o estilo dela vai DENTRO da
   própria página (o <style> de public/pcp.html), como já faz o cabecalho.js —
   e esse arquivo entra no remendo (banco.patch). Não há bloco novo para o fim
   do styles.css: colar o estilo lá seria peso morto, a página não o leria.

   O que a página traz, para quem for conferir:
     - as variáveis --bm-* com os MESMOS nomes e valores do bloco "REPAGINAÇÃO"
       do tema (scripts/testar-banco-licitacoes.js compara uma a uma com o
       styles.css: se o tema mudar um valor e a página não, o teste acusa);
     - as peças do funil com o mesmo nome e as mesmas medidas (.bm-tag,
       .card-acao, .lane-chip, .bm-ico), mais .bm-tag.ambar, que o tema ainda
       não tem;
     - o que é só desta tela, com o prefixo "bl-".

   Se um dia o tema ganhar a etiqueta âmbar, é esta a regra usada na página:

     .bm-tag.ambar { background: var(--bm-ambar-claro); border-color: var(--bm-ambar-borda); color: var(--bm-ambar); }
   ========================================================================== */

/* Voltar ao funil, ao lado do nome do pregão. */
.voltar-funil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 34px;
  margin-right: 10px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font: 500 13.5px Inter, "Segoe UI", system-ui, Arial;
  cursor: pointer;
  vertical-align: middle;
}
.voltar-funil svg {
  width: 17px;
  height: 17px;
}
.voltar-funil:hover {
  background: var(--bm-papel-2);
  border-color: var(--bm-linha-forte);
  color: var(--bm-tinta);
}
.voltar-funil:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}

/* >>> pedido anotacoes */
/* ==========================================================================
   ABA ANOTAÇÕES — o "Histórico" do pregão (13/10/2026)
   ==========================================================================
   "Quero que o campo de anotações funcione igual o Pipedrive" — e "a atividade
   escrita fique de outra cor; no Pipedrive é amarela, mas no meu sistema faça
   uma cor que combine com o layout dele".

   Em cima, a caixa de escrever com abas (Anotação | Atividade | Recado). Em
   baixo, UMA linha do tempo, com o que está por fazer e o fixado no alto.

   A COR DO QUE ELA ESCREVE é o verde claro da casa (--bm-verde-claro, com a
   borda --bm-verde-borda): faz aqui o papel que o amarelo faz no Pipedrive. A
   anotação inteira é desse papel; na atividade, é a descrição que vem nele. O
   recado ao fornecedor é azul, para não se confundir com o que só a casa vê.

   Os filtros (pastilhas) NÃO redesenham a tela: o clique troca o data-filtro
   da <section class="anotacoes"> e as regras do fim deste bloco escondem o
   resto. As abas da caixa de cima funcionam do mesmo jeito (data-aba).

   Este bloco vem depois do tema (REPAGINAÇÃO) de propósito: ganha das regras
   antigas das anotações, lá de cima, sem precisar reescrevê-las.
   ========================================================================== */

.anotacoes .bm-ico,
.ativ-janela .bm-ico,
.bell-ativ .bm-ico,
.agenda-ativ .bm-ico {
  width: 15px;
  height: 15px;
  flex: none;
}
/* O alfinete na aba "Anotações": este pregão tem anotação fixada (era um ★). */
.tab-button .aba-fixada {
  display: inline-flex;
  margin-left: -2px;
}
.tab-button .aba-fixada .bm-ico {
  width: 13px;
  height: 13px;
  color: currentColor;
}

/* ---- A caixa de cima (compositor) ---------------------------------------- */
.anotacoes .hist-compor {
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-1);
  overflow: hidden;
}
.anotacoes .nota-tipo {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 6px 8px 0;
  border-bottom: 1px solid var(--bm-linha);
  background: var(--bm-papel-2);
}
.anotacoes .nota-tipo-bt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  margin-bottom: -1px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--bm-raio) var(--bm-raio) 0 0;
  background: none;
  color: var(--bm-tinta-3);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.anotacoes .nota-tipo-bt:hover {
  background: var(--bm-papel);
  color: var(--bm-tinta);
}
.anotacoes .nota-tipo-bt.ativo {
  border-color: transparent;
  border-bottom-color: var(--bm-verde);
  background: var(--bm-papel);
  color: var(--bm-verde-escuro);
}
.anotacoes .nota-tipo-bt:focus-visible,
.anotacoes .nota-bt:focus-visible,
.ativ-janela .nota-bt:focus-visible,
.anotacoes .ativ-feito:focus-visible,
.anotacoes .nota-clipe:focus-visible,
.anotacoes .nota-bt-cancelar:focus-visible,
.anotacoes .nota-bt-salvar:focus-visible,
.ativ-tipo:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
.anotacoes .compor-nota,
.anotacoes .compor-ativ {
  padding: 12px 14px 14px;
}
/* Uma aba de cada vez: as três estão desenhadas, o data-aba escolhe. */
.anotacoes .hist-compor[data-aba="atividade"] .compor-nota,
.anotacoes .hist-compor:not([data-aba="atividade"]) .compor-ativ,
.anotacoes .hist-compor:not([data-aba="recado"]) .nota-extra,
.anotacoes .hist-compor:not([data-aba="recado"]) .dica-recado,
.anotacoes .hist-compor[data-aba="recado"] .dica-nota,
.anotacoes .hist-compor[data-aba="recado"] .nota-clipe,
.anotacoes .hist-compor[data-aba="recado"] .nota-pendentes,
.anotacoes .nota-arquivos {
  display: none;
}
.anotacoes .nota-extra {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  color: var(--bm-tinta-3);
  font-size: 12px;
  font-weight: 600;
}
.anotacoes .nota-extra select {
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta);
  font: inherit;
  font-size: 13.5px;
}
/* O papel em que ela escreve: verde claro para a anotação, azul para o recado. */
.anotacoes #notaTexto {
  display: block;
  width: 100%;
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid var(--bm-verde-borda);
  border-radius: var(--bm-raio);
  background: var(--bm-verde-claro);
  color: var(--bm-tinta);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.anotacoes .hist-compor[data-aba="recado"] #notaTexto {
  border-color: var(--bm-azul-borda);
  background: var(--bm-azul-claro);
}
.anotacoes #notaTexto::placeholder {
  color: var(--bm-tinta-3);
}
.anotacoes #notaTexto:focus {
  outline: none;
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}
.anotacoes .nota-nova-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}
.anotacoes .nota-nova-rodape small {
  flex: 1 1 200px;
  margin-right: auto;
  color: var(--bm-tinta-3);
  font-size: 12px;
}
.anotacoes .nota-clipe,
.anotacoes .nota-bt-cancelar,
.anotacoes .nota-bt-salvar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--bm-sombra-1);
  cursor: pointer;
}
.anotacoes .nota-clipe:hover,
.anotacoes .nota-bt-cancelar:hover {
  border-color: var(--bm-linha-forte);
  background: var(--bm-papel-2);
  color: var(--bm-tinta);
}
.anotacoes .nota-bt-salvar {
  border-color: var(--bm-verde);
  background: var(--bm-verde);
  color: #fff;
}
.anotacoes .nota-bt-salvar:hover {
  border-color: var(--bm-verde-escuro);
  background: var(--bm-verde-escuro);
}
.anotacoes .nota-bt-salvar[disabled],
.anotacoes .ativ-feito[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.anotacoes .nota-pendentes {
  margin: 8px 0 0;
}
.anotacoes .nota-pendente,
.anotacoes .nota-anexo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--bm-linha);
  border-radius: 999px;
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font-size: 12px;
}
.anotacoes .nota-anexo a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--bm-verde-escuro);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.anotacoes .nota-anexo a:hover {
  text-decoration: underline;
}
.anotacoes .nota-pendente .bm-ico,
.anotacoes .nota-anexo .bm-ico {
  width: 13px;
  height: 13px;
}
.anotacoes .nota-pendente .nota-bt,
.anotacoes .nota-anexo .nota-bt {
  width: 20px;
  height: 20px;
}
.anotacoes .nota-pendente .nota-bt .bm-ico,
.anotacoes .nota-anexo .nota-bt .bm-ico {
  width: 11px;
  height: 11px;
}

/* ---- Os campos da atividade (na caixa de cima e na janela de editar) ----- */
.ativ-janela {
  max-width: 640px;
}
.ativ-janela-bts {
  display: flex;
  gap: 8px;
}
.ativ-janela .itens-rodape .muted {
  font-size: 12px;
}
.anotacoes .ativ-titulo,
.ativ-janela .ativ-titulo {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}
.anotacoes .ativ-tipos,
.ativ-janela .ativ-tipos {
  gap: 6px;
  margin-bottom: 12px;
}
.anotacoes .ativ-tipo,
.ativ-janela .ativ-tipo {
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.anotacoes .ativ-tipo:hover,
.ativ-janela .ativ-tipo:hover {
  background: var(--bm-papel-2);
}
.anotacoes .ativ-tipo.ativo,
.ativ-janela .ativ-tipo.ativo {
  border-color: var(--bm-verde);
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
}
.anotacoes .ativ-linha-campos,
.ativ-janela .ativ-linha-campos {
  grid-template-columns: minmax(138px, 1.1fr) minmax(96px, 0.7fr) minmax(110px, 1fr) minmax(100px, 0.9fr);
  gap: 10px;
  margin-bottom: 8px;
}
.anotacoes .ativ-linha-campos label,
.anotacoes .ativ-desc-campo,
.ativ-janela .ativ-linha-campos label,
.ativ-janela .ativ-desc-campo {
  gap: 4px;
  color: var(--bm-tinta-3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}
.anotacoes .ativ-linha-campos input,
.anotacoes .ativ-linha-campos select,
.anotacoes .ativ-desc-campo textarea,
.ativ-janela .ativ-linha-campos input,
.ativ-janela .ativ-linha-campos select,
.ativ-janela .ativ-desc-campo textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta);
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
}
.anotacoes .ativ-desc-campo textarea,
.ativ-janela .ativ-desc-campo textarea {
  line-height: 1.45;
  resize: vertical;
}
.anotacoes .ativ-titulo:focus,
.anotacoes .ativ-linha-campos input:focus,
.anotacoes .ativ-linha-campos select:focus,
.anotacoes .ativ-desc-campo textarea:focus,
.ativ-janela .ativ-titulo:focus,
.ativ-janela .ativ-linha-campos input:focus,
.ativ-janela .ativ-linha-campos select:focus,
.ativ-janela .ativ-desc-campo textarea:focus {
  outline: none;
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}
/* O campo de data inteiro abre o calendário, não só o desenho do canto. */
input[data-calendario] {
  cursor: pointer;
}
.ativ-dias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}
.ativ-dias .lane-chip {
  height: 26px;
  font-family: inherit;
  cursor: pointer;
}
.ativ-ja-feita {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--bm-tinta-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ativ-ja-feita input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--bm-verde);
}
.ativ-ja-feita small {
  color: var(--bm-tinta-3);
  font-size: 12px;
  font-weight: 400;
}
@media (max-width: 720px) {
  .anotacoes .ativ-linha-campos,
  .ativ-janela .ativ-linha-campos {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Pastilhas de filtro -------------------------------------------------- */
.anotacoes .hist-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.anotacoes .hist-filtros .lane-chip {
  height: 30px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* ---- A linha do tempo ----------------------------------------------------- */
.anotacoes .hist-titulo {
  margin: 18px 0 8px 44px;
  color: var(--bm-tinta-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.anotacoes .hist-lista > .hist-titulo:first-child {
  margin-top: 2px;
}
.anotacoes .hist-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 10px;
}
/* O fio que liga um acontecimento ao seguinte. */
.anotacoes .hist-item::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 2px;
  left: 15px;
  width: 2px;
  border-radius: 2px;
  background: var(--bm-linha);
}
.anotacoes .hist-marca {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: 50%;
  background: var(--bm-papel);
  color: var(--bm-tinta-3);
}
.anotacoes .hist-marca.papel {
  border-color: var(--bm-verde-borda);
  background: var(--bm-verde-claro);
  color: var(--bm-verde);
}
.anotacoes .hist-marca.fixada {
  border-color: var(--bm-verde);
  background: var(--bm-verde);
  color: #fff;
}
.anotacoes .hist-marca.recado {
  border-color: var(--bm-azul-borda);
  background: var(--bm-azul-claro);
  color: var(--bm-azul);
}
.anotacoes .hist-marca.aberta {
  border-color: var(--bm-verde);
  color: var(--bm-verde);
}
.anotacoes .hist-marca.vencida {
  border-color: var(--bm-vermelho-borda);
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
}
.anotacoes .hist-marca.feita,
.anotacoes .hist-marca.arquivo {
  background: var(--bm-papel-2);
}
/* Alteração: só um pontinho no fio — é o sistema contando, não ela. */
.anotacoes .hist-marca.ponto {
  width: 10px;
  height: 10px;
  margin: 5px 11px 0;
  border: 0;
  background: var(--bm-linha-forte);
  box-shadow: 0 0 0 3px var(--bm-papel);
}
.anotacoes .hist-item[data-tipo="alteracao"]::before {
  top: 20px;
}
.anotacoes .hist-item[data-tipo="alteracao"] {
  padding-bottom: 8px;
}

/* Anotação: o cartão é o papel verde. */
.anotacoes .nota {
  margin: 0;
  padding: 8px 12px 12px;
  border: 1px solid var(--bm-verde-borda);
  border-radius: var(--bm-raio-g);
  background: var(--bm-verde-claro);
}
.anotacoes .nota.fixada {
  border-color: var(--bm-verde);
  background: var(--bm-verde-claro);
  box-shadow: var(--bm-sombra-1);
}
.anotacoes .nota.recado {
  border-color: var(--bm-azul-borda);
  background: var(--bm-azul-claro);
}
.anotacoes .nota header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  margin-bottom: 4px;
}
/* Sobre o verde claro, o texto miúdo usa a tinta mais escura: a cinza comum
   fica no limite de leitura ali. */
.anotacoes .nota-quando {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  color: var(--bm-tinta-2);
  font-size: 12px;
}
.anotacoes .hist-autor {
  color: var(--bm-tinta);
  font-weight: 650;
}
/* "Thais · hoje às 15:16": o pontinho só aparece quando há nome antes da hora. */
.anotacoes .nota-quando b + time::before,
.anotacoes .nota-quando span + time::before {
  content: "·";
  margin-right: 6px;
}
.anotacoes .nota-editada {
  color: var(--bm-tinta-2);
  font-style: italic;
}
.anotacoes .nota p {
  margin: 0;
  color: var(--bm-tinta);
  font-size: 14px;
  line-height: 1.5;
}
.anotacoes .nota-acoes {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
}
.anotacoes .nota-bt,
.ativ-janela .nota-bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--bm-tinta-3);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.anotacoes .nota-bt:hover,
.ativ-janela .nota-bt:hover {
  background: rgba(16, 24, 40, 0.07);
  color: var(--bm-tinta);
}
.anotacoes .nota-bt.ligado {
  color: var(--bm-verde);
}
.anotacoes .nota-bt.apagar:hover {
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
}
.anotacoes .nota-anexos {
  margin-top: 10px;
}
.anotacoes .nota-edicao-texto {
  border: 1px solid var(--bm-verde-borda);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta);
}
.anotacoes .nota-edicao-texto:focus {
  outline: none;
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}

/* Atividade: cartão branco com a faixa de cor dos cartões do funil — verde
   por fazer, vermelha vencida, cinza feita. A descrição vem no papel verde. */
.anotacoes .ativ-linha {
  --faixa: var(--bm-verde);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px 10px 15px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel) linear-gradient(to right, var(--faixa) 0, var(--faixa) 3px, transparent 3px);
  box-shadow: var(--bm-sombra-1);
  overflow: hidden;
}
.anotacoes .ativ-linha.vencida {
  --faixa: var(--bm-vermelho);
  border-color: var(--bm-vermelho-borda);
}
.anotacoes .ativ-linha.feita {
  --faixa: var(--bm-linha-forte);
  background-color: var(--bm-papel-2);
  box-shadow: none;
  opacity: 1;
}
.anotacoes .ativ-feito {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  padding: 0;
  border: 2px solid var(--bm-linha-forte);
  border-radius: 50%;
  background: var(--bm-papel);
  color: transparent;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.anotacoes .ativ-feito .bm-ico {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}
.anotacoes .ativ-feito:hover {
  border-color: var(--bm-ok);
  color: var(--bm-ok);
}
.anotacoes .ativ-linha.feita .ativ-feito {
  border-color: var(--bm-ok);
  background: var(--bm-ok);
  color: #fff;
}
.anotacoes .ativ-corpo {
  display: grid;
  flex: 1;
  gap: 5px;
  min-width: 0;
}
.anotacoes .ativ-corpo b {
  color: var(--bm-tinta);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.anotacoes .ativ-linha.feita .ativ-corpo b {
  color: var(--bm-tinta-3);
  text-decoration: line-through;
}
.anotacoes .ativ-quando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--bm-tinta-3);
  font-size: 12px;
}
.anotacoes .ativ-quando > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.anotacoes .ativ-quando .bm-ico {
  width: 13px;
  height: 13px;
}
.anotacoes .ativ-desc {
  display: block;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid var(--bm-verde-borda);
  border-radius: var(--bm-raio);
  background: var(--bm-verde-claro);
  color: var(--bm-tinta) !important;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.anotacoes .ativ-linha.feita .ativ-desc {
  border-color: var(--bm-linha);
  background: var(--bm-papel);
  color: var(--bm-tinta-3) !important;
}
.anotacoes .ativ-rodape {
  color: var(--bm-tinta-3);
  font-size: 11.5px;
}
.anotacoes .ativ-atalho {
  gap: 5px;
  height: 28px;
  margin-right: 4px;
  padding: 0 10px;
  border: 1px solid var(--bm-verde-borda);
  border-radius: 6px;
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
}
.anotacoes .ativ-atalho:hover {
  border-color: var(--bm-verde);
  background: var(--bm-verde);
  color: #fff;
}

/* Arquivo: uma linha — o nome abre o arquivo. */
.anotacoes .hist-arquivo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-height: 32px;
  padding-top: 6px;
}
.anotacoes .hist-arquivo a,
.anotacoes .hist-arquivo > span {
  color: var(--bm-tinta);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.anotacoes .hist-arquivo a:hover {
  color: var(--bm-verde);
  text-decoration: underline;
}
.anotacoes .hist-arquivo small {
  color: var(--bm-tinta-3);
  font-size: 12px;
}

/* Alteração do pregão: texto corrido, sem cartão. */
.anotacoes .hist-alteracao {
  margin: 0;
  padding-top: 1px;
  color: var(--bm-tinta-3);
  font-size: 13px;
  line-height: 1.45;
}
.anotacoes .hist-alteracao b,
.anotacoes .hist-alteracao i {
  color: var(--bm-tinta-2);
  font-style: normal;
  font-weight: 600;
}
.anotacoes .hist-alteracao small {
  margin-left: 4px;
  color: var(--bm-tinta-3);
  font-size: 12px;
  white-space: nowrap;
}

.anotacoes .hist-vazio {
  display: none;
  margin: 4px 0 0;
  padding: 18px 16px;
  border: 1px dashed var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  color: var(--bm-tinta-3);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}

/* ---- Os filtros, sem redesenhar a tela ------------------------------------ */
.anotacoes[data-filtro="notas"] .hist-item:not([data-tipo="nota"]),
.anotacoes[data-filtro="atividades"] .hist-item:not([data-tipo="atividade"]),
.anotacoes[data-filtro="arquivos"] .hist-item:not([data-tipo="arquivo"]),
.anotacoes[data-filtro="alteracoes"] .hist-item:not([data-tipo="alteracao"]),
.anotacoes:not([data-filtro="arquivos"]) .hist-item[data-so-filtro],
.anotacoes[data-filtro="todos"] .hist-titulo:not([data-tem~="todos"]),
.anotacoes[data-filtro="notas"] .hist-titulo:not([data-tem~="notas"]),
.anotacoes[data-filtro="atividades"] .hist-titulo:not([data-tem~="atividades"]),
.anotacoes[data-filtro="arquivos"] .hist-titulo:not([data-tem~="arquivos"]),
.anotacoes[data-filtro="alteracoes"] .hist-titulo:not([data-tem~="alteracoes"]) {
  display: none;
}
.anotacoes[data-filtro="todos"] .hist-vazio[data-vazio="todos"],
.anotacoes[data-filtro="notas"] .hist-vazio[data-vazio="notas"],
.anotacoes[data-filtro="atividades"] .hist-vazio[data-vazio="atividades"],
.anotacoes[data-filtro="arquivos"] .hist-vazio[data-vazio="arquivos"],
.anotacoes[data-filtro="alteracoes"] .hist-vazio[data-vazio="alteracoes"] {
  display: block;
}

/* ---- No sino: atividades para hoje ou vencidas ---------------------------- */
.bell-grupo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 6px;
  border-top: 1px solid var(--bm-linha);
  color: var(--bm-tinta-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bell-grupo b {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
  font-size: 11.5px;
  letter-spacing: 0;
  text-align: center;
}
.bell-item.bell-ativ {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid var(--bm-linha);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bell-item.bell-ativ:hover {
  background: var(--bm-papel-2);
}
.bell-item.bell-ativ:focus-visible {
  outline: none;
  box-shadow: inset var(--bm-foco);
}
.bell-ativ-ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bm-verde-claro);
  color: var(--bm-verde);
}
.bell-ativ.vencida .bell-ativ-ico {
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
}
.bell-ativ-corpo {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.bell-item.bell-ativ strong {
  color: var(--bm-tinta);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.bell-item.bell-ativ small {
  color: var(--bm-tinta-2);
  font-size: 12px;
  font-weight: 500;
}
.bell-item.bell-ativ small.bell-ativ-onde {
  color: var(--bm-tinta-3);
  font-weight: 400;
}
.bell-mais {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--bm-linha);
  color: var(--bm-tinta-3);
  font-size: 12px;
}

/* ---- Na Minha Agenda: as atividades do dia -------------------------------- */
.agenda-ativs {
  margin: 0 0 16px;
  padding: 14px 16px 6px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-1);
}
.agenda-ativs-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--bm-tinta);
  font-size: 15px;
  font-weight: 650;
}
.agenda-ativs-titulo span {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.agenda-ativs-nota {
  margin: 0 0 6px;
  color: var(--bm-tinta-3);
  font-size: 12.5px;
}
.agenda-ativ {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--bm-linha);
  color: inherit;
  text-decoration: none;
}
.agenda-ativ:hover .agenda-ativ-corpo b {
  color: var(--bm-verde);
  text-decoration: underline;
}
.agenda-ativ-ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--bm-verde-borda);
  border-radius: 50%;
  background: var(--bm-verde-claro);
  color: var(--bm-verde);
}
.agenda-ativ.vencida .agenda-ativ-ico {
  border-color: var(--bm-vermelho-borda);
  background: var(--bm-vermelho-claro);
  color: var(--bm-vermelho);
}
.agenda-ativ.feita .agenda-ativ-ico {
  border-color: var(--bm-linha);
  background: var(--bm-papel-2);
  color: var(--bm-tinta-4);
}
.agenda-ativ-corpo {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}
.agenda-ativ-corpo b {
  color: var(--bm-tinta);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.agenda-ativ.feita .agenda-ativ-corpo b {
  color: var(--bm-tinta-3);
  text-decoration: line-through;
}
.agenda-ativ-corpo small {
  color: var(--bm-tinta-3);
  font-size: 12.5px;
}
.agenda-ativ-quando {
  display: inline-flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--bm-tinta-2);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Revisão de 13/10/2026 ------------------------------------------------ */
/* O botão da caixa de cima diz o que vai acontecer: a anotação é SALVA aqui
   dentro; o recado é ENVIADO ao fornecedor. Os dois nomes estão desenhados e o
   data-aba escolhe — como o resto da caixa, sem redesenhar nada. */
.anotacoes .hist-compor[data-aba="recado"] .rot-nota,
.anotacoes .hist-compor:not([data-aba="recado"]) .rot-recado {
  display: none;
}
/* No sino, título comprido não empurra as outras atividades para fora da
   lista: fica em duas linhas (inteiro, só dentro do pregão). */
.bell-item.bell-ativ strong,
.bell-item.bell-ativ small.bell-ativ-onde {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* >>> pedido resultados */
/* ==========================================================================
   TELA DE RESULTADOS (Ganhos e perdidos) — outubro/2026
   ==========================================================================
   "Quero que melhore essa aba também, de acordo com as melhorias do sistema."

   A tela era toda feita de estilo escrito na linha: cada cartão com o seu
   fundo, a sua borda e o seu verde. Agora ela é montada com as peças do funil
   (.process-lane, .process-card, .bm-tag, .card-acao, .funil-barra) e este
   bloco só traz o que o funil não tinha: os cinco números do topo, o aviso da
   primeira limpeza dos perdidos, o gráfico mês a mês, a rosca e as duas
   janelas de lista. Ver renderResultadosView em app/02-lista.js.

   O gráfico e a rosca são SVG: as cores vêm daqui, as medidas vêm do código.
   ========================================================================== */
.res-tela {
  gap: 14px;
}
.res-topo {
  align-items: flex-start;
  flex-wrap: wrap;
}
.res-topo .eyebrow {
  margin: 0 0 2px;
}
.res-regra {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--bm-tinta-3);
  font-size: 13px;
}
.res-regra .bm-ico {
  width: 14px;
  height: 14px;
  color: var(--bm-tinta-4);
}
.res-tela .funil-busca input {
  width: 250px;
}
.res-tela .funil-limpar .bm-ico {
  width: 9px;
  height: 9px;
  stroke-width: 3;
}

/* ---- O aviso da primeira limpeza dos perdidos --------------------------- */
.res-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--bm-ambar-borda);
  border-radius: var(--bm-raio-g);
  background: var(--bm-ambar-claro);
  color: var(--bm-ambar);
  font-size: 13.5px;
  line-height: 1.4;
}
.res-aviso > .bm-ico {
  width: 18px;
  height: 18px;
  color: #dc6803;
}
.res-aviso-txt {
  flex: 1 1 280px;
  min-width: 0;
}
.res-aviso b {
  color: #7a2e0e;
}
.res-aviso .card-acao {
  border-color: var(--bm-ambar-borda);
  color: var(--bm-ambar);
}

/* ---- Os cinco números do topo ------------------------------------------- */
.res-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.res-kpi {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-1);
}
.res-kpi-ico {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bm-raio);
  background: #f2f4f7;
  color: var(--bm-tinta-3);
}
.res-kpi-ico .bm-ico {
  width: 16px;
  height: 16px;
}
.res-kpi-txt {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.res-kpi-rot {
  color: var(--bm-tinta-3);
  font-size: 12.5px;
  font-weight: 500;
}
.res-kpi-valor {
  overflow: hidden;
  color: var(--bm-tinta);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Número grande ("R$ 12.345.678" em diante) não pode aparecer cortado: a letra
   encolhe em dois passos e a linha fica da mesma altura das outras, para os
   cinco cartões continuarem alinhados. Quem põe a classe é kpiCard. */
.res-kpi.valor-longo .res-kpi-valor,
.res-kpi.valor-muito-longo .res-kpi-valor {
  line-height: 26.4px;
  letter-spacing: -0.02em;
}
.res-kpi.valor-longo .res-kpi-valor { font-size: 18px; }
.res-kpi.valor-muito-longo .res-kpi-valor { font-size: 15.5px; }
.res-kpi-delta {
  color: var(--bm-tinta-4);
  font-size: 11.5px;
  line-height: 1.3;
}
.res-kpi.verde .res-kpi-ico { background: var(--bm-ok-claro); color: var(--bm-ok); }
.res-kpi.verde .res-kpi-valor { color: var(--bm-ok); }
.res-kpi.vermelho .res-kpi-ico { background: var(--bm-vermelho-claro); color: var(--bm-vermelho); }
.res-kpi.vermelho .res-kpi-valor { color: var(--bm-vermelho); }
.res-kpi.azul .res-kpi-ico { background: var(--bm-azul-claro); color: var(--bm-azul); }

/* ---- As duas colunas e o relatório ao lado ------------------------------ */
.res-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 14px;
  align-items: start;
}
.res-lane {
  min-width: 0;
}
.process-lane.res-ganho .lane-ponto { background: #12b76a; }
.process-lane.res-perdido .lane-ponto { background: #f04438; }
.res-card .res-sem-valor {
  color: var(--bm-tinta-4);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.res-card .res-motivo b {
  color: var(--bm-tinta-2);
  font-weight: 600;
}
/* A etiqueta âmbar ("some em 12 dias"): o tom de aviso que faltava às .bm-tag. */
.bm-tag.ambar {
  background: var(--bm-ambar-claro);
  border-color: var(--bm-ambar-borda);
  color: var(--bm-ambar);
}
/* "+ 16 antigos", no cabeçalho da coluna Perdidos: ocupa o lugar que o total em
   reais ocupa na coluna dos ganhos, e abre a lista dos que já saíram. */
.res-antigos-atalho {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: transparent;
  color: var(--bm-tinta-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.res-antigos-atalho:hover {
  background: var(--bm-papel);
  color: var(--bm-azul);
}
.res-antigos-atalho:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
}
/* Os perdidos que já saíram do sistema: uma linha, no fim da coluna. */
.res-antigos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px dashed var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
  color: var(--bm-tinta-3);
  font-size: 12.5px;
  line-height: 1.4;
}
.res-antigos > .bm-ico {
  width: 15px;
  height: 15px;
  color: var(--bm-tinta-4);
}
.res-antigos span {
  flex: 1 1 150px;
  min-width: 0;
}
.res-antigos b {
  color: var(--bm-tinta-2);
  font-weight: 600;
}

.res-relatorio {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.res-painel {
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-1);
}
.res-painel-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  flex-wrap: wrap;
}
.res-painel-cabeca b {
  color: var(--bm-tinta);
  font-size: 14px;
  font-weight: 650;
}
.res-painel-quando,
.res-painel-nota {
  color: var(--bm-tinta-3);
  font-size: 12.5px;
}
.res-painel-nota {
  margin: 4px 0 6px;
}
.res-legenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bm-tinta-2);
  font-size: 12.5px;
}
.res-legenda .res-cor:not(:first-child) {
  margin-left: 8px;
}
.res-cor {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
}
.res-cor.ganhos { background: var(--bm-ok); }
.res-cor.perdidos { background: #d92d20; }
.res-vazio {
  margin: 10px 0 0;
  color: var(--bm-tinta-4);
  font-size: 13px;
}
/* "Ver os números em tabela": só existe onde a tabela começa escondida (ver as
   telas mais estreitas, no fim deste bloco). */
.res-ver-tabela {
  display: none;
  margin-top: 8px;
}

/* ---- O gráfico "Evolução mês a mês" (SVG) -------------------------------- */
.res-grafico {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  margin-top: 2px;
}
.res-grafico text {
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.res-grafico .g-eixo {
  stroke: var(--bm-linha-forte);
  stroke-width: 1;
}
.res-grafico .g-coluna {
  cursor: pointer;
}
.res-grafico .g-fundo {
  fill: transparent;
}
.res-grafico .g-coluna:hover .g-fundo {
  fill: #f2f4f7;
}
.res-grafico .g-coluna.escolhido .g-fundo {
  fill: var(--bm-verde-claro);
}
.res-grafico .g-ganhos { fill: var(--bm-ok); }
.res-grafico .g-perdidos { fill: #d92d20; }
.res-grafico .g-total {
  fill: var(--bm-tinta);
  font-size: 13px;
  font-weight: 700;
}
.res-grafico .g-dentro {
  fill: #fff;
  font-size: 11.5px;
  font-weight: 600;
  pointer-events: none;
}
.res-grafico .g-mes {
  fill: var(--bm-tinta-3);
  font-size: 12px;
}
.res-grafico .g-mes.atual {
  fill: var(--bm-tinta);
  font-weight: 700;
}
.res-grafico .g-ano {
  fill: var(--bm-tinta-4);
  font-size: 10.5px;
}

/* Os mesmos números, em tabela. (As tabelas antigas do sistema têm largura
   mínima de 1040px e cabeçalho em maiúsculas: aqui não.) */
.res-tabela,
.res-lista {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.res-tabela {
  margin-top: 6px;
  font-size: 12.5px;
}
.res-tabela th,
.res-tabela td {
  padding: 6px 8px;
  border-bottom: 1px solid #f0f2f5;
  color: var(--bm-tinta-2);
  text-align: right;
  white-space: nowrap;
}
.res-tabela th,
.res-lista th {
  background: transparent;
  border-bottom: 1px solid var(--bm-linha);
  color: var(--bm-tinta-3);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: none;
}
.res-tabela th:first-child,
.res-tabela td:first-child {
  padding-left: 0;
  text-align: left;
}
.res-tabela th:last-child,
.res-tabela td:last-child {
  padding-right: 0;
}
.res-tabela .verde { color: var(--bm-ok); font-weight: 600; }
.res-tabela .vermelho { color: var(--bm-vermelho); font-weight: 600; }
.res-tabela tfoot td {
  border-top: 1px solid var(--bm-linha);
  border-bottom: 0;
  color: var(--bm-tinta);
  font-weight: 700;
}

/* ---- A rosca e os maiores valores ---------------------------------------- */
.res-rosca-linha {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 12px 0 2px;
}
.res-rosca {
  width: 112px;
  height: 112px;
  flex: none;
}
.res-rosca circle {
  fill: none;
  stroke-width: 5.5;
}
.res-rosca .r-fundo { stroke: #eaecf0; }
.res-rosca .r-ganhos { stroke: var(--bm-ok); }
.res-rosca .r-perdidos { stroke: #d92d20; }
.res-rosca text {
  text-anchor: middle;
}
.res-rosca .r-total {
  fill: var(--bm-tinta);
  font-size: 9px;
  font-weight: 700;
}
.res-rosca .r-rot {
  fill: var(--bm-tinta-3);
  font-size: 3.6px;
}
.res-rosca-legenda {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.res-rosca-legenda li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bm-tinta-2);
  font-size: 13px;
}
.res-rosca-legenda b {
  margin-left: auto;
  color: var(--bm-tinta);
  font-variant-numeric: tabular-nums;
}
.res-rosca-legenda small {
  min-width: 34px;
  color: var(--bm-tinta-3);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.res-sub {
  margin: 14px 0 10px;
  padding-top: 12px;
  border-top: 1px solid #f0f2f5;
  color: var(--bm-tinta);
  font-size: 13px;
  font-weight: 650;
}
.res-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.res-top li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--bm-tinta-2);
  font-size: 13px;
}
.res-pos {
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f2f4f7;
  color: var(--bm-tinta-2);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.res-top li:first-child .res-pos {
  background: var(--bm-verde);
  color: #fff;
}
/* O nome quebra em duas linhas em vez de ser cortado numa só: quase todo órgão
   começa por "Prefeitura Municipal de", e cortado ficariam três linhas iguais.
   Mas são DUAS no máximo: um consórcio de nome comprido, na coluna estreita,
   ocupava oito linhas e empurrava o resto do quadro (o nome inteiro está na
   dica da linha). */
.res-top-nome {
  flex: 1 1 0;
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.res-top-nome small {
  color: var(--bm-tinta-4);
}
.res-top b {
  color: var(--bm-verde);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- As janelas: o que passou do prazo e os perdidos antigos ------------ */
.itens-janela.res-janela {
  max-width: 820px;
  border-radius: var(--bm-raio-g);
}
.res-janela .itens-cabeca h2 {
  color: var(--bm-tinta);
  font-size: 17px;
  font-weight: 650;
}
.res-fechar {
  min-height: 32px;
  padding: 0 9px;
}
.res-fechar .bm-ico {
  width: 15px;
  height: 15px;
}
.res-janela .itens-corpo {
  display: grid;
  gap: 12px;
}
.res-janela .itens-corpo p {
  margin: 0;
  color: var(--bm-tinta-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.res-janela .itens-corpo p.res-nota {
  color: var(--bm-tinta-3);
  font-size: 12.5px;
}
.res-lista-caixa {
  max-height: 44vh;
  overflow: auto;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
}
.res-lista {
  font-size: 13px;
}
.res-lista th,
.res-lista td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.res-lista th {
  position: sticky;
  top: 0;
  background: var(--bm-papel-2);
  white-space: nowrap;
}
.res-lista td {
  border-bottom: 1px solid #f0f2f5;
  color: var(--bm-tinta-2);
}
.res-lista td:first-child {
  min-width: 210px;
}
.res-lista td small {
  color: var(--bm-tinta-4);
}
.res-lista .num {
  text-align: right;
  white-space: nowrap;
}
.res-janela .itens-rodape {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.res-janela .itens-rodape .muted {
  margin-right: auto;
  font-size: 12.5px;
}
.res-apagar {
  height: 38px;
  padding: 0 16px;
}

/* ---- Telas mais estreitas ------------------------------------------------ */
/* Abaixo de 1440px o relatório não cabe ao lado das duas colunas com número
   legível: ele sobe para cima delas, com o gráfico e a rosca lado a lado. */
@media (max-width: 1439px) {
  .res-corpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .res-relatorio {
    grid-column: 1 / -1;
    order: -1;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }
  /* A tabela mês a mês, aqui, só aparece quando ela pede ("Ver os números em
     tabela"): aberta sempre, empurrava os cartões uma tela inteira para baixo.
     Quando aparece, ocupa a largura toda, embaixo do gráfico e da rosca. */
  .res-painel-largo {
    display: none;
    grid-column: 1 / -1;
  }
  .res-relatorio.res-tabela-aberta .res-painel-largo {
    display: block;
  }
  .res-ver-tabela {
    display: inline-flex;
  }
  /* Cinco cartões lado a lado cortavam o "Valor ganho": ficam três em cima
     (as contagens) e dois embaixo (o dinheiro e a taxa). */
  .res-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .res-kpi {
    grid-column: span 2;
  }
  .res-kpi:nth-child(n + 4) {
    grid-column: span 3;
  }
}
@media (max-width: 900px) {
  .res-relatorio {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .res-corpo {
    grid-template-columns: minmax(0, 1fr);
  }
  .res-kpis {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .res-kpi,
  .res-kpi:nth-child(n + 4) {
    grid-column: auto;
  }
  .res-tela .funil-busca,
  .res-tela .funil-busca input {
    width: 100%;
  }
}

/* >>> titulo da atividade clicavel */
.ativ-abrir {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bm-tinta);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ativ-abrir:hover {
  color: var(--bm-verde-escuro);
  text-decoration: underline;
}
.ativ-abrir:focus-visible {
  outline: none;
  box-shadow: var(--bm-foco);
  border-radius: 4px;
}

/* >>> pedido barra */
/* ==========================================================================
   A BARRA DE CIMA DO FUNIL — no jeito do Pipedrive, com as cores do tema dela.
   Duas linhas acima das colunas:
     1) [+ Importar edital | v] ..... [N pregões (i)] [Funil de cotações v] [Filtro v] [...]
     2) [Buscar prefeitura] [Pregão de .. até ..] ............ [Ordenar por: ... v]
   A montagem está em public/app/02a-barra.js. Cada peça é uma "âncora"
   (.fb-ancora) com o botão e, quando aberto, o quadrinho (.fb-quadro) — um por
   vez. O seletor de funil (uma âncora solta) também mora no cabeçalho da
   Lixeira e de Ganhos e perdidos.
   ========================================================================== */
.funil-barra {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: normal;
  gap: 10px;
}
.fb-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-width: 0;
}
.fb-grupo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
/* O grupo da direita continua à direita mesmo quando cai para a linha de baixo
   (janela estreita ou filtro de nome comprido). */
.fb-fim {
  margin-left: auto;
  justify-content: flex-end;
}
.fb-ancora {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fb-ancora .bm-ico {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---- Os botões da barra (funil, Filtro, "...", Ordenar por) -------------- */
.fb-bt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--bm-linha-forte);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
  color: var(--bm-tinta-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--bm-sombra-1);
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.fb-bt .bm-ico {
  color: var(--bm-tinta-3);
}
.fb-bt:hover {
  border-color: var(--bm-tinta-4);
  background: var(--bm-papel-2);
}
.fb-bt:focus-visible,
.fb-info:focus-visible,
.fb-limpar:focus-visible {
  outline: none;
  border-color: var(--bm-verde);
  box-shadow: var(--bm-foco);
}
.fb-bt[aria-expanded="true"] {
  border-color: var(--bm-verde);
  background: var(--bm-papel);
  box-shadow: var(--bm-foco);
}
/* A setinha vira de ponta-cabeça enquanto o quadrinho está aberto. */
.fb-seta {
  transition: transform 0.12s ease;
}
[aria-expanded="true"] > .fb-seta {
  transform: rotate(180deg);
}
.fb-so-icone {
  width: 36px;
  padding: 0;
  justify-content: center;
}
/* Filtro ligado: o botão fica marcado de verde, para ela ver de longe que as
   colunas não estão mostrando tudo. */
.fb-bt.ligado,
.fb-bt.ligado:hover {
  border-color: var(--bm-verde-borda);
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
}
.fb-bt.ligado .bm-ico {
  color: var(--bm-verde);
}
.fb-limpar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--bm-verde-borda);
  border-radius: 50%;
  background: var(--bm-papel);
  color: var(--bm-verde-escuro);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.fb-limpar .bm-ico {
  width: 13px;
  height: 13px;
}
.fb-limpar:hover {
  background: var(--bm-verde);
  border-color: var(--bm-verde);
  color: #fff;
}
.fb-ordenar .fb-rot {
  color: var(--bm-tinta-3);
  font-weight: 500;
}
.fb-ordenar b {
  color: var(--bm-tinta);
  font-weight: 600;
}

/* ---- O botão verde: Importar edital + a setinha -------------------------- */
.fb-dividido {
  gap: 0;
  border-radius: var(--bm-raio);
  box-shadow: var(--bm-sombra-1);
}
.fb-importar,
.fb-importar-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 0;
  background: var(--bm-verde);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease;
}
.fb-importar {
  gap: 7px;
  padding: 0 14px 0 11px;
  border-radius: var(--bm-raio) 0 0 var(--bm-raio);
}
.fb-importar-seta {
  width: 34px;
  padding: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 var(--bm-raio) var(--bm-raio) 0;
}
.fb-importar:hover,
.fb-importar-seta:hover,
.fb-importar-seta[aria-expanded="true"] {
  background: var(--bm-verde-escuro);
}
.fb-importar:focus-visible,
.fb-importar-seta:focus-visible {
  outline: 2px solid var(--bm-verde-escuro);
  outline-offset: 2px;
}
/* Enquanto a IA lê o edital: travado e sem cara de clicável — mas ainda VERDE,
   colado na setinha. (O "!important" é porque a regra geral de botão travado do
   sistema pinta tudo de cinza com "!important": sem ele, esta regra não valia
   e o botão virava um retângulo cinza grudado numa setinha verde.) */
.fb-importar[disabled],
.fb-importar[disabled]:hover {
  background: var(--bm-verde) !important;
  color: #fff !important;
  opacity: 0.6;
  cursor: progress !important;
}

/* ---- "N pregões" e o (i) -------------------------------------------------- */
.fb-total {
  gap: 2px;
  color: var(--bm-tinta-2);
  font-size: 13.5px;
  white-space: nowrap;
}
.fb-total-n b {
  color: var(--bm-tinta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fb-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--bm-tinta-3);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.fb-info:hover,
.fb-info[aria-expanded="true"] {
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
}

/* ---- O quadrinho ---------------------------------------------------------- */
/* Fica por cima das colunas e dos cartões (que usam camadas baixas) e nunca
   passa da largura da janela. Abre para a direita do botão; os do lado direito
   da barra (.a-direita) abrem para a esquerda, senão sairiam da tela. */
.fb-quadro {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 1px;
  width: max-content;
  min-width: 220px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid var(--bm-linha);
  border-radius: 10px;
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-2);
  text-align: left;
  white-space: normal;
}
.fb-quadro.a-direita {
  left: auto;
  right: 0;
}
.fb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--bm-tinta-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.fb-item .bm-ico {
  color: var(--bm-tinta-3);
}
.fb-item:hover {
  background: var(--bm-fundo);
  color: var(--bm-tinta);
}
.fb-item:focus-visible {
  outline: none;
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
}
/* Item travado (os dois de importar, enquanto a IA lê): só apagado, sem a
   caixa cinza da regra geral de botão travado (daí o "!important"). */
.fb-item[disabled],
.fb-item[disabled]:hover {
  background: none !important;
  color: var(--bm-tinta-4) !important;
  cursor: progress !important;
}
.fb-item[disabled] .bm-ico {
  color: var(--bm-tinta-4);
}
.fb-item-rot {
  flex: 1 1 auto;
  min-width: 0;
}
/* Nos quadrinhos de escolha o símbolo é um visto, que só aparece no item que
   está valendo (o lugar dele fica guardado nos outros, para os nomes alinharem). */
.fb-item[role="menuitemradio"] > .bm-ico {
  visibility: hidden;
  color: var(--bm-verde);
}
.fb-item[aria-checked="true"] > .bm-ico {
  visibility: visible;
}
.fb-item[aria-checked="true"] {
  color: var(--bm-verde-escuro);
  font-weight: 600;
}
.fb-num {
  flex: none;
  margin-left: 12px;
  color: var(--bm-tinta-4);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fb-risco {
  display: block;
  height: 1px;
  margin: 5px 4px;
  background: var(--bm-linha);
}
.fb-nota {
  margin: 0;
  padding: 6px 10px 4px;
  max-width: 300px;
  color: var(--bm-tinta-3);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

/* O quadrinho do total: a soma em cima e, embaixo, a mesma conta por etapa. */
.fb-quadro-total {
  min-width: 290px;
  gap: 10px;
  padding: 12px 14px;
  cursor: default;
}
.fb-total-cab {
  margin: 0;
  color: var(--bm-tinta-2);
  font-size: 13.5px;
  font-weight: 500;
}
.fb-total-cab b {
  color: var(--bm-tinta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fb-etapas {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--bm-linha);
  list-style: none;
}
.fb-etapa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(92px, auto);
  align-items: baseline;
  gap: 12px;
  color: var(--bm-tinta-2);
  font-size: 13px;
  font-weight: 500;
}
.fb-etapa-n {
  color: var(--bm-tinta);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fb-etapa-valor {
  color: var(--bm-tinta-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fb-quadro-total .fb-nota {
  padding: 0;
}

/* O "x" de limpar a busca agora é um desenho, não uma letra. */
.funil-limpar .bm-ico {
  width: 10px;
  height: 10px;
}
/* Funil vazio (sistema novo): o Importar edital aparece no meio da tela. */
.empty-state .fb-ancora {
  margin-top: 16px;
}
/* A tela vazia pinta de verde todo desenho que estiver dentro dela (é para o
   símbolo grande do meio): o "+" e a setinha do botão ficavam verde sobre
   verde, invisíveis. Aqui eles seguem a cor da letra do botão. */
.empty-state .fb-importar .bm-ico,
.empty-state .fb-importar-seta .bm-ico {
  color: inherit;
}
/* Fora da barra (cabeçalho da Lixeira e de Ganhos e perdidos) o seletor de
   funil fica ao lado dos botões da própria tela, que são um pouco mais altos:
   ele acompanha a altura deles, em vez de ficar um degrau mais baixo. */
.process-funnel-title:not(.funil-barra) .fb-ancora {
  align-items: stretch;
}
.process-funnel-title:not(.funil-barra) .fb-seletor {
  height: auto;
  min-height: 36px;
}

/* ACERTO VIZINHO, achado ao fotografar a barra em 1100 de largura: com o menu
   da esquerda aberto, os cartões de "Aguardando cotação" e "Concluídos" saíam
   da coluna e passavam por cima da coluna ao lado. O nome da coluna não quebra
   de linha, e era ele que ditava a largura de tudo o que está dentro dela.
   Agora a largura é a da coluna, e o nome encurta com reticências (já estava
   preparado para isso). */
.process-lane {
  grid-template-columns: minmax(0, 1fr);
}
/* ...só que, com a coluna estreita e um total em reais ao lado, quem encolhia
   era o NOME: "Concluídos" virava "CO…" e, com valor nas quatro colunas (como
   no sistema de verdade), as quatro viravam "C…". Agora, quando não cabe tudo
   numa linha, quem desce é o total; o nome fica inteiro (ou encurta só o que
   faltar, com o número de pregões sempre ao lado dele).
   Como: o nome "pede" 100px (cabe "Concluídos" e "Captados (IA)") e cresce até
   o seu tamanho; se nem com 100px o total couber ao lado, o total vai para a
   linha de baixo, alinhado à direita. */
.process-lane .pipeline-head {
  flex-wrap: wrap;
  row-gap: 2px;
}
.process-lane .lane-nome {
  flex: 1 1 100px;
  max-width: max-content;
}

/* ---- Janela estreita: a barra vira coluna -------------------------------- */
/* É a mesma largura em que o menu da esquerda sobe para cima e as colunas do
   funil ficam uma embaixo da outra. Cada grupo ocupa a linha inteira e o
   quadrinho abre embaixo do GRUPO, na largura dele — preso ao botão, ele
   sairia da tela. */
@media (max-width: 760px) {
  .fb-linha {
    flex-direction: column;
    align-items: stretch;
  }
  .fb-grupo,
  .fb-linha > .funil-filtros {
    position: relative;
    width: 100%;
  }
  .fb-fim {
    margin-left: 0;
    justify-content: flex-start;
  }
  .fb-grupo > .fb-ancora {
    position: static;
  }
  .fb-grupo > .fb-dividido {
    display: flex;
    flex: 1 1 auto;
  }
  .fb-grupo > .fb-dividido .fb-importar {
    flex: 1 1 auto;
  }
  .fb-quadro,
  .fb-quadro.a-direita {
    left: 0;
    right: auto;
    max-width: calc(100vw - 28px);
  }
  .fb-grupo > .fb-ancora > .fb-quadro {
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .fb-linha .funil-busca,
  .fb-linha .funil-busca input {
    width: 100%;
  }
  /* As duas datas lado a lado, na largura da linha: "Pregão de [..] até [..]".
     Soltas, cada rótulo e cada campo caía numa linha sua e a barra ficava mais
     alta que a primeira coluna. */
  .fb-linha .funil-campo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100%;
  }
  .fb-linha .funil-campo input {
    width: 100%;
    min-width: 0;
  }
}
/* Em tela de celular as duas datas não cabem lado a lado sem cortar o dia:
   uma embaixo da outra, com os rótulos alinhados. */
@media (max-width: 480px) {
  .fb-linha .funil-campo {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
/* ==== FIM DA BARRA DE CIMA DO FUNIL ======================================= */

/* >>> tres pontinhos e VENCIDO da atividade */
.ativ-mais {
  position: relative;
  display: inline-block;
}
.ativ-mais > summary {
  list-style: none;
  cursor: pointer;
}
.ativ-mais > summary::-webkit-details-marker {
  display: none;
}
.ativ-mais-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-2);
}
.ativ-mais-lista button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--bm-tinta-2);
  font: 400 14px Inter, "Segoe UI", system-ui, Arial;
  text-align: left;
  cursor: pointer;
}
.ativ-mais-lista button:hover {
  background: var(--bm-papel-2);
  color: var(--bm-tinta);
}
.ativ-mais-lista button.perigo {
  color: var(--bm-vermelho);
}
.ativ-vencido {
  font-weight: 700;
  letter-spacing: 0.03em;
}
.ativ-atraso {
  color: var(--bm-vermelho);
  font-weight: 500;
}
/* O cartão da atividade corta o que passa da borda; com o menuzinho aberto ele
   precisa deixar passar, senão as opções aparecem pela metade. */
.ativ-linha:has(.ativ-mais[open]),
:has(> .ativ-linha .ativ-mais[open]) {
  overflow: visible;
}

/* >>> faixa "Hoje:" so quando ha o que fazer */
/* A faixa "Hoje: N disputas" em cima do funil só aparece quando é AVISO (há
   disputa de hoje sem resposta de vendedor). Sem nada pendente ela era uma
   linha solta com um calendário — a Thais pediu para tirar; o número de
   disputas do dia está no painel de entrada e no filtro "Disputa hoje". */
.resumo-dia:not(.urgente) {
  display: none;
}

/* >>> busca do topo no jeito do Pipedrive */
.topbar .global-search {
  max-width: 560px;
}
.topbar #globalSearch {
  height: 42px;
  border-radius: 999px;
  padding: 0 18px 0 44px;
  background: var(--bm-papel);
}
.topbar .gs-icon {
  left: 16px;
}
.topbar .gs-plus {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.topbar .gs-results {
  top: calc(100% + 8px);
  max-height: min(70vh, 620px);
  overflow-y: auto;
  padding: 8px 0 10px;
  border-radius: 12px;
}
.topbar .gs-grupo {
  padding: 12px 18px 6px;
  color: var(--bm-tinta);
  font: 600 14px Inter, "Segoe UI", system-ui, Arial;
  letter-spacing: 0;
  text-transform: none;
  background: none;
  border: 0;
}
.topbar .gs-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 9px 18px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.topbar .gs-item:hover,
.topbar .gs-item:focus-visible {
  background: var(--bm-papel-2);
  outline: none;
}
.topbar .gs-simb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  color: var(--bm-tinta-2);
}
.topbar .gs-simb svg {
  width: 24px;
  height: 24px;
}
.topbar .gs-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.topbar .gs-txt strong {
  display: block;
  color: var(--bm-tinta);
  font: 600 14.5px Inter, "Segoe UI", system-ui, Arial;
}
.topbar .gs-txt span {
  color: var(--bm-tinta-3);
  font-size: 13px;
}
.topbar .gs-empty {
  padding: 16px 18px;
  color: var(--bm-tinta-3);
  font-size: 14px;
}
/* (A regra antiga, escrita na própria página, empilhava o símbolo em cima do texto.) */
.topbar .gs-item {
  flex-direction: row;
}
/* O "+" do topo como o do Pipedrive: redondo, branco, com a borda fina. */
.topbar .gs-plus {
  background: var(--bm-papel);
  border: 1px solid var(--bm-linha-forte);
  color: var(--bm-tinta);
  box-shadow: none;
}
.topbar .gs-plus:hover {
  background: var(--bm-papel-2);
}
/* A frase "Perdidos ficam aqui por 60 dias..." saiu do alto de Ganhos e perdidos
   a pedido da Thais; a regra continua valendo e aparece no aviso da limpeza. */
.res-tela > .res-regra {
  display: none;
}

/* >>> menu do + (criar) */
.criar-menu {
  position: relative;
  flex: none;
}
.criar-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 70;
  min-width: 260px;
  padding: 8px;
  border: 1px solid var(--bm-linha);
  border-radius: 12px;
  background: var(--bm-papel);
  box-shadow: var(--bm-sombra-2);
}
.criar-lista[hidden] {
  display: none;
}
.criar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--bm-tinta);
  font: 400 14.5px Inter, "Segoe UI", system-ui, Arial;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.criar-item svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--bm-tinta-2);
}
.criar-item:hover,
.criar-item:focus-visible {
  background: var(--bm-papel-2);
  outline: none;
}

/* >>> pedido vinculos */
/* A janelinha de formulário (Vincular pessoa, Descrição do arquivo). */
.mini-janela {
  max-width: 520px;
}
.mini-corpo {
  display: grid;
  gap: 14px;
}
.mini-campo {
  display: grid;
  gap: 6px;
  color: var(--bm-tinta-2);
  font: 500 13px Inter, "Segoe UI", system-ui, Arial;
}
.mini-campo input,
.mini-campo textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--bm-linha);
  border-radius: 8px;
  background: var(--bm-papel);
  color: var(--bm-tinta);
  font: 400 14px Inter, "Segoe UI", system-ui, Arial;
}
.mini-campo textarea {
  resize: vertical;
}
.mini-campo input:focus,
.mini-campo textarea:focus {
  outline: 2px solid var(--bm-verde);
  outline-offset: 1px;
}
.mini-erro {
  margin: 0;
  color: var(--bm-vermelho);
  font-size: 13px;
}
.mini-erro[hidden] {
  display: none;
}

/* As outras pessoas da prefeitura, embaixo da principal. */
.pessoas-extras {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.pessoa-extra {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--bm-linha);
}
.pe-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.pe-quem {
  display: grid;
  min-width: 0;
}
.pe-quem b {
  color: var(--bm-tinta);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pe-quem small,
.pe-dados {
  color: var(--bm-tinta-3, var(--bm-tinta-2));
  font-size: 12px;
  overflow-wrap: anywhere;
}
.pe-mais {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--bm-verde);
  font: 600 14px Inter, "Segoe UI", system-ui, Arial;
  cursor: pointer;
}
.pe-mais:hover {
  text-decoration: underline;
}
.pe-mais .bm-ico {
  width: 16px;
  height: 16px;
}

/* Os três pontinhos também servem a links (o "Baixar" do arquivo). */
.ativ-mais-lista a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--bm-tinta-2);
  font: 400 14px Inter, "Segoe UI", system-ui, Arial;
  text-decoration: none;
}
.ativ-mais-lista a:hover {
  background: var(--bm-papel-2);
  color: var(--bm-tinta);
}
.ativ-mais > summary .bm-ico {
  width: 18px;
  height: 18px;
}

/* Arquivos: a descrição embaixo do nome, e o menu que não pode ser cortado. */
.doc-linha {
  position: relative;
}
.doc-linha .ativ-mais {
  flex: none;
}
.doc-desc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bm-tinta-2);
  font-size: 12px;
}
.anotacoes .hist-arquivo {
  position: relative;
}
.hist-arquivo-desc {
  display: block;
  color: var(--bm-tinta-2);
  font-size: 13px;
}
.hist-arquivo-menu {
  position: absolute;
  top: 6px;
  right: 6px;
}
.anotacoes .hist-arquivo:has(.hist-arquivo-menu) {
  padding-right: 44px;
}
.documents-box:has(.ativ-mais[open]),
.documents-list:has(.ativ-mais[open]),
.bloco-pessoa:has(.ativ-mais[open]),
.hist-arquivo:has(.ativ-mais[open]),
:has(> .hist-arquivo .ativ-mais[open]) {
  overflow: visible;
}

/* O aviso de "há um edital sendo lido", que ficou no lugar do botão verde. */
.fb-importando {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bm-papel-2);
  color: var(--bm-tinta-2);
  font: 500 13px Inter, "Segoe UI", system-ui, Arial;
}
.fb-importando[hidden] {
  display: none;
}
.fb-importando .bm-ico {
  width: 15px;
  height: 15px;
}

/* O menu recolhido: o clique no símbolo FIXA a caixinha do grupo (não abre mais
   a barra inteira). O mesmo de casca.css, para a tela inicial. */
.layout.sidebar-collapsed .bmGrupo.fixo > .bmSub {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.layout.sidebar-collapsed #bmNav:has(.bmGrupo.fixo) .bmGrupo:not(.fixo) > .bmSub {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Os três pontinhos dos arquivos e das pessoas, na cor discreta dos demais. */
.doc-linha .ativ-mais > summary,
.pe-topo .ativ-mais > summary,
.hist-arquivo-menu .ativ-mais > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--bm-tinta-3);
}
.doc-linha .ativ-mais > summary:hover,
.pe-topo .ativ-mais > summary:hover,
.hist-arquivo-menu .ativ-mais > summary:hover {
  background: var(--bm-papel-2);
  color: var(--bm-tinta);
}
/* A descrição do arquivo fica EMBAIXO do nome, numa linha só dela (pedido da
   Thais: "o descritivo fica embaixo"), e os dados (quando, tamanho) embaixo dela. */
.anotacoes .hist-arquivo > .hist-arquivo-desc {
  flex: 0 0 100%;
  order: 2;
  color: var(--bm-tinta-2);
  font-size: 13px;
  font-weight: 400;
}
.anotacoes .hist-arquivo:has(.hist-arquivo-desc) > small {
  flex: 0 0 100%;
  order: 3;
}
/* O ARQUIVO NO HISTÓRICO, COMO NO PIPEDRIVE (pedido da Thais, com a foto de lá):
   um cartão branco, o nome em cor de link, a descrição embaixo e os dados na
   última linha; os três pontinhos no canto de cima. */
.anotacoes .hist-arquivo {
  display: grid;
  gap: 4px;
  min-height: 0;
  padding: 12px 48px 12px 16px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio-g);
  background: var(--bm-papel);
}
.anotacoes .hist-arquivo:has(.hist-arquivo-menu) {
  padding-right: 48px;
}
.anotacoes .hist-arquivo a,
.anotacoes .hist-arquivo > span:first-child {
  color: var(--bm-azul, #1d4ed8);
  font-size: 15px;
  font-weight: 600;
}
.anotacoes .hist-arquivo a:hover {
  color: var(--bm-azul, #1d4ed8);
}
.anotacoes .hist-arquivo > .hist-arquivo-desc {
  color: var(--bm-tinta);
  font-size: 13.5px;
}
.hist-arquivo-menu {
  top: 8px;
  right: 10px;
}
/* Na coluna Arquivos, o nome também em cor de link. */
.doc-linha .doc-nome {
  color: var(--bm-azul, #1d4ed8);
}
.doc-linha .doc-desc {
  color: var(--bm-tinta);
}
/* O anexo que o portal não entregou: o motivo e os links, no bloco Arquivos. */
.anexo-ajuda {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--bm-azul-borda);
  border-radius: var(--bm-raio);
  background: var(--bm-azul-claro);
  color: var(--bm-tinta);
  font-size: 13px;
}
.anexo-ajuda p {
  margin: 0;
  color: var(--bm-tinta-2);
}
.anexo-ajuda a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bm-azul);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.anexo-ajuda a .bm-ico {
  flex: none;
  width: 14px;
  height: 14px;
}

/* >>> pedido cobrar */
/* Cobrar o vendedor que não respondeu: a janela com a mensagem pronta. */
.cobrar-janela {
  max-width: 620px;
}
.cobrar-linha {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--bm-linha);
  border-radius: var(--bm-raio);
  background: var(--bm-papel);
}
.cobrar-quem {
  display: grid;
  gap: 2px;
}
.cobrar-quem b {
  color: var(--bm-tinta);
  font-size: 14px;
}
.cobrar-quem small {
  color: var(--bm-tinta-3);
  font-size: 12px;
}
.cobrar-texto {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--bm-raio);
  background: var(--bm-papel-2);
  color: var(--bm-tinta-2);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.cobrar-bts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cobrar-bts a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.cobrar-bts .bm-ico {
  width: 16px;
  height: 16px;
}

/* >>> regua das etapas em azul */
/* A RÉGUA DE ETAPAS NO TOPO DO PREGÃO (pedido da Thais, 14/10/2026: "aquela régua ali de
   cima pode ser azul também"): as etapas já feitas deixam de ser verde claro e ficam no azul
   da marca, como a etapa de agora. O verde fica só no desfecho "ganho". */
.bmPasso.ok {
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
}
.bmPasso.ok.ganho {
  background: var(--bm-ok);
  color: #fff;
}

/* >>> aba Anexos */
/* A ABA "ANEXOS" da caixa de cima (pedido da Thais, 14/10/2026): uma aba de cada vez, como as outras. */
.anotacoes .hist-compor[data-aba="anexos"] .compor-nota {
  display: none;
}
.anotacoes .hist-compor:not([data-aba="anexos"]) .compor-anexos {
  display: none;
}
.anotacoes .compor-anexos {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  border-radius: var(--bm-raio-g);
}
.anotacoes .anx-lista {
  display: grid;
  gap: 8px;
}
.anotacoes .anx-vazio {
  margin: 0;
  color: var(--bm-tinta-3);
  font-size: 13.5px;
}
.anotacoes .compor-anexos.sobre {
  outline: 2px dashed var(--bm-verde);
  outline-offset: -6px;
  background: var(--bm-verde-claro);
}
.nota-tipo-bt .nota-tipo-n {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bm-papel-2);
  color: var(--bm-tinta-3);
  font-size: 11px;
  font-weight: 600;
}
.nota-tipo-bt.ativo .nota-tipo-n {
  background: var(--bm-verde-claro);
  color: var(--bm-verde-escuro);
}

/* >>> icones da aba Anexos */
/* Na aba Anexos os símbolos são desenhados no traço do funil (svg), e não pela biblioteca de ícones. */
.drop-anexo > .bm-ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--bm-verde);
}
.drop-anexo-fino > .bm-ico {
  margin: 0;
}
.anotacoes .compor-anexos .ghost-button .bm-ico {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
}