:root{
  --navy:#5a2b8f; --navy-2:#451f70; --blue:#8125eb; --ink:#1f2430; --muted:#6b7280;
  --line:#e5e7eb; --bg:#f5f6fa; --card:#fff; --ok:#16a34a; --off:#9ca3af; --danger:#dc2626;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 "Segoe UI",system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--blue);text-decoration:none}
.btn{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:8px 14px;border-radius:8px;cursor:pointer;font-size:14px}
.btn:hover{background:#f0f2f8}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:#741dd8}
.btn-ghost{background:transparent}
.brand-led{font-weight:800;letter-spacing:1px;color:#fff;background:linear-gradient(135deg,#843bd8,#451f70);
  padding:2px 8px;border-radius:6px}

/* topbar */
.topbar{display:flex;align-items:center;gap:24px;background:var(--navy);color:#fff;padding:10px 20px}
.topbar .brand{font-weight:700}.topbar .brand-sub{opacity:.8;font-weight:400;margin-left:4px}
.topbar nav{display:flex;gap:16px}.topbar nav a{color:#eedfff}
.topbar .userbox{margin-left:auto;display:flex;align-items:center;gap:12px}
.topbar .who{font-size:13px;opacity:.9}
.inline{display:inline}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#5a2b8f,#3c1a63)}
.login-card{background:#fff;border-radius:14px;padding:32px;width:360px;box-shadow:0 20px 50px rgba(0,0,0,.3);
  display:flex;flex-direction:column;gap:14px}
.login-logo{text-align:center;font-size:28px}
.login-card h1{font-size:18px;margin:0 0 6px;text-align:center;color:var(--navy-2)}
.login-card label{display:flex;flex-direction:column;gap:4px;font-weight:600;color:#374151}
.login-card input{padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px}

/* page */
.page{max-width:1100px;margin:22px auto;padding:0 18px}
.page.center{text-align:center}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.page-head h1{font-size:20px;margin:0;color:var(--navy-2)}
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);
  padding:12px;border-radius:10px;margin-bottom:12px}
.filtros input[type=text]{flex:1;min-width:240px;padding:9px;border:1px solid var(--line);border-radius:8px}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:#374151}
.count{color:var(--muted);font-size:13px;margin-bottom:6px}

/* grid */
.grid{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.grid th,.grid td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}
.grid th{background:#eef1fb;color:#374151;font-weight:600}
.grid tbody tr{cursor:pointer}
.grid tbody tr:hover{background:#f3f6ff}
.grid td.num{color:var(--muted);font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--muted);padding:24px}
.tag{display:inline-block;background:#eee0ff;color:#6630a3;border-radius:5px;padding:1px 6px;font-size:11px;margin-right:3px}
.tag-off{background:#f3f4f6;color:var(--off)}
.tipos{white-space:nowrap}

/* form */
.form{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:#374151}
.form input,.form textarea{padding:8px;border:1px solid var(--line);border-radius:7px;font-size:14px;font-weight:400}
.flags{display:flex;gap:18px;flex-wrap:wrap;padding-top:4px}

.alert{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:10px 12px;border-radius:8px;font-size:13px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:20px}

@media (max-width:640px){ .grid2{grid-template-columns:1fr} }

/* ===================== Tema clássico SIGEMP (tela Terceiros) ===================== */
.erp{font-family:Tahoma,"Segoe UI",sans-serif;font-size:11px;color:#000;background:#d4d0c8;
  min-height:100vh;display:flex;flex-direction:column}
.erp b{font-weight:700}


/* menu */
.erp-menu{background:#f1efe8;border-bottom:1px solid #e1ddd3;padding:3px 6px;display:flex;flex-wrap:wrap;gap:2px}
.erp-menu .mi{padding:3px 8px;cursor:default;border-radius:2px}
.erp-menu .mi:hover{background:#e5cfff}

/* toolbar */
/* barra do topo "clean" (erptoolbar.ejs, 17/10/2026): marca, atalhos com ícone de linha, usuário e sair (os chips Perfil/Empresa/Setor saíram em 19/10/2026) */
.cx-topo{display:flex;align-items:center;gap:28px;height:56px;padding:0 18px 0 20px;background:#f1efe8;border-bottom:1px solid #b8b4a8;
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;box-sizing:border-box}
/* marca (19/10/2026): segue a logo — "C" + o anel roxo (o favicon) + "REX" em roxo escuro e o slogan embaixo (Montserrat só com essas letras, partials/head.ejs) */
.cx-marca{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;white-space:nowrap;line-height:1}
.cx-logo{display:flex;align-items:center;font:800 23px/1 Montserrat,"Segoe UI",Arial,sans-serif;color:#2a0f63;letter-spacing:.01em}
.cx-logo b{font-weight:800}
.cx-logo-o{width:.8em;height:.8em;flex:0 0 auto;margin:0 .05em 0 .04em}
.cx-slogan{font:600 7.5px/1 Montserrat,"Segoe UI",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#7c3aed;padding-left:.2em}
.cx-nav{display:flex;align-self:stretch;gap:6px}
.cx-item{position:relative;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14px;color:#3d3a33;text-decoration:none;white-space:nowrap;transition:color .15s}
.cx-item svg{width:17px;height:17px;flex:0 0 auto}
.cx-item:hover{color:#4d00a6}
.cx-item.ativo{color:#4d00a6;font-weight:600}
.cx-item.ativo::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:2px 2px 0 0;background:#5a00c0}
.cx-item:focus-visible,.cx-marca:focus-visible{outline:2px solid #5a00c0;outline-offset:-2px;border-radius:6px}
.cx-dir{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.cx-usuario{position:relative;margin-left:4px}
.cx-user{display:inline-flex;align-items:center;gap:9px;height:36px;max-width:240px;padding:0 10px 0 4px;border:0;border-radius:18px;background:#e4e0d6;
  color:#271d33;font:600 14px "Segoe UI",Arial,sans-serif;cursor:pointer;transition:background .15s}
.cx-user:hover,.cx-user[aria-expanded="true"]{background:#d9d3c6}
.cx-user:focus-visible{outline:2px solid #5a00c0;outline-offset:2px}
.cx-user-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-seta{width:15px;height:15px;flex:0 0 auto;color:#6b675c;transition:transform .15s}
.cx-user[aria-expanded="true"] .cx-seta{transform:rotate(180deg)}
/* menu do nome (public/js/menu-usuario.js, 19/10/2026): Configurações e Sair */
.cx-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:4500;min-width:230px;padding:6px;border:1px solid #e4def3;border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(42,15,107,.2);white-space:normal}
.cx-menu[hidden]{display:none}
.cx-menu-cab{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid #f0ecf7}
.cx-menu-cab b{display:block;font-size:14px;color:#231b2d}
.cx-menu-cab small{display:block;font-size:11.5px;color:#6b6478}
.cx-menu-f{margin:0}
.cx-menu-it{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border:0;border-radius:8px;background:none;color:#231b2d;font:500 13.5px "Segoe UI",Arial,sans-serif;text-decoration:none;cursor:pointer;text-align:left}
.cx-menu-it svg{width:17px;height:17px;color:#5a00c0}
.cx-menu-it:hover,.cx-menu-it:focus-visible{background:#f1ebfd;outline:0}
.cx-menu-sair svg{color:#b42318}
.cx-menu-sair:hover,.cx-menu-sair:focus-visible{background:#fde8e6;color:#b42318}
.cx-av{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#4d00a6;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}
.cx-tel{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-right:2px;border:0;border-radius:50%;background:#e9ddfb;color:#4d00a6;cursor:pointer;transition:background .15s,color .15s}
.cx-tel svg{width:17px;height:17px}
.cx-tel:hover{background:#5a00c0;color:#fff}
.cx-tel:focus-visible{outline:2px solid #5a00c0;outline-offset:2px}
@media (max-width:1480px){.cx-topo{gap:16px}.cx-item{padding:0 10px}}
@media (max-width:1180px){.cx-item{padding:0 8px;font-size:0;gap:0}.cx-item svg{width:19px;height:19px}.cx-selo{font-size:10.5px;margin-left:2px}}
@media (max-width:1000px){.cx-item{padding:0 8px;font-size:0;gap:0}.cx-item svg{width:19px;height:19px}.cx-user{gap:2px;padding:0 6px 0 4px}.cx-user-nome{display:none}}
@media (max-width:560px){.cx-topo{gap:6px;padding:0 8px 0 12px}.cx-nav{gap:0}.cx-item{padding:0 6px}.cx-logo{font-size:19px}.cx-slogan{display:none}}

/* aba modulo */
.erp-modtab{background:#d4d0c8;padding:4px 6px 0}
.modtab{display:inline-block;background:#f1efe8;border:1px solid #b8b4a8;border-bottom:none;
  padding:3px 12px;border-radius:4px 4px 0 0;font-weight:700}
.modtab.active{background:#fff}

/* filtros */
.erp-filtros{background:#e9e6df;border:1px solid #b8b4a8;margin:0 6px;padding:8px 10px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ftipos{display:flex;gap:22px;align-items:flex-start;padding-top:2px}
.erp-chk{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:12px}
.erp-chk input{width:14px;height:14px;accent-color:#5e0abf}
.finfo{display:flex;gap:1px;border:1px solid #9c988c}
.fi-col{background:#fff;min-width:96px}
.fi-h{background:linear-gradient(180deg,#853fd6,#702bbf);color:#fff;font-weight:700;text-align:center;padding:2px 8px}
.fi-v{text-align:center;padding:3px 8px;font-weight:600}
.fi-seg{display:flex}
.fi-seg .seg{flex:1;text-align:center;padding:3px 8px;border-left:1px solid #d6d2c6;cursor:pointer}
.fi-seg .seg:first-child{border-left:none}
.fi-seg .seg.on{background:#702bbf;color:#fff;font-weight:700}

/* pesquisa */
.erp-pesq{display:flex;align-items:center;gap:14px;background:#e9e6df;border:1px solid #b8b4a8;border-top:none;
  margin:0 6px;padding:8px 10px;flex-wrap:wrap}
.erp-pesq .pf{color:#333}
.erp-pesq input[type=text]{flex:1;min-width:220px;max-width:420px;padding:3px 6px;border:1px solid #9a7fb9;
  background:#fff;font-size:12px;box-shadow:inset 1px 1px 2px rgba(0,0,0,.12)}
.erp-btn{padding:4px 14px;border:1px solid #8a8678;border-radius:3px;
  background:linear-gradient(180deg,#fdfdfc,#dcd7cb);cursor:pointer;font-size:12px}
.erp-btn:hover{background:#f3eafd;border-color:#ad8ad6}

/* sub-abas */
.erp-subtabs{margin:6px 6px 0;display:flex;gap:2px;border-bottom:1px solid #9c988c}
.erp-subtabs .st{background:#e4e0d7;border:1px solid #b8b4a8;border-bottom:none;padding:4px 14px;
  border-radius:4px 4px 0 0;cursor:pointer}
.erp-subtabs .st.active{background:#fff;font-weight:700;position:relative;top:1px}

/* grade */
.erp-grid-wrap{flex:1;overflow:auto;margin:0 6px;border:1px solid #9c988c;background:#fff}
.erp-grid{border-collapse:collapse;width:100%;font-size:11px;white-space:nowrap}
.erp-grid th{position:sticky;top:0;background:linear-gradient(180deg,#f3f1ea,#d9d4c7);
  border:1px solid #b2ad9f;padding:3px 8px;text-align:left;font-weight:700}
.erp-grid td{border:1px solid #e4e1d8;border-top:none;padding:2px 8px;overflow:hidden;
  text-overflow:ellipsis;max-width:260px}
.erp-grid td.num,.erp-grid th.num{text-align:right;font-variant-numeric:tabular-nums}
.erp-grid tbody tr:nth-child(even){background:#f5f4ef}
.erp-grid tbody tr:hover{background:#f3eafd}
.erp-grid tbody tr.sel,.erp-grid tbody tr.sel:hover{background:#7631c5;color:#fff}
.erp-grid tbody tr.sel td{border-color:#6324aa}
.erp-grid .empty{text-align:center;color:#666;padding:18px}

/* acoes */
.erp-actions{display:flex;gap:8px;padding:8px 6px;background:#d4d0c8}
.fbtn{display:flex;align-items:center;gap:7px;min-width:120px;padding:7px 12px;
  border:1px solid #8a8678;border-radius:4px;background:linear-gradient(180deg,#fdfdfc,#ddd8cc);
  cursor:pointer;font-size:12px;color:#111;text-align:left}
.fbtn:hover:not([disabled]){background:#f3eafd;border-color:#ad8ad6}
.fbtn[disabled]{opacity:.5;cursor:default}
.fbtn .fk{background:#702bbf;color:#fff;border-radius:3px;padding:1px 6px;font-weight:700;font-size:11px}
.fbtn .fl{font-weight:600}

/* status */
.erp-status{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#e9e6df;border-top:1px solid #b8b4a8;padding:5px 10px}
.erp-brand{display:flex;align-items:center;gap:8px;color:#4f178f;font-size:11px;line-height:1.1}
.erp-brand b{font-size:14px}
.erp-brand span{color:#44506f}
.erp-brand-logo{font-size:22px;color:#702bbf}
.erp-stat{display:flex;gap:16px;flex-wrap:wrap;font-size:11px}
.erp-stat span{background:#fff;border:1px solid #c7c2b6;padding:2px 8px;border-radius:2px}

/* regra: linha de registro INATIVO = vermelho (igual SIGEMP) */
.erp-grid tbody tr.row-off td{color:#cc0000}
.erp-grid tbody tr.row-off .tag-off{color:#cc0000;font-style:italic}
/* linha selecionada continua azul/branco mesmo se inativa */
.erp-grid tbody tr.sel td{color:#fff}

/* ===================== Login estilo LED ===================== */
.led-login-bg{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  background:radial-gradient(1200px 700px at 70% 35%, #713bae 0%, #592a8f 40%, #46226f 100%);
  font-family:Tahoma,"Segoe UI",sans-serif;padding:24px}
.led-card{width:560px;max-width:94vw;background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.led-card-head{background:#f3f2ee;border-bottom:1px solid #d8d4c8;padding:8px 14px;font-weight:700;color:#333;font-size:13px}
.led-card-body{display:flex;gap:22px;align-items:center;padding:22px 24px}
.led-logo{flex:0 0 150px;display:flex;align-items:center;justify-content:center}
.led-logo-mark{font-weight:800;font-size:54px;font-style:italic;letter-spacing:-2px;
  background:linear-gradient(180deg,#9955e6,#451f70);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 6px rgba(69, 31, 112,.25);position:relative}
.led-logo-mark:after{content:"";position:absolute;left:-10px;right:-10px;top:16px;height:3px;
  background:repeating-linear-gradient(90deg,#c29aef 0 6px,transparent 6px 10px);opacity:.6}
.led-fields{flex:1;display:flex;flex-direction:column;gap:14px}
.led-fields label{display:flex;flex-direction:column;gap:4px;font-weight:700;color:#5a2b8f;font-size:14px}
.led-fields input{padding:9px 10px;border:1px solid #9a7fb9;border-radius:4px;font-size:15px;font-weight:400;
  background:#fff;box-shadow:inset 1px 1px 2px rgba(0,0,0,.1)}
.led-fields input:focus{outline:none;border-color:#8125eb;box-shadow:0 0 0 2px rgba(129, 37, 235,.2)}
.led-alert{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:7px 10px;border-radius:6px;font-size:13px;font-weight:400}
.led-card-actions{display:flex;gap:12px;background:#e9e6df;border-top:1px solid #d8d4c8;padding:14px 24px}
.led-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;
  border:1px solid #9c988c;border-radius:6px;background:linear-gradient(180deg,#fff,#eceadf);
  cursor:pointer;font-size:14px;font-weight:600;color:#1a1a1a;text-decoration:none}
.led-btn:hover{background:#f3eafd;border-color:#ad8ad6}
.led-btn-exit{flex:0 0 150px}
.led-btn-ic{font-size:18px}
.led-values{display:flex;gap:48px}
.led-values .lv{display:flex;flex-direction:column;align-items:center;gap:8px;color:#e4cdff}
.led-values .lv-ic{width:54px;height:54px;border:2px solid #b88fe6;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:24px;color:#eedfff}
.led-values .lv-l{font-size:14px;letter-spacing:.5px}

/* ===================== Menu com dropdowns ===================== */
.erp-menu .mi-wrap{position:relative}
.erp-menu .mi-wrap:hover > .mi{background:#e5cfff}
.mi-drop{display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid #9c988c;
  box-shadow:0 8px 18px rgba(0,0,0,.22);min-width:200px;z-index:60;padding:3px 0}
.mi-wrap:hover .mi-drop{display:block}
.mi-drop a{display:block;padding:5px 14px;color:#1a1a1a;white-space:nowrap;font-size:12px;text-decoration:none}
.mi-drop a:hover{background:#e5cfff}
.mi-drop .mi-inerte{display:block;padding:5px 14px;color:#8a8a8a;white-space:nowrap;font-size:12px;cursor:default} /* item sem OnClick no SIGEMP */
.mi-logout{color:#0a6b1e;font-weight:700;cursor:pointer}

/* em construção */
.erp-emconstr{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:#555;text-align:center;padding:30px}
.ec-ic{font-size:46px}
.erp-emconstr h2{margin:0;color:#5a2b8f}
.ec-note{font-size:12px;max-width:540px;line-height:1.5}
.erp-emconstr code{background:#eceae2;padding:1px 6px;border-radius:3px}

/* ===================== Menu aninhado (fly-out) ===================== */
.erp-menu .mi-wrap:hover > .mi{background:#e5cfff}
.mi-wrap:hover .mi-drop{display:none}
.mi-wrap:hover > .mi-drop{display:block}
.mi-sub{position:relative}
.mi-sub > .mi-drop{position:absolute;left:100%;top:-4px;min-width:210px;display:none}
.mi-sub:hover > .mi-drop{display:block}
.mi-sub-label{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:5px 14px;cursor:default;white-space:nowrap;font-size:12px;color:#1a1a1a}
.mi-sub:hover > .mi-sub-label{background:#e5cfff}
.mi-arrow{opacity:.55;font-size:10px}
.mi-sep{border-top:1px solid #d9d4c7;margin:3px 6px}

/* campo mini (código) nos filtros F8/F7 */
.erp-pesq .erp-mini{width:90px;flex:0 0 auto;padding:3px 6px;border:1px solid #9a7fb9;background:#fff;
  font-size:12px;box-shadow:inset 1px 1px 2px rgba(0,0,0,.12)}

/* ===================== Modal (estilo desktop) ===================== */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(33, 20, 48,.45);z-index:200;
  align-items:flex-start;justify-content:center;padding:40px 16px}
.modal-win{background:#ece9e0;border:1px solid #8a8678;border-radius:6px;width:760px;max-width:96vw;
  max-height:86vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.modal-head{background:linear-gradient(180deg,#5e0abf,#4b0897);color:#fff;font-weight:700;
  padding:7px 12px;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.modal-x{cursor:pointer;opacity:.9}.modal-x:hover{opacity:1}
.modal-body{padding:14px;overflow:auto}
.modal-form{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px}
.mf-field{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:#334}
.mf-field input{padding:5px 7px;border:1px solid #9a7fb9;border-radius:3px;font-size:13px;font-weight:400;background:#fff}
.mf-field input.ro{background:#e7e4db;color:#555}
.modal-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:10px 14px;
  border-top:1px solid #c9c4b7;background:#e2ded3;border-radius:0 0 6px 6px}
.modal-msg{margin-right:auto;color:#b00;font-size:12px}
@media(max-width:640px){.modal-form{grid-template-columns:1fr}}

/* flag S/N como checkbox no form (igual SIGEMP) */
.modal-form .mf-flag{flex-direction:row;align-items:center;gap:7px}
.modal-form .mf-flag input{width:16px;height:16px;accent-color:#5e0abf}

/* ===== Modal "Manutenção" (réplica SIGEMP) ===== */
.mnt-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding:18px}
.mnt-win{background:#f0f0f0;width:1120px;max-width:98vw;max-height:94vh;display:flex;flex-direction:column;border:1px solid #777;box-shadow:0 18px 50px rgba(0,0,0,.4);border-radius:3px;overflow:hidden}
.mnt-head{display:flex;justify-content:space-between;align-items:center;background:#f0f0f0;border-bottom:1px solid #cfcfcf;padding:5px 10px;font-weight:600;color:#222}
.mnt-x{cursor:pointer;color:#555;padding:0 6px;font-size:15px}
.mnt-x:hover{background:#e11;color:#fff;border-radius:2px}
.mnt-content{overflow:auto;background:#f0f0f0}
.mnt-loading{padding:40px;text-align:center;color:#555}
.mnt{font:12px/1.35 "Segoe UI",system-ui,Arial,sans-serif;color:#1a1a1a}
.mnt-status{background:#6721b8;color:#fff;font-weight:700;padding:4px 12px;letter-spacing:.3px}
.mnt-status b{font-weight:800}
.mnt-tabs{display:flex;flex-wrap:wrap;background:#e4e4e4;border-bottom:1px solid #b9b9b9;padding:3px 4px 0;gap:2px}
.mnt-tabs .mt{padding:5px 12px;background:#d4d4d4;border:1px solid #b9b9b9;border-bottom:none;border-radius:4px 4px 0 0;cursor:pointer;color:#333;font-size:12px}
.mnt-tabs .mt.active{background:#f0f0f0;color:#111;font-weight:600;position:relative;top:1px}
.mnt-body{padding:12px 14px}
.mnt .mp{display:none}
.mnt .mp.active{display:block}
.mnt .r{display:flex;flex-wrap:wrap;gap:10px 16px;margin-bottom:8px;align-items:flex-end}
.mnt .f{display:flex;flex-direction:column;gap:2px}
.mnt .f>span{font-size:11px;color:#333}
.mnt .f.col{flex:1}
.mnt .f input,.mnt .f textarea{border:1px solid #b79bd6;background:#fff;padding:3px 5px;font:12px "Segoe UI",Arial,sans-serif;color:#3a106b}
.mnt .f input.ro,.mnt .f textarea[readonly]{background:#eef0f3;color:#444;border-color:#c9c9c9}
.mnt .f input.hi{background:#fffbe6;font-weight:700}
.mnt .f.grow{flex:1 1 100%}
.mnt .f.grow input{width:100%}
.mnt .f.grow textarea{width:100%}
.mnt .f.w-red input{width:110px}
.mnt .comp{display:flex;align-items:center;gap:3px}
.mnt .comp input{text-align:center;color:#3a106b}
.mnt .f2{border:1px solid #b79bd6;background:#f1e8fb;color:#6721b8;font-size:10px;padding:2px 4px;cursor:pointer;border-radius:2px}
.mnt .lk{flex-direction:row;align-items:center;gap:4px;flex-wrap:wrap}
.mnt .lk>span{min-width:110px;font-size:11px;color:#333}
.mnt .lk .desc{flex:1;min-width:160px;background:#eef0f3;color:#3a106b;font-weight:600;border-color:#c9c9c9}
.mnt .lk .desc.sm{min-width:120px;max-width:220px}
.mnt .chkf{flex-direction:row;align-items:center;gap:5px}
.mnt .chkf>span{font-size:11px}
.mnt .radf{display:inline-flex;align-items:center;gap:4px;margin-right:16px;font-size:12px}
.mnt .grp{border:1px solid #c3c3c3;border-radius:4px;padding:8px 10px;margin:8px 0;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end}
.mnt .grp legend{font-size:11px;color:#6721b8;font-weight:600;padding:0 4px}
.mnt .two-grp{align-items:flex-start}
.mnt .sm2 input{width:70px;text-align:right}
.mnt .mgrid{width:100%;border-collapse:collapse;background:#fff;border:1px solid #b9b9b9;font-size:11px}
.mnt .mgrid th{background:#e8dff2;text-align:left;padding:4px 7px;border:1px solid #d3c7e0;color:#3e1a68}
.mnt .mgrid td{padding:3px 7px;border:1px solid #e3e3e3}
.mnt .mgrid td.num,.mnt .mgrid th.num{text-align:right}
.mnt .mgrid .empty{text-align:center;color:#888;padding:14px}
.mnt .mgrid-bar{display:flex;gap:6px;margin:6px 0}
.mnt .mgrid-bar.top{margin:0 0 8px}
.mnt .erp-btn.sm{font-size:11px;padding:3px 9px}
.mnt .fotos-wrap{display:flex;gap:14px}
.mnt .foto-box{width:420px;height:280px;border:1px solid #b9b9b9;background:#fafafa;display:flex;align-items:center;justify-content:center;color:#999}
.mnt .foto-side{display:flex;flex-direction:column;gap:7px}
.mnt-foot{display:flex;gap:12px;align-items:center;background:#e4e4e4;border-top:1px solid #b9b9b9;padding:8px 14px}
.erp-btn.big{font-size:13px;padding:9px 26px;font-weight:600}
.mnt-msg{color:#6721b8;font-weight:600;margin-left:8px}
.mnt .mgrid.arvore td{font-size:11px}
.mnt .arv-desc{white-space:pre;font-family:"Consolas","Courier New",monospace;font-size:11px}
.mnt .mgrid.arvore tr.raiz{background:#6721b8;color:#fff;font-weight:600}
.mnt .mgrid.arvore tr.raiz td{color:#fff}
.mnt .chklist{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px}
.mnt .mgrid input{border:1px solid #b79bd6;padding:2px 4px;width:95%;color:#3a106b;font:12px "Segoe UI",Arial}
.mnt .radgrp{display:flex;flex-direction:column;gap:2px}
.mnt .radgrp .rg-lbl{font-size:11px;color:#333}
.mnt .radgrp .radf{display:inline-flex;margin-right:12px}
/* form dos filtros que o JS põe em volta do painel (cadastros.js, contas-*.js, estoque.js...): sem caixa própria, o painel fica onde o DFM manda
   (num painel com Caption centrado — flex — o form absoluto ia parar no meio e levava o painel junto) */
.pe-panel > form#fCons, .pe-form > form#fCons { display: contents; }
/* barra de status de baixo: escondida (o que ela mostrava está na barra do topo, erptoolbar.ejs); fica no DOM para os ids que as telas atualizam (ex.: #lbRelogio) */
.erp-status{display:none !important}
/* caixa "Você está aí?" (sessao.js): 1 h sem atividade → 15 min para responder */
.ses-ov{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(35,0,77,.38);backdrop-filter:blur(2px);
  font:13px "Segoe UI",Arial,sans-serif;animation:ses-entra .2s ease}
.ses-cx{width:min(420px,calc(100vw - 32px));box-sizing:border-box;padding:26px 26px 20px;border-radius:16px;background:#fff;text-align:center;
  box-shadow:0 18px 50px rgba(35,0,77,.35)}
.ses-ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,#5b2bd6,#9d4bff);box-shadow:0 6px 16px rgba(91,43,214,.35)}
.ses-ic svg{width:28px;height:28px}
.ses-cx h2{margin:14px 0 6px;font-size:20px;color:#23004d}
.ses-cx p{margin:0 0 20px;color:#4a4458;line-height:1.5}
.ses-cont{color:#c2410c;font-variant-numeric:tabular-nums}
.ses-bt{display:flex;gap:10px;justify-content:center}
.ses-bt button{height:40px;padding:0 18px;border-radius:10px;font:600 13px "Segoe UI",Arial,sans-serif;cursor:pointer}
.ses-sair{border:1px solid #d9d1ef;background:#fff;color:#4a4458}
.ses-sair:hover{background:#f6f4fb}
.ses-manter{border:0;background:linear-gradient(135deg,#5b2bd6,#9d4bff);color:#fff;box-shadow:0 4px 12px rgba(91,43,214,.3)}
.ses-manter:hover:not(:disabled){filter:brightness(1.06)}
.ses-bt button:focus-visible{outline:2px solid #23004d;outline-offset:2px}
@keyframes ses-entra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ses-ov{animation:none}}
/* enquanto o alinhamento.js não estica a tela, só o conteúdo fica invisível (menu, barra do topo e aba aparecem na hora) */
html.vcl-espera .erp > :not(.erp-menu):not(.erp-toolbar):not(.erp-modtab){visibility:hidden}
/* azul do próprio navegador também em roxo (17/10/2026): caixas de marcar, rádios, barras de progresso e seleção de texto */
:root{accent-color:#7c3aed}
::selection{background:#ddc8fb;color:#1d0a3a}
/* selo do WhatsApp no atalho do topo (18/10/2026) */
.cx-selo[hidden]{display:none}
.cx-selo.cx-selo-alerta{background:#dc2626;animation:cxSeloPulsa 1.6s ease-in-out infinite}
@keyframes cxSeloPulsa{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}50%{box-shadow:0 0 0 5px rgba(220,38,38,0)}}
@media (prefers-reduced-motion:reduce){.cx-selo.cx-selo-alerta{animation:none}}
.cx-selo{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border-radius:9px;background:#16a34a;color:#fff;font:700 10.5px "Segoe UI",Arial,sans-serif;line-height:1}
/* Ligar / WhatsApp flutuante nos campos de telefone das telas (18/10/2026) */
.cx-fone-acoes{position:fixed;z-index:5000;display:inline-flex;gap:4px;padding:3px;border-radius:9px;background:#fff;box-shadow:0 4px 16px rgba(42,15,107,.22);border:1px solid #e4def3}
.cx-fone-acoes[hidden],.cx-fone-acoes [hidden]{display:none}
.cx-fone-acoes button{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border:0;border-radius:6px;background:#efe9fb;color:#4d00a6;font:600 11.5px "Segoe UI",Arial,sans-serif;cursor:pointer;white-space:nowrap}
.cx-fone-acoes button[data-fa="whats"]{background:#dcfce7;color:#166534}
.cx-fone-acoes button:hover{filter:brightness(.95)}
.cx-fone-acoes button:focus-visible{outline:2px solid #5a00c0;outline-offset:1px}
.cx-fone-acoes svg{width:13px;height:13px}
/* Calendário dos campos de data (public/js/calendario.js, 18/10/2026) — ícone no canto do campo + calendário flutuante */
.cx-cal-bt{position:fixed;z-index:5000;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;background:#efe9fb;color:#5a00c0;cursor:pointer;box-shadow:0 0 0 1px #fff}
.cx-cal-bt[hidden]{display:none}
.cx-cal-bt:hover{background:#5a00c0;color:#fff}
.cx-cal-bt svg{width:78%;height:78%}
.cx-cal{position:fixed;z-index:6000;width:232px;padding:8px;border:1px solid #e4def3;border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(42,15,107,.24);font:12px "Segoe UI",Arial,sans-serif;color:#231b2d;user-select:none}
.cx-cal button{font:inherit;cursor:pointer}
.cx-cal-cab{display:flex;align-items:center;gap:2px;margin-bottom:6px}
.cx-cal-cab b{flex:1;text-align:center;font-size:12.5px;font-weight:700}
.cx-cal-cab button{width:24px;height:24px;border:0;border-radius:6px;background:none;color:#5a00c0;font-size:15px;line-height:1}
.cx-cal-cab button:hover{background:#efe9fb}
.cx-cal-sem,.cx-cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cx-cal-sem span{padding:2px 0;text-align:center;font-size:10.5px;font-weight:700;color:#8a8398}
.cx-cal-sem span.fds{color:#b07ad6}
.cx-cal-dias button{height:28px;border:0;border-radius:7px;background:none;color:#231b2d;font-variant-numeric:tabular-nums}
.cx-cal-dias button:hover{background:#f1ebfd}
.cx-cal-dias button.fds{color:#7a3fb0}
.cx-cal-dias button.fora{color:#c4bdd2}
.cx-cal-dias button.hoje{box-shadow:inset 0 0 0 1.5px #5a00c0;font-weight:700}
.cx-cal-dias button.ativo{background:#e2d7f9}
.cx-cal-dias button.sel{background:#5a00c0;color:#fff;font-weight:700}
.cx-cal-rod{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid #f0ecf7}
.cx-cal-rod span{font-size:10px;color:#a29bb0;white-space:nowrap}
.cx-cal-rod button{height:24px;padding:0 9px;border:0;border-radius:6px;background:#efe9fb;color:#4d00a6;font-weight:600}
.cx-cal-rod button:hover{background:#e2d7f9}

/* 19/10/2026 (pedido do usuário): campo de senha como texto mascarado (public/js/senha-protegida.js) — o navegador não oferece salvar */
.cx-senha { -webkit-text-security: disc; text-security: disc; }
.cx-senha.cx-senha-ver { -webkit-text-security: none; text-security: none; }

/* filtro estilo Excel nas grades (19/10/2026) — public/js/filtro-grade.js */
th.cxf-th { padding-right: 16px !important; cursor: pointer; user-select: none; background: #5b21b6 !important; color: #fff !important; } th.cxf-th * { color: inherit; } /* padrão de todas as grades (19/10/2026): título roxo, texto branco */
th.cxf-th:hover { background: #e0cff4 !important; color: #000 !important; } th.cxf-th:hover * { color: #000 !important; } /* mouse em cima do título: lilás com texto preto em todas as grades */
.cxf-bt { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; border-radius: 3px; cursor: pointer; color: inherit; opacity: .35; transition: opacity .15s, background .15s; }
.cxf-bt svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
th:hover > .cxf-bt { opacity: .85; } .cxf-bt:hover { opacity: 1; background: rgba(127,127,127,.3); }
.cxf-bt.on { opacity: 1; background: #fff; color: #5b21b6; box-shadow: 0 0 0 1px #5b21b6 inset; }
.cxf-bt.on svg { fill: #5b21b6; stroke: #5b21b6; } .cxf-bt.on svg path[d^="M5"] { fill: none; }
th.cxf-ordem { box-shadow: inset 0 -3px 0 #c4a8ff; }
tr.cxf-oc { display: none !important; }
.cxf-pop { position: fixed; z-index: 2147483000; width: 270px; background: #fff; color: #1f1633; border: 1px solid #d9d0ea; border-radius: 10px; box-shadow: 0 12px 34px rgba(30,10,70,.22); padding: 6px; font: 13px 'Segoe UI', 'Open Sans', Arial, sans-serif; text-align: left; }
.cxf-it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.cxf-it:hover:not([disabled]) { background: #f1ebfd; } .cxf-it[disabled] { color: #aaa1bb; cursor: default; }
.cxf-it svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; flex: none; }
.cxf-x { width: 16px; text-align: center; font-size: 16px; line-height: 1; color: #b42318; flex: none; } .cxf-it[disabled] .cxf-x { color: inherit; }
.cxf-sep { height: 1px; background: #eee8f7; margin: 5px 2px 8px; }
.cxf-busca { display: flex; align-items: center; gap: 6px; margin: 0 2px 6px; padding: 0 8px; border: 1px solid #d6cfe6; border-radius: 7px; }
.cxf-busca:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 2px #e9ddff; }
.cxf-busca svg { width: 15px; height: 15px; fill: none; stroke: #8a7fa3; stroke-width: 1.5; flex: none; }
.cxf-busca input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 7px 0; font: inherit; background: transparent; }
.cxf-lista { max-height: 240px; overflow: auto; margin: 0 2px; border: 1px solid #eee8f7; border-radius: 7px; padding: 3px 0; }
.cxf-op { display: flex; align-items: center; gap: 7px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.cxf-op:hover { background: #f6f2fe; }
.cxf-op input { margin: 0; accent-color: #6d28d9; flex: none; }
.cxf-op span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.cxf-op em { font-style: normal; font-size: 11px; color: #9a90ae; }
.cxf-tudo { font-weight: 600; border-bottom: 1px solid #f1ecf9; margin-bottom: 2px; padding-bottom: 5px; }
.cxf-nada { padding: 10px; color: #8a7fa3; text-align: center; }
.cxf-info { font-size: 11px; color: #8a6d00; margin: 4px 4px 0; } .cxf-info:empty { display: none; }
.cxf-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 2px 2px; }
.cxf-rodape button { border-radius: 8px; padding: 6px 16px; font: 600 13px 'Segoe UI', Arial, sans-serif; cursor: pointer; }
.cxf-cancela { border: 1px solid #d6cfe6; background: #fff; color: #4b2f86; }
.cxf-ok { border: 0; background: #6d28d9; color: #fff; } .cxf-ok:disabled { background: #c9b8ef; cursor: default; }
@media print { .cxf-bt, .cxf-pop { display: none !important; } th.cxf-th { padding-right: inherit !important; } }

/* ===================== Modo coletor (23/10/2026) =====================
   Pedido do usuário: "as telas precisam estar muito responsivas — os usuários usam coletor para fazer inventário" (≈ 360–480 px, toque).
   Até 600 px: a barra do topo cabe na tela (os atalhos deslizam), o menu de texto do ERP fica atrás do botão ☰ e vira uma lista que abre
   com toque (sem os "fly-outs" de passar o mouse, que saíam da tela). No computador nada muda. */
.cx-menubt{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;border:0;border-radius:10px;background:#e4e0d6;color:#2a0f63;cursor:pointer}
.cx-menubt svg{width:22px;height:22px}
@media (max-width:600px){
  .cx-topo{gap:6px;height:52px;padding:0 6px 0 8px}
  .cx-menubt{display:inline-flex}
  .cx-marca{flex:0 0 auto}
  .cx-logo{font-size:18px}
  .cx-slogan{display:none}
  .cx-nav{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cx-nav::-webkit-scrollbar{display:none}
  .cx-item{padding:0 9px;font-size:0;gap:0;flex:0 0 auto}
  .cx-item svg{width:21px;height:21px}
  .cx-dir{flex:0 0 auto;gap:4px}
  .cx-tel{width:38px;height:38px}
  .cx-user{gap:2px;padding:0 4px;height:38px}.cx-user-nome,.cx-seta{display:none}
  .cx-av{width:30px;height:30px}
  .erp-menu{display:none}
  body.cx-menu-aberto .erp-menu{display:block;padding:4px 0;max-height:75vh;overflow:auto;border-bottom:2px solid #c9b8ef}
  .erp-menu .mi-wrap{position:static}
  .erp-menu .mi{display:block;padding:12px 16px;font-size:15px;font-weight:600;border-bottom:1px solid #e1ddd3}
  .erp-menu .mi::after{content:"▸";float:right;opacity:.5}
  .erp-menu .mi-wrap.aberto > .mi{background:#e5cfff}.erp-menu .mi-wrap.aberto > .mi::after{content:"▾"}
  .erp-menu .mi-wrap:hover > .mi-drop,.erp-menu .mi-sub:hover > .mi-drop{display:none}
  .erp-menu .mi-drop{position:static;box-shadow:none;border:0;min-width:0;padding:0 0 4px 12px;background:#faf8f3}
  .erp-menu .mi-wrap.aberto > .mi-drop,.erp-menu .mi-sub.aberto > .mi-drop{display:block}
  .erp-menu .mi-drop a,.erp-menu .mi-drop .mi-inerte,.erp-menu .mi-sub-label{padding:11px 14px;font-size:14.5px;white-space:normal}
  .erp-menu .mi-sub.aberto > .mi-sub-label{background:#efe7fd}.erp-menu .mi-sub.aberto > .mi-sub-label .mi-arrow{transform:rotate(90deg)}
}