:root {
  /* Identidade Merge IA (23/09/2026, trocada da antiga Vista Virtual 360°
     roxo/azul/ciano) - metal escuro + ciano de destaque, igual a logo real
     (esfera/redemoinho metálico escuro com brilho ciano no centro).
     Nomes de variável mantidos (--ac-purple/--ac-blue) pra não quebrar
     outros lugares que já referenciam por esse nome -- só o VALOR mudou. */
  --ac-purple:   #2E3238;
  --ac-blue:     #0EA5B7;
  --ac-cyan:     #22D3EE;
  --ac-cream:    #F5F5F9;
  --ac-stone:    #A6A9BF;
  --ac-graphite: #34344A;
  --ac-ink:      #14131F;
  --gradiente-marca: linear-gradient(135deg, #1B1D21 0%, #12474F 55%, #22D3EE 100%);

  --bg: var(--ac-cream);  --bg-elev: #FFFFFF;  --bg-sunk: #ECECF5;
  --bg-topo: rgba(244,243,238,0.78);
  /* Texto sobre um fundo --ac-ink (sempre escuro, nas duas paletas) - NUNCA
     usar --bg-elev pra isso, porque --bg-elev vira escuro no dark mode e
     o texto some (achado 25/08/2026: nav ativa, badge IA, toast e botao
     flutuante tinham esse bug, tudo silencioso ate' testar em dark de verdade). */
  --sobre-escuro: #FFFFFF;
  --fg: var(--ac-ink);    --fg-muted: var(--ac-graphite);  --fg-soft: var(--ac-stone);
  /* Contraste da borda subido 05/09 (feedback do Fernando: "os balões
     ficam sem definição nenhuma, parece amador/dados soltos" — 0.10 era
     baixo demais pra aparecer num print de celular comprimido). */
  --border: rgba(20,19,31,0.20);   --border-2: rgba(20,19,31,0.32);
  --accent: var(--ac-cyan);
  --success: #1FA97A;  --warning: #D6A24E;  --danger: #E0407A;

  --font-sans:  "Fira Sans", system-ui, sans-serif;
  --font-serif: "Libre Baskerville", Georgia, serif;
  --font-body:  "Inter", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", monospace;

  --r-2: 4px; --r-3: 8px; --r-4: 12px; --r-5: 18px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26,25,24,.06), 0 1px 1px rgba(26,25,24,.04);
  --shadow-md: 0 4px 14px rgba(26,25,24,.08), 0 1px 2px rgba(26,25,24,.04);
  --shadow-lg: 0 18px 48px rgba(26,25,24,.16), 0 3px 8px rgba(26,25,24,.06);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tr-widest: 0.22em;
}

/* Modo escuro (2026-08-17, pedido do Fernando: ele usa dark em tudo -
   Gemini, ChatGPT, Claude - e o branco excessivo do dashboard incomodava.
   Segue o prefers-color-scheme do sistema/navegador automaticamente. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131220;  --bg-elev: #1B1A2A;  --bg-sunk: #0E0D18;
    /* achado 25/08/2026: o header ficava com a cor clara do tema claro
       cravada aqui, mesmo em dark mode - "background: rgba(244,243,238,...)"
       nunca tinha uma variante escura. Ficava lavado/baixo contraste. */
    --bg-topo: rgba(19,18,32,0.78);
    --fg: #F1F0F7;  --fg-muted: #C7C5D9;  --fg-soft: #8583A0;
    --border: rgba(255,255,255,0.18);  --border-2: rgba(255,255,255,0.28);
    --accent: #3DDCEF;
    --success: #34C98F;  --warning: #E3B564;  --danger: #F0628E;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
    --shadow-md: 0 4px 14px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-lg: 0 18px 48px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(ellipse at top, rgba(34,211,238,0.05), transparent 60%), var(--bg);
  background-image:
    radial-gradient(ellipse at top left, rgba(20,25,28,0.05), transparent 50%),
    radial-gradient(ellipse at top right, rgba(34,211,238,0.07), transparent 50%),
    repeating-linear-gradient(0deg, rgba(20,19,31,0.025) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(20,19,31,0.025) 0 1px, transparent 1px 44px);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; margin: 0; }
