/* ============================================================================
   AGIO · Parceiros — folha de estilo única
   Contrato: index.html. Só existe aqui o que existe lá.

   Superfície de PRODUTO (ferramenta de trabalho), não de marca:
   90% neutro, cor só para ação e estado, uma família tipográfica, densidade alta.
   A marca vive na moldura (topo navy + logo vetorial) e na cor de ação.

   Vocabulário gerado pelo JS (não está no HTML, mas o CSS já espera):
     tr.linha    linha da tabela · .sel quando a ficha dela está aberta
     .card       cartão do kanban (só no kanban) · [draggable] no computador
     .col        coluna do kanban · .col-topo cabeçalho grudento dela
     .col.alvo   coluna sob o card sendo arrastado
     .ic         ícone do sprite (24×24, herda cor e tamanho)
     .ic-tipo    ícone do tipo de parceiro, pintado por --cor-tipo
     .selo       pílula de estado (texto + cor, nunca cor sozinha)
     .selo-parado / .selo-bom / .selo-neutro
     .editavel   campo que edita no lugar dentro de #fichaCampos
     .salvando   estado otimista (some o clique, não some a linha)
     .erro       o servidor recusou
     .pino       marcador do mapa (divIcon do Leaflet)
     .oculto-visual  só para leitor de tela
   Qualquer elemento com data-tipo="..." já ganha --cor-tipo sozinho.
   ========================================================================== */

/* ── fonte ───────────────────────────────────────────────────────────────────
   Uma família para tudo dentro da ferramenta. Numeral tabular ligado no corpo:
   é o que faz coluna de número parar de dançar de linha para linha. */
@font-face{
  font-family:'IBM Plex Sans';
  src:url('assets/ibm-plex-sans.woff2') format('woff2');
  font-weight:100 700; font-style:normal; font-display:swap;
}

/* ── variáveis ───────────────────────────────────────────────────────────── */
:root{
  /* moldura da marca */
  --navy:#13294c;
  --navy-2:#1d3c68;          /* hover dentro do navy */
  --navy-borda:#2c4d80;
  --creme:#f6ecd2;           /* só texto/logo sobre navy */
  --mostarda:#feb01c;        /* ação principal + selecionado. Em mais nada. */
  --mostarda-fundo:#fff6e2;
  --mostarda-borda:#e59d0c;  /* borda do botão primário */
  --mostarda-clara:#ffc04a;  /* hover do botão primário */
  --feito:#e6e4dd;           /* etapa já cumprida na trilha */

  /* área de trabalho — neutra */
  --canvas:#f7f7f5;
  --superficie:#ffffff;
  --superficie-2:#faf9f7;    /* cabeçalho de tabela, linha alternada */
  --coluna:#f1efe8;          /* fundo de coluna do kanban */
  --borda:#e3e2dd;           /* separador de linha (decorativo, não identifica controle) */
  --borda-forte:#bdbcb5;     /* borda de botão — o rótulo visível é quem identifica */
  --borda-campo:#8f8e88;     /* borda que IDENTIFICA um campo: 3,3:1 (WCAG 1.4.11).
                                #a9a8a2 dava 2,4:1 e reprovou na medição. */
  --txt:#1b1c1e;
  --txt-2:#63656b;           /* 4,9:1 sobre branco e sobre o canvas */

  /* estado — sempre com texto junto (WCAG 1.4.1). Sem vermelho (regra da marca). */
  --aviso-txt:#854f0b; --aviso-fundo:#faeeda; --aviso-borda:#e0b877;
  --bom-txt:#3b6d11;   --bom-fundo:#eaf3de;
  --neutro-txt:#444441; --neutro-fundo:#f1efe8;

  /* cor por tipo — reforço do ícone, nunca a informação sozinha */
  --c-influenciador:#b07800;   /* mostarda escurecida: 4,6:1 sobre branco */
  --c-pdv:#2f7d3f;
  --c-evento:#b3620f;
  --c-distribuidora:#3d6b9e;

  /* espaçamento base 4 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --r:6px;

  /* alturas fixas — a ficha se ancora nelas com calc() */
  --h-topo:52px; --h-visoes:40px; --h-ferramentas:48px;
  --h-linha:44px;

  /* escala fixa em rem, razão ~1.15. Produto não usa tipografia fluida. */
  --fs-mini:0.75rem;   /* 12px — metadado */
  --fs:0.875rem;       /* 14px — corpo */
  --fs-md:1rem;        /* 16px */
  --fs-lg:1.25rem;     /* 20px — nome na ficha */

  --t:140ms;
  --sombra-1:0 1px 2px rgba(27,28,30,.07);
  --sombra-ficha:-8px 0 24px rgba(27,28,30,.13);
  --sombra-dlg:0 12px 32px rgba(27,28,30,.22);
}

