/* ═══════════════════════════════════════════════════════════
   Vitalium CRM · estilo
   Direção: interface de trabalho clara (marfim frio + tinta
   navy), lateral em navy com fio dourado, hairlines em vez de
   sombras, raios curtos, números tabulares, transições 120ms.
   Nada decorativo: cada traço tem um porquê.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* tinta e papel */
  --papel:#F4F6FA;
  --branco:#FFFFFF;
  --tinta:#0A1830;
  --tinta-2:#16294B;
  --sub:#5B6B84;
  --mudo:#8794A9;
  --fio:#E4E9F1;
  --fio-forte:#CFD8E4;

  /* marca */
  --navy:#0A1830;
  --navy-2:#0F2140;
  --navy-fio:#223B63;
  --marfim:#F2F5FA;
  --nevoa:#9FB3CE;
  --acao:#8FB4E3;          /* foco, ligações sobre navy */
  --acao-tinta:#2F62A8;    /* ligações sobre papel */
  --ouro:#DCA355;
  --ouro-tinta:#9A6D2B;    /* dourado legível sobre papel */

  /* estados */
  --ok:#1F6B4A;      --ok-fundo:#E9F4EE;   --ok-fio:#BFDCCB;
  --pend:#8A6116;    --pend-fundo:#FBF3E1; --pend-fio:#EAD9B0;
  --erro:#A33C3C;    --erro-fundo:#FBEDED; --erro-fio:#EBC6C6;
  --info-fundo:#EDF2FA; --info-fio:#CCDAEE;

  --raio:8px;
  --raio-p:6px;
  --sombra:0 1px 2px rgba(10,24,48,.05);
  --rapido:120ms ease;

  --display:"Inter Tight",Inter,system-ui,sans-serif;
  --corpo:Inter,system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#DCE9F8}
a{color:var(--acao-tinta);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--acao);outline-offset:2px;border-radius:4px}
.num,td.num,.kpi-v{font-variant-numeric:tabular-nums}

/* ── rótulos mono ── */
.rotulo{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sub);
}

