/* cota.ai - CRM do consultor. Carlos, 07/09/2026.
   Identidade: azul cota.ai, Poppins nos titulos, Inter no corpo. */
:root{
  --brand:#1C9DF0; --brand2:#38B6FF; --brand-d:#0A6FD0; --prime:#7C5CFF;
  --bg:#070d14; --bg2:#0b1420; --panel:#0f1c2b; --panel2:#132539;
  --line:#1c3049; --line2:#24405e;
  --txt:#e7eef6; --muted:#8ba3bb; --muted2:#5f7488;
  --ok:#22c98a; --warn:#f5b544; --bad:#ff6b6b;
  --font:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --tit:"Poppins",var(--font);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased}
a{color:var(--brand2)}
button{font-family:inherit}
.hidden{display:none !important}

/* ---------- logo ---------- */
.logo{display:flex;align-items:center;line-height:1}
.logo img{height:62px;width:auto;display:block;max-width:100%}
.logo.big img{height:120px}

/* ---------- login ---------- */
#tela-login{min-height:100%;display:grid;place-items:center;padding:26px 16px;
  background:radial-gradient(1100px 620px at 50% -10%,rgba(28,157,240,.20),transparent 62%),var(--bg)}
.login-box{width:100%;max-width:940px}
.login-top{text-align:center;margin-bottom:26px}
.login-top .logo{justify-content:center;margin-bottom:14px}
.login-top h1{font-family:var(--tit);font-size:27px;margin:0 0 8px;font-weight:700;letter-spacing:-.3px}
.login-top p{margin:0;color:var(--muted);font-size:15px}
.perfis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
@media(max-width:780px){.perfis{grid-template-columns:1fr}}
.perfil{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;
  transition:.16s;position:relative;text-align:left}
.perfil:hover{border-color:var(--brand);transform:translateY(-2px)}
.perfil.sel{border-color:var(--brand);box-shadow:0 0 0 3px rgba(28,157,240,.18)}
.perfil .selo{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:rgba(56,182,255,.15);color:var(--brand2);margin-bottom:11px}
.perfil.p3 .selo{background:rgba(124,92,255,.17);color:#b9a6ff}
.perfil h3{font-family:var(--tit);margin:0 0 4px;font-size:19px}
.perfil .quanto{font-size:13px;color:var(--muted);margin-bottom:11px}
.perfil ul{margin:0;padding:0;list-style:none;font-size:13px;color:#b9cade}
.perfil li{padding:3px 0 3px 18px;position:relative}
.perfil li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.perfil li.trava{color:#6d8199}
.perfil li.trava:before{content:"🔒";font-size:10px;top:4px}
.login-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.login-form .campo{flex:1;min-width:190px}
.login-form label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:6px;font-weight:700}
.login-form input{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--txt);
  border-radius:10px;padding:12px 13px;font-size:15px;outline:none}
.login-form input:focus{border-color:var(--brand)}
.btn{background:linear-gradient(135deg,var(--brand2),var(--brand-d));color:#04263b;border:0;font-weight:800;
  padding:13px 22px;border-radius:10px;cursor:pointer;font-size:15px}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--txt);font-weight:600}