/* ── base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html,body{height:100%; overflow-x:hidden}
body{
  margin:0;
  overflow-y:hidden;          /* quem rola é #centro e #ficha, nunca a página */
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:var(--fs);
  font-variant-numeric:tabular-nums;
  line-height:1.45;
  color:var(--txt);
  background:var(--navy);
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0; font-weight:500; line-height:1.25}
h1{font-size:var(--fs-lg)}
h2{font-size:var(--fs-md)}
h3{font-size:var(--fs-mini); color:var(--txt-2); font-weight:500}
p{margin:0}
ol{margin:0; padding:0; list-style:none}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:var(--txt); font-variant-numeric:inherit}
button{cursor:pointer}
table{border-collapse:collapse; width:100%}

.oculto-visual{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:2px}
#topo :focus-visible,#login :focus-visible{outline-color:var(--mostarda)}
/* Anel PARA DENTRO nos dois grupos que recortam: `#vistas` é `overflow:hidden` e
   `#visoes` é `overflow-x:auto`, e os botões têm 1px de folga onde o anel de 2px
   com afastamento de 2px precisa de 4. Medido: o anel sumia justamente nos 7
   controles que trocam o que a tela mostra. Para dentro ele cabe sempre. */
#vistas :focus-visible,#visoes :focus-visible{outline-offset:-2px}

/* sprite fora de tela: existe para o <use>, não para ser visto */
#sprite{position:absolute; width:0; height:0; overflow:hidden}
.ic{
  width:1.15em; height:1.15em; flex:0 0 auto;
  vertical-align:-0.19em; fill:none; pointer-events:none;
}

/* ── a logo real (Barbaro), recolorível por máscara ──────────────────────── */
.marca{
  display:block; flex:0 0 auto;
  width:96px; height:28px;
  background:var(--creme);
  -webkit-mask:url('assets/agio-logo.svg') no-repeat center/contain;
  mask:url('assets/agio-logo.svg') no-repeat center/contain;
}
.marca-grande{width:168px; height:48px; margin:0 auto var(--e4)}

/* ── botões ──────────────────────────────────────────────────────────────── */
.btn-primario,.btn-secundario,.btn-fantasma{
  display:inline-flex; align-items:center; gap:var(--e2);
  min-height:36px; padding:0 var(--e3);
  border-radius:var(--r); border:1px solid transparent;
  font-weight:500; white-space:nowrap;
  transition:background var(--t) ease, border-color var(--t) ease;
}
.btn-primario{background:var(--mostarda); border-color:var(--mostarda-borda); color:var(--txt)}
.btn-primario:hover{background:var(--mostarda-clara)}
.btn-secundario{background:var(--superficie); border-color:var(--borda-forte)}
.btn-secundario:hover{background:var(--superficie-2)}
.btn-fantasma{background:none; color:var(--txt-2)}
.btn-fantasma:hover{background:rgba(27,28,30,.06); color:var(--txt)}
.btn-claro{color:var(--creme)}
.btn-claro:hover{background:var(--navy-2); color:#fff}
button[disabled]{opacity:.55; cursor:default}

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════════════════════════════════ */
#login{
  position:fixed; inset:0; display:grid; place-items:center;
  padding:var(--e4); background:var(--navy);
}
#loginForm{
  width:100%; max-width:340px;
  display:flex; flex-direction:column; gap:var(--e2);
  padding:var(--e5); border-radius:12px;
  background:var(--superficie); box-shadow:var(--sombra-dlg);
}
#loginForm .marca{background:var(--navy)}
#loginForm h1{text-align:center; margin-bottom:var(--e3)}
#loginForm label{font-size:var(--fs-mini); color:var(--txt-2)}
#loginForm input{
  min-height:44px; padding:0 var(--e3);
  border:1px solid var(--borda-campo); border-radius:var(--r);
  background:var(--superficie);
}
#loginForm .btn-primario{justify-content:center; min-height:44px; margin-top:var(--e2)}
#loginForm .btn-fantasma{justify-content:center}
#loginMsg:not(:empty){
  padding:var(--e2) var(--e3); border-radius:var(--r);
  background:var(--aviso-fundo); color:var(--aviso-txt); font-size:var(--fs-mini);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOLDURA
   ══════════════════════════════════════════════════════════════════════════ */
#app:not([hidden]){
  position:relative;                 /* âncora da #ficha */
  display:flex; flex-direction:column;
  height:100svh; overflow:hidden;
  background:var(--canvas);
}

#topo{
  flex:0 0 var(--h-topo);
  display:flex; align-items:center; gap:var(--e3);
  padding:0 var(--e3);
  background:var(--navy); color:var(--creme);
}
.busca{
  position:relative; flex:1 1 auto; max-width:420px;
  display:flex; align-items:center;
}
.busca .ic{position:absolute; left:10px; color:var(--txt-2)}
#busca{
  width:100%; min-height:34px;
  padding:0 var(--e3) 0 32px;
  border:1px solid var(--borda-campo); border-radius:var(--r);
  background:var(--superficie);
}
#busca::placeholder{color:var(--txt-2)}
#busca::-webkit-search-cancel-button{cursor:pointer}

