/* ==========================================================================
   PAINEL V6 — sistema visual

   Console de operação de vendas. Quem usa passa horas na mesma tela, então a
   regra que atravessa tudo é: HIERARQUIA antes de densidade. O que importa
   aparece grande e cedo; o resto existe, discreto, ao lado.

   ── Três decisões que explicam o resto ─────────────────────────────────────
   1. Separar por ESPAÇO, não por borda. Caixa dentro de caixa dentro de caixa
      é o que faz um painel parecer velho — e faz tudo ter o mesmo peso.
   2. Dourado é acento, nunca área. Ele marca o que está ativo, o que é ação
      principal e o que merece o olho. Em bloco grande, cansa em dez minutos.
   3. Um componente por ideia. `.card`, `.tag`, `.btn`, `.tbl` — e variantes,
      não cópias. Estilo específico de página é a origem de toda divergência.

   Os nomes de classe são os mesmos de antes de propósito: o redesenho é de
   aparência, e nenhuma view precisou ser reescrita para acompanhá-lo.
   ========================================================================== */

/* ==========================================================================
   TOKENS
   ========================================================================== */

:root{
  /* superfícies — névoa fria, não creme: o painel passa o dia aberto */
  --bg:          #eff2f1;
  --surface:     #ffffff;
  --surface-2:   #f8faf9;
  --surface-3:   #edf1ef;
  --hover:       #f3f6f5;
  --line:        #dce3e0;
  --line-soft:   #e7ecea;

  /* tinta — verde quase preto, para o jade conversar com o texto */
  --ink:         #14201c;
  --ink-2:       #5b6b66;
  --muted:       #5b6b66;
  --faint:       #93a19c;

  /* barra lateral — clara, separada por uma linha, não por um bloco escuro */
  --nav-bg:      #f8faf9;
  --nav-bg-2:    #eef3f1;
  --nav-ink:     #3d4b46;
  --nav-ink-on:  #0b3f37;
  --nav-title:   #8a9893;

  /* marca: o jade da Ponte. Os nomes --gold* ficaram para não reescrever
     cada tela; o valor é o do destaque atual. */
  --gold:        #0b6e5f;
  --gold-hover:  #095a4e;
  --gold-soft:   #e3f2ee;
  --gold-line:   #b9ddd4;
  --gold-ink:    #075045;

  /* "precisa de você": a única cor quente da interface */
  --signal:      #e0533d;
  --signal-soft: #fdece8;

  /* estados */
  --ok:          #15803d;
  --ok-soft:     #e9f6ee;
  --ok-line:     #c6e7d2;
  --warn:        #a16207;
  --warn-ring:   #e8a317;
  --warn-soft:   #fdf5e3;
  --warn-line:   #f1dfb4;
  --err:         #c8372d;
  --err-soft:    #fcebe9;
  --err-line:    #f5d0cc;
  --info:        #1f6fb2;
  --info-soft:   #e8f2fb;
  --info-line:   #cfe3f5;

  /* temperatura do lead */
  --frio:        #1f6fb2;
  --morno:       #a16207;
  --quente:      #c8372d;

  /* raios */
  --r-lg:  14px;
  --r:     12px;
  --r-md:  10px;
  --r-sm:  8px;
  --r-pill: 999px;

  /* sombra: existe para separar do fundo, não para flutuar */
  --shadow:    0 1px 2px rgba(20,32,28,.05);
  --shadow-md: 0 4px 14px rgba(20,32,28,.08), 0 1px 2px rgba(20,32,28,.05);
  --shadow-lg: 0 18px 44px rgba(20,32,28,.14);

  /* espaço */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;

  /* tipos: título e número com personalidade, texto calmo, dado em mono */
  --f-display: "Schibsted Grotesk", "Public Sans", system-ui, sans-serif;
  --f-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --nav-w: 236px;
  --tempo: 160ms;
}

*,*::before,*::after{box-sizing:border-box}

/* ==========================================================================
   BASE
   ========================================================================== */

html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.55 var(--f-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

a{color:var(--info);text-decoration:none;transition:color var(--tempo)}
a:hover{color:#175a91}

h1,h2,h3,h4{margin:0;letter-spacing:-.015em;color:var(--ink);font-family:var(--f-display)}
h1{font-size:24px;font-weight:700;line-height:1.25}
h2{font-size:18px;font-weight:650;margin:var(--s-7) 0 var(--s-4)}
h3{font-size:15px;font-weight:650;line-height:1.35}
p{margin:0 0 var(--s-3)}
small{font-size:12.5px}

::selection{background:var(--gold-soft);color:var(--gold-ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

.num,.card .v,.fn-value,.hb-value,td.num,th.num,.kpi-v{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-size:12px}
.inline{display:inline}

/* rolagem discreta em toda a app */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#d7dbe2;border:3px solid transparent;
  background-clip:content-box;border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:#c2c8d2;background-clip:content-box}

/* ==========================================================================
   ESTRUTURA
   ========================================================================== */

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

/* ── barra lateral ─────────────────────────────────────────────────────────
   Clara, separada da área de trabalho por uma linha (20/10, a Ponte). O
   bloco escuro de antes era o mesmo de qualquer painel; aqui a navegação é
   papel, e o que tem cor é o que importa: o item ativo em jade, a fila
   "Precisa de você" em coral e o fio de cor de cada produto. */
.side{
  width:var(--nav-w);flex:0 0 var(--nav-w);background:var(--nav-bg);
  border-right:1px solid var(--line);
  position:fixed;top:0;bottom:0;left:0;z-index:20;
  display:flex;flex-direction:column;
}

/* ── a marca ───────────────────────────────────────────────────────────────
   Identidade, não navegação: nenhum estado de hover. O seletor repete a
   classe para vencer `.side a:hover`, que é mais específica. */
.side-brand{
  display:flex;align-items:center;gap:10px;padding:18px 18px 14px;
  color:var(--ink);line-height:1.15;
}
.side .side-brand:hover,.side .side-brand:active,.side .side-brand:focus{
  background:none;color:var(--ink);text-decoration:none;
}
.side-brand:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:var(--r-sm)}
.side-brand .mark{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;
  background:var(--gold);color:#fff;
}
.side-brand .mark svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.side-brand .nome{display:flex;flex-direction:column;min-width:0}
.side-brand .nome b{font-family:var(--f-display);font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.side-brand .nome span{font-size:11.5px;font-weight:500;color:var(--muted);margin-top:1px;white-space:nowrap}

/* ── o produto em uso: o "fio" dele aparece aqui primeiro ────────────────── */
.side-produto{padding:0 12px 10px}
.side-produto label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nav-title);margin:0 0 5px 4px}
.side-produto .sel{position:relative}
.side-produto .sel::before{
  content:"";position:absolute;left:11px;top:50%;width:9px;height:9px;border-radius:50%;
  transform:translateY(-50%);background:var(--fio,var(--gold));pointer-events:none;
}
.side-produto select{
  width:100%;font:inherit;font-size:13.5px;font-weight:600;padding:8px 10px 8px 28px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);
  appearance:auto;cursor:pointer;
}
.side-produto select:hover{border-color:#c8d2ce}

.side-nav{flex:1;overflow-y:auto;padding:2px 10px 10px}
.side-nav::-webkit-scrollbar-thumb{background:#d3dbd8;background-clip:content-box}

.nav-group{margin:0 0 8px}
.nav-title{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nav-title);padding:8px 10px 4px;
}
.side a{
  display:flex;align-items:center;gap:10px;padding:6px 10px;margin:1px 0;
  color:var(--nav-ink);font-size:13.5px;line-height:1.35;border-radius:var(--r-sm);
  position:relative;transition:background var(--tempo),color var(--tempo);
}
.side a:hover{background:var(--nav-bg-2);color:var(--ink)}
.side a.on{background:var(--gold-soft);color:var(--nav-ink-on);font-weight:650}
.side .ico{width:17px;flex:0 0 17px;display:flex;opacity:.65}
.side a.on .ico{opacity:1;color:var(--gold)}
.side .ico svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.side .badge{
  margin-left:auto;background:var(--surface-3);color:var(--ink-2);border-radius:var(--r-pill);
  font-size:11px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center;
  font-variant-numeric:tabular-nums;
}
/* a fila de quem espera uma pessoa é a única que grita */
.side .badge.fila{background:var(--signal);color:#fff}

/* rodapé: quem está logado, e a saída */
.side-foot{
  border-top:1px solid var(--line);padding:10px 12px;
  display:flex;align-items:center;gap:10px;
}
.side-foot .av{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold-ink);font-weight:700;font-size:12.5px;
}
.side-foot .who{min-width:0;flex:1;line-height:1.3}
.side-foot .who b{display:block;color:var(--ink);font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who span{color:var(--nav-title);font-size:11.5px}
.side-foot .link{
  background:none;border:0;color:var(--nav-title);cursor:pointer;padding:6px;
  border-radius:var(--r-sm);display:flex;transition:background var(--tempo),color var(--tempo);
}
.side-foot .link:hover{background:var(--nav-bg-2);color:var(--ink)}
.side-foot .link svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ── o fio de cada produto ─────────────────────────────────────────────────
   A assinatura da Ponte: cada produto tem uma cor (ver `Produto::cor`), e ela
   aparece no seletor, em cada conversa e no cabeçalho da conversa aberta. Com
   dois produtos no mesmo Atendimento, é ela que diz de relance de qual é. */
.fio{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;
  color:var(--fio,var(--gold));white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fio::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}

/* ── área de trabalho ──────────────────────────────────────────────────── */
/* Sem teto de largura: a tela usa o que sobra da lateral. Numa tabela de
   leads, cada pixel desperdiçado à direita é uma coluna a menos de conteúdo. */
.main{
  flex:1;min-width:0;margin-left:var(--nav-w);
  padding:28px 32px 56px;width:calc(100% - var(--nav-w));
}
.main.flush{padding:0;max-width:none;height:100vh;overflow:hidden}

/* ── cabeçalho de página ───────────────────────────────────────────────────
   Todas as telas começam igual: título à esquerda, contexto embaixo, ações à
   direita. Filtro não entra aqui — ele é do conteúdo, não do título. */
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-5);
  margin-bottom:var(--s-6);flex-wrap:wrap;
}
.page-head h1{font-size:24px}
.page-head .sub{margin-top:5px}
.page-head .actions{margin-top:0;flex:0 0 auto}
.sub{color:var(--muted);margin:0;font-size:13px;line-height:1.5}

/* ==========================================================================
   SUPERFÍCIES
   ========================================================================== */

.box,.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
}
.box{padding:20px 22px;margin-bottom:var(--s-5)}
/* O título do bloco é um TÍTULO: quando ele carrega texto solto e um
   <code> junto, o flex espalhava as duas metades para os cantos opostos.
   Título com ação à direita tem um componente próprio: `.box-head`. */