/* ═══ ESTRUTURA DA APLICAÇÃO ═══ */
.aplicacao{display:flex;min-height:100vh}
.lateral{
  width:236px;flex-shrink:0;
  background:var(--navy);color:var(--nevoa);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.lateral-marca{padding:22px 20px 18px;border-bottom:1px solid var(--navy-fio)}
.marca-palavra{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--marfim)}
.marca-palavra .ouro{color:var(--ouro)}
.marca-img{display:block;max-width:150px;max-height:34px;width:auto;height:auto}
.lateral-sub{
  display:block;margin-top:6px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#5F7397;
}
.lateral-nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:var(--raio-p);
  color:#93A5C4;font-weight:500;font-size:13.5px;
  border-left:2px solid transparent;
  transition:color var(--rapido),background var(--rapido);
  text-decoration:none;
}
.nav-item .ic{flex-shrink:0;opacity:.85}
.nav-item:hover{color:var(--marfim);background:rgba(255,255,255,.04);text-decoration:none}
.nav-item.ativo{color:var(--marfim);background:rgba(255,255,255,.05);border-left-color:var(--ouro)}
.lateral-fundo{margin-top:auto;padding:14px 12px 16px;border-top:1px solid var(--navy-fio)}
.pessoa{display:flex;align-items:center;gap:10px;padding:6px 10px 12px}
.pessoa-avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--navy-2);border:1px solid var(--navy-fio);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:12px;color:var(--acao);
}
.pessoa-info{display:flex;flex-direction:column;min-width:0}
.pessoa-nome{color:var(--marfim);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pessoa-papel{font-size:11px;color:#5F7397}
.saida{font-size:13px}

.area{flex:1;display:flex;flex-direction:column;min-width:0}
.conteudo{flex:1;padding:36px 44px 48px;max-width:1180px;width:100%}
.rodape{
  padding:18px 44px 26px;color:var(--mudo);font-size:12px;
  border-top:1px solid var(--fio);
}

/* ── cabeçalho de página ── */
.pag-cab{display:flex;align-items:flex-start;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.pag-cab h1{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.015em;line-height:1.15}
.pag-cab .sub{color:var(--sub);font-size:13.5px;margin-top:4px;max-width:620px}
.pag-cab .acoes{margin-left:auto;display:flex;gap:10px;align-items:center}
.migalha{font-size:12.5px;color:var(--sub);margin-bottom:8px}
.migalha a{color:var(--sub)}
.migalha b{color:var(--tinta);font-weight:600}

/* ── botões ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--raio-p);padding:8px 14px;
  font-weight:600;font-size:13.5px;line-height:1.2;
  border:1px solid transparent;white-space:nowrap;
  transition:background var(--rapido),border-color var(--rapido),color var(--rapido);
  text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn .ic{margin-left:-2px}
.btn-primario{background:var(--tinta);color:var(--marfim)}
.btn-primario:hover{background:var(--tinta-2)}
.btn-neutro{background:var(--branco);border-color:var(--fio-forte);color:var(--tinta)}
.btn-neutro:hover{border-color:var(--sub)}
.btn-fino{padding:5px 10px;font-size:12.5px}
.btn-perigo{background:var(--branco);border-color:var(--erro-fio);color:var(--erro)}
.btn-perigo:hover{background:var(--erro-fundo)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.copiado{border-color:var(--ok-fio);color:var(--ok)}

/* ── cartões e grelhas ── */
.cartao{
  background:var(--branco);border:1px solid var(--fio);
  border-radius:var(--raio);box-shadow:var(--sombra);
}
.cartao-corpo{padding:20px 22px}
.cartao-cab{
  padding:14px 22px;border-bottom:1px solid var(--fio);
  display:flex;align-items:center;gap:10px;
}
.cartao-cab h2{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.005em}
.cartao-cab .direita{margin-left:auto;display:flex;gap:8px;align-items:center}
.grelha-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.empilha{display:flex;flex-direction:column;gap:18px}

/* ── KPIs ── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.kpi{padding:16px 18px 15px}
.kpi-v{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.01em;line-height:1.1}
.kpi-v small{font-size:15px;font-weight:700;color:var(--sub)}
.kpi-r{margin-top:6px}
.kpi-extra{font-size:12px;color:var(--mudo);margin-top:3px}
.kpi .dourado{color:var(--ouro-tinta)}

/* ── tabelas ── */
.tab-envolve{overflow-x:auto}
table.tab{width:100%;border-collapse:collapse;font-size:13.5px}
.tab th{
  text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sub);
  padding:10px 14px;border-bottom:1px solid var(--fio);white-space:nowrap;
}
.tab td{padding:11px 14px;border-bottom:1px solid var(--fio);vertical-align:middle}
.tab tr:last-child td{border-bottom:0}
.tab tr.liga{cursor:pointer;transition:background var(--rapido)}
.tab tr.liga:hover{background:#F8FAFD}
.tab td.num{text-align:right}
.tab .celula-forte{font-weight:600}
.tab .celula-sub{color:var(--sub);font-size:12.5px}

/* ── chips de estado ── */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;padding:3px 9px;
  font-size:11.5px;font-weight:600;line-height:1.4;
  border:1px solid var(--fio-forte);background:var(--branco);color:var(--sub);
  white-space:nowrap;
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.chip.ok{background:var(--ok-fundo);border-color:var(--ok-fio);color:var(--ok)}
.chip.pend{background:var(--pend-fundo);border-color:var(--pend-fio);color:var(--pend)}
.chip.erro{background:var(--erro-fundo);border-color:var(--erro-fio);color:var(--erro)}
.chip.mql{background:#FBF4E7;border-color:#EBD5AC;color:var(--ouro-tinta)}
.chip.sem-ponto::before{display:none}

/* ── avisos em faixa ── */
.aviso-faixa{
  padding:11px 16px;border-radius:var(--raio);
  border:1px solid var(--info-fio);background:var(--info-fundo);
  font-size:13.5px;margin-bottom:18px;
}
.aviso-faixa.ok{background:var(--ok-fundo);border-color:var(--ok-fio)}
.aviso-faixa.erro{background:var(--erro-fundo);border-color:var(--erro-fio)}
.aviso-faixa.alerta{background:var(--pend-fundo);border-color:var(--pend-fio)}
.aviso-faixa b{font-weight:600}
.aviso-faixa .mono-liga{font-family:var(--mono);font-size:12px;word-break:break-all}

/* ── formulários ── */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:12.5px;font-weight:600;color:var(--tinta);margin-bottom:6px}
.campo .dica{font-size:12px;color:var(--mudo);margin-top:5px;line-height:1.45}
.campo input[type=text],.campo input[type=email],.campo input[type=password],
.campo input[type=number],.campo select,.campo textarea{
  width:100%;height:36px;
  background:var(--branco);border:1px solid var(--fio-forte);
  border-radius:var(--raio-p);padding:0 11px;font-size:13.5px;color:var(--tinta);
  transition:border-color var(--rapido),box-shadow var(--rapido);
}
.campo textarea{height:auto;padding:9px 11px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--acao);box-shadow:0 0 0 3px rgba(143,180,227,.25);outline:none;
}
.campo input::placeholder{color:var(--mudo)}
.campo-linha{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opcoes-radio{display:flex;flex-direction:column;gap:10px}
.opcao{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--fio-forte);border-radius:var(--raio);
  padding:13px 14px;cursor:pointer;background:var(--branco);
  transition:border-color var(--rapido),background var(--rapido);
}
.opcao:hover{border-color:var(--sub)}
.opcao input{margin-top:3px;accent-color:var(--tinta)}
.opcao .op-titulo{font-weight:600;font-size:13.5px}
.opcao .op-desc{font-size:12.5px;color:var(--sub);margin-top:2px;line-height:1.45}
.opcao.escolhida{border-color:var(--tinta);background:#FBFCFE}

/* ── caixa de código / valores copiáveis ── */
.codigo{
  display:flex;align-items:center;gap:10px;
  background:#F8FAFD;border:1px solid var(--fio);
  border-radius:var(--raio-p);padding:9px 12px;
}
.codigo code{
  font-family:var(--mono);font-size:12px;letter-spacing:.01em;
  color:var(--tinta);word-break:break-all;flex:1;
}
.codigo .btn{flex-shrink:0}

/* ── par chave/valor ── */
.par{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--fio);font-size:13.5px}
.par:last-child{border-bottom:0}
.par .k{color:var(--sub)}
.par .v{text-align:right;font-weight:500}
.par .v.mono{font-family:var(--mono);font-size:12px;font-weight:500}

/* ── estado vazio ── */
.vazio{padding:42px 24px;text-align:center}
.vazio .vazio-ic{color:var(--fio-forte);margin-bottom:12px}
.vazio h3{font-family:var(--display);font-weight:700;font-size:15.5px;margin-bottom:5px}
.vazio p{color:var(--sub);font-size:13.5px;max-width:400px;margin:0 auto 16px;line-height:1.55}

/* ── passos do assistente ── */
.passos{display:flex;gap:0;margin-bottom:26px;border:1px solid var(--fio);border-radius:var(--raio);background:var(--branco);overflow:hidden}
.passo{
  flex:1;display:flex;align-items:center;gap:9px;
  padding:11px 14px;border-right:1px solid var(--fio);
  color:var(--mudo);font-size:12.5px;font-weight:600;
}
.passo:last-child{border-right:0}
.passo-n{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--fio-forte);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;
}
.passo.atual{color:var(--tinta)}
.passo.atual .passo-n{background:var(--tinta);border-color:var(--tinta);color:var(--marfim)}
.passo.feito{color:var(--ok)}
.passo.feito .passo-n{border-color:var(--ok-fio);background:var(--ok-fundo)}
.assistente-seccao{display:none}
.assistente-seccao.aberta{display:block}
.assistente-pes{display:flex;gap:10px;margin-top:22px}
.assistente-pes .direita{margin-left:auto;display:flex;gap:10px}

/* ── checklist ── */
.check-lista{display:flex;flex-direction:column}
.check-item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--fio)}
.check-item:last-child{border-bottom:0}
.check-ponto{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:1px;
  border:1px solid var(--fio-forte);display:flex;align-items:center;justify-content:center;color:var(--branco);
}
.check-item.feito .check-ponto{background:var(--ok);border-color:var(--ok)}
.check-item .check-t{font-weight:600;font-size:13.5px}
.check-item .check-d{font-size:12.5px;color:var(--sub);margin-top:1px;line-height:1.5}

