/* ═══════════════════════════════════════════════════════════════════════
   CRM — O DASHBOARD OVERVIEW
   ═══════════════════════════════════════════════════════════════════════
   A planta é a da referência, 1:1: lateral escura com foto e menu, topo com
   busca e ações, grade de cartões no meio, coluna da direita com Top 5 e
   Links. A TINTA é a da casa — CORES.md —, e essa foi uma decisão tomada
   junto: copiar o roxo da referência criaria uma ilha com identidade própria
   dentro de um produto que passou semanas sendo alinhado em azul e branco.

   ── POR QUE A LATERAL É ESCURA NOS DOIS TEMAS ───────────────────────────
   Ela não é conteúdo, é moldura: o lugar de onde se escolhe para onde ir. No
   tema claro, uma lateral branca ao lado de um conteúdo branco não separaria
   nada — foi exatamente o problema da linha do tempo do processo. O azul
   escuro da marca (#0f2744 → #1454b5) resolve nos dois temas com uma regra
   só, e é o mesmo par que o topo do app já usa.

   ── AS VARIÁVEIS FICAM NO ALTO ──────────────────────────────────────────
   Tudo que muda entre os temas é token. Uma cor escrita no meio de uma regra
   aqui embaixo é uma cor que alguém vai esquecer de virar quando o tema
   mudar — o histórico deste repositório é feito disso.
   ═══════════════════════════════════════════════════════════════════════ */

#crm-overview{
  --ov-lateral-a:#0f2744;
  --ov-lateral-b:#1454b5;
  --ov-lateral-txt:rgba(255,255,255,.72);
  --ov-lateral-txt-forte:#fff;
  --ov-lateral-sel:rgba(255,255,255,.10);
  --ov-lateral-linha:rgba(255,255,255,.10);

  --ov-mesa:#f1f5fa;
  --ov-cartao:#fff;
  --ov-linha:#d8e3f0;
  --ov-ink:#0f2744;
  --ov-muted:#536b84;
  --ov-faint:#71869d;
  --ov-marca:#2f7ff2;
  --ov-marca-fundo:#e8f1fe;
  --ov-bom:#0b7f59;
  --ov-bom-fundo:#e4f7ef;
  --ov-aviso:#a35d06;
  --ov-aviso-fundo:#fff7e6;
  --ov-erro:#c2334a;
  --ov-erro-fundo:#fdeced;

  display:none;
  grid-template-columns:262px minmax(0,1fr) 296px;
  /* ── AS LINHAS PRECISAM SER DECLARADAS ──────────────────────────────
     `grid-template-rows:auto` declara UMA linha; as outras nascem implícitas
     e o navegador reparte a altura entre elas. Com a lateral em
     `grid-row:1/-1`, a linha 1 ficou com 365px e o topo — que vive nela —
     esticou para preencher: uma barra de busca de 38px flutuando no meio de
     um bloco branco de 365. Medido na página, foi assim que apareceu.

     `auto 1fr` diz o que se queria: o topo ocupa o que precisa, o resto é do
     conteúdo. */
  grid-template-rows:auto minmax(0,1fr);
  align-content:start;
  height:100%;
  background:var(--ov-mesa);
  color:var(--ov-ink);
  font-family:'Inter',sans-serif;
}
#crm-overview.visible{display:grid;}

/* No tema escuro a mesa e os cartões escurecem; a lateral já era escura e
   fica onde está — é o que faz a moldura ser a mesma nos dois. */
html[data-theme="dark"] #crm-overview,
#crm-overview{
  --ov-mesa:#f1f5fa;
}
html:not([data-theme="light"]) #crm-overview{
  --ov-mesa:#0a0f16;
  --ov-cartao:#111820;
  --ov-linha:rgba(255,255,255,.09);
  --ov-ink:#f0f0f0;
  --ov-muted:rgba(240,240,240,.62);
  --ov-faint:rgba(240,240,240,.42);
  --ov-marca:#58a7f6;
  --ov-marca-fundo:rgba(88,167,246,.14);
  --ov-bom:#6ee7b7;
  --ov-bom-fundo:rgba(110,231,183,.12);
  --ov-aviso:#fcd34d;
  --ov-aviso-fundo:rgba(252,211,77,.12);
  --ov-erro:#fca5a5;
  --ov-erro-fundo:rgba(252,165,165,.12);
}
html[data-theme="light"] #crm-overview{
  --ov-mesa:#f1f5fa;
  --ov-cartao:#fff;
  --ov-linha:#d8e3f0;
  --ov-ink:#0f2744;
  --ov-muted:#536b84;
  --ov-faint:#71869d;
  --ov-marca:#2f7ff2;
  --ov-marca-fundo:#e8f1fe;
  --ov-bom:#0b7f59;
  --ov-bom-fundo:#e4f7ef;
  --ov-aviso:#a35d06;
  --ov-aviso-fundo:#fff7e6;
  --ov-erro:#c2334a;
  --ov-erro-fundo:#fdeced;
}