.box > h3{margin:0 0 var(--s-4)}
.box > h3 .tag{margin-left:8px;vertical-align:middle}
.box > h3:only-child{margin-bottom:0}

.box-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  margin-bottom:var(--s-4)}
.box-head h3{margin:0}
.box-head .sub{margin:3px 0 0;font-size:12.5px}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:var(--s-5);align-items:stretch}
.grid-2 > .box{margin-bottom:0}
/* Uma grade de cartões seguida de outro bloco precisa de ar entre os dois:
   sem isto, o cartão de baixo encosta na fileira de cima. */
.grid-2{margin-bottom:var(--s-5)}
.cards + .box,.cards + .grid-2,.grid-2 + .box,.box + .cards{margin-top:var(--s-5)}
/* O comentário HTML entre dois blocos não é elemento: `.grid-2 + .box` não
   casava, e o cartão de baixo encostava na fileira de cima. A margem de
   baixo do próprio .grid-2 resolve em qualquer arranjo. */
.grid-2{margin-bottom:var(--s-5)}
.grid-2 + *{margin-top:0}
/* 60/40: a tendência é o desenho que se lê, o funil é o que se confere. */
.grid-60-40{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media(max-width:1100px){.grid-60-40{grid-template-columns:minmax(0,1fr)}}

/* ── cartões de número ─────────────────────────────────────────────────────
   Dois tamanhos, e isso é o ponto: quando todo indicador tem o mesmo peso,
   nenhum tem. `.cards` é a linha principal; `.cards.mini`, a secundária. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s-4);margin-bottom:var(--s-5)}
.card{padding:18px 20px;display:flex;flex-direction:column;gap:2px;
  transition:border-color var(--tempo),box-shadow var(--tempo)}
.card .k{color:var(--muted);font-size:12.5px;font-weight:550;display:flex;
  align-items:center;gap:8px;letter-spacing:0;text-transform:none}
.card .v{font-size:30px;font-weight:700;margin-top:8px;line-height:1.1;letter-spacing:-.03em}
.card .n{color:var(--faint);font-size:12px;margin-top:3px;line-height:1.4}
/* ── cor por assunto, não uma cor só ───────────────────────────────────────
   Seis cartões dourados iguais não distinguem nada. Cada indicador recebe a
   cor do que ele mede — conversa é azul, dinheiro é verde, custo é roxo — e
   o olho encontra o número certo sem ler o rótulo. */
.card .ico-round{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 30px;
  background:var(--gold-soft);color:var(--gold);
}
.ico-round.c-azul{background:var(--info-soft);color:var(--info)}
.ico-round.c-verde{background:var(--ok-soft);color:var(--ok)}
.ico-round.c-roxo{background:#f1ecfb;color:#6741b8}
.ico-round.c-rosa{background:#fdeef5;color:#c2407e}
.ico-round.c-laranja{background:#fff1e6;color:#c96a1a}
.ico-round.c-ciano{background:#e6f7fa;color:#0d7f93}
.ico-round.c-vermelho{background:var(--err-soft);color:var(--err)}
.card .ico-round svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.cards.mini{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-3)}
.cards.mini .card{padding:14px 16px}
.cards.mini .card .k{font-size:12px}
.cards.mini .card .v{font-size:20px;margin-top:5px;letter-spacing:-.02em}
.cards.mini .card .n{font-size:11.5px}
.cards.mini .card .ico-round{width:26px;height:26px;flex:0 0 26px;border-radius:8px}
.cards.mini .card .ico-round svg{width:14px;height:14px}

.card.accent{background:var(--gold-soft);border-color:var(--gold-line);box-shadow:none}
.card.accent .k{color:var(--gold-ink)}
.card.accent .v{color:var(--gold-ink)}
.card.accent .ico-round{background:rgba(197,139,0,.14)}

/* variação percentual ao lado do número */
.delta{font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:3px;letter-spacing:0}
.delta.up{background:var(--ok-soft);color:var(--ok)}
.delta.down{background:var(--err-soft);color:var(--err)}
.delta.flat{background:var(--surface-3);color:var(--muted)}
.card .v-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--gold);
  background:var(--gold);color:#fff;font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--tempo),border-color var(--tempo),color var(--tempo),
             box-shadow var(--tempo);
}
.btn:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:#fff}
.btn:active{transform:translateY(.5px)}

.btn.ghost{background:var(--surface);color:var(--ink);border-color:#e1e5ea}
.btn.ghost:hover{background:var(--hover);border-color:#d3d9e2;color:var(--ink)}

.btn.quiet{background:transparent;border-color:transparent;color:var(--muted)}
.btn.quiet:hover{background:var(--surface-3);color:var(--ink)}

.btn.danger{background:var(--err);border-color:var(--err);color:#fff}
.btn.danger:hover{background:#c33c3c;border-color:#c33c3c}

.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:var(--r-sm);gap:5px}
.btn.xs{height:28px;padding:0 10px;font-size:12px;border-radius:var(--r-sm)}
.btn.block{width:100%}
.btn.icon{width:40px;padding:0}
.btn.icon.sm{width:32px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

.actions{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-4);align-items:center}

/* link em forma de botão de texto */
.link{background:none;border:0;color:var(--info);cursor:pointer;font:inherit;padding:0}
.link:hover{text-decoration:underline}

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */

label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  margin:0 0 6px}

input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=url],input[type=tel],input[type=date],select,textarea{
  width:100%;height:44px;padding:0 13px;border:1px solid #e1e5ea;border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;
  transition:border-color var(--tempo),box-shadow var(--tempo);
}
textarea{height:auto;min-height:104px;padding:11px 13px;line-height:1.55;resize:vertical}
select{appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23687080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{border-color:#d3d9e2}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,139,0,.13);
}
input[type=file]{padding:9px 12px;height:auto;background:var(--surface-2)}
input[disabled],select[disabled],textarea[disabled]{background:var(--surface-3);
  color:var(--muted);cursor:not-allowed}

.field{margin-bottom:var(--s-4)}
.row{display:flex;gap:var(--s-3);flex-wrap:wrap}
.row>*{flex:1;min-width:150px}
.row .grow-2{flex:2}
.row .shrink{flex:0 0 auto;min-width:0}

.checkbox{display:flex;align-items:center;gap:9px;margin:var(--s-3) 0}
.checkbox input{width:auto;height:auto;margin:0;accent-color:var(--gold)}
.checkbox label{margin:0;font-weight:500;color:var(--ink-2);font-size:13px}

/* ── filtros ───────────────────────────────────────────────────────────────
   Uma faixa branca, alinhada, sem virar formulário. Os campos ficam à altura
   dos botões e o conjunto não compete com o conteúdo. */
.filters{
  display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:flex-end;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:var(--s-5);box-shadow:var(--shadow);
}
.filters label{margin:0 0 5px;font-size:11.5px;font-weight:600;color:var(--muted)}
.filters>div{min-width:132px}
.filters .shrink{min-width:0;flex:0 0 auto}
.filters input,.filters select{height:40px;font-size:13px}
.filters .btn{height:40px}

/* ==========================================================================
   TABELAS
   ========================================================================== */

.table-wrap{
  overflow-x:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);
}
table,.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  text-align:left;font-size:11.5px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);background:var(--surface-2);
  padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:15px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle;
  color:var(--ink);line-height:1.45}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--tempo)}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right}
