:root{
  --pri:#087C94; --pri-esc:#065f72; --fundo:#f3f6f8; --cartao:#fff; --texto:#13232c;
  --suave:#5b6b74; --linha:#dde5ea; --erro:#c0392b; --aviso:#b9770e; --ok:#1e8449;
}
@media (prefers-color-scheme:dark){
  :root{ --fundo:#0d1a21; --cartao:#14262f; --texto:#e6eef2; --suave:#93a6b0; --linha:#25404c; --pri:#15a3bd; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fundo);color:var(--texto);
  font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  background:var(--pri-esc);padding:env(safe-area-inset-top) 8px 0;height:calc(54px + env(safe-area-inset-top))}
.topo .logo{height:26px}
.icone{background:none;border:0;color:#fff;font-size:28px;width:44px;height:44px;line-height:1}
.icone[hidden]{display:block;visibility:hidden}
main{max-width:640px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
h1{font-size:1.25rem;margin:.2rem 0 .6rem}
h2{font-size:1rem;margin:1.2rem 0 .5rem;color:var(--suave);text-transform:uppercase;letter-spacing:.04em}
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:14px;padding:14px;margin-bottom:12px}
.btn{display:block;width:100%;padding:14px;border:0;border-radius:12px;background:var(--pri);color:#fff;
  font-size:1.05rem;font-weight:600;margin:8px 0}
.btn.sec{background:var(--cartao);color:var(--texto);border:1px solid var(--linha)}
.btn:disabled{opacity:.6}
input[type=text],input[type=password],input[type=search]{width:100%;padding:12px;font-size:1rem;
  border:1px solid var(--linha);border-radius:10px;background:var(--cartao);color:var(--texto)}
.linha{display:flex;gap:8px}
.linha .btn{width:auto;margin:0;padding:12px 16px}
.item{display:block;padding:12px 14px;border-bottom:1px solid var(--linha);color:inherit;text-decoration:none}
.item:last-child{border-bottom:0}
.item b{display:block}
.suave{color:var(--suave);font-size:.9rem}
.campos{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.campos dt{color:var(--suave)} .campos dd{margin:0;word-break:break-word}
.etiqueta{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.8rem;font-weight:600;
  background:var(--linha);color:var(--texto)}
.etiqueta.ok{background:#d4efdf;color:#145a32} .etiqueta.aviso{background:#fdebd0;color:#7e5109}
.etiqueta.erro{background:#f5b7b1;color:#78281f}
.manut{border-top:1px solid var(--linha);padding:10px 0}
.manut:first-child{border-top:0}
.manut summary{cursor:pointer;list-style:none}
.manut pre{white-space:pre-wrap;font:inherit;margin:.5rem 0 0}
.aviso{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));background:#222;
  color:#fff;padding:12px 14px;border-radius:10px;z-index:20;text-align:center}
.camera{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:3/4}
.camera video{width:100%;height:100%;object-fit:cover}
.camera .mira{position:absolute;inset:18% 14%;border:3px solid #fff8;border-radius:18px;pointer-events:none}
.erro{color:var(--erro)}

label{display:block;margin:0 0 12px;color:var(--suave);font-size:.9rem}
label input,label select,label textarea{display:block;width:100%;margin-top:4px;padding:12px;font:inherit;color:var(--texto);
  background:var(--fundo);border:1px solid var(--linha);border-radius:10px}
label.check{display:flex;align-items:center;gap:8px;color:var(--texto)}
label.check input{width:auto;margin:0}

.seletor{width:100%;margin-top:8px;padding:12px;font:inherit;color:var(--texto);background:var(--cartao);
  border:1px solid var(--linha);border-radius:10px}
.datas{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:.88rem;color:var(--suave)}
.datas b{display:inline;color:var(--texto)}
.datas .atraso, .datas .atraso b{color:var(--erro)}

.filtro-atraso{margin:10px 2px 0}
.filtro-atraso input{width:20px;height:20px}