/* abas de visão */
#visoes{
  flex:0 0 var(--h-visoes);
  display:flex; align-items:stretch; gap:var(--e1);
  padding:0 var(--e3);
  background:var(--superficie); border-bottom:1px solid var(--borda);
  overflow-x:auto; scrollbar-width:none;
}
#visoes::-webkit-scrollbar{display:none}
#visoes button{
  display:flex; align-items:center; gap:6px;
  padding:0 var(--e3);
  border:0; border-bottom:2px solid transparent;
  background:none; color:var(--txt-2); white-space:nowrap;
}
#visoes button:hover{color:var(--txt)}
#visoes button[aria-pressed="true"]{
  color:var(--txt); font-weight:500; border-bottom-color:var(--navy);
}
#visoes b{
  font-weight:400; font-size:var(--fs-mini); color:var(--txt-2);
  padding:1px 6px; border-radius:10px; background:var(--neutro-fundo);
}
#visoes button[aria-pressed="true"] b{background:var(--mostarda-fundo); color:var(--aviso-txt)}

/* barra de ferramentas */
#ferramentas{
  flex:0 0 var(--h-ferramentas);
  display:flex; align-items:center; gap:var(--e3);
  padding:0 var(--e3);
  border-bottom:1px solid var(--borda);
}
#vistas{display:flex; border:1px solid var(--borda-forte); border-radius:var(--r); overflow:hidden}
#vistas button{
  display:flex; align-items:center; gap:6px;
  min-height:32px; padding:0 var(--e3);
  border:0; border-left:1px solid var(--borda-forte);
  background:var(--superficie); color:var(--txt-2);
}
#vistas button:first-child{border-left:0}
#vistas button:hover{background:var(--superficie-2); color:var(--txt)}
#vistas button[aria-pressed="true"]{background:var(--navy); color:var(--creme); font-weight:500}

.campo-linha{display:flex; align-items:center; gap:var(--e2)}
.campo-linha label{font-size:var(--fs-mini); color:var(--txt-2)}
#tipo{
  min-height:32px; padding:0 var(--e2);
  border:1px solid var(--borda-campo); border-radius:var(--r);
  background:var(--superficie);
}
#resumo{
  margin-left:auto; font-size:var(--fs-mini); color:var(--txt-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#resumo b{color:var(--txt); font-weight:500}
#btnExportar{min-height:32px; font-size:var(--fs-mini)}

/* ══════════════════════════════════════════════════════════════════════════
   CENTRO — uma vista por vez, largura inteira
   ══════════════════════════════════════════════════════════════════════════ */
#centro{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.vista{flex:1 1 auto; min-height:0; overflow:auto}
#mapaVista{overflow:hidden}
#mapa{width:100%; height:100%}

/* ── TABELA ──────────────────────────────────────────────────────────────── */
#tabela{background:var(--superficie)}
#tabela thead th{
  position:sticky; top:0; z-index:2;
  height:36px; padding:0 var(--e3);
  text-align:left; font-size:var(--fs-mini); font-weight:500; color:var(--txt-2);
  background:var(--superficie-2); border-bottom:1px solid var(--borda);
}
.col-tipo{width:40px; padding-right:0 !important}
.col-local{width:18%}
.col-etapa{width:15%}
.col-volume{width:11%; text-align:right !important}
.col-fato{width:11%; text-align:right !important}
/* o volume é número de negócio: peso de texto normal, não de metadado */
tr.linha .volume{text-align:right; white-space:nowrap; font-weight:500}

tr.linha{height:var(--h-linha); cursor:pointer; border-bottom:1px solid var(--borda)}
tr.linha:nth-child(even){background:var(--superficie-2)}
tr.linha:hover{background:var(--mostarda-fundo)}
tr.linha.sel{background:var(--mostarda-fundo); box-shadow:inset 3px 0 0 var(--mostarda)}
tr.linha td{padding:0 var(--e3); vertical-align:middle}
tr.linha td:first-child{padding-right:0; width:40px}
tr.linha .nome{font-weight:500}
tr.linha .local,tr.linha .fato{color:var(--txt-2); font-size:var(--fs-mini)}
tr.linha .fato{text-align:right; white-space:nowrap}
.ic-tipo{color:var(--cor-tipo,var(--txt-2)); width:20px; height:20px}
#tabelaVazia{padding:var(--e5); color:var(--txt-2); text-align:center}

/* ── selos de estado: cor + texto, nunca cor sozinha ─────────────────────── */
.selo{
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:var(--fs-mini); white-space:nowrap;
}
.selo-neutro{background:var(--neutro-fundo); color:var(--neutro-txt)}
.selo-bom{background:var(--bom-fundo); color:var(--bom-txt)}
.selo-parado{background:var(--aviso-fundo); color:var(--aviso-txt)}

