:root{--bg:#fafafa;--card:#fff;--fg:#1c1c1e;--muted:#66666d;--line:#e3e3e8;--accent:#1a5fb4;--accent-fg:#fff;--ok:#1b6e3c;--warn:#9a5b00;--bad:#b3261e;--tint:#f1f3f8}
@media (prefers-color-scheme:dark){:root{--bg:#131316;--card:#1b1b1f;--fg:#ececef;--muted:#9a9aa2;--line:#2e2e33;--accent:#8ab4ff;--accent-fg:#101014;--ok:#7fd69b;--warn:#ffc266;--bad:#ff8a80;--tint:#22222a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}code{background:var(--tint);padding:1px 5px;border-radius:4px;font-size:.9em}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--card)}
.brand{font-weight:700;text-decoration:none;color:var(--fg)}.brand span{font-weight:400;color:var(--muted);margin-left:6px}
nav{display:flex;gap:14px;flex:1}nav a{text-decoration:none}
.who{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9em;margin:0}
.envbar{background:var(--warn);color:var(--bg);text-align:center;padding:4px 12px;font-size:.85em;font-weight:600}
main{max-width:1100px;margin:0 auto;padding:20px 16px 48px}
h1{font-size:1.5rem;margin:.2em 0 .6em}h2{font-size:1.15rem;margin:1.4em 0 .5em}
.muted{color:var(--muted)}.n{text-align:right;font-variant-numeric:tabular-nums}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin:18px 0}
.narrow{max-width:460px;margin-left:auto;margin-right:auto}.local{border-style:dashed}
.stack{display:flex;flex-direction:column;gap:8px}.row{display:flex;gap:8px;align-items:center;margin:4px 0}
label{font-weight:600;font-size:.9em}
input,select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);min-width:0}
button,.button{font:inherit;font-weight:600;padding:9px 14px;border:0;border-radius:8px;background:var(--accent);color:var(--accent-fg);cursor:pointer;text-decoration:none;display:inline-block}
button.secondary{background:var(--tint);color:var(--fg);border:1px solid var(--line)}
button.link{background:none;color:var(--accent);padding:0;font-weight:400;text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:12px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.stat b{display:block;font-size:1.8rem;font-variant-numeric:tabular-nums}.stat span{color:var(--muted);font-size:.9em}
.stat.ok b,.ok{color:var(--ok)}.stat.warn b,.warn{color:var(--warn)}
.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;background:var(--card);border:1px solid var(--line);border-radius:8px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}th{color:var(--muted);font-weight:600;font-size:.85em;white-space:nowrap}
th.n,td.n{text-align:right}tr:last-child td{border-bottom:0}
.alert{border:1px solid var(--bad);color:var(--bad);border-radius:8px;padding:10px 12px;background:var(--card)}
.okbox{border:1px solid var(--ok);color:var(--ok);border-radius:8px;padding:10px 12px;background:var(--card)}
.chip{display:inline-block;border:1px solid var(--warn);color:var(--warn);border-radius:999px;padding:0 8px;font-size:.78em;margin:1px 0}
.chip.okchip{border-color:var(--ok);color:var(--ok)}
.notes{padding-left:18px}.notes li{margin:6px 0}.notes .error b{color:var(--bad)}.notes .warning b{color:var(--warn)}
@media (max-width:600px){main{padding:14px 12px 40px}.who{width:100%}}

