
:root{--red:#901734;--navy:#10243a;--muted:#607080;--border:#dce2e8;--bg:#f5f7f9;--white:#fff;--blue:#527ba3;--gold:#bd8b45}*{box-sizing:border-box}body{font:16px/1.52 'Open Sans',Arial,sans-serif;color:var(--navy);margin:0;background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}.wrap{max-width:1100px;margin:auto;padding:24px 16px 100px}.hero{margin-bottom:22px}.eyebrow{letter-spacing:1.8px;color:var(--red);font-size:12px;font-weight:800}.hero h1{font-size:clamp(26px,4vw,40px);margin:6px 0}.hero p{max-width:850px;margin:0;color:#536576}.panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;margin:16px 0;box-shadow:0 3px 16px #14253609}h2{font-size:21px;margin:0 0 13px}h3{font-size:16px;margin:0 0 10px}.hint,.small{font-size:13px;color:var(--muted)}.inline{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.between{display:flex;justify-content:space-between;align-items:center;gap:12px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.three{grid-template-columns:repeat(3,minmax(0,1fr))}label{font-weight:650;display:block;font-size:14px;margin:0 0 5px}input[type=number],input[type=text],select,textarea{width:100%;padding:10px;border:1px solid #bfcad4;border-radius:8px;background:white;color:var(--navy)}input[type=range]{width:100%;accent-color:var(--red)}input[type=checkbox]{accent-color:var(--red);width:17px;height:17px}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mode{border:2px solid var(--border);border-radius:12px;padding:14px;text-align:left;background:white;color:var(--navy);min-height:110px}.mode.active{border-color:var(--red);background:#fff8fa}.mode strong{display:block}.mode span{color:var(--muted);font-size:13px}.btn{border:1px solid var(--red);border-radius:8px;background:var(--red);color:white;padding:10px 15px;font-weight:700}.btn.secondary{color:var(--navy);background:white;border-color:#bfcad4}.btn:focus-visible,.mode:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d39aaa;outline-offset:2px}.rowItem{border:1px solid var(--border);border-radius:10px;margin:8px 0;padding:12px}.rowTop{display:flex;align-items:center;gap:10px;justify-content:space-between}.rowTop .name{display:flex;gap:9px;align-items:center;flex:1}.rowBottom{display:grid;grid-template-columns:1fr 130px 110px;gap:14px;align-items:end;margin-top:9px}.muted{color:var(--muted)}.num{font-variant-numeric:tabular-nums}.weight{font-size:17px;font-weight:800}.qty{display:flex;align-items:center;justify-content:space-between;gap:5px}.qty button{border:1px solid var(--border);border-radius:7px;background:white;width:32px;height:32px}.qty input{width:45px;text-align:center;padding:6px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat{border:1px solid var(--border);background:#fafbfc;border-radius:10px;padding:12px}.stat small{display:block;color:var(--muted)}.stat strong{font-size:23px}.red{color:var(--red)}.bar{height:14px;background:#eef1f4;border-radius:15px;display:flex;overflow:hidden;margin:13px 0}.bar span{height:100%}.categoryBar{margin:10px 0}.categoryBar .track{background:#eef1f4;height:8px;border-radius:10px;overflow:hidden}.categoryBar .fill{background:var(--red);height:100%}hr{border:0;border-top:1px solid var(--border);margin:18px 0}.sticky{position:fixed;bottom:0;left:0;right:0;background:#10243a;color:white;z-index:10;box-shadow:0 -4px 20px #0003}.sticky .inner{max-width:1100px;margin:auto;padding:12px 18px;display:flex;justify-content:space-between;align-items:center}.sticky strong{font-size:21px}.badge{display:inline-flex;font-size:12px;background:#f3e8ec;color:var(--red);padding:3px 8px;border-radius:20px;font-weight:750}.message{padding:12px;border-radius:8px;background:#fff6e9;color:#664513;font-size:13px}.saved-list{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.breakdown{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.hidden{display:none!important}#printList{display:none}.customLine{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end}.tag{font-size:11px;letter-spacing:.4px;color:var(--muted)}@media(max-width:780px){.modes{grid-template-columns:1fr}.mode{min-height:unset}.three,.stats{grid-template-columns:repeat(2,1fr)}.rowBottom{grid-template-columns:1fr 110px}.rowBottom .weightEdit{grid-column:1/3}.customLine{grid-template-columns:1fr 1fr}.customLine>.first{grid-column:1/3}.customLine>button{grid-column:1/3}}@media(max-width:500px){.wrap{padding:14px 10px 90px}.panel{padding:14px}.grid,.three{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.stat strong{font-size:20px}.rowBottom{grid-template-columns:1fr 95px}.sticky strong{font-size:19px}}@media print{body{background:white}.wrap{max-width:none;padding:0}.hero,.panel,.sticky{display:none!important}#printList{display:block;font-size:11pt}#printList h1{font-size:20pt}#printList table{width:100%;border-collapse:collapse}#printList td,#printList th{border-bottom:1px solid #bbb;padding:5px;text-align:left}}

/* Integração ao Manual do Trekking. */
body { background:#fff; }
.wrap { padding:12px 0 20px; max-width:820px; }
.hero h1 { font-family:"Raleway",Arial,sans-serif; font-size:30px; }
.panel { box-shadow:none; border-top:3px solid var(--red); }
#itemList { max-height:620px; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; margin-top:16px; }
.sticky { position:sticky; bottom:0; border-radius:10px; }
.sticky .inner { padding:12px 16px; }
.mode { min-width:0; }
.mode,.btn,.qty button,input,select { touch-action:manipulation; }
.qty button { width:40px; height:40px; flex-shrink:0; }
.qty input { min-width:40px; }
.rowBottom { grid-template-columns:minmax(0,1fr) 130px 140px; }
.rowTop .name { min-width:0; overflow-wrap:anywhere; }
.weight { white-space:nowrap; }
#copyFallback { width:100%; min-height:160px; margin-top:12px; }
#customFeedback { margin:10px 0; }
input[type=checkbox] { flex-shrink:0; }
@media(max-width:780px){.rowBottom {grid-template-columns:minmax(0,1fr) 140px;}.stats{grid-template-columns:repeat(2,minmax(0,1fr));}.rowBottom .weightEdit{grid-column:1/3;}}
@media(max-width:500px){.wrap{padding:8px 0 16px}.panel{padding:14px}.rowTop{align-items:start}.rowTop .name{font-size:13px}.weight{font-size:14px}.between{flex-wrap:wrap}.stat strong{font-size:20px}.customLine{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.grid>div{min-width:0}#itemList{max-height:520px}}
@media print { #itemList{max-height:none;overflow:visible} .sticky{display:none!important} }
