:root{
  --bg:#f6f7fb; --card:#fff; --text:#1e2330; --muted:#6b7280; --line:#e8eaf1;
  --brand:#4f46e5; --brand-soft:#eef0ff; --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.05);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1220;--card:#181c2e;--text:#e8eaf3;--muted:#9aa3b8;--line:#262b42;--brand:#8b85ff;--brand-soft:#242a52;--shadow:none}
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--brand);text-decoration:none}
.layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
/* Cores por módulo: fundo do menu (cinza escuro com um tom do módulo) e cor de destaque.
   Para mudar uma cor, altere só os valores abaixo. */
body{--accent:#8b85ff}
body[data-mod=comercial]{--accent:#4da3ff;--brand:#2f7de1;--brand-soft:color-mix(in srgb,#2f7de1 14%,var(--card))}
body[data-mod=suprimentos]{--accent:#4ade80;--brand:#1f9d55;--brand-soft:color-mix(in srgb,#1f9d55 14%,var(--card))}
body[data-mod=financeiro]{--accent:#c58bff;--brand:#8e44d6;--brand-soft:color-mix(in srgb,#8e44d6 14%,var(--card))}
body[data-mod=administracao]{--accent:#cbd5e1;--brand:#556070;--brand-soft:color-mix(in srgb,#556070 14%,var(--card))}
.side{background:#2b2e36;color:#fff;padding:20px 14px;position:sticky;top:0;height:100vh;overflow:auto;transition:background .2s}
.logo{background:#fff;border-radius:12px;padding:10px 14px;margin:0 0 16px}
.logo img{display:block;width:100%;max-width:190px;height:auto;margin:0 auto}
.side h4{margin:18px 10px 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-left:3px solid var(--accent);padding-left:8px}
.side a{display:block;padding:8px 12px;border-radius:10px;color:#fff}
.side a:hover{background:rgba(255,255,255,.12)}
.side a.on{background:rgba(255,255,255,.16);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}

/* Menu: cada módulo tem sua cor fixa (fundo do bloco + destaque), em qualquer tela. */
.grp{border-radius:12px;padding:2px 6px 8px;margin:10px 0;background:var(--g-bg,transparent)}
.grp h4{margin-top:10px;border-left-color:var(--g-accent,#fff)}
.grp a.on{box-shadow:inset 3px 0 0 var(--g-accent,#fff)}
.g-comercial{--g-bg:#1f3347;--g-accent:#4da3ff}
.g-suprimentos{--g-bg:#1f3a2e;--g-accent:#4ade80}
.g-financeiro{--g-bg:#37284a;--g-accent:#c58bff}
.g-fiscal{--g-bg:#4a3a1f;--g-accent:#fbbf24}
.g-controladoria{--g-bg:#2c2f5a;--g-accent:#818cf8}
.g-rh{--g-bg:#4a2a3a;--g-accent:#fb7185}
.g-servicos{--g-bg:#1f4440;--g-accent:#2dd4bf}
.g-utilidades{--g-bg:#3a3d44;--g-accent:#cbd5e1}
.g-administracao{--g-bg:#3a3a3a;--g-accent:#cbd5e1}
.tag{font-size:11px;color:#fff;opacity:.7;margin-left:6px}
.locked{color:#fff;opacity:.6;padding:8px 12px;font-size:14px}
.main{min-width:0}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;gap:12px}
.top .who{color:var(--muted);font-size:14px;display:flex;gap:14px;align-items:center}
.burger{display:none;background:none;border:0;font-size:24px;color:var(--text);cursor:pointer}
.content{padding:4px 28px 40px;max-width:1200px}
h1{font-size:24px;margin:6px 0 18px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);padding:20px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:18px}
.kpi small{color:var(--muted);display:block}
.kpi b{font-size:26px}
.bar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.btn{display:inline-block;border:0;border-radius:10px;padding:9px 16px;background:var(--brand);color:#fff;font:inherit;cursor:pointer}
.btn.ghost{background:var(--brand-soft);color:var(--brand)}
.btn.danger{background:var(--bad)}
.btn.sm{padding:5px 10px;font-size:13px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto}
.card.scroll{padding:8px 12px}
.act{display:flex;gap:6px;justify-content:flex-end}
.act form{margin:0}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}
input[type=checkbox]{width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);border-color:transparent}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.errorlist{color:var(--bad);list-style:none;padding:0;margin:4px 0;font-size:13px}
.msgs{padding:0 28px}
.msg{padding:11px 14px;border-radius:10px;margin-bottom:8px;background:var(--brand-soft)}
.msg.error{background:#fee2e2;color:#991b1b}.msg.success{background:#dcfce7;color:#166534}
.center{min-height:100vh;display:grid;place-items:center;padding:16px}
.center .card{width:100%;max-width:400px}
.search{flex:1;min-width:180px}
.pager{display:flex;gap:10px;justify-content:center;margin-top:14px}
.muted{color:var(--muted)}
@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .side{position:fixed;inset:0 25% 0 0;z-index:20;transform:translateX(-100%);transition:transform .2s;height:100%}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .burger{display:block}
  .top,.content,.msgs{padding-left:16px;padding-right:16px}
}

/* listas de checkbox (perfis) e matriz de direitos (usuários) */
.field div div label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);margin:3px 0}
.mod-t{margin:16px 0 4px}
table.direitos td{padding:6px 8px;white-space:normal}
table.direitos .opt{white-space:nowrap}
table.direitos .opt label{display:inline-flex;align-items:center;gap:4px;margin-left:12px;font-size:14px;color:var(--text)}
/* gráfico de barras do Início */
.bars{display:flex;gap:12px;height:190px;margin-top:8px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.bar-area{flex:1;width:100%;display:flex;align-items:flex-end}
.bar-fill{width:100%;background:var(--brand);border-radius:8px 8px 0 0}
.bar-v{font-size:12px;color:var(--muted);margin-bottom:4px;white-space:nowrap}
.bar-l{font-size:12px;color:var(--muted);margin-top:6px}

/* REGRA DO SISTEMA: tudo em MAIÚSCULAS (textos, menus, botões, tabelas e o que for digitado). Só a senha fica como digitada. */
body,input,select,textarea,button,option{text-transform:uppercase}
input[type=password]{text-transform:none}
.g-infraestrutura{--g-bg:#4a1f1f;--g-accent:#f87171}
body[data-mod=infraestrutura]{--brand:#dc2626;--brand-soft:#fee2e2}

.pill{font-size:11px;padding:3px 9px;border-radius:99px;font-weight:600;white-space:nowrap}
.pill.ok{background:#dcfce7;color:#166534}.pill.warn{background:#fef3c7;color:#92400e}.pill.bad{background:#fee2e2;color:#991b1b}
.suporte-bar{background:#dc2626;color:#fff;padding:9px 28px;font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.suporte-bar a{color:#fff;font-weight:700;text-decoration:underline}
.cliente td{white-space:normal}
.badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--line);color:var(--text);vertical-align:middle;margin-left:6px;text-transform:none}
table.livre td{white-space:normal}
.chave{word-break:break-all}

/* ===== Menu lateral reordenável ===== */
.side{display:flex;flex-direction:column}
.side .logo{order:-3}
.side>a{order:-2}
.arrasta{cursor:grab;touch-action:none;user-select:none}
.arrasta::after{content:"\22EE\22EE";float:right;opacity:.45;letter-spacing:-2px;font-size:13px}
.grp.arrastando{opacity:.85;box-shadow:0 8px 24px rgba(0,0,0,.45);position:relative;z-index:5;outline:2px dashed var(--g-accent,#fff)}
.grp.arrastando .arrasta{cursor:grabbing}
body.arrastando-menu{cursor:grabbing;user-select:none}

/* ===== Seletor de tema ===== */
.tema-wrap{position:relative}
.tema-pop{position:absolute;right:0;top:36px;z-index:30;width:260px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.25);padding:14px;display:flex;flex-direction:column;gap:10px}
.tema-pop[hidden]{display:none}
.tema-lista{display:grid;gap:4px}
.tema-op{display:flex;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:10px;padding:6px 8px;color:var(--text);font:inherit;cursor:pointer;text-align:left}
.tema-op:hover{background:var(--brand-soft)}
.tema-op.on{border-color:var(--brand);background:var(--brand-soft);font-weight:600}
.tema-op .amostra{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);flex:none}

/* ===== Temas =====
   Cada tema troca as variáveis de cor. "padrao" mantém a cor própria de cada módulo e segue o claro/escuro do sistema.
   Nos demais, a cor de destaque das telas é única, o fundo do menu ganha um tom do tema e cada módulo mantém a sua cor no menu. */
html[data-tema=claro]{--bg:#f6f7fb;--card:#fff;--text:#1e2330;--muted:#6b7280;--line:#e8eaf1;--shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.05)}
html[data-tema=escuro],html[data-tema=grafite]{--shadow:none;--muted:#9aa3b8}
html[data-tema=escuro]{--bg:#0f1220;--card:#181c2e;--text:#e8eaf3;--line:#262b42}
html[data-tema=grafite]{--bg:#1c1f26;--card:#262a33;--text:#e6e8ee;--line:#363b47}
html[data-tema=oceano]{--bg:#eef6fb;--line:#d7e7f2}
html[data-tema=floresta]{--bg:#eff7f1;--line:#d6e8dc}
html[data-tema=violeta]{--bg:#f6f1fb;--line:#e6daf3}
html[data-tema=rosa]{--bg:#fcf1f5;--line:#f3d9e3}
html[data-tema=laranja]{--bg:#fdf5ee;--line:#f4e0cc}
/* cor de destaque única (sobrepõe a cor por módulo) */
html[data-tema=claro] body[data-mod],html[data-tema=claro] body{--brand:#4f46e5;--brand-soft:color-mix(in srgb,#4f46e5 12%,var(--card));--accent:#8b85ff}
html[data-tema=escuro] body[data-mod],html[data-tema=escuro] body{--brand:#8b85ff;--brand-soft:color-mix(in srgb,#8b85ff 18%,var(--card));--accent:#8b85ff}
html[data-tema=oceano] body[data-mod],html[data-tema=oceano] body{--brand:#0284c7;--brand-soft:color-mix(in srgb,#0284c7 13%,var(--card));--accent:#38bdf8}
html[data-tema=floresta] body[data-mod],html[data-tema=floresta] body{--brand:#15803d;--brand-soft:color-mix(in srgb,#15803d 13%,var(--card));--accent:#4ade80}
html[data-tema=violeta] body[data-mod],html[data-tema=violeta] body{--brand:#7e22ce;--brand-soft:color-mix(in srgb,#7e22ce 12%,var(--card));--accent:#c084fc}
html[data-tema=rosa] body[data-mod],html[data-tema=rosa] body{--brand:#db2777;--brand-soft:color-mix(in srgb,#db2777 12%,var(--card));--accent:#f472b6}
html[data-tema=laranja] body[data-mod],html[data-tema=laranja] body{--brand:#ea580c;--brand-soft:color-mix(in srgb,#ea580c 12%,var(--card));--accent:#fb923c}
html[data-tema=grafite] body[data-mod],html[data-tema=grafite] body{--brand:#94a3b8;--brand-soft:color-mix(in srgb,#94a3b8 18%,var(--card));--accent:#cbd5e1}
html[data-tema=grafite] .btn,html[data-tema=escuro] .btn{color:#10131c}
/* menu: fundo e blocos neutros com tom do tema */
html[data-tema=claro] .side{background:#2b2e36}
html[data-tema=escuro] .side{background:#0a0c16}
html[data-tema=oceano] .side{background:#0b3a56}
html[data-tema=floresta] .side{background:#12402a}
html[data-tema=violeta] .side{background:#3b1a5a}
html[data-tema=rosa] .side{background:#5a1a3a}
html[data-tema=laranja] .side{background:#5a2a10}
html[data-tema=grafite] .side{background:#12141a}
/* os blocos do menu mantêm a cor própria de cada módulo em qualquer tema */