em { font-style: italic; color: var(--accent); }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

.oculto { display: none !important; }

/* ---- Overlay de login ---- */
#tela-login {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(244,243,238,0.4), rgba(244,243,238,0.9)), var(--bg);
  z-index: 100; padding: 1rem; box-sizing: border-box;
}
.card-login {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-5);
  box-shadow: var(--shadow-lg); padding: 2.6rem 2.4rem; width: 340px; max-width: 100%; text-align: center;
}
.pill {
  display: inline-block; border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: var(--tr-widest);
  text-transform: uppercase; padding: 0.3em 0.9em; border-radius: var(--r-pill); margin-bottom: 1.2rem;
}
.card-login h1 { font-size: 1.7rem; margin-bottom: 1.6rem; }
.logo-login { max-width: 190px; max-height: 130px; margin-bottom: 1.4rem; }
.marca-topo { display: flex; align-items: center; gap: 0.55rem; }
.marca-topo img { height: 30px; width: auto; }
.marca-topo .nome-marca {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em;
  background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.campo { text-align: left; margin-bottom: 1rem; }
.campo label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-soft); margin-bottom: 0.35rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border-2); border-radius: var(--r-3);
  font-family: var(--font-body); font-size: 0.92rem; background: var(--bg-elev); color: var(--fg);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn {
  border: none; border-radius: var(--r-pill); padding: 0.65rem 1.4rem; font-size: 0.9rem; font-weight: 600;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn-principal { background: var(--gradiente-marca); color: #FFFFFF; width: 100%; box-shadow: 0 2px 10px rgba(34,211,238,0.28); }
.btn-principal:hover { box-shadow: 0 6px 18px rgba(34,211,238,0.38); transform: translateY(-1px); }
#form-cliente .btn-principal, .modal .btn-principal { width: auto; }
.btn-secundario { background: transparent; border: 1px solid var(--border-2); color: var(--fg); }
.btn-perigo { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.erro-inline { color: var(--danger); font-size: 0.82rem; margin-top: 0.6rem; min-height: 1.2em; }

/* ---- App ---- */
#app { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem 3rem; }

header.topo {
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px);
  background: var(--bg-topo); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; margin-bottom: 1.8rem;
}
.marca { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-sans); font-weight: 700; }
nav.abas { display: flex; gap: 0.4rem; }
nav.abas button {
  background: none; border: none; padding: 0.5rem 1rem; border-radius: var(--r-pill);
  font-size: 0.88rem; color: var(--fg-muted);
}
nav.abas button.ativa { background: var(--ac-ink); color: var(--sobre-escuro); }
.topo-direita { display: flex; align-items: center; gap: 0.7rem; }
.menu-usuario { position: relative; }
.menu-usuario > button { background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.menu-usuario .dropdown {
  position: absolute; right: 0; top: 120%; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-3); box-shadow: var(--shadow-md); min-width: 160px; overflow: hidden;
}
.menu-usuario .dropdown button, .menu-usuario .dropdown a {
  display: block; width: 100%; text-align: left; padding: 0.6rem 0.9rem; background: none; border: none;
  font-size: 0.85rem; text-decoration: none; color: var(--fg);
}
.menu-usuario .dropdown button:hover, .menu-usuario .dropdown a:hover { background: var(--bg-sunk); }

.eyebrow { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--fg-soft); margin-bottom: 0.4rem; }
h1.titulo-tela { font-size: 1.9rem; margin-bottom: 1.6rem; text-wrap: balance; }

/* Cartoes de resumo */
.resumo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 0.9rem; margin-bottom: 2rem; }
.resumo-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-4); padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm); }
.resumo-card .n { font-family: var(--font-serif); font-size: 2rem; }
.resumo-card .rotulo { font-size: 0.78rem; color: var(--fg-muted); }
.resumo-card.alerta .n { color: var(--danger); }

