:root{
  --fundo:#f8f6fd; --cartao:#fff; --linha:#ebe6f6; --linha2:#ddd5f0;
  --tinta:#2b2540; --tinta2:#5d5775; --mudo:#7d7794;
  --roxo:#6d4fd0; --roxo-esc:#4f37a8; --lavanda:#f1ecfd; --lavanda2:#e5dcfb;
  --azul:#3d6fe0; --azul-cl:#eaf1ff;
  --verde:#1f7a4c; --verde-cl:#e3f6ea; --verde-barra:#6cc596;
  --ambar:#8a5200; --ambar-cl:#fff3e2; --ambar-barra:#f0b45c;
  --verm:#b4322f; --verm-cl:#fdecec; --verm-barra:#e88a87;
  --raio:10px; --fonte:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--fundo);color:var(--tinta);font:15px/1.5 var(--fonte);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:6px}
h1,h2,h3{margin:0;line-height:1.25}
h2{font-size:20px;font-weight:650} h3{font-size:15px;font-weight:650}
.mudo{color:var(--mudo)} .peq{font-size:13px}
.oculto{display:none!important}

/* topo */
.topo{display:flex;align-items:center;gap:18px;padding:10px 20px;background:var(--cartao);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:5}
.topo img{height:34px;display:block}
.abas{display:flex;gap:2px;margin-left:8px;flex:1;overflow-x:auto}
.aba{background:none;border:0;padding:8px 14px;border-radius:8px;color:var(--tinta2);font-weight:600;white-space:nowrap}
.aba:hover{background:var(--lavanda)}
.aba[aria-current=page]{background:var(--lavanda2);color:var(--roxo-esc)}
.aba .num{display:inline-block;min-width:22px;padding:0 6px;margin-left:6px;border-radius:11px;background:var(--roxo);color:#fff;font-size:12px;line-height:20px;text-align:center}
.eu{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tinta2);white-space:nowrap}