/* ── KANBAN ──────────────────────────────────────────────────────────────── */
#kanban{display:flex; flex-direction:column; overflow:hidden}
#kanbanNav{display:none}
#kanbanColunas{
  flex:1 1 auto; min-height:0;
  display:flex; gap:var(--e2); align-items:flex-start;
  padding:var(--e3); overflow-x:auto; overflow-y:hidden;
}
.col{
  flex:0 0 272px; max-height:100%;
  display:flex; flex-direction:column;
  background:var(--coluna); border-radius:var(--r);
  overflow-y:auto;
}
.col.alvo{outline:2px dashed var(--navy); outline-offset:-2px}
.col-topo{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; gap:var(--e2);
  padding:var(--e2) var(--e3);
  background:var(--coluna); border-bottom:1px solid var(--borda);
  font-size:var(--fs-mini); color:var(--txt-2);
}
.col-topo b{margin-left:auto; color:var(--txt); font-weight:500}
/* fardos pedidos pela coluna nos últimos 30 dias */
.col-topo > span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis}
.col-topo .col-volume{
  flex:0 0 auto; white-space:nowrap;   /* quebrar aqui desalinhava o cabeçalho */
  margin-left:var(--e2); padding:0 6px; border-radius:4px;
  background:var(--bom-fundo); color:var(--bom-txt); font-weight:500;
}
.col > .vazio{padding:var(--e3); font-size:var(--fs-mini); color:var(--txt-2)}

.card{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:var(--e2) var(--e2) 0;
  padding:var(--e2) var(--e3);
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r);
  box-shadow:var(--sombra-1); cursor:pointer;
}
.card:last-child{margin-bottom:var(--e2)}
.card:hover{border-color:var(--borda-campo)}
.card.sel{border-color:var(--mostarda); background:var(--mostarda-fundo)}
.card.arrastando{opacity:.4}
.card .cresce{flex:1 1 auto; min-width:0; font-weight:500}
.card .local{flex-basis:100%; color:var(--txt-2); font-size:var(--fs-mini)}

/* ── ENTRADA (leads do site) ─────────────────────────────────────────────── */
#entrada{padding:var(--e3); display:flex; flex-direction:column; gap:var(--e2)}
.lead{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2);
  padding:var(--e3);
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r);
}
.lead .cresce{flex:1 1 240px; min-width:0}
.lead .nome{font-weight:500}
.lead .sec{display:block; color:var(--txt-2); font-size:var(--fs-mini)}
.lead .mensagem{flex-basis:100%; color:var(--txt-2); font-size:var(--fs-mini)}
#entrada .vazio{padding:var(--e5); color:var(--txt-2); text-align:center}

/* ══════════════════════════════════════════════════════════════════════════
   FICHA — gaveta à direita, não-modal
   ══════════════════════════════════════════════════════════════════════════ */
#ficha:not([hidden]){
  position:absolute; right:0;
  top:calc(var(--h-topo) + var(--h-visoes) + var(--h-ferramentas));
  bottom:0; width:420px; max-width:100%;
  z-index:600;                        /* acima dos controles do Leaflet */
  display:flex; flex-direction:column;
  background:var(--superficie);
  border-left:1px solid var(--borda);
  box-shadow:var(--sombra-ficha);
  overflow:auto; overscroll-behavior:contain;
}
/* Sem animação de entrada de propósito. A gaveta já teve um `translateX(100%)`
   de abertura e ela ficou PRESA no primeiro quadro (medido: transform 360px,
   playState "running") quando a linha do tempo de animação não avança — aba em
   segundo plano, navegador headless, Modo Baixo Consumo. Resultado: a ficha
   abria fora da tela. Aparecer na hora não custa nada e não tem esse risco. */

#ficha > header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:flex-start; gap:var(--e2);
  padding:var(--e3);
  background:var(--superficie); border-bottom:1px solid var(--borda);
}
#ficha .cresce{flex:1 1 auto; min-width:0}
.ficha-icone{
  display:grid; place-items:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:var(--r);
  background:var(--neutro-fundo); color:var(--cor-tipo,var(--txt-2));
}
.ficha-icone .ic{width:20px; height:20px}
#fichaNome{
  font-size:var(--fs-lg); font-weight:500;
  padding:2px 4px; margin:-2px -4px;
  border:1px solid transparent; border-radius:4px;
}
#fichaNome:hover{border-color:var(--borda)}
#fichaNome:focus{border-color:var(--navy); outline:none; background:var(--superficie-2)}
#fichaSub{font-size:var(--fs-mini); color:var(--txt-2)}
#fichaFechar{
  flex:0 0 auto; display:grid; place-items:center;
  width:32px; height:32px; padding:0;
  border:0; border-radius:var(--r); background:none; color:var(--txt-2);
}
#fichaFechar:hover{background:var(--neutro-fundo); color:var(--txt)}

