:root {
  --bg: #f4f5f7;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --borda: #e3e6eb;
  --borda-forte: #cdd2da;
  --texto: #111827;
  --texto-2: #4b5563;
  --muted: #8a93a3;
  /* Cores da marca Highway (logo: ciano → azul → roxo → rosa sobre azul-noite) */
  --sidebar: #070818;
  --sidebar-2: #151735;
  --sidebar-texto: #c3c6e6;
  --acento: #6a3cff;
  --acento-forte: #5428e6;
  --acento-suave: #efeaff;
  --gradiente: linear-gradient(120deg, #00c8ff 0%, #2f5bff 38%, #8a2bff 70%, #e040fb 100%);
  --gradiente-suave: linear-gradient(120deg, rgba(0, 200, 255, .14), rgba(138, 43, 255, .14) 60%, rgba(224, 64, 251, .14));
  --azul: #2563eb;
  --azul-suave: #dbeafe;
  --verde: #059669;
  --verde-suave: #d1fae5;
  --vermelho: #dc2626;
  --vermelho-suave: #fee2e2;
  --amarelo: #b45309;
  --amarelo-suave: #fef3c7;
  --roxo: #7c3aed;
  --roxo-suave: #ede9fe;
  --cinza-suave: #eef0f3;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --sombra-alta: 0 20px 50px rgba(15, 23, 42, .25);
  --borda-hover: #b8bfca;
  --linha-hover: #fafbfc;
  --linha-previsao: #faf9ff;
  --linha-atual: #f3f6ff;
  --coluna-kanban: #eceef2;
  --modal-fundo: rgba(15, 23, 42, .5);
  --apagado: #b8bfcc;
  --texto-azul: #1e3a8a;
  --texto-amarelo: #78350f;
  --texto-verde: #065f46;
  --code-bg: rgba(255, 255, 255, .7);
  --botao-verde: #16a34a;
  --fundo-app: var(--bg);
  /* gráficos */
  --serie-receita: #2f5bff;
  --serie-despesa: #d6409f;
  --serie-saldo: #6a3cff;
  --graf-grade: #eceef3;
  --graf-eixo: #c9ced8;
  --graf-texto: #6b7280;
  --graf-forte: #111827;
  --graf-previsao: #f6f4ff;
  color-scheme: light;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--texto);
}

/* ---------- Tema escuro: grafite neutro, confortável à noite ---------- */
:root[data-tema="escuro"] {
  --bg: #0d0f15;
  --superficie: #161922;
  --superficie-2: #1c202b;
  --borda: #272c3a;
  --borda-forte: #363c4d;
  --borda-hover: #4a5166;
  --texto: #e8eaf0;
  --texto-2: #b3b9c8;
  --muted: #7f8799;
  --sidebar: #0a0b10;
  --sidebar-2: #1b1e2a;
  --sidebar-texto: #b9bdcc;
  --acento: #8466ff;
  --acento-forte: #a68fff;
  --acento-suave: rgba(132, 102, 255, .16);
  --azul: #6b9bff;
  --azul-suave: rgba(59, 110, 255, .16);
  --verde: #34d399;
  --verde-suave: rgba(16, 185, 129, .15);
  --vermelho: #f87171;
  --vermelho-suave: rgba(239, 68, 68, .15);
  --amarelo: #fbbf24;
  --amarelo-suave: rgba(245, 158, 11, .15);
  --roxo: #b197ff;
  --roxo-suave: rgba(139, 92, 246, .18);
  --cinza-suave: #232733;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-alta: 0 20px 50px rgba(0, 0, 0, .55);
  --linha-hover: #1b1f2a;
  --linha-previsao: #191a2a;
  --linha-atual: #172036;
  --coluna-kanban: #12141b;
  --modal-fundo: rgba(0, 0, 0, .6);
  --apagado: #4b5263;
  --texto-azul: #a9c2ff;
  --texto-amarelo: #fcd38a;
  --texto-verde: #8de6c3;
  --code-bg: rgba(255, 255, 255, .08);
  --botao-verde: #15803d;
  --serie-receita: #5b82ff;
  --serie-despesa: #d65aa6;
  --serie-saldo: #9a7bff;
  --graf-grade: #232733;
  --graf-eixo: #3a4052;
  --graf-texto: #8b93a6;
  --graf-forte: #e8eaf0;
  --graf-previsao: #181a28;
  color-scheme: dark;
}

