/* ===== Tema (tokens do estilo Radar: cinza por padrão, um acento, cor só na exceção) ===== */
:root{
  --bg:#f3f5f4;--card:#fff;--card2:#f7f9f8;--text:#1c2423;--muted:#6a7876;--faint:#9aa5a3;--line:#e4e8e7;
  --accent:#1e6a88;--accent-soft:#dbe9ef;--accent-ink:#fff;--bad:#c4553f;--good:#2f7a64;
  --shadow:0 1px 2px rgba(20,32,30,.06),0 10px 28px -14px rgba(20,32,30,.18);
  --input:#fff;--hover:#f1f4f3;--track:#e8ebea;--bar:#b9c2c0;--overlay:rgba(20,32,30,.45);
  --st-neutral-bg:#e8ebea;--st-neutral:#5b6866;--st-warn-bg:#f1e6c8;--st-warn:#735c1b;--st-info-bg:#d9e6f0;--st-info:#285474;
  --st-accent-bg:#dbe9ef;--st-accent:#1e6a88;--st-good-bg:#d4e6df;--st-good:#2d6857;--st-bad-bg:#f2d9d2;--st-bad:#8c3b2b;--st-badx-bg:#f4cdc6;--st-badx:#8a2a1d;
  --banner-bad:#8a2a1d;--banner-warn:#735c1b;
  color-scheme:light}
:root[data-theme="dark"]{
  --bg:#0f1514;--card:#172120;--card2:#1c2827;--text:#e6ecea;--muted:#9aa8a5;--faint:#6f7d7a;--line:#283533;
  --accent:#5fb0d0;--accent-soft:#17323d;--accent-ink:#06222c;--bad:#e5806b;--good:#5cb89c;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.6);
  --input:#101918;--hover:#1f2d2b;--track:#243230;--bar:#4a5a57;--overlay:rgba(0,0,0,.6);
  --st-neutral-bg:#26322f;--st-neutral:#b3bfbc;--st-warn-bg:#3a3318;--st-warn:#e7d28a;--st-info-bg:#1a3144;--st-info:#9cc7e6;
  --st-accent-bg:#17323d;--st-accent:#7cc4e0;--st-good-bg:#173a2f;--st-good:#7fd1b4;--st-bad-bg:#43241d;--st-bad:#f0a290;--st-badx-bg:#521f19;--st-badx:#f5a89a;
  --banner-bad:#7a2a22;--banner-warn:#5e4d17;
  color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:13px/1.4 "Segoe UI",system-ui,Arial,sans-serif;font-variant-numeric:tabular-nums}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:12px;color:var(--muted)}
h1,h2,h3{margin:0}
button{font:inherit;color:inherit}

