:root{
  --verde:#1F4D3A; --verde-esc:#143327; --verde-claro:#E4EEE7; --lima:#CDE85C;
  --fundo:#F6F5F0; --card:#FFFFFF; --texto:#17201B; --suave:#66706A; --borda:#E2E0D8;
  --perigo:#B23A32; --perigo-bg:#FBEAE8; --ok:#2F6B1F; --ok-bg:#E6F2DC; --aviso:#8A5208; --aviso-bg:#FBEFD9;
  --azul:#1F5A8A; --azul-bg:#E3EEF7; --wa:#1E9E4F; --ig:#B8327A; --quente:#C2410C; --quente-bg:#FDE7D8;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--fundo); color:var(--texto); font-size:15px; line-height:1.45;}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit;}
a{color:var(--verde);}
h1{font-size:21px; margin:0 0 4px; letter-spacing:-0.01em;}
h2{font-size:15px; margin:0 0 10px;}
h3{font-size:12px; margin:22px 0 8px; text-transform:uppercase; letter-spacing:0.06em; color:var(--suave); font-weight:700;}
p{margin:0 0 10px;}
.sub{font-size:13.5px; color:var(--suave); margin:0 0 16px;}
.meta{font-size:12.5px; color:var(--suave);}
.erro{font-size:13px; color:var(--perigo); margin:8px 0 0;}

/* ---------- estrutura ---------- */
.casca{display:flex; min-height:100vh;}
.lado{width:216px; background:var(--verde-esc); color:#fff; padding:18px 12px; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column;}
.marca{font-weight:800; font-size:16px; padding:0 10px 16px; letter-spacing:-0.01em;}
.marca small{display:block; font-weight:400; font-size:11.5px; opacity:0.65; letter-spacing:0;}
.lado a{display:block; color:#fff; opacity:0.78; text-decoration:none; padding:9px 10px; border-radius:9px; font-size:14px; margin-bottom:2px;}
.lado a:hover{opacity:1; background:rgba(255,255,255,0.07);}
.lado a.on{opacity:1; background:rgba(255,255,255,0.14); font-weight:600;}
.lado .sep{font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.45; padding:14px 10px 4px;}
.lado .pe{margin-top:auto; font-size:12.5px; opacity:0.75; padding:14px 10px 0;}
.conteudo{flex:1; min-width:0; padding:22px 26px 60px; max-width:1040px;}
.topo-cel, .abas-cel{display:none;}
@media(max-width:820px){
  .lado{display:none;}
  .casca{display:block;}
  .conteudo{padding:14px 14px 96px;}
  .topo-cel{display:flex; align-items:center; justify-content:space-between; background:var(--verde-esc); color:#fff; padding:11px 14px; position:sticky; top:0; z-index:30; font-weight:700;}
  .topo-cel button{background:none; border:none; color:#fff; font-size:13px; opacity:0.85; padding:4px;}
  .abas-cel{display:flex; position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--borda); z-index:40; padding-bottom:env(safe-area-inset-bottom);}
  .abas-cel a{flex:1; text-align:center; text-decoration:none; color:var(--suave); font-size:11px; padding:8px 2px 9px; font-weight:600;}
  .abas-cel a b{display:block; font-size:19px; line-height:1.1; font-weight:400;}
  .abas-cel a.on{color:var(--verde);}
}

/* ---------- peças ---------- */
.card{background:var(--card); border:1px solid var(--borda); border-radius:14px; padding:15px; margin-bottom:12px;}
.linha{display:flex; gap:10px; align-items:center;}
.entre{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.cresce{flex:1; min-width:0;}
.grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
.grade2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media(max-width:520px){ .grade2{grid-template-columns:1fr;} }
label.l{display:block; font-size:12.5px; font-weight:600; margin:0 0 5px;}
.campo{margin-bottom:13px;}
.in{width:100%; padding:10px 11px; border:1px solid var(--borda); border-radius:9px; background:#fff; font-size:15px;}
.in:focus{outline:2px solid var(--verde-claro); border-color:var(--verde);}
textarea.in{min-height:84px; resize:vertical;}
select.in{appearance:auto;}
.ajuda{font-size:12px; color:var(--suave); margin:5px 0 0;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; border:1.5px solid transparent; border-radius:10px; padding:10px 15px; font-size:14px; font-weight:600; cursor:pointer; background:var(--verde); color:#fff; white-space:nowrap;}
.btn:hover{filter:brightness(1.07);}
.btn.bloco{display:flex; width:100%;}
.btn.claro{background:#fff; color:var(--verde-esc); border-color:var(--borda);}
.btn.wa{background:var(--wa);} .btn.ig{background:var(--ig);}
.btn.perigo{background:#fff; color:var(--perigo); border-color:#EBB3AE;}
.btn.p{padding:7px 11px; font-size:13px;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.link{background:none; border:none; color:var(--verde); font-size:13px; cursor:pointer; padding:0; text-decoration:underline;}
.acoes{display:flex; gap:8px; flex-wrap:wrap;}
.pill{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; background:#EEEDE6; color:#4B524E; white-space:nowrap;}
.pill.A{background:var(--verde); color:#fff;} .pill.B{background:var(--verde-claro); color:var(--verde-esc);} .pill.C{background:#EEEDE6; color:#6B706C;}
.pill.quente{background:var(--quente-bg); color:var(--quente);} .pill.morna{background:var(--aviso-bg); color:var(--aviso);} .pill.fria{background:var(--azul-bg); color:var(--azul);}
.pill.ok{background:var(--ok-bg); color:var(--ok);} .pill.aviso{background:var(--aviso-bg); color:var(--aviso);} .pill.perigo{background:var(--perigo-bg); color:var(--perigo);}
.pill.azul{background:var(--azul-bg); color:var(--azul);} .pill.lima{background:var(--lima); color:var(--verde-esc);}
.nota{font-size:13px; border-radius:10px; padding:10px 12px; margin-bottom:12px;}
.nota.ok{background:var(--ok-bg); color:var(--ok);} .nota.aviso{background:var(--aviso-bg); color:var(--aviso);}
.nota.info{background:var(--verde-claro); color:var(--verde-esc);} .nota.perigo{background:var(--perigo-bg); color:var(--perigo);}
.item{display:flex; gap:12px; align-items:center; padding:12px 13px; border:1px solid var(--borda); border-radius:12px; background:#fff; margin-bottom:8px; cursor:pointer; text-decoration:none; color:inherit;}
.item:hover{border-color:#C9C6BB;}
.item .nome{font-weight:600; font-size:14.5px; margin:0; overflow-wrap:anywhere;}
.item .pills{display:flex; gap:5px; flex-wrap:wrap; margin-top:5px;}
.filtros{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.filtros .in{width:auto; flex:1; min-width:128px; padding:8px 9px; font-size:13.5px;}
.seg{display:inline-flex; border:1px solid var(--borda); border-radius:10px; overflow:hidden; background:#fff;}
.seg button{background:none; border:none; padding:8px 13px; font-size:13px; font-weight:600; color:var(--suave); cursor:pointer;}
.seg button.on{background:var(--verde); color:#fff;}
.chips{display:flex; flex-wrap:wrap; gap:7px;}
.chip{padding:7px 12px; border-radius:20px; border:1px solid var(--borda); background:#fff; font-size:13px; color:var(--suave); cursor:pointer;}
.chip.on{background:var(--verde); border-color:var(--verde); color:#fff;}
.chips.rolar{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:3px;}
.chips.rolar::-webkit-scrollbar{display:none;} .chips.rolar .chip{flex-shrink:0;}
.kv{font-size:13.5px; margin:3px 0; overflow-wrap:anywhere;} .kv b{font-weight:600;} .kv span{color:var(--suave);}
.vazio{text-align:center; color:var(--suave); font-size:14px; padding:28px 10px;}
.carregando{text-align:center; color:var(--suave); padding:60px 0;}
.num{font-size:22px; font-weight:800; letter-spacing:-0.02em;}
.stat{background:#fff; border:1px solid var(--borda); border-radius:12px; padding:12px 13px;}
.stat .r{font-size:12px; color:var(--suave);}
table.t{width:100%; border-collapse:collapse; font-size:13.5px;}
table.t th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--suave); padding:6px 6px; border-bottom:1px solid var(--borda); font-weight:700;}
table.t td{padding:8px 6px; border-bottom:1px solid var(--borda); vertical-align:top;}
table.t td.n, table.t th.n{text-align:right; white-space:nowrap;}
.rolavel{overflow-x:auto;}
.barra{height:6px; border-radius:6px; background:var(--verde-claro); overflow:hidden; min-width:60px;}
.barra div{height:100%; background:var(--verde);}
.tempo{border-left:2px solid var(--borda); margin-left:6px; padding-left:14px;}
.tempo div.ev{position:relative; padding:0 0 13px; font-size:13.5px;}
.tempo div.ev:before{content:""; position:absolute; left:-20px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--verde); border:2px solid var(--fundo);}
.tempo div.ev.sistema:before{background:#B9B6AA;}
.tempo .q{font-size:12px; color:var(--suave);}
.toast{position:fixed; left:50%; bottom:86px; transform:translateX(-50%); background:#17201B; color:#fff; padding:10px 16px; border-radius:10px; font-size:13.5px; z-index:99; display:none; max-width:92%; text-align:center;}
.toast button{background:none; border:none; color:var(--lima); font-weight:700; margin-left:10px; cursor:pointer;}
.fundo-modal{position:fixed; inset:0; background:rgba(15,25,20,0.5); z-index:80; display:flex; align-items:flex-end; justify-content:center;}
.modal{background:var(--fundo); width:100%; max-width:620px; max-height:94vh; overflow-y:auto; border-radius:18px 18px 0 0; padding:18px 16px calc(22px + env(safe-area-inset-bottom));}
@media(min-width:700px){ .fundo-modal{align-items:center;} .modal{border-radius:18px;} }
.modal .fechar{float:right; background:none; border:none; font-size:22px; color:var(--suave); cursor:pointer; line-height:1; padding:0 2px;}
.mapa{height:440px; border-radius:14px; border:1px solid var(--borda); overflow:hidden; background:#E9E7DF; z-index:1;}
.mapa.baixo{height:300px;}
.num-parada{display:inline-flex; width:26px; height:26px; border-radius:50%; background:var(--verde); color:#fff; font-weight:700; font-size:13px; align-items:center; justify-content:center; flex-shrink:0;}
.icone-num{background:var(--verde); color:#fff; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.35);}
.op{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--borda); font-size:14px; cursor:pointer;}
.op:last-child{border-bottom:none;} .op input{margin-top:3px; width:17px; height:17px; flex-shrink:0;}
.escolhas{display:flex; gap:7px; flex-wrap:wrap;}
.escolhas button{padding:9px 12px; border-radius:10px; border:1.5px solid var(--borda); background:#fff; font-size:13.5px; font-weight:600; color:var(--suave); cursor:pointer;}
.escolhas button.on{border-color:var(--verde); color:var(--verde-esc); background:var(--verde-claro);}
.senha{position:relative;} .senha button{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--suave); font-size:12px; cursor:pointer;}
.foto{width:54px; height:54px; border-radius:11px; background:#ECEAE2; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#A29F93; font-weight:700; font-size:12px;}
.foto img{width:100%; height:100%; object-fit:cover;}
.interruptor{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--suave); background:none; border:none; cursor:pointer; padding:0;}
.trilho{width:34px; height:19px; border-radius:10px; background:#D6D3C8; position:relative; display:inline-block;}
.trilho.on{background:var(--ok);}
.trilho i{position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:left 0.15s;}
.trilho.on i{left:17px;}
pre.msg{white-space:pre-wrap; font-family:inherit; font-size:13.5px; background:#fff; border:1px solid var(--borda); border-radius:10px; padding:11px; margin:0 0 12px;}

/* ---------- entrada ---------- */
.entrada{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--verde-esc);}
.entrada .caixa{background:var(--fundo); border-radius:18px; padding:26px 22px; width:100%; max-width:380px;}
.entrada .logo{font-size:24px; font-weight:800; letter-spacing:-0.02em; color:var(--verde-esc); margin-bottom:2px;}
.entrada .logo span{background:var(--lima); padding:0 6px; border-radius:6px;}

/* ---------- loja ---------- */
.loja-topo{background:var(--verde-esc); color:#fff; padding:14px 16px; position:sticky; top:0; z-index:30;}
.loja-topo .dentro{max-width:860px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.loja-topo b{font-size:16px; letter-spacing:-0.01em;}
.loja-topo .abas button{background:none; border:none; color:#fff; opacity:0.7; font-size:13.5px; font-weight:600; padding:6px 9px; border-radius:8px; cursor:pointer;}
.loja-topo .abas button.on{opacity:1; background:rgba(255,255,255,0.15);}
.loja{max-width:860px; margin:0 auto; padding:14px 14px 120px;}
.prods{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px;}
.prod{background:#fff; border:1px solid var(--borda); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;}
.prod .img{aspect-ratio:16/10; background:#ECEAE2; display:flex; align-items:center; justify-content:center; color:#A8A598; font-weight:700; font-size:22px; overflow:hidden;}
.prod .img img{width:100%; height:100%; object-fit:cover;}
.prod .c{padding:11px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1;}
.prod .n{font-weight:700; font-size:15px; margin:0;}
.prod .preco{font-weight:800; font-size:16px;}
.prod.fora{opacity:0.55;}
.qtd{display:inline-flex; align-items:center; border:1.5px solid var(--verde); border-radius:10px; overflow:hidden;}
.qtd button{background:var(--verde); color:#fff; border:none; width:36px; height:36px; font-size:18px; cursor:pointer;}
.qtd span{min-width:36px; text-align:center; font-weight:700;}
.carrinho-barra{position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--borda); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); z-index:40;}
.carrinho-barra .dentro{max-width:860px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;}

@media print{
  .lado,.topo-cel,.abas-cel,.nao-imprime,.toast{display:none !important;}
  body{background:#fff;} .conteudo{padding:0; max-width:none;} .card{border:none; padding:0;}
}