html,body{background:#111110!important;margin:0!important;padding:0!important;border:none!important;outline:none!important}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#111110;margin:0;padding:0}
:root{
  --black:#111110;--black2:#1a1a18;--black3:#242422;--black4:#2e2e2c;
  --white:#f4f3f0;--white2:#e8e7e4;--white3:#c8c7c4;
  --gray:#888885;--gray2:#555552;
  --accent:#ffffff;--accent2:rgba(255,255,255,0.08);
  --red:#c0392b;--red2:#e74c3c;
  --green:#27ae60;--amber:#e67e22;--blue:#2980b9;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
  --r:4px;--r2:6px;
}
body{font-family:"Barlow",sans-serif;background:var(--black);color:var(--white);min-height:100vh;margin:0;padding:0}

/* ── LOGIN SCREEN ── */
#login-screen{position:fixed;inset:0;background:var(--black);display:flex;align-items:center;justify-content:center;z-index:1000}
.login-bg{position:absolute;inset:0;overflow:hidden;opacity:.04}
.login-lines{position:absolute;top:-100px;right:-100px;width:600px;height:600px;transform:rotate(-20deg)}
.login-line{height:2px;background:var(--white);margin-bottom:16px;transform-origin:left}
.login-wrap{position:relative;width:400px}
.login-logo{text-align:center;margin-bottom:40px}
.login-X{font-family:'Barlow Condensed',sans-serif;font-size:80px;font-weight:900;color:var(--white);line-height:1;letter-spacing:-2px}
.login-sub{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:400;letter-spacing:6px;color:var(--gray);text-transform:uppercase;margin-top:-4px}
.login-divider{width:40px;height:2px;background:var(--white);margin:16px auto 28px}
.login-card{background:var(--black2);border:1px solid var(--border2);padding:32px}
.login-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--gray);margin-bottom:24px}
.login-fld{margin-bottom:14px}
.login-fld label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:6px;font-family:'Barlow Condensed',sans-serif}
.login-fld input,#role-select{width:100%;padding:11px 14px;background:var(--black3);border:1px solid var(--border2);color:var(--white);font-family:'Barlow',sans-serif;font-size:13px;outline:none;transition:border .15s}
.login-fld input:focus,#role-select:focus{border-color:var(--white)}
.login-users{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.user-chip{padding:9px 8px;background:var(--black3);border:1px solid var(--border);cursor:pointer;text-align:center;transition:all .15s}
.user-chip:hover,.user-chip.sel{background:var(--black4);border-color:var(--white2)}
.user-chip-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;color:var(--white);text-transform:uppercase}
.user-chip-role{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray);margin-top:2px}
.login-btn{width:100%;padding:13px;background:var(--white);color:var(--black);font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;letter-spacing:4px;text-transform:uppercase;border:none;cursor:pointer;margin-top:6px;transition:all .15s}
.login-btn:hover{background:var(--white2)}
.login-error{color:var(--red2);font-size:12px;letter-spacing:1px;text-align:center;margin-top:10px;min-height:16px}

/* ── APP ── */
#app-screen{display:none;height:100vh;flex-direction:column;border:none;outline:none}
#app-screen.active{display:flex}

/* ── TOPBAR ── */
.topbar{height:52px;background:var(--black2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;gap:16px;flex-shrink:0;position:relative}
.tb-logo{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;letter-spacing:1px;color:var(--white);flex-shrink:0}
.tb-logo span{color:var(--white3);font-weight:400;font-size:11px;letter-spacing:3px;display:block;line-height:1;text-transform:uppercase;margin-top:-2px}
.tb-divider{width:1px;height:24px;background:var(--border2)}
.tb-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--white);flex:1}
.tb-search{display:flex;align-items:center;background:var(--black3);border:1px solid var(--border);width:200px}
.tb-search input{border:none;background:transparent;padding:7px 12px;font-size:12px;font-family:'Barlow',sans-serif;color:var(--white);outline:none;width:100%}
.tb-search input::placeholder{color:var(--gray2)}
.tb-user{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--black3);border:1px solid var(--border);cursor:pointer}
.tb-user-av{width:26px;height:26px;background:var(--white);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:800;color:var(--black);flex-shrink:0}
.tb-user-name{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--white)}
.tb-user-role{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--gray)}
.tb-cta{padding:8px 18px;background:var(--white);color:var(--black);font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;border:none;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
.tb-cta:hover{background:var(--white2)}
.tb-logout{padding:6px 12px;background:transparent;border:1px solid var(--border2);color:var(--gray);font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .15s}
.tb-logout:hover{border-color:var(--white2);color:var(--white)}

/* ── BODY ── */
.body-wrap{flex:1;display:flex;overflow:hidden}

/* ── SIDEBAR ── */
.sb{width:200px;background:var(--black2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sb-sec{padding:18px 14px 5px;font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gray2)}
.sb-item{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;color:var(--gray);font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;border-left:2px solid transparent;transition:all .15s}
.sb-item:hover{background:var(--black3);color:var(--white2)}
.sb-item.active{background:var(--black3);color:var(--white);border-left-color:var(--white)}
.sb-item.locked{opacity:.3;cursor:not-allowed;pointer-events:none}
.sb-ico{font-size:13px;width:16px;text-align:center;flex-shrink:0}
.sb-badge{background:var(--white);color:var(--black);font-size:9px;font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:1px;padding:1px 6px;margin-left:auto}
.sb-role-tag{margin:auto 14px 14px;padding:8px;border:1px solid var(--border);text-align:center}
.sb-role-lbl{font-size:9px;font-family:'Barlow Condensed',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--gray2)}
.sb-role-val{font-size:13px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--white);margin-top:2px}