/* ── resultado de teste CAPI ── */
.teste-resultado{margin-top:10px;font-size:13px;display:none}
.teste-resultado.ok{color:var(--ok)}
.teste-resultado.erro{color:var(--erro)}
.teste-resultado.aberto{display:block}

/* ═══ PÁGINAS DE AUTENTICAÇÃO (navy) ═══ */
.auth{
  background:var(--navy);color:var(--marfim);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
}
.auth-caixa{width:100%;max-width:396px}
.auth-marca{text-align:center;margin-bottom:26px}
.auth-marca .marca-palavra{font-size:30px}
.auth-marca .marca-img{max-width:190px;max-height:48px;margin:0 auto}
.auth-marca-sub{
  margin-top:9px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:#5F7397;
}
.auth-cartao{
  background:var(--navy-2);border:1px solid var(--navy-fio);
  border-radius:10px;padding:26px 26px 24px;
}
.auth-cartao h1{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em;margin-bottom:4px}
.auth-cartao .sub{color:var(--nevoa);font-size:13px;margin-bottom:18px;line-height:1.5}
.auth-cartao .campo label{color:var(--nevoa)}
.auth-cartao .campo input{
  background:var(--navy);border-color:var(--navy-fio);color:var(--marfim);
}
.auth-cartao .campo input:focus{border-color:var(--acao);box-shadow:0 0 0 3px rgba(143,180,227,.18)}
.auth-cartao .btn-primario{width:100%;background:var(--acao);color:#0A1626;height:38px}
.auth-cartao .btn-primario:hover{background:#C4D9F2}
.auth-erro{
  border:1px solid rgba(224,138,138,.45);background:rgba(224,138,138,.08);
  color:#EFC0C0;border-radius:var(--raio-p);padding:10px 13px;
  font-size:13px;margin-bottom:16px;
}
.auth-nota{text-align:center;color:#5F7397;font-size:12px;margin-top:18px;line-height:1.55}
.auth-largo .auth-caixa{max-width:560px}

/* ── responsivo ── */
@media (max-width:960px){
  .aplicacao{flex-direction:column}
  .lateral{width:100%;height:auto;position:static;flex-direction:row;align-items:center;flex-wrap:wrap;gap:0}
  .lateral-marca{border-bottom:0;padding:14px 16px}
  .lateral-nav{flex-direction:row;padding:8px 10px;overflow-x:auto}
  .nav-item{border-left:0;border-bottom:2px solid transparent}
  .nav-item.ativo{border-bottom-color:var(--ouro)}
  .lateral-fundo{margin:0 0 0 auto;border-top:0;display:flex;align-items:center;gap:8px;padding:8px 12px}
  .pessoa{padding:0}
  .conteudo{padding:24px 18px 40px}
  .rodape{padding:16px 18px 24px}
  .kpis,.grelha-2,.campo-linha{grid-template-columns:1fr}
  .passos{flex-wrap:wrap}
  .passo{min-width:46%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}