/* trilha: INDICADOR, não controle. Quem move é o botão de ação. */
#fichaEstagio{
  display:flex; gap:2px; padding:var(--e3) var(--e3) 0;
}
#fichaEstagio li{
  flex:1 1 0; min-width:0;
  padding:5px 4px;
  background:var(--neutro-fundo); color:var(--txt-2);
  font-size:0.6875rem; text-align:center; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#fichaEstagio li:first-child{border-radius:4px 0 0 4px}
#fichaEstagio li:last-child{border-radius:0 4px 4px 0}
#fichaEstagio li.feito{background:var(--feito); color:var(--neutro-txt)}
#fichaEstagio li.agora{background:var(--mostarda); color:var(--txt); font-weight:500}

#fichaAcoes{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2);
  padding:var(--e3);
  border-bottom:1px solid var(--borda);
}
#fichaAcoes .btn-primario{background:var(--navy); border-color:var(--navy); color:var(--creme)}
#fichaAcoes .btn-primario:hover{background:var(--navy-2)}
#fichaAcoes .destino{font-size:var(--fs-mini); color:var(--txt-2)}
#fichaAcoes .destino b{color:var(--txt); font-weight:500}

/* "Outro fato": menu de sobra, não gaveta de bagunça — cada item é nomeado */
.mais-acoes{position:relative}
.mais-acoes > summary{
  display:inline-flex; align-items:center; gap:var(--e2);
  min-height:36px; padding:0 var(--e3);
  border:1px solid var(--borda-forte); border-radius:var(--r);
  background:var(--superficie); color:var(--txt);
  list-style:none; cursor:pointer;
}
.mais-acoes > summary::-webkit-details-marker{display:none}
.mais-acoes[open] > summary{background:var(--superficie-2)}
.mais-acoes > .menu{
  position:absolute; top:calc(100% + 4px); left:0; z-index:10;
  min-width:230px; padding:var(--e1);
  background:var(--superficie); border:1px solid var(--borda-forte);
  border-radius:var(--r); box-shadow:var(--sombra-dlg);
}
.mais-acoes .menu button,.mais-acoes .menu select{
  display:flex; align-items:center; gap:var(--e2);
  width:100%; min-height:36px; padding:0 var(--e2);
  border:0; border-radius:4px; background:none; text-align:left;
}
.mais-acoes .menu button:hover{background:var(--superficie-2)}
.mais-acoes .menu hr{margin:var(--e1) 0; border:0; border-top:1px solid var(--borda)}
.mais-acoes .menu label{display:block; padding:var(--e2) var(--e2) 2px; font-size:var(--fs-mini); color:var(--txt-2)}
.mais-acoes .menu select{border:1px solid var(--borda-campo); background:var(--superficie)}

#fichaCorpo{display:flex; flex-direction:column}
#fichaCorpo > section{padding:var(--e3); border-bottom:1px solid var(--borda)}
#fichaCorpo h3{margin-bottom:var(--e2)}

/* edição no lugar: parece dado, vira campo no hover/foco — com o lápis avisando */
#fichaCampos{display:flex; flex-direction:column}
.campo{
  display:flex; align-items:center; gap:var(--e2);
  min-height:32px; padding:2px 0;
  border-bottom:1px solid var(--superficie-2);
}
.campo > .rotulo{flex:0 0 34%; font-size:var(--fs-mini); color:var(--txt-2)}
.editavel{
  flex:1 1 auto; min-width:0;
  padding:5px var(--e2);
  background:transparent;
  border:1px solid transparent; border-radius:4px;
  transition:border-color var(--t) ease, background var(--t) ease;
}
.editavel:hover{background:var(--superficie-2); border-color:var(--borda)}
.editavel:focus{background:var(--superficie); border-color:var(--navy); outline:none}
.campo .ic{color:var(--txt-2); opacity:0; transition:opacity var(--t) ease; width:16px; height:16px}
.campo:hover .ic,.campo:focus-within .ic{opacity:1}
.editavel.salvando{opacity:.6}
.editavel.erro{border-color:var(--aviso-borda); background:var(--aviso-fundo)}
textarea.editavel{resize:vertical; min-height:52px}

/* Caixa de marcar. Sem lápis e sem a coluna de rótulo dos outros campos: a caixa
   JÁ é o controle, e o rótulo precisa ficar COLADO nela para o clique no texto
   também marcar. O alvo de toque é o <label> inteiro, 44px, não os 18px da caixa. */
.campo-marca{padding:0}
.campo-marca .marcar{
  display:flex; align-items:center; gap:var(--e2);
  flex:1 1 auto; min-height:44px; padding:2px var(--e2);
  cursor:pointer;
}
.campo-marca input[type="checkbox"]{
  /* o min-height:44px que o celular aplica em .editavel esticaria a caixa para
     18×44 — uma caixa de marcar comprida. Quem carrega o alvo de toque aqui é o
     <label> inteiro (336×48 medidos a 360px), não a caixa. */
  flex:0 0 auto; width:18px; height:18px; min-height:18px; margin:0; padding:0;
  accent-color:var(--navy);
}

