/* Referenciar Comercial — mesmo padrão visual do painel Referenciar Gestão: Montserrat, azul #1b2a41 com faixa dourada #c69242,
   cartões brancos com sombra leve, abas com sublinhado dourado, selos arredondados, tabelas com cabeçalho azul-claro. */
:root{--azul-900:#1b2a41;--azul-700:#2b4057;--azul-500:#445e73;--azul-100:#e7edf3;--azul-50:#f3f6f9;--dourado:#c69242;--dourado-claro:#f6ead7;
--dourado-tx:#8a5f1d;--cinza:#7e8b92;--texto:#1b2a41;--texto-2:#5b6b78;--borda:#dde3e9;--fundo:#f4f6f8;--branco:#fff;--chip:#e8eef6;
--ok:#2f7d4f;--ok-fundo:#e3f2e8;--alerta:#a86b12;--alerta-fundo:#fbf0dc;--erro:#b3362f;--erro-fundo:#fae6e4;--raio:10px;
--sombra:0 1px 2px rgba(27,42,65,.06),0 2px 8px rgba(27,42,65,.05);--barra:#445e73;--barra-2:#c69242;--topo-tx:#fff;--topo-sub:#cfd9e3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--azul-900:#0f1a2b;--azul-700:#1e3147;--azul-500:#5f7a93;--azul-100:#1d2d3f;--azul-50:#16243a;
--dourado:#d9a85a;--dourado-claro:#3a2d14;--dourado-tx:#e8c585;--cinza:#8d9ba6;--texto:#e6edf5;--texto-2:#a7b6c4;--borda:#2a3b4f;--fundo:#0b1320;--branco:#131f30;--chip:#1f3148;
--ok:#6fd49a;--ok-fundo:#12362a;--alerta:#f2c765;--alerta-fundo:#3a2d0c;--erro:#ff9b9b;--erro-fundo:#3d1717;--sombra:0 1px 2px rgba(0,0,0,.4);--barra:#7d9bb8;--barra-2:#d9a85a;color-scheme:dark}}
:root[data-theme="dark"]{--azul-900:#0f1a2b;--azul-700:#1e3147;--azul-500:#5f7a93;--azul-100:#1d2d3f;--azul-50:#16243a;
--dourado:#d9a85a;--dourado-claro:#3a2d14;--dourado-tx:#e8c585;--cinza:#8d9ba6;--texto:#e6edf5;--texto-2:#a7b6c4;--borda:#2a3b4f;--fundo:#0b1320;--branco:#131f30;--chip:#1f3148;
--ok:#6fd49a;--ok-fundo:#12362a;--alerta:#f2c765;--alerta-fundo:#3a2d0c;--erro:#ff9b9b;--erro-fundo:#3d1717;--sombra:0 1px 2px rgba(0,0,0,.4);--barra:#7d9bb8;--barra-2:#d9a85a;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fundo);color:var(--texto);font:14px/1.5 Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif}
:focus-visible{outline:2px solid var(--dourado);outline-offset:2px}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--azul-500)}a:hover{text-decoration:underline}
h1{font-size:20px;margin:0 0 4px;font-weight:700;text-wrap:balance}
h2{font-size:16px;margin:0 0 12px;font-weight:600}
h3{font-size:14px;margin:0 0 8px;font-weight:600}
p{margin:0 0 10px}
.carregando{padding:40px 16px;text-align:center;color:var(--texto-2)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:20;background:var(--azul-900);color:var(--topo-tx);border-bottom:3px solid var(--dourado)}
.topo>div{max-width:1320px;margin:0 auto;min-height:58px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:6px;
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.marca{display:flex;align-items:center;gap:10px;color:var(--topo-tx);font-weight:700;letter-spacing:.3px;text-decoration:none;white-space:nowrap}
.marca img{width:34px;height:34px;background:#fff;border-radius:8px;padding:2px}
.marca small{display:block;font-weight:500;font-size:11px;color:var(--dourado);letter-spacing:1px}
.menu{display:flex;gap:2px;flex:1;overflow-x:auto;min-width:0}
.menu a{color:var(--topo-sub);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600;font-size:13px;white-space:nowrap}
.menu a:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.menu a.ativo{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 -2px 0 var(--dourado)}
.usuario{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--topo-sub);margin-left:auto}
.usuario button{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:12px}
@media (max-width:760px){.menu{order:3;width:100%;flex-wrap:wrap;overflow:visible}.usuario span{display:none}}
/* ---------- conteúdo ---------- */
.conteudo{max-width:1320px;margin:0 auto;padding-block:22px 60px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.cabecalho-pagina{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sub{color:var(--texto-2);margin:0 0 16px;max-width:70ch}
.grade{display:grid;gap:14px;margin-bottom:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:980px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}
.kpi{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:14px 16px;box-shadow:var(--sombra);min-width:0;text-align:left;cursor:default}
.kpi.clicavel{cursor:pointer}.kpi.clicavel:hover{border-color:var(--azul-500)}
.rotulo{font-size:12px;color:var(--texto-2);font-weight:500}
.valor{font-size:22px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.valor.atencao{color:var(--alerta)}.valor.perigo{color:var(--erro)}.valor.positivo{color:var(--ok)}
.kpi .meta{font-size:12px;color:var(--texto-2);margin-top:2px}
.cartao{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);padding:16px;min-width:0;margin-bottom:14px}
.cartao.ouro{border-left:4px solid var(--dourado)}
.cartao h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.abas{display:flex;gap:4px;border-bottom:1px solid var(--borda);margin-bottom:14px;overflow-x:auto}
.abas button{border:0;background:none;font-weight:600;color:var(--texto-2);padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.abas button.ativo{color:var(--texto);border-bottom-color:var(--dourado)}
.selo{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;background:var(--azul-100);color:var(--azul-500)}
.selo.ouro{background:var(--dourado-claro);color:var(--dourado-tx)}.selo.ok{background:var(--ok-fundo);color:var(--ok)}
.selo.aviso{background:var(--alerta-fundo);color:var(--alerta)}.selo.erro{background:var(--erro-fundo);color:var(--erro)}
.selo.cinza{background:var(--chip);color:var(--texto-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--chip);color:var(--texto);border-radius:12px;padding:2px 9px;font-size:12.5px}
.botao{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--borda);background:var(--branco);color:var(--texto);padding:8px 14px;border-radius:8px;font-weight:600;cursor:pointer;text-decoration:none;font-size:13px}
.botao:hover{border-color:var(--azul-500);text-decoration:none}
.botao.primario{background:var(--azul-900);border-color:var(--azul-900);color:#fff}
.botao.ouro{background:var(--dourado);border-color:var(--dourado);color:#fff}
.botao.pequeno{padding:5px 10px;font-size:12px}
.botao:disabled{opacity:.6;cursor:wait}
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filtros input,.filtros select{width:auto;min-width:150px}
input,select,textarea{border:1px solid var(--borda);border-radius:8px;padding:8px 10px;background:var(--branco);width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul-100);border-color:var(--azul-500)}
textarea{min-height:64px;resize:vertical}
label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--texto-2);font-weight:500;min-width:0}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
.form .largo{grid-column:1/-1}
.linha-botoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.aviso{background:var(--alerta-fundo);color:var(--alerta);border-radius:8px;padding:8px 12px;font-size:13px;margin:0 0 10px}
.erro{color:var(--erro);font-size:13px;margin:6px 0 0}.ok-msg{color:var(--ok);font-size:13px;margin:6px 0 0}
.tabela-rolagem{overflow:auto;max-height:70vh;border:1px solid var(--borda);border-radius:var(--raio);background:var(--branco)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--texto-2);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--borda);background:var(--azul-50);position:sticky;top:0;white-space:nowrap}
th.num{text-align:right}
td{padding:9px 10px;border-bottom:1px solid var(--borda);vertical-align:top}
tr.clicavel{cursor:pointer}tr.clicavel:hover td{background:var(--azul-50)}
tr.p1 td:first-child{box-shadow:inset 3px 0 0 var(--dourado)}
.prioridade{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;background:var(--cinza)}
.prioridade.p1{background:var(--dourado)}.prioridade.p2{background:var(--azul-500)}
/* ---------- barras (gráficos simples, uma cor) ---------- */
.barras{display:grid;gap:6px}
.barra-linha{display:grid;grid-template-columns:minmax(90px,170px) 1fr auto;gap:8px;align-items:center;font-size:12.5px}
.barra-linha .b{height:12px;background:var(--azul-100);border-radius:4px;overflow:hidden}
.barra-linha .b i{display:block;height:100%;background:var(--barra);border-radius:4px 2px 2px 4px}
.barra-linha .b i.ouro{background:var(--barra-2)}
.barra-linha .n{font-variant-numeric:tabular-nums;color:var(--texto-2);min-width:3ch;text-align:right}
.funil{display:grid;gap:4px}
.funil .etapa{display:grid;grid-template-columns:150px 1fr 40px;gap:8px;align-items:center;font-size:12.5px;cursor:pointer;border-radius:6px;padding:2px 4px}
.funil .etapa:hover{background:var(--azul-50)}
.funil .b{height:18px;background:var(--azul-100);border-radius:4px;overflow:hidden}.funil .b i{display:block;height:100%;background:var(--barra)}
.funil .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
/* ---------- kanban ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:260px;gap:12px;overflow-x:auto;padding-bottom:12px}
.coluna{background:var(--azul-50);border-radius:var(--raio);padding:10px;min-width:0}
.coluna h3{display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--texto-2)}
.ficha{background:var(--branco);border-radius:8px;padding:10px;margin-bottom:8px;box-shadow:var(--sombra);cursor:pointer;border-left:3px solid var(--azul-500)}
.ficha.p1{border-left-color:var(--dourado)}.ficha.atrasada{border-left-color:var(--erro)}
.ficha .t{font-weight:600;font-size:13px;overflow-wrap:anywhere}.ficha .m{font-size:12px;color:var(--texto-2);margin-top:3px}
/* ---------- lista de oportunidades ---------- */
.op{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:14px 16px;margin:0 0 10px;box-shadow:var(--sombra);min-width:0}
.op .cab{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.op h3{margin:4px 0 2px;font-size:15px;overflow-wrap:anywhere}
.op .meta{color:var(--texto-2);font-size:12.5px;margin:0 0 6px}
.op .meta .atraso{color:var(--erro);font-weight:600}
.op .bloco{font-size:13px;margin:4px 0}.op .bloco b{font-weight:600}
.op .al{color:var(--erro);font-size:12.5px}
.tel{font-size:16px;font-weight:700;color:var(--texto);text-decoration:none}
.detalhe{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}
@media (max-width:860px){.detalhe{grid-template-columns:1fr}}
.hist{list-style:none;margin:0;padding:0;font-size:12.5px}
.hist li{padding:6px 0;border-bottom:1px dashed var(--borda);display:grid;grid-template-columns:110px 1fr;gap:8px}
.hist li span{color:var(--texto-2);white-space:nowrap}
.agenda-dia{margin-bottom:14px}
.agenda-dia h3{color:var(--texto-2);font-size:12px;text-transform:uppercase;letter-spacing:.4px;margin:0 0 6px}
.ag{display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;background:var(--branco);border:1px solid var(--borda);border-radius:8px;padding:8px 12px;margin-bottom:6px}
.ag.hoje{border-left:3px solid var(--dourado)}
.ag .hora{font-weight:700;font-variant-numeric:tabular-nums}.ag .quem{font-size:12.5px;color:var(--texto-2)}
.passos{counter-reset:p;display:grid;gap:8px}
.passo{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:start;background:var(--branco);border:1px solid var(--borda);border-radius:8px;padding:10px 12px}
.passo::before{counter-increment:p;content:counter(p);width:28px;height:28px;border-radius:50%;background:var(--azul-900);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.passo b{display:block}.passo p{margin:2px 0 0;font-size:13px;color:var(--texto-2)}
ul.lista{margin:0;padding-left:18px}ul.lista li{margin-bottom:5px}
.msg{background:var(--azul-50);border-left:3px solid var(--dourado);padding:10px 12px;border-radius:0 8px 8px 0;font-size:13px;margin-bottom:8px;white-space:pre-wrap}
.msg b{display:block;font-size:12px;color:var(--texto-2);margin-bottom:4px}
.modal-fundo{position:fixed;inset:0;background:rgba(27,42,65,.55);z-index:30;display:grid;place-items:start center;overflow:auto;padding:24px 12px}
.modal{background:var(--branco);border-radius:12px;max-width:860px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:18px}
.modal-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.fechar{background:none;border:0;font-size:22px;cursor:pointer;color:var(--texto-2)}
/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,var(--azul-900),var(--azul-500));padding:16px}
.login .cartao{width:min(400px,100%);padding:28px}
.login img{width:84px;display:block;margin:0 auto 8px}
.login h1{text-align:center}.login .sub{text-align:center}
.login label{margin-top:10px}
.login .botao{width:100%;justify-content:center;margin-top:14px}
.rodape{text-align:center;color:var(--texto-2);font-size:12px;padding:20px 0 0}
@media (prefers-reduced-motion:no-preference){.ficha,.kpi,.op{transition:border-color .15s}}