:root{
  /* Paleta empresarial - MrVerduli+ v3 */
  --ink:#0f172a;--ink-2:#334155;--muted:#64748b;
  --bg:#f4f6f9;--panel:#ffffff;--border:#e5e9f0;
  --accent:#16a34a;--accent-dark:#15803d;--accent-tint:#dcfce7;
  --gold:#d97706;--danger:#dc2626;--warn:#E65100;
  /* Aliases legacy para no romper referencias */
  --navy:#0f172a;--navy-dark:#020617;--navy-light:#1e293b;
  --white:#FFF;--surface:#f4f6f9;--surface-light:#eef2f7;
  --text:#0f172a;--text-secondary:#334155;--text-muted:#64748b;
  --error:#dc2626;--success:#16a34a;--accent-gold:#d97706;
  --font-ui:'Segoe UI Variable','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --font-num:Menlo,'SF Mono',Consolas,'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;height:100dvh;overflow:hidden}
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);min-height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;user-select:none;touch-action:manipulation;-ms-touch-action:manipulation}

/* LOGIN */
#login-screen{background:linear-gradient(135deg,#020617,#0f172a);display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;padding:12px;box-sizing:border-box;overflow-y:auto}
#login-screen .login-box{background:var(--white);padding:40px;width:min(380px,calc(100vw - 24px));box-sizing:border-box;text-align:center;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.4);margin:0 auto}
#login-screen .brand{color:var(--white);text-align:center;margin-bottom:36px;max-width:calc(100vw - 24px)}
#login-screen .brand svg{filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
#login-screen .brand img{object-fit:contain;max-width:100%}
#login-screen .brand h1{font-size:32px;font-weight:700;letter-spacing:2px}
#login-screen .brand p{font-size:11px;letter-spacing:4px;opacity:.6;margin-top:4px}
#login-screen .login-box h2{font-size:14px;font-weight:600;letter-spacing:1px;margin-bottom:20px;color:var(--ink)}
#login-screen input{width:100%;padding:12px;margin-bottom:12px;border:1px solid var(--border);font-size:14px;outline:none;font-family:inherit;border-radius:6px}
#login-screen input:focus{border-color:var(--accent)}
.btn{-webkit-app-region: no-drag;padding:10px 20px;border:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:13px;letter-spacing:.5px;background:var(--ink);color:white;touch-action:manipulation;-ms-touch-action:manipulation;border-radius:6px}
.btn:hover{opacity:.9}.btn-outline{background:white;color:var(--ink);border:1.5px solid var(--border)}.btn-accent{background:var(--accent)}.btn-danger{background:var(--danger)}.btn-warn{background:var(--warn)}.btn-sm{padding:6px 14px;font-size:11px}.btn-lg{padding:14px 28px;font-size:15px}.btn:disabled{opacity:.4;cursor:not-allowed}
#login-screen .btn{-webkit-app-region: no-drag;width:100%;padding:14px;font-size:14px;letter-spacing:1px}
#login-screen .error{color:var(--danger);font-size:13px;margin-top:8px}
#login-screen .version{color:rgba(255,255,255,.3);font-size:11px;margin-top:20px}
@media(max-width:420px){#login-screen{align-items:flex-start;padding-top:18px}#login-screen .brand{margin-bottom:18px}#login-screen .brand img{width:96px!important;height:96px!important}#login-screen .brand h1{font-size:25px;letter-spacing:1px}#login-screen .brand p{letter-spacing:2px}#login-screen .login-box{padding:22px 16px}#login-keypad{gap:6px!important}#login-keypad button{padding:14px!important;font-size:20px!important}}
@media(max-height:700px) and (min-width:421px){
  #login-screen{padding:6px}
  #login-screen .brand{margin-bottom:8px}
  #login-screen .brand img{width:76px!important;height:76px!important;margin-bottom:4px!important}
  #login-screen .brand h1{font-size:25px;line-height:1.05}
  #login-screen .brand p{font-size:9px;margin-top:2px}
  #login-screen .login-box{padding:14px 24px}
  #login-screen .login-box h2{margin-bottom:6px}
  #login-pin-display{font-size:28px!important;min-height:30px!important;margin:5px 0!important}
  #login-keypad{gap:4px!important;margin-bottom:5px!important}
  #login-keypad button{padding:9px!important;font-size:19px!important;min-height:44px}
  #login-keypad button[onclick*="DEL"]{font-size:12px!important}
  #login-keypad button[onclick*="loginEnter"]{font-size:13px!important}
  #login-screen .version{margin-top:5px}
}

/* ===== APP: NAVBAR SUPERIOR ===== */
#app{display:none;position:fixed;inset:0;flex-direction:column}
#app.show{display:flex}
/* Ocultamos el sidebar y hamburger antiguos, ahora usamos topbar */
#hamburger{display:none !important}
#sidebar-overlay{display:none !important}
#sidebar{display:none !important}

/* Topbar (navbar horizontal) */
.topnav{background:linear-gradient(180deg,#0b1220,#111827);color:#cbd5e1;display:flex;align-items:center;padding:0 18px;height:52px;flex-shrink:0;z-index:100;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 4px 16px rgba(15,23,42,.15);}
.tn-brand{display:flex;align-items:center;gap:10px;margin-right:24px;flex-shrink:0}
.tn-brand img{height:44px;width:auto;object-fit:contain;display:block;background:transparent;border-radius:4px}
.tn-brand h1{font-size:13px;font-weight:700;color:#fff;letter-spacing:.2px;white-space:nowrap}
.tn-brand h1 span{color:var(--accent);font-weight:800}
.tn-links{display:flex;align-items:stretch;height:100%;flex:1}
.tn-item{position:relative;display:flex;align-items:center;padding:0 15px;font-size:11.5px;font-weight:600;letter-spacing:.3px;cursor:pointer;color:rgba(255,255,255,.55);border-bottom:2px solid transparent;transition:.15s;user-select:none;white-space:nowrap;background:none;border-top:none;border-left:none;border-right-width:0;font-family:inherit}
.tn-item:hover{color:#fff}
.tn-item.active{color:#fff;border-bottom-color:var(--accent)}
.tn-menu-trigger{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:rgba(255,255,255,.9);font:inherit;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tn-menu-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tn-menu-trigger:hover{color:#fff;background:rgba(255,255,255,.1)}
.tn-menu-trigger:active{background:rgba(255,255,255,.14)}
.tn-item .arr{font-size:7px;margin-left:5px;opacity:.5}
.tn-item:hover .arr{opacity:1}
.tn-dropdown{position:absolute;top:100%;left:0;min-width:200px;background:#0b1220;border:1px solid rgba(255,255,255,.06);border-radius:0 0 8px 8px;box-shadow:0 12px 28px rgba(0,0,0,.4);display:none;flex-direction:column;padding:6px 0;z-index:200}
.tn-dropdown.show{display:flex}
.tn-dropdown.grid-menu {display:none; grid-template-columns:repeat(4, 1fr); gap:10px; padding:14px; width:max-content; max-width:860px; background:#0f172a; border:1px solid rgba(255,255,255,0.1); border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.5);}
.tn-dropdown.grid-menu.show {display:grid;}
.tn-dropdown.grid-menu .tn-sub {min-width:160px;min-height:62px;border:0;border-radius:0;text-align:center;padding:14px 20px;background:linear-gradient(180deg,#334155,#1e293b);color:#fff;font-weight:700;font-size:16px;letter-spacing:1px;white-space:nowrap;transition:all 0.15s ease;margin:0;box-shadow:0 -1px 0 rgba(255,255,255,.12) inset;}
.tn-dropdown.grid-menu .tn-sub:hover {background:linear-gradient(180deg,#1e293b,#0f172a);color:#fff;transform:none;box-shadow:0 -1px 0 rgba(255,255,255,.18) inset;padding-left:20px;}
.tn-dropdown .tn-sub{display:block;min-height:46px;padding:10px 16px;font-size:14px;color:#fff;cursor:pointer;font-weight:700;background:linear-gradient(180deg,#16a34a,#15803d);border:0;border-radius:0;text-align:left;font-family:inherit;letter-spacing:1px;transition:.1s;width:100%;touch-action:manipulation;box-shadow:0 -1px 0 rgba(255,255,255,.15) inset}
.tn-dropdown .tn-sub:hover{color:#fff;background:linear-gradient(180deg,#15803d,#166534);padding-left:20px}
.tn-spacer{flex:1}
.tn-user{display:flex;align-items:center;gap:12px;font-size:11px;color:rgba(255,255,255,.5);flex-shrink:0;font-weight:500}
.tn-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px rgba(22,163,74,.6)}
.tn-logout{-webkit-app-region: no-drag;color:rgba(255,255,255,.4);cursor:pointer;font-size:10px;letter-spacing:.5px;padding:6px 10px;border-radius:5px;transition:.15s;}
.tn-logout:hover{color:#fca5a5;background:rgba(220,38,38,.1)}


#content{flex:1;overflow:hidden;background:var(--bg);position:relative}
.page{display:none;position:absolute;inset:0}.page.active{display:flex;flex-direction:column}
input,select,textarea{padding:10px 12px;border:1px solid var(--border);font-size:13px;font-family:inherit;outline:none;background:white;touch-action:manipulation;-ms-touch-action:manipulation;border-radius:6px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}

/* CHECKOUT */
#page-checkout.active{flex-direction:column}

/* SCALE BANNER (barra oscura con toggles) */
.scale-banner{background:linear-gradient(180deg,#020617,#0f172a);color:#fff;padding:8px 16px;display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;border-bottom:1px solid rgba(255,255,255,.05)}
.scale-banner .sb-label,.scale-banner .sb-weight,.scale-banner .sb-status{display:none} /* legacy hidden */
.scale-banner button{background:linear-gradient(180deg,#334155,#1e293b);color:#fff;border:0;min-height:46px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;border-radius:0;letter-spacing:1.2px;white-space:nowrap;transition:.15s;font-family:var(--font-ui);touch-action:manipulation;box-shadow:0 -1px 0 rgba(255,255,255,.12) inset}
.scale-banner button:hover{background:linear-gradient(180deg,#1e293b,#0f172a);color:#fff}
.scale-banner button.express-on,.scale-banner button.on{background:linear-gradient(180deg,#16a34a,#15803d);color:#fff;border-color:transparent;box-shadow:0 -1px 0 rgba(255,255,255,.2) inset}
.scale-banner #btn-bascula{background:linear-gradient(180deg,#334155,#1e293b);color:#fff;border:0}
.scale-banner .sb-spacer{margin-right:auto}
.scale-banner #btn-bascula.on{background:linear-gradient(180deg,#16a34a,#15803d);color:#fff;border:0;box-shadow:0 -1px 0 rgba(255,255,255,.2) inset}
.scale-banner #btn-bascula.connected{background:linear-gradient(180deg,#16a34a,#15803d)!important;color:#fff}
.scale-banner #btn-bascula.disconnected{background:linear-gradient(180deg,#dc2626,#991b1b)!important;color:#fff}
.scale-banner #btn-qr{background:linear-gradient(180deg,#334155,#1e293b);color:#fff;border:0}
.scale-banner #btn-qr:hover{background:linear-gradient(180deg,#1e293b,#0f172a);color:#fff}
.scale-banner .quick-action{min-height:46px;padding:10px 16px;font-size:14px;font-weight:700;color:#fff;border:0;touch-action:manipulation}
.scale-banner #btn-editar,.scale-banner #btn-ordenar{background:linear-gradient(180deg,#334155,#1e293b);color:#fff;border:0}
.scale-banner #btn-editar.on,.scale-banner #btn-ordenar.on{background:linear-gradient(180deg,#16a34a,#15803d);color:#fff;border-color:transparent;box-shadow:0 -1px 0 rgba(255,255,255,.2) inset}

/* DROPDOWN HERRAMIENTAS */
.tools-item { position: relative; display: inline-flex; align-items: center; }
.tools-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 230px;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
  padding: 8px !important;
  z-index: 300 !important;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.tools-dropdown-menu.show { display: flex !important; }
.tools-dropdown-menu button {
  width: 100%;
  text-align: left;
  padding: 8px 12px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: all 0.15s ease !important;
}
.tools-dropdown-menu button:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.tools-dropdown-menu button.express-on, .tools-dropdown-menu button.on, .tools-topnav-menu button.express-on, .tools-topnav-menu button.on {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  font-weight: 800 !important;
}

.tools-topnav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 340px;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
  padding: 10px !important;
  gap: 4px;
  z-index: 250 !important;
  display: none;
  flex-direction: column;
}
.tools-topnav-menu.show { display: flex !important; }
.tools-topnav-menu button {
  width: 100%;
  text-align: left;
  padding: 8px 12px !important;
  font-size: 11.5px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: all 0.15s ease !important;
  font-family: inherit;
  cursor: pointer;
}
.tools-topnav-menu button.tn-sub {
  min-height: 62px;
  padding: 14px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg,#334155,#1e293b) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  letter-spacing: 1px;
  box-shadow: 0 -1px 0 rgba(255,255,255,.15) inset;
}
.tools-topnav-menu button:hover {
  background: linear-gradient(180deg,#1e293b,#0f172a) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* WEIGHT DISPLAY: arriba y con el mismo ancho de la columna del ticket */
.co-scale-display{width:100%;min-height:58px;display:flex;align-items:baseline;justify-content:center;gap:8px;background:linear-gradient(180deg,#fff,#f8fafc);padding:7px 12px;margin:0;border:0;border-bottom:1px solid var(--border);border-radius:10px 10px 0 0;box-shadow:none;position:relative;flex-shrink:0}
.co-scale-display::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent-dark));border-radius:10px 0 0 0}
.co-scale-display .sw-val{font-size:34px;font-weight:650;font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-1px;line-height:1}
.co-scale-display .sw-val.zero{color:#cbd5e1}
.co-scale-display .sw-val.stable{color:var(--accent-dark)}
.co-scale-display .sw-unit{font-size:13px;color:var(--muted);font-weight:600}
.co-barcode-row{display:flex;gap:6px;align-items:center;padding:7px 8px;background:#f8fafc;border-bottom:1px solid var(--border);flex-shrink:0}.co-barcode-row span{font-size:9px;font-weight:800;letter-spacing:.4px;color:var(--muted);white-space:nowrap}.co-barcode-row input{min-width:0;flex:1;padding:7px 8px;font-size:12px;border:1px solid var(--border);border-radius:6px}.co-barcode-row button{padding:7px 9px;border:0;border-radius:6px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;cursor:pointer}
.catalog-pager{position:sticky;bottom:0;align-items:center;justify-content:center;gap:12px;padding:9px;background:#fff;border-top:1px solid var(--border);font-size:11px}.catalog-pager button{padding:7px 12px;border:1px solid var(--border);background:var(--panel);border-radius:6px;font-weight:700;cursor:pointer}.catalog-pager button:disabled{opacity:.4;cursor:not-allowed}

/* Main columns */
.co-main{flex:1;display:flex;flex-direction:row;overflow:hidden;padding:6px;gap:8px}
.co-products-col{flex:1;display:flex;flex-direction:column;overflow:hidden;gap:5px;min-width:0}
.co-products-wrap{position:relative;flex:1;min-height:0;display:flex;overflow:hidden}
.co-tabs-wrap{position:relative;padding-right:54px;min-height:46px}
.co-eye-toggle{position:absolute;top:1px;right:0;z-index:12;width:44px;height:44px;border:1px solid rgba(15,23,42,.2);border-radius:50%;background:rgba(255,255,255,.95);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px 10px rgba(2,6,23,.18)}
.co-eye-toggle.on{background:linear-gradient(180deg,#16a34a,#15803d);border-color:transparent;box-shadow:0 6px 12px rgba(22,163,74,.35)}
.co-ticket-col{width:360px;min-width:320px;background:var(--panel);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);box-shadow:0 4px 20px rgba(15,23,42,.06);position:relative}
.co-notify{margin:6px 10px 0 10px;padding:7px 10px;border-radius:7px;font-size:11px;font-weight:700;letter-spacing:.4px;color:#fff;pointer-events:none;box-shadow:0 8px 22px rgba(2,6,23,.28)}
.co-notify.info{background:linear-gradient(180deg,#0f766e,#115e59)}
.co-notify.success{background:linear-gradient(180deg,#15803d,#166534)}
.co-notify.warn{background:linear-gradient(180deg,#b45309,#92400e)}
.co-notify.error{background:linear-gradient(180deg,#b91c1c,#991b1b)}

/* Category tabs */
.co-tabs{display:flex;gap:4px;flex-wrap:wrap;align-content:flex-start}
.co-tab{padding:10px 16px;font-size:14px;font-weight:700;letter-spacing:1px;color:#fff;cursor:pointer;text-align:center;border:0;background:linear-gradient(180deg,#334155,#1e293b);border-radius:0;font-family:inherit;transition:.15s;min-height:46px;touch-action:manipulation;box-shadow:0 -1px 0 rgba(255,255,255,.12) inset}
.co-tab:hover:not(.active){background:linear-gradient(180deg,#1e293b,#0f172a);color:#fff}
.co-tab.active{color:#fff;background:linear-gradient(180deg,#1e293b,#0f172a);border:0;box-shadow:inset 0 2px 0 rgba(255,255,255,.22)}
.co-tab.drag-over-tab{background:#16a34a;color:#fff;border-color:#16a34a;transform:scale(1.08)}
.btn-cs-opt{padding:6px 14px;font-size:12px;font-weight:600;border:1px solid #ccc;cursor:pointer;background:#f5f5f5;border-radius:4px}
.btn-cs-opt:hover{background:#e0e0e0}

/* Search bar */
.co-search-row{display:flex;gap:6px;align-items:center}
.co-search-row input{flex:1;font-size:12px;padding:8px 10px;min-width:0}

/* PRODUCTS GRID - solo imagen + precio (tarjetas 30% mas chicas) */
.co-products-grid{width:100%;min-height:0;overflow-y:scroll;scrollbar-gutter:stable;padding:1px;display:grid;grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:4px;align-content:flex-start}
.co-products-grid::-webkit-scrollbar{width:12px}
.co-products-grid::-webkit-scrollbar-track{background:#e2e8f0;border-left:1px solid #cbd5e1}
.co-products-grid::-webkit-scrollbar-thumb{background:#64748b;border:3px solid #e2e8f0;border-radius:8px}
.co-products-grid::-webkit-scrollbar-thumb:hover{background:#334155}
.co-prod-btn{background:var(--panel);border:1px solid var(--border);cursor:pointer;font-family:inherit;text-align:center;display:flex;flex-direction:column;transition:.15s;position:relative;overflow:hidden;padding:0;min-height:90px;height:100%;border-radius:5px}
.co-prod-btn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.co-prod-btn:active{transform:scale(0.98)}
/* Bloque imagen: ocupa TODO el espacio arriba del precio */
.co-prod-btn .pb-img{flex:1 1 0;width:100%;object-fit:contain;display:block;margin:0;min-height:0;max-height:100%;background:#f8fafc}
.co-prod-btn.has-img{}
.co-prod-btn.has-img .pb-name{display:none}
.co-prod-btn.has-img .pb-type{display:none}
/* Sin imagen: mostramos las iniciales grandes en el area de imagen */
.co-prod-btn:not(.has-img) .pb-img{display:none}
.co-prod-btn .pb-initials{flex:1;background:linear-gradient(135deg,var(--accent-tint),#f0fdf4);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--accent-dark);letter-spacing:-.3px;font-family:var(--font-num);min-height:0}
.co-prod-btn.has-img .pb-initials{display:none}
.co-prod-btn .pb-name{display:none} /* nombre oculto por default (solo imagen y precio) */
.co-prod-btn .pb-type{display:none} /* unidad oculta por default */
/* Franja de precio abajo */
.co-prod-btn .pb-price{background:linear-gradient(180deg,#334155,#1e293b);color:#fff;padding:4px 3px;text-align:center;font-size:11px;font-weight:700;font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.3px;flex-shrink:0;line-height:1.2}
/* Indicadores de tipo (barra lateral solo sobre la imagen) */
.co-prod-btn.kg::before{content:'';position:absolute;left:0;top:0;bottom:22px;width:3px;background:var(--ink);z-index:1}
.co-prod-btn.pieza::before{content:'';position:absolute;left:0;top:0;bottom:22px;width:3px;background:var(--accent);z-index:1}
.co-prod-btn.manojo::before{content:'';position:absolute;left:0;top:0;bottom:22px;width:3px;background:var(--gold);z-index:1}
.co-prod-btn.low-stock{opacity:.6}
.co-prod-btn.low-stock::after{content:'BAJO';position:absolute;top:3px;right:3px;font-size:7px;color:#fff;font-weight:700;background:var(--danger);padding:1px 4px;border-radius:3px;z-index:2}

/* MODO MAE: sin precio en tarjetas (solo imagen) */
body.mae .co-prod-btn .pb-price{display:none}
body.mae .co-prod-btn.kg::before,body.mae .co-prod-btn.pieza::before,body.mae .co-prod-btn.manojo::before{bottom:0}

/* Ocultar precios opcion */
.co-products-grid.hide-prices .co-prod-btn .pb-price { display: none !important; }
.co-products-grid.hide-prices .co-prod-btn::before { bottom: 0 !important; }

/* TICKET (columna derecha) */
.co-tk-head{background:linear-gradient(180deg,#16a34a,#15803d);color:#fff;padding:8px 12px;display:flex;justify-content:space-between;align-items:center}
.co-tk-head .tk-cli{font-size:11px!important;padding:7px 10px!important}
.co-tk-head .tk-title{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff}
.co-tk-head .tk-title span{color:#4ade80;font-family:var(--font-num);font-weight:600;margin-left:6px}
.co-tk-head .tk-cli{font-size:14px!important;font-weight:700;color:#fff;cursor:pointer;padding:10px 14px!important;min-height:46px;border:0;border-radius:0;letter-spacing:1px;background:linear-gradient(180deg,#16a34a,#15803d)!important;display:flex;align-items:center;justify-content:center;touch-action:manipulation;box-shadow:0 -1px 0 rgba(255,255,255,.15) inset}
.co-tk-head .tk-cli:hover{background:linear-gradient(180deg,#15803d,#166534)!important}
.co-tk-items{flex:1;overflow-y:auto;padding:4px 16px}
.co-tk-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.co-tk-empty span{font-size:13px}
.co-tk-item{padding:10px 0;border-bottom:1px solid #f1f5f9;cursor:pointer}
.co-tk-item:last-child{border-bottom:none}
.co-tk-item:hover{background:#fafbfc}
.co-tk-item.selected{background:#eff6ff;padding-left:8px;padding-right:8px;border-left:3px solid var(--accent)}
.co-tk-item-row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.co-tk-item .tki-name{font-size:13px;font-weight:600;flex:1;color:var(--ink)}
.co-tk-item .tki-price{font-size:14px;font-weight:700;color:var(--ink);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.co-tk-item .tki-detail{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--font-num)}
.co-tk-item .tki-detail .disc{color:var(--danger);font-weight:600;margin-left:6px}
.co-tk-item-actions{display:none;padding-top:8px;gap:4px;flex-wrap:wrap}
.co-tk-item.selected .co-tk-item-actions{display:flex}
.co-tk-item-actions button{padding:6px 10px;font-size:10px;font-weight:700;background:white;border:1px solid var(--border);cursor:pointer;font-family:inherit;letter-spacing:.5px;border-radius:5px}
.co-tk-item-actions button:hover{background:var(--ink);color:white;border-color:var(--ink)}
.co-tk-item-actions button.danger{color:var(--danger);border-color:rgba(220,38,38,.25)}
.co-tk-item-actions button.danger:hover{background:var(--danger);color:white;border-color:var(--danger)}

/* Total */
.co-tk-total{padding:16px 18px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline;background:linear-gradient(180deg,#fff,#f8fafc)}
.co-tk-total .tt-lbl{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.co-tk-total .tt-val{font-size:28px;font-weight:700;color:var(--ink);font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-1px}

/* COBRAR button */
.co-cobrar-btn{width:100%;padding:16px;background:linear-gradient(180deg,#16a34a,#15803d);color:white;border:none;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:1.5px;text-transform:uppercase;box-shadow:0 -1px 0 rgba(255,255,255,.15) inset}
.co-cobrar-btn:hover{background:linear-gradient(180deg,#15803d,#166534)}
.co-cobrar-btn:active{transform:scale(0.98)}
.co-cobrar-btn:disabled{opacity:.3;cursor:not-allowed}

/* Change display */
.co-cambio{padding:14px 18px;background:#f0fdf4;border-top:2px solid #22c55e;color:var(--ink);display:none;justify-content:space-between;align-items:center;font-size:14px}
.co-cambio.show{display:flex}
.co-cambio .cb-lbl{font-size:12px;letter-spacing:.7px;font-weight:800;color:#16a34a;text-transform:uppercase}
.co-cambio .cb-val{font-size:28px;font-weight:800;font-family:var(--font-num);font-variant-numeric:tabular-nums;color:#16a34a}

/* Ticket actions bar */
.co-tk-actions{display:flex;background:#f8fafc;padding:6px;gap:4px;border-top:1px solid #f1f5f9}
.co-tk-actions button{flex:1;padding:10px 6px;min-height:46px;font-size:14px;font-weight:700;background:linear-gradient(180deg,#16a34a,#15803d);border:0;border-radius:0;cursor:pointer;font-family:inherit;letter-spacing:1px;color:#fff!important;transition:.12s;touch-action:manipulation;box-shadow:0 -1px 0 rgba(255,255,255,.15) inset}
.co-tk-actions button:hover{background:linear-gradient(180deg,#15803d,#166534);color:#fff;border-color:transparent}
.co-tk-actions button.danger{color:#fff;border-color:transparent}
.co-tk-actions button.danger:hover{background:linear-gradient(180deg,#15803d,#166534);color:#fff;border-color:transparent}

/* Cobro keypad */
.cobro-key{background:var(--panel);color:var(--ink);border:1px solid var(--border);font-family:inherit;cursor:pointer;border-radius:6px}
.cobro-key:hover{background:var(--ink);color:white;border-color:var(--ink)}
.cobro-key:active{transform:scale(0.93)}
.cobro-metodos-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.cobro-metodos-tabs button{min-height:48px;background:linear-gradient(180deg,#16a34a,#15803d);color:#fff;border:0;font-weight:800;letter-spacing:.6px;border-radius:8px;cursor:pointer}
.cobro-metodos-tabs button:hover{background:linear-gradient(180deg,#15803d,#166534)}

/* Billetes */
.co-billetes{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;background:#eef2f7}
.co-billete-btn{padding:11px 4px;background:white;border:none;font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);cursor:pointer;letter-spacing:.5px;border-radius:5px}
.co-billete-btn:hover{background:var(--gold);color:white}
.co-billete-btn:active{transform:scale(0.95)}
.co-billete-btn.exacto{background:var(--accent);color:white}
.co-billete-btn.exacto:hover{background:var(--accent-dark)}

/* Express bar */
.co-express-bar{display:none;padding:8px}
.co-express-bar.show{display:block}
.co-express-btn{width:100%;padding:16px;background:linear-gradient(180deg,#16a34a,#15803d);color:white;border:none;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:1.2px;text-transform:uppercase;border-radius:8px;box-shadow:0 4px 12px rgba(22,163,74,.25)}
.co-express-btn:active{transform:scale(0.98)}
.co-desglose-bar{display:none;padding:8px}
.co-desglose-btn{width:100%;padding:16px;background:linear-gradient(180deg,#2563eb,#1d4ed8);color:white;border:none;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:1.1px;text-transform:uppercase;border-radius:8px;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.co-desglose-btn:active{transform:scale(0.98)}
body.express #co-billetes{display:none}
body.express .co-cobrar-btn{display:none}
body.express .co-express-bar{display:block}
body.desglose-qr #co-billetes{display:none}
body.desglose-qr .co-cobrar-btn{display:none}
body.desglose-qr .co-desglose-bar{display:block}
body.pedido .co-cobrar-btn{display:none}
body.pedido .co-tk-actions button:first-child{background:var(--accent);color:white;font-size:12px;padding:12px 8px}

/* Overlay message */
.overlay-msg{background:var(--warn);color:white;padding:10px 14px;font-size:13px;font-weight:600;text-align:center;border-radius:6px;margin:0 10px}
.overlay-msg.msg-error{background:var(--danger)}
.overlay-msg.msg-success{background:var(--accent)}
.overlay-msg.msg-info{background:var(--ink)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.7);display:flex;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(4px)}
.modal{background:white;width:420px;max-height:90vh;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column}
.modal.modal-full{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;display:flex;flex-direction:column}
.modal.modal-full .modal-body{flex:1;overflow-y:auto;padding:20px}
.modal.modal-ticket{width:auto;min-width:0}
.modal.modal-wide{width:780px;max-width:96vw}
.modal-header{background:linear-gradient(180deg,#0f172a,#0b1220);color:white;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;letter-spacing:1px}
.modal-body{padding:18px;overflow-y:auto;min-height:0;flex:1 1 auto}
.modal-close{color:rgba(255,255,255,.7);cursor:pointer;font-size:22px;font-weight:700;line-height:1}
.modal-close:hover{color:#fff}
.modal-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:#fafbfc;flex-shrink:0}

/* TICKET TERMICO 58mm */
#ticket-print{width:58mm;background:white;padding:2mm;padding-bottom:14mm;font-family:monospace;font-size:8px;color:#000;line-height:1.2;word-break:break-word;overflow-wrap:break-word;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never;text-rendering:optimizeSpeed;font-weight:400}
#ticket-print *{font-family:monospace;-webkit-font-smoothing:none;font-smooth:never}
#ticket-print .tp-head{text-align:center;margin-bottom:3px}
#ticket-print .tp-name{font-size:11px;font-weight:700;letter-spacing:0;margin-bottom:2px}
#ticket-print .tp-sub{font-size:7px;margin-bottom:1px;font-weight:400}
#ticket-print .tp-sep{border-top:1px dashed #000;margin:3px 0}
#ticket-print .tp-row{display:flex;justify-content:space-between;font-size:8px;gap:3px;font-weight:400}
#ticket-print .tp-row span:first-child{flex-shrink:0}
#ticket-print .tp-row span:last-child{text-align:right;white-space:nowrap}
#ticket-print .tp-item{margin:1px 0}
#ticket-print .tp-item-name{font-weight:700;font-size:8px}
#ticket-print .tp-item-det{font-size:7px;padding-left:2mm;font-weight:400}
#ticket-print .tp-total{font-size:14px;font-weight:700;text-align:center;margin:4px 0;padding:3px 0;border-top:1px dashed #000;border-bottom:1px dashed #000}
#ticket-print .tp-foot{text-align:center;font-size:7px;margin-top:3px;font-weight:400}
#ticket-print .tp-thanks{text-align:center;font-size:8px;font-weight:700;margin-top:3px}
#ticket-print .tp-corte{text-align:center;font-size:7px;color:#999;margin-top:6px;padding-top:4px;border-top:1px dotted #ccc;font-weight:400}
@media print{
  body>*:not(#ticket-print){display:none !important}
  #ticket-print{position:absolute;left:0;top:0;padding:1mm;padding-bottom:16mm;box-shadow:none;-webkit-font-smoothing:none;font-smooth:never}
  #ticket-print.ticket-58{width:58mm}
  #ticket-print.ticket-80{width:80mm}
  @page{size:58mm auto;margin:0}
}

/* PAGES: encabezado + tabla */
.page-header{background:white;padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-header h2{font-size:14px;font-weight:700;letter-spacing:1px;margin-right:auto;color:var(--ink);text-transform:uppercase}
.page-body{flex:1;overflow-y:auto;padding:16px;background:var(--bg)}
table{width:100%;border-collapse:collapse;background:white;font-size:12px;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
th{background:#f8fafc;padding:10px 12px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--muted);text-transform:uppercase}
td{padding:10px 12px;font-size:12px;border-bottom:1px solid #f1f5f9;color:var(--ink-2)}
tr:hover td{background:#fafbfc}
.cards{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card{flex:1;min-width:140px;padding:16px;background:white;border-top:3px solid var(--ink);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card-label{font-size:10px;font-weight:600;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.card-value{font-size:22px;font-weight:700;margin-top:4px;font-family:var(--font-num);color:var(--ink)}
.card.c-green{border-top-color:var(--accent)}.card.c-gold{border-top-color:var(--gold)}.card.c-red{border-top-color:var(--danger)}
.msg{padding:8px 12px;font-size:12px;font-weight:500;margin:4px 0;border-radius:6px}
.msg-success{background:var(--accent-tint);color:var(--accent-dark)}
.msg-error{background:#fee2e2;color:var(--danger)}
.msg-info{background:#dbeafe;color:#1e40af}
.mt-8{margin-top:8px}.w-full{width:100%}

/* RESPONSIVE */
@media(max-width:820px){
  .co-main{flex-direction:column;padding:6px;gap:6px}
  .co-ticket-col{width:100%;min-width:0;max-height:48%}
  .co-products-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}
@media(max-width:560px){
  .topnav{padding:0 8px;height:46px}
  .tn-brand h1{font-size:11px}
  .tn-item{padding:0 10px;font-size:10.5px}
  .tn-menu-trigger{min-height:38px;padding:5px 9px;font-size:11px}
  .tn-dropdown.grid-menu{grid-template-columns:repeat(2,1fr);max-width:calc(100vw - 16px);gap:8px;padding:8px}
  .tn-dropdown.grid-menu .tn-sub{min-width:140px;min-height:56px;font-size:14px;padding:10px}
  .tools-topnav-menu{min-width:min(340px,calc(100vw - 16px))}
  .tools-topnav-menu button.tn-sub{min-height:56px;font-size:14px!important;padding:12px 16px!important}
  .co-scale-display .sw-val{font-size:30px}
  .co-main{padding:4px;gap:4px}
  .co-ticket-col{max-height:52%}
  .co-products-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px;padding:4px}
  .co-prod-btn{border-radius:8px}
  .price-step-grid{grid-template-columns:repeat(2,1fr)}
  .price-editor-input input{font-size:32px!important}
  .modal-footer{padding:10px;gap:6px;flex-wrap:wrap}
  .modal-footer .btn{-webkit-app-region: no-drag;min-height:44px;flex:1 1 120px}
  .ticket-history-head{padding:12px 10px}
}
@media(min-width:1400px){
  .co-products-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .co-ticket-col{width:400px}
}

/* MODO ORDENAR (wiggle) */
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
.co-products-grid.ordenando .co-prod-btn{cursor:grab;animation:wiggle 0.3s ease-in-out infinite;box-shadow:0 0 8px rgba(22,163,74,.25);border-style:dashed;border-color:var(--accent)}
.co-products-grid.ordenando .co-prod-btn:nth-child(even){animation-delay:.15s}
.co-products-grid.ordenando .co-prod-btn:hover{animation:none;transform:scale(1.08);z-index:10;box-shadow:0 4px 20px rgba(0,0,0,.3);border-color:var(--gold)}
.co-products-grid.ordenando .co-prod-btn:active{cursor:grabbing;opacity:.5;transform:scale(0.92)}
.co-products-grid.ordenando .co-prod-btn.drag-destino{outline:3px solid var(--gold);outline-offset:-3px;transform:scale(1.04);animation:none}
.co-prod-btn .pb-drag-handle{display:none;position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:10px;color:#fff;letter-spacing:2px;background:rgba(0,0,0,.5);padding:0 6px;border-radius:0 0 6px 6px;z-index:3}
.co-products-grid.ordenando .co-prod-btn .pb-drag-handle{display:block}
.btn-mover{background:var(--panel);color:var(--ink-2);border:1px dashed var(--border);padding:8px 14px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:.4px;border-radius:6px}
.btn-mover.activo{background:var(--gold);color:white;border-color:var(--gold);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.75}}

/* MODO EDITAR PRECIOS */
.co-prod-btn.editando-btn{cursor:pointer;border-color:var(--warn);box-shadow:0 0 0 2px rgba(245,158,11,.2)}
.co-prod-btn.editando-btn .pb-price{display:none}
.co-prod-btn .pb-edit-overlay{position:absolute;left:0;right:0;bottom:0;min-height:38px;pointer-events:none;z-index:5;background:rgba(15,23,42,.94);border-top:2px solid var(--warn);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:800;line-height:1.15}
.pb-edit-overlay span{font-size:8px;letter-spacing:.7px;color:#fde68a}.pb-edit-overlay strong{font-size:14px;font-family:var(--font-num);margin-top:2px}
.btn-mover.editando{background:var(--warn);color:white;border-color:var(--warn);animation:pulse .8s ease-in-out infinite}
.co-products-grid.ordenando .co-prod-btn{touch-action:none}

/* Zoom Classes */
.co-products-grid.grid-sm { grid-template-columns: repeat(auto-fill,minmax(60px,1fr)); gap: 3px; }
.co-products-grid.grid-sm .co-prod-btn { min-height: 70px; padding: 2px; }
.co-products-grid.grid-sm .pb-img { height: 25px; margin-bottom: 2px; }
.co-products-grid.grid-sm .pb-name { font-size: 8px; line-height: 9px; }
.co-products-grid.grid-sm .pb-price { font-size: 9px; }
.co-products-grid.grid-lg { grid-template-columns: repeat(auto-fill,minmax(105px,1fr)); gap: 6px; }
.co-products-grid.grid-lg .co-prod-btn { min-height: 100px; padding: 4px; }
.co-products-grid.grid-lg .pb-img { height: 45px; margin-bottom: 4px; }
.co-products-grid.grid-lg .pb-name { font-size: 11px; line-height: 12px; margin-bottom:2px; }
.co-products-grid.grid-lg .pb-price { font-size: 13.5px; }


/* Edición de precio: controles grandes, cómodos para pantalla táctil. */
.price-editor{display:grid;gap:12px}
.price-editor>label{font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--muted);text-align:center}
.price-editor-input{display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:10px;background:#f8fafc;padding:4px 14px;gap:5px}
.price-editor-input span{font-family:var(--font-num);font-size:30px;font-weight:800;color:var(--muted)}
.price-editor-input input{width:100%;min-width:0;border:0!important;background:transparent!important;text-align:center;padding:7px 0!important;font-family:var(--font-num);font-size:36px!important;font-weight:800;outline:0}
.price-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.price-step-grid .btn{-webkit-app-region: no-drag;min-height:48px;padding:8px 4px;font-size:13px;font-weight:800}
.price-editor p{font-size:11px;color:var(--muted);text-align:center;margin:0}
.price-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.price-keypad button{min-height:58px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:26px;font-weight:800;color:var(--ink);cursor:pointer}
.price-keypad button:active{transform:scale(0.96)}
.price-keypad button.danger{background:#991b1b;color:#fff;border-color:#7f1d1d;font-size:16px;letter-spacing:1px}

/* Teclado virtual: grande, tactil y completamente oculto mientras esta OFF. */
#virtual-keyboard{display:none;position:fixed;left:0;right:0;bottom:0;z-index:9999;max-height:48vh;overflow-y:auto;padding:10px 14px 14px;background:linear-gradient(180deg,#0f172a,#020617);border-top:3px solid var(--accent);box-shadow:0 -12px 32px rgba(2,6,23,.35);user-select:none;-webkit-user-select:none}
#virtual-keyboard.is-visible{display:block}
body.keyboard-visible #content{margin-bottom:min(370px,48vh)}
body.keyboard-visible .modal-overlay{align-items:flex-start;padding:10px 10px calc(min(370px,48vh) + 10px)}
body.keyboard-visible .modal{max-height:calc(100vh - min(370px,48vh) - 20px)}
.kb-toolbar{max-width:920px;margin:0 auto 8px;display:flex;align-items:center;gap:10px;color:#fff}
.kb-toolbar strong{font-size:12px;letter-spacing:.8px}.kb-toolbar span{font-size:10px;color:#94a3b8;margin-right:auto}
#virtual-keyboard .kb-toolbar button{min-width:92px;min-height:38px;height:38px;padding:6px 12px;background:#7f1d1d;border-color:#b91c1c;font-size:11px}
#virtual-keyboard .kb-row{max-width:920px;margin:6px auto;display:flex;justify-content:center;gap:6px;flex-wrap:nowrap}
#virtual-keyboard .kb-row button{flex:0 1 68px;min-width:48px;height:54px;padding:4px;border:1px solid #475569;background:#1e293b;color:#fff;border-radius:9px;font-family:var(--font-ui);font-size:19px;font-weight:800;cursor:pointer;touch-action:manipulation;box-shadow:0 2px 0 #020617}
#virtual-keyboard .kb-row button:active{transform:translateY(2px);box-shadow:none;background:var(--accent)}
#virtual-keyboard .kb-actions button{flex:1;max-width:250px;font-size:14px;letter-spacing:.5px}
#virtual-keyboard .kb-actions .kb-enter{background:#166534;border-color:#22c55e}
#virtual-keyboard .kb-actions .kb-off{background:#7f1d1d;border-color:#ef4444}
#virtual-keyboard .kb-xl{min-width:180px}
#virtual-keyboard .kb-wide{min-width:90px}
@media(max-width:640px){
  #virtual-keyboard{padding:6px 5px 9px;max-height:55vh}
  body.keyboard-visible #content{margin-bottom:min(390px,55vh)}
  body.keyboard-visible .modal-overlay{padding:6px 6px calc(min(390px,55vh) + 6px)}
  body.keyboard-visible .modal{max-height:calc(100vh - min(390px,55vh) - 12px)}
  .kb-toolbar{margin-bottom:4px}.kb-toolbar span{display:none}
  #virtual-keyboard .kb-toolbar button{min-width:78px;height:34px;min-height:34px}
  #virtual-keyboard .kb-row{gap:3px;margin:4px auto}
  #virtual-keyboard .kb-row button{flex:1;min-width:0;height:49px;padding:2px;border-radius:7px;font-size:16px}
  #virtual-keyboard .kb-actions button{min-width:0;max-width:none;font-size:12px}
}

/* Historial de tickets: tarjetas legibles y tocables. */
.ticket-history-card{background:#fff;border:1px solid var(--border);border-radius:9px;margin-bottom:8px;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.ticket-history-head{width:100%;border:0;background:#fff;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;text-align:left;cursor:pointer;font-family:inherit}
.ticket-history-head>span{display:grid;gap:3px;min-width:0}.ticket-history-head>span:last-child{text-align:right;justify-items:end;flex-shrink:0}
.ticket-history-head b{font-family:var(--font-num);font-size:14px;color:var(--ink)}.ticket-history-head small{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket-history-detail{padding:8px 12px 12px;border-top:1px solid var(--border)}
.ticket-item-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px dotted var(--border);font-size:12px}
.ticket-item-row span{min-width:0;overflow-wrap:anywhere}.ticket-item-row small{color:var(--muted)}.ticket-item-row strong{font-family:var(--font-num);white-space:nowrap}
.ticket-history-total{display:flex;justify-content:space-between;padding-top:10px;margin-top:2px;font-size:14px}.ticket-history-total strong{font-family:var(--font-num)}
.ticket-payment{font-size:11px;color:var(--muted);padding-top:5px}.ticket-history-actions{padding-top:10px}.ticket-empty-detail,.tickets-empty{padding:28px;text-align:center;color:var(--muted);font-size:12px}

/* LISTA DE PEDIDOS */
.pedidos-tabs{display:flex;gap:7px;padding:9px 16px 0;background:var(--bg);border-bottom:1px solid var(--border)}
#ped-vista-lista{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;padding:4px}
.pedido-lista-card{background:#fff;border:1px solid var(--border);border-radius:7px;padding:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.pedido-lista-head{display:flex;justify-content:space-between;gap:8px;padding-bottom:7px;border-bottom:1px solid var(--border);font-size:12px;color:var(--navy)}
.pedido-lista-head span{font-size:10px;font-weight:800;color:var(--accent-dark)}
.pedido-lista-cliente{font-size:16px;font-weight:800;margin-top:9px}
.pedido-lista-meta{font-size:11px;color:var(--text-muted);margin-top:4px;word-break:break-word}
.pedido-lista-items{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border);font-size:12px}
.pedido-lista-items ul{margin:6px 0 0 18px;padding:0}.pedido-lista-items li{margin:4px 0}.pedido-lista-items li span{color:var(--text-muted)}

/* LISTA DE FALTANTES */
.faltantes-form{display:grid;grid-template-columns:minmax(190px,2fr) minmax(105px,1fr) minmax(120px,1fr) minmax(160px,1.5fr) auto;gap:10px;align-items:end;background:#fff;padding:14px;border:1px solid var(--border);border-radius:8px}
.faltantes-form label{display:block;font-size:10px;font-weight:800;letter-spacing:.8px;color:var(--text-muted);margin-bottom:4px}
.faltantes-form select,.faltantes-form input{width:100%;height:36px}
.faltantes-form button{height:36px;white-space:nowrap}
.faltantes-help{font-size:11px;color:var(--text-muted);margin:9px 2px 12px}
.faltantes-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:10px}
.faltante-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:7px;padding:12px;box-shadow:0 1px 2px rgba(15,23,42,.04);min-height:130px}
.faltante-head{display:flex;justify-content:space-between;gap:8px;padding-bottom:7px;border-bottom:1px solid var(--border);font-size:10px;color:var(--text-muted)}
.faltante-head span:first-child{font-weight:800;color:var(--accent-dark)}
.faltante-name{font-size:16px;font-weight:800;color:var(--navy);margin-top:9px;padding-right:52px}
.faltante-cantidad{font-size:14px;font-weight:900;color:var(--navy);margin-top:8px}
.faltante-cantidad small{font-size:9px;letter-spacing:.7px;color:var(--text-muted)}
.faltante-note{font-size:11px;color:var(--text-muted);margin-top:5px;word-break:break-word}
.faltante-delete{position:absolute;right:10px;bottom:10px;padding:3px 6px!important;font-size:10px!important;color:var(--danger)!important}
.faltantes-empty{grid-column:1/-1;text-align:center;background:#fff;border:1px dashed var(--border);padding:34px;color:var(--text-muted);font-size:12px}
@media(max-width:820px){.faltantes-form{grid-template-columns:1fr 1fr}.faltantes-form>div:first-child,.faltantes-form>div:nth-child(4),.faltantes-form button{grid-column:1/-1}}

/* User requested full name instead of initials for products without images */
.co-prod-btn:not(.has-img) .pb-initials { display: none !important; }
.co-prod-btn:not(.has-img) .pb-name {
    display: flex !important;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    padding: 4px;
    word-break: break-word;
    background: linear-gradient(135deg, var(--surface-light), #f8fafc);
    color: var(--ink);
    min-height: 0;
}