@font-face{font-family:"Plus Jakarta Sans";font-weight:400 800;font-display:swap;src:url(assets/pjs-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-weight:400 800;font-display:swap;src:url(assets/pjs-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#0F2E5C; --navy-deep:#0A2246; --teal:#12707E; --teal-deep:#0B4F59;
  --orange:#F28627; --orange-wash:#FFE3CC; --orange-ink:#C2560B;
  --ground:#F4F6FA; --surface:#fff; --rule:#E6EBF2; --field:#F0F3F7;
  --ink:#0F1B2D; --ink-2:#5A6577; --ink-3:#5F6B80; --on-navy-2:#B9C6DA;
  --ok:#1E7A4C; --ok-wash:#E7F6EE; --bad:#B42318; --bad-wash:#FDECEC;
  --warn:#9A5B00; --warn-wash:#FFF4E5; --blue-wash:#E8EEF8; --teal-wash:#E6F3F4;
  --r:12px; --r-card:20px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#DDE3EC;-webkit-text-size-adjust:100%}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;font-size:14px;line-height:1.4;display:flex;justify-content:center}
::selection{background:var(--orange-wash);color:var(--navy-deep)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
a{color:var(--teal);text-decoration:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.on-navy :focus-visible,header :focus-visible{outline-color:#fff}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.sm{width:16px;height:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* shell: header + scroll + bottom nav, 427dp wide like the target device */
.app{width:100%;max-width:427px;height:100vh;height:100dvh;background:var(--ground);display:flex;flex-direction:column;position:relative;overflow:hidden}
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#C5CEDB transparent;padding-bottom:20px}
.scroll::-webkit-scrollbar{width:6px}.scroll::-webkit-scrollbar-thumb{background:#C5CEDB;border-radius:6px}

/* header */
header{background:var(--navy);color:#fff;padding:16px 16px 64px}
.top{display:flex;align-items:center;gap:12px}
.icon-btn{width:44px;height:44px;border-radius:var(--r);background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;transition:background .15s}
.icon-btn:active{background:rgba(255,255,255,.2)}
.who{flex:1;min-width:0}
.who small{display:block;font-size:13px;color:var(--on-navy-2)}
.who strong{display:block;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--orange);color:var(--navy-deep);font-weight:800;font-size:15px;display:grid;place-items:center}
.sync{margin-top:12px;display:flex;align-items:center;gap:10px;padding:8px 4px 8px 12px;min-height:48px;border-radius:var(--r);background:rgba(255,255,255,.08);color:var(--on-navy-2);font-size:13px;font-weight:600}
.sync .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
.sync span{flex:1;min-width:0}
.sync b{color:#fff;font-weight:700}
.sync button{min-height:44px;padding:0 12px;color:#fff;font-weight:700;font-size:13px;border-radius:var(--r)}
.sync button:active{background:rgba(255,255,255,.12)}

main{padding:0 16px;margin-top:-44px;display:flex;flex-direction:column;gap:20px;position:relative}


/* sections: ruled, not boxed */
section.block{background:var(--surface);border-radius:var(--r-card);padding:4px 16px 4px;box-shadow:0 1px 2px rgba(10,34,70,.06)}
section.flat{padding:0 4px;border-top:1px solid #D5DCE7;padding-top:4px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.sec-h h2{font-size:16px;font-weight:700;letter-spacing:-.005em}
.sec-h .meta{font-size:12px;color:var(--ink-3)}
.link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px;font-size:13px;font-weight:700;color:var(--teal)}
.link:hover{color:var(--teal-deep)}
.rule{border-top:1px solid var(--rule)}

/* caja strip for cashier */
.caja{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 16px;background:var(--blue-wash);border-radius:var(--r);box-shadow:none;color:var(--ink)}
.caja .ic{background:#fff!important}
.caja .ic{width:40px;height:40px;border-radius:12px;background:var(--blue-wash);color:var(--navy);display:grid;place-items:center}
.caja .t{flex:1;min-width:0}
.caja .t b{display:flex;align-items:center;gap:8px;font-size:14px}
.caja .t span{font-size:12px;color:var(--ink-2)}
.caja .chev{color:var(--ink-3)}

/* por cobrar */
.owed{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 0 12px}
.owed .amt{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--orange-ink)}
.owed .lbl{font-size:12px;color:var(--ink-2)}
.bar{height:8px;border-radius:99px;background:var(--rule);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--ok);transform-origin:left;animation:grow .7s var(--ease) both}
.bar-cap{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);margin:8px 0 12px}
.bar-cap b{color:var(--ink);font-weight:800}
@keyframes grow{from{transform:scaleX(0)}}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.row .main{flex:1;min-width:0}
.row .name{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sub{font-size:12px;color:var(--ink-2)}
.row .end{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.row .val{font-size:14px;font-weight:800}
.btn-sec{min-height:44px;padding:0 16px;border-radius:var(--r);border:1.5px solid #CBD3E0;background:#fff;color:var(--navy);font-size:13px;font-weight:700;transition:background .15s}
.btn-sec:hover{background:var(--ground)}.btn-sec:active{background:var(--field)}
.foot-link{display:flex;justify-content:center;border-top:1px solid var(--rule);padding:4px 0}

/* chips: one status vocabulary */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.chip.pend{color:var(--warn);background:var(--warn-wash)}
.chip.fact{color:var(--ok);background:var(--ok-wash)}
.chip.open{color:var(--ok);background:#fff}
.chip.up{color:var(--ok);background:var(--ok-wash)}
.chip.down{color:var(--bad);background:var(--bad-wash)}
.chip svg{width:12px;height:12px;stroke-width:2.6}

/* segmented control */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--field);border-radius:var(--r);padding:4px}
.seg button{min-height:44px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-2);transition:background .15s,color .15s,box-shadow .15s}
.seg button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(10,34,70,.15)}

/* mis pedidos figures */
.fig{margin-top:12px}
.fig .r{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 0;border-top:1px solid var(--rule)}
.fig .r:first-child{border-top:0}
.fig dt{font-size:13px;font-weight:600;color:var(--ink-2)}
.fig dd{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;letter-spacing:-.01em}
.fig dd .fade{display:inline-block;animation:swap .28s var(--ease) both}
@keyframes swap{from{opacity:0;transform:translateY(5px)}}
.fig dt small{display:block;font-size:12px;font-weight:500;color:var(--ink-2)}

.state-row{display:flex;align-items:center;gap:12px;min-height:60px;border-top:1px solid var(--rule);padding:8px 0;color:var(--ink)}
.state-row .n{width:36px;font-size:24px;font-weight:800;line-height:1}
.state-row .t{flex:1;min-width:0}
.state-row .t b{display:block;font-size:13px}
.state-row .t span{font-size:12px;color:var(--ink-2)}

/* ranking */
.rank{padding:4px 0 8px;display:flex;flex-direction:column;gap:14px}
.rk{display:flex;align-items:center;gap:12px}
.rk .no{width:28px;height:28px;border-radius:50%;background:var(--field);color:#3B4A5E;font-size:12px;font-weight:800;display:grid;place-items:center;flex:none}
.rk:first-child .no{background:var(--navy);color:#fff}
.rk .body{flex:1;min-width:0}
.rk .l{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:6px}
.rk .l span:first-child{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .l span:last-child{font-weight:800;white-space:nowrap}
.rk .tr{height:6px;border-radius:99px;background:var(--rule)}
.rk .tr i{display:block;height:100%;border-radius:99px;transform-origin:left;animation:grow .6s var(--ease) both}
.fine{font-size:12px;color:var(--ink-3);text-align:center;padding:0 0 4px}

/* persistent offline indicator once the header sync row scrolls away */
.sync-float{position:absolute;top:8px;left:50%;transform:translate(-50%,-70px);z-index:10;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:99px;background:var(--navy);color:#fff;font-size:13px;font-weight:700;box-shadow:0 6px 16px rgba(10,34,70,.3);transition:transform .35s var(--ease);white-space:nowrap}
.sync-float.show{transform:translate(-50%,0)}
.sync-float .dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
/* bottom nav */
nav{background:#fff;border-top:1px solid #E3E8F0;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 6px calc(8px + env(safe-area-inset-bottom))}
nav a{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:56px;padding:6px 0 2px;color:var(--ink-2);font-size:12px;font-weight:600}
nav a .pill{width:56px;height:30px;border-radius:99px;display:grid;place-items:center;transition:background .2s}
nav a{position:relative}
nav a[aria-current="page"]{color:var(--navy);font-weight:800}
nav a[aria-current="page"] .pill{background:var(--orange-wash)}
nav a:active .pill{background:var(--field)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:480px){.app{height:min(calc(100dvh - 32px),900px);margin:16px 0;border-radius:28px;box-shadow:0 12px 40px rgba(10,34,70,.2)}}

/* ---- shared additions for Más and Reporte ---- */
.hdr-row{display:flex;align-items:center;gap:8px}
.hdr-row h1{flex:1;margin:0 0 0 6px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.grp{display:flex;flex-direction:column;gap:8px}
.grp>h2{margin:0 4px;font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.menu{background:var(--surface);border-radius:18px;padding:4px 16px;box-shadow:0 1px 2px rgba(10,34,70,.06)}
.mi{display:flex;align-items:center;gap:14px;min-height:56px;color:var(--ink);font-size:16px;font-weight:600}
.mi+.mi{border-top:1px solid var(--rule)}
.mi .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none}
.mi .lbl{flex:1;min-width:0}
.mi .aux{font-size:12px;font-weight:600;color:var(--ink-2)}
.mi .chev{color:var(--ink-3)}
.mi.danger{color:var(--bad)}
.chip.pend2{color:var(--warn);background:var(--warn-wash)}
.ic.o{background:#FFF1E5;color:var(--orange-ink)}.ic.b{background:var(--blue-wash);color:var(--navy)}.ic.t{background:var(--teal-wash);color:var(--teal)}.ic.g{background:var(--ok-wash);color:var(--ok)}.ic.n{background:var(--field);color:#3B4A5E}.ic.r{background:var(--bad-wash);color:var(--bad)}
.ver{text-align:center;font-size:12px;color:var(--ink-2)}

/* app mocks scroll inside .scroll, never the document (focus() must not shift the shell) */
html,body{height:100%;overflow:hidden}

/* an author display rule must never defeat the hidden attribute */
[hidden]{display:none!important}

/* single topbar definition (pedidos, clientes, ficha, form) */
.topbar{flex:none;background:var(--navy);color:#fff;display:flex;align-items:center;gap:4px;padding:12px 12px 12px 16px}
.topbar h1{flex:1;font-size:20px;font-weight:700;letter-spacing:-.01em}

/* shared: section heading, the orange primary action, floating primary action */
.sec-title{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-2)}
.btn-primary{background:var(--orange);color:var(--navy-deep);font-weight:800;font-size:15px;border-radius:var(--r);padding:0 16px;display:inline-grid;place-items:center;transition:transform .12s var(--ease)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.btn-primary:focus-visible{outline-color:var(--navy)}
.btn-primary.lg{width:100%;height:60px;font-size:16px;border-radius:18px}
.btn-primary.fab{position:absolute;right:16px;bottom:20px;width:60px;height:60px;padding:0;border-radius:18px;z-index:5;box-shadow:0 8px 18px rgba(10,34,70,.28),0 2px 4px rgba(10,34,70,.14)}
.btn-primary.fab .i{stroke-width:2.6}

.chip.tag{color:var(--ink-2);background:var(--field)}