/* RD Representações. Tokens: docs/rd-representacoes-design.md */
:root{
  --bg:#eef0f4; --surface:#ffffff; --surface-2:#f6f7f9; --ink:#16181d; --ink-2:#5a6272; --ink-3:#8b93a5;
  --line:#e3e6ec; --accent:#2c5ce6; --accent-ink:#ffffff; --accent-soft:#e8edfc;
  --good:#15803d; --good-soft:#e5f5eb; --bad:#b91c1c; --bad-soft:#fbeaea; --warn:#92580a; --warn-soft:#fdf1de;
  --cat1:#2c5ce6; --cat2:#0d9488; --cat3:#d97706;
  --r-card:14px; --r-ctl:10px;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#090b0f; --surface:#171b23; --surface-2:#1f242f; --ink:#eceef2; --ink-2:#98a0b0; --ink-3:#6b7383;
  --line:#262c38; --accent:#2c5ce6; --accent-ink:#ffffff; --accent-soft:#1c2740;
  --good:#3fb96b; --good-soft:#12281a; --bad:#e5716a; --bad-soft:#331516; --warn:#e0a147; --warn-soft:#2e2210;
}}
*{box-sizing:border-box; margin:0; padding:0}
html{height:100%}
body{background:var(--bg); color:var(--ink); min-height:100svh;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; max-width:520px; margin:0 auto}
.statusbar-safe{height:env(safe-area-inset-top)}
.appbar{display:flex; align-items:center; gap:10px; padding:10px 16px; min-height:56px}
.back{appearance:none; border:none; background:var(--surface-2); color:var(--accent); font:inherit; font-size:15px;
  font-weight:600; padding:9px 14px 9px 10px; border-radius:999px; cursor:pointer; min-height:40px}
.back::before{content:"‹ "; font-size:18px}
.appbar h1{font-size:19px; font-weight:700; letter-spacing:-.01em; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sync{appearance:none; border:none; background:var(--accent); color:var(--accent-ink); font:inherit; font-size:13.5px;
  font-weight:600; padding:10px 14px; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:7px; min-height:40px}
.sync:active{transform:scale(.97)}
.sync svg{width:14px; height:14px}
.sync.busy svg{animation:girar .8s linear infinite}
.sync[disabled]{opacity:.6; cursor:default}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .sync.busy svg{animation:none} *{transition:none !important} }
.updated{font-size:12px; color:var(--ink-3); padding:0 18px 10px}
main{padding:0 14px calc(28px + env(safe-area-inset-bottom))}

.login{display:flex; flex-direction:column; align-items:center; gap:18px; padding:56px 8px}
.logo{width:74px; height:74px; border-radius:20px; background:var(--accent); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:30px; font-weight:800; letter-spacing:-.03em}
.login h2{font-size:22px; font-weight:700}
.login p{font-size:14px; color:var(--ink-2); text-align:center; max-width:32ch; line-height:1.55}
.login label{font-size:13px; font-weight:600; color:var(--ink-2); align-self:flex-start; margin-bottom:-10px}
.login input{width:100%; font:inherit; font-size:17px; padding:14px; border-radius:var(--r-ctl);
  border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink); text-align:center; letter-spacing:.3em}
.login input:focus{outline:2px solid var(--accent); outline-offset:1px}
.login .erro{color:var(--bad); font-size:13.5px; font-weight:600; min-height:1.2em}
.btn-primario{width:100%; appearance:none; border:none; background:var(--accent); color:var(--accent-ink);
  font:inherit; font-size:16px; font-weight:700; padding:15px; border-radius:var(--r-ctl); cursor:pointer; min-height:48px}
.btn-primario:active{transform:scale(.98)}
.btn-primario[disabled]{opacity:.6}
.hint{font-size:12.5px; color:var(--ink-3); text-align:center; line-height:1.5}