.tbl td .sub,.tbl td .note{margin:2px 0 0;font-size:12px}

.empty{padding:44px 24px;text-align:center;color:var(--muted);font-size:13.5px}

/* célula do lead: avatar, nome e telefone numa coluna só */
.cel-lead{display:flex;align-items:center;gap:11px;min-width:0}
.cel-lead .ib-avatar{width:34px;height:34px;flex:0 0 34px;font-size:13px}
.cel-lead-txt{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.cel-lead-txt a{color:var(--ink);font-weight:600}
.cel-lead-txt a:hover{color:var(--gold-hover)}
.cel-lead-txt .sub{font-size:12px}
.tbl-leads tbody tr{cursor:pointer}
.tbl-leads tbody tr.on{background:var(--gold-soft)}
.tbl-leads tbody tr.on td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.tbl-leads .btn.quiet{opacity:.45}
.tbl-leads tr:hover .btn.quiet{opacity:1}

/* ==========================================================================
   ETIQUETAS E ESTADOS
   ========================================================================== */

.tag{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:650;letter-spacing:.01em;line-height:1.5;
  background:var(--surface-3);color:var(--ink-2);border:0;white-space:nowrap;
}
.t-FRIO{background:var(--info-soft);color:var(--frio)}
.t-MORNO{background:var(--warn-soft);color:var(--morno)}
.t-QUENTE{background:var(--err-soft);color:var(--quente)}
.t-stage{background:var(--surface-3);color:var(--ink-2)}
/* Clicar no checkout é intenção (azul); comprar é resultado (verde). Antes
   os dois eram verdes e a tabela não distinguia quem pagou de quem só
   chegou perto. */
.t-clicou{background:var(--info-soft);color:var(--info)}
.t-cliente{background:var(--ok-soft);color:var(--ok)}
.t-ok{background:var(--ok-soft);color:var(--ok)}
.t-err{background:var(--err-soft);color:var(--err)}
.t-warn{background:var(--warn-soft);color:var(--warn)}
.t-info{background:var(--info-soft);color:var(--info)}
.t-test{background:#f1ecfb;color:#6741b8}
.t-neutro{background:var(--surface-3);color:var(--ink-2)}

.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.dot.bad{background:var(--err);box-shadow:0 0 0 3px var(--err-soft)}
.dot.warn{background:var(--warn-ring);box-shadow:0 0 0 3px var(--warn-soft)}

/* ==========================================================================
   AVISOS
   ========================================================================== */

.flash{
  padding:13px 16px;border-radius:var(--r-md);margin-bottom:var(--s-5);font-size:13.5px;
  border:1px solid transparent;display:flex;align-items:flex-start;gap:10px;
}
.flash.ok{background:var(--ok-soft);color:#0f7a4f;border-color:var(--ok-line)}
.flash.err{background:var(--err-soft);color:#b23b3b;border-color:var(--err-line)}

.note{color:var(--muted);font-size:12.5px;margin:6px 0 0;line-height:1.55}

.warn-box{
  background:var(--warn-soft);border:1px solid var(--warn-line);color:#7d5a08;
  padding:14px 16px;border-radius:var(--r-md);margin-bottom:var(--s-5);font-size:13px;
  line-height:1.6;
}
.warn-box code{background:rgba(0,0,0,.05);padding:1px 6px;border-radius:5px;font-size:12px}

/* ── saúde do sistema ──────────────────────────────────────────────────────
   No painel principal isto virou UMA linha; o detalhe abre quando se pede.
   Ocupar um terço da tela com nove luzinhas verdes é gastar o lugar mais caro
   da aplicação com a informação que menos muda. */
.health{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s-3)}
.hitem{display:flex;align-items:center;gap:11px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.hitem .hi{min-width:0}
.hitem .hn{font-weight:600;font-size:13px}
.hitem .hd{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

.status-line{
  display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;
  box-shadow:var(--shadow);
}
.status-line .sl-txt{flex:1;min-width:0}
.status-line .sl-txt b{display:block;font-size:14px;font-weight:650}
.status-line .sl-txt span{color:var(--muted);font-size:12.5px}
.status-line details{margin:0}
details.status-fold{margin-top:var(--s-4)}
details.status-fold summary{cursor:pointer;list-style:none;display:block}
details.status-fold summary::-webkit-details-marker{display:none}
details.status-fold[open] .status-line{border-radius:var(--r) var(--r) 0 0}
details.status-fold .health{background:var(--surface);border:1px solid var(--line);
  border-top:0;border-radius:0 0 var(--r) var(--r);padding:18px 20px}

/* ==========================================================================
   GRÁFICOS E BARRAS
   ========================================================================== */

.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .axis{font-size:11px;fill:var(--faint);font-family:inherit}
.chart .serie-a{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .serie-a-fill{fill:rgba(11,110,95,.08);stroke:none}
.chart .serie-a-dot{fill:var(--gold)}
.chart .serie-b{fill:none;stroke:var(--info);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .serie-b-fill{fill:rgba(31,111,178,.07);stroke:none}
.chart .serie-b-dot{fill:var(--info)}
.chart-empty{color:var(--muted);font-size:13px;text-align:center;padding:40px 0;margin:0}

.legend{display:flex;gap:18px;font-size:12.5px;color:var(--muted);margin-top:var(--s-3)}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;
  vertical-align:middle}
.legend .a i{background:var(--gold)}
.legend .b i{background:var(--info)}

/* ── funil ─────────────────────────────────────────────────────────────── */
.funnel{display:flex;flex-direction:column;gap:var(--s-2)}
.fn-step{display:grid;grid-template-columns:132px minmax(0,1fr) 118px;gap:var(--s-3);
  align-items:center}
.fn-label{font-size:12.5px;color:var(--ink-2);text-align:right}
.fn-track{position:relative;background:var(--surface-3);border-radius:var(--r-sm);height:30px;
  display:flex;align-items:center;overflow:hidden}
.fn-bar{height:100%;border-radius:var(--r-sm);background:linear-gradient(90deg,#2a9a85,var(--gold));
  min-width:3px;transition:width .4s ease}
.fn-value{position:absolute;left:11px;font-size:12.5px;font-weight:700;color:#fff}
.fn-value.outside{color:var(--ink);left:auto;right:11px}
.fn-rate{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:baseline;
  justify-content:flex-end}
.fn-rate.weak{color:var(--err);font-weight:600}
.fn-loss{color:var(--faint);font-weight:400}
.fn-top{color:var(--faint)}

/* ── barras horizontais ────────────────────────────────────────────────── */
.hbars{display:flex;flex-direction:column;gap:var(--s-3)}
.hb{display:grid;grid-template-columns:minmax(90px,200px) minmax(0,1fr) 104px;
  gap:var(--s-3);align-items:center}
.hb-label{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hb-track{background:var(--surface-3);border-radius:6px;height:10px;overflow:hidden}
.hb-bar{height:100%;border-radius:6px;background:var(--info);opacity:.9}
.hb-value{font-size:12.5px;font-weight:650;display:flex;gap:7px;align-items:baseline;
  justify-content:flex-end}
.hb-note{font-weight:400;color:var(--faint);font-size:12px}

.mini-bar{display:inline-block;width:56px;height:6px;background:var(--surface-3);
  border-radius:3px;overflow:hidden;vertical-align:middle}
.mini-bar i{display:block;height:100%;background:var(--info);opacity:.9}
.mini-bar.ok i{background:var(--ok)}
.mini-bar.warn i{background:var(--warn-ring)}

/* ==========================================================================
   ATENDIMENTO — três colunas
   ========================================================================== */

.inbox{
  display:grid;grid-template-columns:304px minmax(0,1fr) 296px;
  height:100vh;background:var(--surface);
}
.ib-list,.ib-chat,.ib-info{min-height:0}

/* ── coluna 1: conversas ───────────────────────────────────────────────── */
.ib-list{border-right:1px solid var(--line);display:flex;flex-direction:column;
  background:var(--surface)}
.ib-list-head{padding:18px 16px 12px;flex:0 0 auto}
.ib-list-head h2{margin:0 0 12px;font-size:20px;font-weight:700}
.ib-search{
  width:100%;height:40px;padding:0 13px 0 36px;border:1px solid #e1e5ea;
  border-radius:var(--r-md);font-size:13.5px;background:var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a0ae' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    no-repeat left 12px center;
}
.ib-search:focus{background-color:var(--surface)}

.ib-filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ib-chip{
  font-size:11.5px;font-weight:550;padding:4px 9px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--ink-2);line-height:1.4;
  transition:background var(--tempo),color var(--tempo);
}
.ib-chip:hover{background:#e2e8e5;color:var(--ink)}
.ib-chip.on{background:var(--gold);color:#fff}
.ib-chip.on:hover{background:var(--gold-hover);color:#fff}
.ib-chip b{font-weight:700;margin-left:5px;opacity:.65}
.ib-chip.precisa b{background:var(--signal);color:#fff;opacity:1;border-radius:var(--r-pill);padding:0 6px}
.ib-chip.precisa.on{background:var(--signal)}
.ib-chip.precisa.on b{background:#fff;color:var(--signal)}

.ib-threads{flex:1;overflow-y:auto;min-height:0;padding:0 8px 12px}
.ib-thread{
  display:flex;gap:11px;padding:11px 10px;border-radius:var(--r-md);
  color:inherit;position:relative;margin-bottom:2px;
  transition:background var(--tempo);
}
.ib-thread:hover{background:var(--hover);color:inherit}
.ib-thread.on{background:var(--gold-soft)}
.ib-thread.on::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--gold);
}
.ib-thread.on .ib-preview{color:var(--ink-2)}
/* com mais de um produto, o fio do produto corre pela borda da conversa; a
   conversa aberta continua marcada pelo fundo jade */
.ib-thread.com-fio::after{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--fio);opacity:.85;
}
.ib-thread.com-fio.on::before{display:none}

.ib-avatar{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-2);font-weight:650;font-size:14px;
}
.ib-thread.on .ib-avatar{background:#fff;color:var(--gold-ink)}
.ib-avatar.big{width:40px;height:40px;flex:0 0 40px}

.ib-thread-body{min-width:0;flex:1}
.ib-thread-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ib-name{font-weight:650;font-size:13.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--ink)}
.ib-time{font-size:11.5px;color:var(--faint);white-space:nowrap;flex:0 0 auto}
.ib-thread-bot{display:flex;justify-content:space-between;gap:8px;align-items:center;
  margin-top:3px}
.ib-preview{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0;flex:1}
.ib-preview.waiting{color:var(--ink);font-weight:600}
.ib-out-mark{color:var(--faint);font-size:11px;flex:0 0 auto;margin-right:4px}

/* as marcas da conversa viram etiquetas legíveis, não bolinhas sem legenda */
.ib-marks{display:flex;align-items:center;gap:5px;flex:0 0 auto;margin-top:5px;flex-wrap:wrap}
.ib-marks .m{
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);
  width:auto;height:auto;display:inline-flex;align-items:center;
}
.ib-marks .m.warn{background:var(--warn-soft);color:var(--warn)}
.ib-marks .m.human{background:var(--info-soft);color:var(--info)}
.ib-marks .m.dnc{background:var(--err-soft);color:var(--err)}
.ib-marks .m.ok{background:var(--ok-soft);color:var(--ok)}
/* clicou no checkout: o estágio mais quente antes da venda. Numa lista de
   trinta etiquetas cinzas ele se perdia, e é justamente a conversa que não
   pode esperar. O aro fechado é o que o separa do "enviado", que usa a mesma
   família de cor sem gritar. */
.ib-marks .m.clicou{background:var(--gold-soft);color:var(--gold-ink);
  box-shadow:inset 0 0 0 1px var(--gold-line);font-weight:800}
.ib-marks .m.enviado{background:var(--surface-3);color:var(--gold-ink)}
.ib-marks .temp{padding:2px 8px;border-radius:var(--r-pill);font-size:10px;font-weight:700;
  width:auto;height:auto;display:inline-flex;letter-spacing:.04em}
.temp.FRIO{background:var(--info-soft);color:var(--frio)}
.temp.MORNO{background:var(--warn-soft);color:var(--morno)}
.temp.QUENTE{background:var(--err-soft);color:var(--quente)}

.ib-thread.esperando{box-shadow:inset 3px 0 0 var(--gold)}
.ib-thread.nova .ib-name::after{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-left:6px;vertical-align:middle;
}
.ib-thread.nova .ib-preview{color:var(--ink);font-weight:600}

/* ── coluna 2: a conversa ──────────────────────────────────────────────── */
.ib-chat{display:flex;flex-direction:column;min-width:0;background:var(--bg);overflow:hidden}
.ib-chat.ib-blank{align-items:center;justify-content:center}

.ib-chat-head{
  display:flex;align-items:center;gap:12px;padding:14px 20px;flex:0 0 auto;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.ib-chat-who{flex:1;min-width:0}
.ib-chat-name{font-weight:650;font-size:16px;line-height:1.3;letter-spacing:-.01em}
.ib-chat-sub{font-size:12.5px;color:var(--muted);display:flex;align-items:center;
  gap:8px;margin-top:2px;flex-wrap:wrap}
.ib-chat-actions{display:flex;gap:8px;flex:0 0 auto;align-items:center}

/* o estado da IA é um indicador, não uma faixa ocupando a largura da tela */
.ai-state{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;background:var(--ok-soft);color:var(--ok);
}
.ai-state.off{background:var(--warn-soft);color:var(--warn)}
.ai-state .dot{width:7px;height:7px;box-shadow:none}
.ai-state.off .dot{background:var(--warn-ring)}
.ai-state .dot.ok{background:var(--ok)}

.ib-banner{
  padding:10px 20px;font-size:12.5px;line-height:1.55;flex:0 0 auto;
  background:var(--info-soft);color:#2a5fc9;border-bottom:1px solid var(--info-line);
}
.ib-banner strong{font-weight:650}
.ib-banner .btn{margin-left:8px;vertical-align:middle}
.ib-banner.human{background:var(--info-soft);color:#2a5fc9;border-bottom-color:var(--info-line)}
.ib-banner.dnc{background:var(--err-soft);color:#b23b3b;border-bottom-color:var(--err-line)}
.ib-banner a{color:inherit;text-decoration:underline}

.ib-messages{flex:1 1 0;overflow-y:auto;padding:22px 26px;min-height:0}
.ib-day{text-align:center;margin:18px 0 14px;font-size:11.5px;color:var(--muted)}
.ib-day span{background:var(--surface);border:1px solid var(--line);padding:4px 12px;
  border-radius:var(--r-pill)}

/* ── bolhas ────────────────────────────────────────────────────────────── */
.bub{
  max-width:74%;padding:11px 14px 8px;border-radius:14px;margin-bottom:10px;
  font-size:13.5px;line-height:1.55;word-wrap:break-word;position:relative;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
}
.bub.in{margin-right:auto;border-bottom-left-radius:5px}
.bub.out{margin-left:auto;border-bottom-right-radius:5px;
  background:var(--gold-soft);border-color:var(--gold-line)}
.bub.out.humano{background:var(--ok-soft);border-color:var(--ok-line)}
.bub.sys{background:var(--surface-3);border-color:var(--line);margin:10px auto;
  text-align:center;font-size:12.5px;max-width:80%;color:var(--ink-2);box-shadow:none}
.bub.shadow{background:#f4f0fd;border-color:#e0d6f5}
.bub em{color:var(--ink-2);font-style:normal}
.ib-messages .bub{max-width:62%}

.bub-img{display:block;margin:2px 0 6px}
.bub-img img{display:block;max-width:100%;width:240px;border-radius:10px}
.bub-audio{display:block;width:260px;max-width:100%;height:36px;margin:3px 0 6px}
.bub-video{display:block;width:240px;max-width:100%;border-radius:10px;margin:3px 0 6px;
  background:#000}

.bub .meta{font-size:11px;color:var(--faint);margin-top:5px;
  display:flex;align-items:center;justify-content:flex-end;gap:7px}
.bub.in .meta{justify-content:flex-start}
.bub .meta .fail{color:var(--err);font-weight:650}
.bub .meta .tick{opacity:.7}
.bub-tag{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);
}
.bub-tag.b-ia{background:var(--info-soft);color:var(--info)}
.bub-tag.b-humano{background:var(--ok-soft);color:var(--ok)}
.bub-tag.b-sistema{background:var(--surface-3);color:var(--ink-2)}
.bub-tag.b-rascunho{background:#f1ecfb;color:#6741b8}
.bub-tag.b-aprovar{background:var(--warn-soft);color:var(--warn)}
.bub-tag.b-falha{background:var(--err-soft);color:var(--err)}
.bub-flag{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted)}
.bub-flag.human{color:var(--ok)}

/* marcas de acontecimento no meio da conversa */
.ib-mark{text-align:center;margin:14px 0 12px;font-size:11.5px;line-height:1.5;
  background:none;padding:0;border-radius:0}
.ib-mark span{display:inline-block;padding:4px 12px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.ib-mark i{font-style:normal;opacity:.6;margin-left:8px}
.ib-mark.t-bom span{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.ib-mark.t-atencao span{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}

/* ── o relógio da IA ───────────────────────────────────────────────────── */
.ib-live{
  display:flex;align-items:center;gap:8px;padding:8px 20px;font-size:12.5px;
  color:var(--muted);background:var(--surface);border-top:1px solid var(--line);flex:0 0 auto;
}
.ib-live .dot{width:7px;height:7px;background:var(--faint);box-shadow:none}
.ib-live.s-waiting{color:var(--info);background:var(--info-soft)}
.ib-live.s-waiting .dot{background:var(--info);animation:pulso 1.4s ease-in-out infinite}
.ib-live.s-working{color:var(--ok);background:var(--ok-soft)}
.ib-live.s-working .dot{background:var(--ok);animation:pulso .9s ease-in-out infinite}
.ib-live.s-off{color:var(--warn);background:var(--warn-soft)}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .ib-live .dot{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ── escrever ──────────────────────────────────────────────────────────── */
.ib-compose{background:var(--surface);border-top:1px solid var(--line);padding:14px 20px 16px;
  flex:0 0 auto}
.ib-compose form{
  display:flex;gap:10px;align-items:flex-end;background:var(--surface);
  border:1px solid #e1e5ea;border-radius:var(--r);padding:8px 8px 8px 14px;
  transition:border-color var(--tempo),box-shadow var(--tempo);
}
.ib-compose form:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,139,0,.12)}
.ib-compose textarea{
  flex:1;resize:none;min-height:32px;max-height:150px;border:0;padding:6px 0;
  font-size:13.5px;line-height:1.5;background:transparent;
}
.ib-compose textarea:focus{outline:0;box-shadow:none}
.ib-compose-actions{display:flex;gap:8px;flex:0 0 auto}
.ib-compose .note{margin:8px 2px 0}

/* ── coluna 3: a ficha ─────────────────────────────────────────────────── */
.ib-info{border-left:1px solid var(--line);overflow-y:auto;padding:18px 18px 28px;
  background:var(--surface)}
.ib-info h2{margin:0 0 16px;font-size:16px;font-weight:650}
.ib-info .box{margin-bottom:var(--s-5);padding:0;border:0;box-shadow:none;background:none}
.ib-info .box h3{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);
  font-weight:700;margin-bottom:10px;
}
.side-panel .kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  font-size:13px;border-bottom:1px solid var(--line-soft)}
.side-panel .kv:last-child{border-bottom:0}
.side-panel .kv > span:first-child{color:var(--muted);flex:0 0 auto}
.side-panel .kv > span:last-child{text-align:right;font-weight:600;word-break:break-word}

/* conversa fora do atendimento (ficha do lead) */
.convo{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-5);align-items:start}
.chat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;max-height:560px;overflow-y:auto}
.convo .ib-live{border-radius:0 0 var(--r) var(--r);margin-top:-1px;border:1px solid var(--line)}

/* ── follow-ups na ficha ───────────────────────────────────────────────── */
.fu{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.fu:last-of-type{border-bottom:0}
.fu-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fu-regra{font-size:12px;font-weight:650;color:var(--ink-2)}
.fu-quando{font-size:12px;color:var(--muted)}
.fu-quando b{font-weight:650;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fu-nota{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.fu-acoes{display:flex;gap:7px;margin-top:9px}
.fu-linha-acoes{display:flex;align-items:center;gap:10px;white-space:nowrap}

.ib-som{filter:grayscale(.4)}
.ib-som[aria-pressed="true"]{filter:none;background:var(--ok-soft);border-color:var(--ok-line)}
.th-previa{display:inline}
.liga-venda{display:flex;gap:6px;align-items:center;margin:0}
.liga-venda select{height:32px;font-size:12.5px;max-width:200px}

/* ==========================================================================
   GAVETA LATERAL — detalhe sem trocar de página
   ========================================================================== */

.drawer{
  position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;z-index:60;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 200ms ease;
}
.drawer[open],.drawer.on{transform:translateX(0)}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:22px 24px 16px;border-bottom:1px solid var(--line-soft)}
.drawer-head h2{margin:0;font-size:20px}
.drawer-body{flex:1;overflow-y:auto;padding:20px 24px 32px}
.drawer-foot{border-top:1px solid var(--line);padding:16px 24px;display:flex;gap:10px;
  justify-content:flex-end;background:var(--surface-2)}
.drawer-close{background:none;border:0;cursor:pointer;color:var(--muted);padding:6px;
  border-radius:var(--r-sm);display:flex;line-height:0}
.drawer-close:hover{background:var(--surface-3);color:var(--ink)}
.drawer-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round}
.drawer-veil{position:fixed;inset:0;background:rgba(16,24,40,.34);z-index:55;
  opacity:0;pointer-events:none;transition:opacity 200ms ease}
.drawer-veil.on{opacity:1;pointer-events:auto}

/* pares rótulo/valor empilhados, para gaveta e ficha */
.stack{display:flex;flex-direction:column;gap:var(--s-5)}
.dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:4px}
.dd{font-size:14px;color:var(--ink);line-height:1.5}
.dd.big{font-size:20px;font-weight:650;letter-spacing:-.01em}

/* ==========================================================================
   LOGIN
   ========================================================================== */

.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:var(--bg);padding:24px}
.login-wrap{width:100%;max-width:392px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 34px;
  box-shadow:var(--shadow-md)}
.login-wrap .brand-block{text-align:center;margin-bottom:26px}
.login-wrap .brand-block h1{font-size:21px}
.login-wrap .brand-block p{color:var(--muted);font-size:13px;margin:6px 0 0}

/* ==========================================================================
   PAGINAÇÃO E MISCELÂNEA
   ========================================================================== */

.pager{display:flex;gap:10px;align-items:center;margin-top:var(--s-4);font-size:13px;
  color:var(--muted)}
.pager .btn{height:34px}

.brand{color:var(--ink);font-weight:700;display:flex;gap:6px;align-items:center}
.brand span{color:var(--gold)}
.who b{font-weight:600}

/* ==========================================================================
   TELAS MENORES
   O foco é desktop — isto é uma mesa de trabalho. Mas nada pode quebrar.
   ========================================================================== */

@media (max-width:1280px){
  .inbox{grid-template-columns:272px minmax(0,1fr) 268px}
  .main{padding:24px 24px 48px}
}

@media (max-width:1100px){
  .inbox{grid-template-columns:260px minmax(0,1fr)}
  .ib-info{display:none}
  .convo{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:900px){
  :root{--nav-w:0px}
  .side{transform:translateX(-100%);transition:transform 200ms ease;width:232px;flex-basis:232px}
  .side.on{transform:translateX(0)}
  .main{margin-left:0;padding:20px 16px 40px}
  .nav-toggle{display:inline-flex!important}
  .inbox{grid-template-columns:minmax(0,1fr);height:auto;min-height:100vh}
  .ib-list,.ib-info{display:none}
  .inbox.sem-escolha .ib-list{display:flex;padding-top:56px}
  .inbox.sem-escolha .ib-chat{display:none}
  .ib-voltar{display:inline-grid!important}
  .ib-chat-head{padding-left:56px}
  .page-head{padding-top:44px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .fn-step{grid-template-columns:96px minmax(0,1fr);row-gap:2px}
  .fn-rate{grid-column:2;justify-content:flex-start}
  .page-head{flex-direction:column;align-items:stretch}
}

.nav-toggle{display:none;position:fixed;left:12px;top:12px;z-index:40;
  width:38px;height:38px;border-radius:var(--r-md);background:var(--surface);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--shadow-md);cursor:pointer;align-items:center;justify-content:center}
.ib-voltar{display:none;width:32px;height:32px;place-items:center;border-radius:var(--r-sm);
  font-size:24px;line-height:1;color:var(--ink);margin-right:4px}
.ib-voltar:hover{background:var(--hover);color:var(--ink)}
.nav-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round}

@media print{
  .side,.ib-compose,.actions,.filters{display:none}
  .main{margin:0;padding:0}
}

/* ==========================================================================
   OFERTAS — leitura primeiro, edição quando se pede
   ========================================================================== */

.oferta{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px 26px;margin-bottom:var(--s-5);
}
.oferta.editando{border-color:var(--gold-line);box-shadow:0 0 0 3px rgba(197,139,0,.08)}

.of-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap}
.of-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.of-id h2{margin:0;font-size:22px;font-weight:700}
.of-preco{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.of-pitch{color:var(--ink-2);font-size:14px;margin:8px 0 0;max-width:70ch}

.of-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--s-5);
  align-items:end;margin-top:var(--s-5);padding-top:var(--s-5);
  border-top:1px solid var(--line-soft);
}
.of-meta .of-acao{justify-self:end;align-self:center}

.of-quando{background:var(--gold-soft);border-radius:var(--r-md);padding:14px 16px;
  margin-top:var(--s-5)}
.of-quando .dt{color:var(--gold-ink)}
.of-quando .dd{font-size:13.5px}

.of-itens{margin-top:var(--s-6)}
.of-itens-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-3)}
.of-itens-head h3{margin:0;font-size:15px}
.lista-itens{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px}
.lista-itens li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);
  font-size:13.5px}
.lista-itens li:hover{background:var(--surface-2)}
.lista-itens .mk{width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:grid;
  place-items:center;background:var(--ok-soft);color:var(--ok)}
.lista-itens .mk svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.lista-itens li.fora .mk{background:var(--err-soft);color:var(--err)}
.lista-itens li.fora .lb{color:var(--muted);text-decoration:line-through}
.lista-itens .lb{flex:1;min-width:0}

.of-form{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line)}

/* ── tabela de mídias ──────────────────────────────────────────────────────
   Título, resumo e etiquetas são a mesma pergunta — "qual mídia é esta?" — e
   por isso dividem uma célula. Nove colunas estouravam a largura da tela e
   empurravam o botão de testar para fora. */
.tbl-midias td:first-child{min-width:260px;max-width:340px}
.tbl-midias td:first-child strong{font-size:13.5px}
.tbl-midias .linhas-2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:3px;font-size:12.5px;line-height:1.45;
}
.tbl-midias .chips-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tbl-midias .chips-tags .tag{font-size:10.5px;padding:2px 8px;font-weight:600}
.tbl-midias audio{width:170px;height:34px}
.tbl-midias video{width:104px;border-radius:8px;background:#000}
.tbl-midias form.inline{display:inline-flex;gap:6px;align-items:center}
.tbl-midias form.inline input[type=text]{height:34px;font-size:12.5px}
.tbl-midias form.inline select{height:34px;font-size:12.5px}
.tbl-midias td{padding:14px 12px}

/* ── login: respiro entre os campos ─────────────────────────────────────── */
.login-wrap label{margin-top:var(--s-4)}
.login-wrap label:first-of-type{margin-top:0}
.login-wrap .btn{margin-top:var(--s-5)}

/* ── a ficha do lead, fora do atendimento ───────────────────────────────── */
.side-panel .kv > span:last-child{max-width:62%}

/* ── alturas iguais quando dois blocos dividem a linha ──────────────────── */
.grid-2 > .box{display:flex;flex-direction:column}
.grid-2 > .box > .funnel,.grid-2 > .box > svg{flex:1}

/* ── o estado da linha, na ficha ────────────────────────────────────────────
   O número fora do ar é estado da LINHA, não pedaço da conversa: atravessando
   o chat em faixa, ele empurrava as mensagens para baixo em toda conversa
   daquele número. */
.aviso-linha{
  background:var(--err-soft);border:1px solid var(--err-line);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:var(--s-5);font-size:12.5px;line-height:1.55;color:#a33a3a;
}
.aviso-linha b{display:block;color:#8f2f2f;font-size:13px;margin-bottom:3px}
.aviso-linha a{color:#8f2f2f;text-decoration:underline}

/* o que vai acontecer sozinho fica em azul, e não em faixa no meio do chat */
.bloco-agenda{
  background:var(--info-soft);border:1px solid var(--info-line);border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:var(--s-5);
}
.ib-info .bloco-agenda h3{color:#2a5fc9}
.bloco-agenda .fu{border-bottom-color:rgba(57,116,232,.18)}
.bloco-agenda .fu-regra{color:#2a5fc9}

/* ── o relógio da IA, no cabeçalho ──────────────────────────────────────────
   Era uma bolinha cinza sem rótulo embaixo do nome. Agora é etiqueta, ao lado
   do estado, do tamanho da informação que carrega. */
.ib-chat-actions .ib-live{
  border:0;padding:6px 12px;border-radius:var(--r-pill);background:var(--surface-3);
  font-size:12.5px;font-weight:600;flex:0 0 auto;
}
.ib-chat-actions .ib-live b{font-weight:600}

/* ── o que estava escondido precisa ficar escondido ─────────────────────────
   `.ib-live` é `display:flex`, e isso vence o `display:none` que o atributo
   `hidden` traz do navegador. Resultado: quando não havia o que dizer, sobrava
   uma bolinha cinza sem rótulo embaixo do nome do contato — que ninguém nunca
   entendeu, porque não era nada. */
.ib-live[hidden]{display:none}

/* o bloco azul da agenda precisa vencer o `background:none` da ficha */
.ib-info .bloco-agenda{
  background:var(--info-soft);border:1px solid var(--info-line);
  border-radius:var(--r-md);padding:14px 16px;
}
.ib-info .bloco-agenda h3{color:#2a5fc9;margin-bottom:8px}

/* ── a edição da oferta como gaveta ─────────────────────────────────────────
   O formulário é o mesmo de sempre e continua dentro do cartão. Quando o
   script está presente ele ganha esta forma: desliza pela direita, com o
   cartão continuando à vista atrás. Sem script, ele aparece embaixo do cartão
   como antes — e é por isso que a regra vive numa classe à parte. */
.of-form.como-gaveta{
  position:fixed;top:0;right:0;bottom:0;width:440px;max-width:94vw;z-index:60;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;margin:0;padding:0;border-top:0;
  animation:entra-gaveta 200ms ease;
}
@keyframes entra-gaveta{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.of-form-head{display:none}
.of-form.como-gaveta .of-form-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:22px 24px 16px;border-bottom:1px solid var(--line-soft);
}
.of-form-head h2{margin:0;font-size:19px}
.of-form-head .sub{margin-top:3px}
.of-form-body{padding:0}
.of-form.como-gaveta .of-form-body{flex:1;overflow-y:auto;padding:20px 24px 28px}
.of-form-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--s-5)}
.of-form.como-gaveta .of-form-foot{
  margin:0;padding:16px 24px;border-top:1px solid var(--line);background:var(--surface-2);
}
body.com-gaveta{overflow:hidden}

/* ── ligar uma venda a um lead, sem ocupar a linha ──────────────────────────
   O seletor aberto em toda linha sem dono convidava a adivinhar quem comprou.
   Agora é um link discreto: quem precisa, abre. */
.liga-det summary{
  cursor:pointer;list-style:none;font-size:12.5px;color:var(--muted);
  display:inline-flex;align-items:center;gap:5px;
}
.liga-det summary::-webkit-details-marker{display:none}
.liga-det summary::before{content:"+";font-weight:700;opacity:.6}
.liga-det summary:hover{color:var(--info)}
.liga-det[open] summary{margin-bottom:8px}
.liga-venda{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ── o relógio da IA, flutuando sobre a conversa ────────────────────────────
   É o único aviso que muda sozinho, e por isso não pode empurrar as mensagens
   para baixo cada vez que aparece. Fica ancorado no alto à direita e cresce
   para a esquerda conforme o texto.

   Ancorado em `.ib-corpo`, e não em `.ib-chat`: preso ao segundo, que começa
   no cabeçalho, ele caía em cima do "Assumir" e do "Ficha". */
.ib-corpo{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.ib-corpo > .ib-messages{flex:1 1 0;min-height:0}
.ib-corpo > .ib-live{
  position:absolute;top:14px;right:18px;z-index:5;
  width:auto;max-width:calc(100% - 36px);
  padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow-md);
  font-size:12.5px;font-weight:600;white-space:nowrap;
}
.ib-corpo > .ib-live.s-waiting{background:var(--info-soft);border-color:var(--info-line)}
.ib-corpo > .ib-live.s-working{background:var(--ok-soft);border-color:var(--ok-line)}
.ib-corpo > .ib-live.s-off{background:var(--warn-soft);border-color:var(--warn-line)}

/* ── o cabeçalho da conversa não cresce ─────────────────────────────────────
   Nome de instância comprido quebrava a linha e empurrava o cabeçalho para
   baixo. Agora a etiqueta encolhe com reticências e a altura é a mesma
   sempre. */
.ib-chat-sub{flex-wrap:nowrap;overflow:hidden}
.ib-chat-sub > *{flex:0 0 auto}
.ib-chat-sub .tag{
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;
}
.ib-chat-head{min-height:68px}

/* ── apagar o lead: fechado, e sem parecer um botão qualquer ───────────────
   É a única ação da tela sem desfazer. Fica dentro de um `<details>` para não
   dividir espaço com "Assumir conversa", e a confirmação é digitar o telefone
   de novo — um `confirm()` some com um Enter distraído. */
.apagar-lead{margin-top:var(--s-4);border-top:1px solid var(--line);padding-top:var(--s-3)}
.apagar-lead > summary{
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--err);
  list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.apagar-lead > summary::-webkit-details-marker{display:none}
.apagar-lead > summary::before{content:"⚠";font-size:12px}
.apagar-lead > summary:hover{text-decoration:underline}
.apagar-lead .note{margin:var(--s-3) 0;max-width:62ch}
.apagar-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apagar-form label{font-size:12.5px;color:var(--muted)}
.apagar-form input{
  width:180px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:13px;
}
.apagar-form input:focus{outline:0;border-color:var(--err);box-shadow:0 0 0 3px rgba(217,75,75,.12)}

/* a hora guarda os segundos no `title` — o cursor avisa que há o que ver */
.bub .meta .hora,
.ib-mark i{cursor:help}

/* ── a agenda do follow-up: a data não vaza ─────────────────────────────────
   `CHECKOUT_NO_PURCHASE` não cabe ao lado da data em 260px de painel. O ciclo
   ocupa a linha inteira; a data saiu da linha dele e virou a legenda logo
   abaixo, alinhada à esquerda como todo o resto da caixa — encostada na
   direita ela deixava um rombo branco no meio do bloco. */
.fu-top{flex-wrap:wrap}
.fu-regra{flex:1 1 100%;word-break:break-word;line-height:1.35}
.fu-quando{margin-top:3px;line-height:1.35}

/* um bloco por número, quando há mais de um */
.freio-titulo{display:flex;align-items:baseline;gap:10px;margin:var(--s-5) 0 var(--s-3)}
.freio-titulo strong{font-size:13.5px}
.freio-titulo .sub{font-size:12.5px}
.freio-titulo:first-of-type{margin-top:0}

/* ==========================================================================
   VENDAS · A PASTINHA
   Cada produto de uma compra chega da Hotmart como uma transação à parte, e
   em linhas de tabela quem levou a Biblioteca e dois order bumps parecia três
   vendas. Um cartão por compra, com a soma na frente; clicando, os itens.
   ========================================================================== */
.compras{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--s-4);margin-bottom:var(--s-5);align-items:start}
.compra{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);transition:box-shadow var(--tempo),border-color var(--tempo)}
.compra:hover{box-shadow:var(--shadow-md)}
.compra[open]{border-color:var(--gold-line);box-shadow:var(--shadow-md)}
/* compra que não entrou fica apagada: continua à vista, mas não disputa o
   olho com o dinheiro que entrou */
.compra.is-off{background:var(--surface-2)}
.compra.is-off .compra-titulo,.compra.is-off .compra-valores strong{color:var(--ink-2)}
.compra > summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;
  flex-direction:column;gap:10px}
.compra > summary::-webkit-details-marker{display:none}
.compra-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.compra-topo .tag{margin-left:auto}
.compra-onde{color:var(--ink-2)}
.compra-titulo{font-weight:650;font-size:14.5px;line-height:1.35;color:var(--ink)}
.compra-mais{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:var(--r-pill);
  background:var(--info-soft);color:var(--info);font-size:12px;font-weight:650;white-space:nowrap}
.compra-valores{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compra-valores .dt{font-size:11.5px;color:var(--faint);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600}
.compra-valores .dd{font-size:14px;margin-top:2px;font-variant-numeric:tabular-nums}
.compra-valores strong{font-size:16px;color:var(--ok)}
.compra-brl{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.compra-rodape{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.compra-rodape a{font-weight:600}
.compra-corpo{border-top:1px solid var(--line-soft);padding:12px 18px 16px;display:flex;
  flex-direction:column;gap:10px}
/* o nome ocupa a linha inteira (os bumps têm nomes longos: "100 Bosquejos de
   Sermones Listos para Predicar"), e os dois valores vêm embaixo */
.compra-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;font-size:13px}
.compra-item > :first-child{grid-column:1 / -1;line-height:1.4}
.compra-item .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.compra-item .num:last-child{text-align:right}
.compra-item .tag{padding:1px 8px;font-size:11px;margin-right:4px}
.compra-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--muted)}
.compra-corpo .note{margin:0}
/* "não entrou" e "líquido não informado": presente, mas em segundo plano */
.compra .faint,.compra-ficha .faint{color:var(--faint)}
@media (max-width:520px){
  .compras{grid-template-columns:minmax(0,1fr)}
}

/* a mesma compra, compacta, na ficha do lead */
.compra-ficha{padding:10px 0;border-top:1px solid var(--line-soft);display:flex;
  flex-direction:column;gap:4px;font-size:13px}
.compra-ficha:first-of-type{border-top:0;padding-top:0}
.compra-ficha .linha{display:flex;justify-content:space-between;gap:8px;align-items:center}
.compra-ficha .faint{font-size:12px}

/* abas da tela de Follow-ups: o bot vendendo e a recuperação do checkout */
.abas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.abas .abas-n{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:rgba(0,0,0,.08);font-size:11px;line-height:18px;text-align:center}

/* 19/10 · a faixa de "a IA parou" (ver IaFora) e o tempo de espera na fila
   "Precisa de você" (ver FilaHumana). */
.ia-fora{background:#b42318;color:#fff;font-weight:600;font-size:13.5px;padding:10px 16px;
  border-radius:10px;margin:0 0 14px}
.main.flush .ia-fora{border-radius:0;margin:0}
.ib-espera{font-size:11.5px;color:#b42318;font-weight:600;margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}


/* 19/10 · os produtos no Atendimento (o fio de cada um: ver `.fio`) */
.ib-produtos{margin-top:6px}
.ib-produtos .ib-chip.on .fio{color:inherit}

/* ==========================================================================
   A PONTE (20/10) — números e títulos com a fonte de título
   O número é o que se lê primeiro numa tela de operação; na Schibsted ele
   tem peso sem precisar de cor. O resto da interface fica na Public Sans.
   ========================================================================== */
.card .v,.kpi-v,.fn-value,.hb-value,.page-head h1{font-family:var(--f-display);letter-spacing:-.025em}
/* algarismos proporcionais no número grande: os tabulares da Schibsted
   abriam a vírgula ("8 , 69"). Na tabela, onde a coluna precisa alinhar,
   continuam tabulares. */
.card .v,.kpi-v,.hb-value{font-variant-numeric:proportional-nums}
.page-head h1{font-size:26px}
.ib-list-head h2,.ib-chat-name{font-family:var(--f-display);letter-spacing:-.02em}
.ib-time,.mono,td.num{font-variant-numeric:tabular-nums}
.login-wrap .brand-block .mark{width:44px;height:44px;border-radius:12px;display:inline-grid;place-items:center;
  background:var(--gold);color:#fff;margin-bottom:12px}
.login-wrap .brand-block .mark svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.login-wrap .brand-block h1{font-size:26px;letter-spacing:-.03em}
.ib-limpar{padding:0 16px 8px}
.ib-limpar .link{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;
  background:none;border:0;padding:0;cursor:pointer}
.ib-limpar .link:hover{color:var(--ink)}