:root{
  color-scheme:light dark;
  --bg:#eef0f6; --surface:#ffffff; --surface-2:#f6f7fb; --surface-3:#ebeff7;
  --ink:#10142c; --ink-2:#4a5270; --muted:#7b8299;
  --line:#dde1ec; --line-2:#c5cbdc;
  --accent:#142776; --accent-ink:#ffffff; --accent-soft:#e6ebf7; --accent-line:#b9c4e4;
  --good:#2f8a23; --good-soft:#e5f3e1;
  --warn:#8a6a00; --warn-soft:#fdf3d2;
  --crit:#b32d2d; --crit-soft:#f9e2e2;
  --marca-ciano:#41bdba; --marca-verde:#69c05a; --marca-amarelo:#fbda23;
  --shadow:0 1px 2px rgba(16,20,44,.06), 0 8px 24px -12px rgba(16,20,44,.22);
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0e1c; --surface:#131a2e; --surface-2:#1a2239; --surface-3:#222b45;
    --ink:#eef1f8; --ink-2:#b3bbd2; --muted:#858da8;
    --line:#28314c; --line-2:#3a4566;
    --accent:#41bdba; --accent-ink:#05232a; --accent-soft:#12333c; --accent-line:#1e4c55;
    --good:#69c05a; --good-soft:#16301a;
    --warn:#e9c33e; --warn-soft:#332a10;
    --crit:#f07575; --crit-soft:#361a1a;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Archivo","IBM Plex Sans",system-ui,sans-serif; font-weight:700; margin:0; text-wrap:balance; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums}
.spacer{flex:1 1 auto}
.hint{font-size:12px; color:var(--muted)}

/* ---------- logos (claro/escuro) ---------- */
.logo{height:32px; width:auto; display:block; flex:none}
.logo-branca{display:none}
@media (prefers-color-scheme: dark){ .logo-cor{display:none} .logo-branca{display:block} }

/* ---------- topo ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar::after{content:""; display:block; height:3px; background:linear-gradient(90deg,var(--marca-ciano) 0%,var(--marca-verde) 48%,var(--marca-amarelo) 100%)}
.topbar-in{max-width:1240px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-sep{width:1px; align-self:stretch; background:var(--line); margin:2px 0}
.brand-name{font-family:"Archivo",sans-serif; font-weight:700; font-size:16px; letter-spacing:-.015em; white-space:nowrap}
.brand-sub{font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.conn{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); letter-spacing:.03em; white-space:nowrap}
.dot{width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none}
.dot.ok{background:var(--good)} .dot.off{background:var(--warn)}
.usuario{font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.usuario b{color:var(--ink); font-weight:600}
nav.tabs{max-width:1240px; margin:0 auto; padding:0 16px 8px; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
.tab{appearance:none; border:0; background:transparent; color:var(--ink-2); padding:7px 13px; border-radius:7px; cursor:pointer; white-space:nowrap; font-weight:500; font-size:13.5px}
.tab:hover{background:var(--surface-3); color:var(--ink)}
.tab[aria-selected="true"]{background:var(--accent); color:var(--accent-ink); font-weight:600}
main{max-width:1240px; margin:0 auto; padding:18px 16px 96px}
.view{display:flex; flex-direction:column; gap:16px}

/* ---------- botões ---------- */
.btn{
  appearance:none; border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  padding:7px 13px; border-radius:8px; cursor:pointer; font-weight:500; font-size:13.5px;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:background .12s,border-color .12s;
}
.btn:hover:not(:disabled){background:var(--surface-3)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn.primary:hover:not(:disabled){filter:brightness(1.08); background:var(--accent)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn.ghost:hover:not(:disabled){background:var(--surface-3); color:var(--ink)}
.btn.danger{color:var(--crit); border-color:color-mix(in srgb, var(--crit) 35%, transparent)}
.btn.danger:hover:not(:disabled){background:var(--crit-soft)}
.btn.danger.solid{background:var(--crit); border-color:var(--crit); color:#fff}
.btn.danger.solid:hover:not(:disabled){background:var(--crit); filter:brightness(1.08)}
.btn.sm{padding:4px 9px; font-size:12.5px; border-radius:6px}
.btn.block{width:100%; justify-content:center; padding:10px 14px}

/* ---------- superfícies ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.panel-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--line)}
.panel-title{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px}
.eyebrow{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:600}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.stat{background:var(--surface); padding:13px 15px; display:flex; flex-direction:column; gap:3px}
.stat-label{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600}
.stat-value{font-family:"Archivo",sans-serif; font-weight:700; font-size:26px; line-height:1.1; letter-spacing:-.02em}
.stat-note{font-size:12px; color:var(--ink-2)}
.stat.warn .stat-value{color:var(--warn)}

/* ---------- campos ---------- */
.toolbar{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:4px; min-width:0}
.field label{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600}
.field label .req{color:var(--crit)}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  background:var(--surface); border:1px solid var(--line-2); border-radius:8px;
  padding:7px 10px; font-size:13.5px; min-width:0; width:100%;
}
textarea{resize:vertical; min-height:60px}
input:disabled,select:disabled{background:var(--surface-3); color:var(--muted)}
.search{position:relative; flex:1 1 260px}
.search input{padding-left:30px}
.search svg{position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.contador{font-size:11px; color:var(--muted); text-align:right; margin-top:-1px}

/* ---------- tabela ---------- */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px}
thead th{
  position:sticky; top:0; background:var(--surface-2); z-index:1; text-align:left;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600;
  padding:9px 12px; white-space:nowrap; border-bottom:1px solid var(--line);
}
thead th.sortable{cursor:pointer; user-select:none}
thead th.sortable:hover{color:var(--ink)}
thead th .arrow{opacity:.6; font-size:9px; margin-left:3px}
tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clicavel{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tbody tr.baixado td{opacity:.62}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}
td.chk,th.chk{width:34px; padding-right:0}
input[type=checkbox]{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.sub{color:var(--muted); font-size:12px}
.obj-nome{font-weight:600}
.thumb{width:38px; height:38px; border-radius:7px; object-fit:cover; background:var(--surface-3); display:block; border:1px solid var(--line)}
.thumb.vazio{display:grid; place-items:center; color:var(--muted); font-size:15px}
.empty{padding:40px 16px; text-align:center; color:var(--muted)}
.empty strong{display:block; color:var(--ink-2); font-weight:600; margin-bottom:4px}
.pat{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-weight:500; letter-spacing:.02em}

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  background:var(--surface-3); color:var(--ink-2);
}
.chip.ok{background:var(--good-soft); color:var(--good)}
.chip.low{background:var(--warn-soft); color:var(--warn)}
.chip.zero{background:var(--crit-soft); color:var(--crit)}
.chip.off{background:var(--surface-3); color:var(--muted)}

.notice{display:flex; gap:10px; align-items:flex-start; padding:10px 13px; border-radius:10px; background:var(--warn-soft); color:var(--warn); font-size:13px; border:1px solid color-mix(in srgb,var(--warn) 25%, transparent)}
.subtabs{display:flex; gap:4px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.subtab{appearance:none; border:1px solid transparent; background:transparent; color:var(--ink-2); padding:5px 11px; border-radius:7px; cursor:pointer; font-size:13px; font-weight:500}
.subtab[aria-selected="true"]{background:var(--surface-3); color:var(--ink); border-color:var(--line)}
.seg{display:inline-flex; background:var(--surface-3); border-radius:9px; padding:3px; gap:3px}
.seg button{appearance:none; border:0; background:transparent; color:var(--ink-2); cursor:pointer; padding:6px 18px; border-radius:7px; font-weight:600; font-size:13.5px}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.14)}

/* ---------- barra de seleção ---------- */
.selbar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:60;
  display:flex; align-items:center; gap:12px; padding:9px 10px 9px 16px; border-radius:12px;
  background:var(--ink); color:var(--bg); box-shadow:var(--shadow); font-size:13.5px; max-width:calc(100vw - 24px);
}
.selbar b{font-weight:600}
.selbar .btn{border-color:transparent}
.selbar .btn.ghost{color:var(--bg); opacity:.8}
.selbar .btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.14); color:var(--bg)}
.selbar .btn.primary{background:var(--marca-verde); border-color:var(--marca-verde); color:#0a1a0a}

/* ---------- modais ---------- */
.overlay{position:fixed; inset:0; z-index:80; background:rgba(8,14,16,.5); display:flex; align-items:flex-start; justify-content:center; padding:24px 12px; overflow-y:auto; backdrop-filter:blur(2px)}
.overlay.topo{z-index:86}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); width:100%; max-width:640px; margin:auto}
.modal.wide{max-width:900px}
.modal-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.modal-head h2{font-size:16px}
.modal-body{padding:16px; display:flex; flex-direction:column; gap:16px}
.modal-foot{display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--line); flex-wrap:wrap}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row > *{flex:1 1 150px}
.x{appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer; padding:4px 8px; border-radius:6px; font-size:18px; line-height:1}
.x:hover{background:var(--surface-3); color:var(--ink)}
.alertbox{display:flex; gap:9px; padding:10px 12px; border-radius:9px; font-size:13px; align-items:flex-start}
.alertbox.err{background:var(--crit-soft); color:var(--crit)}
.confirma-texto{font-size:13.5px; line-height:1.6; white-space:pre-line; color:var(--ink-2)}

