/* CRM Via Digital — identidade baseada na logo do leão: preto, grafite e prata escovada */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root{
  --preto:#08090A; --grafite:#121316; --superficie:#1A1C20; --elevado:#212429;
  --prata:#C8CCD2; --prata-claro:#F4F5F7; --prata-escura:#8A9099;
  --aco:linear-gradient(180deg, #F4F5F7 0%, #C8CCD2 45%, #8A9099 100%);
  --t1:#F4F5F7; --t2:#B4B9C1; --t3:#7C818A;
  --linha:rgba(244,245,247,.12); --linha-forte:rgba(244,245,247,.28);
  --card:rgba(244,245,247,.035);
  --quente:#D8724A; --morna:#B79449; --fria:#6F8595; --venda:#4E8F70; --alerta:#D8724A;
}
[hidden] { display:none !important; }
html, body { background:var(--preto); }
body {
  font-family:'Inter', system-ui, sans-serif; color:var(--t1); font-size:14px; line-height:1.45; min-height:100vh;
  background:
    radial-gradient(90% 55% at 50% -10%, rgba(244,245,247,.10) 0%, rgba(244,245,247,0) 60%),
    linear-gradient(180deg, var(--grafite) 0%, var(--preto) 55%) fixed;
}
button, input, select, textarea { font:inherit; color:inherit; }

/* MARCA */
.marca-crm { display:flex; align-items:center; gap:10px; font-family:'Montserrat', 'Inter', sans-serif;
             font-weight:300; font-size:17px; letter-spacing:5px; text-transform:uppercase; white-space:nowrap;
             background:var(--aco); -webkit-background-clip:text; background-clip:text; color:transparent; }
.marca-crm img { width:26px; height:26px; border-radius:6px; object-fit:cover; filter:contrast(1.05); }
.marca-crm .nome { background:var(--aco); -webkit-background-clip:text; background-clip:text; color:transparent; }
.marca-crm span:not(.nome) { font-family:'Inter', sans-serif; font-size:9.5px; font-weight:600; letter-spacing:2.5px; color:var(--prata-escura);
                  border:1px solid var(--linha-forte); border-radius:99px; padding:2px 7px; -webkit-text-fill-color:var(--prata-escura); }

/* CONTROLES */
.btn { border:1px solid var(--linha-forte); background:rgba(244,245,247,.05); color:var(--t1); border-radius:8px;
       padding:10px 16px; cursor:pointer; font-weight:500; letter-spacing:.3px; transition:border-color .15s, background .15s; }
.btn:hover { border-color:var(--prata); background:rgba(244,245,247,.1); }
.btn.primario { background:var(--aco); border-color:transparent; color:#0B0C0E; font-weight:700; letter-spacing:.6px; }
.btn.primario:hover { filter:brightness(1.06); }
.btn.pequeno { padding:6px 11px; font-size:12.5px; }
.btn.verde { background:var(--venda); border-color:var(--venda); color:#F4F5F7; font-weight:600; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
input, select, textarea { width:100%; background:rgba(0,0,0,.45); border:1px solid var(--linha); border-radius:8px; padding:10px 12px; color:var(--t1); }
select option { background:var(--superficie); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--prata); }
label { display:grid; gap:6px; font-size:11.5px; color:var(--t3); font-weight:600; letter-spacing:.6px; text-transform:uppercase; }
.pill { font-size:10.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; border-radius:99px;
        padding:3px 9px; background:rgba(244,245,247,.07); border:1px solid var(--linha); color:var(--t2); }
.aviso { color:#E08A6E; font-size:13px; }
.nota { color:var(--t3); font-size:12.5px; }

/* AUTH */
.tela-auth { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.auth-card { width:100%; max-width:380px; display:grid; gap:14px; justify-items:stretch;
             background:linear-gradient(180deg, var(--superficie), var(--grafite)); border:1px solid var(--linha);
             border-radius:14px; padding:30px 26px; box-shadow:0 30px 60px -30px #000; }
.auth-card .marca-crm { justify-content:center; font-size:19px; }
.auth-card h1 { font-family:'Montserrat', sans-serif; font-weight:300; font-size:24px; letter-spacing:3px;
                text-transform:uppercase; text-align:center; color:var(--t1); }
.auth-card .marca-crm img { width:64px; height:64px; border-radius:10px; }
.auth-card .marca-crm { flex-direction:column; gap:14px; }

/* TOPO */
.topo { position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
        padding:12px 20px; background:rgba(8,9,10,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--linha); }
.topo nav { display:flex; gap:2px; }
.aba { background:none; border:0; padding:8px 14px; border-radius:7px; cursor:pointer; color:var(--t3); font-weight:600;
       letter-spacing:.4px; transition:color .15s, background .15s; }
.aba:hover { color:var(--t2); }
.aba.ativa { background:rgba(244,245,247,.09); color:var(--t1); box-shadow:inset 0 -2px 0 var(--prata); }
.quem { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--t2); }

.conteudo { padding:18px 20px 40px; }

/* RESUMO / FILTROS */
.resumo { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:14px; }
.kpi { background:var(--card); border:1px solid var(--linha); border-radius:10px; padding:12px 14px; }
.kpi b { display:block; font-family:'Montserrat', sans-serif; font-weight:500; font-size:23px; letter-spacing:.5px; font-variant-numeric:tabular-nums; }
.kpi span { font-size:11.5px; color:var(--t3); letter-spacing:.4px; }
.filtros { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filtros input { flex:1 1 220px; width:auto; }
.filtros select { flex:0 1 190px; width:auto; }

/* KANBAN */
.kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 1fr); gap:12px; overflow-x:auto; padding-bottom:10px; }
.coluna { background:rgba(0,0,0,.35); border:1px solid var(--linha); border-radius:12px; display:flex; flex-direction:column; min-height:60vh; }
.coluna.sobre { border-color:var(--prata); background:rgba(244,245,247,.05); }
.coluna header { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--linha);
                 font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--t2); }
.coluna header small { color:var(--t3); font-weight:600; letter-spacing:0; }
.coluna .cards { padding:10px; display:grid; gap:8px; align-content:start; flex:1; }
.lead { background:linear-gradient(180deg, var(--elevado), var(--superficie)); border:1px solid var(--linha);
        border-left:3px solid var(--fria); border-radius:9px; padding:10px 12px; cursor:pointer; transition:border-color .15s, transform .12s; }
.lead:hover { border-color:var(--linha-forte); transform:translateY(-1px); }
.lead.quente { border-left-color:var(--quente); }
.lead.morna { border-left-color:var(--morna); }
.lead .l1 { display:flex; justify-content:space-between; gap:8px; font-weight:600; }
.lead .l2 { color:var(--t3); font-size:12px; margin-top:3px; }
.lead .l3 { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.tag { font-size:11px; border-radius:5px; padding:2px 6px; background:rgba(244,245,247,.06); border:1px solid var(--linha); color:var(--t2); }
.tag.atraso { background:rgba(216,114,74,.18); border-color:rgba(216,114,74,.5); color:#EFA88C; }
.vazio { color:var(--t3); font-size:12.5px; text-align:center; padding:14px 6px; }

/* FICHA */
.ficha-fundo { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:40; }
.ficha { position:fixed; top:0; right:0; bottom:0; width:min(560px, 100%); z-index:41; overflow-y:auto;
         background:linear-gradient(180deg, var(--superficie), var(--grafite)); border-left:1px solid var(--linha-forte);
         padding:calc(18px + env(safe-area-inset-top, 0px)) 20px calc(30px + env(safe-area-inset-bottom, 0px)); }
.ficha .cab { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.ficha h2 { font-family:'Montserrat', sans-serif; font-weight:400; font-size:21px; letter-spacing:1px; line-height:1.2; }
.ficha h3 { font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--prata-escura); margin:22px 0 8px;
            padding-bottom:6px; border-bottom:1px solid var(--linha); }
.ficha .sub { color:var(--t3); font-size:13px; margin-top:4px; }
.acoes-topo { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.grade2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.resp { background:var(--card); border:1px solid var(--linha); border-radius:8px; padding:10px 12px; }
.resp dt { font-size:10.5px; color:var(--t3); font-weight:600; letter-spacing:.8px; text-transform:uppercase; }
.resp dd { margin-top:3px; white-space:pre-wrap; word-break:break-word; color:var(--t1); }
.respostas { display:grid; gap:8px; }
.sugestao { border:1px solid var(--linha-forte); background:linear-gradient(180deg, rgba(244,245,247,.07), rgba(244,245,247,.02));
            border-radius:10px; padding:12px 14px; }
.sugestao + .sugestao { margin-top:8px; }
.sugestao .topo-s { display:flex; justify-content:space-between; gap:8px; font-weight:600; }
.sugestao small { color:var(--t2); display:block; margin-top:4px; }
.sugestao.fora { border-color:var(--linha); background:var(--card); opacity:.75; }
.form-inline { display:grid; gap:8px; }
.linha-acao { display:flex; gap:8px; flex-wrap:wrap; }
.linha-acao > * { flex:1 1 140px; }
.timeline { display:grid; gap:8px; }
.ativ { border-left:2px solid var(--linha-forte); padding:2px 0 2px 12px; }
.ativ .meta { font-size:11.5px; color:var(--t3); }
.ativ .txt { white-space:pre-wrap; word-break:break-word; }
.ativ.venda { border-left-color:var(--venda); }
.ativ.perda { border-left-color:var(--quente); }

/* USUARIOS */
.grade-usuarios { display:grid; grid-template-columns:minmax(280px, 380px) 1fr; gap:16px; align-items:start; }
.card { background:var(--card); border:1px solid var(--linha); border-radius:12px; padding:18px; display:grid; gap:12px; overflow-x:auto; }
.card h2 { font-family:'Montserrat', sans-serif; font-weight:400; font-size:17px; letter-spacing:1.5px; text-transform:uppercase; color:var(--t1); }
.tabela { width:100%; border-collapse:collapse; font-size:13.5px; }
.tabela th { text-align:left; color:var(--t3); font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; padding:6px 8px; border-bottom:1px solid var(--linha); }
.tabela td { padding:9px 8px; border-bottom:1px solid var(--linha); vertical-align:middle; }
.tabela td small { display:block; color:var(--t3); }
.tabela select { padding:6px 8px; }
.link-box { background:rgba(78,143,112,.12); border:1px solid rgba(78,143,112,.45); border-radius:8px; padding:10px 12px; font-size:13px; display:grid; gap:8px; }
.copiar { display:flex; gap:6px; }

.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:60;
         background:var(--prata-claro); color:var(--preto); font-weight:600; border-radius:8px; padding:10px 16px;
         box-shadow:0 14px 40px rgba(0,0,0,.6); max-width:calc(100% - 32px); }
.toast.erro { background:var(--quente); color:#0B0C0E; }

/* ETAPA 2 */
.badge { display:inline-block; min-width:18px; padding:0 5px; border-radius:99px; background:var(--prata); color:var(--preto);
         font-size:11px; font-weight:700; line-height:18px; text-align:center; margin-left:4px; }
.alerta-quentes { border:1px solid rgba(216,114,74,.6); background:rgba(216,114,74,.16); color:#F0B49B; border-radius:99px;
                  padding:6px 12px; font-weight:600; font-size:12.5px; cursor:pointer; }
.alerta-quentes:hover { background:rgba(216,114,74,.28); }
.cab-aba { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.cab-aba select { width:auto; min-width:200px; }
.titulo-aba { font-family:'Montserrat', sans-serif; font-weight:300; font-size:22px; letter-spacing:3px; text-transform:uppercase; }
.mt { margin-top:14px; }
.lista-hoje { display:grid; gap:8px; }
.item-hoje { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
             background:linear-gradient(180deg, var(--elevado), var(--superficie)); border:1px solid var(--linha);
             border-left:3px solid var(--fria); border-radius:10px; padding:12px 14px; cursor:pointer; }
.item-hoje:hover { border-color:var(--linha-forte); }
.item-hoje.quente { border-left-color:var(--quente); }
.item-hoje.morna { border-left-color:var(--morna); }
.item-hoje .quando { font-variant-numeric:tabular-nums; font-weight:600; min-width:88px; color:var(--t2); }
.item-hoje .quando.atraso { color:#EFA88C; }
.item-hoje small { display:block; color:var(--t3); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.tabela tfoot td { font-weight:700; border-top:1px solid var(--linha-forte); }
.barra-lista { display:grid; gap:8px; }
.barra-item { display:grid; grid-template-columns:1fr auto; gap:4px 10px; font-size:13px; }
.barra-item .trilho { grid-column:1 / -1; height:5px; border-radius:5px; background:rgba(244,245,247,.08); overflow:hidden; }
.barra-item .trilho span { display:block; height:100%; background:var(--aco); border-radius:5px; }
.grade-ofertas { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.dores { display:flex; flex-wrap:wrap; gap:6px; }
.dores label { display:flex; flex-direction:row; align-items:center; gap:6px; font-size:12px; color:var(--t2); font-weight:500;
               letter-spacing:0; text-transform:none; background:rgba(244,245,247,.05); border:1px solid var(--linha);
               border-radius:6px; padding:5px 8px; cursor:pointer; }
.dores input, .switch input { width:auto; accent-color:var(--prata); }
.switch { display:flex; flex-direction:row; align-items:center; gap:10px; color:var(--t1); font-size:14px; font-weight:500;
          letter-spacing:0; text-transform:none; cursor:pointer; }
.distribuicao { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; margin-bottom:16px; }

@media (max-width: 760px) {
  .grade-usuarios, .grade2, .distribuicao, .item-hoje { grid-template-columns:1fr; }
  .topo { gap:10px; padding:10px 16px; }
  .quem { margin-left:0; width:100%; justify-content:space-between; }
  .conteudo { padding:14px 16px 32px; }
  .cab-aba select { width:100%; }
  .marca-crm { font-size:15px; letter-spacing:4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }