:root{
  --fundo:#f5f2fb; --lateral:#ebe5f6; --topo:#8f7cc4; --topo2:#a594d6;
  --cartao:#ffffff; --borda:#e2dbf0; --texto:#3b3550; --suave:#7a7290;
  --lilas:#e4dbf5; --azul:#dceefb; --verde:#d8f3e3; --vermelho:#fde0e0;
  --amarelo:#fff1c9; --laranja:#ffe4cc; --cinza:#efedf3; --rosa:#fbe1ef;
  --verde-t:#2f7a4f; --vermelho-t:#a63d3d; --amarelo-t:#8a6a12; --azul-t:#2b6390; --lilas-t:#5d4a9a;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:13px;color:var(--texto);background:var(--fundo)}
a{color:var(--lilas-t);text-decoration:none}
a:hover{text-decoration:underline}
.topo{height:48px;background:linear-gradient(90deg,var(--topo),var(--topo2));color:#fff;display:flex;align-items:center;padding:0 18px;gap:14px;position:sticky;top:0;z-index:20}
.topo .marca{font-weight:700;font-size:15px;letter-spacing:.3px}
.topo .marca small{font-weight:400;opacity:.85;margin-left:6px}
.topo .dir{margin-left:auto;font-size:12px;opacity:.9}
.topo form{display:flex;gap:6px}
.topo input{border:0;border-radius:6px;padding:6px 10px;width:260px;font-size:12px}
.layout{display:flex;min-height:calc(100vh - 48px)}
.lateral{width:230px;background:var(--lateral);border-right:1px solid var(--borda);padding:14px 10px;flex-shrink:0}
.lateral .grupo{font-size:11px;text-transform:uppercase;color:var(--suave);margin:14px 8px 6px;letter-spacing:.5px}
.lateral a{display:block;padding:8px 10px;border-radius:8px;color:var(--texto);margin-bottom:2px}
.lateral a:hover{background:#fff;text-decoration:none}
.lateral a.ativo{background:#fff;font-weight:600;color:var(--lilas-t);box-shadow:0 1px 2px rgba(80,60,140,.12)}
.lateral a .ic{display:inline-block;width:20px}
.conteudo{flex:1;padding:18px 22px;min-width:0}
h1{font-size:18px;margin:0 0 4px}
.sub{color:var(--suave);margin-bottom:16px}
.cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.cartao h2{font-size:14px;margin:0 0 10px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.num{font-size:26px;font-weight:700}
.chip{display:inline-block;padding:3px 9px;border-radius:12px;font-size:11.5px;margin:2px 3px 2px 0;background:var(--cinza);white-space:nowrap;border:1px solid transparent;cursor:default}
.chip.f{cursor:pointer}
.chip.f.sel{border-color:var(--lilas-t);box-shadow:0 0 0 1px var(--lilas-t)}
.c-ok{background:var(--verde);color:var(--verde-t)}
.c-ruim{background:var(--vermelho);color:var(--vermelho-t)}
.c-aviso{background:var(--amarelo);color:var(--amarelo-t)}
.c-info{background:var(--azul);color:var(--azul-t)}
.c-lilas{background:var(--lilas);color:var(--lilas-t)}
.c-laranja{background:var(--laranja);color:#8a4b12}
.btn{display:inline-block;border:1px solid var(--borda);background:#fff;color:var(--texto);padding:7px 13px;border-radius:7px;cursor:pointer;font-size:12.5px}
.btn:hover{background:var(--lilas);text-decoration:none}
.btn.prim{background:var(--topo);color:#fff;border-color:var(--topo)}
.btn.prim:hover{background:#7d69b6}
.btn.verde{background:var(--verde);border-color:#bfe6cf;color:var(--verde-t)}
.btn.peq{padding:4px 9px;font-size:11.5px}
input[type=text],input[type=date],input[type=password],select,textarea{border:1px solid var(--borda);border-radius:6px;padding:6px 8px;font-size:12.5px;background:#fff;color:var(--texto)}
.barra{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.tabela-wrap{overflow:auto;max-height:calc(100vh - 290px);border:1px solid var(--borda);border-radius:8px;background:#fff}
table{border-collapse:collapse;width:100%}
th{position:sticky;top:0;background:var(--lilas);text-align:left;padding:7px 8px;font-size:11.5px;white-space:nowrap;z-index:2;cursor:pointer}
td{padding:6px 8px;border-top:1px solid #f0ecf7;vertical-align:top;max-width:280px}
tr.lin:hover td{background:#faf8fe;cursor:pointer}
td.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
td select{font-size:11.5px;padding:3px}
td input.obs{width:170px;font-size:11.5px;padding:3px 6px}
.msg{padding:9px 12px;border-radius:8px;margin-bottom:10px}
.msg.ok{background:var(--verde);color:var(--verde-t)}
.msg.erro{background:var(--vermelho);color:var(--vermelho-t)}
.pag{display:flex;gap:6px;align-items:center;margin-top:8px;color:var(--suave)}
.gaveta{position:fixed;top:0;right:-760px;width:740px;max-width:96vw;height:100vh;background:#fff;box-shadow:-6px 0 22px rgba(60,40,110,.18);transition:right .2s;z-index:50;display:flex;flex-direction:column}
.gaveta.aberta{right:0}
.gaveta .cab{padding:14px 18px;background:var(--lilas);display:flex;align-items:center;gap:10px}
.gaveta .corpo{padding:14px 18px;overflow:auto;flex:1}
.fundo-escuro{position:fixed;inset:0;background:rgba(40,30,70,.25);display:none;z-index:40}
.fundo-escuro.ativo{display:block}
.kv{display:grid;grid-template-columns:200px 1fr;gap:3px 12px;font-size:12px}
.kv div:nth-child(odd){color:var(--suave)}
.visita{border:1px solid var(--borda);border-left:5px solid var(--cinza);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.visita.s-ok{border-left-color:#8fd4ab}
.visita.s-nc{border-left-color:#f2b3b3}
.visita.s-cancel{border-left-color:#d6cde9}
.visita .t{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.notas{white-space:pre-wrap;background:#faf8fe;border:1px dashed var(--borda);border-radius:6px;padding:8px;font-size:12px;max-height:260px;overflow:auto}
details summary{cursor:pointer;color:var(--lilas-t);margin-top:6px}
.vazio{padding:30px;text-align:center;color:var(--suave)}
.legenda{font-size:11.5px;color:var(--suave)}
.acesso-box{max-width:420px;margin:80px auto;background:#fff;border:1px solid var(--borda);border-radius:12px;padding:26px}
.acesso-box label{display:block;margin:10px 0 4px;font-size:12px;color:var(--suave)}
.acesso-box input{width:100%}
.carregando{padding:40px;text-align:center;color:var(--suave)}
.tela-login{background:linear-gradient(135deg,#ebe5f6 0%,#dceefb 100%);min-height:100vh}
.tela-login .acesso-box{margin:12vh auto 0;box-shadow:0 8px 30px rgba(80,60,140,.12)}
.login-marca{font-size:20px;font-weight:700;color:var(--lilas-t);margin-bottom:14px}
.login-marca small{font-weight:400;color:var(--suave);margin-left:6px;font-size:13px}