/* linha do tempo */
#notaForm{display:flex; gap:var(--e2); margin-bottom:var(--e3)}
#notaTexto{
  flex:1 1 auto; min-width:0; min-height:36px;
  padding:0 var(--e3);
  border:1px solid var(--borda-campo); border-radius:var(--r);
  background:var(--superficie);
}
#fichaFatos li{
  display:flex; align-items:flex-start; gap:var(--e2);
  padding:var(--e2) 0; border-top:1px solid var(--borda);
}
#fichaFatos li:first-child{border-top:0}
#fichaFatos .ic{margin-top:2px; color:var(--txt-2)}
#fichaFatos .corpo{flex:1 1 auto; min-width:0}
#fichaFatos .quem{display:block; font-size:var(--fs-mini); color:var(--txt-2)}
#fichaFatos .texto-fato{font-size:var(--fs-mini); color:var(--txt-2); margin-top:2px}
#fichaFatos .btn-fantasma{min-height:24px; padding:0 6px; font-size:var(--fs-mini)}
#fichaFatos .vazio{color:var(--txt-2)}

#ficha > footer{
  margin-top:auto; position:sticky; bottom:0;
  display:flex; gap:var(--e2); flex-wrap:wrap;
  padding:var(--e3);
  background:var(--superficie-2); border-top:1px solid var(--borda);
}

/* ══════════════════════════════════════════════════════════════════════════
   DIÁLOGOS
   ══════════════════════════════════════════════════════════════════════════ */
dialog{
  width:calc(100% - 32px); max-width:520px;
  padding:0; color:var(--txt); background:var(--superficie);
  border:0; border-radius:12px; box-shadow:var(--sombra-dlg);
}
dialog::backdrop{background:rgba(27,28,30,.5)}
dialog h2{padding:var(--e4) var(--e4) 0}
dialog > form > p:first-of-type:not(:empty),#fatoDestino:not(:empty){
  padding:var(--e1) var(--e4) 0; font-size:var(--fs-mini); color:var(--txt-2);
}
#novoCampos:not([hidden]),#fatoCampos{
  display:flex; flex-direction:column; gap:var(--e3);
  padding:var(--e4);
}
.campo-bloco{display:flex; flex-direction:column; gap:var(--e1)}
.campo-bloco > label{font-size:var(--fs-mini); color:var(--txt-2)}

/* Campo raro escondido atrás de um <details> nativo — sem JS. Fechado ele não
   ocupa o caminho de quem só quer registrar o pedido; aberto, é um campo igual
   aos outros. O alvo de toque do resumo é 44px porque isto se usa na rua. */
.bloco-extra > summary{
  display:flex; align-items:center; gap:var(--e1); min-height:44px;
  font-size:var(--fs-mini); color:var(--txt-2); cursor:pointer;
  list-style:none;
}
/* `display:flex` no <summary> mata a setinha nativa; sem ela a linha vira uma
   frase solta e ninguém descobre que dá para abrir. Esta volta a pôr o sinal. */
.bloco-extra > summary::-webkit-details-marker{display:none}
.bloco-extra > summary::before{content:'▸'; font-size:.9em}
.bloco-extra[open] > summary{color:var(--txt)}
.bloco-extra[open] > summary::before{content:'▾'}
dialog input,dialog select,dialog textarea{
  width:100%; min-height:38px; padding:var(--e2) var(--e3);
  border:1px solid var(--borda-campo); border-radius:var(--r);
  background:var(--superficie); color:var(--txt);
}
dialog textarea{resize:vertical}
#novoMsg:not(:empty),#fatoMsg:not(:empty){
  display:flex; align-items:center; gap:var(--e2);
  margin:0 var(--e4); padding:var(--e2) var(--e3);
  border-radius:var(--r);
  background:var(--aviso-fundo); color:var(--aviso-txt); font-size:var(--fs-mini);
}
dialog menu{
  display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--e2);
  margin:0; padding:var(--e3) var(--e4);
  background:var(--superficie-2); border-top:1px solid var(--borda);
  border-radius:0 0 12px 12px;
}

#novoTipos{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--e2);
  padding:var(--e3) var(--e4) 0;
}
#novoTipos button{
  display:flex; align-items:center; gap:var(--e2);
  min-height:44px; padding:0 var(--e3); text-align:left;
  background:var(--superficie);
  border:1px solid var(--borda-forte); border-radius:var(--r);
}
#novoTipos button .ic{color:var(--cor-tipo,var(--txt-2))}
#novoTipos button:hover{background:var(--superficie-2)}
#novoTipos button[aria-pressed="true"]{
  border-color:var(--navy); background:var(--superficie-2); font-weight:500;
  box-shadow:inset 0 0 0 1px var(--navy);
}