/* ── A LATERAL ─────────────────────────────────────────────────────────── */
.ov-lado{
  grid-column:1;grid-row:1 / -1;
  min-height:0;
  background:linear-gradient(178deg,var(--ov-lateral-a) 0%,var(--ov-lateral-b) 100%);
  padding:26px 0 30px;
  display:flex;flex-direction:column;gap:4px;
  overflow-y:auto;
}
.ov-perfil{display:flex;flex-direction:column;align-items:center;gap:11px;padding:0 18px 26px;}
.ov-perfil-foto{
  width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:4px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:800;color:#fff;
}
.ov-perfil-nome{color:#fff;font-size:1rem;font-weight:700;letter-spacing:.01em;text-align:center;}

.ov-menu{display:flex;flex-direction:column;}
.ov-item{
  display:flex;align-items:center;gap:13px;
  padding:11px 20px;cursor:pointer;border:0;background:none;width:100%;
  color:var(--ov-lateral-txt);
  font-family:inherit;font-size:.74rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;text-align:left;
  transition:background .16s,color .16s;
}
.ov-item:hover{background:rgba(255,255,255,.06);color:#fff;}

/* ── O MODO DE EDIÇÃO DA LISTA ──────────────────────────────────────────
   Editando, a lista mostra TAMBÉM o que está escondido, apagado e com o olho
   fechado. Sem isso não há como trazer de volta o que se escondeu: uma lista
   de seis com dois faltando não diz quais são os dois. */
.ov-item-edit{padding-right:14px;}
.ov-item-edit .ov-item-rot{flex:1;}
.ov-item.oculto{opacity:.42;}
.ov-item.oculto .ov-item-ico{filter:grayscale(1);}
.ov-item-olho{
  width:17px;height:17px;flex-shrink:0;opacity:.72;
  display:flex;align-items:center;justify-content:center;
}
.ov-item-olho svg{width:17px;height:17px;}
.ov-item-edit:hover .ov-item-olho{opacity:1;}

/* ── O RODAPÉ ───────────────────────────────────────────────────────────
   `margin-top:auto` empurra para baixo numa lateral que é coluna flex: o
   ajuste fica longe da navegação, que é onde ele deve ficar — se faz uma vez
   e não se olha de novo. */
.ov-lado-pe{margin-top:auto;padding:18px 18px 0;}
.ov-editar{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 12px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.05);
  color:var(--ov-lateral-txt);
  font-family:inherit;font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;text-align:left;
  transition:background .16s,border-color .16s,color .16s;
}
.ov-editar:hover{background:rgba(255,255,255,.12);color:#fff;}
.ov-editar.on{background:#fff;border-color:#fff;color:#12263f;}
.ov-editar-ico{width:15px;height:15px;flex-shrink:0;}
.ov-editar-ico svg{width:15px;height:15px;display:block;}
.ov-editar-dica{
  margin:9px 2px 0;font-size:.68rem;line-height:1.45;
  color:var(--ov-lateral-txt);opacity:.72;text-transform:none;letter-spacing:0;
}
.ov-item.sel{background:var(--ov-lateral-sel);color:#fff;box-shadow:inset 3px 0 0 #fff;}
/* O QUADRADINHO COLORIDO é o que a referência usa para dar identidade a cada
   item sem escrever o nome duas vezes. Cada painel tem a sua cor, e ela é a
   mesma que o painel usa por dentro. */
.ov-item-ico{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
  background:var(--ico,rgba(255,255,255,.16));
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.ov-item-rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ov-item-mais{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);color:#fff;font-size:.8rem;line-height:1;
}

/* O SUBMENU. A referência abre um nível sob o item selecionado, com um traço
   ligando cada filho — é o que mostra que eles pertencem ao de cima. */
.ov-sub{display:none;flex-direction:column;padding:2px 0 8px;background:rgba(0,0,0,.14);}
.ov-item.aberto + .ov-sub{display:flex;}
.ov-sub-item{
  display:flex;align-items:center;gap:10px;padding:7px 20px 7px 22px;
  color:var(--ov-lateral-txt);cursor:pointer;border:0;background:none;
  font-family:inherit;font-size:.76rem;font-weight:600;text-align:left;
  transition:color .16s;
}
.ov-sub-item:hover{color:#fff;}
.ov-sub-item.fundo{padding-left:44px;font-weight:500;font-size:.74rem;position:relative;}
.ov-sub-item.fundo::before{
  content:"";position:absolute;left:26px;top:50%;width:10px;height:1px;
  background:rgba(255,255,255,.28);
}

/* ── O TOPO ────────────────────────────────────────────────────────────── */
.ov-topo{
  grid-column:2 / -1;grid-row:1;
  display:flex;align-items:center;gap:16px;
  padding:14px 22px;
  background:var(--ov-cartao);
  border-bottom:1px solid var(--ov-linha);
}
.ov-topo-menu{
  width:34px;height:34px;border-radius:9px;border:0;cursor:pointer;
  background:none;color:var(--ov-muted);font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
}
.ov-topo-menu:hover{background:var(--ov-marca-fundo);color:var(--ov-marca);}
.ov-busca{
  flex:1;max-width:340px;position:relative;
}
.ov-busca input{
  width:100%;height:38px;border-radius:19px;
  border:1px solid var(--ov-linha);background:var(--ov-mesa);
  padding:0 14px 0 38px;color:var(--ov-ink);
  font-family:inherit;font-size:.8rem;
}
.ov-busca input::placeholder{color:var(--ov-faint);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;}
.ov-busca svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--ov-faint);pointer-events:none;
}
.ov-topo-dir{margin-left:auto;display:flex;align-items:center;gap:12px;}

/* ── RECOLHER A COLUNA DA DIREITA ────────────────────────────────────
   Os 296px do Top 5 e dos Links espremem o miolo, e é lá que estão o anel de
   contratos e a curva do fluxo — os dois desenhos que mais perdem com largura.
   Recolhida, a coluna devolve o espaço ao gráfico. */
.ov-recolher{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 14px;border-radius:18px;cursor:pointer;
  border:1px solid var(--ov-linha);background:var(--ov-cartao);
  color:var(--ov-muted);
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;
  transition:border-color .15s,color .15s,background .15s;
}
.ov-recolher:hover{border-color:#2f7ff2;color:#2f7ff2;}
.ov-recolher svg{width:15px;height:15px;flex-shrink:0;}
.ov-recolher.off{
  border-color:#2f7ff2;background:rgba(47,127,242,.08);color:#2f7ff2;
}
/* A terceira coluna sai da GRADE, e não só da vista: `display:none` sozinho
   deixaria os 296px reservados e o miolo continuaria do mesmo tamanho — que é
   exatamente o que o botão existe para resolver. */
#crm-overview.sem-dir{grid-template-columns:262px minmax(0,1fr);}
#crm-overview.sem-dir .ov-dir{display:none;}
.ov-novo{
  height:38px;padding:0 20px;border-radius:19px;border:0;cursor:pointer;
  background:linear-gradient(100deg,var(--ov-marca),#58a7f6);
  color:#fff;font-family:inherit;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;
  box-shadow:0 5px 16px rgba(47,127,242,.32);
}
.ov-novo:hover{filter:brightness(1.06);}
.ov-ico-btn{
  width:34px;height:34px;border-radius:9px;border:0;cursor:pointer;position:relative;
  background:none;color:var(--ov-muted);
  display:flex;align-items:center;justify-content:center;
}
.ov-ico-btn:hover{background:var(--ov-marca-fundo);color:var(--ov-marca);}
.ov-ico-btn svg{width:18px;height:18px;}
.ov-selo{
  position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--ov-erro);color:#fff;
  font-size:.6rem;font-weight:800;line-height:16px;text-align:center;
}
.ov-sair{
  height:34px;padding:0 16px;border-radius:17px;cursor:pointer;
  border:1px solid var(--ov-linha);background:none;color:var(--ov-muted);
  font-family:inherit;font-size:.72rem;font-weight:700;
}
.ov-sair:hover{border-color:var(--ov-marca);color:var(--ov-marca);}

/* ── O MIOLO ───────────────────────────────────────────────────────────── */
.ov-obra{grid-column:2;grid-row:2;min-height:0;overflow-y:auto;padding:24px 22px 40px;min-width:0;}
.ov-titulo-rot{
  font-size:.86rem;font-weight:800;letter-spacing:.02em;color:var(--ov-muted);
}
.ov-titulo-rot b{color:var(--ov-ink);}
.ov-titulo{
  margin:2px 0 22px;font-size:2rem;font-weight:400;letter-spacing:-.01em;
  color:var(--ov-faint);
}

.ov-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:18px;}
.ov-grade-baixa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px;}

/* ── CONECTAR O WHATSAPP ─────────────────────────────────────────────
   Faixa inteira, embaixo dos cartões: conectar o WhatsApp é o que faz as
   conversas chegarem ao CRM, e é aqui que a pessoa está quando pensa nisso.
   Largura cheia, e não uma quarta coluna, porque a grade de cima é de três e
   um quarto cartão espremido leria como sobra. */
.ov-wa{margin-top:18px;}
.ov-wa-corpo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.ov-wa-txt{
  margin:0;max-width:62ch;font-size:.82rem;line-height:1.6;
  color:var(--ov-muted);
}
.ov-wa-btn{
  display:inline-flex;align-items:center;gap:9px;
  height:40px;padding:0 20px;border:0;border-radius:20px;cursor:pointer;
  background:#25d366;color:#0b2e18;
  font-family:'Inter',sans-serif;font-size:.83rem;font-weight:700;
  transition:transform .15s,box-shadow .15s,opacity .15s;
  box-shadow:0 3px 12px rgba(37,211,102,.28);
}
.ov-wa-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,211,102,.36);}
.ov-wa-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;}
/* O aviso nasce vazio e só ocupa espaço quando há o que dizer. */
.ov-wa-aviso:empty{display:none;}
.ov-wa-aviso{margin:0;font-size:.78rem;line-height:1.5;color:#c2334a;}

/* Conectado: o número à vista, porque um cartão que só diz "conectado" faz a
   pessoa abrir o painel da Meta para saber qual conta ficou ligada. */
.ov-wa-ok{display:flex;align-items:center;gap:12px;}
.ov-wa-ponto{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  background:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.18);
}
.ov-wa-num{font-size:1rem;font-weight:700;color:var(--ov-ink);}
.ov-wa-sub{margin-top:2px;font-size:.76rem;color:var(--ov-muted);}

