/* ===== Aleusa Campo v5 — padrão Aleusa BI (escuro/claro) com personalização ===== */
:root{
  --bg:#0b1220;--panel:#121d33;--panel2:#182640;--line:#22314f;--text:#e8edf8;--muted:#8d9bbd;
  --blue:#3d8bff;--blue2:#1d4ed8;--accent:#7fb0ff;
  --ok:#22c58b;--ok-bg:rgba(34,197,139,.15);--warn:#f5b84b;--warn-bg:rgba(245,184,75,.16);--bad:#ff6578;--bad-bg:rgba(255,101,120,.14);
  --grad:linear-gradient(100deg,var(--blue2),var(--blue));--grad-nav:linear-gradient(100deg,var(--blue2),var(--blue));
  --shadow:0 8px 28px rgba(2,6,16,.38);--r:16px;--pad:18px;--side:272px;--fs:14px;
  --card:var(--panel);--ink:var(--text);--mut:var(--muted);--chip:var(--panel2);
}
[data-bg=graphite]{--bg:#101214;--panel:#181b1f;--panel2:#20242a;--line:#2b3038}
[data-bg=oled]{--bg:#000;--panel:#0b0c0e;--panel2:#13151a;--line:#1e2228}
[data-theme=light]{--bg:#f4f4f4;--panel:#ffffff;--panel2:#eef1f6;--line:#e2e5ea;--text:#141414;--muted:#6f7a8c;--accent:#1d4ed8;
  --ok:#17874f;--ok-bg:rgba(31,157,98,.12);--warn:#a86a00;--warn-bg:rgba(217,142,4,.16);--bad:#d9304f;--bad-bg:rgba(217,48,79,.1);--shadow:0 8px 24px rgba(30,50,90,.1)}
[data-accent=red]{--blue:#ff5a52;--blue2:#d32f2f;--accent:#ff8a84}
[data-accent=emerald]{--blue:#22c58b;--blue2:#0f8a5a;--accent:#6fe0b4}
[data-accent=amber]{--blue:#f5b84b;--blue2:#c27d00;--accent:#ffd27c}
[data-accent=violet]{--blue:#9b7bff;--blue2:#6a3fe0;--accent:#c1adff}
[data-accent=graphite]{--blue:#7d8aa3;--blue2:#4b566b;--accent:#b4bed0}
[data-theme=light][data-accent=red]{--accent:#c62828}[data-theme=light][data-accent=emerald]{--accent:#0f8a5a}[data-theme=light][data-accent=amber]{--accent:#a86a00}
[data-theme=light][data-accent=violet]{--accent:#5b34c9}[data-theme=light][data-accent=graphite]{--accent:#3d4759}
[data-radius=square]{--r:7px}
[data-density=compact]{--pad:12px;--fs:13px}
[data-anim=off] *{transition:none!important;animation:none!important}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:var(--fs)/1.45 'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
button,input,select,textarea{font:inherit;color:inherit}
h2{font-size:18px;margin:4px 0 12px;letter-spacing:-.01em}h3{font-size:15px;margin:0 0 10px;letter-spacing:-.01em}
.muted{color:var(--muted)}.small{font-size:12px}.sp{flex:1}.right{text-align:right}.nowrap{white-space:nowrap}
::selection{background:var(--blue);color:#fff}
.stat,.tbl,.kv{font-variant-numeric:tabular-nums}

/* ---------- topo ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);padding:calc(10px + env(safe-area-inset-top)) 12px 10px;display:flex;align-items:center;gap:8px}
[data-topbar=gradient] .top{background:linear-gradient(100deg,color-mix(in srgb,var(--blue2) 24%,var(--panel)),var(--panel))}
[data-topbar=glass] .top{background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:blur(14px)}
.top .mini{width:36px;height:36px;border-radius:10px;flex:none;background:#fff;object-fit:contain;padding:3px}
.top .ttl{min-width:0}.top .eyebrow{display:none;color:var(--accent);text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:700}
.top h1{font-size:16px;margin:0;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:30px;font-size:12px;font-weight:700;background:var(--ok-bg);border:0;color:var(--ok);cursor:pointer}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor}.off .pill{background:var(--warn-bg);color:var(--warn)}
.iconbtn{background:var(--panel2);border:1px solid var(--line);color:var(--text);width:36px;height:36px;border-radius:10px;font-size:20px;cursor:pointer;display:inline-grid;place-items:center;flex:none}
.iconbtn:hover{border-color:var(--blue)}
main{max-width:920px;margin:0 auto;padding:16px 14px 110px}

/* ---------- cards e indicadores ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);box-shadow:var(--shadow);margin-bottom:12px;min-width:0}
.card>h3:first-child{display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:12px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);box-shadow:var(--shadow)}
.stat:before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:var(--grad)}
.stat b{display:block;font-size:26px;line-height:1.1;color:var(--accent);font-weight:800;letter-spacing:-.5px;margin-top:6px}
.stat span{font-size:12px;color:var(--muted)}.stat small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.stat.ok b{color:var(--ok)}.stat.bad b{color:var(--bad)}
.cols{display:grid;gap:14px}.cols>.card{margin:0}
.tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;background:var(--panel2);color:var(--accent)}
.chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;background:var(--panel2);color:var(--accent)}
.chip.ok,.tag.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn,.tag.warn{background:var(--warn-bg);color:var(--warn)}.chip.bad,.tag.bad{background:var(--bad-bg);color:var(--bad)}
.banner{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;margin-bottom:12px;font-weight:600;background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
.banner.bad{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}.banner.info{background:var(--panel2);color:var(--accent);border-color:var(--line)}.banner .btn{padding:7px 12px}

/* ---------- formularios ---------- */
label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:12px 0 5px}
label.inl{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:14px;color:var(--text);font-weight:600;cursor:pointer}
input,select,textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);outline:none;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue);flex:none}
input[type=color]{padding:3px;height:42px;cursor:pointer}
textarea{min-height:84px;resize:vertical}select option{background:var(--panel);color:var(--text)}
.f2{display:grid;gap:0 12px;grid-template-columns:1fr 1fr}.f3{display:grid;gap:0 12px;grid-template-columns:1fr 1fr 1fr}
.pickbtn{width:100%;text-align:left;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-weight:600;min-height:44px;color:var(--text)}
.pickbtn.ph0{color:var(--muted);font-weight:400}
.ta{position:relative}.ta textarea{padding-right:46px}
.mic{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;border:0;background:var(--panel2);color:var(--accent);cursor:pointer;display:grid;place-items:center}
.mic.on{background:var(--bad);color:#fff;animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,101,120,.25)}}

/* ---------- botoes ---------- */
.btn{border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer;background:var(--grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none}
.btn.sec{background:var(--panel2);color:var(--accent);border:1px solid var(--line)}.btn.ok{background:linear-gradient(100deg,#0f8a5a,#22c58b)}
.btn.bad{background:linear-gradient(100deg,#c42a43,#ff6578)}.btn.wa{background:linear-gradient(100deg,#128c4a,#25d366)}.btn.sm{padding:7px 12px;font-size:12px}
.btn.block{width:100%}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:hover:not(:disabled){filter:brightness(1.08)}
.row{display:flex;gap:8px;align-items:center}.row.wrap{flex-wrap:wrap}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:76px;white-space:nowrap;padding:10px 8px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-weight:700;cursor:pointer;color:var(--text)}
.seg button.on{background:var(--grad);color:#fff;border-color:transparent}.seg button.on.okc{background:#1aa974}.seg button.on.badc{background:#e5484d}.seg button.on.nac{background:#6b7a93}
.swatches{display:flex;gap:10px;flex-wrap:wrap}.sw{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer;outline:1px solid var(--line)}.sw.on{border-color:var(--text)}
.switch{position:relative;width:42px;height:24px;flex:none}.switch input{opacity:0;width:0;height:0;position:absolute}
.switch i{position:absolute;inset:0;border-radius:24px;background:var(--panel2);border:1px solid var(--line);transition:.2s}
.switch i:before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:.2s}
.switch input:checked+i{background:var(--blue)}.switch input:checked+i:before{background:#fff;transform:translateX(18px)}
.tgrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}.tgrow:last-child{border:0}.tgrow>span:first-child{flex:1;font-weight:600}

/* ---------- listas / tabelas ---------- */
.item{display:flex;gap:10px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:8px;cursor:pointer;transition:.15s}
.item:hover{border-color:var(--blue)}.item .t{font-weight:700}.item .m{font-size:12px;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:28px 10px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;font-size:14px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600;word-break:break-word}
.tblw{padding:0;overflow:auto}.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--panel)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.tbl tbody tr.cl{cursor:pointer}.tbl tbody tr:hover{background:var(--panel2)}.tbl tr:last-child td{border-bottom:0}

/* ---------- graficos ---------- */
.bar{height:12px;border-radius:7px;background:var(--panel2);overflow:hidden}.bar i{display:block;height:100%;border-radius:7px;background:var(--grad)}
.bars .r{margin:11px 0}.bars .r .l{display:flex;gap:8px;font-size:13px}.bars .r .l span{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart{width:100%;height:auto;display:block}.chart text{fill:var(--muted);font-size:11px}
.legend{display:flex;flex-direction:column;gap:7px;font-size:13px}.legend div{display:flex;align-items:center;gap:8px}.legend i{width:10px;height:10px;border-radius:3px;flex:none}.legend b{margin-left:auto}
.donutwrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.donutwrap svg{width:150px;height:150px;flex:none}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0}

/* ---------- navegacao ---------- */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--panel);border-top:1px solid var(--line);display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabs .brand,.tabs .desk,.tabs .sidefoot,.tabs .sep{display:none}
.tabs button{flex:1;border:0;background:none;padding:4px 2px;font-size:11px;color:var(--muted);font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs button b{display:flex;justify-content:center;font-weight:400;padding:4px 16px;border-radius:12px}
.tabs button.on{color:var(--text)}.tabs button.on b{background:var(--grad-nav);color:#fff}.tabs .dsk{display:none}
.fab{position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:21;width:58px;height:58px;border-radius:50%;border:0;font-size:28px;color:#fff;background:var(--grad);box-shadow:0 8px 24px color-mix(in srgb,var(--blue) 45%,transparent);cursor:pointer}
.logo{background:#fff;border-radius:10px;padding:14px 10px;width:100%;text-align:center}
.logo img{display:block;width:100%;max-width:235px;height:84px;object-fit:contain;margin:auto}
.logo-fallback{font-size:26px;color:#bf2638;font-weight:900;letter-spacing:1px;display:none;padding:14px 0 4px}.logo-sub{color:#8290a3;letter-spacing:2px;font-size:10px;margin-top:4px}
.sheet .item{margin-bottom:6px}

/* ---------- assistente de relatorio ---------- */
.steps{display:flex;gap:6px;margin-bottom:12px}.steps i{flex:1;height:6px;border-radius:9px;background:var(--panel2)}.steps i.on{background:var(--grad)}
.stepnames{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:-6px 2px 12px}.stepnames b{color:var(--text)}
.nav{position:sticky;bottom:0;display:flex;gap:10px;margin-top:14px;padding:10px 0;background:linear-gradient(transparent,var(--bg) 35%);z-index:5}.nav .btn{flex:1}
.chk{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.chk>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px var(--pad);font-weight:800;letter-spacing:.02em;font-size:13px;text-transform:uppercase;background:linear-gradient(100deg,color-mix(in srgb,var(--blue2) 22%,var(--panel)),var(--panel))}
.chk>summary::-webkit-details-marker{display:none}.chk>summary .cnt{margin-left:auto;font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600}
.chk>summary:after{content:'▾';color:var(--muted);transition:.2s}.chk[open]>summary:after{transform:rotate(180deg)}
.ci{padding:13px var(--pad);border-top:1px solid var(--line)}.ci.nok{background:var(--bad-bg)}
.ci .nm{font-weight:650;margin-bottom:8px;display:flex;gap:8px;align-items:flex-start}.ci .req{color:var(--bad)}
.ci .tools{display:flex;gap:8px;margin-top:8px;align-items:center}.ci .tools input{flex:1}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.thumb{position:relative;width:70px;height:70px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}.thumb button{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:12px;cursor:pointer}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ph{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.ph input{border:0;border-top:1px solid var(--line);border-radius:0;padding:7px 8px;font-size:12px}
.ph .x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff}
.ph .c{position:absolute;left:6px;top:6px;background:rgba(18,26,51,.88);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px}
canvas.sig{width:100%;height:150px;background:#fff;border:2px dashed var(--line);border-radius:14px;touch-action:none;display:block}
.progress{height:8px;border-radius:6px;background:var(--panel2);overflow:hidden;margin:6px 0}.progress i{display:block;height:100%;background:var(--grad);transition:width .3s}
.pecarow{display:flex;gap:8px;align-items:center;margin-bottom:8px}

/* ---------- login ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px;position:relative;background:radial-gradient(900px 500px at 20% -10%,color-mix(in srgb,var(--blue) 24%,transparent),transparent),radial-gradient(800px 500px at 100% 110%,color-mix(in srgb,var(--blue2) 24%,transparent),transparent),var(--bg)}
.login .card{width:100%;max-width:390px;text-align:center;padding:24px}.login .logo{margin-bottom:12px}.login .tg{position:absolute;top:16px;right:16px}
.eyebrow2{color:var(--accent);text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:700;margin-top:4px}

/* ---------- avisos / modal ---------- */
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:11px 16px;border-radius:12px;z-index:99;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;font-weight:600;box-shadow:var(--shadow)}
#toast.show{opacity:1}
#modal{position:fixed;inset:0;background:rgba(2,6,16,.66);z-index:50;display:grid;place-items:center;padding:16px;overflow:auto}#modal[hidden]{display:none}
#modal .card{width:100%;max-width:460px;margin:auto;max-height:92dvh;overflow:auto}#modal .card.wide{max-width:900px}
.modal-actions{display:flex;gap:8px;margin-top:14px;position:sticky;bottom:-18px;background:var(--panel);padding:10px 0 2px}
.ic{vertical-align:-3px;flex:none}
.edsec{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--bg)}
.editem{display:grid;grid-template-columns:1fr 175px 110px auto;gap:6px;margin-bottom:6px;align-items:center}

/* ===== Computador / Windows: menu lateral e tela cheia ===== */
@media(min-width:1000px){
  #app{padding-left:var(--side)}#app[data-view=login],#app[data-view=wizard]{padding-left:0}
  .tabs{top:0;bottom:0;left:0;right:auto;width:var(--side);flex-direction:column;justify-content:flex-start;gap:3px;padding:22px 16px;border-top:0;border-right:1px solid var(--line);overflow:auto}
  .tabs .brand{display:block;margin-bottom:20px}.tabs .desk{display:flex}.tabs .sep{display:block;height:1px;background:var(--line);margin:8px 4px}.tabs .mob{display:none}.tabs .dsk{display:flex}
  .tabs .sidefoot{display:block;margin-top:auto;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:12px}
  .tabs button{flex:none;flex-direction:row;align-items:center;gap:12px;text-align:left;padding:12px 13px;border-radius:10px;font-size:14px;color:var(--muted)}
  .tabs button b{padding:0;background:none!important;color:inherit!important}.tabs button:hover:not(.on){background:var(--panel2)}
  .tabs button.on{background:var(--grad-nav);color:#fff}.tabs button.on b{color:#fff!important}
  .top{padding:24px clamp(20px,2.4vw,40px) 16px;border:0;position:static;background:transparent}
  [data-topbar=gradient] .top{background:linear-gradient(100deg,color-mix(in srgb,var(--blue2) 30%,transparent),transparent 70%)}
  .top .mini{display:none}.top .eyebrow{display:block}.top h1{font-size:28px;margin:5px 0 2px}.top .sub{font-size:13px}
  main{max-width:none;padding:6px clamp(20px,2.4vw,40px) 50px}
  #app[data-view=wizard] main,#app[data-view=wizard] .top{max-width:1180px;margin-left:auto;margin-right:auto}
  #app[data-view=detail] main,#app[data-view=detail] .top{max-width:980px;margin-left:auto;margin-right:auto}
  .cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}.cols .span2{grid-column:span 2}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
  .wiz2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.wiz2>.card{margin:0}
  .stat b{font-size:30px}.fab{bottom:28px;right:28px}.card{padding:20px}#toast{bottom:30px}
}
@media(min-width:1700px){.cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))}.kpis{grid-template-columns:repeat(6,1fr)}}
@media(max-width:700px){.f2,.f3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}.editem{grid-template-columns:1fr 1fr}.tbl td,.tbl th{padding:9px 8px}}
@media print{.tabs,.top,.fab{display:none!important}#app{padding:0!important}}

.hide-sm{display:none}
@media(min-width:1000px){.hide-sm{display:flex}.top .logo-fallback{display:none!important}}