#historicoLista{padding:var(--e2) var(--e4) var(--e4); max-height:60svh; overflow:auto}
#historicoLista li{
  display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap;
  padding:var(--e2) 0; border-top:1px solid var(--borda); font-size:var(--fs-mini);
}
#historicoLista li:first-child{border-top:0}
#historicoLista b{font-weight:500}

/* ── aviso flutuante ─────────────────────────────────────────────────────── */
#aviso{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  z-index:900; max-width:calc(100% - 32px);
  display:flex; align-items:center; gap:var(--e2);
  padding:var(--e2) var(--e4);
  border-radius:var(--r);
  background:var(--navy); color:var(--creme);
  box-shadow:var(--sombra-dlg); font-size:var(--fs-mini);
}
#aviso.erro{background:var(--aviso-fundo); color:var(--aviso-txt); border:1px solid var(--aviso-borda)}
/* botões dentro do aviso: herdam a cor do fundo em que estão, senão o
   `--txt-2` do .btn-fantasma some no navy */
#aviso .btn-fantasma{color:inherit; min-height:32px; padding:0 var(--e2); font-weight:500}
#aviso .btn-fantasma:hover{background:rgba(255,255,255,.16); color:inherit}
#aviso.erro .btn-fantasma:hover{background:rgba(27,28,30,.08)}
#aviso .aviso-fechar{padding:0 var(--e1); font-weight:400}

/* ── mapa ────────────────────────────────────────────────────────────────── */
.pino{
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--cor-tipo,var(--navy)); color:#fff;
  border:2px solid #fff; box-shadow:0 1px 3px rgba(27,28,30,.4);
}
.pino .ic{width:14px; height:14px}
.pino.aceso{outline:3px solid var(--mostarda); z-index:1000}
.leaflet-container{font-family:inherit; background:var(--coluna)}

/* cada tipo injeta a própria cor */
[data-tipo="influenciador"]{--cor-tipo:var(--c-influenciador)}
[data-tipo="pdv"]{--cor-tipo:var(--c-pdv)}
[data-tipo="evento"]{--cor-tipo:var(--c-evento)}
[data-tipo="distribuidora"]{--cor-tipo:var(--c-distribuidora)}

