/* ============================================================================
   CRM OPERVYN — base visual de todas as telas
   Mesmo desenho do CRM do consórcio e da 5Hormone (lateral fixa, faixa de
   indicadores, quadro em colunas, ficha à direita), vestido com a marca.

   Cor com avareza. O roxo #8B7CFF é a única cor de ação. O limão #C6FF3D só
   aparece em dinheiro fechado. O resto é tipografia, numeração em mono e
   filetes finos. Sem pílula colorida, sem ícone em caixinha.
   ============================================================================ */

:root, :root[data-theme="dark"]{
  --bg:#07070D; --tint:#0A0A12; --surface:#0E0E18; --surface-2:#14141F; --surface-3:#1C1C2A;
  --side:#030306;
  --vidro:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  --brilho:inset 0 1px 0 rgba(255,255,255,.05);
  --c1:#8B7CFF; --c2:#27A2CA; --c3:#DC5A9A; --c4:#62627A;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05); --line-3:rgba(255,255,255,.14);
  --ink:#F4F4F8; --ink-2:#D6D6E4; --muted:#9A9AB4; --faint:#62627A;
  --accent:#8B7CFF; --accent-2:#A99DFF; --accent-ink:#0B0B1A; --accent-soft:rgba(139,124,255,.12);
  --lima:#C6FF3D; --lima-soft:rgba(198,255,61,.08);
  --red:#FF8A9A; --red-soft:rgba(255,90,120,.08);
  --overlay:rgba(3,3,8,.66);
  --shadow:0 24px 60px rgba(0,0,0,.55);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F5F4F0; --tint:#EDEBE5; --surface:#FFFFFF; --surface-2:#FAF9F6; --surface-3:#F0EEE8;
  --side:#FFFFFF;
  --vidro:linear-gradient(180deg,#FFFFFF,#FCFBF9);
  --brilho:0 1px 2px rgba(15,15,18,.04);
  --c1:#4B3BFF; --c2:#0B7FB0; --c3:#C2188F; --c4:#A6A6B2;
  --line:#E2E0D9; --line-2:#ECEAE4; --line-3:#CFCCC3;
  --ink:#0F0F12; --ink-2:#3A3A44; --muted:#77778A; --faint:#A6A6B2;
  --accent:#4B3BFF; --accent-2:#3A2BE0; --accent-ink:#FFFFFF; --accent-soft:rgba(75,59,255,.08);
  --lima:#3F6B00; --lima-soft:rgba(110,170,0,.10);
  --red:#B4432F; --red-soft:#F6E6E1;
  --overlay:rgba(15,15,18,.32);
  --shadow:0 24px 60px rgba(15,15,18,.16);
  color-scheme:light;
}
:root{
  --side-w:232px;
  --font:"Geist",-apple-system,"Segoe UI",system-ui,Arial,sans-serif;
  --display:var(--font);
  --mono:"Geist Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  --r:14px; --r-sm:9px;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:14px; line-height:1.45; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-synthesis:none;
}
h1,h2,h3,h4{ font-family:var(--display); letter-spacing:-.02em; margin:0; font-weight:600; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; }
.num, .mono{ font-variant-numeric:tabular-nums; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
*{ scrollbar-width:thin; scrollbar-color:var(--line-3) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line-3); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
[hidden]{ display:none !important; }

/* ── rótulo ──────────────────────────────────────────────────────────── */
.rot{ font-size:12px; font-weight:500; letter-spacing:0; color:var(--muted); }
.rot b{ font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:500; margin-right:2px; }

/* ── botões ───────────────────────────────────────────────────────────────── */
button, .btn{
  font:inherit; cursor:pointer; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:36px; padding:0 15px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:13px; font-weight:500; letter-spacing:-.005em;
  transition:background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
:root:not([data-theme="light"]) .btn-primary{ box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 24px rgba(139,124,255,.28); }
.btn-primary:hover{ background:var(--accent-2); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-3); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-quiet{ background:transparent; color:var(--muted); padding:0 10px; }
.btn-quiet:hover{ color:var(--ink); background:var(--surface-2); }
.btn-danger{ background:transparent; color:var(--red); padding:0 10px; }
.btn-danger:hover{ background:var(--red-soft); }
.btn-sm{ height:30px; padding:0 11px; font-size:12.5px; }
button:active{ transform:scale(.985); }
button:disabled{ opacity:.45; cursor:default; transform:none; }
.icon-btn{ width:32px; height:32px; padding:0; color:var(--muted); background:transparent; }
.icon-btn:hover{ color:var(--ink); background:var(--surface-2); }
.icon-btn svg{ width:16px; height:16px; }

/* ── campos ───────────────────────────────────────────────────────────────── */
input, select, textarea{
  font:inherit; font-size:13.5px; width:100%; color:var(--ink);
  background:var(--tint); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 11px; transition:border-color .15s var(--ease), background-color .15s var(--ease);
}
select{ appearance:none; padding-right:30px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
textarea{ resize:vertical; min-height:72px; line-height:1.5; }
input::placeholder, textarea::placeholder{ color:var(--faint); }
input:hover, select:hover, textarea:hover{ border-color:var(--line-3); }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); background:var(--surface); }
input[type="date"], input[type="time"]{ font-variant-numeric:tabular-nums; font-size:13px; }
label, .lbl{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:500; }
.field{ margin-bottom:14px; min-width:0; }
.senha-campo{ position:relative; }
.senha-campo input{ width:100%; padding-right:76px; }
.ver-senha{ position:absolute; top:50%; right:6px; transform:translateY(-50%); height:30px; padding:0 10px; background:none; border:0; border-radius:6px; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.ver-senha:hover{ color:var(--ink); background:var(--surface-2); }
.ver-senha:active{ transform:translateY(-50%); }
.ver-senha:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 12px; }

/* seletor segmentado (temperatura, tipo) */
.seg{ display:flex; border:1px solid var(--line); border-radius:var(--r-sm); padding:2px; background:var(--tint); }
.seg button{ flex:1; height:30px; border-radius:6px; background:transparent; color:var(--muted); font-size:12.5px; }
.seg button:hover{ color:var(--ink); }
.seg button.on{ background:var(--surface-3); color:var(--ink); box-shadow:0 0 0 1px var(--line-3) inset; }

/* ============================================================================
   LATERAL
   ============================================================================ */
body.app{ padding-left:var(--side-w); }
.side{
  position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:40;
  display:flex; flex-direction:column; padding:18px 12px 14px;
  background:var(--side); border-right:1px solid var(--line);
}
.side-nav a .ic, .topo-m{ display:none; }
.side-brand{ display:flex; align-items:center; gap:10px; padding:2px 8px 0; text-decoration:none; }
.side-brand img{ width:28px; height:28px; display:block; }
.side-brand .nm{ font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.022em; color:var(--ink); line-height:1; }
.side-brand .sub{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.side-sep{ height:1px; background:var(--line); margin:18px -12px 14px; }
.side-grp{ padding:0 10px; margin:4px 0 8px; }
.side-nav{ display:flex; flex-direction:column; gap:1px; }
.side-nav a{
  display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; border-radius:9px;
  text-decoration:none; color:var(--muted); font-size:13.5px; font-weight:500;
  transition:background-color .12s, color .12s;
}
.side-nav a .n{ font-family:var(--mono); font-size:10.5px; color:var(--faint); width:16px; }
.side-nav a .ct{ margin-left:auto; font-variant-numeric:tabular-nums; font-size:11px; color:var(--faint); }
.side-nav a:hover{ color:var(--ink); background:var(--surface-2); }
.side-nav a.on{ color:var(--ink); background:var(--surface-3); box-shadow:var(--brilho); }
.side-nav a.on .n{ color:var(--accent); }
.side-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); margin-inline:-12px; padding-inline:12px; }
.side-me{ display:flex; align-items:center; gap:6px; padding:6px 0 0 4px; }
.av{
  width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-3); background:var(--surface-2); font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--ink-2);
}
.side-perfil{ flex:1; min-width:0; height:auto; padding:5px; gap:9px; justify-content:flex-start; text-align:left; background:transparent; color:var(--ink); font-weight:400; border-radius:9px; }
.side-perfil:hover{ background:var(--surface-2); }
.av{ overflow:hidden; }
.av img{ display:block; width:100%; height:100%; object-fit:cover; }
.side-me .who{ display:block; min-width:0; flex:1; }
.side-me .who b{ display:block; font-weight:500; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-me .who span{ display:block; font-size:11px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; }

/* ============================================================================
   TOPO DE CADA TELA
   ============================================================================ */
.top{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px;
  padding:20px 28px 14px; background:var(--bg);
}
.top h1{ font-size:24px; line-height:1.1; }
.top .acoes{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.busca{ position:relative; width:260px; }
.busca input{ padding-left:32px; height:36px; }
.busca svg{ position:absolute; left:10px; top:50%; width:14px; height:14px; transform:translateY(-50%); color:var(--faint); pointer-events:none; }

.page{ padding:8px 28px 60px; }

/* cartão de vidro escuro, a base de indicadores, painéis e colunas */
.kpi, .meta, .painel, .cartao, .semana, .tabela{
  border:1px solid var(--line); border-radius:var(--r); background:var(--vidro); box-shadow:var(--brilho);
}

/* ============================================================================
   FAIXA DE INDICADORES — cartões separados, cada um com seu gráfico pequeno
   ============================================================================ */
.kpis{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.kpi{ padding:15px 16px 14px; min-width:0; }
.kpi .rot{ display:flex; gap:8px; white-space:nowrap; overflow:hidden; }
.kpi .rot .i{ font-family:var(--mono); font-size:11px; color:var(--faint); }
.kv{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:12px; height:36px; }
.kpi .v{ font-family:var(--display); font-size:27px; font-weight:600; letter-spacing:-.022em; line-height:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.kpi .v small{ font-size:13px; color:var(--muted); font-weight:500; letter-spacing:-.01em; margin-left:4px; }
.kpi .d{ margin-top:10px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi.ganho .v{ color:var(--lima); }
.kpi.alerta .v{ color:var(--red); }

/* barra da meta */
.meta{ display:flex; align-items:center; gap:18px; margin-top:12px; padding:11px 16px; }
.meta .rot{ flex:none; }
.meta .trilho{ flex:1; height:4px; border-radius:4px; background:var(--surface-3); overflow:hidden; }
.meta .trilho i{ display:block; height:100%; width:0; background:var(--accent); border-radius:4px; transition:width .9s var(--ease-out); }
.meta .tx{ flex:none; font-size:12.5px; color:var(--muted); }
.meta .tx b{ color:var(--ink); font-weight:500; }
.meta .pct{ flex:none; font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--accent); width:44px; text-align:right; }

/* ============================================================================
   QUADRO DO FUNIL
   ============================================================================ */
.board{ display:flex; gap:10px; padding:12px 28px 24px; overflow-x:auto; align-items:stretch; }
.col{
  flex:1 1 0; min-width:168px; max-width:340px; display:flex; flex-direction:column;
  border-radius:var(--r); background:var(--tint); border:1px solid var(--line-2);
  height:max(380px, calc(100vh - 306px));
}
.col-h{ padding:13px 14px 8px; border-bottom:1px solid var(--line-2); }
.col-h .l1{ display:flex; align-items:baseline; gap:8px; }
.col-h .n{ font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.col-h .t{ font-weight:600; font-size:13px; letter-spacing:-.01em; }
.col-h .q{ margin-left:auto; font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--muted); }
.col-h .s{ margin-top:3px; font-variant-numeric:tabular-nums; font-size:11px; color:var(--faint); padding-left:24px; min-height:16px; }
.col-b{ padding:8px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; flex:1; min-height:80px; }
.col.drop{ border-color:var(--accent); background:var(--accent-soft); }
.col.fechado .col-h .s{ color:var(--lima); }
.col-vazio{ border:1px dashed var(--line); border-radius:10px; padding:18px 10px; text-align:center; color:var(--faint); font-size:12px; }

/* coluna dos perdidos, recolhida por padrão */
.col.perdido{ flex:0 0 52px; min-width:52px; max-width:52px; cursor:pointer; }
.col.perdido .col-h{ writing-mode:vertical-rl; transform:rotate(180deg); padding:14px 0; align-self:center; }
.col.perdido .col-h .l1{ gap:10px; }
.col.perdido .col-h .q{ margin:0; }
.col.perdido .col-h .s, .col.perdido .col-b{ display:none; }
.col.perdido.aberta{ flex:1 1 0; min-width:168px; max-width:340px; cursor:default; }
.col.perdido.aberta .col-h{ writing-mode:horizontal-tb; transform:none; padding:14px 14px 4px; align-self:stretch; }
.col.perdido.aberta .col-b{ display:flex; }
.col.perdido.aberta .col-h .s{ display:block; }

/* card */
.card{
  position:relative; flex:none; background:var(--vidro), var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:12px 13px 12px 14px; cursor:grab; user-select:none; box-shadow:var(--brilho);
  transition:border-color .15s var(--ease), transform .15s var(--ease), background-color .15s var(--ease);
}
.card:hover{ border-color:var(--line-3); transform:translateY(-1px); }
.card:active{ cursor:grabbing; }
.card.arrastando{ opacity:.4; }
.card::before{ content:''; position:absolute; left:-1px; top:12px; bottom:12px; width:2px; border-radius:2px; background:transparent; }
.card.t-quente::before{ background:var(--accent); }
.card .passos{ margin-top:11px; }
.card .emp{ font-weight:600; font-size:13.5px; line-height:1.3; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance; }
.card .pes{ margin-top:2px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .val{ margin-top:10px; font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-2); }
.card.fechado .val{ color:var(--lima); }
.card .passo{ margin-top:10px; padding-top:9px; border-top:1px solid var(--line-2); display:flex; gap:8px; align-items:baseline; font-size:12px; color:var(--muted); }
.card .passo span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .passo time{ flex:none; font-variant-numeric:tabular-nums; font-size:11px; color:var(--faint); }
.card .passo.hoje time{ color:var(--accent); }
.card .passo.atrasado time{ color:var(--red); }
.card .mot{ margin-top:8px; font-size:12px; color:var(--faint); }

/* prioridade da lista de prospecção. Só a letra em mono, A na cor de ação */
.prio{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--faint); margin-right:7px; letter-spacing:0; }
.prio.p-A{ color:var(--accent); }
.prio.p-B{ color:var(--ink-2); }
.tabela .prio{ margin:0; }

/* próximo lote de cards ou de linhas */
.col-mais{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; width:100%; height:auto; padding:11px 12px;
  background:transparent; border:1px dashed var(--line-3); border-radius:10px; color:var(--ink-2); font-size:12.5px; font-weight:500; }
.col-mais span{ font-variant-numeric:tabular-nums; font-size:11px; color:var(--faint); font-weight:400; }
.col-mais:hover{ border-color:var(--accent); color:var(--accent); }
.lista-mais{ margin-top:14px; }

/* ============================================================================
   TABELA DE CONTATOS
   ============================================================================ */
.filtros{ display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.filtros select{ width:auto; min-width:150px; height:34px; padding-block:0; }
.filtros .tot{ margin-left:auto; }
/* Pastas de contatos, uma por lista, na ordem de prioridade */
.pastas{ display:flex; align-items:stretch; gap:2px; margin-bottom:16px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.pastas::-webkit-scrollbar{ display:none; }
.pasta{ flex:none; display:flex; align-items:baseline; gap:8px; padding:9px 12px 11px; margin-bottom:-1px; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); font:inherit; font-size:13px; white-space:nowrap; cursor:pointer; transition:color .15s var(--ease); }
.pasta i{ font-family:var(--mono); font-style:normal; font-size:11px; color:var(--faint); }
.pasta span{ font-family:var(--mono); font-size:11px; color:var(--faint); }
.pasta:hover{ color:var(--ink); }
.pasta.on{ color:var(--ink); border-bottom-color:var(--accent); }
.pasta.on i{ color:var(--accent); }
.pastas-org{ flex:none; position:sticky; right:0; margin-left:auto; align-self:center; height:30px; background:var(--bg); box-shadow:-14px 0 14px var(--bg); }
.pasta-lin{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line-2); }
.pasta-lin:last-child{ border-bottom:0; }
.pasta-lin i{ font-family:var(--mono); font-style:normal; font-size:11px; color:var(--faint); width:18px; }
.pasta-lin input{ flex:1; min-width:0; }
.pasta-lin span{ font-family:var(--mono); font-size:11px; color:var(--faint); min-width:40px; text-align:right; }
.tabela{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; }
.tabela th{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.quem{ display:flex; align-items:center; gap:11px; min-width:0; }
.quem .av{ width:32px; height:32px; }
.tabela .passos{ margin-top:7px; max-width:112px; }
.tabela td{ padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; font-size:13px; }
.tabela tr:last-child td{ border-bottom:0; }
.tabela tbody tr{ cursor:pointer; transition:background-color .1s; }
.tabela tbody tr:hover td{ background:var(--surface-2); }
.tabela .emp{ font-weight:600; letter-spacing:-.01em; }
.tabela .sub{ color:var(--muted); font-size:12px; margin-top:1px; }
.tabela .mono{ font-size:12.5px; color:var(--ink-2); white-space:nowrap; }
.tabela td:has(.etp){ min-width:128px; }
.tabela .fraco{ color:var(--faint); }
.etp{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); white-space:nowrap; }
.etp i{ font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.etp.fechado{ color:var(--lima); } .etp.perdido{ color:var(--faint); }
.vazio{ padding:64px 20px; text-align:center; border:1px dashed var(--line-3); border-radius:var(--r); }
.vazio h3{ font-size:18px; }
.vazio p{ color:var(--muted); margin:8px auto 18px; max-width:420px; }
.vazio .bts{ display:flex; gap:8px; justify-content:center; }

/* ============================================================================
   AGENDA
   ============================================================================ */
.semana-nav{ display:flex; align-items:center; gap:6px; }
.semana-nav .t{ font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ink-2); min-width:150px; text-align:center; }
.semana{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); overflow:hidden; }
.dia{ border-left:1px solid var(--line); min-height:420px; display:flex; flex-direction:column; min-width:0; }
.dia:first-child{ border-left:0; }
.dia-h{ padding:12px 12px 10px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:8px; }
.dia-h .w{ font-size:12px; font-weight:500; color:var(--muted); }
.dia-h .d{ margin-left:auto; font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink-2); }
.dia.hoje .dia-h .d{ color:var(--accent); }
.dia.hoje .dia-h{ box-shadow:inset 0 2px 0 var(--accent); }
.dia.fds{ background:var(--tint); }
.dia-b{ padding:8px; display:flex; flex-direction:column; gap:6px; flex:1; cursor:copy; }
.reu{ border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:var(--surface-2); cursor:pointer; transition:border-color .12s; }
.reu:hover{ border-color:var(--line-3); }
.reu .h{ font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--accent); }
.reu .tt{ font-size:12.5px; font-weight:500; margin-top:3px; line-height:1.3; }
.reu .tp{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.reu.realizada .h{ color:var(--muted); } .reu.realizada{ opacity:.7; }
.reu.cancelada, .reu.faltou{ opacity:.45; } .reu.cancelada .tt, .reu.faltou .tt{ text-decoration:line-through; }

.lista-dia{ margin-top:22px; }
.lista-dia h3{ font-size:15px; margin-bottom:10px; }

/* ============================================================================
   METAS
   ============================================================================ */
.grade{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin-top:12px; }
.painel{ padding:18px 20px 20px; min-width:0; display:flex; flex-direction:column; }
.painel h3{ font-size:15px; margin-top:6px; }
.painel .ph{ display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; }
.painel .ph .acao{ margin-left:auto; }
.painel .ph .forte{ font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.span-3{ grid-column:span 3; } .span-4{ grid-column:span 4; } .span-5{ grid-column:span 5; } .span-6{ grid-column:span 6; } .span-7{ grid-column:span 7; } .span-8{ grid-column:span 8; } .span-12{ grid-column:span 12; }

.alvos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.cartao{ padding:15px 16px 14px; min-width:0; }
.cartao .v{ font-family:var(--display); font-size:27px; font-weight:600; letter-spacing:-.022em; margin-top:10px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.cartao .v small{ font-size:13px; color:var(--muted); font-weight:500; margin-left:4px; letter-spacing:-.01em; }
.cartao .trilho{ height:4px; background:var(--surface-3); border-radius:4px; margin-top:12px; overflow:hidden; }
.cartao .trilho i{ display:block; height:100%; background:var(--accent); border-radius:4px; width:0; transition:width .9s var(--ease-out); }
.cartao.ok .trilho i{ background:var(--lima); }
.cartao .d{ margin-top:9px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================================
   GRÁFICOS — marcas finas, pontas redondas, grade quase invisível
   ============================================================================ */
.s1{ --cor:var(--c1); } .s2{ --cor:var(--c2); } .s3{ --cor:var(--c3); } .s4{ --cor:var(--c4); }

/* traços de avanço no funil */
.passos{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; }
.passos i{ height:3px; border-radius:3px; background:var(--surface-3); }
.passos i.on{ background:var(--accent); }
.passos.fechado i.on{ background:var(--lima); }

/* barras pequenas dos indicadores */
.bx{ flex:none; display:flex; align-items:flex-end; gap:3px; height:34px; }
.bx i{ width:6px; border-radius:3px 3px 1px 1px; background:var(--surface-3); }
.bx i.on{ background:var(--accent); }
.kpi.ganho .bx i.on{ background:var(--lima); }

/* medidor em meio arco */
.med{ flex:none; width:62px; height:34px; display:block; overflow:visible; }
.med path{ fill:none; stroke-width:14; stroke-linecap:round; }
.med .trilha{ stroke:var(--surface-3); }
.med .cheio{ stroke:var(--accent); }
.med.alerta .cheio{ stroke:var(--red); }

/* anéis e meio círculo */
.fig{ position:relative; width:min(210px,100%); margin:2px auto 14px; }
.aneis{ display:block; width:100%; }
.aneis circle, .aneis path{ fill:none; }
.aneis .trilha{ stroke:var(--surface-3); stroke-width:5; }
.aneis path:not(.trilha){ stroke:var(--cor); stroke-width:8; stroke-linecap:round; }
.fig .centro{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.fig .centro b{ font-family:var(--display); font-size:27px; font-weight:600; letter-spacing:-.022em; font-variant-numeric:tabular-nums; }
.fig .centro span{ font-size:11.5px; color:var(--muted); }
.fig.semi{ width:min(250px,100%); }
.fig.semi .aneis .trilha{ stroke-width:12; }
.fig.semi .aneis path:not(.trilha){ stroke-width:12; stroke-linecap:butt; }
.fig.semi .centro{ justify-content:flex-end; padding-bottom:0; }

.leg{ display:flex; flex-direction:column; margin-top:auto; }
.leg > div{ display:grid; grid-template-columns:9px 1fr auto 42px; align-items:center; gap:9px; padding:7px 0; border-top:1px solid var(--line-2); font-size:13px; color:var(--ink-2); }
.leg > div:first-child{ border-top:0; }
.leg i{ width:8px; height:8px; border-radius:50%; background:var(--cor); }
.leg em{ font-style:normal; font-variant-numeric:tabular-nums; font-size:12px; color:var(--muted); }
.leg b{ font-variant-numeric:tabular-nums; font-size:12px; font-weight:500; text-align:right; }

/* colunas e área com eixo */
.eixo-graf{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:190px auto; column-gap:10px; }
.eixo{ display:flex; flex-direction:column; justify-content:space-between; text-align:right; font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--faint); min-width:14px; margin-block:-6px; }
.area-graf{ position:relative; min-width:0; }
.grade-l{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.grade-l i{ display:block; height:1px; background:var(--line-2); }
.grade-l i:last-child{ background:var(--line); }
.barras{ position:absolute; inset:0; display:flex; }
.barras .b{ flex:1; display:flex; align-items:flex-end; justify-content:center; padding-inline:4px; }
.barras .b i{ display:block; width:100%; max-width:34px; min-height:2px; border-radius:4px 4px 0 0; background:var(--surface-3); transition:height .9s var(--ease-out); }
.barras .b.on i{ background:var(--accent); }
.barras .b:hover i{ filter:brightness(1.2); }
.eixo-x{ grid-column:2; display:grid; margin-top:9px; font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--faint); text-align:center; }
.eixo-x.ponta{ display:flex; justify-content:space-between; }
.g-linha{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.g-linha .tr{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.g-linha rect{ fill:transparent; }
.g-linha rect:hover{ fill:var(--accent-soft); }
.sem-dado{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-size:12.5px; color:var(--muted); white-space:nowrap; }

/* dica ao passar o mouse */
.dica{ position:fixed; z-index:130; pointer-events:none; opacity:0; padding:6px 10px; border-radius:8px; font-size:12px; font-weight:500;
  background:var(--surface-3); color:var(--ink); border:1px solid var(--line-3); box-shadow:var(--shadow); white-space:nowrap; transition:opacity .12s var(--ease); }
.dica.on{ opacity:1; }

/* funil horizontal em barras */
.funil-l{ display:flex; flex-direction:column; gap:10px; }
.fl{ display:grid; grid-template-columns:24px 128px 1fr 44px 96px; align-items:center; gap:10px; font-size:13px; }
.fl .n{ font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.fl .b{ height:8px; background:var(--surface-3); border-radius:4px; overflow:hidden; }
.fl .b i{ display:block; height:100%; background:var(--accent); opacity:.85; border-radius:4px; transition:width .9s var(--ease-out); }
.fl .q{ font-variant-numeric:tabular-nums; font-size:12.5px; text-align:right; color:var(--ink-2); }
.fl .r{ font-variant-numeric:tabular-nums; font-size:12px; text-align:right; color:var(--muted); }
.fl.fechado .b i{ background:var(--lima); }
.fl.perdido .b i{ background:var(--faint); }

.linhas{ display:flex; flex-direction:column; }
.linhas .ln{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; padding:10px 0; border-top:1px solid var(--line-2); font-size:13px; }
.linhas .ln:first-child{ border-top:0; padding-top:0; }
.linhas .ln .k{ flex:1; color:var(--ink-2); }
.linhas .ln .x{ font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--muted); }
.linhas .ln .y{ font-variant-numeric:tabular-nums; font-size:12.5px; margin-left:auto; text-align:right; }

/* ============================================================================
   FICHA DO CONTATO (gaveta à direita) e MODAIS
   ============================================================================ */
.ov{ position:fixed; inset:0; z-index:80; background:var(--overlay); opacity:0; pointer-events:none; transition:opacity .22s var(--ease); }
.ov.on{ opacity:1; pointer-events:auto; }
.gaveta{
  position:fixed; top:0; right:0; bottom:0; z-index:81; width:min(620px,100vw);
  background:var(--bg); border-left:1px solid var(--line); box-shadow:var(--shadow);
  transform:translateX(102%); transition:transform .32s var(--ease-out);
  display:flex; flex-direction:column;
}
.gaveta.on{ transform:none; }
.gv-h{ padding:22px 26px 18px; border-bottom:1px solid var(--line); display:flex; gap:16px; align-items:flex-start; }
.gv-h .tt{ min-width:0; flex:1; }
.gv-h .passos{ margin-top:12px; max-width:280px; }
.av-g{ width:56px; height:56px; font-size:17px; color:var(--ink); background:var(--accent-soft); border-color:var(--line-3); }
.gv-h h2{ font-size:22px; line-height:1.15; }
.gv-h .sub{ color:var(--muted); margin-top:5px; font-size:13px; }
.gv-h .lig{ display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.gv-h .lig a{ font-size:12.5px; color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-3); padding-bottom:1px; }
.gv-h .lig a:hover{ color:var(--accent); border-color:var(--accent); }
.gv-etapa{ padding:14px 26px; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:center; }
.gv-etapa select{ width:auto; min-width:180px; height:34px; padding-block:0; }
.gv-b{ flex:1; overflow-y:auto; padding:6px 26px 30px; }
.gv-f{ padding:14px 26px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; background:var(--tint); }
.gv-f .esp{ flex:1; }

.bloco{ padding:22px 0 6px; border-bottom:1px solid var(--line-2); }
.bloco:last-child{ border-bottom:0; }
.bloco > .rot{ margin-bottom:14px; display:block; }

/* a conta (o que o contato paga hoje) */
.conta-lista{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.conta-item{ display:grid; grid-template-columns:1fr 130px 32px; gap:8px; }
.conta-item input:last-of-type{ font-variant-numeric:tabular-nums; }
.conta{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:10px; margin-top:12px; overflow:hidden; }
.conta > div{ padding:12px 14px; border-left:1px solid var(--line); }
.conta > div:first-child{ border-left:0; }
.conta .v{ font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; }
.conta .forte .v{ color:var(--red); }
.conta-nota{ margin-top:10px; font-size:12.5px; color:var(--muted); }
.conta-nota b{ color:var(--ink); font-weight:500; }

/* histórico */
.nota-nova{ border:1px solid var(--line); border-radius:10px; background:var(--tint); padding:10px; }
.nota-nova textarea{ border:0; background:transparent; padding:4px; min-height:56px; }
.nota-nova textarea:focus{ background:transparent; }
.nota-nova .linha{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.nota-nova .seg{ flex:1; }
.tl{ margin-top:16px; }
.tl-i{ display:grid; grid-template-columns:76px 1fr; gap:12px; padding:11px 0; border-top:1px solid var(--line-2); }
.tl-i:first-child{ border-top:0; }
.tl-i .q{ font-variant-numeric:tabular-nums; font-size:11px; color:var(--faint); line-height:1.5; }
.tl-i .tp{ font-size:12px; font-weight:500; color:var(--muted); }
.tl-i .tx{ margin-top:3px; font-size:13px; color:var(--ink-2); white-space:pre-wrap; word-break:break-word; }
.tl-i.etapa .tx{ color:var(--muted); }

/* modal central */
.modal{
  position:fixed; z-index:91; left:50%; top:50%; width:min(520px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow-y:auto;
  transform:translate(-50%,-48%) scale(.98); opacity:0; pointer-events:none;
  background:var(--bg); border:1px solid var(--line-3); border-radius:14px; box-shadow:var(--shadow);
  transition:opacity .2s var(--ease), transform .25s var(--ease-out);
}
.modal.on{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.ov.modal-ov{ z-index:90; }
.md-h{ padding:20px 22px 0; display:flex; align-items:flex-start; gap:12px; }
.md-h h2{ font-size:19px; margin-top:6px; }
.md-h .icon-btn{ margin-left:auto; }
.md-b{ padding:18px 22px 6px; }
.md-f{ padding:12px 22px 20px; display:flex; gap:8px; align-items:center; }
.md-f .esp{ flex:1; }
.md-b .ajuda{ font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.md-b .ajuda code{ font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.arquivo{ border:1px dashed var(--line-3); border-radius:10px; padding:22px; text-align:center; color:var(--muted); cursor:pointer; transition:border-color .15s, background-color .15s; }
.arquivo:hover, .arquivo.drop{ border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.arquivo b{ color:var(--ink); font-weight:500; }

/* ============================================================================
   CONVERSAS — lista, conversa e ficha lado a lado
   ============================================================================ */
.sdr{ display:flex; flex-direction:column; gap:10px; height:calc(100vh - 86px); padding:6px 28px 20px; }
.sdr-alertas{ flex:none; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--vidro); box-shadow:var(--brilho); }
.sa-h{ display:flex; align-items:center; justify-content:space-between; }
.sa-h .btn-sm{ height:26px; }
.sa-i{ display:flex; gap:12px; justify-content:space-between; padding:6px 0; border-top:1px solid var(--line-2); font-size:13px; color:var(--ink-2); }
.sa-i[data-id]{ cursor:pointer; }
.sa-i[data-id]:hover{ color:var(--ink); }
.sa-i time{ flex:none; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; }
.conv{ flex:1; min-height:0; display:grid; grid-template-columns:320px minmax(0,1fr) 280px; border:1px solid var(--line); border-radius:var(--r); background:var(--vidro); box-shadow:var(--brilho); overflow:hidden; }
.conv-lista{ display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); }
.conv-lista .busca{ display:block; width:auto; margin:12px; flex:none; }
.cv-lista{ flex:1; overflow-y:auto; padding:0 6px 8px; }
.cv-vazio{ padding:24px 14px; text-align:center; font-size:13px; color:var(--muted); }
.cv{ display:flex; align-items:flex-start; gap:10px; width:100%; height:auto; padding:10px 8px; border-radius:10px; background:transparent; color:var(--ink); font-weight:400; text-align:left; white-space:normal; }
.cv:hover{ background:var(--surface-2); }
.cv.on{ background:var(--surface-3); }
.cv .av{ width:36px; height:36px; font-size:11.5px; }
.cv-t{ flex:1; min-width:0; display:block; }
.cv-t .l1{ display:flex; gap:8px; align-items:baseline; }
.cv-t b{ flex:1; min-width:0; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-t time{ flex:none; font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.cv-t .l2{ display:flex; gap:8px; align-items:center; margin-top:2px; font-size:12.5px; color:var(--muted); }
.cv-t .l2 > span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-t em{ flex:none; font-style:normal; font-size:12px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.cv-t .l3{ display:block; margin-top:3px; font-size:11.5px; color:var(--faint); }

.conv-chat{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.chat-vazio{ margin:auto; padding:24px; text-align:center; }
.chat-vazio h3{ font-size:16px; }
.chat-vazio p{ margin-top:6px; font-size:13px; color:var(--muted); }
.ch-h{ flex:none; display:flex; align-items:center; gap:8px; padding:12px 18px; border-bottom:1px solid var(--line); }
.ch-h #ch-volta{ display:none; }
.ch-h b{ display:block; font-size:14px; font-weight:600; }
.ch-h span{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ch-b{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:16px 18px; }
.bal{ max-width:74%; align-self:flex-start; }
.bal.enviada{ align-self:flex-end; }
.bal .bt{ padding:8px 12px; border-radius:12px 12px 12px 3px; background:var(--surface-3); font-size:13.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.bal.enviada .bt{ border-radius:12px 12px 3px 12px; background:var(--accent-soft); }
.bal .bm{ margin-top:3px; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.bal.enviada .bm{ text-align:right; }
.ch-f{ flex:none; display:flex; gap:8px; align-items:flex-end; padding:10px 18px 4px; }
.ch-f textarea{ min-height:36px; max-height:120px; resize:none; padding-block:8px; }
.ch-nota{ flex:none; padding:0 18px 10px; font-size:11.5px; color:var(--faint); }

.conv-ficha{ min-height:0; overflow-y:auto; padding:18px 16px; border-left:1px solid var(--line); }
.ff-h{ text-align:center; padding-bottom:14px; }
.ff-h .av{ margin:0 auto 10px; }
.ff-h h3{ font-size:15px; }
.ff-h p{ margin-top:2px; font-size:12.5px; color:var(--muted); }
.ff{ padding:11px 0; border-top:1px solid var(--line-2); }
.ff .rot{ display:block; margin-bottom:4px; }
.ff p{ font-size:13px; color:var(--ink-2); }
.ff .passos{ margin-top:7px; }
.ff-b{ display:flex; flex-direction:column; align-items:stretch; gap:6px; }

/* ============================================================================
   CÉREBRO — mapa do atendimento, editor e proteções
   ============================================================================ */
.abas{ width:auto; }
.abas button{ padding:0 14px; }
.intro{ margin-bottom:12px; font-size:13.5px; color:var(--muted); max-width:640px; }
.mapa{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px; align-items:start; }
.mc{ position:relative; min-width:0; }
.mc + .mc::before{ content:''; position:absolute; left:-26px; width:26px; top:44px; height:1px; background:var(--line-3); }
.mc > .rot{ display:block; margin-bottom:10px; }
.mi{ display:flex; flex-direction:column; gap:8px; }
.no{ display:block; width:100%; height:auto; padding:11px 13px; text-align:left; white-space:normal; font-weight:400; color:var(--ink); border:1px solid var(--line); border-radius:11px; background:var(--vidro), var(--surface); box-shadow:var(--brilho); }
button.no:hover{ border-color:var(--accent); }
.no b{ display:block; font-size:13px; font-weight:600; line-height:1.3; }
.no span{ display:block; margin-top:3px; font-size:12px; color:var(--muted); }
.no.editado{ box-shadow:inset 2px 0 0 var(--accent); }

.cb-ov{ position:fixed; inset:0; z-index:70; background:var(--overlay); opacity:0; pointer-events:none; transition:opacity .22s var(--ease); }
.cb-ov.on{ opacity:1; pointer-events:auto; }
.cb-painel{ position:fixed; top:0; right:0; bottom:0; z-index:71; width:min(640px,100vw); display:flex; flex-direction:column; background:var(--bg); border-left:1px solid var(--line); box-shadow:var(--shadow); transform:translateX(102%); transition:transform .32s var(--ease-out); }
.cb-painel.on{ transform:none; }
.pn-h{ flex:none; display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:20px 24px 16px; border-bottom:1px solid var(--line); }
.pn-h h2{ margin-top:6px; font-size:20px; }
.pn-b{ flex:1; min-height:0; overflow-y:auto; padding:16px 24px; }
.pn-b textarea{ min-height:320px; line-height:1.55; }
.pn-v{ margin-top:18px; }
.ln-v{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line-2); font-variant-numeric:tabular-nums; }
.pn-f{ flex:none; display:flex; gap:8px; align-items:center; padding:12px 24px; border-top:1px solid var(--line); background:var(--tint); }
.pn-f .esp{ flex:1; }
.vz{ font-size:13px; color:var(--muted); }
.tr-s{ padding:11px 0; border-top:1px solid var(--line-2); font-size:13px; }
.tr-s:first-child{ border-top:0; padding-top:0; }
.tr-s > .rot{ display:block; margin-bottom:5px; }
.tr-i{ padding:3px 0; }
.tr-i b{ display:block; font-size:13px; font-weight:500; }
.tr-i code{ display:block; font-family:var(--mono); font-size:11px; color:var(--faint); word-break:break-all; }
.tr-al{ color:var(--red); }
.pr{ display:grid; grid-template-columns:minmax(0,1fr) 54px 150px; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line-2); }
.pr:first-child{ border-top:0; padding-top:0; }
.pr:last-child{ padding-bottom:0; }
.pr b{ font-size:13.5px; font-weight:600; }
.pr p{ margin-top:2px; font-size:12.5px; color:var(--muted); }
.pr-t{ font-size:12px; color:var(--muted); }
.pr-f{ font-size:12.5px; color:var(--faint); text-align:center; }

/* conexões */
.cx-sel{ font-size:12.5px; color:var(--muted); }
.cx-f{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.cx-f span{ display:block; font-size:12px; color:var(--muted); }
.cx-f b{ display:block; margin-top:2px; font-size:13.5px; font-weight:500; word-break:break-all; }
.cx-l{ display:flex; gap:8px; }
.cx-l input{ flex:1; min-width:0; }
.cx-aj{ margin-top:8px; font-size:12.5px; color:var(--muted); }
.cx-sa{ margin-top:6px; min-height:18px; font-size:12.5px; color:var(--ink-2); }
.cx-sep{ height:1px; margin:16px 0; background:var(--line-2); }
.side-nav .side-grp{ margin:14px 0 6px; padding:0 10px; }

.sim-m{ display:flex; flex-direction:column; gap:8px; height:300px; overflow-y:auto; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--tint); }
.sim-e{ display:flex; flex-direction:column; gap:2px; min-height:18px; margin-top:8px; font-size:12px; color:var(--muted); }
.modal .ch-f{ padding:8px 0 0; }
.z-qr{ display:block; width:240px; max-width:100%; margin:6px auto; border-radius:10px; background:#fff; padding:8px; }

/* perfil */
.perfil-foto{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.av-p{ width:84px; height:84px; font-size:24px; color:var(--ink); background:var(--accent-soft); }
.perfil-foto > div{ flex:1; min-width:0; }
.perfil-foto .bts{ display:flex; flex-wrap:wrap; gap:6px; }
.perfil-foto p{ margin-top:8px; font-size:12.5px; color:var(--muted); }
input:disabled{ color:var(--muted); cursor:default; }

/* aviso rápido */
.toast{
  position:fixed; bottom:22px; left:50%; z-index:120; transform:translate(-50%,16px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:9px; font-size:13px; font-weight:500;
  transition:opacity .2s var(--ease), transform .25s var(--ease-out); box-shadow:var(--shadow);
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* entrada suave */
@keyframes sobe{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  :root:not(.sem-entrada) :is(.kpis, .meta, .col, .semana, .painel){ animation:sobe .45s var(--ease-out) both; }
  :root:not(.sem-entrada) .col:nth-child(2){ animation-delay:.03s } :root:not(.sem-entrada) .col:nth-child(3){ animation-delay:.06s } :root:not(.sem-entrada) .col:nth-child(4){ animation-delay:.09s }
  :root:not(.sem-entrada) .col:nth-child(5){ animation-delay:.12s } :root:not(.sem-entrada) .col:nth-child(6){ animation-delay:.15s } :root:not(.sem-entrada) .col:nth-child(7){ animation-delay:.18s }
}

/* troca de tela. A lateral não entra na animação, só o miolo */
@view-transition{ navigation:auto; }
.side{ view-transition-name:lateral; }
.topo-m{ view-transition-name:topo-m; }
::view-transition{ background:var(--bg); }
::view-transition-group(lateral), ::view-transition-group(topo-m){ animation:none; z-index:2; }
::view-transition-old(lateral), ::view-transition-old(topo-m){ display:none; }
::view-transition-new(lateral), ::view-transition-new(topo-m){ animation:none; }
::view-transition-old(root){ animation:sai .1s var(--ease) both; }
::view-transition-new(root){ animation:entra .26s var(--ease-out) .05s both; }
@keyframes sai{ to{ opacity:0; } }
@keyframes entra{ from{ opacity:0; transform:translateY(5px); } }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

/* ============================================================================
   TELAS ESTREITAS
   ============================================================================ */
@media (max-width:1320px){
  .kv .bx, .kv .med{ display:none; }
  .kv{ height:30px; }
  .col{ height:max(380px, calc(100vh - 298px)); }
}
@media (max-width:1320px){
  .mapa{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mc:nth-child(4)::before{ display:none; }
}
@media (max-width:1100px){
  .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .alvos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8{ grid-column:span 12; }
  .semana{ grid-template-columns:repeat(7,minmax(120px,1fr)); overflow-x:auto; }
}
/* celular. Topo com a marca, abas embaixo e cartões no lugar da tabela */
@media (max-width:860px){
  body.app{ padding:0 0 calc(70px + env(safe-area-inset-bottom)); }
  .topo-m{ display:flex; align-items:center; gap:4px; padding:12px 16px 4px; }
  .topo-m .side-brand{ padding:0; margin-right:auto; }
  .topo-m .side-brand .nm{ font-size:17px; }
  .topo-m .dt{ font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); margin-right:6px; }
  .side{ inset:auto 0 0 0; width:auto; height:calc(66px + env(safe-area-inset-bottom)); flex-direction:row; align-items:flex-start; padding:0 8px env(safe-area-inset-bottom); border-right:0; border-top:1px solid var(--line); }
  .side > .side-brand, .side-sep, .side-grp, .side-foot{ display:none; }
  .side-nav{ flex:1; flex-direction:row; gap:0; }
  .side-nav a{ flex:1; flex-direction:column; justify-content:center; gap:4px; height:65px; padding:0; border-radius:0; font-size:11px; }
  .side-nav a:hover{ background:transparent; }
  .side-nav a.on{ background:transparent; box-shadow:inset 0 2px 0 var(--accent); color:var(--accent); }
  .side-nav a .ic{ display:block; width:21px; height:21px; }
  .side-nav a .n, .side-nav a .ct{ display:none; }
  .top{ position:static; flex-wrap:wrap; padding:12px 16px 10px; align-items:flex-start; }
  .top h1{ font-size:25px; }
  .top .acoes{ margin-left:0; width:100%; flex-wrap:wrap; }
  .top .acoes select{ flex:1 1 40%; min-width:0; }
  .top .acoes .btn-ghost{ flex:1; }
  .top .acoes .btn-primary{ flex:1 1 100%; }
  .busca{ width:100%; }
  .page{ padding:8px 16px 28px; }
  .board{ padding:12px 16px 16px; scroll-snap-type:x mandatory; scroll-padding-inline:16px; }
  .kpis{ display:flex; gap:8px; overflow-x:auto; margin-inline:-16px; padding-inline:16px; scroll-snap-type:x proximity; scroll-padding-inline:16px; scrollbar-width:none; }
  .kpi{ flex:0 0 62%; scroll-snap-align:start; }
  .alvos{ gap:8px; }
  .cartao .d{ white-space:normal; min-height:2.9em; }
  .col, .col.perdido.aberta{ flex:0 0 84%; min-width:0; max-width:none; height:66vh; scroll-snap-align:start; }
  .col.perdido{ flex:0 0 52px; }
  .meta{ flex-wrap:wrap; gap:8px 12px; }
  .meta .trilho{ flex-basis:100%; order:3; }
  .side-nav a[href="/cerebro.html"], .side-nav a[href="/conexoes.html"], .side-nav .side-grp{ display:none; }
  .mapa{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .mc + .mc::before{ display:none; }
  .abas{ width:100%; }
  .abas button{ padding:0 4px; }
  .pr{ grid-template-columns:minmax(0,1fr) 150px; }
  .pr-t{ display:none; }
  .cx-l{ flex-wrap:wrap; }
  .cx-l input{ flex:1 1 100%; }
  .cx-l .btn-ghost, .cx-l .btn-primary{ flex:1; }
  .pn-h, .pn-b, .pn-f{ padding-left:16px; padding-right:16px; }
  .sdr{ height:calc(100dvh - 270px); min-height:420px; padding:6px 16px 8px; }
  .conv{ grid-template-columns:minmax(0,1fr); }
  .conv-ficha{ display:none; }
  .conv-lista{ border-right:0; }
  .conv .conv-chat{ display:none; }
  .conv.aberta .conv-lista{ display:none; }
  .conv.aberta .conv-chat{ display:flex; }
  .ch-h #ch-volta{ display:inline-flex; }
  .bal{ max-width:86%; }
  .tabela .esconde, .tabela thead{ display:none; }
  .tabela, .tabela tbody{ display:block; border:0; background:none; box-shadow:none; overflow:visible; }
  .tabela tbody{ display:flex; flex-direction:column; gap:8px; }
  .tabela tbody tr{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--vidro); box-shadow:var(--brilho); }
  .tabela td{ display:block; padding:0; border:0; }
  .tabela tbody tr:hover td{ background:none; }
  .tabela td:has(.quem), .tabela td:has(.emp){ flex:1 1 72%; min-width:0; }
  .tabela td:has(.etp){ flex:1 1 100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .tabela td .passos{ margin:0; flex:0 0 96px; }
  .filtros select{ flex:1 1 40%; min-width:0; }
  .grid2, .grid3{ grid-template-columns:1fr; }
  .fl{ grid-template-columns:20px 100px 1fr 30px; }
  .fl .r{ display:none; }
  .conta{ grid-template-columns:1fr; }
  .conta > div{ border-left:0; border-top:1px solid var(--line); }
  .conta > div:first-child{ border-top:0; }
  .gv-h, .gv-etapa, .gv-b, .gv-f{ padding-left:16px; padding-right:16px; }
  .gv-etapa{ flex-wrap:wrap; }
  .av-g{ width:44px; height:44px; font-size:14px; }
}