/* ============================================================
   Grandal — Réplicas de produto (Fluxo Diário)
   UI recriada fielmente ao ERP dark real. Dados demonstrativos
   concretos (fictícios). Sem placeholders na interface.
   ============================================================ */

:root{
  --app-bg:#0A1526; --app-panel:#0E1B31; --app-panel-2:#122442;
  --app-line:rgba(140,170,210,.14); --app-line-2:rgba(140,170,210,.22);
  --app-text:#DCE7F5; --app-muted:#8296B4; --app-accent:#26E5DE; --app-accent-2:#18C6B9;
  --app-green:#3FD08A; --app-amber:#F5B14C; --app-red:#F0655B;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
}

/* ---- Shell da aplicação ---- */
.app{background:var(--app-bg);border:1px solid var(--app-line-2);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);font-size:13px;color:var(--app-text);line-height:1.45;
  --tabnum:1;font-feature-settings:"tnum" 1}
.app *{box-sizing:border-box}
.app__chrome{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#081020;border-bottom:1px solid var(--app-line)}
.app__dots{display:flex;gap:6px}.app__dots i{width:9px;height:9px;border-radius:50%;background:#26364f;display:block}
.app__path{font-size:11px;color:var(--app-muted);letter-spacing:.02em}
.app__path b{color:var(--app-text);font-weight:600}
.app__user{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--app-muted)}
.app__user .av{width:20px;height:20px;border-radius:50%;background:linear-gradient(120deg,#26E5DE,#18C6B9);color:#04121f;
  display:grid;place-items:center;font-weight:800;font-size:10px}
.app__body{display:flex;min-height:230px}
.app__rail{width:52px;flex:none;background:#081020;border-right:1px solid var(--app-line);padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:4px}
.app__rail .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--app-muted)}
.app__rail .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.app__rail .ic.on{background:rgba(38,229,222,.14);color:var(--app-accent)}
.app__main{flex:1;padding:16px 18px;min-width:0}
.app__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.app__title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.app__sub{font-size:11px;color:var(--app-muted)}

/* ---- Chips de estado / pills ---- */
.st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.st .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.st--green{color:var(--app-green);background:rgba(63,208,138,.12);border-color:rgba(63,208,138,.3)}
.st--amber{color:var(--app-amber);background:rgba(245,177,76,.12);border-color:rgba(245,177,76,.3)}
.st--cyan{color:var(--app-accent);background:rgba(38,229,222,.12);border-color:rgba(38,229,222,.3)}
.st--muted{color:var(--app-muted);background:rgba(140,170,210,.1);border-color:var(--app-line)}

/* ---- Tabela ERP ---- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-weight:600;color:var(--app-muted);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 10px;border-bottom:1px solid var(--app-line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--app-line)}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.tbl .prod{display:flex;flex-direction:column}
.tbl .prod small{color:var(--app-muted);font-size:10.5px}
.tbl tr.tot td{border-top:1px solid var(--app-line-2);font-weight:700}
.tbl tr.hl{background:rgba(38,229,222,.06)}

/* ---- PDV ---- */
.pdv__client{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--app-panel);border:1px solid var(--app-line);border-radius:10px;margin-bottom:12px}
.pdv__client .who{font-weight:600}.pdv__client .meta{font-size:11px;color:var(--app-muted)}
.pdv__client .st{margin-left:auto}
.pdv__foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px dashed var(--app-line-2)}
.pdv__total .l{font-size:11px;color:var(--app-muted)}
.pdv__total .v{font-family:var(--mono);font-size:26px;font-weight:700;color:#fff;letter-spacing:-.02em}
.pdv__pay{display:flex;gap:8px;flex-wrap:wrap}
.pdv__pay .chip{font-size:11px;padding:6px 10px;border-radius:8px;border:1px solid var(--app-line);color:var(--app-muted)}
.pdv__pay .chip.on{border-color:var(--app-accent);color:var(--app-accent);background:rgba(38,229,222,.08)}

/* ---- KPI reais (dashboard) ---- */
.krow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kbox{background:var(--app-panel);border:1px solid var(--app-line);border-radius:11px;padding:12px}
.kbox .l{font-size:10.5px;color:var(--app-muted);text-transform:uppercase;letter-spacing:.05em}
.kbox .v{font-family:var(--mono);font-size:20px;font-weight:700;color:#fff;margin-top:3px;letter-spacing:-.01em}
.kbox .delta{font-size:11px;margin-top:2px}
.kbox .delta.up{color:var(--app-green)}.kbox .delta.down{color:var(--app-red)}
/* mini gráfico de barras CSS */
.bars{display:flex;align-items:flex-end;gap:6px;height:74px;margin-top:6px}
.bars .b{flex:1;background:linear-gradient(180deg,rgba(38,229,222,.9),rgba(24,198,185,.35));border-radius:4px 4px 0 0;min-height:6px}
.bars .b.q{background:linear-gradient(180deg,#3FD08A,rgba(63,208,138,.3))}
.chart-wrap{background:var(--app-panel);border:1px solid var(--app-line);border-radius:11px;padding:12px;margin-top:10px}
.chart-wrap .cap{display:flex;justify-content:space-between;font-size:11px;color:var(--app-muted);margin-bottom:4px}
.legend{display:flex;gap:14px;font-size:11px;color:var(--app-muted);margin-top:8px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ---- Timeline OS ---- */
.osline{display:flex;flex-direction:column;gap:0}
.osstep{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:start;padding:9px 0;position:relative}
.osstep::before{content:"";position:absolute;left:12px;top:26px;bottom:-2px;width:2px;background:var(--app-line)}
.osstep:last-child::before{display:none}
.osstep .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--app-panel-2);border:1px solid var(--app-line-2);font-size:11px;color:var(--app-muted);z-index:1}
.osstep.done .dot{background:rgba(63,208,138,.16);border-color:rgba(63,208,138,.4);color:var(--app-green)}
.osstep.now .dot{background:rgba(38,229,222,.16);border-color:var(--app-accent);color:var(--app-accent)}
.osstep .t{font-weight:600}.osstep .m{font-size:11px;color:var(--app-muted)}
.osstep .when{font-size:11px;color:var(--app-muted);font-family:var(--mono)}

/* ---- NF-e / documento fiscal ---- */
.nfe{background:var(--app-panel);border:1px solid var(--app-line);border-radius:11px;padding:14px}
.nfe__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.nfe__n{font-size:11px;color:var(--app-muted)}.nfe__n b{color:var(--app-text);font-family:var(--mono)}
.nfe__key{font-family:var(--mono);font-size:11px;color:var(--app-muted);word-break:break-all;background:#081020;padding:8px 10px;border-radius:7px;border:1px solid var(--app-line);margin-top:8px}
.nfe__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;font-size:12px}
.nfe__grid .k{color:var(--app-muted);font-size:10.5px}
.nfe__grid .val{font-family:var(--mono)}

/* ---- Busca global ---- */
.gsearch{background:var(--app-panel);border:1px solid var(--app-line-2);border-radius:11px;overflow:hidden}
.gsearch__in{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--app-line)}
.gsearch__in svg{width:16px;height:16px;stroke:var(--app-muted);fill:none;stroke-width:1.8}
.gsearch__in .q{color:var(--app-text)}.gsearch__in .cur{width:1.5px;height:15px;background:var(--app-accent);display:inline-block;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.gsearch__res .r{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--app-line)}
.gsearch__res .r:last-child{border-bottom:0}
.gsearch__res .r .ic{width:26px;height:26px;border-radius:7px;background:var(--app-panel-2);display:grid;place-items:center;color:var(--app-accent);font-size:11px;flex:none}
.gsearch__res .r .tt{font-size:12.5px}.gsearch__res .r .tt small{display:block;color:var(--app-muted);font-size:10.5px}
.gsearch__res .r kbd{margin-left:auto;font-size:10px;color:var(--app-muted);border:1px solid var(--app-line);border-radius:5px;padding:2px 6px}

/* mobile */
@media (max-width:560px){
  .app__rail{display:none}
  .krow{grid-template-columns:1fr 1fr}
  .app{font-size:12.5px}
}