:root{
  --navy:#17284b; --navy-deep:#0f1d39; --ink:#22325a;
  --cream:#f6f1e5; --paper:#fffdf7;
  --gold:#c79a3a; --gold-deep:#9c7322;
  --wa:#1faa55; --wa-deep:#178043;
  --muted:#8a7f63; --muted2:#6b6450;
  --red:#b23b3b;
  --line:#17284b22; --line-strong:#17284b40;
  --serif:"Georgia","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --script:"Brush Script MT","Segoe Script",cursive;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--navy); background:var(--cream);
  -webkit-font-smoothing:antialiased; line-height:1.45;
  padding-bottom:90px;
}

/* ---------- top bar ---------- */
.top{
  position:sticky; top:0; z-index:30;
  background:#f6f1e5f2; backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:12px 16px; display:flex; align-items:center; gap:12px;
}
.brand{font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:.01em; color:var(--navy); display:flex; align-items:center; gap:8px}
.brand .rib{font-size:18px}
.role-tag{margin-left:auto; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:#fff; background:var(--navy); padding:5px 11px; border-radius:999px}
.role-tag.prep{background:var(--gold-deep)}
.role-tag.entrega{background:var(--wa-deep)}
.sub{font-size:12.5px; color:var(--muted); padding:8px 16px 0; font-family:var(--serif); font-style:italic}

.wrap{max-width:760px; margin:0 auto; padding:14px 14px 0}

/* ---------- stats ---------- */
.stats{display:flex; gap:8px; padding:4px 14px 0; max-width:760px; margin:0 auto}
.stat{flex:1; background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:10px 8px; text-align:center}
.stat b{display:block; font-size:21px; color:var(--navy); font-family:var(--serif)}
.stat span{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}

/* ---------- day group ---------- */
.day{margin:22px 0 8px; display:flex; align-items:baseline; gap:10px}
.day h2{font-family:var(--serif); font-size:16px; color:var(--navy); margin:0; text-transform:capitalize}
.day .count{font-size:12px; color:var(--muted); font-weight:600}
.day::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- order card ---------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:14px 15px; margin-bottom:11px; position:relative; transition:.15s;
}
.card.sel{border-color:var(--gold); box-shadow:0 0 0 2px #c79a3a55}
.card .chead{display:flex; align-items:flex-start; gap:10px}
.card .nome{font-family:var(--serif); font-weight:700; font-size:16.5px; color:var(--navy); line-height:1.2}
.card .turno{display:inline-block; margin-top:3px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--muted2)}
.card .turno.manha{color:var(--gold-deep)}
.badge{margin-left:auto; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap}
.badge.novo{background:#17284b14; color:var(--navy)}
.badge.preparado{background:#c79a3a22; color:var(--gold-deep)}
.badge.entregue{background:#1faa5520; color:var(--wa-deep)}

.itens{font-size:14.5px; color:var(--ink); margin:10px 0 0; white-space:pre-line; line-height:1.45}
.meta{margin-top:9px; font-size:13px; color:var(--muted2); display:flex; flex-direction:column; gap:3px}
.meta a{color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.meta .ln{display:flex; gap:7px; align-items:flex-start}
.meta .ic{flex:none; width:15px; text-align:center; opacity:.7}
.money{margin-top:10px; font-family:var(--serif); font-size:15px; color:var(--navy)}
.money small{font-family:var(--sans); font-size:12.5px; color:var(--muted); font-weight:500}
.obs{margin-top:8px; font-size:13px; color:var(--red); background:#b23b3b0d; border-radius:9px; padding:7px 10px}

/* ---------- card actions ---------- */
.acts{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap}
.btn{
  border:1px solid var(--line-strong); background:var(--paper); color:var(--navy);
  font-family:var(--sans); font-size:14px; font-weight:600; padding:11px 15px;
  border-radius:11px; cursor:pointer; transition:.13s; display:inline-flex; align-items:center; gap:7px;
}
.btn:hover{background:#17284b0c}
.btn.grow{flex:1; justify-content:center}
.btn.wa{background:var(--wa); border-color:var(--wa); color:#fff}
.btn.wa:hover{background:var(--wa-deep)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#fff}
.btn.gold:hover{background:var(--gold-deep)}
.btn.ghost-red{border-color:#b23b3b55; color:var(--red)}
.btn.ghost-red:hover{background:var(--red); color:#fff}
.btn.sm{padding:8px 11px; font-size:13px}
.btn[disabled]{opacity:.5; pointer-events:none}

/* checkbox for labels */
.selbox{flex:none; width:24px; height:24px; border:2px solid var(--line-strong); border-radius:7px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:#fff; margin-right:2px}
.selbox.on{background:var(--gold); border-color:var(--gold); color:#fff}

/* ---------- floating bar ---------- */
.fab{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--navy); color:#fff; padding:13px 16px calc(13px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; box-shadow:0 -6px 20px #0f1d3933;
  transform:translateY(120%); transition:.22s;
}
.fab.show{transform:translateY(0)}
.fab .info{font-size:14px}
.fab .info b{font-family:var(--serif); font-size:17px}
.fab .sp{flex:1}
.fab button{background:#fff; color:var(--navy); border:none; border-radius:11px; padding:12px 18px; font-weight:700; font-size:14.5px; cursor:pointer; display:flex; align-items:center; gap:8px}
.fab .lnk{background:none; color:#fff; text-decoration:underline; padding:8px}

.addbtn{
  position:fixed; right:18px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:35;
  background:var(--navy); color:#fff; border:none; width:58px; height:58px; border-radius:50%;
  font-size:30px; line-height:1; cursor:pointer; box-shadow:0 6px 18px #0f1d3955;
}

/* ---------- empty ---------- */
.empty{text-align:center; color:var(--muted); font-family:var(--serif); font-style:italic; font-size:17px; padding:60px 20px}
.empty .big{font-size:40px; font-style:normal; margin-bottom:10px}

/* ---------- modal / sheet ---------- */
.scrim{position:fixed; inset:0; background:#0f1d3977; z-index:60; display:none; opacity:0; transition:.2s}
.scrim.show{display:block; opacity:1}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--paper);
  border-radius:20px 20px 0 0; max-height:92vh; overflow-y:auto;
  transform:translateY(100%); transition:.26s cubic-bezier(.2,.8,.2,1);
  max-width:760px; margin:0 auto;
}
.sheet.show{transform:translateY(0)}
.sheet .sh-head{position:sticky; top:0; background:var(--paper); padding:16px 18px 10px; display:flex; align-items:center; border-bottom:1px solid var(--line)}
.sheet .sh-head h3{margin:0; font-family:var(--serif); font-size:18px; color:var(--navy)}
.sheet .sh-head .x{margin-left:auto; background:none; border:none; font-size:24px; color:var(--muted); cursor:pointer; line-height:1}
.sheet form{padding:14px 18px 24px}
.fld{margin-bottom:13px}
.fld label{display:block; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:5px}
.fld input,.fld select,.fld textarea{
  width:100%; border:1px solid var(--line-strong); border-radius:11px; padding:12px 13px;
  font-family:var(--sans); font-size:15px; color:var(--navy); background:#fff;
}
.fld textarea{min-height:74px; resize:vertical}
.fld.row2{display:flex; gap:10px}
.fld.row2>div{flex:1}
.seg{display:flex; gap:8px}
.seg label{flex:1; margin:0}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{display:block; text-align:center; border:1px solid var(--line-strong); border-radius:11px; padding:12px; font-weight:600; cursor:pointer; font-size:14.5px}
.seg input:checked+span{background:var(--navy); color:#fff; border-color:var(--navy)}
.save{width:100%; background:var(--wa); color:#fff; border:none; border-radius:13px; padding:16px; font-size:16px; font-weight:700; cursor:pointer; margin-top:6px}
.save.navy{background:var(--navy)}

/* ---------- login ---------- */
.login{position:fixed; inset:0; z-index:80; background:var(--cream); display:none; align-items:center; justify-content:center; padding:24px}
.login.show{display:flex}
.login .box{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:34px 28px; max-width:340px; width:100%; text-align:center}
.login .rib{font-size:38px}
.login h1{font-family:var(--serif); font-size:24px; margin:8px 0 4px; color:var(--navy)}
.login p{font-size:13.5px; color:var(--muted); margin:0 0 20px}
.login input{width:100%; border:1px solid var(--line-strong); border-radius:12px; padding:14px; font-size:17px; text-align:center; letter-spacing:.1em; margin-bottom:12px}
.login button{width:100%; background:var(--navy); color:#fff; border:none; border-radius:12px; padding:15px; font-size:16px; font-weight:700; cursor:pointer}
.login .err{color:var(--red); font-size:13px; min-height:18px; margin-top:8px}

/* ---------- hub ---------- */
.hub{max-width:480px; margin:0 auto; padding:30px 20px}
.hub .hero{text-align:center; margin-bottom:26px}
.hub .hero .rib{font-size:42px}
.hub .hero h1{font-family:var(--serif); font-size:27px; margin:6px 0 2px; color:var(--navy)}
.hub .hero p{color:var(--muted); font-size:14px; margin:0; font-family:var(--serif); font-style:italic}
.hub a.tile{
  display:flex; align-items:center; gap:15px; text-decoration:none; color:var(--navy);
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px 18px; margin-bottom:13px; transition:.15s;
}
.hub a.tile:hover{border-color:var(--navy); transform:translateY(-1px)}
.hub a.tile .em{font-size:30px; flex:none}
.hub a.tile .t b{display:block; font-family:var(--serif); font-size:18px}
.hub a.tile .t span{font-size:13px; color:var(--muted)}
.hub a.tile .ar{margin-left:auto; color:var(--gold); font-size:22px}
.hub .out{display:block; text-align:center; margin-top:18px; color:var(--muted); font-size:13px; background:none; border:none; cursor:pointer; width:100%; text-decoration:underline}

.toast{position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; padding:12px 20px; border-radius:999px; font-size:14px; z-index:90; opacity:0; transition:.2s; pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ===================== PRINT (etiquetas A4) ===================== */
#print-root{display:none}
@media print{
  body *{visibility:hidden}
  #print-root,#print-root *{visibility:visible}
  #print-root{display:block; position:absolute; left:0; top:0; width:210mm}
  @page{size:A4; margin:0}
  .sheetA4{width:210mm; font-size:0}
  .lbl{
    width:70mm; height:100mm; box-sizing:border-box; padding:6mm 5mm;
    border:0.2mm dashed #999; overflow:hidden; page-break-inside:avoid; break-inside:avoid;
    display:inline-flex; flex-direction:column; vertical-align:top;
    color:#000; font-family:Arial,Helvetica,sans-serif; font-size:10pt;
  }
  .lbl .l-top{display:flex; align-items:baseline; border-bottom:0.4mm solid #000; padding-bottom:2mm; margin-bottom:2.5mm}
  .lbl .l-nome{font-weight:800; font-size:13pt; line-height:1.1}
  .lbl .l-turno{margin-left:auto; font-size:8pt; font-weight:700; text-align:right}
  .lbl .l-itens{font-size:10pt; line-height:1.3; white-space:pre-line; flex:1; overflow:hidden}
  .lbl .l-end{font-size:8.5pt; line-height:1.25; margin-top:2mm; border-top:0.2mm solid #999; padding-top:2mm}
  .lbl .l-foot{font-size:8.5pt; margin-top:1.5mm; display:flex; justify-content:space-between; font-weight:700}
  .lbl .l-brand{font-size:7pt; letter-spacing:.1em; text-align:center; margin-top:1.5mm; opacity:.6}
}