.grid-menu{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{appearance:none; border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  border-radius:var(--r-card); padding:16px 14px; min-height:104px; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; gap:10px; font:inherit; text-decoration:none}
.tile:active{transform:scale(.98)}
.tile .ico{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent)}
.tile .ico svg{width:19px; height:19px}
.tile .t{font-size:14.5px; font-weight:650; line-height:1.25}
.tile .s{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.tile.ghost{border-style:dashed; background:transparent; align-items:center; justify-content:center; cursor:default}
.tile.ghost .t{color:var(--ink-3); font-weight:500; font-size:13px}

.card{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-card); padding:14px}
.h-sec{font-size:13px; font-weight:700; color:var(--ink-2); margin:18px 2px 8px; text-transform:uppercase; letter-spacing:.06em}
.busca{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1.5px solid var(--line);
  border-radius:var(--r-ctl); padding:11px 12px; margin-bottom:12px}
.busca svg{width:16px; height:16px; color:var(--ink-3); flex:none}
.busca input{border:none; background:none; font:inherit; font-size:15px; color:var(--ink); width:100%}
.busca input:focus{outline:none}
.busca:focus-within{outline:2px solid var(--accent); outline-offset:1px}
.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{appearance:none; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); font:inherit;
  font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; min-height:36px}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.row{display:flex; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid var(--line);
  background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; font:inherit; color:var(--ink)}