/* ---------- Tema Highway: tudo nas cores da marca (azul-noite + ciano, azul, roxo e rosa) ---------- */
:root[data-tema="highway"] {
  --bg: #060716;
  --superficie: #0f1130;
  --superficie-2: #14173b;
  --borda: #24285a;
  --borda-forte: #343a7a;
  --borda-hover: #4b52a3;
  --texto: #eef0ff;
  --texto-2: #bcc0ec;
  --muted: #8b90c4;
  --sidebar: #04051a;
  --sidebar-2: #181b4a;
  --sidebar-texto: #c3c6f0;
  --acento: #8a5cff;
  --acento-forte: #b28dff;
  --acento-suave: rgba(138, 92, 255, .18);
  --azul: #6d95ff;
  --azul-suave: rgba(47, 91, 255, .2);
  --verde: #3ee0b0;
  --verde-suave: rgba(16, 185, 129, .16);
  --vermelho: #ff7a9a;
  --vermelho-suave: rgba(255, 70, 120, .16);
  --amarelo: #ffcc66;
  --amarelo-suave: rgba(255, 190, 70, .14);
  --roxo: #c4a2ff;
  --roxo-suave: rgba(160, 100, 255, .2);
  --cinza-suave: #1b1e48;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px rgba(120, 110, 255, .04);
  --sombra-alta: 0 24px 60px rgba(0, 0, 10, .7), 0 0 40px rgba(110, 70, 255, .15);
  --linha-hover: #151845;
  --linha-previsao: #12143a;
  --linha-atual: #161c4d;
  --coluna-kanban: #0a0c26;
  --modal-fundo: rgba(2, 3, 15, .7);
  --apagado: #474c8a;
  --texto-azul: #b4c8ff;
  --texto-amarelo: #ffe0a3;
  --texto-verde: #9ff0d6;
  --code-bg: rgba(255, 255, 255, .08);
  --botao-verde: #13a36e;
  --fundo-app:
    radial-gradient(50% 45% at 100% 0%, rgba(224, 64, 251, .16), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgba(0, 200, 255, .12), transparent 70%),
    radial-gradient(60% 50% at 40% 40%, rgba(47, 91, 255, .08), transparent 70%),
    #060716;
  --serie-receita: #3a95e8;
  --serie-despesa: #d957b0;
  --serie-saldo: #a77bff;
  --graf-grade: #1d2152;
  --graf-eixo: #353b7a;
  --graf-texto: #8b90c4;
  --graf-forte: #eef0ff;
  --graf-previsao: #13163f;
  color-scheme: dark;
}
:root[data-tema="highway"] .card,
:root[data-tema="highway"] .kpi,
:root[data-tema="highway"] .bloco,
:root[data-tema="highway"] .plano { background: linear-gradient(160deg, rgba(47, 91, 255, .07), transparent 40%), var(--superficie); }
:root[data-tema="highway"] .kpi { border-top: 1px solid rgba(140, 120, 255, .35); }
:root[data-tema="highway"] .topbar { background: rgba(6, 7, 22, .75); backdrop-filter: blur(10px); border-bottom-color: var(--borda); }
:root[data-tema="highway"] h1 { background: linear-gradient(90deg, #ffffff, #c9b8ff 60%, #f3a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-tema="highway"] .kpi .valor { text-shadow: 0 0 24px rgba(140, 110, 255, .35); }
:root[data-tema="highway"] .sidebar { border-right: 1px solid var(--borda); }
:root[data-tema="highway"] .grade-wrap, :root[data-tema="highway"] .tooltip-graf { background: var(--superficie); }

/* Temas escuros: ajustes que não cabem só em variáveis */
:root[data-tema="escuro"] .kpi.destaque, :root[data-tema="highway"] .kpi.destaque { border: 1px solid var(--borda-forte); }
:root[data-tema="escuro"] .tabela-precos th, :root[data-tema="highway"] .tabela-precos th { background: var(--superficie-2); border-bottom: 1px solid var(--borda); }
:root[data-tema="escuro"] .segmentado button.ativo { background: var(--acento); }
:root[data-tema="escuro"] .nav a.ativo { box-shadow: none; }
:root[data-tema="escuro"] img.login-logo, :root[data-tema="escuro"] .marca-logo img { box-shadow: none; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo-app); background-attachment: fixed; color: var(--texto); }
body.trocando-tema, body.trocando-tema * { transition: background-color .25s, border-color .25s, color .25s !important; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.pequeno { font-size: 12px; }
.forte { font-weight: 650; }
.num { font-variant-numeric: tabular-nums; }
.direita { text-align: right; }
.link { color: var(--azul); text-decoration: none; cursor: pointer; }
.link:hover { text-decoration: underline; }
.ic { flex: none; vertical-align: middle; }
.oculto { display: none !important; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; height: 100vh; }
.sidebar { background: radial-gradient(120% 50% at 0% 0%, rgba(47, 91, 255, .16), transparent 60%), radial-gradient(100% 40% at 100% 100%, rgba(224, 64, 251, .12), transparent 60%), var(--sidebar); color: var(--sidebar-texto); display: flex; flex-direction: column; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; text-decoration: none; color: #fff; }
.marca-logo img { width: 40px; height: 40px; border-radius: 10px; display: block; box-shadow: 0 0 22px rgba(138, 43, 255, .35); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-size: 17px; letter-spacing: .02em; background: linear-gradient(90deg, #5fd8ff, #b58cff 55%, #f08bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-texto small { color: #94a3b8; font-size: 11px; }
.nav { padding: 6px 10px 20px; display: flex; flex-direction: column; gap: 1px; }
.nav .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #6b6f9c; padding: 14px 10px 6px; font-weight: 600; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--sidebar-texto); font-size: 13.5px; }
.nav a:hover { background: var(--sidebar-2); color: #fff; }
.nav a.ativo { background: var(--gradiente); color: #fff; font-weight: 600; box-shadow: 0 4px 18px rgba(106, 60, 255, .35); }
.nav a .contador { margin-left: auto; background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; }
.nav a .contador.cinza { background: #475569; }
.nav a.ativo .contador { background: #111827; }

.principal { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.topbar { position: relative; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px 28px; background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topbar-dir { margin-left: auto; font-size: 13px; display: flex; align-items: center; gap: 16px; }
#dataHoje { display: inline-block; }
#dataHoje::first-letter { text-transform: uppercase; }

/* ---------- Usuário, avatar e login ---------- */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; color: #fff; font-weight: 700; overflow: hidden; letter-spacing: .02em; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.usuario-topo { position: relative; }
.usuario-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); background: var(--superficie); border-radius: 30px; padding: 3px 12px 3px 3px; cursor: pointer; font: inherit; font-weight: 600; color: var(--texto); }
.usuario-btn:hover { border-color: var(--borda-forte); }
.menu-usuario { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 6px; z-index: 60; }
.menu-usuario .menu-cab { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.menu-usuario button, .menu-usuario a { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: none; background: none; font: inherit; color: var(--texto); text-decoration: none; border-radius: 8px; cursor: pointer; text-align: left; }
.menu-usuario button:hover, .menu-usuario a:hover { background: var(--cinza-suave); }
.menu-usuario .perigo { color: var(--vermelho); }
.menu-temas { padding: 6px 10px 10px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.temas-op { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.menu-usuario .tema-op { flex-direction: column; gap: 5px; padding: 6px 4px; border: 1px solid var(--borda); border-radius: 10px; font-size: 12px; justify-content: center; align-items: center; }
.menu-usuario .tema-op.ativo { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-suave); font-weight: 600; }
.tema-amostra { position: relative; width: 44px; height: 30px; border-radius: 7px; border: 1px solid rgba(128, 128, 160, .35); overflow: hidden; display: block; }
.tema-amostra i { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 5px; border-radius: 3px; }
.tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(60% 60% at 15% 10%, rgba(47, 91, 255, .35), transparent 60%), radial-gradient(50% 50% at 90% 90%, rgba(224, 64, 251, .3), transparent 60%), var(--sidebar); }
.caixa-login { width: 400px; max-width: 100%; background: var(--superficie); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.caixa-login .login-logo { width: 64px; height: 64px; border-radius: 16px; align-self: center; box-shadow: 0 0 30px rgba(138, 43, 255, .45); }
.caixa-login h1 { text-align: center; font-size: 20px; }
.caixa-login p { text-align: center; margin: -6px 0 4px; }
.caixa-login label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.caixa-login input { padding: 10px 12px; font-size: 14px; }
.caixa-login .btn { justify-content: center; margin-top: 4px; }
.login-erro { color: var(--vermelho); font-size: 13px; min-height: 18px; text-align: center; }
.perfil-foto { display: flex; gap: 18px; align-items: center; }
.recorte { position: relative; width: 300px; height: 300px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #111; touch-action: none; }
.recorte canvas { display: block; cursor: grab; }
.recorte canvas:active { cursor: grabbing; }
.recorte-mascara { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .5); border: 2px solid rgba(255, 255, 255, .85); pointer-events: none; }
.recorte-controles { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 14px 0 8px; }
.recorte-controles input[type=range] { width: 180px; accent-color: var(--acento); padding: 0; border: none; box-shadow: none; }
.recorte-controles span { font-size: 18px; color: var(--muted); }
.foto-clicavel { position: relative; cursor: pointer; border-radius: 50%; display: inline-block; }
.foto-clicavel .trocar { position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .15s; }
.foto-clicavel:hover .trocar { opacity: 1; }
.perfil-pagina { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .perfil-pagina { grid-template-columns: 1fr; } }
.perfil-foto label.btn { cursor: pointer; }
.acessos { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; }
.acesso { display: flex; align-items: center; gap: 12px; border: 1px solid var(--borda); border-radius: 12px; padding: 12px; }
.acesso .corpo { flex: 1; min-width: 0; }
.acoes-acesso { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Atividades ---------- */
.painel-equipe { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
@media (max-width: 1000px) { .painel-equipe { grid-template-columns: 1fr; } }
.equipe-lista { display: flex; flex-direction: column; gap: 8px; }
.membro { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borda); text-decoration: none; color: inherit; }
.membro:hover { border-color: var(--borda-forte); }
.membro .corpo { min-width: 0; }
.membro.convidar { justify-content: center; color: var(--acento-forte); font-weight: 600; border-style: dashed; background: transparent; }
.cor-texto { color: var(--texto); }
.feed { display: flex; flex-direction: column; max-height: 430px; overflow-y: auto; }
.ativ { display: flex; gap: 11px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--borda); }
.ativ:last-child { border-bottom: none; }
.ativ-corpo { flex: 1; min-width: 0; }
.ativ-texto { font-size: 13.5px; line-height: 1.45; }
.ativ-mud { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--texto-2); }
.ativ-mud s { color: var(--muted); }
.ativ-hora { font-size: 12px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.ativ-dia { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 4px 4px; }
.ativ-dia:first-child { padding-top: 0; }
.ativ-dia::first-letter { text-transform: uppercase; }
.equipe-resumo { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pessoa { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--borda); background: var(--superficie); border-radius: 12px; padding: 10px 14px 10px 10px; cursor: pointer; font: inherit; color: inherit; box-shadow: var(--sombra); }
.pessoa:hover { border-color: var(--borda-forte); }
.pessoa.ativo { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(106, 60, 255, .15); }
.conteudo { flex: 1; overflow-y: auto; padding: 24px 28px 60px; }

.busca-global { position: relative; width: min(520px, 100%); }
.busca-global input { width: 100%; padding-left: 34px; background: var(--superficie-2); }
.busca-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.busca-resultados { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-alta); z-index: 50; max-height: 420px; overflow-y: auto; padding: 6px; }
.busca-resultados a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.busca-resultados a:hover, .busca-resultados a.sel { background: var(--cinza-suave); }
.busca-resultados .tipo { font-size: 11px; color: var(--muted); margin-left: auto; }

/* ---------- Cabeçalho de página ---------- */
.cabecalho { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cabecalho .sub { color: var(--muted); margin-top: 4px; }
.cabecalho .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 6px; }
.voltar:hover { color: var(--texto); }

/* ---------- Botões e campos ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); border-radius: 8px; padding: 7px 13px; font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.3; }
.btn:hover { background: var(--superficie-2); border-color: var(--borda-hover); }
.btn.primario { background: var(--gradiente); border-color: transparent; color: #fff; box-shadow: 0 2px 10px rgba(106, 60, 255, .25); }
.btn.primario:hover { background: var(--gradiente); border-color: transparent; filter: brightness(1.08); }
.btn.escuro { background: var(--sidebar); border-color: var(--sidebar); color: #fff; }
.btn.escuro:hover { background: var(--sidebar-2); }
.btn.perigo { color: var(--vermelho); }
.btn.perigo:hover { background: var(--vermelho-suave); border-color: var(--vermelho); }
.btn.verde { background: var(--botao-verde); border-color: var(--botao-verde); color: #fff; }
.btn.verde:hover { background: #15803d; }
.btn.fantasma { border-color: transparent; background: transparent; }
.btn.fantasma:hover { background: var(--cinza-suave); }
.btn.peq { padding: 4px 9px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: 7px; cursor: pointer; color: var(--texto-2); font-size: 20px; padding: 0; text-decoration: none; }
.btn-icone:hover { background: var(--cinza-suave); color: var(--texto); }
.btn-icone.ativo { color: var(--acento); }

input, select, textarea { font: inherit; color: inherit; border: 1px solid var(--borda-forte); border-radius: 8px; padding: 7px 10px; background: var(--superficie); outline: none; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(106, 60, 255, .18); }
textarea { resize: vertical; line-height: 1.5; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--acento-forte); cursor: pointer; }

/* ---------- Barra de filtros ---------- */
.barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.barra .busca { flex: 1; min-width: 220px; max-width: 360px; }
.barra .espaco { flex: 1; }
.segmentado { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 8px; overflow: hidden; background: var(--superficie); }
.segmentado button { border: none; background: transparent; padding: 7px 12px; font: inherit; cursor: pointer; color: var(--texto-2); border-right: 1px solid var(--borda); }
.segmentado button:last-child { border-right: none; }
.segmentado button.ativo { background: var(--gradiente); color: #fff; }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; }
.abas button { border: none; background: none; padding: 10px 14px; font: inherit; font-weight: 550; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas button:hover { color: var(--texto); }
.abas button.ativo { color: var(--texto); border-image: var(--gradiente) 1; border-bottom-width: 2px; border-bottom-style: solid; }

/* ---------- Cards e KPIs ---------- */
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; }
.card + .card { margin-top: 16px; }
.card-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-topo .acoes { margin-left: auto; display: flex; gap: 6px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 15px 17px; box-shadow: var(--sombra); }
.kpi .rotulo { color: var(--muted); font-size: 12.5px; font-weight: 550; }
.kpi .valor { font-size: 23px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .detalhe { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.alerta .valor { color: var(--vermelho); }
.kpi.positivo .valor { color: var(--verde); }
.colunas-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.colunas-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.colunas-detalhe { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.colunas-2 > .card + .card, .colunas-3 > .card + .card, .colunas-detalhe .card + .card { margin-top: 0; }
.pilha { display: flex; flex-direction: column; gap: 16px; }
.pilha > .card + .card { margin-top: 0; }
@media (max-width: 1150px) { .colunas-2, .colunas-3, .colunas-detalhe { grid-template-columns: 1fr; } }

/* ---------- Tags ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--cinza-suave); color: var(--texto-2); }
.tag.verde { background: var(--verde-suave); color: var(--verde); }
.tag.vermelho { background: var(--vermelho-suave); color: var(--vermelho); }
.tag.amarelo { background: var(--amarelo-suave); color: var(--amarelo); }
.tag.azul { background: var(--azul-suave); color: var(--azul); }
.tag.roxo { background: var(--roxo-suave); color: var(--roxo); }

/* ---------- Grade estilo planilha ---------- */
.grade-wrap { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: auto; box-shadow: var(--sombra); max-height: calc(100vh - 250px); }
table.grade { width: 100%; border-collapse: separate; border-spacing: 0; }
.grade th { position: sticky; top: 0; z-index: 2; background: var(--superficie-2); text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-2); padding: 9px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; user-select: none; }
.grade th[data-ord] { cursor: pointer; }
.grade th[data-ord]:hover { color: var(--texto); }
.grade th .seta { color: var(--acento-forte); }
.grade td { border-bottom: 1px solid var(--borda); padding: 0 4px; height: 38px; vertical-align: middle; white-space: nowrap; }
.grade td.txt { padding: 0 10px; }
.grade tr:last-child td { border-bottom: none; }
.grade tbody tr:hover td { background: var(--linha-hover); }
.grade .cel { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 6px 6px; min-width: 70px; }
.grade .cel:hover { border-color: var(--borda); background: var(--superficie); }
.grade .cel:focus { border-color: var(--acento); background: var(--superficie); }
.grade .cel.num { text-align: right; }
.grade select.cel { cursor: pointer; }
.grade .cel.salvo { background: var(--verde-suave) !important; transition: background .2s; }
.grade tfoot td { background: var(--superficie-2); font-weight: 650; padding: 0 10px; position: sticky; bottom: 0; }

/* Tabela simples */
table.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--superficie-2); }

/* ---------- Listas ---------- */
.lista { display: flex; flex-direction: column; }
.item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--borda); min-height: 42px; }
.item:last-child { border-bottom: none; }
.item .corpo { flex: 1; min-width: 0; }
.item .titulo { font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.item .sub { font-size: 12px; color: var(--muted); }
.item.feito .titulo { text-decoration: line-through; color: var(--muted); }
.item.clicavel { cursor: pointer; border-radius: 6px; }
.item.clicavel:hover { background: var(--superficie-2); }
.vazio { padding: 26px; text-align: center; color: var(--muted); border: 1px dashed var(--borda-forte); border-radius: var(--raio); background: var(--superficie); }
.card .vazio { border: none; padding: 14px; background: transparent; }

.historico { display: flex; flex-direction: column; gap: 0; }
.evento { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.evento::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--borda); }
.evento:last-child::before { display: none; }
.evento .ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--acento); margin: 4px 0 0 3px; border: 2px solid var(--acento-suave); box-sizing: content-box; }
.evento .meta { font-size: 12px; color: var(--muted); }
.evento .texto { white-space: pre-wrap; margin-top: 2px; }

.dados-lista { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; font-size: 13.5px; }
.dados-lista dt { color: var(--muted); }
.dados-lista dd { margin: 0; word-break: break-word; white-space: pre-wrap; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.coluna { background: var(--coluna-kanban); border-radius: var(--raio); padding: 10px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; }
.coluna.sobre { background: var(--acento-suave); outline: 2px dashed var(--acento); }
.coluna-topo { display: flex; align-items: center; gap: 6px; padding: 2px 4px 6px; }
.coluna-topo .qtd { background: var(--superficie); border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 650; color: var(--texto-2); }
.coluna-topo .total { margin-left: auto; font-size: 12px; color: var(--muted); }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 9px; padding: 11px 12px; box-shadow: var(--sombra); cursor: grab; }
.cartao:hover { border-color: var(--borda-forte); }
.cartao.arrastando { opacity: .4; }
.cartao .nome { font-weight: 600; }
.cartao .linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---------- Modal ---------- */
.modal-fundo { position: fixed; inset: 0; background: var(--modal-fundo); display: flex; align-items: flex-start; justify-content: center; z-index: 100; padding: 6vh 16px; overflow-y: auto; animation: aparecer .12s; }
.modal { background: var(--superficie); border-radius: 14px; width: 560px; max-width: 100%; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; }
.modal.largo { width: 820px; }
.modal.extra { width: 1040px; }
.modal-topo { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.modal-topo h2 { flex: 1; }
.modal-corpo { padding: 18px 20px; }
.modal-rodape { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 14px 14px; }
.modal-rodape .esquerda { margin-right: auto; }
@keyframes aparecer { from { opacity: 0; } }

.form-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; grid-column: span 3; }
.campo.inteira { grid-column: span 6; }
.campo.terco { grid-column: span 2; }
.campo label { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.campo small { color: var(--muted); font-size: 11.5px; }
.campo .check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--texto); padding-top: 4px; }
.form-grid .secao { grid-column: span 6; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 6px; border-top: 1px solid var(--borda); padding-top: 12px; }
.form-grid .secao:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.atalhos { display: flex; gap: 6px; flex-wrap: wrap; }
.atalhos button { border: 1px solid var(--borda-forte); background: var(--superficie); border-radius: 20px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.atalhos button:hover { border-color: var(--acento); background: var(--acento-suave); }

/* ---------- Toast ---------- */
.toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--sidebar); color: #fff; padding: 11px 16px; border-radius: 9px; box-shadow: var(--sombra-alta); font-weight: 500; animation: subir .2s; max-width: 380px; }
.toast-erro { background: var(--vermelho); }
@keyframes subir { from { transform: translateY(10px); opacity: 0; } }

/* ---------- Biblioteca ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--borda-forte); background: var(--superficie); border-radius: 20px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--texto-2); }
.chip:hover { border-color: var(--texto-2); }
.chip.ativo { background: var(--gradiente); color: #fff; border-color: transparent; }
.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sombra); }
.bloco:hover { border-color: var(--borda-forte); }
.bloco .topo { display: flex; align-items: flex-start; gap: 8px; }
.bloco .topo h3 { flex: 1; font-size: 14.5px; cursor: pointer; }
.bloco .previa { color: var(--texto-2); font-size: 13px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; cursor: pointer; }
.bloco .rodape { display: flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 4px; }
.texto-pre { white-space: pre-wrap; line-height: 1.6; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; padding: 14px; max-height: 60vh; overflow-y: auto; }

/* ---------- Progresso ---------- */
.progresso { height: 8px; background: var(--cinza-suave); border-radius: 10px; overflow: hidden; }
.progresso > div { height: 100%; background: var(--gradiente); border-radius: 10px; transition: width .2s; }
.progresso.ok > div { background: var(--verde); }

/* ---------- Calendário ---------- */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--borda); gap: 1px; box-shadow: var(--sombra); }
.calendario .dia-semana { background: var(--superficie-2); padding: 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.calendario .dia { background: var(--superficie); min-height: 112px; padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.calendario .dia:hover { background: var(--linha-hover); }
.calendario .dia.fora { background: var(--superficie-2); }
.calendario .dia.fora .n { color: var(--apagado); }
.calendario .dia.hoje .n { background: var(--gradiente); color: #fff; }
.calendario .dia.sobre { background: var(--acento-suave); }
.calendario .n { font-size: 12px; font-weight: 650; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--texto-2); }
.evento-cal { font-size: 11.5px; padding: 3px 6px; border-radius: 5px; background: var(--azul-suave); color: var(--texto-azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; border-left: 3px solid var(--azul); }
.evento-cal.st-planejado { background: var(--cinza-suave); color: var(--texto-2); border-left-color: var(--apagado); }
.evento-cal.st-producao { background: var(--azul-suave); color: var(--texto-azul); border-left-color: var(--azul); }
.evento-cal.st-aprovacao { background: var(--amarelo-suave); color: var(--texto-amarelo); border-left-color: var(--acento); }
.evento-cal.st-entregue { background: var(--verde-suave); color: var(--texto-verde); border-left-color: var(--verde); text-decoration: line-through; }

/* ---------- Barras (gráfico simples) ---------- */
.barras { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding-top: 10px; }
.barras .grupo-barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.barras .par { flex: 1; display: flex; align-items: flex-end; gap: 4px; width: 100%; justify-content: center; }
.barras .b { width: 40%; max-width: 30px; border-radius: 4px 4px 0 0; min-height: 2px; }
.barras .b.receita { background: var(--verde); }
.barras .b.despesa { background: var(--serie-despesa); }
.barras .rot { font-size: 11.5px; color: var(--muted); text-transform: capitalize; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--c); }

.funil-linha { display: grid; grid-template-columns: 130px 1fr 40px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.funil-linha .barra-f { height: 22px; background: var(--cinza-suave); border-radius: 6px; overflow: hidden; }
.funil-linha .barra-f div { height: 100%; background: var(--gradiente); border-radius: 6px; }

.seletor-mes { display: inline-flex; align-items: center; gap: 4px; background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 8px; padding: 2px; }
.seletor-mes span { min-width: 150px; text-align: center; font-weight: 600; }

/* ---------- Financeiro ---------- */
.kpi.destaque { background: radial-gradient(120% 120% at 100% 0%, rgba(224, 64, 251, .22), transparent 55%), radial-gradient(120% 120% at 0% 100%, rgba(0, 200, 255, .18), transparent 55%), var(--sidebar); border-color: transparent; }
.kpi.destaque .rotulo, .kpi.destaque .detalhe { color: #b9bde0; }
.kpi.destaque .valor { color: #fff; }
.positivo { color: var(--verde); }
.negativo { color: var(--vermelho); }
.graf-wrap { position: relative; width: 100%; overflow: hidden; }
.graf-wrap svg { display: block; }
.tooltip-graf { position: absolute; z-index: 5; pointer-events: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra-alta); padding: 10px 12px; min-width: 210px; font-size: 12.5px; }
.tooltip-graf strong { display: block; margin-bottom: 6px; }
.tooltip-graf .tl { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; color: var(--texto-2); }
.tooltip-graf .tl span { display: flex; align-items: center; gap: 6px; }
.tooltip-graf .tl i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.tooltip-graf .tl b { color: var(--texto); font-variant-numeric: tabular-nums; font-weight: 600; }
.tooltip-graf .tl b.forte { font-weight: 750; }
.legenda .hachura::before { background: repeating-linear-gradient(45deg, var(--muted) 0 2px, var(--cinza-suave) 2px 5px); }
.tabela-meses tr.futuro td { background: var(--linha-previsao); color: var(--texto-2); }
.tabela-meses tr.atual td { background: var(--linha-atual); }
.tabela-meses tfoot td { font-weight: 700; border-top: 2px solid var(--borda); padding: 10px; }
.ranking { display: flex; flex-direction: column; gap: 10px; }
.rk-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 4px; }
.rk-barra { height: 8px; background: var(--cinza-suave); border-radius: 6px; overflow: hidden; }
.rk-barra div { height: 100%; border-radius: 6px; }

/* ---------- Prospecção ---------- */
.faixa-abordar { display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-wrap: wrap; background: radial-gradient(120% 140% at 100% 0%, rgba(224, 64, 251, .10), transparent 55%), radial-gradient(120% 140% at 0% 100%, rgba(0, 200, 255, .10), transparent 55%), var(--superficie); }
.btn.grande { padding: 12px 22px; font-size: 15px; border-radius: 10px; }
.diagnostico { display: flex; flex-direction: column; gap: 6px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.diag-lista { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.diag-lista.ruim { color: var(--vermelho); }
.diag-lista.bom { color: var(--verde); }
details.colar { margin-bottom: 14px; border: 1px dashed var(--borda-forte); border-radius: 8px; padding: 8px 12px; }
details.colar summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--acento-forte); }
details.colar textarea { width: 100%; margin-top: 8px; }
.aviso-dup { color: var(--amarelo); font-weight: 600; }
.abordar-lead { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; }
.ritmo { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 150px; align-items: end; }
.ritmo-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; font-size: 11px; color: var(--muted); }
.ritmo-barras { flex: 1; display: flex; align-items: flex-end; gap: 2px; width: 100%; justify-content: center; }
.ritmo-barras div { width: 40%; max-width: 12px; border-radius: 3px 3px 0 0; min-height: 0; }

.aviso-versao { background: var(--amarelo-suave); color: var(--texto-amarelo); border-bottom: 1px solid var(--amarelo); padding: 10px 28px; font-size: 13.5px; position: relative; z-index: 30; } /* abaixo da barra do topo (40), para não cobrir o menu do usuário */

.aviso-status { border-radius: 10px; padding: 10px 14px; margin: -4px 0 16px; font-size: 13.5px; border: 1px solid; }
.aviso-status.cancelado { background: var(--vermelho-suave); border-color: var(--vermelho); color: var(--vermelho); }
.aviso-status.suspenso { background: var(--roxo-suave); border-color: var(--roxo); color: var(--roxo); }
.aviso-status.pausado { background: var(--amarelo-suave); border-color: var(--amarelo); color: var(--texto-amarelo); }
.tabela-cob-cliente td { padding: 6px 6px; }
.tabela-cob-cliente .acoes-linha { white-space: nowrap; text-align: right; width: 1%; }
.tabela-cob-cliente .btn-icone { width: 26px; height: 26px; font-size: 15px; }
.btn-icone.positivo { color: var(--verde); }
.btn-icone.perigo:hover { color: var(--vermelho); background: var(--vermelho-suave); }
.previa-parcelas { display: flex; flex-wrap: wrap; gap: 6px; }
.resumo-contrato { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.resumo-contrato > div { display: flex; flex-direction: column; gap: 2px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.resumo-contrato b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---------- Metas ---------- */
.secao-metas { margin-bottom: 22px; }
.secao-metas > h2 { margin-bottom: 10px; }
.metas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.meta-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.meta-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--muted); }
.meta-card.st-verde::before { background: var(--verde); }
.meta-card.st-azul::before { background: var(--gradiente); }
.meta-card.st-amarelo::before { background: var(--amarelo); }
.meta-card.st-vermelho::before { background: var(--vermelho); }
.meta-card.arquivada { opacity: .55; }
.meta-topo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.meta-card h3 { font-size: 15.5px; }
.meta-valor { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.meta-valor b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.meta-valor span { color: var(--muted); font-size: 13px; }
.meta-barra { position: relative; height: 10px; background: var(--cinza-suave); border-radius: 10px; }
.meta-barra > div { height: 100%; border-radius: 10px; background: var(--gradiente); transition: width .3s; }
.meta-card.st-verde .meta-barra > div { background: var(--verde); }
.meta-card.st-vermelho .meta-barra > div { background: var(--vermelho); }
.meta-card.st-amarelo .meta-barra > div { background: var(--amarelo); }
.meta-barra i, .meta-hist i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--texto); border-radius: 2px; opacity: .55; }
.meta-hist { position: relative; overflow: visible; }
.meta-status { display: flex; justify-content: space-between; align-items: center; }
.meta-status b { font-variant-numeric: tabular-nums; }
.meta-info { font-size: 12.5px; color: var(--texto-2); }
.meta-desc { font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--borda); padding-top: 8px; }
.ano-meses th, .ano-meses td.mes { text-align: center; white-space: nowrap; }
.ano-meses th.atual { color: var(--acento-forte); }
.ano-meses td:first-child { min-width: 190px; }
.card-topo h2 { white-space: nowrap; }
.ano-meses td.mes { font-size: 12.5px; font-variant-numeric: tabular-nums; border-left: 2px solid var(--superficie); }
.ano-meses td.ok { background: var(--verde-suave); color: var(--texto-verde); font-weight: 650; }
.ano-meses td.nao { background: var(--vermelho-suave); color: var(--vermelho); }
.ano-meses td.andamento { background: var(--azul-suave); color: var(--texto-azul); }
.ano-meses td.futuro { color: var(--apagado); }
.ano-meses td.antes { color: var(--muted); background: var(--superficie-2); }
.meta-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 4px; }

/* ---------- Frentes de prospecção ---------- */
.frentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.frente { display: flex; flex-direction: column; gap: 14px; text-align: left; font: inherit; color: inherit; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 20px; cursor: pointer; box-shadow: var(--sombra); position: relative; overflow: hidden; transition: transform .12s, box-shadow .12s, border-color .12s; }
.frente::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradiente); }
.frente:hover { transform: translateY(-2px); border-color: var(--acento); box-shadow: 0 12px 30px rgba(106, 60, 255, .18); }
.frente-topo { display: flex; gap: 14px; align-items: flex-start; }
.frente-topo h2 { font-size: 18px; margin-bottom: 4px; }
.frente-icone { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--gradiente); color: #fff; flex: none; }
.frente-qualifica { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 13px; }
.frente-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--superficie-2); border-radius: 10px; padding: 12px; }
.frente-numeros div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.frente-numeros b { font-size: 19px; font-variant-numeric: tabular-nums; }
.frente-numeros span { font-size: 11.5px; color: var(--muted); }
.frente-entrar { align-self: flex-start; pointer-events: none; }
.trocar-frente { display: flex; gap: 10px; align-items: center; margin: -6px 0 14px; flex-wrap: wrap; }
.trocar-frente .segmentado button { display: inline-flex; align-items: center; gap: 6px; }
.segmentado.situacoes { flex-wrap: wrap; }
.segmentado.situacoes button { border-bottom: 1px solid var(--borda); }