/* ===== Cabeçalho ===== */
.top{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;flex-wrap:wrap;padding:16px clamp(16px,4vw,40px) 12px;max-width:1700px;margin:auto}
.brand{display:flex;gap:12px;align-items:center;min-width:0}
.brand-logo{width:44px;height:44px;object-fit:contain;border-radius:12px;background:#fff;padding:3px;box-shadow:var(--shadow);flex:none}
.brand h1{font-size:18px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand .sub{margin:1px 0 0;font-size:12px;color:var(--muted)}
.head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.who select{min-width:130px}
.sync-chip{font-size:12px;color:var(--muted)}.sync-chip.err{color:var(--bad)}
.base-info{max-width:1700px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 12px;font-size:12px;color:var(--muted)}
.base-info b{color:var(--text);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;padding:8px 14px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:var(--hover)}.btn:disabled{opacity:.6;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn.icon{padding:8px 10px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
select,input,textarea{font:inherit;color:var(--text);background:var(--input);border:1px solid var(--line);border-radius:10px;padding:8px 10px;outline:none;min-width:0}
select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.spin{display:inline-block;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
#themeSun{display:none}#themeMoon{display:block}
:root[data-theme="dark"] #themeSun{display:block}:root[data-theme="dark"] #themeMoon{display:none}

/* ===== Menus suspensos ===== */
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:30;display:grid;gap:2px}
.menu-pop button{background:transparent;border:0;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;font-weight:500}
.menu-pop button:hover{background:var(--hover)}

/* ===== Aviso de sincronização ===== */
.sync-banner{position:sticky;top:0;z-index:40;padding:9px clamp(16px,4vw,40px);font-weight:600;font-size:13px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:#fff}
.sync-banner.bad{background:var(--banner-bad)}.sync-banner.warn{background:var(--banner-warn)}
.sync-banner button{background:#fff;color:#1c2423;border:0;border-radius:8px;padding:5px 12px;font-weight:700;cursor:pointer}

/* ===== Conteúdo ===== */
main{padding:4px clamp(16px,4vw,40px) 40px;max-width:1700px;margin:auto}
.app-nav{display:flex;gap:4px;margin:6px 0 16px;border-bottom:1px solid var(--line);overflow-x:auto}
.app-nav .btn{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);padding:10px 14px}
.app-nav .btn:hover{color:var(--text);background:transparent}
.app-nav .btn.active{color:var(--text);border-bottom-color:var(--accent)}
.screen{display:none}.screen.active{display:block}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 16px}
.stat .label{overflow-wrap:anywhere}
.stat{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;min-width:0}
.stat .label{font-size:13px;font-weight:600}
.stat .num{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.05;margin-top:6px}
.stat .hint{font-size:12px;color:var(--muted);margin-top:8px}
.cards-flat{display:contents}
button.stat{border:0;text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer;outline:2px solid transparent;transition:outline-color .12s}
button.stat:hover{outline-color:var(--line)}button.stat.on{outline-color:var(--accent);background:var(--accent-soft)}
.panel{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.panel h2{font-size:14px;font-weight:600}
.panel p.note,.note{margin:2px 0 0;color:var(--muted);font-size:12px}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.filters>*{min-width:0}.filters select,.filters input{width:100%}
.filters #search,.filters #obsSearch{grid-column:1/-1}
.filters.two{grid-template-columns:2fr 1fr}.filters.two #obsSearch{grid-column:auto}
.filters select{text-overflow:ellipsis}
.filters .date-nav{grid-column:span 2}
.date-nav{display:flex;gap:4px;align-items:center}.date-nav select{flex:1 1 auto;padding-left:8px;padding-right:4px}.date-nav .btn{padding:8px 10px}
.table-wrap{overflow:auto;border-radius:12px;border:1px solid var(--line);max-height:68vh}
table{border-collapse:collapse;width:100%;min-width:1100px}
th{position:sticky;top:0;z-index:1;background:var(--card);text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover{background:var(--hover)}tbody tr:last-child td{border-bottom:0}
.os{font-weight:600;white-space:nowrap;color:var(--text)}
a.os{text-decoration:none;color:var(--accent)}
.empty{text-align:center;color:var(--muted);padding:28px}
.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;color:var(--muted);font-size:12px}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.obs-cell{min-width:240px;max-width:360px}.obs-text{white-space:pre-wrap;word-break:break-word;margin-top:4px}

/* ===== Status (um só, como vem da origem) ===== */
.pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--st-neutral-bg);color:var(--st-neutral)}
.pill.st-warn{background:var(--st-warn-bg);color:var(--st-warn)}.pill.st-info{background:var(--st-info-bg);color:var(--st-info)}
.pill.st-accent{background:var(--st-accent-bg);color:var(--st-accent)}.pill.st-good{background:var(--st-good-bg);color:var(--st-good)}
.pill.st-bad{background:var(--st-bad-bg);color:var(--st-bad)}.pill.st-badx{background:var(--st-badx-bg);color:var(--st-badx)}
.flag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap}
.flag.ok{color:var(--st-good);background:var(--st-good-bg)}.flag.wait{color:var(--st-warn);background:var(--st-warn-bg)}
.flag.err{color:var(--st-badx);background:var(--st-badx-bg)}.flag.send{color:var(--st-info);background:var(--st-info-bg)}

/* ===== Indicadores ===== */
.indicator-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.indicator-heading h2{font-size:18px;font-weight:600}
.indicator-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.chart-panel.wide{grid-column:span 2}
.chart-panel{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px;min-width:0}
.chart-panel h3{font-size:14px;font-weight:600;margin:0 0 12px}
.bar-row{display:grid;grid-template-columns:150px 1fr 72px;align-items:center;gap:10px;margin:10px 0;font-size:12px}
#statusBars .bar-row{grid-template-columns:200px 1fr 80px}
.bar-row span{white-space:normal;overflow-wrap:anywhere;line-height:1.25}.bar-row b{text-align:right;font-weight:600}
.bar-track{height:10px;background:var(--track);border-radius:5px;overflow:hidden}
.bar-fill{height:100%;border-radius:5px;background:var(--bar)}.bar-fill.on{background:var(--accent)}
.bar-fill.st-warn{background:var(--st-warn)}.bar-fill.st-info{background:var(--st-info)}.bar-fill.st-accent{background:var(--st-accent)}.bar-fill.st-good{background:var(--st-good)}.bar-fill.st-bad{background:var(--st-bad)}.bar-fill.st-badx{background:var(--st-badx)}.bar-fill.st-neutral{background:var(--bar)}
.bar-row em{font-style:normal;color:var(--muted);font-weight:400;font-size:11px}
.stack{display:flex}.seg{display:block}.stack .seg{height:100%}.seg.ob{background:var(--accent)}.seg.no{background:var(--bar)}
.seg.st-warn{background:var(--st-warn)}.seg.st-info{background:var(--st-info)}.seg.st-accent{background:var(--st-accent)}.seg.st-good{background:var(--st-good)}.seg.st-bad{background:var(--st-bad)}.seg.st-badx{background:var(--st-badx)}.seg.st-neutral{background:var(--bar)}
.cell-bar{min-width:200px}.cell-bar .bar-track{margin:4px 0}
.legend-row{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin:0 0 12px}
.legend-row span{display:inline-flex;align-items:center;gap:6px}.legend-row .cover{margin-left:auto;color:var(--text);font-weight:600}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px}.swatch.ob{background:var(--accent)}.swatch.no{background:var(--bar)}
.swatch.st-warn{background:var(--st-warn)}.swatch.st-info{background:var(--st-info)}.swatch.st-accent{background:var(--st-accent)}.swatch.st-good{background:var(--st-good)}.swatch.st-bad{background:var(--st-bad)}.swatch.st-badx{background:var(--st-badx)}.swatch.st-neutral{background:var(--bar)}
.day-chart{display:flex;gap:6px;align-items:flex-end;margin-top:14px;overflow-x:auto;padding-bottom:2px}
.day{flex:1 1 0;min-width:46px;display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:0;border-radius:10px;padding:6px 2px;cursor:pointer}
.day:hover{background:var(--hover)}.day.on{background:var(--accent-soft)}
.day .dv{font-size:12px;font-weight:600}
.day .dcol{width:70%;max-width:44px;height:150px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:6px 6px 3px 3px;overflow:hidden}
.day .dcol .seg{width:100%;flex:none}
.day .dl{font-size:12px}.day .dw{font-size:11px;color:var(--muted)}.day.today .dw{color:var(--accent);font-weight:600}
.legend{display:none}

/* ===== Modal e histórico ===== */
.modal{position:fixed;inset:0;background:var(--overlay);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow:auto}
.modal-card{background:var(--card);border-radius:16px;padding:20px;width:min(780px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal-card textarea{width:100%;min-height:90px;resize:vertical}
.m-add{margin:12px 0 18px;padding:14px;border-radius:12px;background:var(--card2);border:1px solid var(--line)}
.m-add label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.form-actions{display:flex;gap:9px;margin-top:12px}
.timeline{display:grid;gap:10px}
.tl-item{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card2)}
.tl-item.pend{border-color:var(--st-warn)}.tl-item.erro{border-color:var(--bad)}
.tl-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.tl-text{white-space:pre-wrap;word-break:break-word;margin-top:8px;font-size:13px}
.tl-err{color:var(--bad);font-size:12px;margin-top:6px}
.msg-inline{font-size:12px;color:var(--bad);min-height:16px;margin-top:6px}
.toast{position:fixed;bottom:20px;right:20px;padding:11px 16px;background:var(--text);color:var(--bg);border-radius:10px;box-shadow:var(--shadow);z-index:60;font-weight:600}

@media(max-width:900px){.indicator-grid{grid-template-columns:1fr}.chart-panel.wide{grid-column:auto}}
@media(max-width:600px){.filters,.filters.two{grid-template-columns:1fr}.filters .date-nav{grid-column:span 1}.stats{grid-template-columns:1fr 1fr}.stat .num{font-size:26px}.head-actions{width:100%}.sync-chip{width:100%}}