/* botões e campos */
.btn{border:1px solid var(--linha2);background:var(--cartao);padding:8px 14px;border-radius:8px;font-weight:600}
.btn:hover{background:var(--lavanda)}
.btn.prim{background:var(--roxo);border-color:var(--roxo);color:#fff}
.btn.prim:hover{background:var(--roxo-esc)}
.btn.perigo{color:var(--verm);border-color:var(--verm-barra)}
.btn.perigo:hover{background:var(--verm-cl)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.mini{padding:4px 10px;font-size:13px}
label.campo{display:block;margin:0 0 14px}
label.campo>span{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;padding:9px 11px;border:1px solid var(--linha2);border-radius:8px;background:#fff}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--roxo)}
input[type=range]{width:100%;max-width:360px;padding:0;accent-color:var(--roxo)}
input[type=checkbox],input[type=radio]{accent-color:var(--roxo)}
label.campo.marca>span{font-weight:400;display:flex;gap:10px;align-items:flex-start}
label.campo.marca input{margin-top:5px}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login form{width:min(380px,100%);background:var(--cartao);border:1px solid var(--linha);border-radius:16px;padding:28px}
.login img{height:44px;display:block;margin:0 auto 6px}
.login h1{font-size:18px;text-align:center;margin-bottom:20px;color:var(--tinta2);font-weight:600}
/* login com a identidade CharmOps (igual ao do ERP e do Localizador) */
.login.cops{background:#f3f4f8;font-family:Inter,system-ui,sans-serif}
.login.cops form{max-width:360px;border-color:#dcdfe8;border-radius:18px;padding:22px}
.login.cops .cops-ic{height:48px;width:48px;margin:0 0 10px}
.login.cops .cops-marca{text-align:left;margin:0 0 6px;font-size:22px;color:#0A3D91;font-family:Montserrat,Inter,sans-serif;font-weight:900;letter-spacing:.02em}
.login.cops .cops-marca span{color:#00A6FF;font-weight:600}
.login.cops .cops-sub{margin:0 0 14px;color:#5f6375}
.login.cops .campo>span{display:none}
.login.cops input{min-height:48px;border:1.5px solid #dcdfe8;border-radius:14px;padding:8px 14px;background:#fff;color:#1d1f2b}
.login.cops input:focus{border-color:#1E66D5}
.login.cops .btn.prim{min-height:48px;border-radius:999px;background:#1E66D5;border-color:#1E66D5;font-weight:700}
.login.cops .btn.prim:hover{background:#0A3D91;border-color:#0A3D91}
.erro{color:var(--verm);font-size:14px;margin:0 0 12px}

/* fila: lista + detalhe */
.fila{display:grid;grid-template-columns:minmax(300px,400px) 1fr;height:calc(100vh - 55px)}
.lista{border-right:1px solid var(--linha);overflow:auto;background:var(--cartao)}
.filtros{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--linha);position:sticky;top:0;background:var(--cartao);z-index:2;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--linha2);border-radius:8px;overflow:hidden}
.seg button{border:0;background:#fff;padding:6px 12px;font-weight:600;font-size:14px;color:var(--tinta2)}
.seg button[aria-pressed=true]{background:var(--lavanda2);color:var(--roxo-esc)}
.filtros select{width:auto;padding:6px 8px;font-size:14px}
.item{display:grid;grid-template-columns:6px 1fr;gap:12px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--linha);background:none;padding:0}
.item:hover{background:var(--fundo)}
.item[aria-selected=true]{background:var(--lavanda)}
.item .trilho{background:var(--lavanda2)}
.item.t-calmo .trilho{background:var(--verde-barra)}
.item.t-atenc .trilho{background:var(--ambar-barra)}
.item.t-atraso .trilho{background:var(--verm-barra)}
.item .corpo{padding:11px 14px 11px 0;min-width:0}
.item .l1{display:flex;justify-content:space-between;gap:8px;font-weight:650}
.item .l1 .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .espera{font-weight:600;font-size:13px;white-space:nowrap;color:var(--tinta2)}
.t-atraso .espera{color:var(--verm)} .t-atenc .espera{color:var(--ambar)}
.item .l2{color:var(--tinta2);font-size:14px;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .l3{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.chip{display:inline-block;padding:1px 9px;border-radius:11px;font-size:12px;font-weight:650;background:var(--lavanda);color:var(--roxo-esc)}
.chip.humano{background:var(--verm-cl);color:var(--verm)}
.chip.foto{background:var(--azul-cl);color:var(--azul)}
.chip.revisar{background:var(--ambar-cl);color:var(--ambar)}
.chip.eu{background:var(--verde-cl);color:var(--verde)}
.chip.neutro{background:#f0eef5;color:var(--tinta2)}
.vazio{padding:40px 24px;text-align:center;color:var(--mudo)}
.vazio strong{display:block;color:var(--tinta);font-size:16px;margin-bottom:4px}

.detalhe{overflow:auto;padding:26px 32px 60px}
.detalhe .cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.detalhe .cab .quem{font-size:20px;font-weight:700}
.detalhe .cab .onde{color:var(--tinta2);font-size:14px;margin-top:2px}
.bloco{margin:0 0 22px;max-width:720px}
.bloco>h3{margin-bottom:8px;color:var(--tinta2);font-size:14px}
.bolha{background:var(--cartao);border:1px solid var(--linha2);border-radius:4px 16px 16px 16px;padding:12px 16px;max-width:560px;white-space:pre-wrap;overflow-wrap:anywhere}
.bolha.robo{background:var(--lavanda);border-color:var(--lavanda2);border-radius:16px 16px 16px 4px;margin-top:8px}
.bolha small{display:block;color:var(--mudo);margin-top:4px}
.fotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.fotos img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--linha2);background:#fff}
.prods{margin:0;padding-left:18px}
.acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center;max-width:720px}
.painel{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;margin-top:14px;max-width:720px}
.painel h3{margin-bottom:10px}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.voltar{display:none}

/* páginas simples */
.pagina{max-width:1000px;margin:0 auto;padding:28px 24px 80px}
.pagina>header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.pagina>header p{margin:4px 0 0;color:var(--tinta2)}
.tabela{width:100%;border-collapse:collapse;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.tabela th,.tabela td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--linha);vertical-align:top}
.tabela th{font-size:13px;color:var(--tinta2);font-weight:650;background:#fcfbfe}
.tabela tr:last-child td{border-bottom:0}
.tabela td.num,.tabela th.num{text-align:right;font-variant-numeric:tabular-nums}
.regra{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:12px 16px;margin-bottom:10px;display:flex;gap:14px;justify-content:space-between;align-items:flex-start}
.regra p{margin:0 0 4px;overflow-wrap:anywhere}
.escopos{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}

/* resumo */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);margin-bottom:22px}
.numeros>div{padding:16px 18px;border-right:1px solid var(--linha)}
.numeros>div:last-child{border-right:0}
.numeros b{display:block;font-size:28px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.numeros span{color:var(--tinta2);font-size:13px}
.numeros .dest b{color:var(--roxo-esc)}
.grafico{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;margin-bottom:22px}
.grafico svg{width:100%;height:auto;display:block}
.legenda{display:flex;gap:16px;font-size:13px;color:var(--tinta2);margin-top:6px;flex-wrap:wrap}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.barras{display:grid;gap:8px}
.barra{display:grid;grid-template-columns:minmax(120px,40%) 1fr 36px;gap:10px;align-items:center;font-size:14px}
.barra .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra .fio{height:8px;background:var(--lavanda);border-radius:4px;overflow:hidden}
.barra .fio i{display:block;height:100%;background:var(--roxo);border-radius:4px}
.barra .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta2)}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* ajustes */
.modos{display:grid;gap:10px;margin-bottom:18px}
.modo{display:flex;gap:12px;align-items:flex-start;background:var(--cartao);border:1px solid var(--linha2);border-radius:var(--raio);padding:12px 16px;cursor:pointer}
.modo:has(input:checked){border-color:var(--roxo);background:var(--lavanda)}
.modo input{margin-top:5px}
.modo b{display:block}
.modo span{color:var(--tinta2);font-size:14px}

#aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .15s;max-width:90vw;z-index:20}
#aviso.on{opacity:1}
#aviso.erro-aviso{background:var(--verm)}

@media (max-width:860px){
  .topo{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .abas{order:3;flex-basis:100%;margin:0}
  .fila{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 100px)}
  .fila.com-detalhe .lista{display:none}
  .fila:not(.com-detalhe) .detalhe{display:none}
  .detalhe{padding:18px 16px 60px}
  .voltar{display:inline-block;margin-bottom:12px}
  .duas,.dois{grid-template-columns:1fr}
  .numeros>div{border-right:0;border-bottom:1px solid var(--linha)}
  .barra{grid-template-columns:1fr 70px 30px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* conversa completa no card */
.cv-box{max-height:340px;overflow:auto;display:flex;flex-direction:column-reverse;background:#fbfaff;border:1px solid var(--linha);border-radius:var(--raio);padding:8px}
.cv-box>div{display:flex;flex-direction:column;gap:8px}
.cv{max-width:86%;border-radius:12px;padding:7px 11px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.cv-q{font-size:11.5px;color:var(--mudo);margin-bottom:2px}
.cv-c{align-self:flex-start;background:#fff;border:1px solid var(--linha2)}
.cv-c.cv-nova{border:2px solid var(--ambar-barra);background:#fffaf0}
.cv-l{align-self:flex-end;background:#e7efff;border:1px solid #d6e2fb}
.cv-b{align-self:flex-end;background:var(--verm-cl);border:1px dashed var(--verm-barra)}
.cv-s{align-self:center;background:#f3f2f7;color:var(--tinta2);font-size:12.5px;max-width:92%}
.erro-box{border-color:var(--verm-barra);background:var(--verm-cl);color:var(--verm)}
.gira{display:inline-block;width:12px;height:12px;border:2px solid var(--lavanda2);border-top-color:var(--roxo);border-radius:50%;animation:gira .8s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes gira{to{transform:rotate(360deg)}}