/* ── CONTENT ── */
.content{flex:1;overflow-y:auto;padding:20px 22px;background:var(--black)}

/* ── UTILS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap}
.btn-wh{background:var(--white);color:var(--black);border-color:var(--white)}
.btn-wh:hover{background:var(--white2)}
.btn-ol{background:transparent;color:var(--white);border-color:var(--border2)}
.btn-ol:hover{background:var(--black3);border-color:var(--white2)}
.btn-red{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-red:hover{background:var(--red2)}
.btn-green{background:var(--green);color:var(--white);border-color:var(--green)}
.btn-sm{padding:5px 11px;font-size:11px}
.btn-xs{padding:3px 8px;font-size:10px}

.card{background:var(--black2);border:1px solid var(--border);padding:18px 20px}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--white)}

.metric{background:var(--black2);border:1px solid var(--border);border-top:2px solid var(--white);padding:16px 18px}
.metric-lbl{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray);margin-bottom:7px}
.metric-val{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;color:var(--white);line-height:1}
.metric-sub{font-size:11px;color:var(--gray);margin-top:4px}
.m-up{color:#4ade80}.m-dn{color:#f87171}.m-am{color:#fbbf24}

.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}

table{width:100%;border-collapse:collapse}
th{text-align:left;padding:8px 12px;background:var(--black3);font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);border-bottom:1px solid var(--border)}
td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--white2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--black3)}

.pill{display:inline-flex;align-items:center;padding:2px 8px;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border:1px solid}
.p-pend{background:rgba(251,191,36,.1);color:#fbbf24;border-color:rgba(251,191,36,.25)}
.p-prod{background:rgba(96,165,250,.1);color:#60a5fa;border-color:rgba(96,165,250,.25)}
.p-list{background:rgba(74,222,128,.1);color:#4ade80;border-color:rgba(74,222,128,.25)}
.p-done{background:rgba(156,163,175,.1);color:#9ca3af;border-color:rgba(156,163,175,.2)}
.p-cancel{background:rgba(248,113,113,.1);color:#f87171;border-color:rgba(248,113,113,.25)}
.p-env{background:rgba(96,165,250,.1);color:#60a5fa;border-color:rgba(96,165,250,.25)}
.p-aprov{background:rgba(74,222,128,.1);color:#4ade80;border-color:rgba(74,222,128,.25)}
.p-rev{background:rgba(251,191,36,.1);color:#fbbf24;border-color:rgba(251,191,36,.25)}
.p-rec{background:rgba(248,113,113,.1);color:#f87171;border-color:rgba(248,113,113,.25)}
.p-cobr{background:rgba(74,222,128,.1);color:#4ade80;border-color:rgba(74,222,128,.25)}
.p-nocobr{background:rgba(251,191,36,.1);color:#fbbf24;border-color:rgba(251,191,36,.25)}

.fld{margin-bottom:13px}
.fld label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;padding:9px 12px;background:var(--black3);border:1px solid var(--border2);color:var(--white);font-family:'Barlow',sans-serif;font-size:12.5px;outline:none;transition:border .15s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--white2)}
.fld textarea{resize:vertical;min-height:72px}
.fld select option{background:var(--black2)}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:500}
.modal{background:var(--black2);border:1px solid var(--border2);width:580px;max-height:88vh;overflow-y:auto;padding:24px}
.modal-title{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--white);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-x{cursor:pointer;font-size:16px;color:var(--gray);background:none;border:none;font-family:sans-serif;padding:0;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.modal-x:hover{color:var(--white)}

/* ── POS ── */
.pos-cli-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--black2);border:1px solid var(--border);transition:all .2s;grid-column:1 / -1}
.pos-cli-bar.off{border-color:#d97706;background:#1a1208;box-shadow:0 0 0 1px rgba(217,119,6,.3)}
.pos-cli-bar.on{border-color:#16a34a;background:#0f1f15}
.pos-cli-lbl{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);min-width:80px;font-weight:700}
.pos-cli-bar.off .pos-cli-lbl{color:#d97706}
.pos-cli-bar.on .pos-cli-lbl{color:#4ade80}
.pos-cli-bar input[type="text"]{width:100%;padding:9px 12px;background:var(--black3);border:1px solid var(--border2);color:var(--white);font-family:'Barlow',sans-serif;font-size:13px;outline:none}
.pos-cli-bar.off input[type="text"]::placeholder{color:#d97706;opacity:.7}
.pos-layout{display:grid;grid-template-columns:1fr 360px;grid-template-rows:auto 1fr;gap:12px;height:calc(100vh - 52px - 40px)}
.cat-strip{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.cat-btn{padding:5px 12px;background:transparent;border:1px solid var(--border2);color:var(--gray);font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .15s}
.cat-btn:hover,.cat-btn.on{background:var(--white);color:var(--black);border-color:var(--white)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow-y:auto;align-content:start;max-height:calc(100vh - 52px - 130px)}
.prod-tile{background:var(--black2);border:1px solid var(--border);border-top:2px solid transparent;padding:12px;cursor:pointer;transition:all .15s}
.prod-tile:hover{border-top-color:var(--white);background:var(--black3)}
.pt-cat{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gray2);margin-bottom:3px}
.pt-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;color:var(--white);margin-bottom:6px;line-height:1.2;text-transform:uppercase}
.pt-price{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;color:var(--white)}
.pt-note{font-size:10px;color:var(--gray);margin-top:3px;line-height:1.3}
.cart-wrap{background:var(--black2);border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.cart-hd{padding:14px 16px;border-bottom:1px solid var(--border)}
.cart-hd-title{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.cart-body{flex:1;overflow-y:auto;padding:10px 14px}
.cart-empty{text-align:center;padding:36px 0;color:var(--gray2);font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase}
.cart-item{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:1px solid var(--border)}
.ci-name{flex:1;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--white2);line-height:1.3}
.ci-sub{font-size:10px;color:var(--gray2);font-family:'Barlow',sans-serif;text-transform:none;letter-spacing:0;font-weight:400}
.ci-qty{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ci-btn{width:28px;height:28px;min-width:28px;min-height:28px;background:var(--black3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--white);transition:all .1s;user-select:none}
.ci-btn:hover{background:var(--white);color:var(--black)}
.ci-price{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;color:var(--white);min-width:50px;text-align:right}
.cart-foot{padding:12px 16px;border-top:1px solid var(--border)}
.tot-row{display:flex;justify-content:space-between;font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1px;color:var(--gray);margin-bottom:5px}
.tot-final{display:flex;justify-content:space-between;font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:var(--white);margin:8px 0 12px;letter-spacing:2px}
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px}
.pay-opt{padding:7px 4px;text-align:center;background:var(--black3);border:1px solid var(--border);cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gray);transition:all .15s}
.pay-opt.sel{background:var(--white);color:var(--black);border-color:var(--white)}
.act-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* ── PIPELINE ── */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(170px,1fr));gap:8px;overflow-x:auto;padding-bottom:8px}
.k-col{background:var(--black2);border:1px solid var(--border);padding:10px;min-height:400px}
.k-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.k-title{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.k-n{background:var(--black3);font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;padding:1px 7px;color:var(--gray)}
.k-card{background:var(--black3);border:1px solid var(--border);border-left:2px solid transparent;padding:10px;margin-bottom:6px;cursor:pointer;transition:all .15s}
.k-card:hover{border-color:var(--border2)}
.k-id{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;margin-bottom:3px}
.k-cli{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--white);margin-bottom:2px}
.k-svc{font-size:11px;color:var(--gray);margin-bottom:7px;line-height:1.3}
.k-foot{display:flex;align-items:center;justify-content:space-between}
.k-date{font-size:10px;color:var(--gray2)}
.k-amt{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;color:var(--white)}

/* ── FLOW ── */
.flow-bar{display:flex;overflow-x:auto;margin-bottom:18px}
.fs{flex:1;min-width:90px;padding:10px 6px;text-align:center;background:var(--black3);border:1px solid var(--border);border-right:none}
.fs:last-child{border-right:1px solid var(--border)}
.fs.done{border-top:2px solid #4ade80}
.fs.active{border-top:2px solid var(--white);background:var(--black2)}
.fs-lbl{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray)}
.fs.done .fs-lbl{color:#4ade80}
.fs.active .fs-lbl{color:var(--white)}
.fs-num{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:1px;color:var(--gray2);margin-bottom:3px}

/* ── INVOICE ── */
.inv-wrap{background:var(--white);color:var(--black);padding:30px;font-family:'Barlow',sans-serif;max-width:580px;margin:0 auto}
.inv-hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:16px;border-bottom:3px solid var(--black)}
.inv-brand-X{font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;color:var(--black);line-height:1}
.inv-brand-sub{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#555;margin-top:1px}
.inv-meta-type{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#999;margin-bottom:3px}
.inv-meta-num{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;color:var(--black)}
.inv-meta-date{font-size:11.5px;color:#666}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.inv-p-lbl{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#999;margin-bottom:4px}
.inv-p-name{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.inv-p-info{font-size:11.5px;color:#555;line-height:1.7}
.inv-items table{width:100%;border-collapse:collapse;margin-bottom:18px}
.inv-items th{background:var(--black);color:var(--white);padding:8px 12px;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;text-align:left}
.inv-items td{padding:9px 12px;border-bottom:1px solid #eee;font-size:12.5px;color:var(--black)}
.inv-tots{display:flex;justify-content:flex-end}
.inv-tots-box{width:220px}
.inv-tr{display:flex;justify-content:space-between;font-size:12.5px;color:#666;margin-bottom:4px}
.inv-tf{display:flex;justify-content:space-between;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;color:var(--black);padding-top:8px;border-top:2px solid var(--black);margin-top:6px;text-transform:uppercase;letter-spacing:1px}
.inv-foot{margin-top:22px;padding-top:14px;border-top:1px solid #ddd;display:flex;justify-content:space-between;font-size:11px;color:#aaa;font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase}

/* ── BARS ── */
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:110px;padding-bottom:20px;position:relative}
.bc-wrap{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.bc-bar{width:100%;border-top:2px solid transparent;transition:all .4s}
.bc-lbl{position:absolute;bottom:0;font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:1px;color:var(--gray2);text-align:center;white-space:nowrap}

/* ── DONUT ROWS ── */
.dr{display:flex;flex-direction:column;gap:8px}
.dr-item{display:flex;align-items:center;gap:8px}
.dr-dot{width:3px;height:28px;flex-shrink:0}
.dr-name{flex:1;font-size:12.5px;color:var(--white2)}
.dr-val{font-size:11px;color:var(--gray);min-width:52px;text-align:right;font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px}
.dr-pct{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;color:var(--white);min-width:34px;text-align:right}
.dr-bar{flex:1.5;height:3px;background:var(--black3);min-width:50px}
.dr-fill{height:100%;transition:width .4s}

/* ── ALERT CARDS ── */
.alert-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:1px solid;margin-bottom:7px}
.alert-item.warn{background:rgba(251,191,36,.06);border-color:rgba(251,191,36,.2)}
.alert-item.danger{background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.2)}
.alert-item.ok{background:rgba(74,222,128,.06);border-color:rgba(74,222,128,.2)}
.alert-item.info{background:rgba(96,165,250,.06);border-color:rgba(96,165,250,.2)}
.al-line{width:2px;height:36px;flex-shrink:0;margin-top:2px}
.alert-item.warn .al-line{background:#fbbf24}
.alert-item.danger .al-line{background:#f87171}
.alert-item.ok .al-line{background:#4ade80}
.alert-item.info .al-line{background:#60a5fa}
.al-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--white);margin-bottom:2px}
.al-sub{font-size:11.5px;color:var(--gray)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--black4)}
::-webkit-scrollbar-thumb:hover{background:var(--gray2)}

/* ── TOAST ── */
#toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom, 0px));right:20px;left:20px;max-width:480px;margin-left:auto;background:#1a1a18;color:var(--white);border:1px solid var(--border2);padding:12px 16px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:500;letter-spacing:.3px;line-height:1.4;z-index:9999;transform:translateY(80px);opacity:0;transition:all .2s;pointer-events:none;word-break:break-word;box-shadow:0 6px 28px rgba(0,0,0,.6)}
#toast.show{transform:translateY(0);opacity:1}
@media(max-width:600px){#toast{left:12px;right:12px;font-size:12.5px;padding:11px 14px}}

/* ── ACCESS DENIED ── */
.access-denied{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;gap:12px}
.access-denied .big-x{font-family:'Barlow Condensed',sans-serif;font-size:80px;font-weight:900;color:var(--black3);line-height:1}
.access-denied p{font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--gray2)}

/* ── POS Client Dropdown ── */
.cli-opt:hover{background:var(--black3)!important}
#cli-dropdown::-webkit-scrollbar{width:4px}
#cli-dropdown::-webkit-scrollbar-thumb{background:var(--black4)}


/* ── TIMELINE ── */
.timeline{position:relative;padding-left:20px}
.timeline::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;background:var(--border2)}
.tl-item{position:relative;padding:0 0 16px 16px}
.tl-item::before{content:'';position:absolute;left:-17px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--black4);border:2px solid var(--border2)}
.tl-item.done::before{background:#4ade80;border-color:#4ade80}
.tl-item.active::before{background:#60a5fa;border-color:#60a5fa}
.tl-item.pending::before{background:#fbbf24;border-color:#fbbf24}
.tl-item.cancelled::before{background:#f87171;border-color:#f87171}
.tl-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:8px 10px;background:var(--black3);border:1px solid var(--border);transition:all .15s}
.tl-head:hover{border-color:var(--border2);background:var(--black4)}
.tl-head-left{display:flex;align-items:center;gap:10px}
.tl-id{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:800;letter-spacing:1px;color:var(--white)}
.tl-svc{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;color:var(--white2);letter-spacing:.5px}
.tl-date{font-size:10px;color:var(--gray)}
.tl-price{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:900;color:var(--white)}
.tl-detail{display:none;padding:10px;border:1px solid var(--border);border-top:none;background:var(--black2)}
.tl-detail.open{display:block}
.tl-row{display:flex;justify-content:space-between;padding:4px 0;font-size:11.5px;color:var(--white2);border-bottom:1px solid var(--border)}
.tl-row:last-child{border-bottom:none}
.tl-label{color:var(--gray);font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase}

/* ── PHOTO GALLERY ── */
.photo-grid{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.photo-thumb{width:72px;height:72px;object-fit:cover;border:1px solid var(--border);cursor:pointer;transition:all .15s}
.photo-thumb:hover{border-color:var(--white2);opacity:.8}
.photo-upload{width:72px;height:72px;border:2px dashed var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gray);font-size:20px;transition:all .15s}
.photo-upload:hover{border-color:var(--white2);color:var(--white)}
.photo-full{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:600;cursor:pointer}
.photo-full img{max-width:90vw;max-height:90vh;object-fit:contain}

/* ── POS Animations ── */
@keyframes pulse{0%,100%{opacity:1;transform:rotate(0deg)}50%{opacity:.5;transform:rotate(180deg)}}


/* ── PRISM AI ── */
#ai-fab:hover{transform:scale(1.08)!important;box-shadow:0 6px 30px rgba(192,132,252,.4)!important}
#ai-panel{border-color:rgba(192,132,252,.2)!important}
.prism-msg{background:rgba(192,132,252,.06);border:1px solid rgba(192,132,252,.15)}
.prism-accent{color:#c084fc}

/* ══════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
══════════════════════════════════════ */

/* Tablet (768px - 1024px) */
@media(max-width:1024px){
  .pos-layout{grid-template-columns:1fr!important}
  .cart-wrap{max-height:400px}
  .g4{grid-template-columns:repeat(2,1fr)!important}
  .g3{grid-template-columns:repeat(2,1fr)!important}
  .g2{grid-template-columns:1fr!important}
  .fr3{grid-template-columns:1fr 1fr!important}
  .kanban{grid-template-columns:repeat(3,1fr)!important}
  .email-layout{grid-template-columns:1fr!important}
  .email-list{max-height:300px;border-right:none!important;border-bottom:1px solid var(--border)}
  .prism-layout{grid-template-columns:1fr!important}
  .prism-sidebar{display:none}
  .modal{width:95vw!important;max-width:95vw!important}
}

/* Mobile (max 768px) */
@media(max-width:768px){
  .topbar{height:auto;flex-wrap:wrap;padding:8px 12px!important;gap:8px}
  .tb-logo{font-size:16px!important}
  .tb-search{display:none}
  .tb-divider{display:none}
  .tb-title{font-size:12px!important;letter-spacing:1px!important}
  .tb-cta{font-size:10px!important;padding:6px 12px!important;letter-spacing:2px!important}
  .tb-user{padding:4px 6px!important}
  .tb-user-name{font-size:10px!important}
  .tb-user-role{font-size:8px!important}
  .tb-user-av{width:22px!important;height:22px!important;font-size:9px!important}
  .tb-logout{font-size:9px!important;padding:4px 8px!important}

  .body-wrap{flex-direction:column!important}
  .sb{width:100%!important;height:auto!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;border-right:none!important;border-bottom:1px solid var(--border)}
  .sb-sec{display:none!important}
  .sb-item{padding:8px 12px!important;white-space:nowrap;font-size:11px!important;border-left:none!important;border-bottom:2px solid transparent}
  .sb-item.active{border-left:none!important;border-bottom-color:var(--white)!important}
  .sb-ico{font-size:11px!important}
  .sb-role-tag{display:none!important}
  .sb-badge{display:none!important}

  .content{padding:12px!important}
  .pos-layout{grid-template-columns:1fr!important;gap:12px!important;height:auto!important}
  .g4{grid-template-columns:1fr 1fr!important}
  .g3{grid-template-columns:1fr!important}
  .g2{grid-template-columns:1fr!important}
  .fr2{grid-template-columns:1fr!important}
  .fr3{grid-template-columns:1fr!important}
  .card{padding:12px 14px!important}
  .metric-val{font-size:24px!important}
  .kanban{grid-template-columns:1fr!important}

  .modal{width:100vw!important;max-width:100vw!important;max-height:100vh!important;padding:16px!important}
  .modal-bg{padding:0!important}
  .modal-title{font-size:14px!important}

  table{font-size:11px}
  th{font-size:9px!important;padding:6px 8px!important}
  td{padding:8px!important;font-size:11px!important}

  .cat-btn{padding:6px 10px!important;font-size:10px!important}
  .btn{padding:6px 12px!important;font-size:11px!important}
  .btn-sm{padding:4px 8px!important;font-size:10px!important}

  .cart-wrap{border:1px solid var(--border)!important}
  .cart-hd-title{font-size:14px!important}
  .tot-final{font-size:16px!important}

  .email-layout{grid-template-columns:1fr!important}
  .email-list{max-height:250px;border-right:none!important;border-bottom:1px solid var(--border)}

  .prism-layout{grid-template-columns:1fr!important}
  .prism-sidebar{position:fixed;left:-260px;top:52px;bottom:0;width:260px;z-index:800;transition:left .2s}
  .prism-sidebar.open{left:0}
  .prism-input{font-size:16px!important}
  .prism-send{padding:14px 16px!important;font-size:12px!important}

  .timeline{padding-left:14px!important}
  .tl-head{padding:6px 8px!important}
  .tl-id{font-size:10px!important}
  .tl-svc{font-size:10px!important}
  .tl-price{font-size:12px!important}

  .inv-wrap{padding:16px!important}
  .inv-parties{grid-template-columns:1fr!important}

  #ai-fab{bottom:12px!important;right:12px!important;width:44px!important;height:44px!important}
  #ai-panel{width:calc(100vw - 24px)!important;height:60vh!important;bottom:64px!important;right:12px!important}

  .photo-thumb{width:56px!important;height:56px!important}
  .photo-upload{width:56px!important;height:56px!important}
}

/* Small mobile (max 480px) */
@media(max-width:480px){
  .g4{grid-template-columns:1fr!important}
  .topbar{padding:6px 8px!important}
  .tb-cta{display:none!important}
  .content{padding:8px!important}
  .metric{padding:10px 12px!important}
  .metric-val{font-size:20px!important}
  .metric-lbl{font-size:8px!important}
}

/* Fix mobile scroll */
@media(max-width:768px){
  .body-wrap{overflow-y:auto!important;overflow-x:hidden!important}
  .content{overflow-y:auto!important;height:auto!important}
  .pos-layout{height:auto!important;overflow:visible!important}
  .cart-wrap{max-height:none!important;overflow:visible!important}
  #app-screen{height:auto!important;min-height:100vh!important;overflow-y:auto!important}

  /* Touch targets ampliados en mobile */
  .ci-btn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;font-size:18px!important}
  .ci-qty{gap:8px!important}
  .modal-x{min-width:40px!important;min-height:40px!important;font-size:18px!important}
  .pin-key{padding:20px!important}
}

/* ══════════════════════════════════════
   PRINT — Facturas y recibos (#37)
══════════════════════════════════════ */
@media print{
  /* Invertir dark theme → blanco */
  :root{--bg:#fff!important;--black:#fff!important;--black2:#fff!important;--black3:#fff!important;--black4:#fff!important;--white:#000!important;--white2:#000!important;--white3:#000!important;--gray:#555!important;--gray2:#888!important;--border:#ddd!important;--border2:#bbb!important}
  html,body{background:#fff!important;color:#000!important;margin:0!important;padding:0!important}
  *{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Ocultar chrome de app */
  .sidebar,.sb,.topbar,.tb-search,.tb-user,.tb-cta,.tb-logout,.tb-divider,
  #ai-fab,#ai-panel,.ai-widget,
  #toast,.toast,
  .modal-x,
  .btn,.btn-wh,.btn-ol,.btn-red,.btn-green,.btn-sm,.btn-xs,
  .print-hide,
  .cat-strip,.pay-grid,.act-btns,
  .fs,.flow-bar,
  .tb-logo,#login-screen{display:none!important}

  /* Modal: aplanar backdrop para que la factura dentro se imprima */
  .modal-bg{position:static!important;background:transparent!important;padding:0!important;display:block!important}
  .modal{background:#fff!important;border:none!important;width:100%!important;max-width:100%!important;max-height:none!important;overflow:visible!important;padding:0!important}

  /* Mostrar solo elementos marcados */
  .print-only{display:block!important}

  /* Layout principal */
  body,#app-screen,.body-wrap{display:block!important;height:auto!important;overflow:visible!important}
  .content{flex:none!important;margin:0!important;padding:0!important;max-width:100%!important;width:100%!important;background:#fff!important;overflow:visible!important;height:auto!important}

  /* Cards y pills neutros */
  .card{box-shadow:none!important;border:1px solid #ccc!important;background:#fff!important;padding:12px!important}
  .pill{border:1px solid #666!important;color:#000!important;background:#fff!important}
  .metric{border:1px solid #ccc!important;border-top:2px solid #000!important;background:#fff!important}

  /* Tablas legibles y sin cortes */
  table{page-break-inside:auto;border-collapse:collapse!important;width:100%!important}
  thead{display:table-header-group}
  tfoot{display:table-footer-group}
  tr{page-break-inside:avoid;page-break-after:auto}
  th{background:#000!important;color:#fff!important;border-bottom:1px solid #000!important}
  td{border-bottom:1px solid #ddd!important;color:#000!important}
  tr:hover td{background:#fff!important}

  /* Evitar cortar headings */
  h1,h2,h3,h4{page-break-after:avoid;color:#000!important}

  /* Enlaces sin subrayado ni color */
  a,a:visited{color:#000!important;text-decoration:none!important}

  /* Tipografía: sans para headers, serif para cuerpo largo */
  body{font-family:"Barlow",sans-serif}
  .inv-p-info,.inv-items td,.inv-tr,.inv-foot,p{font-family:Georgia,"Times New Roman",serif}

  /* Invoice wrapper — ya es blanco */
  .inv-wrap{max-width:100%!important;margin:0!important;padding:0!important;box-shadow:none!important;border:none!important}
  .inv-items th{background:#000!important;color:#fff!important}

  /* Scrollbars off */
  ::-webkit-scrollbar{display:none}

  /* Clase auxiliar: imprimir solo un target */
  body.print-focus *{visibility:hidden!important}
  body.print-focus .print-focus-target,body.print-focus .print-focus-target *{visibility:visible!important}
  body.print-focus .print-focus-target{position:absolute!important;left:0;top:0;width:100%!important;margin:0!important;padding:0!important;display:block!important}

  /* Papel Letter por defecto */
  @page{margin:1.5cm;size:Letter}

  /* Recibo térmico 80mm — activar con body.print-thermal o @media narrow */
  @media (max-width:85mm){
    @page{size:80mm auto;margin:2mm}
    body{font-size:11px!important}
    .inv-wrap{padding:4px!important}
    .inv-parties{grid-template-columns:1fr!important;gap:6px!important}
    .inv-hd{flex-direction:column!important;gap:6px!important}
    .inv-brand-X{font-size:22px!important}
    .inv-meta-num{font-size:14px!important}
    table th,table td{padding:3px 4px!important;font-size:10px!important}
  }
}

/* Utilitarias de print (siempre activas, para controlar desde HTML) */
.print-only{display:none}
@media print{.print-only{display:block}}

/* ── GLOBAL LOADER ── */
#global-loader{position:fixed;inset:0;background:rgba(17,17,16,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:99999;opacity:0;pointer-events:none;transition:opacity .2s}
#global-loader.show{opacity:1;pointer-events:auto}
#global-loader .gl-spinner{width:48px;height:48px;border:3px solid rgba(244,243,240,.2);border-top-color:#f4f3f0;border-radius:50%;animation:gl-spin .9s linear infinite}
#global-loader .gl-msg{margin-top:14px;color:#f4f3f0;font-family:'Barlow',sans-serif;font-size:14px;letter-spacing:.3px}
@keyframes gl-spin{to{transform:rotate(360deg)}}

/* ── PAGINATION ── */
.pg-bar{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 0;font-size:13px;color:var(--gray)}
.pg-btn{background:rgba(244,243,240,.08);color:var(--white);border:0;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px}
.pg-btn:hover{background:rgba(244,243,240,.16)}

/* ══════════════════════════════════════
   RESPONSIVE v2 — Tablet/Mobile sidebar drawer
   (Sobrescribe reglas previas — v2 gana por orden)
══════════════════════════════════════ */

/* Hamburger oculto por defecto (desktop) */
.tb-hamburger{display:none;background:none;border:0;color:var(--white);font-size:22px;padding:0 10px;cursor:pointer;line-height:1;flex-shrink:0;min-width:44px;min-height:44px;align-items:center;justify-content:center}

/* Tablet vertical / mobile — drawer lateral */
@media (max-width:900px){
  .tb-hamburger{display:inline-flex}

  /* Topbar: compacta, NO wrap. Logo + título + user en una fila */
  .topbar{height:52px!important;flex-wrap:nowrap!important;padding:0 8px!important;gap:8px!important;overflow:hidden}
  .tb-logo{font-size:16px!important}
  .tb-logo span{display:none}
  .tb-divider{display:none}
  .tb-title{font-size:11px!important;letter-spacing:1.5px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .tb-search{display:none!important}
  .tb-cta{padding:6px 10px!important;font-size:10px!important;letter-spacing:1.5px!important}
  .tb-user{padding:4px 8px!important;gap:6px!important}
  .tb-user-av{width:26px!important;height:26px!important;font-size:11px!important}
  .tb-logout{padding:6px 8px!important;font-size:10px!important;letter-spacing:1.5px!important;min-height:36px}

  /* Body stack: content full-width, sidebar como drawer absoluto */
  .body-wrap{flex-direction:row!important;overflow:visible!important}
  .content{padding:12px!important;width:100%!important}

  /* Sidebar como drawer overlay (sobrescribe la regla @768 que lo hacía horizontal) */
  .sb{
    position:fixed!important;
    top:52px;left:0;bottom:0;
    width:240px!important;height:auto!important;
    flex-direction:column!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    border-right:1px solid var(--border)!important;border-bottom:none!important;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .22s ease;
    background:var(--black2);
  }
  .sb.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.6)}
  .sb-sec{display:block!important;padding:18px 14px 5px!important;font-size:9px!important}
  .sb-item{padding:12px 14px!important;white-space:normal!important;font-size:13px!important;border-left:2px solid transparent!important;border-bottom:none!important;min-height:44px}
  .sb-item.active{border-left-color:var(--white)!important;border-bottom:none!important}
  .sb-ico{font-size:13px!important}
  .sb-role-tag{display:block!important}
  .sb-badge{display:inline-flex!important}

  /* Overlay oscuro detrás del drawer */
  body.sb-open::after{content:"";position:fixed;top:52px;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:999}

  /* Touch targets generales */
  .btn{min-height:44px;padding:10px 14px!important;font-size:12px!important}
  .btn-sm{min-height:36px;padding:6px 12px!important;font-size:11px!important}
  .btn-xs{min-height:32px;padding:4px 10px!important;font-size:10px!important}

  /* Inputs ≥16px para evitar zoom iOS */
  input,select,textarea,.fld input,.fld select,.fld textarea{font-size:16px!important}
  .login-fld input,#role-select{font-size:16px!important}

  /* Modales dentro del viewport con scroll */
  .modal-bg{padding:8px!important;align-items:flex-start!important}
  .modal{
    width:auto!important;
    max-width:min(640px,96vw)!important;
    max-height:90vh!important;
    overflow-y:auto!important;
    padding:18px!important;
    margin:2vh auto!important;
  }
  .modal-title{font-size:15px!important}
  .fr2,.fr3{grid-template-columns:1fr!important}

  /* Tablas: scroll horizontal cuando están en wrapper, o wrap en cards */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{font-size:12px}
  th{padding:7px 8px!important;font-size:10px!important}
  td{padding:8px!important;font-size:12px!important}

  /* POS layout: en tablet vertical se apila, pero cart queda accesible */
  .pos-layout{grid-template-columns:1fr!important;height:auto!important;gap:10px!important}
  .prod-grid{max-height:none!important;grid-template-columns:repeat(3,1fr)!important}
  .cart-wrap{border:1px solid var(--border)!important}
  .ci-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;font-size:18px!important}
  .cart-item{padding:12px 0!important;min-height:50px}
  .pay-opt{padding:12px 6px!important;min-height:44px}

  /* Kanban: horizontal scroll */
  .kanban{grid-template-columns:repeat(6,minmax(220px,1fr))!important;overflow-x:auto!important}
}

/* Tablet horizontal / iPad landscape: POS en 2 columnas */
@media (min-width:701px) and (max-width:1100px) and (orientation:landscape){
  .pos-layout{grid-template-columns:1fr 340px!important;height:calc(100vh - 52px - 24px)!important}
  .prod-grid{grid-template-columns:repeat(3,1fr)!important}
}

/* Mobile compacto */
@media (max-width:600px){
  .topbar{padding:0 6px!important;gap:6px!important}
  .tb-user-name,.tb-user-role{display:none!important}
  .tb-user>div:not(.tb-user-av){display:none!important}
  .tb-cta{display:none!important}
  .content{padding:10px!important}
  .card{padding:12px!important}
  .metric-val{font-size:18px!important}
  .metric{padding:12px!important}
  .g4{grid-template-columns:1fr 1fr!important}
  .g3,.g2{grid-template-columns:1fr!important}
  .prod-grid{grid-template-columns:repeat(2,1fr)!important}
  .kanban{grid-template-columns:1fr!important}
  .pay-grid{grid-template-columns:repeat(2,1fr)!important}
  .modal{padding:14px!important}
  .modal-title{font-size:14px!important}
}

/* Mobile muy pequeño */
@media (max-width:380px){
  .tb-logo{font-size:14px!important}
  .tb-title{display:none!important}
  .g4{grid-template-columns:1fr!important}
}
.pg-info{font-family:'Barlow',sans-serif}