.bloco-hoje { margin-bottom: 1.6rem; }
.bloco-hoje h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 700; margin-bottom: 0.7rem; }

/* Hub de modulos */
.modulos-intro { color: var(--fg-muted); margin: -0.6rem 0 1.6rem; }
.grade-modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
.cartao-modulo {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-4);
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
a.cartao-modulo:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.cartao-modulo h3 { margin: 0.4rem 0 0.3rem; font-family: var(--font-sans); font-size: 1.05rem; }
.cartao-modulo p { margin: 0; font-size: 0.85rem; color: var(--fg-muted); }
.cartao-modulo__status {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px;
  background: var(--border); color: var(--fg-muted);
}
.cartao-modulo--ativo { border-color: transparent; background: var(--gradiente-marca); color: #fff; }
.cartao-modulo--ativo .cartao-modulo__status { background: rgba(255,255,255,.25); color: #fff; }
.cartao-modulo--ativo p { color: rgba(255,255,255,.85); }
.cartao-modulo__status--ok { background: #DCFCE7; color: #15803D; }
.cartao-modulo--indisponivel { opacity: .65; }
.lista-itens { display: flex; flex-direction: column; gap: 0.5rem; }
.item-linha {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.item-linha:hover { border-color: var(--border-2); }
.item-linha .principal { font-weight: 600; }
.item-linha .secundario { font-size: 0.8rem; color: var(--fg-muted); }
.item-linha .data { font-size: 0.8rem; color: var(--fg-soft); white-space: nowrap; }
.vazio { color: var(--fg-soft); font-size: 0.88rem; padding: 1rem; text-align: center; border: 1px dashed var(--border-2); border-radius: var(--r-3); }

/* Funil (Kanban) - crm-v2 tem 7 etapas (vs 4 do CRM antigo), scroll
   horizontal em vez de grid fixo pra caber sem espremer coluna.
   Achado 10/09/2026 (comparação com o DeskcommCRM, ver
   memoria/avaliacao-deskcommcrm.md): `.coluna` tinha `min-height: 200px`
   fixo, sem relação com o conteúdo - uma coluna com 1 card (comum nas
   etapas do fim do funil) sobrava com um vão em branco enorme embaixo. O
   min-height agora vive só no CORPO da coluna (a área de soltar o card),
   pequeno o bastante pra não sobrar espaço à toa mas ainda dar uma zona de
   drop visível quando a coluna está vazia. */
.funil { display: flex; gap: 1rem; align-items: start; overflow-x: auto; padding-bottom: 0.6rem; }
.coluna { background: var(--bg-sunk); border-radius: var(--r-4); padding: 0.9rem; flex: 0 0 240px; display: flex; flex-direction: column; }
.coluna.arraste-sob { outline: 2px dashed var(--accent); outline-offset: -4px; }
.coluna-cabecalho { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; padding: 0 0.2rem; }
.coluna-cabecalho h3 { font-size: 0.88rem; font-family: var(--font-sans); font-weight: 700; }
.coluna-cabecalho .contagem { font-size: 0.75rem; color: var(--fg-soft); }
.cartao {
  background: var(--bg-elev); border-radius: var(--r-3); padding: 0.8rem 0.9rem; margin-bottom: 0.6rem;
  box-shadow: var(--shadow-sm); cursor: grab;
}
.cartao.arrastando { opacity: 0.4; }
.cartao .nome { font-weight: 600; font-size: 0.9rem; }
.cartao .empresa { font-size: 0.78rem; color: var(--fg-muted); margin-bottom: 0.35rem; }
.cartao .rodape-cartao { display: flex; justify-content: space-between; align-items: center; }
.cartao .valor { font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.tag { font-size: 0.66rem; padding: 0.15em 0.55em; border-radius: var(--r-pill); font-weight: 700; text-transform: uppercase; }
.tag.ganho { background: #e5efe6; color: var(--success); }
.tag.perdido { background: #f6e4e0; color: var(--danger); }

/* Clientes */
.busca { width: 100%; max-width: 360px; padding: 0.65rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--border-2); margin-bottom: 1.2rem; background: var(--bg-elev); }
table.tabela-clientes { width: 100%; border-collapse: collapse; background: var(--bg-elev); border-radius: var(--r-4); overflow: hidden; box-shadow: var(--shadow-sm); }
table.tabela-clientes th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-soft); padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
table.tabela-clientes td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
table.tabela-clientes tr:last-child td { border-bottom: none; }
table.tabela-clientes tr { cursor: pointer; }
table.tabela-clientes tr:hover td { background: var(--bg-sunk); }

.btn-flutuante {
  background: var(--ac-ink); color: var(--sobre-escuro); border-radius: var(--r-pill); padding: 0.6rem 1.2rem;
  font-weight: 600; border: none;
}

/* Modal generico */
.modal-fundo { position: fixed; inset: 0; background: rgba(26,25,24,0.45); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; z-index: 90; overflow-y: auto; }
.modal { background: var(--bg-elev); border-radius: var(--r-5); box-shadow: var(--shadow-lg); width: 100%; max-width: 640px; padding: 1.8rem 2rem; }
.modal-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.modal-cabecalho h2 { font-size: 1.3rem; }
.fechar-modal { background: none; border: none; font-size: 1.3rem; color: var(--fg-soft); line-height: 1; }
.secao-ficha { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.secao-ficha h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-soft); margin-bottom: 0.6rem; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.linha-dado { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.88rem; }
.linha-dado .rot { color: var(--fg-muted); }
.acoes-ficha { display: flex; gap: 0.6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.badge-ia { background: var(--ac-ink); color: var(--sobre-escuro); font-size: 0.62rem; padding: 0.1em 0.5em; border-radius: var(--r-pill); margin-left: 0.4rem; }
.interacao { border-bottom: 1px solid var(--border); padding: 0.6rem 0; font-size: 0.85rem; }
.interacao:last-child { border-bottom: none; }
.interacao .data-int { color: var(--fg-soft); font-size: 0.75rem; }

.chave-nova { background: var(--bg-sunk); border-radius: var(--r-3); padding: 0.9rem; margin-bottom: 1rem; }
.chave-nova code { font-family: var(--font-mono); font-size: 0.8rem; word-break: break-all; display: block; margin: 0.5rem 0; }
.lista-chaves .linha-chave { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }

/* Toast */
#toast-area { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 0.5rem; }
.toast {
  background: var(--ac-ink); color: var(--sobre-escuro); padding: 0.7rem 1.2rem; border-radius: var(--r-pill);
  font-size: 0.85rem; box-shadow: var(--shadow-md); animation: entra 0.2s var(--ease);
}
.toast.erro, .toast--erro { background: var(--danger); }
.toast--saindo { opacity: 0; transform: translateY(8px); transition: all .3s; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Dashboard (fusão 25/08/2026) — visual inspirado no "SaaS Dashboard"
   de origin-space/ui-experiments (crafted.is/exp3): cards escuros, numero
   grande, pill de variacao, grafico de barra em degrade roxo. Portado pro
   nosso HTML/CSS/JS puro (sem React/build), reaproveitando os tokens de
   marca que ja existiam (--ac-purple/--ac-cyan/--gradiente-marca). Ver
   docs/DECISOES.md do CRM. */
.kpi-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 0.9rem; margin-bottom: 1.4rem; }
.kpi-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-4); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); }
.kpi-card__rotulo { font-family: var(--font-sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-soft); margin-bottom: 0.55rem; }
.kpi-card__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.kpi-card__valor { font-family: var(--font-serif); font-size: 1.7rem; line-height: 1.1; }
.kpi-card__delta { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; padding: 0.15em 0.55em; border-radius: var(--r-pill); white-space: nowrap; }
.kpi-card__delta--pos { background: rgba(31,169,122,0.14); color: var(--success); }
.kpi-card__delta--neg { background: rgba(224,64,122,0.14); color: var(--danger); }
.kpi-card__legenda-extra { font-size: 0.76rem; color: var(--fg-muted); margin-top: 0.3rem; }

.dash-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1rem; }
.dash-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-4); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); }
.dash-card--largo { grid-column: 1 / -1; }
.dash-card__cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.dash-card__cabecalho h3 { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; }
.dash-card__legenda { font-size: 0.74rem; color: var(--fg-soft); }