.row:last-child{border-bottom:none}
button.row{cursor:pointer}
button.row:active{opacity:.7}
.row .grow{flex:1; min-width:0}
.row .nm{font-size:14.5px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.row .sub{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.row .val{font-size:14px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap}
.row .chev{color:var(--ink-3); font-size:18px}
.rank{width:24px; font-size:13px; font-weight:750; color:var(--ink-3); text-align:center; flex:none; font-variant-numeric:tabular-nums}
.badge{font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.bad{background:var(--bad-soft); color:var(--bad)}
.thumb{width:46px; height:46px; border-radius:9px; object-fit:contain; background:#fff; border:1px solid var(--line); flex:none}
.thumb-ph{width:46px; height:46px; border-radius:9px; background:var(--surface); border:1px dashed var(--line);
  color:var(--ink-3); display:flex; align-items:center; justify-content:center; flex:none}
.thumb-ph svg{width:18px; height:18px}
.nota-pe{font-size:12px; color:var(--ink-3); text-align:center; padding:12px 0 2px; line-height:1.5}
.vazio{text-align:center; color:var(--ink-2); padding:34px 12px; font-size:14.5px; line-height:1.6}
.skel{background:linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size:200% 100%;
  animation:skel 1.1s linear infinite; border-radius:var(--r-card); border:1px solid var(--line)}
@keyframes skel{to{background-position:-200% 0}}

.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.kpi{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-card); padding:13px 14px}
.kpi .lb{font-size:12px; font-weight:600; color:var(--ink-2)}
.kpi .v{font-size:19px; font-weight:750; letter-spacing:-.02em; margin-top:5px; font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px; font-weight:650; margin-top:5px; display:inline-flex; gap:3px; padding:2px 7px; border-radius:999px}
.kpi .d.up{color:var(--good); background:var(--good-soft)}
.kpi .d.down{color:var(--bad); background:var(--bad-soft)}
.kpi .d.flat{color:var(--ink-2); background:var(--surface)}
.grafico-cap{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.grafico-cap .m{font-size:13px; font-weight:600; color:var(--ink-2)}
.grafico-cap .v{font-size:15px; font-weight:750; font-variant-numeric:tabular-nums}
.barras{display:flex; align-items:flex-end; gap:2px; height:120px; border-bottom:1.5px solid var(--line)}
.barras .b{flex:1; background:var(--cat1); border-radius:4px 4px 0 0; min-height:3px; cursor:pointer; opacity:.45;
  border:none; padding:0; transition:opacity .15s}
.barras .b.on{opacity:1}
.xlabels{display:flex; gap:2px; margin-top:6px}
.xlabels span{flex:1; font-size:9.5px; color:var(--ink-3); text-align:center; font-variant-numeric:tabular-nums}
.fab-linha{margin-top:10px}
.fab-linha .topo{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:5px}
.fab-linha .topo b{font-weight:650}
.fab-linha .topo span{font-variant-numeric:tabular-nums; color:var(--ink-2)}
.fab-barra{height:10px; border-radius:5px; background:var(--surface); overflow:hidden}
.fab-barra i{display:block; height:100%; border-radius:5px}
.fab-linha:nth-of-type(1) .fab-barra i{background:var(--cat1)}
.fab-linha:nth-of-type(2) .fab-barra i{background:var(--cat2)}
.fab-linha:nth-of-type(3) .fab-barra i{background:var(--cat3)}

.grid-prod{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pcard{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  cursor:pointer; text-align:left; font:inherit; color:var(--ink); padding:0; appearance:none; display:block}
.pcard:active{transform:scale(.98)}
.pcard .im{aspect-ratio:1; background:#fff; display:flex; align-items:center; justify-content:center}
.pcard .im img{width:100%; height:100%; object-fit:contain}
.pcard .tx{padding:10px 11px 12px; display:block}
.pcard .tx .n{font-size:12.5px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em}
.pcard .tx .r{font-size:11.5px; color:var(--ink-3); margin-top:4px; font-variant-numeric:tabular-nums; display:block}
.lightbox{position:fixed; inset:0; background:rgb(10 12 18 / .82); display:flex; align-items:center;
  justify-content:center; z-index:50; padding:24px}
.lightbox[hidden]{display:none}
.lightbox .box{background:#fff; border-radius:18px; max-width:420px; width:100%; padding:18px; text-align:center}
.lightbox img{width:100%; max-height:52vh; object-fit:contain}
.lightbox .n{font-size:15px; font-weight:650; color:#16181d; margin-top:8px}
.lightbox .r{font-size:13px; color:#5a6272; margin-top:3px; font-variant-numeric:tabular-nums}

.nf-cab{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
.nf-cab .n{font-size:16px; font-weight:750}
.nf-cab .d{font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.item{display:flex; gap:11px; padding:12px 2px; border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:none}
.item .grow{flex:1; min-width:0}
.item .nm{font-size:13.5px; font-weight:600; line-height:1.3}
.item .meta{display:flex; gap:12px; margin-top:5px; font-size:12px; color:var(--ink-2);
  font-variant-numeric:tabular-nums; flex-wrap:wrap}
.item .meta b{color:var(--ink); font-weight:650}
.item .pu{font-size:13.5px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.total-nf{position:sticky; bottom:calc(10px + env(safe-area-inset-bottom)); background:var(--accent); color:var(--accent-ink);
  border-radius:var(--r-card); padding:14px 16px; display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; font-weight:700}
.total-nf .l{font-size:13.5px; opacity:.9}
.total-nf .v{font-size:17px; font-variant-numeric:tabular-nums}

.abas{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; margin-bottom:6px}
.abas button{flex:1; appearance:none; border:none; background:none; font:inherit; font-size:14px; font-weight:650;
  color:var(--ink-2); padding:9px; border-radius:999px; cursor:pointer; min-height:38px}
.abas button.on{background:var(--accent); color:var(--accent-ink)}
.ordena{font-size:12.5px; color:var(--ink-3); text-align:center; margin-bottom:6px}
.ordena button{appearance:none; border:none; background:none; font:inherit; font-size:12.5px; color:var(--accent);
  font-weight:650; cursor:pointer; text-decoration:underline}

.ev-cab{border-left:4px solid var(--cat2); padding:2px 0 2px 12px; margin-bottom:14px}
.ev-cab .lit{font-size:13.5px; color:var(--ink-2); line-height:1.4}
.ev-cab .ref{font-size:20px; font-weight:750; margin-top:4px}
.ev-cab .cor{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:650; color:var(--ink-2); margin-top:6px}
.ev-cab .cor i{width:10px; height:10px; border-radius:50%; background:var(--cat2)}
.ev-tit{font-size:14px; font-weight:650; color:var(--ink-2); font-style:italic; margin-bottom:10px}
.ev-txt{font-size:15.5px; line-height:1.65; max-width:62ch; white-space:pre-line}
.ev-fonte{font-size:12px; color:var(--ink-3); margin-top:16px}
.aviso{background:var(--warn-soft); color:var(--warn); font-size:13px; font-weight:600; border-radius:var(--r-ctl);
  padding:10px 12px; margin-bottom:12px; line-height:1.5}

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom));
  background:var(--ink); color:var(--bg); font-size:14px; font-weight:600; padding:12px 20px; border-radius:999px;
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:60; max-width:88vw; text-align:center}
.toast.on{opacity:1}
button:focus-visible, input:focus-visible, a:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px}