/* ==========================================================================
   JAP FRUTAS · Força de Vendas — réplica do guia visual
   Header verde-garrafa, corpo claro, cards brancos, ação verde escuro.
   ========================================================================== */
:root{
  --hd:  #0b3a22;   /* header */
  --vd:  #0f5c34;   /* botão principal */
  --vd2: #15803d;
  --vd3: #16a34a;   /* ícones, checks, "+" */
  --vcl: #dcfce7;
  --vbg: #ecfdf3;
  --lar: #f97316;
  --vm:  #dc2626;
  --vmc: #fee2e2;
  --az:  #2563eb;
  --azc: #dbeafe;
  --am:  #c2410c;
  --amc: #fff4e5;
  --bg:  #f2f4f3;
  --cd:  #ffffff;
  --ln:  #e3e7e5;
  --ln2: #eef1ef;
  --tx:  #111827;
  --tm:  #6b7280;
  --tm2: #9ca3af;
  --rad: 14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--tx);
  font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-bottom:78px;min-height:100vh;font-size:14px}
/* comportamento de aplicativo: sem "puxar para atualizar"/efeito elástico do navegador, sem menu ao segurar, sem zoom de texto */
html,body{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}
img,a{-webkit-user-drag:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.hide{display:none!important}

/* ------------------------------------------------------------------ header */
.hd{background:var(--hd);padding:calc(env(safe-area-inset-top,0) + 8px) 12px 9px;
    display:grid;grid-template-columns:40px 1fr 40px;align-items:center;
    position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.hd .ic{color:#fff;font-size:19px;width:40px;height:40px;display:grid;place-items:center;position:relative}
.hd .ic .bd{position:absolute;top:3px;right:3px;background:#ef4444;color:#fff;font-size:9.5px;font-weight:800;
            min-width:17px;height:17px;border-radius:99px;display:grid;place-items:center;padding:0 4px;
            border:2px solid var(--hd)}
.lg{justify-self:center;display:flex;flex-direction:column;align-items:center;line-height:1}
.lg .a{font-weight:900;font-size:27px;color:#fff;letter-spacing:-1.5px;display:flex;align-items:center}
.lg .a i{font-size:12px;color:#4ade80;margin:0 1px 0 -1px;transform:translateY(-5px) rotate(-20deg)}
.lg .b{display:flex;gap:4px;margin-top:2px}
.lg .b em{font-style:normal;font-weight:800;font-size:9px;letter-spacing:.02em}
.lg .b em:nth-child(1){color:#84cc16}.lg .b em:nth-child(2){color:#f97316}.lg .b em:nth-child(3){color:#ef4444}
.lg .b em:nth-child(4){color:#eab308}.lg .b em:nth-child(5){color:#a855f7}.lg .b em:nth-child(6){color:#b45309}

/* ------------------------------------------------------------------ layout */
.wrap{padding:12px}
.cd{background:var(--cd);border-radius:var(--rad);box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.03);overflow:hidden}
.cd + .cd,.cd + .sec{margin-top:10px}
.cd-h{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cd-h b{font-size:14.5px;font-weight:700}
.cd-h .lk{font-size:12.5px;color:var(--az);font-weight:600}
.cd-b{padding:12px 14px}
.sep{height:1px;background:var(--ln2)}

.ola{padding:14px 16px 6px}
.ola .p{font-size:13.5px;color:var(--tm)}
.ola h2{font-size:21px;font-weight:800;letter-spacing:-.4px;margin:2px 0 0;line-height:1.2}

/* ------------------------------------------------------------------ busca */
.bsc{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ln);
     border-radius:12px;padding:0 13px;height:46px}
.bsc i{color:var(--tm2);font-size:15px}
.bsc input{flex:1;min-width:0;border:0;outline:0;font-size:14px;background:transparent;color:var(--tx);height:100%}
.bsc input::placeholder{color:var(--tm2)}
.bsc .x{color:var(--tm2);font-size:15px;padding:6px}
.bsc-row{display:flex;gap:8px;align-items:center}
.bsc-row .bsc{flex:1}
.ib{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--ln);
    display:grid;place-items:center;color:var(--tx);font-size:15px;flex-shrink:0}

/* ------------------------------------------------------------------ redes (tela 1) */
.lista-redes{background:#fff;border-radius:var(--rad);overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.rdc{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--ln2)}
.rdc:last-child{border-bottom:0}
.rdc:active{background:#f7faf8}
.brand{width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;font-weight:900;font-size:25px;
       letter-spacing:-1px;border-radius:12px;background:var(--c,#16a34a)14;color:var(--c,#16a34a)}
.brand.sm{width:38px;height:38px;font-size:20px;border-radius:10px}
.brand.lg{width:52px;height:52px;font-size:28px}
.rdc .in{flex:1;min-width:0}
.rdc .n{font-weight:800;font-size:16px;letter-spacing:-.2px;line-height:1.2}
.rdc .r{font-size:12.5px;color:var(--tm);margin-top:1px;line-height:1.3}
.rdc .vl{text-align:right;flex-shrink:0}
.rdc .vl .v{font-weight:800;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rdc .vl .t{font-size:12px;font-weight:700;margin-top:3px;white-space:nowrap}
.rdc .ch{color:var(--tm2);font-size:13px;flex-shrink:0}
.up{color:var(--vd3)}.dn{color:var(--vm)}

.faixa{margin-top:10px;background:linear-gradient(90deg,#d9f2e2,#e9f7ee);border-radius:var(--rad);
       padding:13px 14px;display:flex;align-items:center;gap:12px;color:#14532d;font-size:13.5px;font-weight:600;line-height:1.35}
.faixa i{font-size:26px;color:var(--vd2)}

/* ------------------------------------------------------------------ cabeçalho de rede */
.rh{display:flex;align-items:center;gap:12px;padding:13px 14px}
.rh .in{flex:1;min-width:0}
.rh .n{font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.15}
.rh .r{font-size:12.5px;color:var(--tm);margin-top:2px}
.btn-o{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;border:1px solid var(--ln);
       background:#fff;font-size:12.5px;font-weight:600;color:var(--tx);white-space:nowrap}

/* KPIs fixos (tela 2) */
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px 12px}
.kp .b{border:1px solid var(--ln);border-radius:11px;padding:9px 10px;min-width:0}
.kp .k{font-size:11px;color:var(--tm);font-weight:600}
.kp .v{font-size:16px;font-weight:800;letter-spacing:-.4px;margin:4px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp .s{font-size:10.5px;color:var(--tm);line-height:1.3}
.kp .bar{display:flex;align-items:center;gap:6px}
.kp .bar i{flex:1;height:6px;border-radius:99px;background:var(--ln);overflow:hidden;display:block;position:relative}
.kp .bar i b{position:absolute;inset:0 auto 0 0;background:var(--vd3);border-radius:99px}
.kp .bar em{font-style:normal;font-size:11px;font-weight:800;color:var(--vd2)}
.kp .b.dev .v{color:var(--vm)}

/* abas */
.abas{display:flex;border-bottom:1px solid var(--ln);padding:0 6px}
.abas a{flex:1;text-align:center;padding:12px 6px 11px;font-size:13.5px;font-weight:700;color:var(--tm);
        border-bottom:3px solid transparent;margin-bottom:-1px}
.abas a.on{color:var(--vd);border-color:var(--vd)}
.abas.sm a{font-size:12.5px;padding:10px 4px 9px}

/* ------------------------------------------------------------------ produtos */
.pli{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--ln2)}
.pli:last-child{border-bottom:0}
.pim{width:54px;height:54px;border-radius:12px;background:linear-gradient(145deg,#fff7ed,#f0fdf4);
     display:grid;place-items:center;font-size:32px;flex-shrink:0}
.pli .in{flex:1;min-width:0}
.pli .n{font-weight:700;font-size:14.5px;line-height:1.25}
.pli .p{font-size:14px;font-weight:800;margin-top:2px}
.pli .p small{font-size:11.5px;color:var(--tm);font-weight:600}
.pli .pr{font-size:12px;font-weight:800;color:var(--vm);margin-top:1px}
.pli .m{font-size:11.5px;color:var(--tm);margin-top:3px;line-height:1.45}
.add{width:38px;height:38px;border-radius:50%;background:var(--vd3);color:#fff;display:grid;place-items:center;
     font-size:17px;flex-shrink:0;box-shadow:0 2px 6px rgba(22,163,74,.35)}
.add:active{transform:scale(.92)}
.add.no{background:#e5e7eb;box-shadow:none;color:#6b7280}

/* ------------------------------------------------------------------ lojas */
.lji{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--ln2);cursor:pointer}
.lji:last-child{border-bottom:0}
.ck{width:24px;height:24px;border-radius:6px;border:2px solid #cbd5e1;flex-shrink:0;display:grid;place-items:center;
    background:#fff;color:#fff;font-size:12px;transition:.12s}
.ck.on{background:var(--vd3);border-color:var(--vd3)}
.ck i{opacity:0}.ck.on i{opacity:1}
.lji .in{flex:1;min-width:0}
.lji .n{font-weight:700;font-size:14px;line-height:1.25}
.lji .c{font-size:12px;color:var(--tm);margin-top:1px}
.lji .dt{text-align:left;flex-shrink:0;min-width:64px}
.lji .dt .k{font-size:10.5px;color:var(--tm)}
.lji .dt .v{font-size:13px;font-weight:700}
.chip{display:inline-flex;flex-direction:column;padding:5px 9px;border-radius:8px;font-size:11px;font-weight:700;
      line-height:1.2;flex-shrink:0;white-space:nowrap}
.chip small{font-size:10px;font-weight:500;color:var(--tm)}
.chip.sem{background:var(--amc);color:var(--am)}
.chip.ab{background:var(--azc);color:var(--az)}
.chip.ok{background:var(--vcl);color:#166534}
.chip.er{background:var(--vmc);color:var(--vm)}

.sel-todas{display:inline-flex;align-items:center;gap:8px;background:var(--vbg);color:#14532d;border-radius:12px;
           padding:0 14px;height:46px;font-size:13px;font-weight:700;white-space:nowrap;border:0}
.sel-todas .ck{width:20px;height:20px;border-radius:50%}

/* ------------------------------------------------------------------ produto (detalhe) */
.pd-top{position:relative;background:linear-gradient(180deg,#f7fbf8,#fff);padding:14px 14px 4px;text-align:center}
.pd-top .emoji{font-size:84px;line-height:1.05}
.pd-top .fav{position:absolute;top:12px;right:14px;color:var(--vm);font-size:19px}
.pd-nome{padding:4px 14px 10px}
.pd-nome .n{font-size:21px;font-weight:800;letter-spacing:-.4px}
.pd-nome .c{font-size:12.5px;color:var(--tm);margin-top:1px}
.px2{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}
.px2 .b{border:1px solid var(--ln);border-radius:11px;padding:9px 11px}
.px2 .b.pr{background:#fff1f2;border-color:#fecdd3}
.px2 .k{font-size:11.5px;color:var(--tm);font-weight:600}
.px2 .b.pr .k{color:var(--vm)}
.px2 .v{font-size:19px;font-weight:800;letter-spacing:-.4px;margin-top:2px}
.px2 .b.pr .v{color:var(--vm)}
.px3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px 12px}
.px3 .b{background:#f7f9f8;border-radius:10px;padding:8px 9px}
.px3 .k{font-size:10px;color:var(--tm);line-height:1.25}
.px3 .v{font-size:14.5px;font-weight:800;margin-top:3px}
.vig{margin:0 12px 12px;background:var(--vbg);color:#166534;border-radius:10px;padding:9px 11px;font-size:12px;font-weight:600;
     display:flex;align-items:center;gap:8px}

/* ------------------------------------------------------------------ tabelas */
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{padding:8px 12px;color:var(--tm);font-weight:600;font-size:11px;text-align:left;
         background:#f8faf9;border-bottom:1px solid var(--ln)}
tbody td{padding:9px 12px;border-bottom:1px solid var(--ln2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.n{text-align:right;font-variant-numeric:tabular-nums}
.qi{width:74px;height:36px;border:1px solid var(--ln);border-radius:8px;padding:0 8px;font-size:14px;font-weight:700;
    text-align:right;outline:0;color:var(--tx);background:#fff}
.qi:focus{border-color:var(--vd3);box-shadow:0 0 0 3px rgba(22,163,74,.12)}

/* ------------------------------------------------------------------ blocos de resumo */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tri .b{background:#f7f9f8;border-radius:10px;padding:9px 10px}
.tri .k{font-size:10.5px;color:var(--tm);line-height:1.3}
.tri .v{font-size:16px;font-weight:800;margin-top:3px;letter-spacing:-.3px}
.tot{background:var(--vbg);border-radius:12px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.tot .k{font-size:12.5px;color:#166534;font-weight:600}
.tot .v{font-size:22px;font-weight:800;color:#14532d;letter-spacing:-.4px}
.aviso{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--tm);padding:10px 14px}
.aviso i{margin-top:1px}

.opt{display:flex;gap:12px;padding:13px 14px;border-radius:12px;background:#f7f9f8;cursor:pointer;align-items:flex-start}
.opt + .opt{margin-top:8px}
.opt.on{background:var(--vbg);box-shadow:inset 0 0 0 1.5px var(--vd3)}
.opt .rd{width:22px;height:22px;border-radius:50%;border:2px solid #cbd5e1;flex-shrink:0;display:grid;place-items:center;margin-top:1px}
.opt.on .rd{border-color:var(--vd)}
.opt.on .rd::after{content:'';width:11px;height:11px;border-radius:50%;background:var(--vd)}
.opt .t{font-weight:700;font-size:14px;line-height:1.3}
.opt .d{font-size:12px;color:var(--tm);margin-top:2px;line-height:1.4}

.checklist div{display:flex;gap:8px;font-size:12.5px;color:#374151;padding:3px 0}
.checklist i{color:var(--vd3);margin-top:2px}

/* ------------------------------------------------------------------ botões */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:12px;
     font-size:15.5px;font-weight:700;height:52px;padding:0 16px;cursor:pointer;width:100%;color:#fff;background:var(--vd)}
.btn:active{filter:brightness(.92)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.sec{background:#fff;color:var(--vd);box-shadow:inset 0 0 0 1.5px var(--vd)}
.btn.cinza{background:#fff;color:var(--tx);box-shadow:inset 0 0 0 1px var(--ln)}
.btn.sm{height:38px;font-size:13px;border-radius:9px;width:auto;padding:0 14px}
/* fica ACIMA do rodapé .nav — some a safe-area (home indicator do iPhone) senão o
   rodapé cobre o fim do botão "Revisar pedido" (cortando). z-index acima da nav. */
.fixo{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0));
      padding:10px 12px 10px;z-index:1001;
      background:linear-gradient(180deg,rgba(242,244,243,0),var(--bg) 30%)}
.espaco-fixo{height:74px}

/* ------------------------------------------------------------------ alertas */
.alerta{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:11px 13px;font-size:12.5px;margin-bottom:10px}
.alerta i{font-size:16px;margin-top:1px}
.alerta b{display:block;font-size:13px}
.alerta span{display:block;margin-top:2px;word-break:break-word}
.alerta.er{background:var(--vmc);color:#7f1d1d}
.alerta.av{background:var(--amc);color:#7c2d12}
.alerta.ok{background:var(--vcl);color:#14532d}
.alerta.in{background:var(--azc);color:#1e3a8a}

.vazio{padding:36px 20px;text-align:center;color:var(--tm2);font-size:13px;line-height:1.5}
.vazio i{font-size:34px;display:block;margin-bottom:10px;opacity:.55}

/* ------------------------------------------------------------------ formulário (perfil) */
.frm{padding:12px 14px}
.fg{margin-bottom:12px}
.fg label{display:block;font-size:12px;font-weight:700;color:#374151;margin-bottom:5px}
.fg label small{font-weight:500;color:var(--tm)}
.fg input,.fg select,.fg textarea{width:100%;height:44px;border:1px solid var(--ln);border-radius:10px;padding:0 12px;
     font-size:14px;outline:0;background:#fff;color:var(--tx)}
.fg textarea{height:auto;padding:10px 12px;min-height:70px;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--vd3);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.fg .hint{font-size:11px;color:var(--tm);margin-top:4px;line-height:1.35}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.sw .t{font-size:13.5px;font-weight:600}.sw .d{font-size:11.5px;color:var(--tm);margin-top:1px}
.sw input{width:46px;height:26px;appearance:none;-webkit-appearance:none;background:#d1d5db;border-radius:99px;
          position:relative;cursor:pointer;flex-shrink:0;transition:.15s}
.sw input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.sw input:checked{background:var(--vd3)}
.sw input:checked::after{left:23px}
.tit-sec{font-size:11.5px;font-weight:800;color:var(--tm);text-transform:uppercase;letter-spacing:.06em;padding:14px 16px 6px}

/* ------------------------------------------------------------------ gráfico barras (devoluções) */
.bars{display:flex;align-items:flex-end;gap:14px;height:120px;padding:10px 16px 0}
.bars .c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bars .c b{font-size:11px;margin-bottom:4px}
.bars .c i{display:block;width:100%;max-width:42px;background:#dbe3ea;border-radius:6px 6px 0 0}
.bars .c.at i{background:#f87171}
.bars .c span{font-size:11px;color:var(--tm);margin-top:5px}
.lnk{display:flex;align-items:center;gap:10px;padding:13px 14px;border-top:1px solid var(--ln2);font-size:13.5px;font-weight:600}
.lnk i:first-child{color:var(--tm);width:18px}
.lnk i:last-child{margin-left:auto;color:var(--tm2)}

/* ------------------------------------------------------------------ rodapé */
.nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--ln);
     padding:6px 4px calc(6px + env(safe-area-inset-bottom,0));display:grid;grid-template-columns:repeat(4,1fr);z-index:1000}
.nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--tm2);font-size:11px;font-weight:600;padding:4px 0}
.nav a i{font-size:19px}
.nav a.on{color:var(--vd)}

/* ------------------------------------------------------------------ loader */
#vd-loader{position:fixed;inset:0;z-index:999;background:rgba(242,244,243,.86);backdrop-filter:blur(2px);
           display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px}
#vd-loader.on{display:flex}
#vd-loader .an{width:46px;height:46px;border-radius:50%;border:4px solid var(--vcl);border-top-color:var(--vd3);
               animation:vdg .8s linear infinite;margin-bottom:6px}
#vd-loader b{font-size:14px;color:#14532d}
#vd-loader span{font-size:12px;color:var(--tm)}
@keyframes vdg{to{transform:rotate(360deg)}}