.ov-card{
  background:var(--ov-cartao);
  border:1px solid var(--ov-linha);
  border-radius:15px;
  padding:18px 20px;
  box-shadow:0 3px 14px rgba(15,39,68,.06);
  min-width:0;
}
.ov-card-cab{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.ov-card-tit{font-size:1.18rem;font-weight:700;color:var(--ov-ink);letter-spacing:-.01em;}
.ov-card-cab .ov-card-acoes{margin-left:auto;display:flex;align-items:center;gap:8px;}
.ov-pill{
  height:28px;padding:0 12px;border-radius:14px;cursor:pointer;
  border:1px solid var(--ov-linha);background:var(--ov-cartao);color:var(--ov-muted);
  font-family:inherit;font-size:.7rem;font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.ov-pill:hover{border-color:var(--ov-marca);color:var(--ov-marca);}
.ov-contador{
  min-width:26px;height:26px;padding:0 8px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;
  background:var(--ov-marca-fundo);color:var(--ov-marca);
}
.ov-contador.aviso{background:var(--ov-aviso-fundo);color:var(--ov-aviso);}
.ov-mini{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--ov-linha);
  background:var(--ov-cartao);color:var(--ov-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;line-height:1;
}
.ov-mini:hover{border-color:var(--ov-marca);color:var(--ov-marca);}

/* O DONUT e a legenda em volta, como na referência: o número no meio, os
   rótulos apontando para as fatias. */
.ov-donut{display:flex;align-items:center;justify-content:center;padding:6px 0 4px;position:relative;}
.ov-donut svg{width:100%;max-width:250px;height:auto;overflow:visible;}
.ov-donut-centro{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
}
.ov-donut-num{font-size:1.9rem;font-weight:700;color:var(--ov-ink);line-height:1;}
.ov-donut-rot{font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ov-faint);}
.ov-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-top:10px;}
.ov-legenda span{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ov-muted);}
.ov-legenda i{width:9px;height:9px;border-radius:3px;flex-shrink:0;}

