/* ===================================================
   Passeios MVP — Design Tokens & Estilos Globais
   Extraído do protótipo original. Não altere os tokens
   visuais sem aprovação.
   =================================================== */

/* Reset */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}

/* Base */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:#e9e7e0;
  color:#1b1b19;
}

/* Shell do app */
.app{
  max-width:430px;
  margin:0 auto;
  background:#faf9f5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* Topbar */
.bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid #e8e6dd;
  background:#fff;
  position:sticky;
  top:0;
  z-index:5;
}
.bar h1{font-size:17px;font-weight:600;margin:0;flex:1}

/* Botão ícone na topbar */
.icbtn{
  font-size:22px;
  color:#6b6a64;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  line-height:1;
}

/* Corpo scrollável */
.body{flex:1;padding:16px;padding-bottom:90px}

/* Labels de formulário */
.lbl{font-size:12px;color:#6b6a64;margin:12px 0 5px;display:block}

/* Inputs, textareas, selects */
input,textarea,select{
  width:100%;
  font:inherit;
  font-size:15px;
  padding:11px 12px;
  border:1px solid #e5e3da;
  border-radius:10px;
  background:#fff;
  color:#1b1b19;
  outline:none;
}
textarea{resize:none}
input:focus,textarea:focus,select:focus{border-color:#185fa5}

/* Botões principais */
.btn{
  display:block;
  width:100%;
  text-align:center;
  padding:13px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  border:1px solid #cfcdc4;
  background:#fff;
  color:#1b1b19;
  cursor:pointer;
  text-decoration:none;
  margin-top:10px;
}
.btn:disabled{opacity:.4}
.btn.primary{background:#1b1b19;color:#fff;border-color:#1b1b19}
.btn.wa{background:#0f6e56;color:#fff;border-color:#0f6e56}
.btn.ghost{border:none;background:none;color:#185fa5;font-weight:500;padding:8px;margin-top:6px}

/* Botão "adicionar" tracejado */
.btnadd{
  display:block;
  width:100%;
  border:1px dashed #cdcabf;
  background:#fff;
  border-radius:10px;
  padding:12px;
  color:#185fa5;
  font-weight:500;
  font-size:14px;
  cursor:pointer;
  margin-bottom:11px;
}

/* Botões pequenos (salvar/cancelar no canto) */
.btnsm{
  padding:8px 16px;
  font-size:13px;
  border-radius:9px;
  font-weight:600;
  border:1px solid #cfcdc4;
  background:#fff;
  color:#1b1b19;
  cursor:pointer;
}
.btnsm.pri{background:#1b1b19;color:#fff;border-color:#1b1b19}
.btnsm.gh{border:none;background:none;color:#6b6a64}

/* Cards */
.card{
  background:#fff;
  border:1px solid #e8e6dd;
  border-radius:12px;
  padding:13px;
  margin-bottom:11px;
}

/* Bloco de adição (add block) */
.addblock{
  background:#fff;
  border:1px solid #d4d1c6;
  border-radius:12px;
  padding:13px;
  margin-bottom:11px;
}

/* Layout utilitários */
.row{display:flex;align-items:center;gap:9px}
.between{display:flex;align-items:center;justify-content:space-between}
.muted{color:#6b6a64;font-size:13px}
.sub{color:#6b6a64;font-size:12px}
.big{font-size:26px;font-weight:600}
.center{text-align:center}

/* Tab bar */
.tabbar{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  display:flex;
  background:#fff;
  border-top:1px solid #e8e6dd;
  z-index:6;
}
.tabbar button{
  flex:1;
  border:none;
  background:none;
  padding:8px 0 9px;
  font-size:11px;
  color:#9a988f;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  cursor:pointer;
}
.tabbar button.on{color:#185fa5}
.tabbar i{font-size:22px}

/* Pills de status */
.pill{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600;white-space:nowrap}
.pago{background:#e1f5ee;color:#0f6e56}
.pend{background:#faeeda;color:#854f0b}

/* Opções (onboarding verticais, etc.) */
.opt{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #e8e6dd;
  border-radius:12px;
  padding:16px;
  cursor:pointer;
  background:#fff;
  margin-bottom:11px;
}
.opt i{font-size:26px;color:#6b6a64}
.opt.accent{border:2px solid #185fa5}
.opt.accent i{color:#185fa5}
.opt .t{font-size:15px;font-weight:600}

/* Métricas */
.metric{flex:1;background:#fff;border:1px solid #e8e6dd;border-radius:12px;padding:11px}
.metric .v{font-size:20px;font-weight:600;margin-top:2px}

/* Chips selecionáveis (export) */
.chip{
  flex:1;
  text-align:center;
  border:1px solid #e5e3da;
  border-radius:10px;
  padding:10px;
  font-size:13px;
  color:#6b6a64;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.chip.on{border-color:#185fa5;background:#e6f1fb;color:#185fa5;font-weight:600}

/* Dot indicador de status */
.dot{width:9px;height:9px;border-radius:50%;flex:none}

/* Caixa de link */
.link{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;
  background:#fff;
  border:1px solid #e5e3da;
  border-radius:10px;
  padding:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Balão de mensagem WhatsApp */
.wabubble{
  background:#e1f5ee;
  color:#0f6e56;
  border-radius:12px;
  padding:11px;
  font-size:13px;
  line-height:1.5;
}

/* Overlay e bottom sheet */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:30;
}
.sheet{
  background:#faf9f5;
  width:100%;
  max-width:430px;
  border-radius:18px 18px 0 0;
  padding:18px 16px 22px;
}

/* Caixa de QR */
.qrbox{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:12px}

/* Item clicável em lista (pick) */
.pick{
  padding:9px 8px;
  border-radius:8px;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  font-size:14px;
}
.pick:active{background:#f1efe8}

/* Divisor com texto */
.divider{display:flex;align-items:center;gap:8px;color:#9a988f;font-size:12px;margin:11px 0}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:#e8e6dd}

/* Estado vazio */
.empty{text-align:center;color:#9a988f;padding:40px 10px;font-size:14px}
.empty i{font-size:34px;display:block;margin-bottom:8px}

/* Botões salvar/cancelar no canto inferior do bloco */
.cornsave{display:flex;justify-content:flex-end;gap:8px;margin-top:11px}

/* Tag "calculado" inline */
.tag-calc{
  font-size:10px;
  background:#faeeda;
  color:#854f0b;
  border-radius:4px;
  padding:2px 6px;
  font-weight:600;
  vertical-align:middle;
  margin-left:4px;
}

/* Stepper de quantidade */
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{
  width:32px;height:32px;border-radius:8px;
  border:1px solid #cfcdc4;background:#fff;
  font-size:18px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.stepper span{font-size:16px;font-weight:600;min-width:24px;text-align:center}

/* Campo total editável */
.total-edit-wrap{position:relative;display:flex;align-items:center}
.total-edit-wrap input{font-size:18px;font-weight:600;padding-right:80px}
.total-edit-hint{
  position:absolute;right:10px;
  font-size:11px;color:#854f0b;
  pointer-events:none;white-space:nowrap;
}

/* Seletor de vertical (onboarding) */
.vertical-opt{
  display:flex;align-items:center;gap:12px;
  border:2px solid #e8e6dd;border-radius:12px;padding:14px;
  cursor:pointer;background:#fff;margin-bottom:11px;
  transition:border-color .15s;
}
.vertical-opt.on{border-color:#185fa5;background:#e6f1fb}
.vertical-opt i{font-size:26px;color:#6b6a64}
.vertical-opt.on i{color:#185fa5}
.vertical-opt .t{font-size:15px;font-weight:600}
.vertical-opt .sub{font-size:12px;color:#6b6a64}