.erro-login{color:var(--bad);font-size:13.5px;margin-top:10px;min-height:18px}
.login-rod{text-align:center;font-size:12.5px;margin-top:16px;color:#61798f}

/* ---------- shell ---------- */
#tela-app{display:flex;min-height:100vh}
.sidebar{width:250px;flex:none;background:var(--bg2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-topo{padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.sb-plano{margin-top:11px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px}
.sb-plano .l{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700}
.sb-plano .n{font-family:var(--tit);font-weight:700;font-size:16px;margin-top:2px}
.sb-sec{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:#5f7488;
  font-weight:800;padding:15px 18px 6px}
nav{padding:0 10px 14px}
.item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;
  color:#c3d4e5;font-size:14.5px;transition:.12s;user-select:none}
.item:hover{background:var(--panel)}
.item.ativo{background:linear-gradient(90deg,rgba(28,157,240,.22),rgba(28,157,240,.06));color:#fff;font-weight:600;
  box-shadow:inset 2px 0 0 var(--brand)}
.item .ico{width:20px;text-align:center;font-size:15px;opacity:.9;flex:none}
.item .cad{margin-left:auto;font-size:11px;opacity:.75}
.item.trava{color:#6f849a}
.item .badge{margin-left:auto;background:var(--brand);color:#052033;font-size:11px;font-weight:800;
  border-radius:999px;padding:1px 7px}
.sb-rod{margin-top:auto;padding:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:62px;flex:none;display:flex;align-items:center;gap:14px;padding:0 20px;
  background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.burger{display:none;background:none;border:0;color:var(--txt);font-size:21px;cursor:pointer}
.topbar h1{font-family:var(--tit);font-size:18px;margin:0;font-weight:600}
.topbar .sub{font-size:12.5px;color:var(--muted);margin-top:1px}
.spacer{flex:1}
.trocador{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:4px}
.trocador button{background:none;border:0;color:var(--muted);font-size:12.5px;font-weight:700;
  padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.trocador button.on{background:var(--brand);color:#052033}
.trocador button.on.p3{background:var(--prime);color:#fff}
.eu{display:flex;align-items:center;gap:9px}
.eu .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand2),var(--brand-d));
  display:grid;place-items:center;font-weight:800;color:#04263b;font-size:14px;flex:none}
.eu .nm{font-size:13.5px;font-weight:600;line-height:1.2}
.eu .rl{font-size:11.5px;color:var(--muted)}
.sair{background:none;border:1px solid var(--line2);color:var(--muted);border-radius:9px;
  padding:7px 11px;cursor:pointer;font-size:12.5px}
.conteudo{padding:22px;flex:1}
.aviso-demo{background:rgba(245,181,68,.10);border:1px solid rgba(245,181,68,.32);color:#f0c274;
  border-radius:10px;padding:9px 13px;font-size:12.8px;margin-bottom:16px}

/* ---------- cards / grades ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kpi .l{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
.kpi .v{font-family:var(--tit);font-size:29px;font-weight:700;margin:6px 0 2px;letter-spacing:-.6px}
.kpi .d{font-size:12.5px;color:var(--muted)}
.kpi .d b.up{color:var(--ok)} .kpi .d b.down{color:var(--bad)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px;overflow:hidden}
.card>h2{font-family:var(--tit);font-size:16px;margin:0;padding:15px 18px;border-bottom:1px solid var(--line);
  font-weight:600;display:flex;align-items:center;gap:10px}
.card>h2 .dir{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:400}
.card .corpo{padding:16px 18px}
.duas{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
@media(max-width:1020px){.duas{grid-template-columns:1fr}}

/* ---------- tabela de cotacoes ---------- */
.filtros{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.filtros input,.filtros select{background:var(--panel);border:1px solid var(--line2);color:var(--txt);
  border-radius:10px;padding:10px 12px;font-size:14px;outline:none}
.filtros input{min-width:230px;flex:1}
.filtros input:focus,.filtros select:focus{border-color:var(--brand)}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
  font-weight:800;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg2)}
.tabela td{padding:12px 14px;border-bottom:1px solid rgba(28,48,73,.6);vertical-align:middle}
.tabela tr{cursor:pointer}
.tabela tbody tr:hover{background:var(--panel2)}
.cli{display:flex;align-items:center;gap:10px;min-width:0}
.cli .av{width:34px;height:34px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);
  display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--brand2);flex:none}
.cli .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli .nm.semnome{color:var(--muted);font-weight:500;font-style:italic}
.cli .tel{font-size:12px;color:var(--muted)}
.quando{white-space:nowrap}
.quando .dt{font-weight:600}
.quando .hr{font-size:12px;color:var(--muted)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;letter-spacing:.4px}
.et{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.et:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.et.novo{background:rgba(139,163,187,.14);color:#a9bed3}
.et.cotado{background:rgba(56,182,255,.14);color:#6cc8ff}
.et.proposta{background:rgba(124,92,255,.15);color:#b3a0ff}
.et.negociacao{background:rgba(245,181,68,.14);color:#f2c069}
.et.fechado{background:rgba(34,201,138,.15);color:#4fd8a5}
.et.perdido{background:rgba(255,107,107,.13);color:#ff8f8f}
.canal{font-size:12px;color:var(--muted);white-space:nowrap}
.vazio{padding:40px;text-align:center;color:var(--muted)}

/* ---------- funil ---------- */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(170px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
@media(max-width:1200px){.kanban{grid-template-columns:repeat(6,220px)}}
.col{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px;min-height:220px}
.col h3{font-size:12px;text-transform:uppercase;letter-spacing:.7px;margin:0 0 10px;color:var(--muted);
  display:flex;justify-content:space-between;font-weight:800}
.col h3 span{color:var(--brand2)}
.mini{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:10px;margin-bottom:8px;cursor:pointer;transition:.12s}
.mini:hover{border-color:var(--brand)}
.mini .n{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .v{font-size:12px;color:var(--muted);margin-top:2px}
.mini .p{font-size:12.5px;color:var(--brand2);font-weight:700;margin-top:5px}

/* ---------- detalhe da cotacao (gaveta lateral) ---------- */
.fundo{position:fixed;inset:0;background:rgba(3,8,14,.72);z-index:60;opacity:0;pointer-events:none;transition:.18s}
.fundo.on{opacity:1;pointer-events:auto}
.gaveta{position:fixed;top:0;right:0;height:100%;width:min(720px,100%);background:var(--bg2);
  border-left:1px solid var(--line);z-index:61;transform:translateX(102%);transition:.24s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(0,0,0,.5)}
.gaveta.on{transform:none}
.g-topo{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px;flex:none}
.g-topo h2{font-family:var(--tit);font-size:19px;margin:0 0 3px;font-weight:600}
.g-topo .sub{font-size:12.8px;color:var(--muted)}
.g-x{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--muted);border-radius:9px;
  width:34px;height:34px;cursor:pointer;font-size:16px;flex:none}
.g-corpo{overflow-y:auto;padding:18px 20px 40px;flex:1}
.g-abas{display:flex;gap:6px;padding:0 20px;border-bottom:1px solid var(--line);flex:none;background:var(--bg2)}
.g-abas button{background:none;border:0;color:var(--muted);font-size:13.5px;font-weight:600;padding:12px 12px;
  cursor:pointer;border-bottom:2px solid transparent}
.g-abas button.on{color:#fff;border-bottom-color:var(--brand)}
.blocos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
@media(max-width:560px){.blocos{grid-template-columns:1fr}}
.bloco{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.bloco .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:800}
.bloco .v{font-size:15px;font-weight:600;margin-top:3px;word-break:break-word}
.tit-sec{font-family:var(--tit);font-size:14px;font-weight:600;margin:22px 0 10px;
  display:flex;align-items:center;gap:9px;color:#cfe0f0}
.tit-sec:after{content:"";flex:1;height:1px;background:var(--line)}
.cot-planos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.cot-plano{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px;text-align:center}
.cot-plano.esc{border-color:var(--ok);box-shadow:0 0 0 2px rgba(34,201,138,.18)}
.cot-plano .n{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);font-weight:800}
.cot-plano .p{font-family:var(--tit);font-size:19px;font-weight:700;margin-top:5px}
.cot-plano .m{font-size:11px;color:var(--muted)}

/* passos do funil dentro da cotacao */
.passos{display:flex;gap:0;margin:6px 0 4px;flex-wrap:wrap}
.passo{flex:1;min-width:88px;text-align:center;position:relative;padding-top:22px;font-size:11.5px;color:#6f849a}
.passo:before{content:"";position:absolute;top:6px;left:50%;width:11px;height:11px;border-radius:50%;
  background:var(--panel2);border:2px solid var(--line2);transform:translateX(-50%);z-index:2}
.passo:after{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line2);z-index:1}
.passo:first-child:after{display:none}
.passo.feito{color:#9fc6e6}
.passo.feito:before{background:var(--brand);border-color:var(--brand)}
.passo.feito:after{background:var(--brand)}
.passo.agora{color:#fff;font-weight:700}
.passo.agora:before{background:var(--brand2);border-color:#fff;box-shadow:0 0 0 4px rgba(56,182,255,.22)}
.passo.perdida.agora:before{background:var(--bad);border-color:#ffd0d0;box-shadow:0 0 0 4px rgba(255,107,107,.2)}

/* linha do tempo */
.tl{position:relative;padding-left:20px}
.tl:before{content:"";position:absolute;left:4px;top:5px;bottom:5px;width:2px;background:var(--line2)}
.tl-i{position:relative;padding:0 0 14px}
.tl-i:before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px var(--bg2)}
.tl-i .q{font-size:11.5px;color:var(--muted)}
.tl-i .t{font-size:13.8px;margin-top:1px}

/* ---------- conversa (mesmo visual do WhatsApp, dentro do CRM) ---------- */
.conv{background:#0a141c;border:1px solid var(--line);border-radius:12px;padding:14px;
  background-image:radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px);background-size:16px 16px}
.bal{max-width:82%;margin-bottom:9px;padding:8px 11px;border-radius:12px;font-size:14px;line-height:1.45;
  position:relative;white-space:pre-wrap;word-wrap:break-word}
.bal.cliente{background:#1b2b38;border-top-left-radius:4px}
.bal.bot{background:#0a3f66;margin-left:auto;border-top-right-radius:4px}
.bal.consultor{background:#134b3a;margin-left:auto;border-top-right-radius:4px}
.bal .quem{font-size:11px;font-weight:800;letter-spacing:.4px;margin-bottom:3px;opacity:.85}
.bal.bot .quem{color:#8fd0ff} .bal.consultor .quem{color:#7fe3b8} .bal.cliente .quem{color:#a8bccd}
.bal .hora{font-size:10.5px;color:rgba(255,255,255,.42);text-align:right;margin-top:4px}
.bal.sistema{max-width:100%;margin:0 auto 10px;background:rgba(28,157,240,.09);border:1px dashed rgba(56,182,255,.3);
  color:#96c6e8;font-size:12.3px;text-align:center;border-radius:9px}
.bal.sistema .quem{display:none}

/* player de audio de verdade */
.aud{display:flex;align-items:center;gap:10px;min-width:220px}
.aud button{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;
  font-size:13px;cursor:pointer;flex:none;display:grid;place-items:center}
.aud button:hover{background:rgba(255,255,255,.26)}
.aud .barra{flex:1;min-width:60px}
.aud .trilha{height:4px;border-radius:3px;background:rgba(255,255,255,.2);cursor:pointer;overflow:hidden}
.aud .cheio{height:100%;width:0;background:var(--brand2)}
.aud .t{font-size:11px;color:rgba(255,255,255,.55);margin-top:4px}
.transc{margin-top:8px;padding:9px 11px;background:rgba(0,0,0,.28);border-left:3px solid var(--brand);
  border-radius:0 8px 8px 0;font-size:13px;color:#cfe0ef;line-height:1.5}
.transc b{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--brand2);margin-bottom:3px}
.anexo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  background:rgba(0,0,0,.25);border-radius:9px;padding:9px 11px}
.anexo .ic{width:40px;height:46px;border-radius:6px;background:#c73b3b;color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:800;flex:none}
.anexo .ic.img{background:var(--brand-d)}
.anexo .nm{font-size:13.5px;font-weight:600;word-break:break-all}
.anexo .sb{font-size:11.5px;color:rgba(255,255,255,.5)}
.foto-msg img{max-width:230px;width:100%;border-radius:9px;display:block;cursor:zoom-in}

/* ---------- cadeado / upgrade ---------- */
.trancada{max-width:640px;margin:26px auto;text-align:center;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:34px 26px}
.trancada .selo{width:66px;height:66px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  font-size:28px;background:rgba(56,182,255,.13);border:1px solid rgba(56,182,255,.32)}
.trancada.prime .selo{background:rgba(124,92,255,.15);border-color:rgba(124,92,255,.4)}
.trancada .mod{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--brand2);font-weight:800}
.trancada h2{font-family:var(--tit);font-size:22px;margin:8px 0 10px;font-weight:700}
.trancada p{color:#b6c9db;font-size:14.5px;line-height:1.6;margin:0 auto 8px;max-width:470px}
.trancada .preco{margin:18px 0 6px;font-size:13.5px;color:var(--muted)}
.trancada .preco b{color:#fff;font-size:19px;font-family:var(--tit)}
.trancada .acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.trancada .rod{margin-top:18px;font-size:12.3px;color:#6f8599}
.previa{margin-top:26px;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.previa .borrado{filter:blur(3.5px) saturate(.6);opacity:.5;pointer-events:none;user-select:none}
.previa .fita{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;color:#cfe0f0;
  background:linear-gradient(180deg,rgba(7,13,20,.1),rgba(7,13,20,.86))}
.item-trava{opacity:.5;pointer-events:none}

/* ---------- conexao ---------- */
.conex{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px}
.pill.on{background:rgba(34,201,138,.14);color:#4fd8a5}
.pill.off{background:rgba(255,107,107,.14);color:#ff8f8f}
.pill .d{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pisca 1.6s infinite}
@keyframes pisca{50%{opacity:.25}}
.qr{width:170px;height:170px;background:#fff;border-radius:12px;padding:10px}

/* ---------- responsivo ---------- */
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;z-index:70;transform:translateX(-102%);transition:.2s}
  .sidebar.aberta{transform:none}
  .burger{display:block}
  .conteudo{padding:16px}
  .topbar{padding:0 14px;gap:10px}
  .topbar .sub{display:none}
  .trocador{order:3}
  .eu .txt{display:none}
  .tabela .esconde{display:none}
}