/* ══════════════════════════════════════════════════════════════════════════
   CELULAR — 360px é critério de aceite, não intenção.
   Uma mão, zero rolagem horizontal, nada abaixo de 15px, alvo de 48px.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  :root{
    --fs-mini:0.9375rem;   /* 15px: o piso de legibilidade no celular */
    --fs:0.9375rem;
    --h-topo:auto; --h-linha:56px;
  }

  /* A barra fixa comia 413px de 780 — 53% da tela — sobrando 4 linhas de lista
     para quem usa isto na rua. Duas linhas no topo em vez de três (a busca sobe
     para junto da marca, e o "Novo parceiro" fica só com o ícone) e o resumo em
     uma linha só. Medido depois: ver ESTADO.md. */
  #topo{
    flex:0 0 auto; flex-wrap:wrap;
    padding:var(--e2) var(--e3); gap:var(--e2);
  }
  /* Escopo no #topo de propósito: `.marca` solto pegava também a logo do cartão
     de login, que é coluna flex — a logo ia parar EMBAIXO do botão "Entrar" no
     celular. Aqui a ordem só faz sentido para a barra de cima. */
  #topo .marca{order:1}
  .busca{order:2; flex:1 1 120px; max-width:none}
  #busca{min-height:44px}
  #btnSair{order:3; flex:0 0 auto}
  /* ícone sozinho: o rótulo continua existindo para o leitor de tela */
  #btnNovo{order:4; flex:0 0 auto; width:48px; min-height:44px; padding:0; justify-content:center}
  #btnNovoTexto{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }

  #visoes{
    flex:0 0 48px;
    scroll-snap-type:x proximity;
    /* as 4 abas não cabem em 360px (transbordam 172px) e a barra de rolagem está
       desligada: sem esta borda esmaecida, "Sem contato" e "Arquivados" ficavam
       invisíveis, sem nada dizendo que existem. */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  #visoes button{min-height:48px; scroll-snap-align:start}
  /* a aba escolhida nunca fica escondida: o JS a traz para a área visível */

  #ferramentas{
    flex:0 0 auto; flex-wrap:wrap; gap:var(--e2);
    padding:var(--e2) var(--e3);
  }
  /* Ordem no celular: vistas · (tipo + baixar) · resumo. O resumo tem base 100%
     e, no meio da lista, quebrava a linha e empurrava o "Baixar" para uma quarta
     faixa só dele — 52px de barra por causa da ordem, não do conteúdo. */
  #vistas{order:1; flex:1 1 100%}
  #vistas button{flex:1 1 0; justify-content:center; min-height:44px}
  .campo-linha{order:2; flex:1 1 140px}
  #tipo{flex:1 1 auto; min-height:44px}
  #resumo{
    order:4; flex-basis:100%; margin-left:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* Baixar planilha no celular vira só o ícone: com o rótulo por extenso ele
     tomava uma linha inteira da barra, e exportar CSV pelo telefone é o que
     menos se faz aqui. O nome continua no span, para o leitor de tela. */
  #btnExportar{order:3; flex:0 0 auto; width:48px; min-height:44px; padding:0; justify-content:center}
  #btnExportarTexto{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  /* o volume entra na 2ª linha da lista, junto de cidade e etapa */
  tr.linha .volume{text-align:left; white-space:normal}
  tr.linha .volume:not(:empty)::after{content:" · "; color:var(--txt-2)}

  /* a tabela vira lista de 2 andares — nenhuma rolagem horizontal.
     Andar 1: ícone do tipo + nome. Andar 2: cidade · etapa · último fato. */
  #tabela thead{display:none}
  #tabela table,#tabela tbody,tr.linha{display:block; width:auto}
  tr.linha{
    position:relative; height:auto; min-height:56px;
    padding:var(--e2) var(--e3) var(--e2) 44px;
  }
  tr.linha td{display:inline; padding:0}
  tr.linha td.nome{display:block}
  tr.linha td:first-child{
    display:block; position:absolute; left:var(--e3); top:10px; width:auto;
  }
  tr.linha .fato{text-align:left; white-space:normal}
  tr.linha .local:not(:empty)::after{content:" · "; color:var(--txt-2)}
  tr.linha .etapa::after{content:" · "; color:var(--txt-2)}

  #kanbanNav{
    display:flex; align-items:center; gap:var(--e2);
    padding:var(--e2) var(--e3);
    background:var(--superficie); border-bottom:1px solid var(--borda);
  }
  #kbTitulo{flex:1 1 auto; text-align:center; font-size:var(--fs-mini)}
  #kanbanNav button{
    display:grid; place-items:center;
    width:44px; height:44px; padding:0;
    border:1px solid var(--borda-forte); border-radius:var(--r);
    background:var(--superficie);
  }
  #kanbanColunas{scroll-snap-type:x mandatory; padding:var(--e2)}
  .col{flex:0 0 100%; scroll-snap-align:center}
  .card{min-height:48px}

  /* alvo de toque: 48px em tudo que se clica. Medido a 360×780, um a um. */
  .btn-primario,.btn-secundario,.btn-fantasma,
  .mais-acoes > summary,.mais-acoes .menu button,.mais-acoes .menu select{min-height:48px}
  #notaTexto{min-height:48px}
  .editavel{min-height:44px}
  textarea.editavel{min-height:64px}
  #fichaFatos .btn-fantasma{min-height:44px; padding:0 var(--e2)}

  #ficha:not([hidden]){position:fixed; inset:0; width:auto; border-left:0}
  #ficha > header{padding-top:calc(var(--e3) + env(safe-area-inset-top))}
  #fichaFechar{width:48px; height:48px}
  #fichaEstagio li:not(.agora){display:none}
  #fichaEstagio li.agora{
    flex:1 1 100%; border-radius:4px; padding:var(--e2);
    font-size:var(--fs-mini); text-align:left; white-space:normal;
  }
  #fichaEstagio li.agora::after{
    content:" · " attr(data-pos); font-weight:400; color:var(--aviso-txt);
  }
  .campo{min-height:48px; flex-wrap:wrap}
  .campo > .rotulo{flex-basis:38%}
  #ficha > footer{padding-bottom:calc(var(--e3) + env(safe-area-inset-bottom))}
  #ficha > footer button{flex:1 1 auto; justify-content:center; min-height:48px}

  dialog{
    width:100%; max-width:none; margin:auto 0 0;
    border-radius:12px 12px 0 0; max-height:92svh;
  }
  /* O rodapé do diálogo gruda: com o tipo escolhido, o conteúdo passava 440px do
     fim da tela e o "Salvar" era o último elemento — cadastrar um influenciador
     pelo celular exigia rolar por 8 campos vazios até achar o botão. */
  dialog menu{
    position:sticky; bottom:0; z-index:2;
    padding-bottom:calc(var(--e3) + env(safe-area-inset-bottom));
  }
  dialog input,dialog select,dialog textarea{min-height:48px}
  #novoTipos{grid-template-columns:1fr}
  #novoTipos button{min-height:52px}
}

/* Não existe bloco `prefers-reduced-motion` de propósito. O que sobrou de
   movimento nesta tela é transição de COR de 140ms em hover e foco — feedback,
   não animação. A "matança global" (`animation-duration:.01ms !important` em
   tudo) mataria justamente esse feedback sem reduzir risco nenhum: não há
   translação, escala, rotação nem parallax em lugar algum. Se algum dia entrar
   movimento de verdade, ele nasce com a alternativa reduzida junto. */