/* O GRÁFICO DE LINHA. SVG desenhado à mão: uma biblioteca de gráfico para
   duas curvas seria 200 KB no bundle para o que cabe em cinquenta linhas. */
.ov-linha-graf{width:100%;height:186px;}
.ov-linha-graf text{font-size:10px;fill:var(--ov-faint);font-family:inherit;}
.ov-vazio{
  padding:22px 4px;text-align:center;color:var(--ov-faint);font-size:.78rem;line-height:1.5;
}

/* AS LISTAS dos cartões de baixo. */
.ov-lista{display:flex;flex-direction:column;}
.ov-linha-item{
  display:flex;align-items:center;gap:11px;padding:10px 2px;
  border-top:1px solid var(--ov-linha);min-width:0;
}
.ov-linha-item:first-child{border-top:0;}
.ov-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;object-fit:cover;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:#fff;
  background:var(--av,var(--ov-marca));
}
.ov-linha-txt{flex:1;min-width:0;}
.ov-linha-tit{
  font-size:.82rem;font-weight:600;color:var(--ov-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ov-linha-sub{
  font-size:.72rem;color:var(--ov-muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ov-linha-sub.atraso{color:var(--ov-erro);}
.ov-linha-sub.perto{color:var(--ov-aviso);}
.ov-linha-quando{font-size:.7rem;color:var(--ov-faint);white-space:nowrap;}
.ov-linha-acao{
  width:26px;height:26px;border-radius:7px;border:0;background:none;cursor:pointer;
  color:var(--ov-faint);flex-shrink:0;
}
.ov-linha-acao:hover{background:var(--ov-marca-fundo);color:var(--ov-marca);}

/* ── A COLUNA DA DIREITA ───────────────────────────────────────────────── */
.ov-dir{
  grid-column:3;grid-row:2;min-height:0;overflow-y:auto;padding:24px 20px 40px;
  background:var(--ov-cartao);
  border-left:1px solid var(--ov-linha);
  min-width:0;
}
.ov-dir-tit{
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ov-muted);margin:0 0 12px;
}
.ov-dir-tit + .ov-lista{margin-bottom:26px;}
.ov-top-valor{text-align:right;flex-shrink:0;}
.ov-top-rot{font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ov-faint);}
.ov-top-num{font-size:.9rem;font-weight:700;color:var(--ov-ink);}

.ov-link{
  display:flex;align-items:center;gap:10px;padding:9px 2px;
  color:var(--ov-muted);font-size:.8rem;text-decoration:none;min-width:0;
}
.ov-link:hover{color:var(--ov-marca);}
.ov-link svg{width:14px;height:14px;flex-shrink:0;color:var(--ov-faint);}
.ov-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ov-link-add{
  margin-top:8px;width:100%;height:34px;border-radius:9px;cursor:pointer;
  border:1px dashed var(--ov-linha);background:none;color:var(--ov-muted);
  font-family:inherit;font-size:.76rem;font-weight:600;
}
.ov-link-add:hover{border-color:var(--ov-marca);color:var(--ov-marca);}

/* ── TELAS ESTREITAS ───────────────────────────────────────────────────
   A coluna da direita sai primeiro: Top 5 e Links são apoio, e apoio é o que
   se dispensa quando falta largura. A lateral vira uma faixa de ícones antes
   de sumir, porque sem ela não há como trocar de painel. */
@media (max-width:1240px){
  #crm-overview,#crm-overview.sem-dir{grid-template-columns:262px minmax(0,1fr);}
  #crm-overview{grid-template-rows:auto minmax(0,1fr) auto;}
  .ov-dir{grid-column:2;grid-row:3;border-left:0;border-top:1px solid var(--ov-linha);overflow:visible;}
  .ov-topo{grid-column:2;}
}
@media (max-width:980px){
  #crm-overview,#crm-overview.sem-dir{grid-template-columns:78px minmax(0,1fr);}
  .ov-perfil-foto{width:44px;height:44px;border-width:2px;font-size:1rem;}
  .ov-perfil-nome,.ov-item-rot,.ov-item-mais,.ov-sub{display:none;}
  .ov-item{justify-content:center;padding:11px 8px;}
  .ov-grade,.ov-grade-baixa{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:620px){
  .ov-busca{display:none;}
  .ov-titulo{font-size:1.5rem;}
  .ov-obra,.ov-dir{padding-left:14px;padding-right:14px;}
}

/* A foto entra dentro da caixa que já tinha as iniciais — trocar o elemento
   faria o círculo saltar de tamanho quando a imagem chegasse. */
.ov-perfil-foto.tem-foto{padding:0;overflow:hidden;}
.ov-perfil-foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* O ícone dentro do quadradinho: traço branco, como na referência. O emoji
   trazia a própria cor e brigava com a do quadrado. */
.ov-item-ico svg{width:17px;height:17px;color:#fff;stroke-width:2;}
.ov-perfil-foto svg{width:auto;height:auto;}

/* ── O CARTÃO DE ATIVIDADE ─────────────────────────────────────────────
   Número grande, curva, escala. A referência responde "está subindo ou
   descendo?" de relance, e é isso que uma lista de três linhas não faz. */
.ov-grande{
  font-size:1.7rem;font-weight:700;color:var(--ov-ink);
  letter-spacing:-.02em;text-align:center;margin:6px 0 2px;
  display:flex;align-items:baseline;justify-content:center;gap:9px;
}
.ov-grande.menor{font-size:1.35rem;margin-top:18px;}
.ov-grande-rot{
  text-align:center;font-size:.7rem;color:var(--ov-faint);margin-bottom:4px;
}
.ov-delta{font-size:.8rem;font-weight:700;color:var(--ov-bom);}
.ov-delta.baixa{color:var(--ov-erro);}
.ov-faisca{width:100%;height:62px;display:block;}
.ov-escala{
  display:flex;justify-content:space-between;gap:4px;margin:2px 2px 0;
}
.ov-escala-p{
  font-size:.68rem;color:var(--ov-faint);padding:2px 7px;border-radius:11px;
}
.ov-escala-p.hoje{background:var(--ov-marca-fundo);color:var(--ov-marca);font-weight:700;}

/* O seletor de período do cabeçalho, como na referência: rótulo apagado e
   valor forte, dentro da mesma pílula. */
.ov-pill b{color:var(--ov-ink);font-weight:700;}

/* ── A LATERAL VAI ATÉ O FIM DA TELA ───────────────────────────────────
   `height:100%` só resolve quando o pai tem altura própria, e `#crm-view` é
   um flex de altura automática: o dashboard media o que o conteúdo pedia e
   parava ali, deixando a lateral terminando no meio da página com fundo vazio
   embaixo. `flex:1` no filho e `min-height:0` para ele poder encolher é o par
   que faz o grid ocupar a caixa inteira. */
#crm-view #crm-overview.visible{flex:1 1 auto;min-height:0;}
#crm-view{align-items:stretch;}

/* Os rótulos do donut, fora do anel e ligados por um cotovelo — como na
   imagem. Eles substituem a legenda em fila: a fila dizia a mesma coisa e
   perdia o que o desenho tem de melhor, que é saber qual fatia é qual sem
   precisar comparar cores. */
.ov-donut svg{max-width:330px;color:var(--ov-ink);}
.ov-donut-nome{font-size:11px;font-weight:600;fill:var(--ov-ink);}
.ov-donut-pct{font-size:11px;fill:var(--ov-faint);}
.ov-donut.vazio .ov-donut-centro .ov-donut-num{color:var(--ov-faint);}

/* A ação que fecha o submenu. Ela não é mais um filtro, então não leva o
   traço de ligação que os filtros têm. */
.ov-sub-item.acao{
  padding-left:20px;gap:8px;color:#fff;font-weight:600;opacity:.9;
}
.ov-sub-item.acao svg{opacity:.8;}

/* O rosto entra na bolinha que já tinha as iniciais: trocar o elemento faria
   o círculo saltar quando a imagem chegasse. */
.ov-avatar.tem-foto{background:none;}
.ov-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}

/* ══════════════════════════════════════════════════════════════════════
   A ESCALA DA REFERÊNCIA
   ══════════════════════════════════════════════════════════════════════
   Comparado lado a lado com a imagem, tudo aqui estava um passo menor: 13px
   onde ela tem 15, linhas de 34px onde ela tem 46, cartões com 18px de
   respiro onde ela tem 26. Somado, o dashboard parecia uma versão reduzida
   dela — que é exatamente o que era.

   A imagem é uma peça de 2000px; medir por proporção e não por pixel é o que
   faz a mesma planta caber em 1568 sem virar miniatura.
   ══════════════════════════════════════════════════════════════════════ */

/* AS COLUNAS crescem: a lateral e a coluna de apoio da referência são mais
   largas, e é isso que dá ar ao miolo. */
#crm-overview{grid-template-columns:262px minmax(0,1fr) 330px;}

.ov-perfil{padding:0 18px 30px;}
.ov-perfil-foto{width:112px;height:112px;}
.ov-perfil-nome{font-size:1.06rem;}
.ov-item{padding:14px 22px;gap:15px;font-size:.78rem;letter-spacing:.12em;}
.ov-item-ico{width:38px;height:38px;border-radius:12px;}
.ov-item-ico svg{width:19px;height:19px;}

.ov-topo{padding:18px 26px;gap:18px;}
.ov-busca input{height:44px;border-radius:22px;font-size:.86rem;padding-left:42px;}
.ov-busca input::placeholder{font-size:.74rem;}
.ov-sair{height:38px;padding:0 20px;border-radius:19px;font-size:.76rem;}

.ov-obra{padding:30px 28px 46px;}
.ov-titulo-rot{font-size:.95rem;letter-spacing:.03em;}
.ov-titulo{font-size:2.45rem;margin:4px 0 26px;}
.ov-grade,.ov-grade-baixa{gap:22px;}
.ov-grade-baixa{margin-top:22px;}

.ov-card{padding:24px 26px;border-radius:18px;}
.ov-card-cab{margin-bottom:18px;gap:14px;}
.ov-card-tit{font-size:1.42rem;}
.ov-pill{height:32px;padding:0 15px;border-radius:16px;font-size:.76rem;}
.ov-contador{min-width:30px;height:30px;border-radius:15px;font-size:.8rem;}
.ov-mini{width:32px;height:32px;}

/* AS LINHAS das listas: a referência tem 46px de altura, com o rosto em 40. */
.ov-linha-item{padding:13px 2px;gap:14px;}
.ov-avatar{width:40px;height:40px;font-size:.85rem;}
.ov-linha-tit{font-size:.9rem;}
.ov-linha-sub{font-size:.79rem;margin-top:3px;}
.ov-linha-quando{font-size:.76rem;}
.ov-linha-acao{width:30px;height:30px;}

/* A COLUNA DE APOIO. Na referência o título tem um filete embaixo e as linhas
   respiram — é o que separa "apoio" de "mais uma lista". */
.ov-dir{padding:30px 24px 46px;}
.ov-dir-tit{
  font-size:.82rem;letter-spacing:.2em;margin:0 0 16px;
  padding-bottom:14px;border-bottom:1px solid var(--ov-linha);
}
.ov-dir-tit + .ov-lista{margin-bottom:34px;}
.ov-top-num{font-size:.98rem;}
.ov-top-rot{font-size:.64rem;}
.ov-link{padding:13px 2px;gap:13px;font-size:.9rem;}
.ov-link svg{width:17px;height:17px;}
.ov-link-add{height:40px;font-size:.82rem;border-radius:11px;margin-top:12px;}

.ov-grande{font-size:2rem;margin:10px 0 3px;}
.ov-grande.menor{font-size:1.55rem;margin-top:22px;}
.ov-grande-rot{font-size:.76rem;}
.ov-faisca{height:70px;}
.ov-escala-p{font-size:.72rem;padding:3px 9px;}

@media (max-width:1240px){
  #crm-overview,#crm-overview.sem-dir{grid-template-columns:262px minmax(0,1fr);}
}
@media (max-width:980px){
  #crm-overview,#crm-overview.sem-dir{grid-template-columns:78px minmax(0,1fr);}
}

/* ══════════════════════════════════════════════════════════════════════
   O DASHBOARD COBRE A ÁREA INTEIRA
   ══════════════════════════════════════════════════════════════════════
   Cada painel monta a PRÓPRIA raiz dentro de `#crm-view` — `#ctr-view`,
   `#est-view`, e assim por diante — e o `sair()` de cada um solta ouvintes,
   não esconde a tela. Voltar ao CRM depois de passar pelo Contratos deixava
   a "Gestão de Contratos" desenhada por baixo, com o dashboard espremido em
   cima: os dois na mesma página.

   Dá para caçar as raízes por id e escondê-las uma a uma. Mas essa lista
   envelhece — o próximo painel nasce, ninguém lembra deste arquivo, e o bug
   volta exatamente igual. Cobrir a área resolve para os seis e para os que
   ainda não existem.

   `position:absolute` sobre um `#crm-view` que já é `relative`. O miolo e a
   coluna de apoio rolam por dentro (`overflow-y:auto`), então cobrir não
   custa rolagem nenhuma. */
#crm-view{position:relative;}
#crm-overview.visible{
  position:absolute;
  inset:0;
  z-index:6;
  background:var(--ov-mesa);
}

/* ══════════════════════════════════════════════════════════════════════
   O ESQUELETO DE CARREGAMENTO
   ══════════════════════════════════════════════════════════════════════
   Os dados chegam em três tempos — o quadro do banco, as conversas da lista
   de amigos, os links de outro nó — e pintar cartões vazios para trocá-los
   depois faz a tela dar um solavanco a cada resposta.

   Este é o oposto de um spinner. Em vez de dizer "espere", ele mostra a FORMA
   do que está vindo, na mesma caixa que o conteúdo vai ocupar: quando o dado
   chega, nada muda de lugar. O brilho atravessa da esquerda para a direita,
   uma vez a cada 1,4s — devagar o bastante para não parecer alarme.

   `prefers-reduced-motion` desliga o brilho e deixa o bloco estático: para
   quem pediu menos movimento, um pulso contínuo na tela inteira é exatamente
   o que incomoda. A forma continua lá; só o brilho para.
   ══════════════════════════════════════════════════════════════════════ */
@keyframes ov-brilho{
  from{background-position:-160% 0;}
  to{background-position:260% 0;}
}
.ov-esq,
.ov-esq-rot,.ov-esq-titulao,.ov-esq-tit,
.ov-esq-bola,.ov-esq-texto,.ov-esq-donut,.ov-esq-graf{
  --ov-esq-a:color-mix(in srgb,var(--ov-linha) 55%,transparent);
  --ov-esq-b:color-mix(in srgb,var(--ov-linha) 22%,transparent);
}
.ov-esq-rot,.ov-esq-titulao,.ov-esq-tit,
.ov-esq-bola,.ov-esq-texto,.ov-esq-donut,.ov-esq-graf{
  background:linear-gradient(100deg,
    var(--ov-esq-a) 0 22%,
    color-mix(in srgb,var(--ov-cartao) 78%,var(--ov-esq-a)) 42%,
    var(--ov-esq-a) 62% 100%);
  background-size:240% 100%;
  /* O ATRASO É O QUE FAZ ONDA. Todos com a mesma animação e sem atraso, os
     quinze blocos pulsam no mesmo instante e a tela inteira pisca junta —
     lê como erro, não como espera. Com 55ms de degrau, o brilho atravessa a
     página de cima para baixo, uma vez a cada volta.

     `--i` vem do script, na ordem em que os blocos entram no DOM. Sem ele o
     valor cai em 0 e o comportamento é o antigo, sem quebrar nada. */
  animation:ov-brilho 1.65s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 55ms);
  border-radius:8px;
}

/* ── A ENTRADA DO CONTEÚDO REAL ───────────────────────────────────────
   O esqueleto some e os cartões sobem no MESMO compasso da onda. Sem isto a
   troca é um corte seco: quinze cartões prontos no mesmo quadro, depois de
   um segundo de brilho. O carregamento vira um pisca-pisca com um salto no
   fim, em vez de uma entrega.

   `both` segura o estado inicial ANTES do atraso: sem ele o cartão aparece
   inteiro, some e reaparece — o pior dos dois mundos. */
@keyframes ov-subir{
  from{opacity:0;transform:translateY(14px) scale(.985);}
  to  {opacity:1;transform:none;}
}
/* A MARCA É DO ELEMENTO, e não do contêiner. Enquanto ela vivia em
   `#ov-obra`, um cartão criado por uma repintura posterior nascia dentro de
   um contêiner ainda marcado, casava com a regra e animava de novo — a
   página reaparecia inteira de uma vez, que era o segundo piscar. */
.ov-entra{
  animation:ov-subir .52s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
/* O cartão tem sombra e `transform` próprio no hover. A marca é retirada
   quando a animação acaba (ver `crm-overview.js`), senão o estado final
   venceria o `transform` do hover para sempre. */
.ov-card.ov-entra{will-change:transform,opacity;}

/* ── OS GRÁFICOS MONTAM ─────────────────────────────────────────────────
   Cartão subindo não é gráfico montando. O anel aparecia inteiro, com as
   doze fatias já no lugar, e a linha do fluxo já desenhada de ponta a ponta
   — a tela dizia "pronto", e não "calculando".

   O ANEL monta fatia por fatia, na ordem em que é lido, cada uma crescendo
   a partir do centro. `transform-origin` é o centro do donut em unidades do
   viewBox (cx=150, cy=118): sem ele a fatia cresceria a partir do canto do
   SVG e o anel se montaria de viés. */
@keyframes ov-fatia-entra{
  from{opacity:0;transform:scale(.72);}
  to  {opacity:1;transform:scale(1);}
}
.ov-fatia.ov-entra{
  transform-origin:150px 118px;
  animation:ov-fatia-entra .42s cubic-bezier(.34,1.4,.5,1) both;
  animation-delay:calc(320ms + var(--i,0) * 70ms);
}

/* A LINHA se desenha da esquerda para a direita. O corte é do GRUPO das
   séries, e não do SVG inteiro: cortar tudo levaria junto a grade e os
   rótulos dos meses, e o eixo apareceria em pedaços. `inset()` anima bem e
   não interfere com o tracejado da série de saída, que um truque de
   `stroke-dashoffset` estragaria. */
@keyframes ov-desenha{
  from{clip-path:inset(0 100% 0 0);}
  to  {clip-path:inset(0 -2% 0 0);}
}
.ov-series.ov-entra{
  animation:ov-desenha .95s cubic-bezier(.33,.9,.4,1) both;
  animation-delay:340ms;
}
/* A faísca da Atividade segue a mesma ideia; ela é a linha inteira, então o
   corte é do SVG. */
.ov-faisca.ov-entra{
  animation:ov-desenha .9s cubic-bezier(.33,.9,.4,1) both;
  animation-delay:420ms;
}
.ov-esq-rot{width:150px;height:15px;margin-bottom:10px;}
.ov-esq-titulao{width:250px;height:40px;border-radius:11px;margin-bottom:26px;}
.ov-esq-tit{width:44%;height:24px;margin-bottom:20px;}
.ov-esq-donut{width:186px;height:186px;border-radius:50%;margin:6px auto 10px;}
.ov-esq-graf{width:100%;height:186px;border-radius:12px;}
.ov-esq-linha{display:flex;align-items:center;gap:14px;padding:13px 2px;}
.ov-esq-bola{width:40px;height:40px;border-radius:50%;flex-shrink:0;}
.ov-esq-texto{flex:1;height:16px;}
/* A segunda linha de cada bloco é mais curta: linhas do mesmo tamanho leem
   como tabela, e o que vem depois é texto de comprimento variado. */
.ov-esq-linha:nth-child(3) .ov-esq-texto{max-width:72%;}
.ov-esq-linha:nth-child(4) .ov-esq-texto{max-width:58%;}
.ov-esq.ov-card{box-shadow:none;}

@media (prefers-reduced-motion:reduce){
  .ov-esq-rot,.ov-esq-titulao,.ov-esq-tit,
  .ov-esq-bola,.ov-esq-texto,.ov-esq-donut,.ov-esq-graf{
    animation:none;background:var(--ov-esq-a);
  }
  /* Quem pediu menos movimento recebe a página montada, e não quinze coisas
     subindo do rodapé. A forma e a ordem continuam; só o deslocamento para. */
  .ov-entra{animation:none;clip-path:none;}
  .ov-fatia.ov-entra,
  .ov-series.ov-entra,
  .ov-faisca.ov-entra{animation:none;clip-path:none;}
}

/* ══════════════════════════════════════════════════════════════════════
   NADA DO PAINEL ANTERIOR FICA POR BAIXO
   ══════════════════════════════════════════════════════════════════════
   Cobrir com `position:absolute` resolvia enquanto a página cabia na tela. No
   Estoque, cuja lista é longa, `#crm-view` fica mais alto que a janela e o
   dashboard cobria só a primeira dobra: a lista do estoque continuava
   aparecendo embaixo, e trocar de workspace não limpava.

   `:has()` resolve pela relação, e não por uma lista de ids que envelhece a
   cada painel novo: enquanto o dashboard estiver visível, TODO irmão dele
   dentro de `#crm-view` está fora — inclusive o "+ Adicionar outra lista" do
   quadro, que ficava flutuando sobre a tela. */
#crm-view:has(> #crm-overview.visible) > *:not(#crm-overview){
  display:none !important;
}