/* ---------- Tabela de preços ---------- */
.tabela-precos th { background: var(--sidebar); color: #e5e7ff; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 11px 12px; }
.tabela-precos td { padding: 12px; vertical-align: top; }
.tabela-precos tr.nova-cat td { border-top: 2px solid var(--borda-forte); }
.tabela-precos .preco { font-weight: 750; white-space: nowrap; color: var(--acento-forte); font-variant-numeric: tabular-nums; }
.tabela-precos .detalhes { color: var(--texto-2); font-size: 13px; line-height: 1.5; min-width: 280px; }
.tabela-precos .cat-nome { white-space: nowrap; }
.tabela-precos th.direita, .tabela th.direita { text-align: right; }
.tabela-precos td:nth-child(2) { min-width: 150px; }
.tabela-precos td:nth-child(5) { min-width: 170px; }
.cat-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; background: #9ca3af; }
.cat-ponto.roxo { background: var(--roxo); }
.cat-ponto.azul { background: var(--serie-receita); }
.cat-ponto.rosa { background: var(--serie-despesa); }
.secao-precos { margin-bottom: 26px; }
.secao-precos h2 { margin-bottom: 12px; display: flex; align-items: center; }
.planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.plano { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.plano::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradiente); }
.plano-topo { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.plano-topo h3 { font-size: 15.5px; }
.plano-preco { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plano-preco small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.plano-indicado { font-size: 13px; color: var(--texto-2); background: var(--superficie-2); border-radius: 8px; padding: 8px 10px; }
.plano-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.plano-itens li { display: flex; gap: 8px; align-items: flex-start; }
.plano-itens li .ic { color: var(--verde); margin-top: 2px; }
.plano-rodape { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }

.dica { background: var(--azul-suave); color: var(--texto-azul); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.dica code, .placeholders code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.placeholders { display: flex; flex-wrap: wrap; gap: 6px; }
.placeholders code { background: var(--cinza-suave); cursor: pointer; }
.placeholders code:hover { background: var(--acento-suave); }

.itens-proposta td { padding: 4px; }
.itens-proposta input, .itens-proposta select { width: 100%; }
.totais { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-top: 12px; }
.totais .linha-total { display: flex; gap: 20px; font-size: 14px; }
.totais .linha-total.grande { font-size: 18px; font-weight: 700; }

.arrasta-zona { border: 2px dashed var(--borda-forte); border-radius: var(--raio); padding: 22px; text-align: center; color: var(--muted); cursor: pointer; }
.arrasta-zona:hover, .arrasta-zona.sobre { border-color: var(--acento); background: var(--acento-suave); color: var(--texto); }

/* Onboarding (manual operacional) */
.tabela-rolagem { overflow-x: auto; }
.texto-vermelho { color: var(--vermelho); font-weight: 600; }
.onb-secao { margin-bottom: 16px; }
.card.onb-secao + .card.onb-secao { margin-top: 0; }
.onb-tabela td { vertical-align: top; }
.onb-tabela td.id { white-space: nowrap; padding-top: 12px; }
.onb-tabela td.acao { min-width: 300px; }
.onb-tabela td.acao .t { font-weight: 600; cursor: pointer; }
.onb-tabela td.acao .t:hover { color: var(--azul); text-decoration: underline; }
.onb-tabela td.acao .d { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.onb-tabela tr.finalizado td.acao .t { color: var(--muted); }
.onb-tabela input, .onb-tabela select { font-size: 12.5px; padding: 4px 6px; }
.onb-tabela.marcos input:not([type=date]) { min-width: 120px; }
.onb-tabela input.atrasado { border-color: var(--vermelho); color: var(--vermelho); }
.sel-status.azul { background: var(--azul-suave); color: var(--azul); }
.sel-status.amarelo { background: var(--amarelo-suave); color: var(--texto-amarelo); }
.sel-status.vermelho { background: var(--vermelho-suave); color: var(--vermelho); }
.sel-status.roxo { background: var(--roxo-suave); color: var(--roxo); }
.sel-status.verde { background: var(--verde-suave); color: var(--verde); }
.criterio { border-left: 3px solid var(--azul); background: var(--azul-suave); color: var(--texto-azul); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.criterio.aceite { border-left-color: var(--verde); background: var(--verde-suave); color: var(--texto-2); margin: 12px 0 0; }

/* Documentos: arquivos da Highway e pastas dos clientes */
.arquivos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.arquivo-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: var(--superficie); min-width: 0; }
.arquivo-bloco.ativo { border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde-suave); }
.arquivo-bloco .previa { position: relative; height: 120px; border-radius: 7px; background: var(--cinza-suave); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
  background-image: linear-gradient(45deg, var(--superficie-2) 25%, transparent 25%, transparent 75%, var(--superficie-2) 75%), linear-gradient(45deg, var(--superficie-2) 25%, transparent 25%, transparent 75%, var(--superficie-2) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.arquivo-bloco .previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.arquivo-bloco .previa .ext { font-weight: 700; font-size: 15px; color: var(--muted); letter-spacing: .04em; }
.arquivo-bloco .previa .selo { position: absolute; top: 6px; left: 6px; }
.arquivo-bloco .nome { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-bloco .botoes { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.arrasta-zona.pequena { display: block; padding: 16px; font-size: 13px; }
.docs-pastas { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.docs-pastas .card + .card { margin-top: 0; }
.docs-pastas .pastas { padding: 10px; display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow: auto; }
.docs-pastas .pastas .busca { margin-bottom: 6px; }
.pasta { display: flex; align-items: center; gap: 8px; border: none; background: none; font: inherit; font-size: 13.5px; color: var(--texto-2); padding: 7px 9px; border-radius: 7px; cursor: pointer; text-align: left; }
.pasta span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasta b { font-size: 12px; color: var(--muted); font-weight: 600; }
.pasta:hover { background: var(--superficie-2); }
.pasta.ativo { background: var(--acento-suave); color: var(--texto); font-weight: 600; }
.pasta[hidden] { display: none; }
@media (max-width: 800px) { .docs-pastas { grid-template-columns: 1fr; } .docs-pastas .pastas { max-height: 220px; } }

/* Metas na tela de mapear (semana, mês, ano, hoje) */
.metas-mapear { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px 14px; margin: -4px 0 14px; }
.meta-mapear { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.meta-mapear .pequeno { white-space: nowrap; }
select.peq { padding: 3px 8px; font-size: 12.5px; width: auto; }

/* Roteiro comercial (Prompts & Scripts) e mensagens em ordem cronológica */
.roteiro-topo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.metodo { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--borda-forte); background: var(--superficie); border-radius: var(--raio); padding: 12px 14px; font: inherit; color: var(--texto); cursor: pointer; }
.metodo small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.metodo:hover { border-color: var(--texto-2); }
.metodo.ativo { border-color: transparent; background: var(--acento-suave); box-shadow: 0 0 0 2px var(--acento); }
.roteiro { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.roteiro-indice { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px; max-height: calc(100vh - 100px); overflow: auto; }
.roteiro-indice a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: var(--texto-2); text-decoration: none; font-size: 13px; }
.roteiro-indice a:hover { background: var(--superficie-2); color: var(--texto); }
.roteiro-indice a small { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.roteiro-indice .num, .etapa-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gradiente); color: #fff; font-size: 11.5px; font-weight: 700; }
.indice-divisor { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 8px 4px; border-top: 1px solid var(--borda); margin-top: 4px; }
.roteiro-etapas { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.roteiro-etapas .card + .card { margin-top: 0; }
.roteiro-divisor { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px; border-top: 2px dashed var(--borda-forte); margin-top: 6px; }
.etapa-roteiro, .momento-msg { scroll-margin-top: 80px; }
.etapa-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.etapa-cab .etapa-num { width: 30px; height: 30px; font-size: 14px; }
.etapa-tit { flex: 1; min-width: 0; }
.etapa-tit h2 { font-size: 16px; margin-bottom: 3px; }
.etapa-cab .acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.etapa-objetivo { font-size: 13.5px; margin-bottom: 6px; }
.etapa-dicas { margin: 0 0 10px; padding-left: 20px; color: var(--texto-2); font-size: 13px; line-height: 1.55; }
.roteiro-item { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin-top: 10px; background: var(--superficie-2); }
.roteiro-item-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.roteiro-texto { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; color: var(--texto); }
.roteiro-item.msg .roteiro-texto { background: var(--verde-suave); border-radius: 8px 8px 8px 2px; padding: 9px 12px; }
.etapa-msgs { display: flex; flex-direction: column; }
.msg-grupo { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 0 -4px; }
.pilha > .msg-grupo + .card { margin-top: 0; }
@media (max-width: 900px) { .roteiro { grid-template-columns: 1fr; } .roteiro-indice { position: static; max-height: none; } }
.btn[hidden] { display: none !important; }

/* Histórico e anotações (ficha do cliente/lead) */
.card-historico { margin-top: 16px; }
.card-historico .card-topo h2 { display: flex; align-items: center; gap: 8px; }
.hist-novo { display: flex; gap: 10px; align-items: flex-start; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; margin-bottom: 12px; }
.hist-novo-campos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hist-novo textarea { width: 100%; resize: vertical; min-height: 54px; font: inherit; font-size: 14px; line-height: 1.5; }
.hist-novo-rodape { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hist-novo-rodape label { display: flex; align-items: center; gap: 6px; }
.hist-novo-rodape input.peq { padding: 3px 6px; font-size: 12.5px; width: auto; }
.hist-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.hist-filtros .busca { flex: 1; min-width: 180px; max-width: 300px; margin-left: auto; }
.hist-lista { max-height: 620px; overflow-y: auto; padding-right: 4px; }
.hist-dia { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 14px 0 6px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.hist-item { display: flex; gap: 10px; padding: 10px 6px; border-radius: 8px; }
.hist-item:hover { background: var(--superficie-2); }
.hist-item.fixado { background: var(--amarelo-suave); }
.hist-corpo { flex: 1; min-width: 0; }
.hist-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.hist-acoes { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.hist-item:hover .hist-acoes, .hist-item.fixado .hist-acoes { opacity: 1; }
.hist-acoes .btn-icone { width: 26px; height: 26px; }
.hist-texto { white-space: pre-wrap; font-size: 14px; line-height: 1.55; margin-top: 3px; word-break: break-word; }
.hist-item.auto { padding: 6px; align-items: center; }
.hist-item.auto .hist-texto { font-size: 13px; color: var(--texto-2); margin: 0; }
.hist-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cinza-suave); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; }
.hist-fixados { margin-bottom: 4px; }
@media (hover: none) { .hist-acoes { opacity: 1; } }

/* Andamento dos clientes */
.andamento { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.andamento .card + .card { margin-top: 0; }
.andamento-cartao { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.andamento-cartao.parado { border-left: 3px solid var(--amarelo); }
.andamento-topo { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.andamento-topo .link-titulo { font-size: 15px; color: var(--texto); text-decoration: none; }
.andamento-topo .link-titulo:hover { color: var(--azul); }
.andamento-nota { background: var(--superficie-2); border-radius: 8px; padding: 9px 11px; margin: 4px 0; flex: 1; }
.andamento-texto { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.andamento-anotar { display: flex; gap: 6px; align-items: flex-end; }
.andamento-anotar textarea { flex: 1; resize: none; font: inherit; font-size: 13.5px; min-height: 36px; padding: 7px 10px; }
a.tag { text-decoration: none; }

/* Ficha do cliente: dados + financeiro em cima, quadros do mesmo tamanho embaixo, histórico no fim */
.cliente-topo { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cliente-topo > .card + .card, .cliente-blocos > .card + .card { margin-top: 0; }
.cliente-topo .dados-lista { grid-template-columns: 110px minmax(0, 1fr); }
.cl-financeiro { min-width: 0; }
.cl-financeiro .tabela-cob-cliente td.pequeno { width: 100%; }
.cliente-blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.cliente-blocos > .card { min-width: 0; min-height: 150px; display: flex; flex-direction: column; }
.cliente-blocos > .card .vazio { flex: 1; display: flex; align-items: center; justify-content: center; }
@media (max-width: 1000px) { .cliente-topo { grid-template-columns: 1fr; } }

/* Ficha do cliente em mosaico: cada quadro com a altura do próprio conteúdo, encaixados em duas colunas */
.cliente-mosaico { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cliente-mosaico > .pilha { min-width: 0; }
.mosaico-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mosaico-par > .card + .card { margin-top: 0; }
.cliente-mosaico .card .vazio { padding: 10px; }
@media (max-width: 1000px) { .cliente-mosaico, .mosaico-par { grid-template-columns: 1fr; } }

/* Saúde do cliente e links rápidos */
.saude-alerta { background: var(--amarelo-suave); color: var(--texto-amarelo); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; margin-bottom: 10px; display: flex; gap: 6px; align-items: center; }
.saude-ok { background: var(--verde-suave); color: var(--verde); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; margin-bottom: 10px; }
.saude-grade { display: flex; flex-direction: column; }
.saude-linha { display: grid; grid-template-columns: 130px 1fr; column-gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.saude-linha:last-child { border-bottom: none; }
.saude-linha small { grid-column: 2; font-size: 11.5px; }
.links-rapidos { display: flex; flex-direction: column; gap: 6px; }
.link-rapido { display: flex; flex-direction: column; padding: 8px 11px; border: 1px solid var(--borda); border-radius: 8px; text-decoration: none; color: var(--texto); background: var(--superficie-2); }
.link-rapido:hover { border-color: var(--azul); }
.link-rapido span { font-weight: 600; font-size: 13px; }
.link-rapido small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.links-editar { display: flex; flex-direction: column; gap: 6px; }
.link-editar { display: grid; grid-template-columns: 220px 1fr 32px; gap: 6px; align-items: center; }
@media (max-width: 700px) { .link-editar { grid-template-columns: 1fr 32px; } }

/* Setores (Comercial / Engenharia / Gestão) no topo do menu */
.setores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: 4px; margin: 2px 0 8px; }
.setor { display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none; color: var(--sidebar-texto); font: inherit; font-size: 11px; font-weight: 600; padding: 7px 2px; border-radius: 7px; cursor: pointer; }
.setor:hover { background: var(--sidebar-2); color: #fff; }
.setor.ativo { background: var(--gradiente); color: #fff; box-shadow: 0 3px 12px rgba(106, 60, 255, .35); }
.setor-unico { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #fff; padding: 8px 10px; margin-bottom: 4px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.setores-acesso { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.setores-acesso .check { display: flex; gap: 5px; align-items: center; }

/* Follow-up: abas com contadores e uma lista por vez */
.fu-abas { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 10px; }
.fu-aba { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 112px; padding: 9px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto-2); font: inherit; font-size: 12.5px; cursor: pointer; box-shadow: var(--sombra); text-align: left; }
.fu-aba b { font-size: 20px; line-height: 1.1; color: var(--texto); font-variant-numeric: tabular-nums; }
.fu-aba b.azul { color: var(--azul); }
.fu-aba b.verde { color: var(--verde); }
.fu-aba b.roxo { color: var(--roxo); }
.fu-aba b.vermelho { color: var(--vermelho); }
.fu-aba:hover { border-color: var(--borda-forte); }
.fu-aba.ativo { border-color: transparent; box-shadow: 0 0 0 2px var(--acento); background: var(--acento-suave); color: var(--texto); font-weight: 600; }
.fu-aba.quente { border-color: var(--verde); }
.fu-lista { padding: 12px 14px; }
.fu-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fu-desc { flex: 1; min-width: 220px; }
.fu-topo .busca { width: 230px; }
.fu-tabela td { padding: 7px 8px; vertical-align: middle; }
.fu-tabela .fu-empresa { min-width: 220px; }
.fu-tabela .fu-empresa .link { color: var(--texto); }
.fu-tabela .fu-acoes { white-space: nowrap; text-align: right; }
.fu-tabela .fu-acoes > * { margin-left: 4px; vertical-align: middle; }
.fu-tabela tbody tr:hover td { background: var(--superficie-2); }
.fu-mais { text-align: center; margin-top: 10px; }
.faixa-abordar > div:first-child { flex: 1; min-width: 300px; }
.faixa-abordar > .btn { flex: none; }

/* Janela da ligação */
.ligacao { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 16px; }
.ligacao-lead h3 { font-size: 18px; margin: 0; }
.ligacao-fone { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; margin-top: 10px; color: var(--texto); text-decoration: none; font-variant-numeric: tabular-nums; }
.ligacao-fone:hover { color: var(--azul); }
.ligacao-hist { margin-top: 10px; padding: 8px 10px; background: var(--superficie-2); border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.ligacao-lead textarea { width: 100%; }
.ligacao-roteiro { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; min-width: 0; }
.ligacao-script { max-height: 340px; overflow-y: auto; margin-top: 8px; }
.ligacao-resultado { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); }
.ligacao-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ligacao-det { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px; background: var(--superficie-2); border-radius: 8px; }
.ligacao-det label { display: flex; align-items: center; gap: 8px; }
@media (max-width: 800px) { .ligacao { grid-template-columns: 1fr; } }
.metodos-prosp { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.metodos-prosp .chip { display: inline-flex; align-items: center; gap: 5px; }

/* Abas da ficha do cliente (links) */
.abas a { padding: 10px 14px; font-weight: 550; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.abas a:hover { color: var(--texto); }
.abas a.ativo { color: var(--texto); border-image: var(--gradiente) 1; border-bottom-width: 2px; border-bottom-style: solid; }
.abas-cliente { margin-top: 4px; }

/* Aba Histórico do cliente (versão completa) */
.hist-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 4px; }
.hist-pagina .card + .card { margin-top: 0; }
.hist-lateral { position: sticky; top: 76px; }
.hist-lista.grande { max-height: none; overflow: visible; }
.hist-detalhes { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.hist-detalhes label { display: flex; flex-direction: column; gap: 3px; }
.hist-detalhes input { font-size: 13px; }
.hist-proximo { margin-top: 6px; font-size: 12.5px; color: var(--texto-azul); background: var(--azul-suave); border-radius: 6px; padding: 4px 8px; display: inline-flex; gap: 6px; align-items: center; }
.hist-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hist-numeros > div { display: flex; flex-direction: column; gap: 2px; background: var(--superficie-2); border-radius: 8px; padding: 8px 10px; }
.hist-numeros b { font-size: 14px; }
.hist-numeros span { font-size: 11px; color: var(--muted); }
@media (max-width: 1100px) { .hist-pagina { grid-template-columns: 1fr; } .hist-lateral { position: static; } .hist-detalhes { grid-template-columns: 1fr; } }
.hist-lateral .rk-barra div { background: var(--gradiente); }

/* Grade compacta (lista de clientes): cabe na tela sem rolagem para o lado */
.grade.compacta th { padding: 9px 6px; font-size: 11.5px; }
.grade.compacta td { padding: 0 2px; }
.grade.compacta td.txt { padding: 0 6px; }
.grade.compacta .cel { min-width: 0; padding: 6px 4px; font-size: 13px; text-overflow: ellipsis; }
.grade.compacta input[type=date].cel { padding-right: 0; }
/* telas menores: esconde as colunas menos usadas (contato, fechado em, último contato); continuam na ficha do cliente */
@media (max-width: 1560px) {
  .grade.compacta tr > :nth-child(2), .grade.compacta tr > :nth-child(8), .grade.compacta tr > :nth-child(12) { display: none; }
}

/* Metas do mês quebradas em hoje e semana */
.meta-ritmo { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borda); }
.meta-ritmo-linha { display: grid; grid-template-columns: 82px auto 1fr; align-items: center; gap: 8px; font-size: 12px; }
.meta-ritmo-linha span { color: var(--muted); }
.meta-ritmo-linha b { font-variant-numeric: tabular-nums; }
.meta-ritmo-linha b.ok { color: var(--verde); }
.meta-mini { height: 5px; background: var(--cinza-suave); border-radius: 4px; overflow: hidden; }
.meta-mini > div { height: 100%; background: var(--gradiente); border-radius: 4px; }

/* Tarefas: lista + agenda do mês */
.tarefas-pagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1.1fr); gap: 16px; align-items: start; }
.tarefas-pagina .pilha > .card + .card, .tarefas-pagina .tarefas-grupo + .tarefas-grupo { margin-top: 0; }
#lista { display: flex; flex-direction: column; gap: 12px; }
.tarefa-rapida { display: flex; gap: 8px; flex-wrap: wrap; }
.tarefa-rapida [name=titulo] { flex: 1; min-width: 200px; }
.tarefa-rapida [name=hora] { width: 100px; }
.tarefas-grupo { padding: 12px 14px; }
.tarefas-grupo .card-topo { margin-bottom: 4px; }
.agenda { position: sticky; top: 76px; padding: 14px; }
.agenda-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.agenda-topo h2 { flex: 1; text-align: center; font-size: 16px; }
.agenda-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--borda); border-left: 1px solid var(--borda); }
.agenda-cab { font-size: 11px; text-transform: uppercase; color: var(--muted); text-align: center; padding: 6px 0; border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: var(--superficie-2); }
.agenda-dia { min-height: 92px; padding: 4px; border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-dia:hover { background: var(--superficie-2); }
.agenda-dia.fora { background: var(--superficie-2); opacity: .6; }
.agenda-dia.sel { box-shadow: inset 0 0 0 2px var(--acento); }
.agenda-dia.sobre { background: var(--acento-suave); }
.agenda-num { font-size: 12px; font-weight: 600; color: var(--texto-2); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.agenda-dia.hoje .agenda-num { background: var(--gradiente); color: #fff; }
.agenda-tarefa { font-size: 11px; line-height: 1.3; padding: 2px 5px; border-radius: 4px; background: var(--azul-suave); color: var(--texto-azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; }
.agenda-tarefa.alta { background: var(--roxo-suave); color: var(--roxo); }
.agenda-tarefa.atrasada { background: var(--vermelho-suave); color: var(--vermelho); }
.agenda-mais { font-size: 11px; color: var(--muted); padding-left: 4px; }
@media (max-width: 1150px) { .tarefas-pagina { grid-template-columns: 1fr; } .agenda { position: static; } }

/* Tarefas realizadas na agenda e caixinha maior para marcar */
.agenda-tarefa { display: flex; align-items: center; gap: 3px; }
.agenda-check { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; cursor: pointer; opacity: .8; }
.agenda-check:hover { opacity: 1; background: var(--verde-suave); color: var(--verde); }
.agenda-tarefa.feita { background: var(--verde-suave); color: var(--verde); text-decoration: line-through; opacity: .75; }
.agenda-tarefa.feita .agenda-check { background: var(--verde); border-color: var(--verde); color: #fff; }
.check-tarefa { width: 18px; height: 18px; cursor: pointer; accent-color: var(--verde); flex: none; }

/* Avisos da equipe: online, notificações e chat */
.avisos-topo { display: flex; align-items: center; gap: 6px; position: relative; }
.online-agora { display: flex; gap: 4px; margin-right: 4px; }
.online-avatar { position: relative; display: inline-flex; }
.online-avatar i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); border: 2px solid var(--superficie); }
.topo-btn { position: relative; width: 36px; height: 36px; }
.topo-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--vermelho); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-pessoa .topo-badge { position: static; margin-left: auto; }
.notif-wrap { position: relative; }
.caixa-notif { position: absolute; right: 0; top: 44px; width: 360px; max-height: 480px; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); z-index: 60; }
.caixa-notif-topo { display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.caixa-notif-lista { overflow-y: auto; }
.notif { display: flex; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--borda); text-decoration: none; color: var(--texto-2); font-size: 13px; }
.notif:hover { background: var(--superficie-2); }
.notif.nova { color: var(--texto); background: var(--acento-suave); }
.chat-painel { position: fixed; right: 16px; bottom: 16px; width: 380px; height: min(560px, calc(100vh - 90px)); display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 16px 50px rgba(0, 0, 0, .3); z-index: 70; }
.chat-painel[hidden] { display: none; }
.chat-topo { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.chat-pessoas { display: flex; gap: 6px; padding: 8px; overflow-x: auto; border-bottom: 1px solid var(--borda); }
.chat-pessoa { display: flex; align-items: center; gap: 6px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2); border-radius: 20px; padding: 3px 10px 3px 3px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.chat-pessoa.ativo { border-color: var(--acento); background: var(--acento-suave); color: var(--texto); font-weight: 600; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.chat-dia { align-self: center; font-size: 11px; color: var(--muted); margin: 6px 0; }
.chat-bolha { max-width: 80%; align-self: flex-start; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 12px 12px 12px 3px; padding: 7px 10px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.chat-bolha.minha { align-self: flex-end; background: var(--acento-suave); border-color: transparent; border-radius: 12px 12px 3px 12px; }
.chat-bolha small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; text-align: right; }
.chat-enviar { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--borda); }
.chat-enviar textarea { flex: 1; resize: none; font: inherit; font-size: 13.5px; }
@media (max-width: 600px) { .chat-painel { left: 8px; right: 8px; width: auto; } .caixa-notif { width: 300px; } }
.caixa-notif[hidden] { display: none; }