:root{
  --bg:#120d18; --panel:#1b1322; --panel2:#25182d; --ink:#fff9f1; --muted:#b9aabd;
  --brand:#ff8616; --brand2:#ff5b1c; --plum:#2a1235; --pink:#b14f9c;
  --ok:#45d483; --warn:#ffc857; --danger:#ff667a; --info:#6cb6ff;
  --line:rgba(255,255,255,.08); --shadow:0 18px 50px rgba(0,0,0,.28); --r:22px;
}
*{box-sizing:border-box} html,body{margin:0;background:radial-gradient(circle at 75% -10%,rgba(255,134,22,.13),transparent 35%),var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif} button,input,select,textarea{font:inherit}
button{cursor:pointer}.app{min-height:100vh}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:rgba(18,13,24,.88);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;font-weight:950;color:#29132f;box-shadow:0 8px 25px rgba(255,134,22,.25)}.brand h1{font-size:17px;margin:0}.brand small{color:var(--muted)}
.role-switch{display:flex;gap:8px;align-items:center}.pill,.chip{border:1px solid var(--line);background:#21172a;color:var(--ink);border-radius:999px;padding:9px 13px}.role-select{background:#21172a;border:1px solid var(--line);color:#fff;border-radius:12px;padding:10px 12px}.shell{display:grid;grid-template-columns:235px minmax(0,1fr)}.sidebar{padding:20px 14px;border-right:1px solid var(--line);min-height:calc(100vh - 76px);position:sticky;top:76px;height:calc(100vh - 76px)}.nav{display:grid;gap:7px}.nav button{display:flex;align-items:center;gap:11px;border:0;background:transparent;color:#cdbfd1;padding:12px 13px;border-radius:14px;text-align:left;font-weight:650}.nav button:hover,.nav button.active{background:linear-gradient(90deg,rgba(255,134,22,.17),rgba(177,79,156,.08));color:#fff}.nav button.active{box-shadow:inset 3px 0 var(--brand)}.content{padding:26px;min-width:0}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:22px}.page-head h2{margin:0;font-size:30px}.page-head p{margin:7px 0 0;color:var(--muted)}
.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.card{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}.stat{padding:18px}.stat .k{font-size:13px;color:var(--muted)}.stat .v{font-size:29px;font-weight:900;margin-top:9px}.stat .s{font-size:12px;color:var(--ok);margin-top:6px}.two{grid-template-columns:1.25fr .75fr}.section{padding:19px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-title h3{margin:0;font-size:17px}.muted{color:var(--muted)}
.btn{border:0;border-radius:13px;padding:11px 15px;font-weight:800}.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#27112f}.btn-secondary{background:#2b1d34;color:#fff;border:1px solid var(--line)}.btn-ok{background:var(--ok);color:#0b2618}.btn-danger{background:rgba(255,102,122,.16);color:#ff9cab;border:1px solid rgba(255,102,122,.22)}.btn-sm{padding:8px 10px;border-radius:10px;font-size:12px}.toolbar{display:flex;gap:9px;flex-wrap:wrap}.search{background:#1d1425;border:1px solid var(--line);color:#fff;padding:11px 13px;border-radius:13px;min-width:220px;outline:none}.search:focus{border-color:rgba(255,134,22,.5)}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;white-space:nowrap}.table th{color:#b9aabd;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.table tr:last-child td{border-bottom:0}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800}.badge-new{background:rgba(108,182,255,.15);color:#9dceff}.badge-prep{background:rgba(255,200,87,.14);color:#ffd87a}.badge-ready{background:rgba(69,212,131,.14);color:#7ee2a8}.badge-route{background:rgba(177,79,156,.16);color:#e3a2d6}.badge-done{background:rgba(255,255,255,.08);color:#d7cdd9}.badge-low{background:rgba(255,102,122,.14);color:#ff9aaa}.dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.kds{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:16px}.order-card{border-radius:20px;border:1px solid var(--line);background:#1e1526;overflow:hidden}.order-card.urgent{border-color:rgba(255,102,122,.5);box-shadow:0 0 0 1px rgba(255,102,122,.12),var(--shadow)}.order-top{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;background:#291b32}.order-top h3{margin:0;font-size:18px}.timer{font-weight:900;color:#ffd27a}.urgent .timer{color:#ff7f90}.order-body{padding:16px}.type{display:inline-flex;gap:7px;align-items:center;border-radius:10px;padding:8px 10px;background:rgba(255,134,22,.11);color:#ffad5a;font-weight:800;font-size:12px;margin-bottom:12px}.item{padding:10px 0;border-bottom:1px solid var(--line)}.item:last-child{border-bottom:0}.item strong{display:block}.mods{font-size:12px;color:#d3c5d7;margin-top:5px;line-height:1.5}.order-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 16px}.order-actions .full{grid-column:1/-1}
.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.product{padding:15px}.product-art{height:145px;border-radius:16px;background:linear-gradient(135deg,#ff9a20,#b74b8c);display:flex;align-items:center;justify-content:center;font-size:62px;margin-bottom:14px}.product h3{margin:0 0 7px}.price{font-size:20px;font-weight:900;color:#ffa447}.product-footer{display:flex;justify-content:space-between;align-items:center;margin-top:13px}.qty{display:flex;align-items:center;gap:8px}.qty button{width:29px;height:29px;border-radius:9px;border:1px solid var(--line);background:#2a1b33;color:#fff}.cart{position:sticky;top:98px}.cart-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.cart-total{display:flex;justify-content:space-between;font-size:20px;font-weight:900;padding:15px 0}
.hero{min-height:300px;overflow:hidden;position:relative;padding:28px;display:flex;align-items:flex-end;background-image:linear-gradient(90deg,rgba(25,10,33,.94),rgba(25,10,33,.38)),url('assets/joyner-brand.jpeg');background-size:cover;background-position:center}.hero-content{max-width:580px}.hero h2{font-size:44px;line-height:1.03;margin:0 0 12px}.hero p{color:#eadcea;max-width:520px}.hero-actions{display:flex;gap:10px;margin-top:18px}.public-cats{display:flex;gap:8px;overflow:auto;padding-bottom:4px;margin:18px 0}.public-cats button{white-space:nowrap}.customer-layout{grid-template-columns:1fr 330px}.detail{padding:18px;position:sticky;top:98px}.avatar{width:58px;height:58px;border-radius:20px;background:linear-gradient(135deg,var(--brand),var(--pink));display:grid;place-items:center;font-weight:900;font-size:20px;color:#26122f}.person{display:flex;gap:13px;align-items:center}.person h3{margin:0}.person p{margin:4px 0 0;color:var(--muted);font-size:13px}.detail-stat{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.stock-bar{width:100px;height:7px;border-radius:10px;background:#35263d;overflow:hidden}.stock-fill{height:100%;background:var(--ok);border-radius:10px}.stock-fill.low{background:var(--danger)}.empty{padding:36px;text-align:center;color:var(--muted)}.notice{padding:13px 15px;border-radius:13px;background:rgba(255,134,22,.1);color:#ffc17d;border:1px solid rgba(255,134,22,.18);margin-bottom:15px}.mobile-nav{display:none}
@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.two,.customer-layout{grid-template-columns:1fr}.kds{grid-template-columns:repeat(2,minmax(260px,1fr))}.menu-grid{grid-template-columns:repeat(2,1fr)}.cart,.detail{position:static}}
@media(max-width:760px){.topbar{height:66px;padding:0 14px}.brand small{display:none}.shell{display:block}.sidebar{display:none}.content{padding:18px 14px 88px}.page-head{align-items:flex-start;flex-direction:column}.page-head h2{font-size:25px}.stats{grid-template-columns:1fr 1fr}.kds,.menu-grid{grid-template-columns:1fr}.hero{min-height:330px;padding:20px}.hero h2{font-size:35px}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:rgba(20,13,26,.95);backdrop-filter:blur(20px);border-top:1px solid var(--line);z-index:40;padding:7px 4px max(7px,env(safe-area-inset-bottom))}.mobile-nav button{border:0;background:none;color:#bbaebe;font-size:10px;padding:6px 2px}.mobile-nav span{display:block;font-size:19px;margin-bottom:2px}.mobile-nav button.active{color:#ff9c3d}.role-switch .pill{display:none}.search{min-width:0;width:100%}.toolbar{width:100%}}
.sync-online{color:#7ee2a8;border-color:rgba(69,212,131,.25);background:rgba(69,212,131,.08)}
.sync-local{color:#ffd27a}.role-locked{display:inline-flex;align-items:center}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 70% 10%,rgba(255,134,22,.16),transparent 35%),var(--bg)}.auth-card{width:min(440px,100%);padding:26px}.auth-brand{margin-bottom:24px}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card form{display:grid;gap:10px;margin:22px 0}.auth-card label{font-size:12px;font-weight:800;color:var(--muted);margin-top:4px}.auth-card .search{width:100%;min-width:0}.auth-card .btn{margin-top:8px}

/* Joyner V4 · alertas de pedido listo y despacho */
.ready-alert{border:1px solid rgba(255,200,87,.35);background:rgba(255,200,87,.12);color:#ffe09a;border-radius:999px;padding:9px 13px;font-weight:850;cursor:pointer;animation:readyPulse 1.8s ease-in-out infinite}
.ready-alert b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--warn);color:#2b172d;margin:0 2px}
@keyframes readyPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,200,87,0)}50%{box-shadow:0 0 0 6px rgba(255,200,87,.08)}}
.ready-toast{position:fixed;top:90px;right:22px;z-index:100;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:min(390px,calc(100vw - 28px));padding:15px 16px;border:1px solid rgba(69,212,131,.35);border-radius:18px;background:#21182a;box-shadow:0 20px 60px rgba(0,0,0,.45);animation:toastIn .25s ease-out}
.ready-toast-icon{width:38px;height:38px;border-radius:13px;background:var(--ok);color:#102719;display:grid;place-items:center;font-size:20px;font-weight:950}
.ready-toast b{display:block;font-size:15px}.ready-toast span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.ready-toast button{border:0;background:transparent;color:#ddd;font-size:24px;line-height:1;padding:5px}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.dispatch-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:16px}.dispatch-card{padding:18px;display:flex;flex-direction:column;gap:15px}.dispatch-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.dispatch-head h3{margin:6px 0 0;font-size:15px}.dispatch-order{font-size:20px;font-weight:950}.dispatch-customer{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.dispatch-customer span{color:var(--muted);font-size:12px}.dispatch-items{display:grid;gap:8px;flex:1}.dispatch-items div{padding:8px 10px;background:#251a2e;border-radius:11px}.dispatch-items small{display:block;color:var(--muted);margin-top:3px}
@media(max-width:1050px){.dispatch-grid{grid-template-columns:repeat(2,minmax(260px,1fr))}}
@media(max-width:760px){.dispatch-grid{grid-template-columns:1fr}.ready-alert{padding:8px 10px;font-size:0}.ready-alert b{font-size:11px}.ready-toast{top:76px;right:14px}.role-switch{gap:5px}}


/* Joyner V5 · Delivery operativo */
.delivery-fields{display:none;grid-template-columns:1fr;gap:8px;margin-bottom:12px}.delivery-fields.show{display:grid}.delivery-fields textarea{min-height:74px;resize:vertical;width:100%}
.delivery-grid{display:grid;grid-template-columns:repeat(3,minmax(270px,1fr));gap:16px}.delivery-card{padding:18px;display:flex;flex-direction:column;gap:15px}.delivery-meta{display:grid;gap:10px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.delivery-meta div{display:grid;gap:4px}.delivery-meta span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.delivery-meta b{font-size:14px;line-height:1.4}.delivery-total{display:flex;justify-content:space-between;font-size:17px;padding-top:2px}.delivery-toast .ready-toast-icon{background:#f0b35a}
@media(max-width:1050px){.delivery-grid{grid-template-columns:repeat(2,minmax(260px,1fr))}}
@media(max-width:760px){.delivery-grid{grid-template-columns:1fr}}

.order-table-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.table td:last-child{min-width:170px}@media(max-width:760px){.order-table-actions{justify-content:flex-start}.table td:last-child{min-width:150px}}


/* Joyner V6 · Rastreo de Delivery */
.tracking-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tracking-live{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(69,212,131,.12);border:1px solid rgba(69,212,131,.25);color:#86e8af;font-size:11px;font-weight:850}.tracking-off{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:800}.tracking-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(69,212,131,.08)}
.delivery-map{height:190px;border-radius:15px;overflow:hidden;border:1px solid var(--line);background:#17101e}.tracking-meta{font-size:11px;color:var(--muted);line-height:1.5}.tracking-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tracking-actions .full{grid-column:1/-1}.tracking-modal{position:fixed;inset:0;z-index:150;background:rgba(8,5,11,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}.tracking-panel{width:min(760px,100%);background:#21182a;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.55);overflow:hidden}.tracking-panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.tracking-panel-head h3{margin:0}.tracking-panel-head button{border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer}.tracking-panel-map{height:min(58vh,480px);background:#17101e}.tracking-panel-foot{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;color:var(--muted);font-size:12px}.track-btn{white-space:nowrap}
@media(max-width:760px){.tracking-actions{grid-template-columns:1fr}.tracking-panel-foot{flex-direction:column}.tracking-panel-map{height:52vh}}