/* ===== Tema "App" (19/10/2026) ======================================
   A mesma linha visual do Fabric App "Visão Comercial West" (o painel.css de
   fabric-apps/west-realizado-meta): fonte Plus Jakarta Sans, fundo com luz no
   canto, cartões brancos "saltados" (sombra em duas camadas + canto de 18px),
   destaque em gradiente navy e rótulos em caixa alta.

   Carregado por ÚLTIMO em cada página (depois do <style> dela): só sobrescreve.
   Para voltar ao visual anterior, tire a linha
       <link rel="stylesheet" href="tema-app.css">
   da página — nada mais precisa ser desfeito.
   ==================================================================== */

/* fonte servida pelo próprio portal (o proxy da West e o CSP barram o Google Fonts).
   Sem o arquivo, cai na Segoe UI Variable do Windows 11, que é a reserva mais próxima. */
@font-face{font-family:"Plus Jakarta Sans";src:url("fontes/PlusJakartaSans.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;}

:root{
  --navy:#0a4479;
  --navy2:#1565a8;
  --navy-deep:#073560;
  --navy-700:#0c528f;
  --navy-100:#eef3f9;
  --ink:#16233a;
  --muted:#6b7a90;
  --titulo:#0a4479;
  --realce:#0a4479;
  --line:#e5ebf3;
  --bg:#f4f7fb;
  --radius:18px;
  --grad:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);
  --shadow-sm:0 1px 2px rgba(16,35,58,.04),0 10px 24px rgba(16,35,58,.05);
  --shadow-md:0 16px 34px rgba(16,35,58,.12);
  --sombra-hero:0 16px 34px rgba(10,68,121,.32);
  --font:"Plus Jakarta Sans","Segoe UI Variable Text","Segoe UI",-apple-system,Roboto,system-ui,sans-serif;
}

html,body{font-family:var(--font);color:var(--ink);font-feature-settings:"tnum" 0;}
html,body,.chatmsgs{background:radial-gradient(1200px 600px at 90% -10%,#dbe7f6 0,transparent 60%),
  linear-gradient(180deg,#f4f7fb,#eef2f8);background-attachment:fixed;}
button,input,select,textarea{font-family:inherit;}

/* ---- botões e campos ---------------------------------------------- */
.btn{border-radius:12px;font-weight:700;font-size:.82rem;box-shadow:0 1px 2px rgba(16,35,58,.05);transition:.15s;}
.btn:hover{border-color:#b8cde6;color:var(--navy);transform:translateY(-1px);}
.btn-primary{background:var(--grad);border:0;color:#fff;box-shadow:0 6px 14px rgba(10,68,121,.25);}
.btn-primary:hover{background:var(--grad);color:#fff;box-shadow:0 10px 20px rgba(10,68,121,.32);}
.field{border-radius:12px;}
.field:focus{border-color:#9db5cf;box-shadow:0 0 0 3px rgba(10,68,121,.13);}
label.lbl{font-weight:800;letter-spacing:.07em;font-size:.7rem;}

/* ---- cartões ------------------------------------------------------- */
.card{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow-sm);}

/* ===== APP (app.html) ============================================== */
/* barra lateral */
.side{background:linear-gradient(180deg,#0b4a83 0%,#073560 100%);box-shadow:6px 0 30px rgba(7,53,96,.18);
  position:relative;z-index:3;color:#e8f0fa;}
.brand{padding:22px 18px 16px;gap:12px;}
.brand img{border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.18);}
/* logo grande ocupando a largura da barra (pedido da diretoria, 19/10/2026) */
.side .brand img{width:100%;height:80px;object-fit:contain;box-sizing:border-box;padding:12px 18px;border-radius:16px;}
.brand .n{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;}
.nav{padding:2px 12px 14px;}
.mgrupo,.stitulo{font-size:.66rem;letter-spacing:.12em;font-weight:800;color:#e8f0fa;opacity:.6;padding:16px 10px 6px;}
.mi,.ws{border-radius:12px;padding:9px 12px;font-size:.86rem;font-weight:600;color:#dbe7f5;gap:12px;margin-bottom:2px;transition:.15s;}
.mi svg,.ws svg{width:18px;height:18px;}
.mi:hover,.ws:hover{background:rgba(255,255,255,.08);color:#fff;}
.mi.ativo,.ws.ativo{background:#fff;color:var(--navy);font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.18);}
.mi .cnt,.ws .cnt{background:#e8eff8;color:var(--navy);opacity:1;font-size:.66rem;font-weight:700;padding:1px 8px;}
.subs{margin:4px 0 6px 30px;border-left:1px solid rgba(255,255,255,.18);}
.side .sub{padding:7px 12px;border-radius:0 10px 10px 0;font-size:.8rem;color:#c9d9ec;}
.side .sub:hover{background:rgba(255,255,255,.08);color:#fff;}
.side .sub.ativo{background:rgba(255,255,255,.1);color:#fff;font-weight:700;}
.side .rodape{border-top:0;margin:8px 12px 14px;padding:12px;background:rgba(255,255,255,.08);border-radius:14px;}
.who .nm{font-weight:700;}
.who .pp{color:#c9d9ec;opacity:.85;}
.side .rodape a,.side .rodape button{background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:10px;font-weight:600;}
.side .rodape a:hover,.side .rodape button:hover{background:rgba(255,255,255,.12);}

/* barra de cima: vidro claro, título forte em navy */
.top{background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(229,235,243,.9);box-shadow:none;}
.top h1{font-weight:800;color:var(--navy);font-size:1.22rem;letter-spacing:-.01em;}
.top .busca input{border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(16,35,58,.05);}
.top .busca input:focus{border-color:#9db5cf;box-shadow:0 0 0 3px rgba(10,68,121,.13);}
.faixa-dados{font-weight:700;}
.faixa-dados.velho{background:#e8f0fa;}
.faixa-dados.off{background:var(--grad);}

/* cards de relatório */
.grid{gap:18px;}
.rc{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow-sm);}
.rc:hover{transform:translateY(-3px);border-color:#b8cde6;box-shadow:0 18px 36px rgba(16,35,58,.12);}
.rc .cap{background:var(--grad);}
.rc .bd h3{font-weight:700;letter-spacing:-.005em;}
.rc .ft .abrir{border-radius:12px;font-weight:700;background:var(--navy-100);}
.rc:hover .ft .abrir{background:var(--grad);box-shadow:0 6px 14px rgba(10,68,121,.25);}

/* abas do relatório por papel: o seletor de abas do app */
.abas-rel{background:rgba(255,255,255,.8);gap:4px;padding:8px 12px;}
.abas-rel button{border:0;background:transparent;color:var(--muted);border-radius:10px;font-weight:700;padding:8px 14px;}
.abas-rel button:hover{background:var(--navy-100);color:var(--navy);}
.abas-rel button.on{background:var(--grad);color:#fff;box-shadow:0 6px 14px rgba(10,68,121,.25);}
#reportView{background:#eef2f8;}

/* menus, avisos, modais */
.exp-menu{border-radius:14px;box-shadow:var(--shadow-md);}
.exp-menu button{border-radius:9px;font-weight:600;}
.aviso-flut{border-radius:12px;font-weight:600;}
.fab{background:var(--grad);border-radius:99px;font-weight:800;box-shadow:0 14px 30px rgba(10,68,121,.4);}
.fab:hover{background:var(--grad);transform:translateY(-1px);}
.mbox,.ts-cx{border-radius:18px;}
.mhead,.ts-cab{background:var(--grad);font-weight:700;}
.msg.user{background:var(--grad);}
.msg.bot{border-color:var(--line);}
.chatin input{border-radius:99px;}
.chatin button{background:var(--grad);}
.breve .ic{border-radius:16px;background:var(--navy-100);}
.breve h2{font-weight:800;}
.breve .lista{border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.rtab th{font-weight:800;letter-spacing:.06em;}
.spin{border-top-color:var(--navy2);}

/* ===== COCKPIT (cockpit.css) =======================================
   Os cabeçalhos em faixa navy viram título em caixa alta dentro do cartão,
   como os cartões do app. */
.ck{gap:18px;}
.ck-ctl label{font-size:.68rem;font-weight:800;letter-spacing:.08em;}
.ck-ctl select,.ck-cli-barra select{border-radius:12px;font-weight:700;color:var(--navy);
  box-shadow:0 1px 2px rgba(16,35,58,.05);}
.ck-ctl select:focus{border-color:#9db5cf;box-shadow:0 0 0 3px rgba(10,68,121,.13);}
.ck-fixo{border-radius:12px;font-weight:700;}
.ck-carimbo{font-weight:600;}
.ck-carimbo i{box-shadow:0 0 0 3px rgba(15,138,77,.2);}
.ck-aviso{border-radius:12px;}
.ck-card{border-radius:var(--radius);}
.ck-cab{background:transparent;color:var(--ink);padding:16px 20px 2px;align-items:flex-start;}
.ck-cab h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--ink);}
.ck-cab span{color:var(--muted);opacity:1;font-weight:600;}
.ck-posicao{background:var(--navy-100);color:var(--navy);font-weight:700;}
.ck-corpo{padding:14px 20px 18px;}
.ck-hero .ck-esq{background:#f1f6fc;border:0 !important;border-radius:14px;margin:10px 14px 14px;}
.ck-verdict b{font-weight:800;}
.ck-regua .ck-val{font-weight:800;letter-spacing:-.01em;}
.ck-cal span{border-radius:3px;}
.ck-cal span.f{background:var(--grad);}
.ck-etapa .ck-barra-f{background:linear-gradient(90deg,var(--navy),var(--navy2));border-radius:6px;}
.ck-tab th{font-size:.66rem;font-weight:800;letter-spacing:.06em;background:#fff;}
.ck-ctab th{background:var(--grad);font-weight:800;letter-spacing:.04em;}
.ck-cob{font-weight:800;}
.ck-pill{font-weight:800;}
.ck-av{background:var(--grad);color:#fff;font-weight:800;}
.ck-linha:hover,.ck-linha.sel{background:#f1f6fc;}

/* ===== VISITAS DO DIA (visitas.css) ================================ */
.vd-seg{border:0;background:#e9eef5;padding:3px;border-radius:12px;gap:2px;}
.vd-seg button{border-radius:9px;font-weight:700;color:var(--muted);}
.vd-seg button+button{border-left:0;}
.vd-seg button.on{background:var(--grad);color:#fff;box-shadow:0 6px 14px rgba(10,68,121,.25);}
.vd-busca{border-radius:12px;box-shadow:0 1px 2px rgba(16,35,58,.05);}
.vd-kpis{gap:14px;}
.vd-kpi{border-radius:16px;padding:14px 16px;}
.vd-kpi .l{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--muted);}
.vd-kpi .v{font-weight:800;color:var(--ink);font-size:1.55rem;letter-spacing:-.01em;}
.vd-kpi:first-child{background:var(--grad);border:0;box-shadow:var(--sombra-hero);}
.vd-kpi:first-child .l{color:#d6e4f5;}
.vd-kpi:first-child .v{color:#fff;}
.vd-al{border-radius:14px;transition:.15s;}
.vd-al:hover{border-color:#b8cde6;background:#f7f9fc;transform:translateY(-1px);}
.vd-al .n{background:var(--grad);color:#fff;font-weight:800;}
.vd-al .t{font-weight:700;}
.vd-chip{font-weight:600;}
.vd-tab th,.vd-ptab th{font-weight:800;letter-spacing:.06em;background:#fff;}
.vd-tab tr.vd-l:hover{background:#f1f6fc;}
.vd-painel{background:#f4f7fb;}
.vd-pcab{background:var(--grad);}
.vd-pcab h3{font-weight:800;}
.vd-pcab button{border-radius:10px;font-weight:700;}
.vd-sec h4{font-weight:800;letter-spacing:.07em;}
.vd-g{border-radius:12px;}
.vd-g b{font-weight:800;}
.vd-pgrupo{font-weight:800;}

/* ===== LOGIN (index.html) ========================================== */
.marca h2{font-weight:800;letter-spacing:-.015em;}
.area{background:transparent;width:min(50%,840px);padding:24px clamp(24px,3vw,64px);}
/* cartão do "Entrar" +20% (19/10/2026): largura, letras e controles; os espaços verticais ficaram
   como estavam para caber sem rolagem no notebook (768 px de altura) e no monitor do Steven (826 px) */
.form{background:#fff;border:1px solid var(--line);border-radius:28px;max-width:clamp(500px,37vw,672px);
  padding:clamp(34px,2.8vw,52px) clamp(36px,3.1vw,58px);box-shadow:0 1px 2px rgba(16,35,58,.04),0 18px 40px rgba(16,35,58,.08);}
.form h1{font-weight:800;letter-spacing:-.01em;font-size:clamp(2.15rem,2.05vw,2.9rem);margin-bottom:8px;}
.form .sub{font-size:clamp(1.18rem,1.02vw,1.38rem);}
.form label.lbl{font-size:clamp(.88rem,.72vw,1rem);margin:22px 0 8px;}
.form .field{padding:clamp(16px,1.2vw,20px) 19px;font-size:clamp(1.18rem,1.02vw,1.35rem);border-radius:14px;}
.btn-entrar{border-radius:14px;font-weight:800;padding:clamp(17px,1.26vw,22px);font-size:clamp(1.2rem,1.08vw,1.38rem);margin-top:28px;}
.btn-ms{border-radius:14px;font-weight:700;border-color:#c9d3df;box-shadow:0 1px 2px rgba(16,35,58,.05);
  padding:clamp(16px,1.2vw,20px);font-size:clamp(1.18rem,1.02vw,1.35rem);margin-top:22px;gap:12px;}
.btn-ms svg{width:22px;height:22px;}
.ou{font-size:clamp(.96rem,.78vw,1.08rem);margin:22px 0 4px;}
.erro{font-size:clamp(1rem,.85vw,1.1rem);}
.demo{font-size:clamp(.9rem,.72vw,1.03rem);}
.btn-ms:hover{background:#f7f9fc;border-color:#9db5cf;}
@media(max-width:820px){ .area{width:100%;padding:24px 16px;} .form{padding:28px 22px;max-width:480px;} }

/* ===== Telas de admin (admin.html, analytics.html, setores.html) ==== */
.kpi,.rl,.st{border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.kpi .vl{font-weight:800;letter-spacing:-.01em;}
.rl:hover,.st:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(16,35,58,.10);}

/* tablet (700–1024px): a barra lateral do portal é mais estreita (210px); devolve o tamanho
   compacto que o tema de cima engrossou, para "Mapa de oportunidades" caber inteiro */
@media(min-width:700px) and (max-width:1024px){
  .nav{padding:2px 8px 14px;}
  .mi,.ws{font-size:.78rem;padding:8px 9px;gap:9px;}
  .mi svg,.ws svg{width:16px;height:16px;}
  .side .sub{font-size:.75rem;}
  .side .rodape{margin:8px 8px 12px;}
}