/* Grafico de barras verticais (serie mensal) — desenhado em SVG puro,
   sem biblioteca (CSP so' permite script-src 'self', nada de CDN). */
.grafico { width: 100%; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .barra-serie { fill: var(--ac-purple); transition: fill .15s; }
.grafico .barra-serie:hover { fill: var(--ac-blue); }
.grafico .barra-serie--zero { fill: var(--border-2); }
.grafico .eixo-rotulo { font-family: var(--font-sans); font-size: 9px; fill: var(--fg-soft); }
.grafico .barra-valor { font-family: var(--font-sans); font-size: 9px; fill: var(--fg-muted); }

/* Funil ponderado — barras horizontais, uma por etapa */
.grafico--barras-h { display: flex; flex-direction: column; gap: 0.7rem; }
.barra-h-linha { display: flex; flex-direction: column; gap: 0.3rem; }
.barra-h-rotulos { display: flex; justify-content: space-between; font-size: 0.78rem; }
.barra-h-rotulos .et { color: var(--fg-muted); }
.barra-h-rotulos .val { font-variant-numeric: tabular-nums; color: var(--fg); }
.barra-h-trilho { background: var(--bg-sunk); border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.barra-h-preenchimento { height: 100%; background: var(--gradiente-marca); border-radius: var(--r-pill); }

.lista-origens-linha { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.lista-origens-linha:last-child { border-bottom: none; }
.lista-origens-linha .nome-origem { font-weight: 600; }
.lista-origens-linha .valor-origem { font-variant-numeric: tabular-nums; color: var(--success); }

/* Sugestoes da IA (motor de regras, crm-v2) e tarefas na ficha do negocio */
.sugestao-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-4); padding: 1rem 1.2rem; margin-bottom: 0.8rem; box-shadow: var(--shadow-sm); }
.sugestao-card__topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.sugestao-card__evidencia { font-size: 0.85rem; color: var(--fg-muted); font-style: italic; margin: 0.4rem 0 0.8rem; }
.confianca-pill { font-size: 0.68rem; font-weight: 700; padding: 0.15em 0.6em; border-radius: var(--r-pill); }
.confianca-pill--alta { background: rgba(31,169,122,0.14); color: var(--success); }
.confianca-pill--baixa { background: rgba(214,162,78,0.16); color: var(--warning); }
.tarefa-linha { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.tarefa-linha:last-child { border-bottom: none; }
.tarefa-linha.concluida { opacity: 0.5; text-decoration: line-through; }
.tarefa-linha .dono-tag { font-size: 0.65rem; text-transform: uppercase; padding: 0.1em 0.5em; border-radius: var(--r-pill); background: var(--bg-sunk); color: var(--fg-muted); }
.proposta-linha, .reuniao-linha { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--border); font-size: 0.86rem; gap: 0.5rem; }
.proposta-linha:last-child, .reuniao-linha:last-child { border-bottom: none; }
.proposta-linha select, .reuniao-linha select { font-size: 0.78rem; padding: 0.2rem 0.4rem; border-radius: var(--r-2); border: 1px solid var(--border-2); background: var(--bg-elev); color: var(--fg); }

.modal--estreito { max-width: 420px; }
.tag-papel { font-size: 0.68rem; padding: 0.15em 0.6em; border-radius: var(--r-pill); font-weight: 700; text-transform: uppercase; background: var(--bg-sunk); color: var(--fg-muted); }
.tag-papel--admin { background: var(--gradiente-marca); color: #fff; }

@media (max-width: 780px) {
  /* Achado 10/09/2026 (comparação com o DeskcommCRM): esta regra dizia
     `grid-template-columns: 1fr`, mas `.funil` é `display: flex`, não
     grid - a propriedade nunca fazia nada. Nas telas pequenas o funil
     continuava em linha horizontal com 7 colunas de `flex: 0 0 240px`,
     e o card ficava cortado na lateral direita (a rolagem horizontal
     existe, mas nada avisa/cabe direito num viewport de celular). Fix
     real: empilhar as colunas verticalmente abaixo de 780px, cada uma
     ocupando a largura toda - sem corte, sem precisar rolar de lado. */
  .funil { flex-direction: column; overflow-x: visible; }
  .coluna { flex: 1 1 auto; width: 100%; }
  .grade-2 { grid-template-columns: 1fr; }

  /* Achado real 23/09/2026 (Fernando testou no celular, "totalmente
     desconfigurada"): o cabeçalho tentava caber logo + 7 abas + menu de
     usuário numa linha só, sem quebrar nem rolar -- em qualquer tela
     abaixo de ~780px isso ou cortava botão ou empurrava o layout inteiro
     pra rolagem horizontal (viewport inteiro arrastável de lado, feio e
     confuso). Fix: cabeçalho empilha em 2 linhas (marca+menu em cima,
     abas embaixo), abas viram uma faixa com rolagem horizontal PRÓPRIA
     (padrão comum de app mobile) em vez de tentar espremer tudo. */
  header.topo { flex-wrap: wrap; padding: 0.8rem 0; gap: 0.6rem; }
  .marca-topo { order: 1; }
  .topo-direita { order: 2; }
  nav.abas {
    order: 3; width: 100%; gap: 0.3rem; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; padding-bottom: 0.2rem;
  }
  nav.abas button { padding: 0.4rem 0.7rem; font-size: 0.8rem; white-space: nowrap; flex: 0 0 auto; }
  #app { padding: 0 1rem 2rem; }

  /* Mesma lógica pras tabelas (Contatos/Usuários/Automação/Execuções):
     em vez de espremer 4-5 colunas até ficar ilegível, ou estourar a
     página inteira de lado, a tabela rola horizontal SOZINHA dentro do
     próprio espaço -- resto da página fica parado/legível. */
  table.tabela-clientes { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
  table.tabela-clientes thead, table.tabela-clientes tbody { display: table; width: 100%; }
}

/* ---- Complemento CRM v2 (telas Hoje/Negocios/Dashboard novas) ---- */

.item-lista {
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--r-3); padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem; cursor: pointer; transition: filter .15s, border-color .15s;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.32);
}
.item-lista:hover { border-color: rgba(255,255,255,0.5); filter: brightness(1.04); }
.item-lista__principal { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }
.item-lista__meta { font-size: 0.78rem; color: rgba(255,255,255,0.88); margin: 0.2rem 0 0.5rem; }
.item-lista .dono-tag { background: rgba(255,255,255,0.28); color: #fff; }
.btn-mini {
  font-size: 0.72rem; padding: 0.25em 0.7em; border-radius: var(--r-pill);
  border: 1px solid var(--border-2); background: var(--bg-elev); color: var(--fg);
}
.btn-mini:hover { border-color: var(--accent, var(--ac-blue)); }
.item-lista .btn-mini { background: rgba(255,255,255,0.85); border-color: transparent; color: var(--ac-ink); }

.card-negocio {
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--r-3);
  padding: 0.7rem 0.8rem; margin-bottom: 0.6rem; cursor: grab; box-shadow: var(--shadow-sm);
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.32);
}
.card-negocio:hover { border-color: rgba(255,255,255,0.5); filter: brightness(1.04); }
.card-negocio__titulo { font-weight: 700; font-size: 0.88rem; }
.card-negocio__sub { font-size: 0.76rem; color: rgba(255,255,255,0.88); margin: 0.15rem 0 0.5rem; }
.card-negocio__rodape { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.card-negocio .mini-pill { background: rgba(255,255,255,0.28); color: #fff; }
.coluna__cabecalho { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.2rem; }
.coluna__ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.coluna__contagem { font-size: 0.75rem; color: var(--fg-soft); font-weight: 400; }
.coluna__total { font-size: 0.78rem; color: var(--fg-muted); margin-bottom: 0.7rem; }
/* Corpo da coluna: min-height pequeno (era 200px no `.coluna` inteiro antes)
   - só o suficiente pra dar uma área de drop visível quando vazia, sem
   deixar sobrando um vão em branco quando a coluna tem poucos cards. */
.coluna__corpo { min-height: 64px; flex: 1 1 auto; }
.vazio-coluna { text-align: center; color: var(--fg-soft); font-size: 0.8rem; padding: 1rem 0; }
.mini-pill { font-size: 0.66rem; padding: 0.1em 0.55em; border-radius: var(--r-pill); background: var(--bg-sunk); color: var(--fg-muted); }
/* Risk bucket de 3 níveis no card (item #1 do mapa DeskcommCRM, 23/09/2026,
   substituiu o badge binário único do item 3b de 10/09) - limiares em
   KanbanCalc/app.js (LIMIAR_DIAS_RISCO/LIMIAR_DIAS_CRITICO). Âmbar =
   atenção, vermelho = crítico; em_dia não mostra badge nenhum. */
.mini-pill--risco { background: rgba(217,119,6,0.35); color: #fff; font-weight: 700; display: inline-block; margin-top: 0.4rem; }
.mini-pill--critico { background: rgba(220,38,38,0.42); color: #fff; font-weight: 700; display: inline-block; margin-top: 0.4rem; }

.grafico-barras { display: flex; align-items: flex-end; gap: 0.5rem; height: 140px; padding-top: 0.5rem; }
.grafico-barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.3rem; }
/* Azul→petróleo sóbrio, de propósito diferente do gradiente roxo/rosa da
   marca (feedback 05/09: "não tem nada a ver com relatório comercial"). */
.grafico-barra__coluna { width: 100%; max-width: 28px; background: linear-gradient(180deg, #2563EB 0%, #0891B2 100%); border-radius: 4px 4px 0 0; min-height: 3px; }
.grafico-barra span { font-size: 0.68rem; color: var(--fg-soft); }

.barra-h { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; margin-bottom: 0.55rem; }
.barra-h__rotulo { flex: 0 0 130px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-h__trilho { flex: 1; background: var(--bg-sunk); border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.barra-h__preenchida { height: 100%; background: var(--gradiente-marca); border-radius: var(--r-pill); }
.barra-h__valor { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; }

.linha-conversao { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.linha-conversao:last-child { border-bottom: none; }

.interacao-linha { border-bottom: 1px solid var(--border); padding: 0.6rem 0; font-size: 0.85rem; }
.interacao-linha:last-child { border-bottom: none; }
.interacao-linha__meta { color: var(--fg-soft); font-size: 0.74rem; margin-bottom: 0.2rem; }

.checkbox-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border-2);
  border-radius: var(--r-pill); padding: 0.3rem 0.7rem; font-size: 0.78rem; cursor: pointer;
}
.chave-exibida { background: var(--bg-sunk); border-radius: var(--r-3); padding: 0.9rem; margin: 0.8rem 0; }
.chave-exibida code { font-family: var(--font-mono); font-size: 0.8rem; word-break: break-all; display: block; margin-top: 0.4rem; }
.chave-escopo { font-size: 0.7rem; color: var(--fg-soft); font-family: var(--font-mono); }