/* Relatórios mensais — tela clara + folha A4 pronta para imprimir/PDF */
:root{
  --bg:#f1f3ef; --surf:#fff; --muted:#f4f6f2; --ink:#18201c; --soft:#667069; --dim:#8a938f;
  --line:rgba(24,32,28,.16); --line2:rgba(24,32,28,.08); --acc:#1d6f53; --acc2:#6fb596; --acc-soft:#e3efe8; --side:#8fc5aa; --side-ink:#12261d;
  --bad:#b4433a; --warn:#a3651f; --sans:"Instrument Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{ box-sizing:border-box; margin:0; padding:0 }
body{ font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:14px; -webkit-font-smoothing:antialiased }
button,select{ font:inherit; color:inherit } button{ background:none; border:0; cursor:pointer } svg{ display:block } a{ color:var(--acc) }

.shell{ display:grid; grid-template-columns:230px 1fr; min-height:100dvh }
.side{ background:var(--side); color:var(--side-ink); padding:18px 12px; display:flex; flex-direction:column; gap:12px; position:sticky; top:0; height:100dvh }
.slogo img{ height:24px; width:auto; margin:2px 6px 6px }
.lb{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; padding:0 6px }
.side nav{ display:grid; gap:2px } .side nav button{ text-align:left; padding:10px; border-radius:9px; font-size:13.5px; opacity:.9; transition:background .2s }
.side nav button:hover{ background:rgba(255,255,255,.35) } .side nav button.on{ background:rgba(255,255,255,.62); font-weight:500; opacity:1 }
.sfoot{ margin-top:auto; font-size:10.5px; opacity:.75; padding:0 6px; line-height:1.6 } .sfoot a{ color:inherit }

.main{ min-width:0; display:flex; flex-direction:column }
.top{ position:sticky; top:0; z-index:9; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px clamp(14px,2vw,24px); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line2) }
.ttl small{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim) }
.ttl b{ font-size:19px; font-weight:500; letter-spacing:-.02em }
.tools{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.sel{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line2); border-radius:9px; background:var(--surf); font-size:13px }
.sel span{ color:var(--dim); font-size:11.5px } .sel select{ border:0; background:none; outline:none; font-weight:500; font-size:13.5px; max-width:190px }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:9px; border:1px solid var(--line2); background:var(--surf); font-size:13.5px; font-weight:500 }
.btn.acc{ background:var(--acc2); border-color:var(--acc2); color:#0f1a15 } .btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.ib{ width:38px; height:38px; border:1px solid var(--line2); border-radius:9px; background:var(--surf); display:none; place-items:center } .ib svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8 }

/* folha */
.paper{ padding:22px clamp(10px,2vw,24px) 40px; display:flex; justify-content:center }
.sheet{ width:210mm; min-height:297mm; background:#fff; color:#111; padding:14mm 12mm 16mm; box-shadow:0 24px 60px -30px rgba(0,0,0,.45); border:1px solid var(--line2); font-size:9.6pt; line-height:1.35 }
.rh{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; font-size:7.6pt; color:#444; border-bottom:1.5px solid #111; padding-bottom:6px }
.rh .emp b{ display:block; font-size:9pt; color:#111 }
.rh .mid{ text-align:center } .rh .rt{ text-align:right }
.rtitle{ margin:10px 0 2px; font-size:14pt; font-weight:600; letter-spacing:-.01em; text-transform:uppercase }
.rsub{ font-size:8.4pt; color:#444; margin-bottom:12px }
.rsub b{ color:#111; font-weight:600 }
table{ width:100%; border-collapse:collapse }
thead th{ font-size:7.8pt; font-weight:600; text-align:left; padding:5px 6px; border-bottom:1px solid #111; white-space:nowrap }
tbody td{ padding:4.5px 6px; border-bottom:1px solid #e6e6e6; vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
tbody td:nth-child(3),tbody td:nth-child(4){ max-width:34ch }
tbody tr:nth-child(even) td{ background:#f7f9f7 }
.num{ text-align:right; font-family:var(--mono); font-size:8.6pt; white-space:nowrap } th.num{ text-align:right }
.grp td{ background:#e7ece7 !important; font-weight:600; font-size:8.6pt; padding:6px; border-bottom:1px solid #cfd6cf; text-transform:uppercase; letter-spacing:.03em }
.grp .gid{ font-family:var(--mono); font-weight:400; color:#555; margin-right:8px; text-transform:none }
.sum td{ background:#fff !important; border-top:1px solid #111; border-bottom:2px solid #111; font-weight:600; font-size:8.8pt; padding:6px }
.tot td{ background:#111 !important; color:#fff; font-weight:600; font-size:9.4pt; padding:8px 6px; border:0 }
.sp td{ background:#fff !important; border:0; height:10px }
.pill{ display:inline-block; padding:1px 6px; border:1px solid #bbb; border-radius:99px; font-size:7.2pt }
.pill.ok{ border-color:#1d6f53; color:#1d6f53 } .pill.no{ border-color:#b4433a; color:#b4433a } .pill.wa{ border-color:#a3651f; color:#a3651f }
.mini{ color:#666; font-size:7.6pt }
.rf{ margin-top:14px; padding-top:6px; border-top:1px solid #111; display:flex; justify-content:space-between; font-size:7.4pt; color:#444 }
.boxes{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px }
.box{ border:1px solid #ccc; border-radius:4px; padding:8px 10px } .box small{ display:block; font-size:7.4pt; color:#555; text-transform:uppercase; letter-spacing:.04em }
.box b{ font-size:12.5pt; font-weight:600; font-family:var(--mono) }
.dre td:first-child{ width:62% } .dre .lv2 td:first-child{ padding-left:22px; color:#444 }
.bar{ display:inline-block; height:7px; background:#9ec9b5; border-radius:2px; vertical-align:middle }
.note{ margin-top:12px; font-size:7.6pt; color:#555; border-left:2px solid #9ec9b5; padding-left:8px; line-height:1.5 }
.sig{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:26px; font-size:7.8pt; color:#444; text-align:center }
.sig div{ border-top:1px solid #111; padding-top:5px }

@media (max-width:1000px){
  .shell{ grid-template-columns:1fr } .side{ position:fixed; z-index:30; inset:0 auto 0 0; width:230px; transform:translateX(-100%); transition:transform .4s cubic-bezier(.32,.72,0,1) }
  body.menu .side{ transform:none } .ib{ display:grid } .tools{ width:100%; margin:0 } .sel select{ max-width:120px }
  .sheet{ width:100%; min-height:0; padding:16px 14px; font-size:11px } .rtitle{ font-size:16px } .paper{ padding:14px 10px 30px }
  .boxes{ grid-template-columns:1fr 1fr }
}
@media print{
  @page{ size:A4 portrait; margin:12mm }
  .side,.top,.ib{ display:none !important }
  body,.shell,.main{ display:block; background:#fff }
  .paper{ padding:0; display:block }
  .sheet{ width:auto; min-height:0; box-shadow:none; border:0; padding:0; font-size:9.2pt }
  tbody tr,.grp,.sum,.tot{ break-inside:avoid } thead{ display:table-header-group } .gblock{ break-inside:avoid }
  .tot td{ background:#111 !important; color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact }
  .grp td,tbody tr:nth-child(even) td,.box,.bar{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
}