:root{--teal:#3dbfa0;--teal-dark:#2a9e83;--orange:#f25c2a;--blue:#00b0e8;--bg:#f0f4f8;--text:#1a2332;--muted:#6b7a8d;--border:#e0e8f0;--danger:#e53e3e;--success:#38a169;--purple:#7c3aed;--gold:#d97706;--dark:#1a2332;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes slideIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.hidden{display:none!important;}
.screen{display:none;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;flex-direction:column;overflow:hidden;}
.screen.active{display:flex;}

/* AUTH */
#screen-auth{background:linear-gradient(135deg,#1a2332,#2d4a6b 50%,#3dbfa0);align-items:center;justify-content:center;padding:20px;min-height:100vh;}
.auth-card{background:white;border-radius:24px;padding:32px 26px;width:100%;max-width:400px;box-shadow:0 32px 80px rgba(0,0,0,.3);animation:slideUp .4s ease;}
.auth-logo{text-align:center;margin-bottom:20px;}
.auth-icon{width:58px;height:58px;background:linear-gradient(135deg,var(--teal),var(--blue));border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:8px;}
.auth-logo h1{font-size:19px;font-weight:800;}
.auth-logo p{font-size:12px;color:var(--muted);margin-top:2px;}
.role-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.role-tab{padding:12px;border:2px solid var(--border);border-radius:12px;background:white;cursor:pointer;text-align:center;transition:all .2s;}
.role-tab.active{border-color:var(--teal);background:#e6fff8;}
.role-tab .rt-icon{font-size:22px;display:block;margin-bottom:4px;}
.role-tab .rt-label{font-size:12px;font-weight:800;color:var(--text);}
.role-tab.active .rt-label{color:var(--teal-dark);}
.auth-tabs{display:flex;background:var(--bg);border-radius:12px;padding:3px;margin-bottom:16px;gap:3px;}
.auth-tab{flex:1;padding:8px;border:none;background:none;border-radius:10px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:.2s;}
.auth-tab.active{background:white;color:var(--teal);box-shadow:0 2px 8px rgba(0,0,0,.1);}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;}
.form-group input,.form-group select{width:100%;padding:11px 13px;border:2px solid var(--border);border-radius:11px;font-size:14px;color:var(--text);outline:none;transition:border-color .2s;background:#fafbfc;}
.form-group input:focus{border-color:var(--teal);}
.biz-code-box{background:linear-gradient(135deg,#e6fff8,#d4f5ec);border:2px solid var(--teal);border-radius:12px;padding:12px 14px;margin-bottom:14px;text-align:center;}
.biz-code-label{font-size:11px;color:var(--teal-dark);font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px;}
.biz-code-val{font-size:26px;font-weight:800;color:var(--teal-dark);letter-spacing:2px;}
.biz-code-hint{font-size:11px;color:var(--teal-dark);opacity:.7;margin-top:3px;}
.err-msg{color:var(--danger);font-size:12px;margin-bottom:10px;padding:8px;background:#fff0f0;border-radius:8px;text-align:center;}
.btn-primary{width:100%;padding:13px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:white;border:none;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 16px rgba(61,191,160,.35);}
.btn-secondary{width:100%;padding:11px;background:white;color:var(--text);border:2px solid var(--border);border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;}
.btn-danger{width:100%;padding:11px;background:var(--danger);color:white;border:none;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;}
.btn-purple{width:100%;padding:11px;background:var(--purple);color:white;border:none;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;}
.btn-gold{width:100%;padding:11px;background:var(--gold);color:white;border:none;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;}
.btn-orange{width:100%;padding:11px;background:var(--orange);color:white;border:none;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;}
.btn-sm{padding:6px 11px;border:none;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;}
.btn-sm.teal{background:var(--teal);color:white;}
.btn-sm.red{background:var(--danger);color:white;}
.btn-sm.gray{background:var(--bg);color:var(--text);border:2px solid var(--border);}
.btn-sm.purple{background:var(--purple);color:white;}
.btn-sm.gold{background:var(--gold);color:white;}
.btn-sm.orange{background:var(--orange);color:white;}

/* HEADER */
.app-header{background:var(--teal);color:white;padding:0 13px;height:54px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.15);}
.header-left{display:flex;align-items:center;gap:10px;}
.menu-btn{background:none;border:none;color:white;cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;}
.header-title{font-size:15px;font-weight:800;}
.header-right{display:flex;align-items:center;gap:7px;}
.bt-pill{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.2);border:1.5px solid rgba(255,255,255,.3);border-radius:20px;padding:4px 9px;cursor:pointer;font-size:11px;font-weight:700;color:white;white-space:nowrap;}
.dev-pill{display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.2);border-radius:16px;padding:4px 8px;cursor:pointer;font-size:13px;color:white;transition:background .2s;}
.dev-pill:active{background:rgba(0,0,0,.4);}
.dev-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8;flex-shrink:0;transition:background .3s;}
.dev-dot.on{background:#22c55e;box-shadow:0 0 5px #22c55e;}
.dev-dot.warn{background:#f59e0b;}
.bt-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);}
.bt-dot.on{background:#7effd4;}
.bt-dot.blink{background:#ffd97e;animation:pulse .9s infinite;}
.ticket-pill{background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.35);color:white;border-radius:20px;padding:4px 11px;font-weight:800;font-size:13px;display:flex;align-items:center;gap:4px;cursor:pointer;}

/* SIDEBAR */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;}
.sidebar{position:fixed;left:-290px;top:0;bottom:0;width:290px;background:#1a2332;z-index:300;transition:left .28s ease;display:flex;flex-direction:column;overflow-y:auto;}
.sidebar.open{left:0;}
.sb-head{padding:18px 16px 12px;background:rgba(0,0,0,.25);}
.sb-head h2{font-size:16px;font-weight:800;color:white;}
.sb-user{font-size:11px;color:var(--teal);margin-top:2px;}
.sb-biz{font-size:10px;color:rgba(255,255,255,.4);margin-top:1px;}
.sb-label{font-size:10px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1.2px;padding:14px 16px 4px;font-weight:800;border-top:1px solid rgba(255,255,255,.07);margin-top:4px;}.sb-label:first-of-type{border-top:none;margin-top:0;}
.sb-item{display:flex;align-items:center;gap:11px;padding:10px 16px;color:rgba(255,255,255,.7);cursor:pointer;transition:background .15s;font-size:13px;border:none;background:none;width:100%;text-align:left;}
.sb-item:hover{background:rgba(255,255,255,.08);color:white;}
.sb-item.active{background:rgba(61,191,160,.2);color:var(--teal);}
.sb-item.danger{color:rgba(229,62,62,.7);}
.sb-item.danger:hover{background:rgba(229,62,62,.1);color:var(--danger);}
.sb-item .ico{font-size:15px;width:18px;text-align:center;}
.sb-spacer{flex:1;}
.bt-card{margin:4px 10px 7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px;}
.bt-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.bt-card-name{font-size:12px;font-weight:700;color:white;}
.bt-card-sub{font-size:10px;color:rgba(255,255,255,.4);margin-top:1px;}
.bt-card-btns{display:flex;gap:6px;}
.bt-card-btn{flex:1;padding:6px;border:none;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;}
.bt-card-btn.connect{background:var(--teal);color:white;}
.bt-card-btn.disconnect{background:rgba(229,62,62,.7);color:white;}
.bt-card-btn.test{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);}

/* TURNO BANNER */
.turno-banner{background:linear-gradient(135deg,#1a2332,#2d4a6b);color:white;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.caja-dashboard{background:linear-gradient(135deg,#c53030,#e53e3e);color:white;padding:7px 10px;flex-shrink:0;display:flex;align-items:center;}
.caja-row{display:flex;gap:6px;width:100%;}
.caja-card{flex:1;background:rgba(255,255,255,.1);border-radius:10px;padding:6px 10px;min-width:0;}
.caja-card.accent-green{background:rgba(16,185,129,.25);border:1px solid rgba(16,185,129,.4);}
.caja-card.accent-blue{background:rgba(59,130,246,.25);border:1px solid rgba(59,130,246,.4);}
.caja-card.accent-gold{background:rgba(245,158,11,.25);border:1px solid rgba(245,158,11,.4);}
.cc-label{font-size:9px;opacity:.7;text-transform:uppercase;letter-spacing:.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-val{font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-val.sm{font-size:12px;font-weight:700;}
.tb-info .tb-label{font-size:10px;opacity:.6;text-transform:uppercase;letter-spacing:.7px;}
.tb-info .tb-val{font-size:14px;font-weight:800;}
.tb-right{text-align:right;}

#screen-pos{
  position:fixed;top:0;left:0;right:0;bottom:0;
  height:100%;max-height:100%;
  display:none;flex-direction:column;overflow:hidden;
}
#screen-pos.active{display:flex;}
/* POS — layout correcto */
.pos-body{flex:1;display:flex;flex-direction:row;overflow:hidden;gap:0;min-height:0;max-height:100%;}

/* IZQUIERDA: buscador fijo + productos con scroll */
.pos-left{flex:1;display:flex;flex-direction:column;padding:7px;gap:6px;overflow:hidden;min-width:0;}
.pos-left-scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;max-height:100%;}
.search-bar{background:white;border:2px solid var(--border);border-radius:11px;padding:8px 13px;font-size:14px;color:var(--text);outline:none;transition:border-color .2s;width:100%;box-sizing:border-box;flex-shrink:0;}
.search-bar:focus{border-color:var(--teal);}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;align-content:start;}
.product-btn{background:#4a5568;color:white;border:none;border-radius:11px;padding:0;font-size:12px;font-weight:700;cursor:pointer;text-align:center;position:relative;overflow:hidden;transition:background .15s,transform .1s;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;aspect-ratio:1.1/1;min-height:80px;}
.product-btn:active{transform:scale(.96);}
.product-btn.out{background:#555;opacity:.6;}
.pb-price{opacity:.8;font-size:11px;font-weight:600;margin-top:3px;}
.pb-sku{opacity:.4;font-size:9px;margin-top:1px;}
/* Category bar */
.cat-filter-btn{flex-shrink:0;padding:6px 12px;border-radius:20px;border:2px solid var(--border);background:white;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;color:var(--text);transition:all .15s;}
.cat-filter-btn.active{background:var(--teal);border-color:var(--teal);color:white;}
/* List view */
.products-list-view{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;}
.product-list-btn{display:flex;align-items:center;background:white;border:2px solid var(--border);border-radius:10px;padding:9px 12px;gap:10px;cursor:pointer;transition:border-color .15s,background .1s;text-align:left;width:100%;}
.product-list-btn:active{background:#f0f9f7;border-color:var(--teal);}
.plb-name{flex:1;font-size:14px;font-weight:700;color:var(--text);}
.plb-price{font-size:14px;font-weight:800;color:var(--teal-dark);}
.plb-qty{background:var(--teal);color:white;border-radius:50%;width:22px;height:22px;font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;}
.qty-badge{position:absolute;top:3px;right:3px;background:var(--teal);color:white;border-radius:50%;width:20px;height:20px;font-size:10px;display:none;align-items:center;justify-content:center;font-weight:800;}

/* DERECHA: ticket (scroll) + acciones FIJAS abajo */
.pos-right{width:260px;flex-shrink:0;display:flex;flex-direction:column;background:white;border-left:2px solid var(--border);}
.ticket-panel{flex:1;overflow-y:auto;padding:7px 10px;min-height:0;}
.ticket-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13px;gap:6px;flex-direction:column;}
.ticket-item{display:flex;align-items:center;padding:5px 0;border-bottom:1px solid #f0f4f8;gap:4px;animation:slideIn .18s ease;}
.ticket-item:last-child{border-bottom:none;}
.ti-name{flex:1;font-size:14px;font-weight:700;line-height:1.3;}
.ti-qty{background:var(--bg);border-radius:6px;padding:3px 7px;font-size:12px;font-weight:800;color:var(--teal-dark);}
.ti-price{font-size:13px;font-weight:800;text-align:right;color:var(--text);}
.ti-note{font-size:10px;color:#7c3aed;font-weight:600;margin-top:1px;font-style:italic;}
.note-quick{padding:5px 10px;background:#f0f4f8;border:1.5px solid var(--border);border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;color:var(--text);}
.note-quick:active{background:var(--teal);color:white;}
.ti-del{background:none;border:none;cursor:pointer;color:#ccc;font-size:14px;padding:2px;}
.ticket-top-edge{
  flex-shrink:0;padding:6px 10px 4px;
  font-size:9px;font-weight:900;letter-spacing:2px;color:var(--muted);text-align:center;
  border-bottom:2px dashed #d0d7e0;background:white;
}
.ticket-top-edge::before{content:'';display:block;font-size:11px;letter-spacing:1px;color:#c0c8d4;margin-bottom:2px;
  background:repeating-linear-gradient(90deg,#d0d7e0 0,#d0d7e0 4px,transparent 4px,transparent 8px);height:4px;border-radius:2px;}
.ticket-bot-edge{
  flex-shrink:0;height:10px;
  background:repeating-linear-gradient(90deg,#d0d7e0 0,#d0d7e0 4px,transparent 4px,transparent 8px);
  border-top:2px dashed #d0d7e0;margin:0;
}
.action-row{display:flex;gap:5px;align-items:stretch;}
.action-row .btn-edit{flex:0 0 44px;height:44px;font-size:18px;padding:0;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.action-row .btn-charge{flex:1;height:44px;font-size:13px;font-weight:800;padding:0;min-width:0;}
.action-row #btn-cotizar{flex:0 0 44px;height:44px;}
.btn-cancel-ticket{flex:0 0 44px;height:44px;background:none;border:2px solid #fecaca;border-radius:10px;font-size:18px;cursor:pointer;color:var(--danger);display:flex;align-items:center;justify-content:center;}
/* Acciones siempre fijas — nunca se van de pantalla */
.pos-right-bottom{border-top:2px solid var(--border);padding:8px;flex-shrink:0;background:white;}
.total-row-r{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.total-label-r{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;}
.total-amount-r{font-size:20px;font-weight:900;color:var(--teal-dark);}
.total-row{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 0;}
.total-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:600;}
.total-amount{font-size:21px;font-weight:800;}
.action-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.btn-edit{padding:13px;background:var(--orange);color:white;border:none;border-radius:12px;font-size:13px;font-weight:800;cursor:pointer;}
.btn-charge{padding:13px;background:var(--blue);color:white;border:none;border-radius:12px;font-size:13px;font-weight:800;cursor:pointer;}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:500;align-items:flex-end;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:white;border-radius:22px 22px 0 0;padding:18px 16px;width:100%;max-width:480px;box-shadow:0 -8px 40px rgba(0,0,0,.3);animation:slideUp .25s ease;max-height:93vh;overflow-y:auto;}
.ap-npk{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:12px;padding:14px 8px;font-size:20px;font-weight:700;color:#0f172a;cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;}
.ap-npk:active{background:#e2e8f0;}
.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 13px;}
.modal h2{font-size:16px;font-weight:800;margin-bottom:4px;text-align:center;}
.modal p{color:var(--muted);font-size:13px;margin-bottom:11px;text-align:center;}
.modal-btns{display:flex;gap:8px;margin-top:10px;}
.modal-btns button{flex:1;}

/* COBRAR */
.cobro-total{font-size:36px;font-weight:800;text-align:center;line-height:1.1;margin-bottom:2px;}
.cobro-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;text-align:center;margin-bottom:6px;}
.cobro-items{border:2px solid var(--border);border-radius:10px;padding:7px 10px;margin:6px 0;max-height:100px;overflow-y:auto;}
.cobro-line{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;border-bottom:1px solid var(--border);}
.cobro-line:last-child{border-bottom:none;}
.disc-type-btn{padding:4px 9px;border-radius:7px;border:2px solid #fde047;background:white;font-size:12px;font-weight:800;cursor:pointer;color:#854d0e;transition:all .1s;}
.disc-type-btn.active{background:#fde047;border-color:#f59e0b;}
.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0;}
.pay-btn{padding:9px 4px;border:2px solid var(--border);border-radius:10px;background:white;font-size:11px;font-weight:800;cursor:pointer;text-align:center;transition:all .15s;color:var(--text);}
.pay-btn.active{border-color:var(--teal);background:#e6fff8;color:var(--teal-dark);}
.pay-btn .pay-icon{font-size:18px;display:block;margin-bottom:2px;}
.money-row{display:flex;gap:6px;align-items:center;margin:6px 0;}
.money-sign{font-size:19px;font-weight:700;color:var(--muted);}
.money-input{flex:1;padding:9px 10px;border:2px solid var(--border);border-radius:10px;font-size:24px;font-weight:800;color:var(--text);outline:none;text-align:right;background:#fafbfc;}
/* Numpad */
.numpad-display{display:flex;align-items:baseline;justify-content:flex-end;background:#f0f9f7;border:2px solid var(--teal);border-radius:12px;padding:10px 14px;margin-bottom:8px;gap:4px;}
.numpad-sign{font-size:18px;font-weight:800;color:var(--teal-dark);opacity:.6;}
.numpad-val{font-size:32px;font-weight:900;color:var(--teal-dark);letter-spacing:1px;min-width:60px;text-align:right;}
.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px;}
.nk{background:white;border:2px solid var(--border);border-radius:11px;font-size:20px;font-weight:700;color:var(--text);padding:12px 0;cursor:pointer;transition:background .1s,transform .08s;-webkit-tap-highlight-color:transparent;}
.nk:active{background:var(--teal);color:white;border-color:var(--teal);transform:scale(.94);}
.nk-del{background:#fff5f5;border-color:#fecaca;color:var(--danger);}
.nk-del:active{background:var(--danger);color:white;border-color:var(--danger);}
.money-input:focus{border-color:var(--teal);}
.quick-btns{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px;}
.quick-btn{padding:5px 9px;border:2px solid var(--border);background:white;border-radius:7px;font-size:12px;font-weight:800;cursor:pointer;color:var(--text);}
.quick-btn.aq{background:var(--teal);color:white;border-color:var(--teal);}
.cambio-box{border-radius:11px;padding:9px 12px;margin:6px 0;display:flex;justify-content:space-between;align-items:center;}
.cambio-box.ok{background:#e6fff8;border:2px solid var(--teal);}
.cambio-box.neg{background:#fff0f0;border:2px solid var(--danger);}
.cambio-label{font-size:12px;font-weight:700;}
.cambio-box.ok .cambio-label{color:var(--teal-dark);}
.cambio-box.neg .cambio-label{color:var(--danger);}
.cambio-amount{font-size:22px;font-weight:800;}
.cambio-box.ok .cambio-amount{color:var(--teal-dark);}
.cambio-box.neg .cambio-amount{color:var(--danger);}
.print-row{display:flex;align-items:center;justify-content:space-between;background:#f5f0ff;border:2px solid #ddd6fe;border-radius:10px;padding:8px 11px;margin:6px 0;}
.pr-title{font-size:12px;font-weight:800;color:var(--purple);}
.pr-sub{font-size:10px;color:#9d6ed4;margin-top:1px;}
.comanda-row{display:flex;align-items:center;justify-content:space-between;background:#fff8e6;border:2px solid #fcd34d;border-radius:10px;padding:8px 11px;margin:6px 0;}
.cr-title{font-size:12px;font-weight:800;color:var(--gold);}
.cr-sub{font-size:10px;color:#b45309;margin-top:1px;}
.toggle{position:relative;width:42px;height:23px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-track{position:absolute;inset:0;background:#ddd;border-radius:12px;cursor:pointer;transition:background .3s;}
.toggle input:checked+.toggle-track{background:var(--purple);}
.toggle-track::before{content:'';position:absolute;width:17px;height:17px;background:white;border-radius:50%;top:3px;left:3px;transition:transform .3s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle input:checked+.toggle-track::before{transform:translateX(19px);}

/* TURNO CIERRE */
.retiro-list{max-height:100px;overflow-y:auto;margin:6px 0;}
.retiro-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px;}
.retiro-row:last-child{border-bottom:none;}
.cierre-summary{background:var(--bg);border-radius:11px;padding:12px;margin:8px 0;}
.cs-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid var(--border);}
.cs-row:last-child{border-bottom:none;}
.cs-row.highlight{font-weight:800;color:var(--success);}
.cs-row.warn{font-weight:800;color:var(--danger);}
.cs-row.ok{font-weight:800;color:var(--teal-dark);}
.diff-box{border-radius:10px;padding:10px 12px;margin:6px 0;text-align:center;}
.diff-box.ok{background:#e6fff8;border:2px solid var(--teal);}
.diff-box.warn{background:#fff0f0;border:2px solid var(--danger);}
.diff-box .diff-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px;}
.diff-box.ok .diff-label{color:var(--teal-dark);}
.diff-box.warn .diff-label{color:var(--danger);}
.diff-box .diff-val{font-size:24px;font-weight:800;}
.diff-box.ok .diff-val{color:var(--teal-dark);}
.diff-box.warn .diff-val{color:var(--danger);}

/* EDIT TICKET */
.edit-list{max-height:220px;overflow-y:auto;margin-bottom:11px;}
.edit-item{display:flex;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);gap:6px;}
.edit-item:last-child{border-bottom:none;}
.ei-name{flex:1;font-size:12px;}
.qty-ctrl{display:flex;align-items:center;gap:5px;}
.qty-btn{width:25px;height:25px;border-radius:7px;border:2px solid var(--border);background:white;cursor:pointer;font-size:15px;font-weight:800;color:var(--text);display:flex;align-items:center;justify-content:center;}
.qty-num{font-size:13px;font-weight:800;min-width:18px;text-align:center;}
.ei-del{background:none;border:none;color:var(--danger);cursor:pointer;font-size:15px;padding:2px;}

/* SETTINGS */
.settings-body,.prod-body,.hist-body{flex:1;padding:12px;overflow-y:auto;}
/* ── Tabs estilo carpeta ── */
.tab-bar{display:flex;gap:0;padding:0 12px;background:var(--bg);border-bottom:2px solid var(--border);overflow-x:auto;scrollbar-width:none;flex-shrink:0;}
.tab-btn{padding:10px 14px;font-size:12px;font-weight:800;border:none;background:transparent;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .15s;}
.tab-btn.active{color:var(--teal-dark);border-bottom-color:var(--teal);background:white;}
.tab-btn:active{background:#f0f9f7;}

/* ── Periféricos rediseño ── */
.peri-card{background:white;border-radius:14px;border:2px solid var(--border);padding:14px;margin-bottom:10px;}
.peri-card.connected{border-color:#10b981;background:#f0fdf4;}
.peri-card-header{display:flex;align-items:center;gap:10px;margin-bottom:0;}
.peri-icon{width:42px;height:42px;border-radius:12px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.peri-card.connected .peri-icon{background:#dcfce7;}
.peri-card-info{flex:1;min-width:0;}
.peri-card-title{font-size:14px;font-weight:800;color:var(--text);}
.peri-card-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.peri-status-dot{width:10px;height:10px;border-radius:50%;background:#d1d5db;flex-shrink:0;}
.peri-status-dot.on{background:#10b981;box-shadow:0 0 0 3px #bbf7d0;}
.peri-card-actions{display:flex;gap:7px;margin-top:10px;}
.peri-action-btn{flex:1;padding:8px;border-radius:9px;border:2px solid var(--border);background:white;font-size:12px;font-weight:800;cursor:pointer;}
.peri-action-btn.primary{background:var(--teal);color:white;border-color:var(--teal);}
.peri-action-btn.danger{color:var(--danger);border-color:var(--danger);}

/* ── Activity log ── */
.activity-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);align-items:flex-start;}
.activity-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;margin-top:1px;}
.activity-icon.login{background:#dbeafe;}
.activity-icon.sale{background:#dcfce7;}
.activity-icon.turno{background:#fef9c3;}
.activity-icon.cash{background:#fce7f3;}
.activity-icon.system{background:#f1f5f9;}
.activity-icon.error{background:#fee2e2;}
.activity-body{flex:1;min-width:0;}
.activity-who{font-size:12px;font-weight:800;color:var(--text);}
.activity-what{font-size:12px;color:var(--muted);margin-top:1px;}
.activity-ts{font-size:10px;color:#9ca3af;margin-top:2px;}

.section-card{background:white;border-radius:13px;border:2px solid var(--border);padding:14px;margin-bottom:10px;}
.cfg-panel details>summary::-webkit-details-marker{display:none}
.cfg-panel details>summary{border-radius:14px;transition:border-radius .15s}
.cfg-panel details[open]>summary{border-radius:14px 14px 0 0;border-bottom:1.5px solid var(--border)}
.cfg-panel details>summary::after{content:'›';margin-left:auto;font-size:20px;font-weight:300;color:#94a3b8;display:inline-block;transition:transform .2s;transform:rotate(0deg)}
.cfg-panel details[open]>summary::after{transform:rotate(90deg)}
.section-card h3{font-size:13px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);}
.setting-row:last-child{border-bottom:none;}
.sr-label{font-size:13px;font-weight:600;}
.sr-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.setting-input{padding:7px 9px;border:2px solid var(--border);border-radius:9px;font-size:13px;color:var(--text);outline:none;width:150px;text-align:right;}
.setting-input:focus{border-color:var(--teal);}
.setting-textarea{padding:7px 9px;border:2px solid var(--border);border-radius:9px;font-size:12px;color:var(--text);outline:none;width:100%;resize:none;margin-top:5px;}
.setting-textarea:focus{border-color:var(--teal);}
.logo-preview{width:68px;height:68px;border:2px dashed var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;background:#fafbfc;flex-shrink:0;}
.logo-preview img{width:100%;height:100%;object-fit:contain;}

/* CAJEROS */
.cajero-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);}
.cajero-row:last-child{border-bottom:none;}
.cajero-name{flex:1;font-size:13px;font-weight:600;}
.add-row{display:flex;gap:7px;margin-top:7px;flex-wrap:wrap;}
.add-row input{flex:1;min-width:90px;padding:8px 10px;border:2px solid var(--border);border-radius:9px;font-size:13px;outline:none;}
.add-row input:focus{border-color:var(--teal);}

/* PRODUCTS */
.prod-list{background:white;border-radius:13px;border:2px solid var(--border);overflow:hidden;margin-bottom:10px;}
.prod-row{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid var(--border);}
.prod-row:last-child{border-bottom:none;}
.prod-row.inactive{opacity:.5;}
.prod-info{flex:1;}
.prod-name{font-size:13px;font-weight:700;}
.prod-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.prod-price{font-size:13px;font-weight:800;color:var(--teal-dark);}
.inv-badge{display:inline-block;padding:1px 6px;border-radius:20px;font-size:10px;font-weight:800;}
.inv-badge.ok{background:#e6fff8;color:var(--teal-dark);}
.inv-badge.low{background:#fff7ed;color:#c2410c;}
.inv-badge.zero{background:#fff0f0;color:var(--danger);}
.add-prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px;}
.add-prod-grid input{padding:8px 10px;border:2px solid var(--border);border-radius:9px;font-size:13px;outline:none;width:100%;}
.add-prod-grid input:focus{border-color:var(--teal);}
.full{grid-column:1/-1;}

/* HISTORY */
.hist-filters{display:flex;gap:5px;margin-bottom:8px;overflow-x:auto;padding-bottom:3px;}
.hf-btn{padding:5px 12px;border:2px solid var(--border);border-radius:20px;background:white;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;color:var(--text);}
.hf-btn.active{background:var(--teal);color:white;border-color:var(--teal);}
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:10px;}
.sum-card{background:white;border-radius:12px;border:2px solid var(--border);padding:12px;text-align:center;}
.sum-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:700;margin-bottom:2px;}
.sum-val{font-size:18px;font-weight:800;}
.sum-val.green{color:var(--success);}
.sum-val.blue{color:var(--blue);}
.sum-val.orange{color:var(--orange);}
.sum-val.gold{color:var(--gold);}
.breakdown-card{background:white;border-radius:12px;border:2px solid var(--border);padding:12px;margin-bottom:10px;}
.breakdown-card h3{font-size:13px;font-weight:800;margin-bottom:8px;}
.brow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);}
.brow:last-child{border-bottom:none;}
.brow-label{font-size:13px;}
.brow-val{font-size:13px;font-weight:800;}
.sale-list{background:white;border-radius:12px;border:2px solid var(--border);overflow:hidden;}
.sale-row{padding:9px 11px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.sale-row:last-child{border-bottom:none;}
.sale-row:hover{background:var(--bg);}
.sale-row.dev{background:#fff5f5;}
.sale-row.pending{background:#fffbeb;}
.sale-top{display:flex;justify-content:space-between;align-items:center;}
.sale-turno{font-size:12px;font-weight:800;color:var(--teal-dark);}
.sale-time{font-size:11px;color:var(--muted);}
.sale-total{font-size:14px;font-weight:800;}
.sale-badge{font-size:10px;padding:2px 7px;border-radius:20px;font-weight:700;display:inline-block;}
.sale-badge.efectivo{background:#e6fff8;color:var(--teal-dark);}
.sale-badge.tarjeta{background:#eff6ff;color:#1d4ed8;}
.sale-badge.delivery{background:#fff7ed;color:#c2410c;}
.dp-btn{padding:6px 12px;border:2px solid #fb923c;border-radius:20px;background:white;font-size:11px;font-weight:800;color:#9a3412;cursor:pointer;}
.dp-btn.active{background:#fb923c;color:white;}
.dpay-btn{flex:1;padding:7px;border:2px solid #fb923c;border-radius:9px;background:white;font-size:11px;font-weight:800;color:#9a3412;cursor:pointer;}
.dpay-btn.active{background:#fb923c;color:white;}
.sale-badge.dev{background:#fff0f0;color:var(--danger);}
.sale-badge.pending{background:#fffbeb;color:#b45309;}
.sale-badge.approved{background:#e6fff8;color:var(--teal-dark);}
.corte-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--gold),#b45309);color:white;border:none;border-radius:11px;font-size:13px;font-weight:800;cursor:pointer;margin-bottom:10px;}

/* BT */
.bt-steps{text-align:left;margin:6px 0;}
.bt-step{display:flex;gap:7px;padding:6px 0;border-bottom:1px solid var(--border);}
.bt-step:last-child{border-bottom:none;}
.bt-step-n{width:20px;height:20px;background:var(--purple);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;}
.bt-step-t{font-size:12px;line-height:1.5;}
.bt-status{background:#fafbfc;border:2px solid var(--border);border-radius:10px;padding:10px;margin:8px 0;min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;color:var(--muted);}
.bt-status.connecting{color:var(--purple);}
.bt-status.ok{background:#e6fff8;border-color:var(--teal);color:var(--teal-dark);font-weight:700;}
.bt-status.err{background:#fff0f0;border-color:var(--danger);color:var(--danger);}
.spinner{width:14px;height:14px;border:2.5px solid rgba(0,0,0,.1);border-top-color:var(--purple);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}

/* TURNOS ADMIN */
.turno-card{background:white;border-radius:12px;border:2px solid var(--border);padding:12px;margin-bottom:8px;}
.turno-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
.turno-cajero{font-size:13px;font-weight:800;}
.turno-status{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:700;}
.turno-status.open{background:#fffbeb;color:#b45309;}
.turno-status.pending{background:#eff6ff;color:#1d4ed8;}
.turno-status.approved{background:#e6fff8;color:var(--teal-dark);}
.turno-rows{font-size:12px;color:var(--muted);}
.turno-row{display:flex;justify-content:space-between;padding:3px 0;}

/* MISC */
.sale-detail-items{border:2px solid var(--border);border-radius:10px;padding:7px 10px;margin:6px 0;max-height:160px;overflow-y:auto;}
.dev-banner{background:#fff0f0;border:2px solid var(--danger);border-radius:9px;padding:7px 11px;margin:6px 0;font-size:12px;color:var(--danger);font-weight:700;text-align:center;}
.pin-dots{display:flex;gap:10px;justify-content:center;margin:14px 0;}
.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);background:white;transition:background .2s;}
.pin-dot.filled{background:var(--purple);border-color:var(--purple);}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 auto;max-width:240px;}
.pin-btn{padding:14px;background:var(--bg);border:2px solid var(--border);border-radius:12px;font-size:18px;font-weight:800;cursor:pointer;text-align:center;color:var(--text);transition:background .15s;}
.pin-btn:active{background:var(--border);}
/* Fly to ticket animation */
@keyframes flyToTicket{
  0%{opacity:1;transform:scale(1);}
  60%{opacity:.7;transform:scale(.5);}
  100%{opacity:0;transform:scale(.1);}
}
.fly-dot{
  position:fixed;
  width:28px;height:28px;
  background:var(--teal);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:white;
}
@keyframes ticketBounce{
  0%{transform:scale(1);}40%{transform:scale(1.35);}70%{transform:scale(.9);}100%{transform:scale(1);}
}
.ticket-bounce{animation:ticketBounce .35s ease;}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(60px);background:#1a2332;color:white;padding:9px 16px;border-radius:10px;font-size:13px;font-weight:600;z-index:9999;transition:transform .3s;white-space:nowrap;max-width:90vw;text-align:center;}
.toast.show{transform:translateX(-50%) translateY(0);}

/* ── Demo Access ── */
.demo-bar{background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:14px;padding:12px 14px;margin-top:16px;}
.demo-bar-title{font-size:10px;font-weight:800;color:#a5b4fc;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.demo-btns{display:flex;gap:8px;}
.demo-btn{flex:1;border:none;border-radius:10px;padding:10px 6px;font-size:12px;font-weight:800;cursor:pointer;transition:transform .1s;}
.demo-btn:active{transform:scale(.95);}
.demo-btn-admin{background:#4f46e5;color:white;}
.demo-btn-cajero{background:#0891b2;color:white;}

/* ── Custom Numpad ── */
.numpad-overlay{display:none;position:fixed;inset:0;z-index:9000;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55);}
.numpad-overlay.open{display:flex;}
.numpad-box{background:#fff;border-radius:22px 22px 0 0;padding:16px 14px 28px;width:100%;max-width:430px;box-shadow:0 -4px 30px rgba(0,0,0,.15);}
.numpad-label{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.numpad-display{background:#f1f5f9;border-radius:14px;padding:14px 18px;font-size:32px;font-weight:900;text-align:right;margin-bottom:14px;color:#0f172a;min-height:60px;letter-spacing:1px;}
.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.npk{border:none;border-radius:14px;padding:0;height:62px;font-size:24px;font-weight:700;cursor:pointer;background:#f1f5f9;color:#1e293b;transition:transform .08s,background .1s;-webkit-tap-highlight-color:transparent;}
.npk:active{transform:scale(.92);background:#e2e8f0;}
.npk.npk-del{background:#fee2e2;color:#dc2626;}
.npk.npk-ok{background:var(--teal,#0d9488);color:white;font-size:17px;font-weight:800;}
.npk.npk-zero{grid-column:span 2;}
.npk.npk-dot{font-size:28px;}

.peri-dot{width:12px;height:12px;border-radius:50%;background:#cbd5e1;flex-shrink:0;}
.peri-dot.on{background:#22c55e;box-shadow:0 0 6px #22c55e;}

.cnpk{padding:13px 4px;font-size:18px;font-weight:700;background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;color:var(--text);}
.cnpk:active{background:#e2e8f0;}
.cnpk.del{background:#fff0f0;color:var(--danger);border-color:#fca5a5;}

/* ═══ SUPERADMIN ═══ */
.sa-numkey{padding:14px;background:#334155;border:none;border-radius:10px;color:white;font-size:18px;font-weight:700;cursor:pointer;transition:.15s}
.sa-numkey:active{background:#6366f1;transform:scale(.95)}
.sa-tab{flex-shrink:0}
.sa-card{background:white;border:1px solid #e2e8f0;border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.sa-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:800}
.sa-badge-green{background:#166534;color:#86efac}
.sa-badge-yellow{background:#854d0e;color:#fde68a}
.sa-badge-red{background:#7f1d1d;color:#fca5a5}
.sa-badge-blue{background:#1e3a5f;color:#93c5fd}
.sa-btn{padding:6px 12px;border:none;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer}
.sa-btn-danger{background:#ef4444;color:white}
.sa-btn-warn{background:#f59e0b;color:white}
.sa-btn-blue{background:#6366f1;color:white}
.sa-btn-green{background:#10b981;color:white}
.sa-stat{text-align:center;padding:12px;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0}
.sa-stat-num{font-size:22px;font-weight:900;color:#6366f1}
.sa-stat-lbl{font-size:10px;color:#94a3b8;margin-top:2px}


/* ── Responsive POS layout ── */
/* Mobile (<768px): solo grid de productos, ticket en overlay */
@media (max-width: 767px) {
  .pos-right {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    width: 100% !important;
    border-left: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,.18);
  }
  .pos-right.mobile-open {
    display: flex;
  }
  .ticket-toggle-btn {
    display: flex !important;
  }
  /* Close button inside ticket overlay on mobile */
  .ticket-mobile-close {
    display: flex !important;
  }
}

/* Tablet & desktop (768px+): lado a lado, sin toggle */
@media (min-width: 768px) {
  .pos-right {
    display: flex !important;
    position: relative !important;
    width: 260px !important;
    z-index: auto !important;
  }
  .ticket-toggle-btn {
    display: none !important;
  }
  .ticket-mobile-close {
    display: none !important;
  }
}

/* ── Splash screen ── */
#screen-splash { pointer-events:none; }
#screen-splash.hidden { opacity:0; pointer-events:none; }

/* ── Auth logo EFS ── */
.auth-logo h1 { display:none; }