/* Orange · base visual compartilhada da proposta e dos mockups
   Laranja oficial #FF7200 · títulos Nunito (arredondada, eco do VAG Rounded) · texto Nunito Sans */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap");

:root{
  --or:#FF7200; --or-600:#E86400; --or-700:#C85600; --or-50:#FFF4EB; --or-100:#FFE4CC; --or-200:#FFC999;
  --ink:#1F1A16; --ink-2:#4A423C; --muted:#7A7068; --line:#ECE6E0; --line-2:#F4EFEA;
  --bg:#F7F4F1; --surface:#FFFFFF; --surface-2:#FBF9F7;
  --ok:#17834B; --ok-50:#E6F5EC; --warn:#B86A00; --warn-50:#FFF3DC; --bad:#C42B1C; --bad-50:#FDECEA;
  --info:#1D63D6; --info-50:#E8F0FD; --violet:#6B3FD1; --violet-50:#F0EAFD;
  --f-display:"Nunito","Varela Round",system-ui,sans-serif;
  --f-body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(60,30,0,.06),0 1px 1px rgba(60,30,0,.04);
  --sh-2:0 6px 18px rgba(60,30,0,.08),0 2px 6px rgba(60,30,0,.05);
  --sh-3:0 24px 60px rgba(60,30,0,.18),0 8px 20px rgba(60,30,0,.10);
  --grad:linear-gradient(135deg,#FF8A1F 0%,#FF7200 45%,#F25C00 100%);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.15;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.num,.tab{font-variant-numeric:tabular-nums}
.num{text-align:right;white-space:nowrap}
.muted{color:var(--muted)}
.hidden,[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── barra superior das páginas de mockup ───────────────────────── */
.demo-bar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.demo-bar .in{max-width:1320px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.demo-bar img{height:30px;width:auto}
.demo-bar .back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;font-weight:700;font-size:14px;padding:6px 10px;border-radius:999px}
.demo-bar .back:hover{background:var(--or-50);color:var(--or-700)}
.demo-bar h1{font-size:17px;font-weight:800}
.demo-bar .sp{flex:1}
.model-tags{display:flex;gap:6px;flex-wrap:wrap}
.mtag{font-family:var(--f-display);font-weight:800;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--or-50);color:var(--or-700);border:1px solid var(--or-100)}
.btn-reset{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;color:var(--ink-2)}
.btn-reset:hover{border-color:var(--or-200);color:var(--or-700)}
.demo-note{font-size:12.5px;color:var(--muted)}
@media (max-width:860px){
  .demo-bar .in{flex-wrap:nowrap;gap:8px;padding-block:8px;height:54px}
  .demo-bar img,.demo-bar .model-tags,.demo-bar .demo-note{display:none}
  .demo-bar .back span{display:none}
  .demo-bar h1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .btn-reset{font-size:12px;padding:5px 10px;white-space:nowrap}
}
html.shot .demo-bar{display:none}
html.shot .phone,html.shot .phone.terminal{height:100dvh}

/* ── palco ───────────────────────────────────────────────────────── */
.stage{max-width:1320px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-left,0px)) 60px;display:flex;gap:36px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.stage-side{flex:1 1 300px;max-width:420px;display:flex;flex-direction:column;gap:14px;padding-top:12px}
.stage-side h2{font-size:28px;font-weight:900}
.stage-side .lead{color:var(--ink-2);font-size:16px}
.tour{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.tour li{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:14px}
.tour li b{font-family:var(--f-display)}
.tour .dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--or);color:#fff;font:800 12px/22px var(--f-display);text-align:center}

/* ── moldura de celular ──────────────────────────────────────────── */
.phone{position:relative;width:390px;height:820px;flex:none;border-radius:56px;background:#111;padding:12px;box-shadow:var(--sh-3),inset 0 0 0 2px #2a2a2a}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:118px;height:32px;border-radius:20px;background:#000;z-index:30}
.phone .screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column}
.statusbar{flex:none;height:52px;padding:0 30px 0 34px;display:flex;align-items:center;justify-content:space-between;font:800 14px var(--f-display);color:inherit;position:relative;z-index:5}
.statusbar .ic{display:flex;gap:6px;align-items:center}
.statusbar svg{width:17px;height:12px;fill:currentColor}
/* terminal de pagamento (PDV) */
.phone.terminal{width:400px;height:820px;border-radius:38px;background:linear-gradient(180deg,#2b2b2e,#151517);padding:14px 14px 70px}
.phone.terminal::before{display:none}
.phone.terminal .screen{border-radius:22px}
.phone.terminal::after{content:"";position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:120px;height:26px;border-radius:13px;background:#0c0c0d;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.phone.terminal .statusbar{height:34px;padding:0 18px}
@media (max-width:520px){
  .stage{padding:0;gap:0}
  .stage-side{display:none}
  .phone,.phone.terminal{width:100%;height:calc(100dvh - 54px);border-radius:0;padding:0;box-shadow:none;background:transparent}
  .phone::before,.phone.terminal::after{display:none}
  .phone .screen,.phone.terminal .screen{border-radius:0}
  .statusbar{display:none}
}

/* ── moldura de navegador (web) ──────────────────────────────────── */
.browser{width:100%;max-width:1280px;background:var(--surface);border-radius:14px;box-shadow:var(--sh-3);overflow:hidden;border:1px solid #e3dbd3}
.browser .chrome{height:40px;background:#F1ECE7;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid #e3dbd3}
.browser .chrome i{width:11px;height:11px;border-radius:50%;background:#E0D6CC;display:block}
.browser .chrome i:nth-child(1){background:#FF6159}.browser .chrome i:nth-child(2){background:#FFBD2E}.browser .chrome i:nth-child(3){background:#28C941}
.browser .url{margin-left:12px;flex:1;max-width:520px;height:26px;border-radius:7px;background:#fff;border:1px solid #e3dbd3;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:12.5px;color:var(--muted)}
.browser .url b{color:var(--ink);font-weight:600}
.browser .viewport{height:min(820px,calc(100dvh - 150px));min-height:620px;overflow:hidden;display:flex}
@media (max-width:860px){
  .browser{border-radius:0;box-shadow:none;border:0}
  .browser .chrome{display:none}
  .browser .viewport{height:auto;min-height:calc(100dvh - 54px);overflow:visible}
  .stage.web{padding:0}
}

/* ── componentes ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r);padding:11px 18px;font-family:var(--f-display);font-weight:800;font-size:15px;background:var(--or);color:#fff;box-shadow:0 4px 12px rgba(255,114,0,.28);transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{background:var(--or-600)}
.btn:active{transform:translateY(1px)}
.btn.lg{padding:15px 22px;font-size:17px;border-radius:16px}
.btn.block{width:100%}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--or-200);color:var(--or-700);background:var(--or-50)}
.btn.soft{background:var(--or-50);color:var(--or-700);box-shadow:none}
.btn.soft:hover{background:var(--or-100)}
.btn.ok{background:var(--ok);box-shadow:0 4px 12px rgba(23,131,75,.25)}
.btn.dark{background:var(--ink);box-shadow:none}
.btn:disabled{opacity:.45;pointer-events:none}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{border-color:var(--or-200);color:var(--or-700)}
.icon-btn svg,.btn svg{width:18px;height:18px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;font-weight:700;font-size:13.5px;color:var(--ink-2)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* pílula de status (padrão Orange: âmbar processando → azul concluído) */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-weight:800;font-size:12px;font-family:var(--f-display);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.enviado{background:var(--warn-50);color:var(--warn)}
.pill.aprovado{background:var(--violet-50);color:var(--violet)}
.pill.separacao{background:var(--or-50);color:var(--or-700)}
.pill.rota{background:var(--info-50);color:var(--info)}
.pill.entregue{background:var(--ok-50);color:var(--ok)}
.pill.cancelado{background:var(--bad-50);color:var(--bad)}
.pill.autorizada{background:var(--info-50);color:var(--info)}
.pill.processando{background:var(--warn-50);color:var(--warn)}
.pill.processando::before{width:9px;height:9px;background:none;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.field{display:flex;flex-direction:column;gap:5px}
.field label{font-weight:700;font-size:13px;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 12px;font-size:15px;transition:border-color .12s,box-shadow .12s}
.input:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 4px rgba(255,114,0,.14)}
.input.num{text-align:right}
.search{position:relative}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.search .input{padding-left:38px}

.table-wrap{overflow:auto}
table.t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.t th{position:sticky;top:0;background:var(--surface-2);text-align:left;font:800 11.5px var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.t th.num,table.t td.num{text-align:right}
table.t tbody tr{transition:background .1s}
table.t tbody tr.click{cursor:pointer}
table.t tbody tr.click:hover{background:var(--or-50)}

.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .l{font-size:12.5px;font-weight:700;color:var(--muted)}
.kpi .v{font:900 26px var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .d{font-size:12.5px;font-weight:700}
.kpi .d.up{color:var(--ok)} .kpi .d.down{color:var(--bad)}

/* toast */
.toast-host{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:#fff;border-radius:14px;padding:11px 16px;font-weight:700;font-size:14px;box-shadow:var(--sh-3);display:flex;align-items:center;gap:10px;animation:toastIn .25s ease-out}
.toast .tk{width:20px;height:20px;border-radius:50%;background:var(--ok);display:grid;place-items:center;flex:none}
.toast .tk svg{width:12px;height:12px;color:#fff}
@keyframes toastIn{from{transform:translateY(10px);opacity:0}}

/* modal com tamanho padronizado */
.modal-back{position:fixed;inset:0;background:rgba(31,26,22,.45);backdrop-filter:blur(2px);z-index:200;display:grid;place-items:center;padding:16px;animation:fade .15s}
.modal{width:min(640px,100%);height:min(560px,calc(100dvh - 32px));background:var(--surface);border-radius:20px;box-shadow:var(--sh-3);display:flex;flex-direction:column;overflow:hidden}
.modal header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.modal header h3{font-size:19px;flex:1}
.modal .body{flex:1;overflow:auto;padding:18px 20px}
.modal footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--surface-2)}
@keyframes fade{from{opacity:0}}
/* folha que sobe (dentro do celular) */
.sheet-back{position:absolute;inset:0;background:rgba(31,26,22,.4);z-index:40;display:flex;align-items:flex-end;animation:fade .15s}
.sheet{width:100%;max-height:88%;background:var(--surface);border-radius:26px 26px 0 0;display:flex;flex-direction:column;overflow:hidden;animation:up .22s ease-out}
.sheet .grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:9px auto 2px}
@keyframes up{from{transform:translateY(40px);opacity:.4}}

/* barra de abas inferior (apps) */
.tabbar{flex:none;display:flex;justify-content:space-around;background:var(--surface);border-top:1px solid var(--line);padding:8px 6px calc(10px + env(safe-area-inset-bottom,0px))}
.tabbar button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;font:800 11px var(--f-display);color:var(--muted);padding:4px 10px;border-radius:12px;position:relative}
.tabbar button svg{width:23px;height:23px}
.tabbar button[aria-current="page"]{color:var(--or)}
.tabbar .badge{position:absolute;top:0;right:6px;min-width:17px;height:17px;border-radius:9px;background:var(--or);color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 4px}

.scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0;height:0}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 20px;color:var(--muted)}
.empty svg{width:44px;height:44px;color:var(--or-200)}