/* Painel do negócio — Khrono. Tema claro é o padrão; escuro por escolha. */
:root{
  --bg:#f1f3ef; --surf:#fff; --muted:#f4f6f2; --ink:#18201c; --soft:#667069; --dim:#8a938f;
  --line:rgba(24,32,28,.14); --line2:rgba(24,32,28,.08);
  --acc:#1d6f53; --acc2:#6fb596; --acc-soft:#e3efe8; --side:#8fc5aa; --side-ink:#12261d;
  --warn:#a3651f; --warn-soft:#f6ecdc; --bad:#b4433a; --bad-soft:#f7e5e2; --ok:#1d6f53;
  --c1:#6fb596; --c2:#c9a04a; --c3:#8c85cf; --c4:#4fa3b2; --c5:#cfd6d0;
  --r:12px; --sans:"Instrument Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.32,.72,0,1); color-scheme:light;
}
:root[data-theme="dark"]{ --bg:#121613; --surf:#1a1f1c; --muted:#20261f; --ink:#eef2ee; --soft:#a5ada8; --dim:#7d8581;
  --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.07); --acc:#6fb596; --acc-soft:#1e352c; --side:#16352a; --side-ink:#dff0e7;
  --warn:#d3a256; --warn-soft:#332a19; --bad:#e08a80; --bad-soft:#35211f; --c5:#3a433d; color-scheme:dark }
*{ box-sizing:border-box; margin:0; padding:0 }
body{ font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:14px; line-height:1.4; -webkit-font-smoothing:antialiased }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer } select{ font:inherit; color:inherit }
svg{ display:block } a{ color:inherit }

.shell{ display:grid; grid-template-columns:212px 1fr; min-height:100dvh }
/* lateral */
.side{ background:var(--side); color:var(--side-ink); padding:18px 12px; display:flex; flex-direction:column; gap:16px; position:sticky; top:0; height:100dvh }
.slogo img{ height:24px; width:auto; margin:2px 6px 0 } :root[data-theme="dark"] .slogo img{ filter:invert(1) }
.suser{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; background:rgba(255,255,255,.55) } :root[data-theme="dark"] .suser{ background:rgba(255,255,255,.07) }
.suser i{ width:30px; height:30px; border-radius:50%; background:#fff; color:var(--acc); font-style:normal; font-weight:600; font-size:11px; display:grid; place-items:center; flex:none }
.suser span{ display:flex; flex-direction:column; min-width:0 } .suser b{ font-weight:500; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .suser small{ font-size:11px; opacity:.75 }
.side nav{ display:grid; gap:2px } .side nav a,.side nav button{ width:100%; text-align:left; display:flex; align-items:center; gap:10px; padding:10px; border-radius:9px; font-size:13.5px; text-decoration:none; opacity:.88; transition:background .2s, opacity .2s }
.side nav a:hover,.side nav button:hover{ background:rgba(255,255,255,.35); opacity:1 } .side nav a.on,.side nav button.on{ background:rgba(255,255,255,.62); opacity:1; font-weight:500 }
:root[data-theme="dark"] .side nav a:hover,.side nav button:hover{ background:rgba(255,255,255,.08) } :root[data-theme="dark"] .side nav a.on,.side nav button.on{ background:rgba(255,255,255,.12) }
.side nav svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.sfoot{ margin-top:auto; font-size:10.5px; opacity:.7; padding:0 6px }
/* topo */
.main{ min-width:0; display:flex; flex-direction:column }
.top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:14px clamp(14px,2vw,26px); 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:20px; font-weight:500; letter-spacing:-.02em }
.tools{ margin-left:auto; display:flex; align-items:center; gap:10px }
.ib{ width:38px; height:38px; border:1px solid var(--line2); border-radius:9px; background:var(--surf); display:grid; place-items:center }
.ib svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round } .ib .sun{ display:none }
:root[data-theme="dark"] .ib .sun{ display:block } :root[data-theme="dark"] .ib .moon{ display:none }
.burger{ display:none }
.who{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--soft) } .who i{ width:30px; height:30px; border-radius:50%; background:var(--acc-soft); color:var(--acc); font-style:normal; font-weight:600; font-size:11px; display:grid; place-items:center }
/* filtros */
.filters{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:16px clamp(14px,2vw,26px) 6px }
.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-size:13.5px; font-weight:500; max-width:200px }
.seg{ position:relative; display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line2); border-radius:99px; background:var(--surf) }
.seg button{ position:relative; z-index:1; padding:7px 14px; border-radius:99px; font-size:13px; color:var(--soft); transition:color .25s var(--ease) }
.seg button[aria-selected="true"]{ color:var(--ink); font-weight:500 }
.seg .ind{ position:absolute; top:3px; bottom:3px; left:0; width:0; border-radius:99px; background:var(--acc-soft); transition:left .45s var(--ease), width .45s var(--ease) }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:9px; border:1px solid var(--line2); background:var(--surf); font-size:13.5px; font-weight:500; transition:transform .12s }
.btn:active{ transform:scale(.98) } .btn.acc{ background:var(--acc2); border-color:var(--acc2); color:#0f1a15 } .btn.line{ background:none } .btn.wide{ width:100%; justify-content:center; margin-top:12px }
.btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
body.loading .spin{ animation:spin .9s linear infinite } @keyframes spin{ to{ transform:rotate(360deg) } }
.upd{ margin-left:auto; font-size:11.5px; color:var(--dim) }
/* grade */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.1vw,14px); padding:12px clamp(14px,2vw,26px) 8px; grid-auto-rows:minmax(0,auto); grid-auto-flow:row dense; align-items:stretch }
.card{ grid-column:span var(--c,3); background:var(--surf); border:1px solid var(--line2); border-radius:var(--r); padding:16px; min-width:0; display:flex; flex-direction:column;
  opacity:0; transform:translateY(10px); animation:up .55s var(--ease) forwards; animation-delay:calc(var(--k,0) * 40ms) }
