:root{
  --azul:   #1B5286;
  --azul-m: #2468A8;
  --azul-c: #4A8FCC;
  --creme:  #F2EDE4;
  --creme2: #E8E0D0;
  --branco: #FFFFFF;
  --texto:  #0F1E35;
  --verde:  #00A86B;
  --amarelo:#D97706;
  --borda:  #DDD6CA;
  --r:14px; --r-sm:10px;
  --sh: 0 1px 3px rgba(27,82,134,.08), 0 4px 12px rgba(27,82,134,.06);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:var(--creme);color:var(--texto);font-family:'Inter',system-ui,sans-serif;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* LOADING */
#screen-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;gap:20px;background:var(--azul)}
.loader{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-logo{width:140px;opacity:.9}

/* LOGIN */
#screen-login{display:none;flex-direction:column;align-items:center;min-height:100dvh;background:var(--azul)}
.login-top{display:flex;flex-direction:column;align-items:center;padding:60px 24px 32px;gap:6px}
.login-logo-img{width:160px;margin-bottom:8px}
.login-sub{font-size:13px;color:rgba(255,255,255,.5);font-weight:500}
.login-card{background:var(--creme);border-radius:24px 24px 0 0;flex:1;padding:28px 24px 40px;display:flex;flex-direction:column;gap:18px;width:100%}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:11px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.08em}
input[type=text]{background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--r);padding:14px 16px;color:var(--texto);font-size:16px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh)}
input[type=text]:focus{border-color:var(--azul-m);box-shadow:0 0 0 3px rgba(36,104,168,.12)}
input[type=text]::placeholder{color:#ccc}
.cargo-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cargo-chip{background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--r-sm);padding:13px 6px;color:#aaa;font-size:12px;font-weight:700;cursor:pointer;text-align:center;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:5px;box-shadow:var(--sh);font-family:inherit}
.cargo-chip .ic{font-size:20px}
.cargo-chip.sel{border-color:var(--azul);color:var(--azul);background:#EEF4FB}
select{width:100%;background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--r);padding:14px 16px;color:var(--texto);font-size:15px;font-family:inherit;outline:none;appearance:none;cursor:pointer;box-shadow:var(--sh)}
select:focus{border-color:var(--azul-m)}
.btn-entrar{width:100%;background:var(--azul);color:#fff;border:none;border-radius:var(--r);padding:16px;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;margin-top:4px}
.btn-entrar:disabled{opacity:.35;cursor:not-allowed}

/* APP */
#screen-app{display:none;flex-direction:column;min-height:100dvh}

/* TOPBAR */
.topbar{background:var(--azul);display:flex;flex-direction:column}
.tb-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:max(env(safe-area-inset-top,12px),12px) 14px 12px;
  gap:8px;
}
.tb-avatar{
  width:44px;height:44px;border-radius:99px;flex-shrink:0;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900;color:#fff;letter-spacing:-.5px;
}
.tb-logo{height:80px;width:auto;object-fit:contain;max-width:100%;display:block;margin:0 auto}
.tb-right{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.srv-pill{
  font-size:13px;font-weight:700;padding:11px 20px;border-radius:99px;
  letter-spacing:.01em;display:flex;align-items:center;gap:9px;
}
.srv-pill .sp-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.pill-on {background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.pill-on  .sp-dot{background:#00D48A}
.pill-off{background:rgba(255,255,255,.10);color:rgba(255,255,255,.7);border:1.5px solid rgba(255,255,255,.18)}
.pill-off .sp-dot{background:rgba(255,255,255,.4)}
.pill-cx {background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.pill-cx  .sp-dot{background:var(--azul-c)}
.btn-sair-top{
  background:none;border:none;color:rgba(255,255,255,.7);
  font-size:14px;font-family:inherit;cursor:pointer;padding:0;
  font-weight:600;text-decoration:underline;text-underline-offset:3px;
}
.tb-faixa{background:var(--azul-c);padding:7px 18px;font-size:11px;font-weight:600;color:rgba(255,255,255,.9)}
.logo-img{height:40px;width:auto}

/* BODY */
.app-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.sec-lbl{font-size:10px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}

/* SEGMENTED CONTROL */
.segmented{display:flex;background:var(--creme2);border-radius:12px;padding:3px;gap:2px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.seg-item{flex:1;padding:8px 6px;font-size:11px;font-weight:700;color:#aaa;text-align:center;border-radius:9px;white-space:nowrap;cursor:pointer;transition:all .15s;min-width:48px}
.seg-item.sel{background:var(--branco);color:var(--texto);box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* TOGGLE CARD */
.toggle-card{background:var(--branco);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:12px;cursor:pointer}
.toggle-row+.toggle-row{border-top:1px solid #F0EBE0}
.tr-info{display:flex;flex-direction:column;gap:2px}
.tr-title{font-size:15px;font-weight:800;color:var(--texto)}
.tr-sub{font-size:11px;color:#aaa}
.tr-title.dim{color:#bbb}
.sw{width:46px;height:26px;border-radius:99px;position:relative;flex-shrink:0;transition:background .2s;cursor:pointer}
.sw.on{background:var(--verde)}
.sw.off{background:#D0C8BC}
.sw::after{content:'';position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.sw.on::after{transform:translateX(20px)}

/* LISTA DE ALVOS — linha lateral colorida */
.alvo-list{display:flex;flex-direction:column;gap:7px;margin-bottom:4px}
.alvo-row{background:var(--branco);border-radius:var(--r);padding:13px 15px;display:flex;align-items:center;gap:12px;border-left:4px solid var(--borda);box-shadow:var(--sh);cursor:pointer;transition:all .15s}
.alvo-row.sel-todos {border-left-color:var(--azul-m);background:#EEF4FB}
.alvo-row.sel-coord {border-left-color:var(--azul-c);background:#F0F7FF}
.alvo-row.sel-pessoa{border-left-color:var(--azul);background:#EEF4FB}
.alvo-row.cor-g     {border-left-color:var(--azul)}
.alvo-row.cor-c     {border-left-color:var(--azul-m)}
.alvo-row.cor-cx    {border-left-color:var(--verde)}
.alvo-row.indisponivel{opacity:.35;pointer-events:none}
.av{width:38px;height:38px;border-radius:99px;background:var(--creme2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.av.ini{font-size:12px;font-weight:900;color:#fff;border-radius:11px}
.ini-g {background:linear-gradient(135deg,var(--azul),var(--azul-m))}
.ini-c {background:linear-gradient(135deg,var(--azul-m),var(--azul-c))}
.ini-cx{background:linear-gradient(135deg,#059669,#00A86B)}
.an{font-size:14px;font-weight:700;color:var(--texto)}
.as{font-size:11px;color:#aaa;margin-top:2px}
.abadge{margin-left:auto;font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;flex-shrink:0}
.b-on {background:#E8F5EE;color:var(--verde)}
.b-pau{background:#FEF3C7;color:var(--amarelo)}
.b-eq {background:#EEF4FB;color:var(--azul-m)}
.fora-txt{font-size:11px;color:#ccc;margin-bottom:8px}

/* BOTÃO SPLIT */
.btn-split{width:100%;border:none;border-radius:var(--r);overflow:hidden;display:flex;align-items:stretch;cursor:pointer;font-family:inherit;box-shadow:0 4px 16px rgba(27,82,134,.22)}
.bs-icon{background:var(--azul);color:#fff;padding:16px 18px;font-size:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bs-txt{background:var(--branco);color:var(--texto);flex:1;padding:16px 18px;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:-.2px}
.btn-split.dim .bs-icon{background:var(--creme2)}
.btn-split.dim .bs-txt{color:#bbb;font-size:15px}

/* BOTÃO DESLIZANTE */
.slide-wrap{position:relative;height:58px;border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.25);box-shadow:inset 0 1px 3px rgba(0,0,0,.07)}
.slide-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:rgba(255,255,255,.7);pointer-events:none;user-select:none;gap:6px;letter-spacing:.02em}
.slide-thumb{position:absolute;left:4px;top:4px;bottom:4px;width:80px;background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:grab;box-shadow:0 3px 10px rgba(0,0,0,.18);transition:background .2s;touch-action:none;user-select:none}
.slide-thumb:active{cursor:grabbing}
.slide-wrap.done .slide-thumb{background:var(--verde)}
.slide-wrap.done .slide-hint{opacity:.5}
/* Slide do botão chamar (dentro do body creme, não no overlay azul) */
#slide-chamar{background:var(--azul);border-radius:var(--r);height:62px;margin-top:4px}
#slide-chamar .slide-hint{color:rgba(255,255,255,.6);font-size:14px;font-weight:700}
#slide-chamar .slide-thumb{background:#fff;color:var(--azul);font-size:24px}
#slide-chamar.done .slide-thumb{background:var(--verde);color:#fff}

/* CHAMADO CARD */
.ch-card{background:var(--branco);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.ch-header{padding:12px 16px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.04em}
.ch-header.ativo{background:var(--azul);color:rgba(255,255,255,.85)}
.ch-header.atendido{background:var(--verde);color:#fff}
.ch-header.caminho{background:#EEF4FB;color:var(--azul-m)}
.ch-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.ch-tag{display:inline-flex;align-items:center;gap:5px;background:#EEF4FB;border-radius:99px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--azul-m);align-self:flex-start}
.ch-big{font-size:20px;font-weight:800;color:var(--texto)}
.ch-detalhe{font-size:14px;font-weight:700;color:var(--azul);background:#EEF4FB;border-radius:10px;padding:8px 12px}
.ch-timer{font-size:12px;color:var(--azul-m);font-weight:600}

/* AVISO NEUTRO */
.aviso-box{background:#FEF3C7;border-radius:var(--r-sm);padding:13px 16px;font-size:14px;color:var(--amarelo);font-weight:600;text-align:center}

/* OVERLAY */
#overlay{display:none;position:fixed;inset:0;z-index:300;flex-direction:column;background:var(--creme)}
#overlay.on{display:flex;animation:ov-flash 1s ease-in-out infinite}
#overlay.atendido-por{display:flex;animation:none;background:var(--creme)}
@keyframes ov-flash{0%,100%{background:var(--creme)}50%{background:#E8DDD0}}
.ov-top{background:var(--azul);padding:48px 22px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.ov-top.verde{background:var(--verde)}
.ov-ring{width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:6px;animation:ring-pulse 1.2s ease-out infinite}
.ov-ring.parou{animation:none}
@keyframes ring-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}70%{box-shadow:0 0 0 24px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.ov-tag{font-size:10px;font-weight:800;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.14em}
.ov-setor{font-size:44px;font-weight:900;color:#fff;letter-spacing:-.5px;line-height:1}
.ov-de{font-size:13px;color:rgba(255,255,255,.5)}
.ov-faixa{background:var(--azul-c);padding:7px 22px;display:flex;align-items:center;justify-content:center}
.ov-faixa img{height:18px;opacity:.9}
.ov-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;justify-content:flex-end;padding-bottom:32px}
.btn-fechar{width:100%;background:none;border:1.5px solid var(--borda);border-radius:var(--r);padding:14px;font-size:13px;font-weight:600;color:#aaa;font-family:inherit;cursor:pointer}

/* "Carlos a caminho" box */
.caminho-box{background:var(--branco);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;box-shadow:var(--sh);border-top:4px solid var(--verde)}
.caminho-nome{font-size:22px;font-weight:900;color:var(--texto)}
.caminho-sub{font-size:14px;color:#aaa}
.caminho-icon{font-size:40px}

/* HISTÓRICO */
.hist-list{display:flex;flex-direction:column;gap:8px}
.hist-item{background:var(--branco);border-radius:var(--r-sm);box-shadow:var(--sh);padding:13px 16px;display:flex;align-items:flex-start;gap:12px;border-left:3px solid var(--borda)}
.hist-item.ok{border-left-color:var(--verde)}
.hist-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0;background:var(--borda)}
.hist-dot.ok{background:var(--verde)}
.hist-info{flex:1}
.hist-quem{font-size:14px;font-weight:700}
.hist-st{font-size:12px;color:#aaa;margin-top:2px}
.hist-hora{font-size:11px;color:#ccc;white-space:nowrap}
.empty-state{text-align:center;color:#ccc;padding:40px 20px;font-size:14px}

/* TABBAR */
.tabbar{display:flex;background:var(--branco);border-top:1.5px solid var(--borda);position:sticky;bottom:0;z-index:20}
.tab-wrap{position:relative;flex:1;display:flex}
.tab-btn{flex:1;background:none;border:none;color:#ccc;padding:11px 0 14px;font-size:9px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;text-transform:uppercase;letter-spacing:.06em;transition:color .15s}
.tab-btn .ti{font-size:20px}
.tab-btn.active{color:var(--azul)}
.bdot{width:7px;height:7px;background:var(--azul-c);border-radius:50%;position:absolute;top:8px;right:12px;display:none}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* TOAST */
#toast{position:fixed;bottom:72px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--texto);color:#fff;padding:11px 20px;border-radius:99px;font-size:13px;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;z-index:400;white-space:nowrap;pointer-events:none}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* MOTIVO CAIXA */
.expand-card{margin-bottom:4px}
.expand-section{padding-bottom:4px}
.expand-divider{height:1px;background:var(--borda);margin:14px 0}
.motivo-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#aaa;margin-bottom:10px}
.motivo-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.motivo-chip{display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:99px;border:2px solid var(--borda);background:var(--branco);font-size:14px;font-weight:600;color:var(--texto);cursor:pointer;transition:all .15s;white-space:nowrap;user-select:none}
.motivo-chip.sel{border-color:var(--azul);background:var(--azul);color:#fff}
.motivo-chip.small{padding:8px 14px;font-size:13px}
.mc-icon{font-size:16px}
.motivo-sub{background:var(--creme2);border-radius:12px;padding:12px;margin-top:10px}
.motivo-sub-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#aaa;margin-bottom:8px}
.nota-row{display:flex;gap:6px;flex-wrap:wrap}
.nota-check{display:flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:10px;border:2px solid var(--borda);background:var(--branco);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;user-select:none;-webkit-tap-highlight-color:transparent}
.nota-check.sel{border-color:var(--verde);background:#e8f8ef;color:#1a7a42}
.obs-input{width:100%;box-sizing:border-box;border:none;background:none;font-family:inherit;font-size:14px;color:var(--texto);resize:none;min-height:72px;outline:none;line-height:1.5}

/* DETALHE NO OVERLAY */
.ov-detalhe{background:rgba(255,255,255,.18);border-radius:12px;padding:12px 18px;font-size:15px;font-weight:700;color:#fff;text-align:center;margin-bottom:16px;letter-spacing:.01em}