/* Punto It Food - app operativa. Mobile first (mockup 09-06-2026): verde scuro, schede bianche, CTA arancio. */
:root {
  --g: #0f5c45; --g2: #17785a; --gl: #e3f1ec; --bg: #eef2f0; --card: #fff; --tx: #1c2b26; --mut: #6b7a74;
  --or: #e8743b; --red: #c62f2f; --redl: #fde6e6; --amb: #c27a06; --ambl: #fdf0d9; --line: #dde5e1;
  --bcn: #2463a6; --ibz: #e8743b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tx); background: var(--bg);
       padding-bottom: 76px; -webkit-tap-highlight-color: transparent; }
a { color: var(--g2); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 650; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); margin: 18px 4px 8px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 12px; }
@media (min-width: 900px) { .wrap.wide { max-width: 1100px; } }

/* header */
.top { background: var(--g); color: #fff; padding: 14px 16px 16px; position: sticky; top: 0; z-index: 20; }
.top .row { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; }
.top h1 { font-size: 19px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .sub { font-size: 13px; opacity: .85; font-weight: 400; display: block; }
.top a { color: #fff; }
.top .back { font-size: 22px; line-height: 1; padding: 2px 6px 2px 0; }
.avatar { width: 38px; height: 38px; border-radius: 10px; background: rgba(0,0,0,.25); display: grid; place-items: center;
          font-weight: 700; color: #fff; flex: none; }
.langs a { font-size: 12px; opacity: .7; margin-left: 6px; } .langs a.on { opacity: 1; font-weight: 700; }

/* card e liste */
.card { background: var(--card); border-radius: 14px; padding: 14px; margin: 10px 0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.list .item { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 14px; padding: 12px 14px;
              margin: 8px 0; box-shadow: 0 1px 2px rgba(0,0,0,.05); color: var(--tx); }
.item .ini { width: 42px; height: 42px; border-radius: 10px; background: var(--gl); color: var(--g); font-weight: 700;
             display: grid; place-items: center; flex: none; font-size: 15px; }
.item .main { flex: 1; min-width: 0; }
.item .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s { color: var(--mut); font-size: 13px; }
.item .r { text-align: right; flex: none; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.kpis.k2 { grid-template-columns: repeat(2, 1fr); }
.kpi { background: var(--card); border-radius: 14px; padding: 12px 8px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.kpi b { display: block; font-size: 20px; color: var(--g); white-space: nowrap; }
.kpi span { font-size: 12px; color: var(--mut); }
.kpi.red b { color: var(--red); } .kpi small { display: block; font-size: 11px; color: var(--mut); }
.up { color: var(--g2); } .down { color: var(--red); }

/* badge */
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
         background: var(--gl); color: var(--g); text-transform: uppercase; letter-spacing: .02em; }
.badge.rojo, .badge.rechazado, .badge.anulado { background: var(--redl); color: var(--red); }
.badge.aviso, .badge.enviado, .badge.borrador { background: var(--ambl); color: var(--amb); }
.badge.peso { background: var(--ambl); color: var(--amb); }
.badge.Barcelona { background: #e2ecf7; color: var(--bcn); } .badge.Ibiza { background: #fcebe1; color: var(--ibz); }
.money-red { color: var(--red); font-weight: 700; }

/* chips/filtri e tab */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--tx); border-radius: 999px; padding: 6px 14px; font-size: 14px;
        white-space: nowrap; }
.chip.on { background: var(--g); border-color: var(--g); color: #fff; }
.chip .n { opacity: .7; margin-left: 4px; font-size: 12px; }
.tabs { display: flex; background: #e2e9e6; border-radius: 12px; padding: 4px; margin: 10px 0; }
.tabs a { flex: 1; text-align: center; padding: 8px 4px; border-radius: 9px; color: var(--mut); font-size: 14px; }
.tabs a.on { background: #fff; color: var(--g); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* form */
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; }
.search { position: relative; margin: 12px 0 6px; }
.search input { padding-left: 38px; background: #f6f8f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b7a74' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") 12px 50% no-repeat; }
label { font-size: 13px; color: var(--mut); display: block; margin: 10px 0 4px; }
.btn { display: inline-block; border: 0; border-radius: 12px; padding: 11px 16px; background: var(--g); color: #fff; font-weight: 600;
       cursor: pointer; text-align: center; }
.btn.block { display: block; width: 100%; padding: 15px; font-size: 16px; }
.btn.or { background: var(--or); } .btn.red { background: var(--red); } .btn.ghost { background: #fff; color: var(--g); border: 1px solid var(--line); }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.plus { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--g);
        font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.plus.on { background: var(--g); color: #fff; border-color: var(--g); }
.qty { display: flex; align-items: center; gap: 6px; flex: none; }
.qty input { width: 64px; text-align: center; padding: 7px 4px; }
.qty button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-size: 20px; cursor: pointer; }
.qty button.add { background: var(--g); color: #fff; border-color: var(--g); }

/* prezzi */
.price { font-weight: 700; color: var(--g); }
.strike { text-decoration: line-through; color: var(--mut); font-size: 12px; margin-left: 4px; }

/* ordine */
.line { background: #fff; border-radius: 14px; padding: 12px 14px; margin: 8px 0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.line.peso { border: 2px solid #f0b47d; }
.line .hd { display: flex; gap: 10px; align-items: flex-start; }
.line .hd .main { flex: 1; min-width: 0; }
.line .ft { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; flex-wrap: wrap; }
.pesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.pesos input { text-align: center; padding: 8px 4px; }
.pesos .tot { grid-column: span 2; background: var(--gl); border-radius: 12px; display: grid; place-items: center; color: var(--g); font-weight: 700; }
.mini { font-size: 12px; color: var(--mut); }
.totales .row { display: flex; justify-content: space-between; padding: 4px 0; }
.totales .row.big { font-size: 19px; font-weight: 700; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.totales .row.big span:last-child { color: var(--g); }
.msg { background: var(--ambl); color: #6d4703; border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.msg.ok { background: var(--gl); color: var(--g); }

/* CTA flottante sopra la barra */
.cta { position: fixed; left: 0; right: 0; bottom: 70px; padding: 0 12px; z-index: 15; pointer-events: none; }
.cta .btn { pointer-events: auto; max-width: 736px; margin: 0 auto; display: block; box-shadow: 0 6px 18px rgba(232,116,59,.35); }
body.has-cta { padding-bottom: 150px; }

/* barra in basso */
.nav { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); display: flex;
       justify-content: center; z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
.nav a { flex: 1; max-width: 130px; text-align: center; padding: 8px 0 10px; color: #8a9893; font-size: 12px; }
.nav a svg { display: block; margin: 0 auto 2px; width: 24px; height: 24px; }
.nav a.on { color: var(--g); font-weight: 600; }

/* tabelle */
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; color: var(--mut); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.t td { padding: 8px 4px; border-bottom: 1px solid #eef2f0; vertical-align: top; }
table.t .n { text-align: right; white-space: nowrap; }
.scroll { overflow-x: auto; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; margin-top: 8px; }
.bars div { flex: 1; background: var(--g2); border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.bars div.cur { background: var(--or); }
.bars-l { display: flex; gap: 4px; font-size: 10px; color: var(--mut); }
.bars-l span { flex: 1; text-align: center; }
.note { font-size: 12px; color: var(--mut); margin: 6px 4px; }
.toast { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); background: #1c2b26; color: #fff; padding: 9px 16px;
         border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .2s; z-index: 50; pointer-events: none; }
.toast.on { opacity: .95; }
.login { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
.logo { width: 56px; height: 56px; border-radius: 14px; background: var(--g); color: #fff; font-size: 28px; font-weight: 800;
        display: grid; place-items: center; margin: 0 auto 12px; }
.center { text-align: center; }
.flex { display: flex; gap: 8px; align-items: center; } .grow { flex: 1; } .right { text-align: right; }
.hide { display: none !important; }

@media print {
  .nav, .top, .cta, .noprint { display: none !important; }
  body { background: #fff; padding: 0; }
  .card, .line { box-shadow: none; border: 1px solid #ccc; }
}

/* GPS: informativa al primo uso */
.gpsbar { position: fixed; left: 10px; right: 10px; bottom: 80px; z-index: 60; background: #fff; border-radius: 14px; padding: 12px 14px;
          box-shadow: 0 8px 28px rgba(0,0,0,.18); display: flex; gap: 12px; align-items: center; max-width: 740px; margin: 0 auto; }

/* trasferimenti */
.steps { display: flex; gap: 6px; margin-bottom: 6px; }
.steps div { flex: 1; text-align: center; font-size: 12px; color: var(--mut); padding: 6px 2px; border-radius: 10px; background: #f3f6f5; }
.steps div b { display: block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; margin: 0 auto 3px; background: #dde5e1; color: #fff; }
.steps div small { display: block; font-size: 10px; }
.steps div.done { background: var(--gl); color: var(--g); } .steps div.done b { background: var(--g); }
.steps div.cur { background: var(--ambl); color: var(--amb); } .steps div.cur b { background: var(--amb); }
.line.ok { border-left: 5px solid var(--g2); }
.line.flash { animation: flash .8s; }
@keyframes flash { from { background: #fff3c4; } to { background: #fff; } }
.badge.tr-solicitado, .badge.tr-preparando, .badge.tr-borrador { background: var(--ambl); color: var(--amb); }
.badge.tr-enviado { background: #e2ecf7; color: var(--bcn); }
.badge.tr-con_diferencias, .badge.tr-anulado { background: var(--redl); color: var(--red); }

/* casella quantita' + aggiungi (scheda cliente, ricerca nell'ordine, trasferimenti) */
.addq { display: flex; align-items: center; gap: 4px; flex: none; }
.addq input { width: 66px; text-align: center; padding: 7px 4px; font-weight: 600; }
.addq .u { font-size: 11px; color: var(--mut); width: 18px; }
.addq.on input { border-color: var(--g2); background: var(--gl); }
.badge.rc-abierta { background: var(--ambl); color: var(--amb); }
.badge.rc-confirmada { background: #e2ecf7; color: var(--bcn); }
.badge.rc-anulada { background: var(--redl); color: var(--red); }
.badge.rp-borrador { background: var(--ambl); color: var(--amb); }
.badge.rp-confirmada { background: #e2ecf7; color: var(--bcn); }
.badge.rp-en_sage { background: var(--gl); color: var(--g); }
.badge.rp-anulada { background: var(--redl); color: var(--red); }