.secao{display:flex; flex-direction:column; gap:10px}
.secao + .secao{padding-top:14px; border-top:1px solid var(--line)}
.secao-titulo{display:flex; align-items:center; gap:8px}
.passo{width:18px; height:18px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:10.5px; font-weight:700; flex:none}
details.mais summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px}
details.mais summary::-webkit-details-marker{display:none}
details.mais summary::after{content:"▾"; color:var(--muted); font-size:11px; margin-left:auto}
details.mais[open] summary::after{content:"▴"}
details.mais .conteudo{display:flex; flex-direction:column; gap:10px; margin-top:12px}

.foto-box{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.foto-prev{width:96px; height:96px; border-radius:10px; background:var(--surface-3); border:1px dashed var(--line-2); display:grid; place-items:center; color:var(--muted); font-size:12px; text-align:center; overflow:hidden; flex:none}
.foto-prev img{width:100%; height:100%; object-fit:cover; display:block}
.foto-acoes{display:flex; flex-direction:column; gap:6px; align-items:flex-start}

/* ---------- detalhe do item ---------- */
.det-grid{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.det-esq{padding:16px; display:flex; flex-direction:column; gap:14px; border-right:1px solid var(--line); background:var(--surface-2); border-radius:0 0 0 14px}
.det-foto{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:var(--surface-3); border:1px solid var(--line); display:grid; place-items:center; color:var(--muted)}
.det-etq{display:flex; flex-direction:column; gap:6px}
.det-etq canvas{width:100%; height:auto; border:1px solid var(--line-2); border-radius:4px; background:#fff; image-rendering:pixelated; display:block}
.det-dir{padding:16px; display:flex; flex-direction:column; gap:16px; min-width:0}
.det-titulo{display:flex; flex-direction:column; gap:4px}
.det-titulo h2{font-size:20px}
dl.ficha{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 18px}
dl.ficha dt{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600; padding-top:2px}
dl.ficha dd{margin:0; font-weight:500; overflow-wrap:anywhere}
.hist{display:flex; flex-direction:column}
.hist-item{display:grid; grid-template-columns:110px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:12.5px}
.hist-item:first-child{border-top:0}
.hist-quando{color:var(--muted)}
.hist-quem{color:var(--muted); font-size:11.5px}

@media (max-width:820px){
  .det-grid{grid-template-columns:1fr}
  .det-esq{border-right:0; border-bottom:1px solid var(--line); border-radius:0}
}
@media (max-width:560px){
  .stat-value{font-size:22px}
  .modal-foot{flex-direction:column-reverse}
  .modal-foot .btn{width:100%; justify-content:center}
  .hist-item{grid-template-columns:1fr; gap:2px}
}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; gap:18px}
.login-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); width:100%; max-width:400px; overflow:hidden}
.login-card::before{content:""; display:block; height:3px; background:linear-gradient(90deg,var(--marca-ciano) 0%,var(--marca-verde) 48%,var(--marca-amarelo) 100%)}
.login-in{padding:22px; display:flex; flex-direction:column; gap:16px}
.login-in .logo{height:38px; align-self:flex-start}
.login-in h1{font-size:19px}
.perfil-desc{font-size:12px; color:var(--muted); margin-top:6px}

/* ---------- toasts ---------- */
#toasts{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(74px + env(safe-area-inset-bottom,0px)); z-index:95; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{background:var(--ink); color:var(--bg); padding:9px 15px; border-radius:9px; font-size:13px; font-weight:500; box-shadow:var(--shadow); animation:up .22s ease-out}
.toast.good{background:var(--good); color:#fff}
.toast.bad{background:var(--crit); color:#fff}
@keyframes up{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---------- celular ---------- */
@media (max-width:720px){
  .hm{display:none}
}
@media (max-width:560px){
  .topbar-in{gap:8px 10px}
  .conn #conn-text{display:none}
  .conn{order:2; margin-left:auto}
  .usuario{order:3}
  #btn-sair{order:4}
  #btn-novo{order:5}
  .toolbar .field{flex:1 1 calc(50% - 8px) !important}
  .toolbar .field select{width:100% !important}
  .toolbar .field.search{flex:1 1 100% !important}
  .panel-head{padding:10px 12px}
}