.card[data-row="2"]{ grid-row:span 2 }
.card[hidden]{ display:none }
@keyframes up{ to{ opacity:1; transform:none } }
.ch{ display:flex; align-items:center; gap:10px; margin-bottom:12px } .ch h3{ font-size:14.5px; font-weight:500 }
.hlp{ width:18px; height:18px; border-radius:50%; border:1px solid var(--line); color:var(--dim); font-size:10.5px; line-height:1; margin-left:auto; flex:none }
.hlp:hover{ border-color:var(--acc); color:var(--acc) }
.tabs{ margin-left:auto; display:flex; gap:4px; padding:3px; border-radius:99px; background:var(--muted) } .tabs button{ padding:6px 12px; border-radius:99px; font-size:12.5px; color:var(--soft); transition:background .25s, color .25s }
.tabs button.on{ background:var(--surf); color:var(--ink); font-weight:500; box-shadow:0 4px 12px -8px rgba(0,0,0,.4) } .tabs.sm button{ padding:5px 10px; font-size:12px }
.hint{ margin-top:auto; padding-top:10px; font-size:11.5px; color:var(--dim); margin-top:10px; line-height:1.5 } .hint b{ color:var(--ink); font-weight:500 }
/* kpi */
.kpi .kh{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--soft) } .kpi .kh svg{ width:16px; height:16px; fill:none; stroke:var(--acc); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.val{ display:block; font-size:clamp(24px,2.6vw,32px); font-weight:500; letter-spacing:-.035em; line-height:1.15; margin-top:10px; font-variant-numeric:tabular-nums }
.val.warn{ color:var(--warn) }
.sub{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap } .sub small{ font-size:11px; color:var(--dim) }
.chip{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:500; padding:3px 8px; border-radius:99px; background:var(--acc-soft); color:var(--acc) }
.chip.down{ background:var(--bad-soft); color:var(--bad) } .chip.flat{ background:var(--muted); color:var(--soft) }
.spark{ width:100%; height:34px; margin-top:auto; padding-top:12px; overflow:visible }
.track{ height:8px; border-radius:99px; background:var(--muted); margin-top:auto; overflow:hidden } .track i{ display:block; height:100%; width:0; border-radius:99px; background:var(--acc2); transition:width 1.1s var(--ease) }
/* gráfico de movimento */
.chart{ position:relative; flex:1; min-height:clamp(190px,20vw,250px) }
.chart svg{ width:100%; height:100%; overflow:visible }
.chart .gl{ stroke:var(--line2); stroke-width:1 } .chart .lbl{ font-size:10px; fill:var(--dim); font-family:var(--mono) }
.chart .areaPrev{ fill:color-mix(in oklab, var(--c5) 55%, transparent) } .chart .linePrev{ fill:none; stroke:var(--c5); stroke-width:1.5 }
.chart .area{ fill:url(#gAcc) } .chart .line{ fill:none; stroke:var(--acc2); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round }
.chart .dot{ fill:var(--surf); stroke:var(--acc2); stroke-width:2.5; opacity:0; transition:opacity .2s }
.chart .hit{ fill:transparent } .chart g.on .dot{ opacity:1 } .chart .vline{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; opacity:0 } .chart g.on .vline{ opacity:1 }
.chart .draw{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw 1.5s var(--ease) forwards } @keyframes draw{ to{ stroke-dashoffset:0 } }
.chart .fadein{ opacity:0; animation:fadein .9s var(--ease) .5s forwards } @keyframes fadein{ to{ opacity:1 } }
/* agenda de hoje */
#w-hoje .tag{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); background:var(--acc-soft); padding:4px 8px; border-radius:99px }
.tl{ list-style:none; display:grid; gap:2px; flex:1; min-height:0; overflow:auto; align-content:start } .tl::-webkit-scrollbar{ width:6px } .tl::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:9px }
.tl li{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:9px 4px; border-bottom:1px solid var(--line2) } .tl li:last-child{ border:0 }
.tl .hr{ font-family:var(--mono); font-size:11.5px; color:var(--soft) } .tl b{ font-weight:500; font-size:13.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .tl small{ display:block; color:var(--dim); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tl .st{ font-size:10.5px; padding:3px 8px; border-radius:99px; background:var(--acc-soft); color:var(--acc) } .tl .st.wait{ background:var(--warn-soft); color:var(--warn) } .tl .st.free{ background:var(--muted); color:var(--dim) }
.tl li.free b{ color:var(--dim); font-weight:400 } .tl li.now{ background:var(--acc-soft); border-radius:8px }
.foot{ display:flex; gap:14px; align-items:center; margin-top:12px; padding-top:10px; border-top:1px solid var(--line2); font-size:11px; color:var(--dim) }
.dotl{ width:8px; height:8px; border-radius:50%; background:var(--acc2); display:inline-block; margin-right:-8px } .dotl.wait{ background:var(--warn) } .dotl.free{ background:var(--c5) }
/* heatmap */
.heat{ flex:1; align-content:center; display:grid; grid-template-columns:34px repeat(7,1fr); gap:4px; font-size:10px }
.heat .hd{ text-align:center; color:var(--dim); font-family:var(--mono); font-size:9.5px; padding-bottom:2px } .heat .rw{ color:var(--dim); font-family:var(--mono); font-size:9.5px; display:flex; align-items:center }
.heat i{ display:block; aspect-ratio:1; border-radius:5px; background:color-mix(in oklab, var(--acc2) calc(var(--v) * 100%), var(--muted)); transition:transform .18s, box-shadow .18s; cursor:default }
.heat i:hover{ transform:scale(1.14); box-shadow:0 6px 16px -8px rgba(0,0,0,.4) }
/* donut */
.donutRow{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; flex:1 } .donut{ width:132px; height:132px; flex:none } .donut circle{ transition:stroke-dashoffset 1.1s var(--ease) }
.donut .lb{ font-size:11px; fill:var(--ink); font-weight:500 } .donut .ls{ font-size:6.5px; fill:var(--dim) }
.leg{ list-style:none; display:grid; gap:8px; flex:1; min-width:150px } .leg li{ display:flex; align-items:center; gap:8px; font-size:12.5px } .leg i{ width:9px; height:9px; border-radius:3px; flex:none } .leg b{ margin-left:auto; font-weight:500; font-variant-numeric:tabular-nums } .leg span{ color:var(--soft) }
/* equipe e rankings */
.team,.rank,.back{ list-style:none; display:grid; gap:12px; align-content:space-between; flex:1 }
.team li{ display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center }
.team .av{ width:30px; height:30px; border-radius:50%; background:var(--acc-soft); color:var(--acc); font-size:11px; font-weight:600; display:grid; place-items:center }
.team .bar{ height:8px; border-radius:99px; background:var(--muted); overflow:hidden; margin-top:5px } .team .bar i{ display:block; height:100%; width:0; border-radius:99px; background:var(--acc2); transition:width 1s var(--ease) }
.team b{ display:block; font-size:13px; font-weight:500 } .team small{ display:block } .team .n{ font-size:13px; font-weight:500; font-variant-numeric:tabular-nums } .team small{ color:var(--dim); font-size:11px }
.rank li{ display:grid; grid-template-columns:20px 1fr auto; gap:10px; align-items:center; font-size:13px }
.rank .i{ font-family:var(--mono); font-size:11px; color:var(--dim) } .rank .bar{ height:6px; border-radius:99px; background:var(--muted); margin-top:5px; overflow:hidden } .rank .bar i{ display:block; height:100%; width:0; background:var(--c4); border-radius:99px; transition:width 1s var(--ease) }
.rank b{ display:block; font-weight:500 } .rank small{ display:block } .rank .n{ font-variant-numeric:tabular-nums; font-weight:500 } .rank small{ color:var(--dim); font-size:11px }
.back li{ display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; font-size:13px }
.back .av{ width:30px; height:30px; border-radius:50%; background:var(--warn-soft); color:var(--warn); font-size:11px; font-weight:600; display:grid; place-items:center }
.back small{ display:block; color:var(--dim); font-size:11px } .back .d{ font-size:11.5px; color:var(--warn); font-weight:500; white-space:nowrap }
/* clientes e faltas */
.split,.split3{ display:grid; gap:12px } .split{ grid-template-columns:1fr 1fr } .split3{ grid-template-columns:repeat(3,1fr) }
.split .val,.split3 .val{ font-size:clamp(18px,1.9vw,24px); margin:0; white-space:nowrap } .split3 small{ display:block; line-height:1.3 } .split small,.split3 small{ color:var(--dim); font-size:11.5px }
.stack{ display:flex; height:10px; border-radius:99px; overflow:hidden; margin-top:14px; background:var(--muted) } .stack i{ display:block; height:100%; transition:width 1s var(--ease) } .stack .a{ background:var(--acc2); width:0 } .stack .b{ background:var(--c4); flex:1 }
/* meta */
.gaugeRow{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; flex:1 } .gauge{ width:118px; height:118px; flex:none } .gauge circle{ transition:stroke-dashoffset 1.3s var(--ease) } .gauge .pc{ font-size:17px; font-weight:600; fill:var(--ink) } .gauge .pl{ font-size:6.5px; fill:var(--dim) }
#w-meta .val{ margin-top:0 } #w-meta small{ color:var(--dim); font-size:12px } .goal small{ color:var(--dim); font-size:12px }
.demo{ padding:14px clamp(14px,2vw,26px) 28px; font-size:11.5px; color:var(--dim) } .demo a{ color:var(--acc) }
/* dica */
.tip{ position:fixed; z-index:50; max-width:260px; padding:9px 11px; border-radius:9px; background:var(--ink); color:var(--bg); font-size:12px; line-height:1.45; opacity:0; pointer-events:none; transition:opacity .18s; box-shadow:0 18px 40px -20px rgba(0,0,0,.6) }
.tip.on{ opacity:1 }
/* responsivo */
@media (max-width:1180px){ .grid{ grid-template-columns:repeat(2,1fr) } .card.wide{ grid-column:span 2 } .card.goal{ grid-column:span 2 } .card.today{ grid-row:auto } }
@media (max-width:1240px){ .card{ grid-column:span 6 } .card[style*="--c:8"]{ grid-column:span 12 } .card[data-row="2"]{ grid-row:auto } }
@media (max-width:760px){ .card{ grid-column:span 12 } }
@media (max-width:920px){
  .shell{ grid-template-columns:1fr }
  .side{ position:fixed; z-index:40; inset:0 auto 0 0; width:212px; transform:translateX(-100%); transition:transform .4s var(--ease); box-shadow:0 0 60px rgba(0,0,0,.25) }
  body.menu .side{ transform:none } .burger{ display:grid } .who span,.who{ font-size:12.5px }
  .filters{ gap:8px } .sel select{ max-width:140px } .upd{ width:100%; margin:0 }
}
@media (max-width:680px){ .split3{ grid-template-columns:1fr 1fr } .ttl b{ font-size:17px } .seg button{ padding:7px 10px; font-size:12.5px } }
@media (prefers-reduced-motion:reduce){ .card{ animation:none; opacity:1; transform:none } .chart .draw,.chart .fadein{ animation:none; stroke-dashoffset:0; opacity:1 } .spin{ animation:none !important } }

/* ---------- personalizar: escolher os blocos ---------- */
.cust{ position:relative }
.custPanel{ position:absolute; right:0; top:calc(100% + 8px); z-index:30; width:290px; background:var(--surf); border:1px solid var(--line); border-radius:12px; box-shadow:0 26px 60px -30px rgba(0,0,0,.55); padding:14px; animation:pop .22s var(--ease) }
@keyframes pop{ from{ opacity:0; transform:translateY(-6px) } }
.cpH{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px } .cpH b{ font-size:13.5px; font-weight:500 } .cpH button{ color:var(--dim); font-size:13px; padding:2px 4px }
.cpList{ display:grid; gap:2px; max-height:340px; overflow:auto }
.cpList label{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; font-size:13.5px; cursor:pointer } .cpList label:hover{ background:var(--muted) }
.cpList input{ width:17px; height:17px; accent-color:var(--acc); flex:none }
.cpF{ display:flex; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line2) } .btn.sm{ padding:7px 11px; font-size:12.5px; flex:1; justify-content:center }
@media (max-width:1240px){ .card{ grid-column:span 6 } .card[style*="--c:8"]{ grid-column:span 12 } .card[data-row="2"]{ grid-row:auto } }
@media (max-width:760px){ .card{ grid-column:span 12 } }
@media (max-width:920px){ .custPanel{ position:fixed; left:12px; right:12px; top:auto; bottom:12px; width:auto } }

/* a agenda do dia rola dentro do cartão: mantém a dupla com o gráfico na mesma altura */
#w-hoje{ max-height:460px } #w-hoje .tl{ max-height:none }
@media (max-width:760px){ #w-hoje{ max-height:none } }

/* ============ vistas: visão geral e relatórios ============ */
.view{ display:none } .view.on{ display:block; animation:viewIn .42s var(--ease) }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px) } }
.filters.rel{ display:none } body[data-view="relatorios"] .filters.rel{ display:flex } body[data-view="relatorios"] .filters.pnl{ display:none }
/* folha */
.paper{ padding:8px clamp(14px,2vw,26px) 34px; 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 }


.sheet{ color:#111 } :root[data-theme="dark"] .sheet{ color:#111 }
@media (max-width:1000px){ .sheet{ width:100%; min-height:0; padding:16px 14px; font-size:11px } .rtitle{ font-size:16px } .paper{ padding:8px 10px 26px } .boxes{ grid-template-columns:1fr 1fr } }
@media print{
  @page{ size:A4 portrait; margin:12mm }
  .side,.top,.filters,.ib,.demo{ 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 }
  .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 }
}

/* folha no celular: rola na horizontal em vez de espremer a tabela */
@media (max-width:760px){
  .paper{ overflow-x:auto; -webkit-overflow-scrolling:touch } .sheet{ min-width:640px }
  .rh{ flex-wrap:wrap; gap:8px } .filters.rel .sel select{ max-width:150px }
}