.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 14px}
.pager a{padding:2px 9px;border:1px solid var(--line);border-radius:6px;text-decoration:none;background:var(--card)}
.pager a.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.pager a.pend:not(.on){border-color:var(--warn);color:var(--warn)}.pager .sep{margin-left:14px}
.review{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.review{grid-template-columns:1fr}.sheet{position:static}}
.sheet{position:sticky;top:8px;max-height:calc(100vh - 16px);overflow-y:auto}
.zoombar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 8px;font-size:.9em}
.zoombar label{font-weight:400}.zoombar button{padding:2px 10px}.zoombar output{min-width:2.6em;text-align:center;font-variant-numeric:tabular-nums}
.frame{position:relative;display:block;max-width:100%;overflow:hidden;line-height:0;border:1px solid var(--line);background:#fff;cursor:zoom-in}
.frame.zooming{cursor:crosshair}
.zoomer{position:relative;display:block}
.zoomer img{display:block;width:100%;height:auto}
.frame.zooming .zoomer{position:absolute;display:block}
.frame.zooming .zoomer img{width:100%;max-width:none;max-height:none;height:auto}
.frame.loading{cursor:progress}
kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;font:inherit;font-size:.85em;background:var(--tint)}
.overlay{position:absolute;inset:0;width:100%;height:100%}
.mark{fill:transparent;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:all}
.mark.pend{stroke:var(--warn)}.mark.ok{stroke:var(--ok);stroke-opacity:.55}.mark:hover{fill:rgba(26,95,180,.18)}
.legend{font-size:.85em}.swatch{display:inline-block;width:12px;height:12px;border:2px solid;border-radius:2px;vertical-align:-1px;margin:0 4px 0 10px}
.swatch.pend{border-color:var(--warn)}.swatch.ok{border-color:var(--ok)}
.line{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:8px;padding:10px 12px;margin:10px 0}
.line.pend{border-left-color:var(--warn)}.line:target{box-shadow:0 0 0 3px var(--accent)}
.line header{display:flex;justify-content:space-between;gap:12px}.line .desc{font-weight:600}.line .amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.line .meta{margin:4px 0}.line .last{font-size:.85em;margin:4px 0}
.line summary{cursor:pointer;color:var(--accent);margin-top:6px}.line details form{margin-top:8px}
.wrap{flex-wrap:wrap}.okbox{border:1px solid var(--ok);color:var(--ok);border-radius:8px;padding:8px 12px;background:var(--card)}
.nowrap{white-space:nowrap}a.secondary-link{background:var(--tint);color:var(--fg);border:1px solid var(--line)}
.line.saved{box-shadow:0 0 0 2px var(--ok)}.hint{font-size:.85em;margin:2px 0 0}

/* "+" entre as linhas: aparece ao passar o mouse (ou ao focar) e abre o formulário já na posição certa */
details.slot { margin: 0; }
details.slot > summary { list-style: none; cursor: pointer; height: 14px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; }
details.slot > summary::-webkit-details-marker { display: none; }
details.slot > summary span { line-height: 1; padding: 0 .55rem; border-radius: 999px; border: 1px dashed currentColor; font-size: .8rem; }
details.slot:hover > summary, details.slot:focus-within > summary, details.slot[open] > summary { opacity: 1; }
@media (hover: none) { details.slot > summary { opacity: .5; } }
details.slot[open] > form { margin: .25rem 0 .75rem; }

/* Pendência de investigação: sinalização feita por pessoa. Cor própria e forte, diferente do âmbar de "revisão obrigatória". */
.alarm { display: block; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 8px; border: 2px solid #b00020; background: #fde8ec; color: #6b0014; font-size: 1.05rem; text-decoration: none; }
.alarm b { font-size: 1.4rem; margin-right: .35rem; }
.stat.alarmstat { border-color: #b00020; background: #fde8ec; color: #6b0014; }
td.alarmcell { background: #fde8ec; color: #6b0014; font-weight: 700; }
.flagbox { margin: .5rem 0; padding: .6rem .8rem; border-left: 6px solid #b00020; background: #fde8ec; color: #6b0014; border-radius: 4px; }
.hadflag { margin: .4rem 0; padding: .3rem .6rem; border-left: 4px solid #8a8a8a; background: rgba(128,128,128,.12); font-size: .9rem; }
.line:has(.flagbox) { border-color: #b00020; box-shadow: 0 0 0 2px #b00020; }
button.flagbtn { background: #b00020; color: #fff; }
nav a.flagnav { font-weight: 600; }
tr.flagrow td { background: #fff5f6; }
@media (prefers-color-scheme: dark) {
  .alarm, .stat.alarmstat, td.alarmcell, .flagbox { background: #4a0f1a; color: #ffd9df; border-color: #ff5c77; }
  tr.flagrow td { background: #2a1015; }
  .line:has(.flagbox) { border-color: #ff5c77; box-shadow: 0 0 0 2px #ff5c77; }
  button.flagbtn { background: #ff5c77; color: #1a0006; }
}