/* =========================================================================
   BeefPricing Hunter — folha de estilo do produto.

   Traduzida linha a linha dos artboards do design: cada medida aqui é a
   medida de lá. Onde o design usa estilo inline (porque o editor de canvas
   edita inline), aqui vira classe — o pixel é o mesmo.

   Tokens da marca: preto #101c28, laranja #e96b2c.
   ========================================================================= */

:root {
  --ink: #101c28;
  --orange: #e96b2c;
  --orange-dark: #c8551c;
  --orange-soft: #fdf0e8;
  --orange-line: #f3cdb5;
  --muted: #7b8794;
  --soft: #4a5765;
  --line: #e6e2db;
  --line-soft: #f0ede7;
  --line-row: #f4f1ec;
  --paper: #f7f6f3;
  --wash: #fbfaf8;
  --green: #2f7d5b;
  --green-soft: #eaf4ef;
  --amber: #8a6220;
  --amber-soft: #fdf3e3;
  --amber-line: #ecd9b4;
  --grey: #c9c4bb;
  --grey-soft: #f2f0ec;
  --pale: #b6b0a6;
  --border-strong: #d8d3ca;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-dark); }

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

::placeholder { color: var(--pale); }

/* ---------------------------------------------------------------- header */

.header {
  height: 58px;
  flex: none;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: 9px; }
/* A marca é SVG inline, não <img>: sem esta regra ela ocupa a caixa toda
   (no header o flex de 58px disfarçava; na tela de login, não). */
.brand img, .brand svg { width: 30px; height: 30px; flex: none; display: block; }
.brand .word {
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1; color: var(--ink);
}
.brand .word span { color: var(--orange); }
.brand .sub {
  font-size: 9px; font-weight: 700; letter-spacing: .22em;
  color: var(--muted); line-height: 1; margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: 4px; height: 100%; }
.nav a {
  display: flex; align-items: center; height: 100%; padding: 0 14px;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a.on { font-weight: 600; color: var(--ink); border-bottom-color: var(--orange); }

.grow { flex-grow: 1; }

.search { position: relative; display: flex; align-items: center; }
.search svg { width: 15px; height: 15px; position: absolute; left: 10px; }
.search input {
  width: 280px; height: 34px; padding: 0 12px 0 32px;
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; background: var(--wash); outline: none;
}
.search input:focus { border-color: var(--orange); background: #fff; }

.avatar-user {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; flex: none;
  overflow: hidden; padding: 0;
}
.avatar-user img { width: 100%; height: 100%; object-fit: cover; display: block; }

.who {
  height: 30px; border: 1px solid var(--line); border-radius: 15px;
  background: #fff; font-size: 12.5px; font-weight: 600; color: var(--soft);
  padding: 0 26px 0 11px; outline: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
  background-size: 11px;
}

/* --------------------------------------------------------------- filtros */

/* A barra responde duas perguntas, e elas ficam em lados opostos:
   o que ESTÁ filtrando agora (fichas removíveis, à esquerda) e o que DÁ para
   filtrar (um botão só, à direita). Nove menus iguais lado a lado não eram
   uma barra — eram uma parede. */
.filters {
  flex: none; background: #fff; border-bottom: 1px solid var(--line);
  padding: 9px 20px; display: flex; align-items: center; gap: 10px;
  min-height: 48px;
}

.applied { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }

.token {
  display: inline-flex; align-items: center; gap: 6px; height: 26px;
  padding: 0 9px; border-radius: 13px; font-size: 12px; font-weight: 600;
  background: var(--orange-soft); color: var(--orange-dark);
  border: 1px solid var(--orange-line); cursor: pointer;
  white-space: nowrap; max-width: 260px;
}
.token b {
  font-weight: 700; font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; opacity: .65;
}
.token svg { width: 10px; height: 10px; flex: none; opacity: .75; }
.token:hover { background: #fbe3d3; }
.token:hover svg { opacity: 1; }
.token.search { background: var(--grey-soft); color: var(--soft); border-color: var(--line); }
.token.search svg { stroke: var(--soft); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px;
  padding: 0 11px; border-radius: 15px; font-size: 12.5px; font-weight: 500;
  background: #fff; border: 1px solid var(--line); color: var(--soft);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.chip:hover { border-color: var(--border-strong); }
.chip svg { width: 11px; height: 11px; }
.chip.on {
  background: var(--orange-soft); color: var(--orange-dark);
  border-color: var(--orange-line); font-weight: 600;
}
.chip.dark {
  background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600;
}
.chip.dark svg { opacity: .7; }

.filter-btn {
  height: 32px; font-weight: 600; color: var(--ink); font-family: inherit;
  border-color: var(--border-strong);
}
.filter-btn svg { width: 14px; height: 14px; }
.filter-btn b {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.filter-btn.on { border-color: var(--orange-line); background: var(--orange-soft); }

.filter-clear { font-size: 12.5px; color: var(--muted); cursor: pointer; flex: none; }
.filter-clear:hover { color: var(--ink); }

.dropdown { position: relative; }
/* MENU QUE ABRE PARA A ESQUERDA.
   `right: 0` sozinho nao faz nada: a regra base define `left: 0`, e com os
   dois presentes o `left` vence -- o menu nascia na borda do botao e crescia
   250px para fora da janela. Quem estiver colado na direita da tela usa esta
   classe, que desliga o `left` antes. */
.dropdown-menu.a-esquerda { left: auto; right: 0; min-width: 250px; }
.dropdown-menu {
  display: none; position: absolute; top: 36px; left: 0; z-index: 40;
  min-width: 210px; max-height: 340px; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 28, 40, .13); padding: 6px;
}
.dropdown.open .dropdown-menu { display: block; }
/* ITEM DE MENU. Sem esta regra os `<a>` ficavam INLINE: as quatro ações da
   conta saíam emendadas num parágrafo só, e o menu parecia um aviso em vez de
   uma lista de coisas para clicar. O menu do usuário tinha a sua; a regra
   geral, não. */
.dropdown-menu a {
  display: block; padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 12.5px; color: var(--ink); text-decoration: none;
}
.dropdown-menu a:hover { background: var(--wash); }
/* Excluir apaga a conta e tudo que pendura nela: separado e marcado. */
.dropdown-menu a.out {
  color: var(--orange-dark); border-top: 1px solid var(--line-soft);
  border-radius: 0 0 7px 7px; margin-top: 4px; padding-top: 10px;
}
.dropdown-menu a.out:hover { background: var(--orange-soft); }

.dropdown-menu label {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 6px; font-size: 12.5px; color: var(--soft); cursor: pointer;
}
.dropdown-menu label:hover { background: var(--wash); }
.dropdown-menu input { accent-color: var(--orange); }
.dropdown-menu .empty { padding: 8px; font-size: 12px; color: var(--pale); }

/* O painel de dois níveis. */
.filter-menu .dropdown-menu {
  left: auto; right: 0; width: 300px; max-height: 420px; padding: 5px;
}
.fp-level { display: flex; flex-direction: column; }
.fp-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; border: none; background: none; border-radius: 7px;
  font-family: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; text-align: left;
}
.fp-row:hover { background: var(--wash); }
.fp-row .n { font-weight: 600; flex: none; }
.fp-row .v {
  flex-grow: 1; text-align: right; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-row svg { width: 12px; height: 12px; flex: none; stroke: var(--pale); }

.fp-back {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 9px; margin-bottom: 3px; border: none; background: none;
  border-bottom: 1px solid var(--line-soft); border-radius: 0;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink);
  cursor: pointer;
}
.fp-back:hover { color: var(--orange-dark); }
.fp-back svg { width: 13px; height: 13px; flex: none; }

.fp-search {
  width: calc(100% - 8px); margin: 3px 4px 5px; height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px;
  background: var(--wash); outline: none;
}
.fp-search:focus { border-color: var(--orange); background: #fff; }
.fp-opts { max-height: 300px; overflow-y: auto; }

/* "Tem WhatsApp", "tem socio": a pergunta que mais encurta uma prospeccao,
   por isso ela abre o painel. O numero diz quantas contas sobram -- e zero
   apaga o proprio interruptor, para ninguem clicar numa lista vazia. */
.fp-head {
  padding: 9px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--pale);
}
.fp-toggles { display: flex; flex-direction: column; }
.fp-toggle {
  display: flex; align-items: center; gap: 9px; padding: 6px 12px;
  font-size: 12.5px; cursor: pointer;
}
.fp-toggle:hover { background: var(--wash); }
.fp-toggle span { flex-grow: 1; }
.fp-toggle b { font-size: 11px; font-weight: 600; color: var(--pale); }
.fp-toggle.off { opacity: .42; cursor: default; }
.fp-toggle.off:hover { background: none; }
.fp-toggle.wide {
  border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 9px;
  color: var(--soft);
}
.fp-opts label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------------------------------------- corpo */

.shell { display: flex; flex-direction: column; min-height: 100vh; }
/* Na tela de Contas a janela inteira é o quadro: a lista e o painel rolam por
   dentro, e a barra de ação do painel fica sempre visível — como no design. */
.shell.fixed { height: 100vh; overflow: hidden; }
.shell.fixed > #contas-wrap {
  flex-grow: 1; min-height: 0; display: flex; flex-direction: column;
}
.shell.fixed .split { min-height: 0; overflow: hidden; }

.split {
  flex-grow: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 470px;
  gap: 16px; padding: 16px 20px 20px;
}

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
}

.card-head {
  flex: none; padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 10px;
}
.card-head .count { font-size: 14.5px; font-weight: 700; }
.card-head .detail { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- tabela */

.grid-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 96px 62px 116px 124px;
  gap: 12px;
}

.thead {
  flex: none; padding: 8px 16px; background: var(--wash);
  border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
}

.rows { flex-grow: 1; min-height: 0; overflow-y: auto; }

.row {
  padding: 11px 16px; border-bottom: 1px solid var(--line-row);
  align-items: center; cursor: pointer; border-left: 3px solid transparent;
}
.row:hover { background: var(--wash); }
.row.on {
  padding-left: 13px; border-left-color: var(--orange); background: #fdf7f3;
}
.row .name {
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row.on .name { font-weight: 700; }
.row .place { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.row .cell { font-size: 12.5px; color: var(--soft); }

.channels { display: flex; align-items: center; gap: 5px; }
.channels svg { width: 15px; height: 15px; }
.badge-in, .badge-ig {
  width: 15px; height: 15px; border: 1.6px solid var(--grey);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.badge-in { border-radius: 3px; font-size: 8px; font-weight: 800; color: var(--grey); }
.badge-ig { border-radius: 4px; }
.badge-ig i {
  width: 6px; height: 6px; border: 1.4px solid var(--grey); border-radius: 50%;
  display: block;
}
.has .badge-in, .has.badge-in { border-color: var(--green); color: var(--green); }
.has .badge-ig, .has.badge-ig { border-color: var(--green); }
.has.badge-ig i { border-color: var(--green); }

/* O estagio comercial fecha a linha. Ele responde uma das quatro perguntas
   da lista -- "em que pe esta esta conta?" -- e ocupa o lugar onde antes
   ficava um score explicando outro score. */
.cell.stage { font-weight: 600; color: var(--ink); }
.cell.stage.novo { font-weight: 500; color: var(--muted); }

/* ----------------------------------------------------------- painel lado */

.panel { overflow: hidden; }
.panel-head {
  flex: none; padding: 16px 18px 14px; border-bottom: 1px solid var(--line-soft);
}
.panel-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  /* Razao social longa nao pode empurrar o painel inteiro para baixo: duas
     linhas e reticencias, com o nome inteiro no title. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.panel-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.panel-body {
  flex-grow: 1; min-height: 0; overflow-y: auto;
  padding: 16px 18px 0; display: flex; flex-direction: column; gap: 14px;
}
.panel-foot {
  flex: none; border-top: 1px solid var(--line-soft); padding: 12px 18px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.panel-foot .select { max-width: 150px; }

/* Tirar da prospecção: linha própria e tom baixo. Na triagem é ação de todo
   dia -- a conta errada se reconhece olhando a ficha --, mas não é o que a
   pessoa veio fazer, e ao lado do botão principal virava risco de clique. */
.panel-foot .panel-fora { flex-basis: 100%; display: flex; margin-top: 2px; }
.panel-fora .quieto {
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--muted);
}
.panel-fora .quieto:hover { color: var(--orange-dark); }
.panel-fora .quieto svg { width: 13px; height: 13px; }

.tags { display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.tag {
  padding: 2px 9px; border-radius: 11px; background: var(--grey-soft);
  color: var(--soft); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.tag.orange { background: var(--orange-soft); color: var(--orange-dark); font-weight: 700; }
.tag.green { background: var(--green-soft); color: var(--green); font-weight: 700; }
.tag.amber { background: var(--amber-soft); color: var(--amber); font-weight: 700; }
.tag.warn {
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid var(--amber-line); font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 10px;
}

.reco {
  flex: none; margin: 14px 18px 0; padding: 13px 14px;
  background: #fdf7f3; border: 1px solid #f3ddcd; border-radius: 8px;
}
.reco .top { display: flex; align-items: center; gap: 8px; }
.reco .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.reco h4 { margin: 0; font-size: 13.5px; font-weight: 700; }
.reco p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); }

.label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 9px;
}

.person {
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px;
  display: flex; align-items: center; gap: 12px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--grey-soft);
  color: var(--soft); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex: none;
}
.avatar.owner { background: var(--orange-soft); color: var(--orange-dark); }
.person .who-name { font-size: 13.5px; font-weight: 700; }
.person .who-role { font-size: 12px; color: var(--muted); margin-top: 1px; }

.empty-box {
  border: 1px dashed #ded9d1; border-radius: 8px; padding: 14px; text-align: center;
}
.empty-box p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.contact-line { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.contact-line svg { width: 15px; height: 15px; flex: none; }
.contact-line b { font-weight: 600; }
.contact-line .from { color: var(--muted); }

/* --------------------------------------------------------------- botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--orange); color: var(--orange-dark); }
.btn svg { width: 12px; height: 12px; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.dark:hover { background: #1d2c3c; color: #fff; }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }
.btn.primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.btn.go { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.btn.go:hover { background: #276548; color: #fff; }
.btn.tall { height: 34px; padding: 0 14px; }
.btn.small { height: 27px; padding: 0 10px; font-size: 11.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.mark.disabled { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--border-strong); color: var(--ink); }

.pill {
  display: inline-flex; align-items: center; height: 30px; padding: 0 11px;
  border-radius: 15px; border: 1px solid var(--border-strong); background: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pill:hover { border-color: var(--orange); color: var(--orange-dark); }

.select {
  height: 34px; padding: 0 30px 0 12px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: #fff;
  font-size: 12.5px; font-weight: 600; outline: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
}

.field {
  height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 12.5px; background: #fff; outline: none; width: 100%;
}
.field:focus { border-color: var(--orange); }
textarea.field { height: auto; padding: 10px 11px; line-height: 1.55; resize: vertical; }

/* ------------------------------------------------------------ ficha conta */

.account-head {
  flex: none; background: #fff; border-bottom: 1px solid var(--line);
  padding: 16px 24px 0;
}
.crumb {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--muted); margin-bottom: 10px;
}
.crumb svg { width: 13px; height: 13px; }
.account-title {
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
/* A razao social e os outros nomes da conta. Sao identidade, nao ruido:
   ficam abaixo do nome de mercado, um degrau mais discretos. */
.account-alias {
  font-size: 13.5px; color: var(--soft); margin-bottom: 5px; margin-top: 0;
  line-height: 1.35;
}
/* CNPJ, praça, segmento e porte: é o que a pessoa confere antes de falar com
   a empresa, então sai do tamanho de rodapé. */
.account-meta { font-size: 14px; color: var(--soft); margin-top: 0; }
.account-links {
  display: flex; align-items: center; gap: 16px; margin-top: 10px; font-size: 13.5px;
}
.account-links span { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.account-links svg { width: 14px; height: 14px; }

.tabs { display: flex; align-items: center; gap: 2px; margin-top: 16px; }
.tabs a {
  padding: 9px 14px; font-size: 13.5px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent; cursor: pointer;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { font-weight: 600; color: var(--ink); border-bottom-color: var(--orange); }
.tabs a b { color: var(--pale); font-weight: 500; margin-left: 4px; }

.account-body {
  flex-grow: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 396px;
  gap: 18px; padding: 18px 24px 24px;
}
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.block {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px;
}
.block.pad { padding: 18px; }

.reco-wide { display: flex; gap: 16px; align-items: flex-start; }
.reco-wide .rule { flex: none; width: 3px; align-self: stretch; border-radius: 2px; }
.reco-wide h4 { margin: 0; font-size: 15px; font-weight: 700; }
.reco-wide p {
  margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--soft); max-width: 640px;
}
.reco-why {
  flex: none; display: flex; flex-direction: column; gap: 5px;
  padding-left: 18px; border-left: 1px solid var(--line-soft); min-width: 190px;
}
.reco-why div { font-size: 12.5px; color: var(--soft); }
.reco-why div.warn { color: #a9762a; }

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

.person-card {
  border: 1px solid var(--line); border-radius: 9px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 11px;
}
.person-card.best { background: #fdfcfa; }
.person-card .head { display: flex; align-items: flex-start; gap: 11px; }
.person-card .avatar { width: 38px; height: 38px; font-size: 13px; }
.person-card .name { font-size: 14.5px; font-weight: 700; }
.person-card .role { font-size: 12.5px; color: var(--soft); margin-top: 2px; }
.person-card .note { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.person-card .row-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.chan-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 9px;
  border-radius: 6px; background: var(--grey-soft); font-size: 11.5px;
  font-weight: 600; color: var(--soft); max-width: 100%;
}
.chan-pill svg { width: 13px; height: 13px; flex: none; }
.chan-pill .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-pill .state {
  padding: 0 6px; border-radius: 8px; font-size: 9.5px; font-weight: 700;
  background: var(--amber-soft); color: var(--amber);
}
.chan-pill .state.ok { background: var(--green-soft); color: var(--green); }

/* O card agora e o proprio link: a area inteira leva a pesquisa daquela
   area, e nao so um botao dentro dela. */
.area-card {
  border: 1px dashed #ded9d1; border-radius: 9px; padding: 12px;
  display: flex; flex-direction: column; gap: 7px;
  text-decoration: none; color: inherit; cursor: pointer;
}
.area-card:hover { border-color: var(--orange); background: #fdf9f6; }
.area-card .s { display: flex; align-items: center; gap: 4px; }
.area-card .s svg { width: 11px; height: 11px; }
.area-card.filled { border-style: solid; border-color: var(--line); }
.area-card .t { font-size: 12.5px; font-weight: 700; }
.area-card .s { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

.kv { display: flex; flex-direction: column; gap: 9px; }
.kv .line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; text-align: right; }
.kv .v small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

.quick { display: flex; flex-wrap: wrap; gap: 7px; }

.timeline { display: flex; flex-direction: column; gap: 14px; }
.tl { display: flex; gap: 11px; }
.tl .marks { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); margin-top: 4px; }
.tl .dot.hot { background: var(--orange); }
.tl .line { width: 1px; flex-grow: 1; background: #ece8e1; }
.tl .t { font-size: 12.5px; font-weight: 600; }
.tl .s { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.tl .w { font-size: 11px; color: var(--pale); margin-top: 4px; }

.next-account {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px;
}
.next-account b { display: flex; align-items: center; gap: 7px; font-weight: 700; }

/* ------------------------------------------------------------- pesquisar */

.steps { display: flex; align-items: center; gap: 0; }
.step { display: flex; align-items: center; gap: 9px; flex-grow: 1; min-width: 0; }
.step .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.step .mark.ok { background: var(--green); }
.step .mark.ok svg { width: 12px; height: 12px; }
.step .mark.now { border: 2px solid var(--orange); }
.step .mark.now i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); display: block; }
.step .mark.off { border: 2px solid #ded9d1; }
.step .mark.off i { width: 7px; height: 7px; border-radius: 50%; background: #ded9d1; display: block; }
.step .t { font-size: 12.5px; font-weight: 700; }
.step .s { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.step-sep { width: 34px; height: 1px; background: #ece8e1; flex: none; }

.candidate { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.candidate .body { padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; }
.candidate .logo {
  width: 42px; height: 42px; border-radius: 8px; background: #eef2f6; color: var(--soft);
  display: flex; align-items: center; justify-content: center; flex: none;
  font-size: 11px; font-weight: 800;
}
.candidate .logo.ig { background: #f6f0f4; }
.candidate .name { font-size: 14.5px; font-weight: 700; }
.candidate .sub { font-size: 12.5px; color: var(--soft); margin-top: 3px; }
.candidate .url { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.candidate .why {
  display: flex; flex-direction: column; gap: 5px; margin-top: 11px;
  padding: 11px 13px; background: var(--wash); border-radius: 8px;
}
.candidate .why .h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--muted); text-transform: uppercase;
}
.candidate .why div { font-size: 12.5px; color: var(--soft); }
.candidate .foot {
  padding: 11px 16px; background: var(--wash); border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.candidate .foot .hint { font-size: 11.5px; color: var(--muted); }

.assist { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
          display: flex; align-items: center; gap: 12px; }
.assist .t { font-size: 14px; font-weight: 700; }
.assist .logo {
  width: 34px; height: 34px; border-radius: 8px; background: #eef2f6; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.assist .logo svg { width: 16px; height: 16px; }
.assist-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* -------------------------------------------------------------- pipeline */

.summary {
  flex: none; padding: 16px 20px 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.summary .box { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.summary .n { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.summary .l { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.summary .ufs { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.summary .ufs span { font-size: 11.5px; color: var(--soft); }
.summary .ufs b { font-weight: 700; }

.board {
  flex-grow: 1; min-height: 0; padding: 16px 20px 20px;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px;
}
.col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.col-head .t { font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.col-head .n { font-size: 12px; font-weight: 700; color: var(--muted); }
.col-rule { height: 3px; border-radius: 2px; background: #ded9d1; }
.col-rule.on { background: var(--orange); }

.mini {
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 12px; cursor: pointer; position: relative;
}
.mini:hover { border-color: var(--orange); }
/* Tirar a conta da própria fila. Aparece no hover: é uma saída, não um convite. */
.mini-x {
  position: absolute; top: 6px; right: 8px; font-size: 15px; line-height: 1;
  color: var(--pale); opacity: 0; transition: opacity .12s ease;
}
.mini:hover .mini-x { opacity: 1; }
.mini-x:hover { color: var(--orange-dark); }
/* De quem é a conta. Numa base compartilhada, isso evita trabalho repetido.
   Classe própria: `.who` já é o seletor de remetente, com moldura e seta. */
.mini .owner { font-size: 11px; color: var(--orange-dark); margin-top: 4px; font-weight: 600; }

.col-foot {
  font-size: 11px; color: var(--muted); text-align: center; padding: 6px 0 0;
}
.col-foot span { color: var(--orange-dark); cursor: pointer; text-decoration: underline; }
.mini .t { font-size: 13px; font-weight: 700; line-height: 1.25; }
.mini .p { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.mini .w { font-size: 11.5px; color: var(--soft); margin-top: 8px; }
.mini .f {
  display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
}
.mini .f svg { width: 13px; height: 13px; }
.mini .when { font-size: 10.5px; color: var(--pale); }

.col-empty {
  border: 1px dashed #ded9d1; border-radius: 9px; padding: 16px 12px;
  text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.5;
}

.parked {
  flex: none; padding: 0 20px 16px; display: flex; align-items: center; gap: 18px;
  font-size: 12px; color: var(--muted);
}
.parked b { color: var(--soft); font-weight: 700; }

/* --------------------------------------------------------------- ajustes */

.settings { padding: 18px 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.settings h1 { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
.settings .lead { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); }
.channel-row {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) 150px; gap: 14px;
  align-items: center; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; padding: 14px 16px;
}
.channel-row .t { font-size: 13.5px; font-weight: 700; }
.channel-row .a { font-size: 12.5px; font-weight: 600; }
.channel-row .d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.how {
  grid-column: 1 / -1; margin-top: 10px; padding: 11px 13px; background: var(--wash);
  border-radius: 8px; font-size: 12px; color: var(--soft); white-space: pre-wrap;
  line-height: 1.55; display: none;
}
.channel-row.open .how { display: block; }

/* ----------------------------------------------------------------- login */

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--paper);
}
.login {
  width: 340px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
}
.login .brand { margin-bottom: 6px; }
.login .brand svg { width: 34px; height: 34px; }
.login h1 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -0.015em; }
.login p { margin: 0; font-size: 12.5px; color: var(--muted); }
.login .err { font-size: 12.5px; color: #b3452e; }

/* ----------------------------------------------------------------- vário */

.muted { color: var(--muted); font-size: 12.5px; }
.tiny { font-size: 11.5px; color: var(--muted); }
.hidden { display: none !important; }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--orange-line);
        border-top-color: var(--orange); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; top: 50%; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: min(360px, calc(100vw - 32px));
  max-width: min(760px, calc(100vw - 32px));
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 650;
  line-height: 1.4; text-align: center;
  padding: 15px 19px; border: 1px solid rgba(255,255,255,.24); border-radius: 11px;
  box-shadow: 0 12px 34px rgba(16,28,40,.28);
  opacity: 0; transform: translate(-50%, calc(-50% + 8px)); transition: opacity .18s, transform .18s;
}
.toast.on { opacity: 1; transform: translate(-50%, -50%); }
.toast[data-tone="ok"] { background: #26734f; }
.toast[data-tone="critical"] { background: #b33a32; }
.toast[data-tone="info"] { background: #a66f12; }
.toast-icon {
  width: 23px; height: 23px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; border: 2px solid currentColor;
  border-radius: 50%; font-size: 14px; font-weight: 900; line-height: 1;
}
.toast-text { min-width: 0; }
.contact-line.invalid b { text-decoration: line-through; color: var(--muted); }
.toast .btn { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); color: #fff; }
.toast .btn:hover { border-color: #fff; background: rgba(255,255,255,.2); color: #fff; }

.rows::-webkit-scrollbar, .panel-body::-webkit-scrollbar { width: 9px; }
.rows::-webkit-scrollbar-thumb, .panel-body::-webkit-scrollbar-thumb {
  background: #e2ded6; border-radius: 6px; border: 3px solid #fff;
}

@media (max-width: 1200px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .account-body { grid-template-columns: minmax(0, 1fr); }
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- contatar */

.drawer-back {
  position: fixed; inset: 0; z-index: 50; background: rgba(16, 28, 40, .28);
  display: flex; justify-content: flex-end;
  animation: fade .14s ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  width: 620px; max-width: 96vw; height: 100%; background: #fff;
  border-left: 1px solid var(--line); display: flex; flex-direction: column;
  box-shadow: -14px 0 40px rgba(16, 28, 40, .12);
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(24px); } to { transform: translateX(0); } }

.drawer-head {
  flex: none; padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.drawer-channels {
  flex: none; padding: 12px 20px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.drawer-channels .chip[disabled] { opacity: .45; cursor: not-allowed; }
.drawer-body {
  flex-grow: 1; min-height: 0; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.drawer-foot {
  flex: none; padding: 13px 20px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 8px;
}

.notice {
  padding: 11px 13px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-line);
}
.notice.soft { background: var(--wash); color: var(--soft); border-color: var(--line); }

label.pill { user-select: none; }
label.pill input { accent-color: var(--orange); }

/* ---------------------------------------------------------------- score */

.scorebar { display: flex; align-items: center; gap: 14px; }
.panel .scorebar { margin: 14px 18px 0; padding: 12px 14px;
                   border: 1px solid var(--line); border-radius: 8px; background: #fff; }

.score {
  width: 46px; height: 46px; flex: none; border: 2px solid var(--grey);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--muted);
}
.score.small { width: 30px; height: 30px; font-size: 12.5px; border-width: 1.6px; }

details.why { flex: none; }
details.why summary {
  list-style: none; cursor: pointer; font-size: 11.5px; font-weight: 600;
  color: var(--muted); padding: 4px 9px; border: 1px solid var(--line);
  border-radius: 14px; white-space: nowrap;
}
details.why summary::-webkit-details-marker { display: none; }
details.why summary:hover { border-color: var(--border-strong); color: var(--ink); }
details.why[open] summary { border-color: var(--orange); color: var(--orange-dark); }
.why-body {
  position: absolute; right: 20px; z-index: 45; margin-top: 8px; min-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(16, 28, 40, .10);
}
.why-body div { display: flex; justify-content: space-between; gap: 14px;
                font-size: 12px; color: var(--soft); padding: 3px 0; }

/* Prioridade é o que se lê; o score fica de apoio, discreto. */
.prio-mark { display: flex; align-items: baseline; gap: 8px; flex: none; }
.prio-mark .dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.prio-mark .t { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.prio-mark .s { font-size: 11.5px; font-weight: 600; color: var(--pale); }
.score-inline { font-size: 11px; font-weight: 600; color: var(--pale); margin-left: 2px; }

/* A marca dentro da plataforma, com presença. */
.brand img, .brand svg { width: 40px; height: 40px; }
.brand .word { font-size: 17px; }
.brand .sub { font-size: 9.5px; }
.header { height: 64px; }
.login .brand svg { width: 46px; height: 46px; }
.login .ok { font-size: 12.5px; color: var(--green); }
.login a.tiny { color: var(--muted); }
.login a.tiny:hover { color: var(--orange-dark); }

.reco .top { gap: 8px; }
.reco h4 { flex: none; }
.reco-list { margin: 8px 0 0 16px; padding: 0; }
.reco-list li { font-size: 12px; color: var(--soft); line-height: 1.55; }
.reco-list li.warn { color: var(--amber); }
.reco-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px;
             flex-wrap: wrap; }

/* Campo de senha com o olho. Ver o que se digitou evita metade dos
   "minha senha não funciona". */
.pw { position: relative; display: flex; align-items: center; }
.pw .field { padding-right: 38px; }
.pw-eye {
  position: absolute; right: 6px; width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.pw-eye svg { width: 17px; height: 17px; }
.pw-eye:hover { background: var(--grey-soft); }
.pw-eye.on svg { stroke: var(--orange); }

/* ==========================================================================
   Descobrir empresas — o painel que traz quem o SIF não alcança.
   ========================================================================== */
.disc-form {
  display: grid; grid-template-columns: 1fr 1fr 70px auto; gap: 10px;
  align-items: end; margin: 14px 0 4px;
}
.disc-form label { display: flex; flex-direction: column; gap: 4px; }
.disc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.disc-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: #fff;
}
/* Empresa que já é conta fica visível, mas recuada: o olho vai para o que é novo. */
.disc-item.known { background: var(--wash); border-color: var(--line-soft); }
.disc-item .n { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.disc-item .d { font-size: 12px; color: var(--green); margin-top: 2px; }
.disc-item .s {
  font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.disc-links { display: flex; flex-direction: column; gap: 6px; }
.disc-links a {
  font-size: 12.5px; color: var(--soft); text-decoration: none;
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 10px;
  background: var(--wash);
}
.disc-links a:hover { border-color: var(--orange-line); background: var(--orange-soft); }

/* Escolher fonte e segmento é escolher em linguagem de negócio: o rótulo é a
   empresa que publica o dado, nunca o nome do adaptador. */
.disc-pick { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.disc-pick.two { grid-template-columns: 1fr 1fr; }
.disc-opt {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line-soft); border-radius: 9px; background: #fff;
  cursor: pointer; line-height: 1.35;
}
.disc-opt:hover { border-color: var(--orange-line); }
.disc-opt input { margin-top: 2px; accent-color: var(--orange); flex: none; }
.disc-opt span { display: flex; flex-direction: column; min-width: 0; }
.disc-opt b { font-size: 12.5px; font-weight: 600; }
.disc-opt i { font-size: 11.5px; color: var(--muted); font-style: normal; margin-top: 1px; }
/* Fonte que não pode rodar agora não some da tela: ela aparece com o motivo. */
.disc-opt.off { background: var(--wash); cursor: not-allowed; }
.disc-opt.off b { color: var(--muted); }

.disc-where {
  display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 10px; margin-top: 8px;
}
.disc-where label { display: flex; flex-direction: column; gap: 4px; }

.disc-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.disc-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 12px; cursor: pointer;
}
.disc-tag input { accent-color: var(--orange); }
.disc-tag:hover { border-color: var(--orange-line); }

.disc-adv { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.disc-adv summary {
  font-size: 12px; color: var(--soft); cursor: pointer; list-style: none;
  font-weight: 600; letter-spacing: .02em;
}
.disc-adv summary::before { content: "▸ "; color: var(--muted); }
.disc-adv[open] summary::before { content: "▾ "; }

.disc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px;
}
.disc-actions { display: flex; gap: 6px; }
.disc-scroll { overflow-x: auto; margin-top: 8px; }
.disc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.disc-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.disc-table td { padding: 8px; border-bottom: 1px solid var(--line-row); vertical-align: top; }
/* A revisão é uma leitura em linha: o nome e a atividade podem quebrar, o
   resto não. Sem isto a coluna de aderência — a que decide — sai da tela. */
.disc-table td:nth-child(2) { min-width: 190px; }
.disc-table td:nth-child(5) { max-width: 180px; }
.disc-table td:nth-child(4),
.disc-table td:nth-child(6),
.disc-table td:nth-child(7),
.disc-table td:nth-child(9) { white-space: nowrap; }
.disc-table td:nth-child(8) { min-width: 150px; }
.disc-table tr.known { background: var(--wash); }
.disc-table .n { font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.disc-table .s { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.disc-table .mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.disc-table input { accent-color: var(--orange); }
.disc-table .tag { margin-right: 3px; }

/* ==========================================================================
   Marcar conta — separar para pesquisar depois.

   Não é estágio nem prioridade: é o lembrete de quem está escolhendo o que
   pesquisar. Por isso é uma estrela, e não mais um seletor.
   ========================================================================== */
.mark {
  flex: none; cursor: pointer; color: var(--grey); font-size: 14px;
  line-height: 1; user-select: none; transition: color .12s ease;
}
.mark:hover { color: var(--orange); }
.mark.on { color: var(--orange); }
.mark.big { font-size: 19px; }
.btn.mark-btn { gap: 6px; }
.btn.mark-btn.on { border-color: var(--orange-line); background: var(--orange-soft); }
/* No quadro do pipeline, a estrela diz por que aquele cartão está ali. */
.mini .t .mark { margin-right: 4px; }

/* ==========================================================================
   Menu de quem está usando. Sair a um clique, de qualquer tela.
   ========================================================================== */
.user-menu { flex: none; }
.user-menu .avatar-user { border: none; cursor: pointer; font-family: inherit; }
.user-menu-panel {
  right: 0; left: auto; min-width: 226px; padding: 6px;
}
.user-menu-panel .who-head {
  padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.user-menu-panel .who-head .n { font-size: 13px; font-weight: 700; }
.user-menu-panel .who-head .e { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.user-menu-panel a {
  display: block; padding: 8px 10px; border-radius: 7px;
  font-size: 12.5px; color: var(--ink); text-decoration: none;
}
.user-menu-panel a:hover { background: var(--wash); }
/* Sair é destrutivo do ponto de vista da sessão: fica separado e marcado. */
.user-menu-panel a.out {
  color: var(--orange-dark); border-top: 1px solid var(--line-soft);
  border-radius: 0 0 7px 7px; margin-top: 4px; padding-top: 10px;
}
.user-menu-panel a.out:hover { background: var(--orange-soft); }

/* ==========================================================================
   Quem tem acesso. Numa base com dado pessoal de terceiros, a lista de quem
   entra é informação de segurança — fica à vista, não escondida.
   ========================================================================== */
.label .count {
  display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 9px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
  vertical-align: 1px;
}
.team-list { display: flex; flex-direction: column; gap: 8px; }
.team-row {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 12px;
  background: var(--wash);
}
.team-row .av {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ink);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: none; overflow: hidden;
}
.team-row .av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* O bloco da foto, em Meu perfil: o resultado ao lado do botão que o muda. */
.foto-row { display: flex; align-items: center; gap: 16px; }
.foto-atual {
  width: 72px; height: 72px; border-radius: 50%; background: var(--ink);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; flex: none; overflow: hidden;
}
.foto-atual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foto-acoes .btn { cursor: pointer; }
.team-row .n { font-size: 13px; font-weight: 600; }
.team-row .e { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.team-row > div:nth-child(2) { flex-grow: 1; }

/* Buscar tem de ter volta: o X aparece assim que há termo. */
.search { position: relative; }
.search.has-q input { padding-right: 32px; }
.search .search-clear { display: none; }
.search.has-q .search-clear { display: flex; }
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: none; background: none; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.search-clear:hover { background: var(--grey-soft); }
.search-clear svg { width: 12px; height: 12px; }

/* ==========================================================================
   Cabeçalho que ordena.
   ========================================================================== */
.thead .th {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  user-select: none; border-radius: 5px; padding: 2px 4px; margin: -2px -4px;
}
.thead .th:hover { background: var(--grey-soft); color: var(--ink); }
.thead .th.on { color: var(--ink); font-weight: 700; }
.thead .th[style*="center"] { justify-content: center; }
/* A seta diz o sentido: para cima é do menor para o maior. */
.thead .arrow {
  width: 0; height: 0; flex: none;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-bottom: 5px solid var(--orange);
}
.thead .arrow.down {
  border-bottom: none; border-top: 5px solid var(--orange);
}

/* Botão de decisão dentro de uma linha de contato. */
.btn.tiny-btn { height: 24px; padding: 0 9px; font-size: 11.5px; }

/* ==========================================================================
   Cabeçalho de página e relatório por estado.
   ========================================================================== */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 20px 20px 0;
}
.page-head h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.page-head .lead { font-size: 13px; color: var(--muted); }

.rep-head, .rep-row {
  display: grid; grid-template-columns: 64px 1.6fr 1fr 1fr 1fr;
  gap: 10px; align-items: center;
}
.rep-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: 0 8px 8px;
  border-bottom: 1px solid var(--line);
}
.rep-row {
  padding: 9px 8px; border-bottom: 1px solid var(--line-row);
  text-decoration: none; color: var(--ink);
}
.rep-row:hover { background: var(--wash); }
.rep-row .uf { font-weight: 700; font-size: 13px; }
.rep-row .v { font-size: 12.5px; color: var(--soft); display: flex; align-items: center; gap: 8px; }
.rep-row .v b { font-size: 13px; color: var(--ink); min-width: 26px; }
.rep-row .bar {
  flex-grow: 1; height: 5px; border-radius: 3px; background: var(--line-soft);
  overflow: hidden;
}
.rep-row .bar i { display: block; height: 100%; background: var(--orange); }

/* Linha de apoio do cartão: diz sobre QUEM o número fala. Sem ela, "4 com
   sócio identificado" parecia falar da base inteira. */
.summary .sub { font-size: 11.5px; color: var(--pale, var(--grey)); margin-top: 5px; }
/* Conta parada no meio do processo é problema, e problema tem cor. */
.summary .box.alert { border-color: var(--amber-line); background: var(--amber-soft); }
.summary .box.alert .n { color: var(--amber); }

/* ==========================================================================
   Revisar depois — o que a busca ampla trouxe e o perfil não sustentou.

   Não é lixeira: é uma gaveta com o motivo escrito e a volta a um clique.
   ========================================================================== */
.rev-row { grid-template-columns: minmax(0, 1fr) 150px 260px 230px; align-items: start; }
.rev-why {
  font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-row .btn { margin-left: 6px; }

/* ==========================================================================
   Excluir, arquivar e o quadro vazio.
   ========================================================================== */

/* Excluir apaga. A cor diz isso antes do texto — e o botão fica discreto até
   a intenção existir, para não convidar ao clique. */
.btn.danger { border-color: var(--line); color: #b3452e; }
.btn.danger:hover { border-color: #e0a99c; background: #fdf2ef; color: #93361f; }
.btn.danger svg { stroke: #b3452e; }

.account-decide {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.account-decide .btn svg { width: 13px; height: 13px; }

/* Pipeline vazio não é erro: é o estado normal de quem ainda não começou.
   Dizer o que faz uma conta entrar vale mais que uma coluna de caixas vazias. */
.board-empty {
  margin: 18px 20px; padding: 44px 24px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.board-empty .t { font-size: 15px; font-weight: 700; }
.board-empty .s { font-size: 13px; color: var(--muted); max-width: 460px; line-height: 1.5; }
.board-empty .btn { margin-top: 8px; }

/* ==========================================================================
   Ajustes: a assinatura e a gaveta do arquivo.
   ========================================================================== */

/* A assinatura é texto de várias linhas e precisa parecer o que é: um bloco
   pronto para colar, em largura de leitura. */
.field.sig {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.55; height: auto; padding: 10px 12px;
  max-width: 620px; resize: vertical;
}

.arquivo-row {
  display: flex; align-items: center; gap: 13px; padding: 15px 18px;
  cursor: pointer;
}
.arquivo-row:hover { border-color: var(--border-strong); background: var(--wash); }
.arquivo-row svg { width: 19px; height: 19px; flex: none; }
.arquivo-row .t { font-size: 13.5px; font-weight: 700; }
.arquivo-row .d { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ==========================================================================
   Descobrir: procurar uma empresa pelo nome.
   ========================================================================== */
.por-nome { display: flex; gap: 8px; margin-top: 8px; }
.por-nome .field { flex-grow: 1; }

.disc-rule {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 4px;
  font-size: 11.5px; color: var(--pale); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700;
}
.disc-rule::before, .disc-rule::after {
  content: ""; height: 1px; background: var(--line-soft); flex-grow: 1;
}

/* Botão dentro de uma célula do grid não é campo: não pode esticar como um. */
.form-grid label > .btn { align-self: flex-start; }
.form-grid label[style*="flex-end"] > .btn { align-self: flex-end; }
.field.sig { width: 100%; }

/* Segundo valor da mesma dimensão: cola no primeiro, sem repetir o rótulo. */
.token.cont { margin-left: -4px; }

/* Botão que é só o ícone: quadrado, discreto, sem convidar ao clique. */
.btn.icon-only { padding: 0; width: 30px; justify-content: center; }
.btn.icon-only svg { width: 14px; height: 14px; }

/* ------------------------------------------------- assinatura de e-mail */

/* A caixa onde a assinatura e COLADA, nao digitada. E um `contenteditable`
   de proposito: so ele recebe o HTML de verdade que o Gmail poe na area de
   transferencia -- tabela, logo, fonte, cor e link. Um `textarea` receberia
   o mesmo conteudo achatado em texto, que e exatamente o defeito que isto
   existe para corrigir. */
.sig-editor {
  min-height: 132px; max-height: 340px; overflow: auto;
  border: 1px solid var(--line); border-radius: 9px;
  padding: 14px 16px; background: #fff;
  font-size: 13px; line-height: 1.5; color: var(--ink);
}
.sig-editor:focus { outline: none; border-color: var(--orange); }
.sig-editor:empty::before {
  content: "Cole aqui a sua assinatura (Ctrl+V)";
  color: var(--pale);
}
.sig-editor img { max-width: 100%; height: auto; }
.sig-editor table { border-collapse: collapse; }

.sig-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}

/* A mesma assinatura na gaveta de contato: como ela vai sair, e so isso --
   sem edicao, para ninguem estragar sem querer o que ja esta certo. */
.sig-preview {
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 12px 14px; margin-top: 4px; background: var(--wash);
  font-size: 13px; line-height: 1.5; max-height: 210px; overflow: auto;
}
.sig-preview img { max-width: 100%; height: auto; }
.sig-preview pre {
  margin: 0; font: inherit; white-space: pre-wrap; color: var(--soft);
}

/* Enquanto o editor busca as imagens que a assinatura aponta la fora. */
.sig-editor.busy { opacity: .55; pointer-events: none; }
.sig-editor img { max-width: 100%; height: auto; }

/* -------------------------------------------------- filtros sempre abertos */

/* Segmento, origem e regiao ficam a vista: sao os recortes que a pessoa troca
   varias vezes por dia, e um menu para cada um era um clique a mais em todos
   eles. O resto continua atras do botao "Filtrar". */
.filters.open-row {
  gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--line-soft);
}
/* As tres perguntas do dia ficam juntas; o que conta e o que comanda vai
   para a direita, com um respiro que separa os dois grupos. */
.filters.open-row .open-facet + .open-facet { margin-left: -4px; }
.filters.open-row .tiny { flex: none; }
.filters.applied-row { padding-top: 8px; padding-bottom: 8px; min-height: 0; }
.open-facet .chip { gap: 8px; padding-right: 8px; }
.open-facet .chip .n {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.open-facet .chip.on .n { color: var(--orange-dark); }
.open-facet .chip .v { font-size: 12.5px; color: var(--ink); max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-facet .chip svg { width: 11px; height: 11px; transform: rotate(90deg); }
.open-facet .dropdown-menu { min-width: 240px; padding: 5px; }
.open-facet .fp-opts { max-height: 320px; }

/* ------------------------------------------------------- pipeline: pessoas */

/* Os donos do pipeline sao um filtro, nao um subtitulo: colados no titulo,
   "Todos" parecia parte dele. Ficam a uma respiracao, e alinhados com a
   coluna de tudo que vem depois. */
.pipe-owners { display: flex; align-items: center; gap: 8px; padding: 14px 20px 0; }
.pipe-owners .chip b { margin-left: 5px; opacity: .7; }

/* A conta de outra pessoa aparece -- e aparece TRANCADA. Ver o que a equipe
   esta fazendo e o ponto; mexer no que e dela, nao. */
.mini { position: relative; }
.mini.locked {
  cursor: not-allowed; background: repeating-linear-gradient(
    135deg, var(--wash), var(--wash) 7px, #f3efe9 7px, #f3efe9 14px);
  border-style: dashed; color: var(--muted);
}
.mini.locked .t { color: var(--muted); display: flex; align-items: center; gap: 5px; }
.mini.locked:hover { background: repeating-linear-gradient(
    135deg, var(--wash), var(--wash) 7px, #f3efe9 7px, #f3efe9 14px); }

.mini-out {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  border: 0; border-radius: 5px; background: transparent; cursor: pointer;
  opacity: 0; display: flex; align-items: center; justify-content: center;
}
.mini-out svg { width: 11px; height: 11px; }
.mini:hover .mini-out { opacity: 1; }
.mini-out:hover { background: var(--line-soft); }

/* O menu no RODAPE da gaveta abre para CIMA. Abrindo para baixo ele nascia
   fora da tela: o botao ja esta na ultima linha da gaveta, e o menu ficava
   visivel para o CSS e inalcancavel para o dedo. */
.drawer-foot .dropdown-menu {
  top: auto; bottom: 40px; left: auto; right: 0; min-width: 250px;
}
.sig-editor.over { border-color: var(--orange); background: #fdf7f3; }

/* A volta. Duas saidas, na ordem em que a cabeca pensa: "desfaz o ultimo
   passo" e "me leva para casa". Toda tela que nao e a lista tem as duas. */
/* A volta: um controle na linha do titulo, e nao uma faixa de rotulos em
   cima dele. Ver o comentario do macro em _icons.html. */
.page-title { display: flex; align-items: center; gap: 10px; }
.page-title h1 { margin: 0; }
.voltar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; text-decoration: none;
}
.voltar:hover { border-color: var(--pale); background: var(--wash); }
.voltar svg { width: 15px; height: 15px; }

/* As tres estrategias de assinatura. Sao exclusivas -- por isso radio, e nao
   caixa de marcar: nao existe "as duas". */
.sig-modos { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.sig-modo {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 9px; font-size: 13px;
  cursor: pointer; background: #fff;
}
.sig-modo:hover { border-color: var(--pale); }
.sig-modo.on { border-color: var(--orange); background: #fdf7f3; font-weight: 600; }
.sig-modo input { accent-color: var(--orange); }

/* Campo que existe para ser lido, nao editado: os perfis da empresa. */
.field.fixo {
  background: var(--grey-soft); color: var(--muted); cursor: default;
  border-color: var(--line-soft);
}
.field.fixo:focus { border-color: var(--line-soft); }

/* A faixa de utilidades da ficha: sair a esquerda, agir a direita.

   A volta ficava empilhada logo em cima do nome da conta e as duas coisas
   brigavam pelo mesmo olhar -- e o nome, que e o que a pessoa veio ler,
   perdia. Numa faixa propria, com uma linha separando, o nome ganha a
   largura inteira. */
.account-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
/* O nome divide a faixa com as ações: ele cresce, elas não encolhem. Nome
   comprido quebra em duas linhas dentro do próprio bloco em vez de espremer
   os botões -- razão social de frigorífico costuma ser longa. */
.account-nome {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  min-width: 0; flex: 1 1 auto;
}
/* A identidade da conta: consulta, não título. Um degrau abaixo do nome. */
.account-info { display: flex; align-items: flex-start; gap: 20px; }
/* As ações não encolhem: quem cede espaço para nome comprido é o nome, que
   quebra linha. Botão espremido vira alvo que erra. */
.account-bar .select { height: 32px; flex: none; }
.account-bar .btn { height: 32px; flex: none; }
.account-bar .dropdown { flex: none; }
.account-head .account-title { margin-top: 0; }

/* =========================================================================
   CELULAR
   =========================================================================
   Tudo daqui para baixo vive dentro de uma media query e so entra abaixo de
   760px: a tela de trabalho, que e onde a ferramenta e usada o dia inteiro,
   nao muda um pixel.

   O que quebrava: o cabecalho somava marca + menu + busca de 280px + dois
   botoes + seletor + avatar numa linha so, e a lista era uma grade de seis
   colunas fixas. Nenhum dos dois cabe em 390px, entao o navegador desistia e
   diminuia a pagina inteira -- dai a sensacao de "desformatado".

   A resposta nao e encolher: e mudar a forma. O cabecalho vira duas linhas,
   a lista vira cartao de duas linhas, e o painel lateral da lugar ao toque
   que abre a ficha inteira.
   ========================================================================= */

@media (max-width: 760px) {

  /* ------------------------------------------------------------ moldura */
  /* Em telefone a pagina rola inteira. O quadro fixo de altura da janela
     existe para a barra de acao do painel ficar sempre a vista -- e nao ha
     painel aqui. */
  .shell.fixed { height: auto; overflow: visible; }
  .shell.fixed .split { overflow: visible; }
  .rows { overflow-y: visible; }

  /* ---------------------------------------------------------- cabecalho */
  .header:not(.pesquisa-head) {
    height: auto; flex-wrap: wrap; gap: 10px; row-gap: 8px;
    padding: 10px 14px; position: static;
  }
  .header .grow { display: none; }
  .brand { flex: none; }
  .brand svg { width: 30px; height: 30px; }
  .brand .word { font-size: 15px; }
  .brand .sub { font-size: 8.5px; }
  /* A busca ganha a linha inteira: e o atalho mais usado no celular. */
  .search { order: 5; flex: 1 0 100%; }
  .search input { width: 100%; }
  /* O menu rola de lado em vez de estourar a largura. */
  .nav {
    order: 6; flex: 1 0 100%; gap: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  /* Descobrir e Nova conta saem do cabecalho no telefone: as duas abrem
     paineis grandes e sao trabalho de mesa. O que sobra -- marca, quem
     escreve e o avatar -- cabe numa linha, que e o que evita o avatar cair
     sozinho numa segunda. */
  .header:not(.pesquisa-head) > .btn { display: none; }
  .who {
    max-width: 132px; font-size: 12px; height: 30px; padding: 0 22px 0 8px;
    margin-left: auto;
  }
  .user-menu { flex: none; }
  .avatar-user { width: 28px; height: 28px; font-size: 10.5px; }

  /* ------------------------------------------------------------ filtros */
  .filters { padding: 7px 14px; flex-wrap: wrap; min-height: 0; gap: 8px; }
  .filters .applied { gap: 6px; }
  .filters.open-row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 14px; gap: 8px;
  }
  .filters.open-row::-webkit-scrollbar { display: none; }
  .filters.open-row .grow, .filters.open-row > .tiny { display: none; }
  .open-facet .chip { flex: none; }
  .open-facet .chip .v { max-width: 110px; }
  .filter-menu .dropdown-menu { width: calc(100vw - 28px); right: -6px; }

  /* ------------------------------------------------ lista vira cartao */
  .split { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 16px; gap: 12px; }
  /* O painel lateral nao cabe -- e nao precisa: tocar na conta abre a ficha
     inteira, que e a mesma informacao com espaco para respirar. */
  #painel { display: none; }
  .thead { display: none; }
  .grid-row.row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px; padding: 12px 14px; align-items: start;
  }
  /* Porte e Pessoas saem do cartao: no telefone o que decide um toque e o
     nome, o segmento, por onde da para falar e em que pe esta. */
  .row > *:nth-child(3), .row > *:nth-child(4) { display: none; }
  .row > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .row > *:nth-child(6) { grid-column: 2; grid-row: 1; text-align: right; font-size: 12px; }
  .row > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .row > *:nth-child(5) { grid-column: 2; grid-row: 2; justify-content: flex-end; }
  .row .name { white-space: normal; }
  .card-head { padding: 11px 14px; }

  /* -------------------------------------------------------------- ficha */
  .account-head { padding: 12px 14px 0; }
  .account-bar { flex-wrap: wrap; gap: 8px; row-gap: 10px; padding-bottom: 10px; }
  .account-bar .grow { flex-basis: 100%; height: 0; }
  .account-bar .select, .account-bar .btn { height: 34px; }
  .account-bar .btn.primary { flex: 1; }
  .account-title { font-size: 20px; }
  .account-body { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 22px; }
  .people-grid { grid-template-columns: minmax(0, 1fr); }
  .area-grid { grid-template-columns: minmax(0, 1fr); }
  .tabs { overflow-x: auto; margin-top: 12px; }
  .tabs a { white-space: nowrap; padding: 9px 11px; }
  .kv .line { flex-wrap: wrap; }

  /* ----------------------------------------------------------- pipeline */
  .page-head { padding: 14px 14px 0; flex-wrap: wrap; align-items: center; }
  .summary { padding: 12px 14px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pipe-owners { padding: 12px 14px 0; overflow-x: auto; }
  .pipe-owners .chip { flex: none; }
  /* O quadro rola de lado, com a coluna larga o bastante para o cartao ser
     legivel. Espremer sete colunas em 390px nao mostra pipeline nenhum. */
  .board {
    grid-template-columns: repeat(7, 78vw); overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding: 12px 14px 16px;
  }
  .parked { padding: 0 14px 14px; flex-wrap: wrap; gap: 12px; }
  .board-empty { padding: 30px 18px; }

  /* ------------------------------------------------------------ ajustes */
  .settings { padding: 12px 14px 24px; }
  .settings h1 { font-size: 21px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid label[style*="span 2"] { grid-column: auto !important; }
  .sig-actions { gap: 8px; }
  .sig-actions .btn, .sig-actions label.btn { flex: 1 1 auto; justify-content: center; }
  .team-row { flex-wrap: wrap; }

  /* ------------------------------------------------------------ gaveta */
  .drawer { width: 100vw; max-width: 100vw; border-left: 0; }
  .drawer-head, .drawer-body, .drawer-foot { padding-left: 14px; padding-right: 14px; }
  .drawer-channels { overflow-x: auto; padding-left: 14px; padding-right: 14px; }
  .drawer-channels .chip { flex: none; }
  .drawer-foot { flex-wrap: wrap; gap: 8px; }
  .drawer-foot .btn.primary { flex: 1; }

  /* -------------------------------------------------------- fora da fila */
  .rev-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rev-row .cell:last-child { text-align: left; }
  .page-head + .filters { margin: 0 14px; }

  /* --------------------------------------------------------------- geral */
  .toast { left: 50%; right: auto; top: 50%; bottom: auto; width: calc(100vw - 24px); }
  .modal, .disc-wrap { width: 100vw; max-width: 100vw; }
}

/* ---------------------------------------------------- pesquisa: desenho */

/* A volta da pesquisa em uma peca so, como nas outras telas. No computador
   ela continua a esquerda do titulo, exatamente como estava. */
/* O titulo da pesquisa carrega a volta ao lado -- mesma regra do resto. */
.pesquisa-titulo { display: flex; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  /* Tres andares: por onde sair, o que se esta pesquisando, e o que fazer.
     Espremer os tres numa linha so deixava o titulo colado nos links. */
  .pesquisa-head {
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 12px 14px !important; height: auto;
  }
  .pesquisa-titulo > div:first-child { font-size: 17px !important; }
  .pesquisa-acoes { display: flex; }
  .pesquisa-acoes .btn { flex: 1; justify-content: center; }
  .account-body { padding: 12px 14px 22px !important; }
  /* Os passos da pesquisa empilham: lado a lado, em 390px, cada um sobrava
     uns 90px e o texto virava uma coluna de uma palavra. */
  .steps { flex-direction: column; align-items: stretch; gap: 10px; }
  .step-sep { display: none; }
  /* O candidato encontrado: o rodapé de decisão vira uma linha inteira, com
     os botões dividindo a largura -- é onde o dedo vai. */
  .candidate .body { flex-wrap: wrap; gap: 10px; }
  .candidate .body > a.btn { width: 100%; justify-content: center; }
  .candidate .foot { flex-wrap: nowrap; gap: 8px; }
  .candidate .foot .btn { flex: 1; justify-content: center; padding: 0 8px; }
  .candidate .url { font-size: 11.5px; }
  /* O frame de caminho empilha: logo e título em cima, links embaixo, cada
     um ocupando a linha -- rótulo de link com nome de pessoa não cabe ao
     lado do título em 390px. */
  .assist { flex-wrap: wrap; gap: 10px; }
  .assist .grow { display: none; }
  .assist-links { width: 100%; justify-content: stretch; flex-direction: column; }
  .assist-links .btn { width: 100%; justify-content: space-between; }
  .area-grid { gap: 8px; }
}