:root{--navy:#0B1437;--navy2:#24305A;--navy3:#2A3A7A;--laranja:#F28322;--creme:#F6F2EA;--creme2:#EFE9DE;--borda:#E6DFD2;--borda2:#EFE9DE;--txt:#0B1437;--txt2:#4B5568;--txt3:#5B6475;--verde:#14633F;--verdeBg:#DDF1E6;--amar:#7A5300;--amarBg:#FCEFCF;--verm:#A02C12;--vermBg:#FBDAD3;--branco:#fff;--nota:#FFF6DC;--notaB:#D9B44A}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,sans-serif;color:var(--txt);background:var(--creme);font-size:14px;line-height:1.45}
a{color:var(--navy)}a:hover{color:var(--navy3)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.app{display:flex;height:100vh;overflow:hidden}
.rail{flex:0 0 72px;background:var(--navy);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0;overflow-y:auto}
.logo{width:40px;height:40px;border-radius:12px;background:var(--laranja);color:var(--navy);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.rail a{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#AEB6D0;position:relative;text-decoration:none}
.rail a.on{background:var(--navy2);color:#fff}
.rail a:hover{color:#fff}
.rail .badge{position:absolute;top:4px;right:2px;background:var(--laranja);color:var(--navy);font-size:10px;font-weight:800;border-radius:999px;min-width:18px;height:18px;padding:0 4px;display:flex;align-items:center;justify-content:center}
.rail .eu{margin-top:auto;width:36px;height:36px;border-radius:50%;background:#E8A23D;color:var(--navy);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;border:0}
.tip{position:relative}
.main{flex:1;min-width:0;overflow:auto;display:flex;flex-direction:column}
.pagina{padding:22px 28px;display:flex;flex-direction:column;gap:18px;max-width:1500px;width:100%}
h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
h2{margin:0;font-size:16px;font-weight:800}
h3{margin:0;font-size:14px;font-weight:800}
.sub{font-size:12px;color:var(--txt3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.muted{color:var(--txt2)}.small{font-size:12px}.b{font-weight:700}
.card{background:#fff;border-radius:14px;padding:14px 16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi .n{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:8px}
.grow{flex:1;min-width:0}
.btn{height:40px;border:1px solid var(--borda);background:#fff;border-radius:10px;padding:0 14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn:hover{border-color:#cfc6b4}
.btn.pri{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.lar{background:var(--laranja);color:var(--navy);border-color:var(--laranja);font-weight:800}
.btn.sm{height:32px;padding:0 10px;font-size:13px;border-radius:8px}
.btn.perigo{color:var(--verm);border-color:#f0c4b9}
.btn:disabled{opacity:.5;cursor:default}
.chip{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;display:inline-block;white-space:nowrap}
.chip.verde{color:var(--verde);background:var(--verdeBg)}.chip.amar{color:var(--amar);background:var(--amarBg)}.chip.verm{color:#fff;background:var(--verm)}.chip.cinza{color:var(--navy);background:var(--creme)}.chip.azul{color:var(--navy2);background:#EEF0F7}.chip.lar{color:#9A3F06;background:#FDE7D3}
.tag{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--navy);background:var(--creme);border-radius:6px;padding:2px 6px}
input.in,select.in,textarea.in{border:1px solid var(--borda);border-radius:10px;padding:0 12px;height:40px;background:#fff;width:100%;outline:none}
textarea.in{padding:10px 12px;height:auto;min-height:80px;resize:vertical}
.in:focus{border-color:var(--navy3);box-shadow:0 0 0 3px #2a3a7a22}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--txt3)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
table.t{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}
.t th{font-size:12px;font-weight:700;color:var(--txt3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--borda2);white-space:nowrap}
.t td{padding:10px 12px;border-bottom:1px solid #F3EEE5;vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t tr.click:hover td{background:#FBF8F2;cursor:pointer}
.scroll-x{overflow-x:auto}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--borda);flex-wrap:wrap}
.tabs button{height:38px;border:0;border-bottom:2px solid transparent;background:transparent;font-weight:600;color:var(--txt3);padding:0 12px}
.tabs button.on{border-bottom-color:var(--navy);color:var(--navy);font-weight:700}
.vazio{padding:30px;text-align:center;color:var(--txt2)}
.aviso{border:1px solid #F1D58A;background:#FFF9EA;border-radius:12px;padding:12px 14px}
.aviso .sub{color:var(--amar)}
.erro{border:1px solid #f0c4b9;background:#FDF0EC;border-radius:12px;padding:12px 14px;color:var(--verm)}
.ok{border:1px solid #CFE9DA;background:#F1FAF5;border-radius:12px;padding:12px 14px;color:var(--verde)}

/* atendimento */
.at{display:flex;height:100vh;min-width:0;flex:1}
.lista{flex:0 0 360px;max-width:380px;background:#fff;border-right:1px solid var(--borda);display:flex;flex-direction:column;min-width:0}
.lista .topo{padding:18px 16px 10px;display:flex;flex-direction:column;gap:10px}
.busca{display:flex;align-items:center;gap:8px;background:var(--creme);border-radius:10px;padding:0 12px;height:40px;color:var(--txt3)}
.busca input{border:0;background:transparent;flex:1;outline:none;min-width:0}
.filtros{display:flex;flex-wrap:wrap;gap:6px}
.filtros button{height:30px;border:1px solid var(--borda);background:#fff;border-radius:999px;padding:0 10px;font-size:12px;font-weight:600}
.filtros button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.convs{overflow:auto;flex:1;border-top:1px solid var(--borda2)}
.conv{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid #F3EEE5;text-decoration:none;color:var(--txt)}
.conv:hover{background:#FBF8F2}.conv.on{background:#FBF4E8;box-shadow:inset 3px 0 0 var(--laranja)}
.av{width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;background:#EEF0F7;color:var(--navy)}
.conv .nome{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.conv .prev{font-size:13px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{min-width:20px;height:20px;border-radius:999px;background:var(--laranja);color:var(--navy);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.chat{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;background:var(--creme)}
.chat header{background:#fff;border-bottom:1px solid var(--borda);padding:12px 22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.msgs{flex:1;overflow:auto;padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.m{max-width:560px;border-radius:16px;padding:10px 14px;white-space:pre-wrap;word-wrap:break-word}
.m.cli{align-self:flex-start;background:#fff;border:1px solid var(--borda2);border-radius:16px 16px 16px 4px}
.m.eq{align-self:flex-end;background:var(--navy);color:#fff;border-radius:16px 16px 4px 16px}
.m.eq a{color:#F2B87A}
.m .meta{font-size:11px;color:var(--txt3);text-align:right;margin-top:4px}
.m.eq .meta{color:#AEB6D0}
.m.nota{align-self:stretch;max-width:none;background:var(--nota);border:1px dashed var(--notaB);border-radius:12px}
.m.nota .sub{color:var(--amar);font-size:11px}
.m.sis{align-self:center;background:#fff;border:1px solid #CFE9DA;font-size:13px;border-radius:12px;max-width:620px}
.dia{align-self:center;font-size:12px;color:var(--txt3);background:#EDE7DB;border-radius:999px;padding:3px 12px}
.compositor{background:#fff;border-top:1px solid var(--borda);padding:10px 22px 14px;display:flex;flex-direction:column;gap:8px}
.compositor textarea{border:1px solid var(--borda);border-radius:12px;padding:12px 14px;min-height:52px;max-height:200px;resize:vertical;outline:none;width:100%}
.compositor.nota textarea{background:var(--nota);border-color:var(--notaB)}
.lado{flex:0 0 360px;max-width:380px;background:#fff;border-left:1px solid var(--borda);padding:18px;display:flex;flex-direction:column;gap:16px;overflow:auto}
.embarque{background:var(--navy);color:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.embarque .n{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}
.barra{height:6px;background:var(--navy2);border-radius:999px;overflow:hidden}.barra>div{height:6px;background:var(--laranja);border-radius:999px}
ol.etapas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ol.etapas li{display:flex;gap:12px}
ol.etapas .bola{display:block;width:12px;height:12px;border-radius:50%;flex:0 0 12px;margin-top:4px;box-sizing:border-box;border:2px solid #C9CFDF;background:#fff}
ol.etapas .feito .bola{background:var(--verde);border-color:var(--verde)}
ol.etapas .agora .bola{border:3px solid var(--laranja)}
ol.etapas .linha{width:2px;flex:1;background:#E3E6EF;margin:2px auto 0}
ol.etapas .txt{padding-bottom:10px;flex:1;display:flex;justify-content:space-between;gap:8px}
ol.etapas .feito .txt span:first-child{color:var(--txt2)}
ol.etapas .agora .txt span:first-child{font-weight:700}
.item{border:1px solid var(--borda2);border-radius:10px;padding:10px 12px}

/* jornadas */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:12px;min-width:1240px}
.fase{background:var(--creme2);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px}
.kc{background:#fff;border-radius:10px;padding:10px 12px;text-decoration:none;color:var(--txt);display:flex;flex-direction:column;gap:6px}
.kc:hover{box-shadow:0 1px 0 #d9d0bf}
.mini{width:22px;height:22px;border-radius:50%;background:var(--creme);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

.modal-fundo{position:fixed;inset:0;background:#0b143766;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:16px;padding:20px;width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}
.modal.larga{max-width:860px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:12px;padding:12px 18px;z-index:60;font-weight:600;box-shadow:0 6px 24px #0003}
.faixa-urg{background:var(--verm);color:#fff;padding:10px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.faixa-urg a{color:#fff;font-weight:700}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login form{background:#fff;border-radius:18px;padding:28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.cor-verde{color:var(--verde)}.cor-amar{color:var(--amar)}.cor-verm{color:var(--verm)}
tr.verde td:first-child{box-shadow:inset 4px 0 0 #2E9E62}tr.amarelo td:first-child{box-shadow:inset 4px 0 0 #E8A23D}
.cel-verde{background:#E6F5EC}.cel-amar{background:#FCF3DA}
.pre{white-space:pre-wrap}
@media (max-width:1100px){.lado{display:none}.lado.forcar{display:flex;position:fixed;right:0;top:0;bottom:0;z-index:40;box-shadow:-8px 0 30px #0002}}
@media (max-width:760px){.rail{flex-basis:56px}.rail a{width:44px;height:44px}.lista{flex-basis:100%;max-width:none}.at.com-conversa .lista{display:none}.at:not(.com-conversa) .chat{display:none}.pagina{padding:16px}}