/* Emoji FOUC prevention — applied on before body classes are ready */
html.no-prod-emojis-pre .prod-emoji { display: none !important; }
:root {
color-scheme: dark; /* el popup nativo de los se dibuja oscuro/legible */
--bg: #07080a;
--s0: #0e1014;
--s1: #0e1014;
--s2: #161820;
--s3: #1e2028;
--border: #2a2d38;
--border2: #363a48;
--accent: #4f9eff;
--accent-glow: rgba(79,158,255,0.15);
--green: #22c97a;
--green-glow: rgba(34,201,122,0.12);
--yellow: #f5c842;
--red: #ff4d6d;
--purple: #9b72ff;
--text: #e8eaf0;
--muted: #9298ab;
--muted2: #6b7180;
--radius: 10px;
--radius-lg: 16px;
--font: 'Outfit', sans-serif;
--mono: 'JetBrains Mono', monospace;
}
body.light-mode {
color-scheme: light;
--bg: #f4f5f8;
--s0: #ffffff;
--s1: #ffffff;
--s2: #f5f7fb;
--s3: #e8eef8;
--border: #d1d7e0;
--border2: #c7cfd8;
--accent: #2563eb;
--accent-glow: rgba(79,158,255,0.12);
--green: #16a34a;
--green-glow: rgba(34,201,122,0.1);
--yellow: #f59e0b;
--red: #dc2626;
--purple: #7c3aed;
--text: #111827;
--muted: #6b7280;
--muted2: #4b5563;
}
/* ── Skin Frutiger Aero (opcional) para el POS: vidrio glossy + fondo de naturaleza ── */
body.fa-aero {
--bg: transparent !important;
--s0: rgba(13,24,44,0.42) !important;
--s1: rgba(13,24,44,0.44) !important;
--s2: rgba(17,30,52,0.48) !important;
--s3: rgba(24,40,66,0.52) !important;
--border: rgba(255,255,255,0.40) !important;
--border2: rgba(255,255,255,0.55) !important;
--text: #eaf4ff !important;
background:
radial-gradient(150% 80% at 50% -12%, rgba(200,240,255,0.95), rgba(150,215,245,0) 55%),
radial-gradient(60% 42% at 82% 6%, rgba(255,255,255,0.5), transparent 60%),
linear-gradient(180deg,#78c4ec 0%,#9bd7e6 26%,#c6e79a 56%,#56a23c 100%) !important;
background-attachment: fixed !important;
}
body.fa-aero #appScreen, body.fa-aero #loginScreen, body.fa-aero #landingScreen,
body.fa-aero .app-header, body.fa-aero #appSidebar { background: transparent !important; }
body.fa-aero input, body.fa-aero textarea, body.fa-aero select {
background: rgba(255,255,255,0.55) !important; color:#103a55 !important;
border-color: rgba(255,255,255,0.78) !important;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.fa-aero input::placeholder, body.fa-aero textarea::placeholder { color: rgba(16,58,85,0.55) !important; }
@keyframes scanPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.4);}}
.shortcut-btn{
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-width:76px;padding:7px 8px;border-radius:var(--radius);
background:var(--s2);border:1px solid var(--border);color:var(--text);
cursor:pointer;transition:all 0.15s;text-align:center;
font-family:var(--font);
}
.shortcut-btn:hover{border-color:var(--accent);background:var(--accent-glow);}
.shortcut-btn:active{transform:scale(0.95);}
.shortcut-btn:disabled{opacity:0.35;cursor:not-allowed;}
*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--font);height:100%;overflow:hidden;}
button{cursor:pointer;font-family:var(--font);}
/* Opciones de TODOS los legibles (el popup nativo ignora el color del select) */
select option,select optgroup{background:var(--s2);color:var(--text);}
/* Asistente IA: micrófono escuchando + burbuja "pensando" */
#aiAgentMic.listening{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important;animation:aiMicPulse 1.1s ease-out infinite;}
@keyframes aiMicPulse{0%{box-shadow:0 0 0 0 rgba(255,77,109,0.55);}100%{box-shadow:0 0 0 12px rgba(255,77,109,0);}}
.ai-agent-loading{opacity:0.7;animation:aiThink 1.2s ease-in-out infinite;}
@keyframes aiThink{0%,100%{opacity:0.5;}50%{opacity:0.9;}}
#aiAgentFab:hover{transform:scale(1.06);transition:transform 0.15s;}
input,select{font-family:var(--font);}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
/* ── SCREENS ── */
.screen{display:none;width:100vw;height:100vh;height:100dvh;}
.screen.active{display:flex;}
/* ══════════════════════════════════
LOGIN SCREEN — PREMIUM
══════════════════════════════════ */
#loginScreen{
align-items:center;justify-content:center;
background: var(--bg);
position:relative;overflow:hidden;
}
/* Animated gradient orbs — GPU-only, no layout impact */
.login-orb{
position:absolute;border-radius:50%;
filter:blur(80px);pointer-events:none;will-change:transform;
}
.login-orb-1{
width:500px;height:500px;
background:radial-gradient(circle,rgba(79,158,255,0.18) 0%,transparent 70%);
top:-100px;left:-100px;
animation:orbFloat1 12s ease-in-out infinite;
}
.login-orb-2{
width:400px;height:400px;
background:radial-gradient(circle,rgba(155,114,255,0.14) 0%,transparent 70%);
bottom:-80px;right:-80px;
animation:orbFloat2 15s ease-in-out infinite;
}
.login-orb-3{
width:300px;height:300px;
background:radial-gradient(circle,rgba(34,201,122,0.08) 0%,transparent 70%);
top:50%;left:50%;transform:translate(-50%,-50%);
animation:orbFloat3 10s ease-in-out infinite;
}
@keyframes orbFloat1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,30px);}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-40px);}}
@keyframes orbFloat3{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.15);}}
/* Grid dots pattern */
#loginScreen::before{
content:'';position:absolute;inset:0;
background-image:radial-gradient(circle,rgba(255,255,255,0.035) 1px,transparent 1px);
background-size:28px 28px;
pointer-events:none;
}
/* Card */
.login-card{
background:rgba(14,16,20,0.85);
border:1px solid rgba(79,158,255,0.2);
border-radius:28px;padding:44px;width:420px;
box-shadow:0 0 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
position:relative;z-index:2;
animation:cardIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
backdrop-filter:blur(20px);
}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}
/* Card shimmer border */
.login-card::before{
content:'';position:absolute;inset:-1px;border-radius:29px;
background:linear-gradient(135deg,rgba(79,158,255,0.3),rgba(155,114,255,0.15),transparent,rgba(34,201,122,0.1));
z-index:-1;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;mask-composite:exclude;padding:1px;
}
.login-logo{text-align:center;margin-bottom:30px;}
.login-logo-ring{
width:72px;height:72px;border-radius:22px;
background:linear-gradient(135deg,rgba(79,158,255,0.2),rgba(155,114,255,0.15));
border:1px solid rgba(79,158,255,0.25);
display:flex;align-items:center;justify-content:center;
font-size:2.2rem;margin:0 auto 14px;
box-shadow:0 0 24px rgba(79,158,255,0.15);
animation:logoBreath 4s ease-in-out infinite;
}
@keyframes logoBreath{0%,100%{box-shadow:0 0 24px rgba(79,158,255,0.15);}50%{box-shadow:0 0 40px rgba(79,158,255,0.3);}}
.login-logo h1{font-size:1.75rem;font-weight:900;letter-spacing:-1px;}
.login-logo h1 span{color:var(--accent);}
.login-logo p{color:var(--muted);font-size:0.8rem;margin-top:4px;}
/* Login steps */
.login-step{display:none;}
.login-step.active{display:block;animation:stepIn 0.3s ease both;}
@keyframes stepIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:translateX(0);}}
.step-label{font-size:0.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.7px;margin-bottom:10px;}
/* Role grid */
.login-roles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:22px;}
.role-card{
background:var(--s2);border:2px solid var(--border);
border-radius:var(--radius);padding:14px 10px;text-align:center;
transition:all 0.2s;cursor:pointer;position:relative;overflow:hidden;
}
.role-card::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,rgba(79,158,255,0.08),transparent);
opacity:0;transition:opacity 0.2s;
}
.role-card:hover{border-color:var(--accent);}
.role-card:hover::after{opacity:1;}
.role-card.selected{border-color:var(--accent);background:rgba(79,158,255,0.08);}
.role-card.selected::after{opacity:1;}
.role-card .r-icon{font-size:1.6rem;display:block;margin-bottom:5px;}
.role-card .r-name{font-size:0.8rem;font-weight:700;}
.role-card .r-desc{font-size:0.67rem;color:var(--muted);margin-top:2px;}
.role-selected-check{
position:absolute;top:6px;right:6px;width:16px;height:16px;
background:var(--accent);border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:9px;color:#fff;opacity:0;transition:opacity 0.2s;
}
.role-card.selected .role-selected-check{opacity:1;}
.login-field{margin-bottom:14px;}
.login-field label{display:block;font-size:0.75rem;color:var(--muted);margin-bottom:6px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;}
.login-field-wrap{position:relative;}
.login-field input{
width:100%;background:var(--s2);
border:1px solid var(--border);
border-radius:var(--radius);color:var(--text);
padding:11px 40px 11px 14px;
font-size:0.95rem;outline:none;
transition:border 0.15s, box-shadow 0.15s;
}
.login-field input:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(79,158,255,0.1);
}
.login-field-icon{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
font-size:1rem;pointer-events:none;color:var(--muted2);
}
.login-error{
background:rgba(255,77,109,0.08);border:1px solid rgba(255,77,109,0.3);
border-radius:8px;padding:10px 14px;font-size:0.78rem;color:var(--red);
margin-bottom:14px;display:none;
}
.login-error.show{display:block;animation:shake 0.3s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}
.login-btn{
width:100%;padding:13px;
background:linear-gradient(135deg,var(--accent),#7bb8ff);
border:none;border-radius:var(--radius);
color:#fff;font-size:1rem;font-weight:800;
transition:all 0.2s;margin-top:4px;
position:relative;overflow:hidden;
}
.login-btn::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
opacity:0;transition:opacity 0.2s;
}
.login-btn:hover{box-shadow:0 0 28px rgba(79,158,255,0.45);transform:translateY(-1px);}
.login-btn:hover::after{opacity:1;}
.login-btn:active{transform:translateY(0);}
.login-btn.loading{pointer-events:none;opacity:0.7;}
.login-btn .btn-spinner{
display:inline-block;width:16px;height:16px;
border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;
border-radius:50%;vertical-align:middle;margin-right:8px;
animation:spin 0.6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.ia-loading-dots span{animation:iaDot 1.2s infinite;display:inline-block;opacity:0;}
.ia-loading-dots span:nth-child(2){animation-delay:0.2s;}
.ia-loading-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes iaDot{0%,80%,100%{opacity:0;}40%{opacity:1;}}
.login-hint{text-align:center;font-size:0.7rem;color:var(--muted2);margin-top:12px;}
/* Progress dots */
.login-progress{display:flex;justify-content:center;gap:6px;margin-bottom:22px;}
.lp-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);transition:all 0.3s;}
.lp-dot.active{background:var(--accent);width:18px;border-radius:3px;}
.lp-dot.done{background:var(--green);}
/* ══════════════════════════════════
MAIN APP
══════════════════════════════════ */
#appScreen{flex-direction:column;height:100%;}
/* ══ TOPBAR — logo + user strip only ══ */
.topbar{
background:var(--s1);border-bottom:1px solid var(--border);
display:flex;align-items:center;padding:0 16px;height:50px;
flex-shrink:0;gap:8px;position:relative;z-index:50;
box-shadow:0 1px 0 var(--border);
}
.topbar-logo{font-size:1rem;font-weight:900;letter-spacing:-0.5px;white-space:nowrap;}
.topbar-logo span{color:var(--accent);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.topbar-stat{display:flex;align-items:center;gap:4px;padding:4px 10px;background:var(--s2);border:1px solid var(--border);border-radius:8px;font-size:0.75rem;font-weight:700;white-space:nowrap;}
.topbar-stat .ts-icon{font-size:0.85rem;}
.topbar-stat.low-alert{border-color:rgba(255,77,109,0.4);color:var(--red);cursor:pointer;}
.clock-display{font-family:var(--mono);font-size:0.75rem;color:var(--muted);padding:4px 10px;background:var(--s2);border:1px solid var(--border);border-radius:8px;}
.user-pill{display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--border);border-radius:20px;padding:4px 12px 4px 4px;}
.user-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:700;}
.avatar-admin{background:rgba(155,114,255,0.2);color:var(--purple);}
.avatar-cajero{background:rgba(79,158,255,0.2);color:var(--accent);}
.avatar-gerente{background:rgba(245,200,66,0.2);color:var(--yellow);}
.user-info .u-name{font-size:0.75rem;font-weight:700;line-height:1;}
.user-info .u-role{font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;}
.logout-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:0.7rem;padding:4px 10px;border-radius:8px;transition:all 0.15s;}
.logout-btn:hover{border-color:var(--red);color:var(--red);}
/* ══ SIDEBAR NAV ══ */
.app-body{flex:1;display:flex;overflow:hidden;}
.sidebar{
width:195px;flex-shrink:0;
background:var(--s1);border-right:1px solid var(--border);
display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
transition:width 0.22s cubic-bezier(0.4,0,0.2,1);
position:relative;z-index:40;
}
.sidebar.collapsed{width:50px;}
.sidebar::-webkit-scrollbar{width:3px;}
/* collapse button */
.sidebar-toggle{
display:flex;align-items:center;justify-content:center;
height:38px;border:none;background:none;color:var(--muted);
cursor:pointer;transition:all 0.15s;flex-shrink:0;width:100%;
border-bottom:1px solid var(--border);
}
.sidebar-toggle:hover{color:var(--accent);background:var(--s2);}
.sidebar-toggle .st-arrow{font-size:0.75rem;transition:transform 0.22s;display:inline-block;}
.sidebar.collapsed .st-arrow{transform:rotate(180deg);}
/* group */
.nav-group{padding:6px 0 2px;}
.nav-group + .nav-group{border-top:1px solid var(--border);}
.nav-group-label{
font-size:0.58rem;font-weight:800;color:var(--muted2);
text-transform:uppercase;letter-spacing:0.9px;
padding:2px 14px 5px;white-space:nowrap;overflow:hidden;
transition:opacity 0.15s,max-height 0.15s;max-height:24px;
}
.sidebar.collapsed .nav-group-label{opacity:0;max-height:0;padding-bottom:0;}
/* nav item */
.nav-btn{
display:flex;align-items:center;gap:9px;
width:100%;background:transparent;border:none;
color:var(--muted);font-family:var(--font);font-size:0.8rem;font-weight:600;
padding:8px 14px;transition:all 0.15s;
white-space:nowrap;overflow:hidden;text-align:left;
position:relative;cursor:pointer;
}
.nav-btn:hover{background:var(--s2);color:var(--text);}
.nav-btn.active{
background:linear-gradient(90deg,rgba(79,158,255,0.12),transparent);
color:var(--accent);font-weight:700;
}
.nav-btn.active::before{
content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;
background:var(--accent);border-radius:0 3px 3px 0;
}
.nb-icon{font-size:1rem;flex-shrink:0;width:20px;text-align:center;line-height:1;}
.nb-label{flex:1;transition:opacity 0.15s;}
.sidebar.collapsed .nb-label{opacity:0;}
.nav-cart-badge,.nav-low-badge{
min-width:17px;height:17px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
font-size:0.58rem;font-weight:800;padding:0 4px;flex-shrink:0;
}
.nav-cart-badge{background:var(--accent);color:#fff;}
.nav-low-badge{background:var(--yellow);color:#111;}
.sidebar.collapsed .nav-cart-badge,
.sidebar.collapsed .nav-low-badge{display:none;}
/* CONTENT AREA */
.content{flex:1;overflow:hidden;display:flex;}
.tab-content{display:none;width:100%;height:100%;}
.tab-content.active{display:flex;}
/* POS TAB */
#tabPOS{display:none;}
#tabPOS.active{display:grid;grid-template-columns:1fr 340px;}
.pos-left{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border);}
.pos-search{padding:12px;border-bottom:1px solid var(--border);display:flex;gap:8px;}
.pos-search input{
flex:1;background:var(--s2);border:1px solid var(--border);
border-radius:var(--radius);color:var(--text);padding:9px 14px;
font-size:0.88rem;outline:none;transition:border 0.15s;
}
.pos-search input:focus{border-color:var(--accent);}
.barcode-scan-btn{
background:var(--s2);border:1px solid var(--border);color:var(--muted);
border-radius:var(--radius);padding:9px 14px;font-size:0.82rem;font-weight:600;
transition:all 0.15s;white-space:nowrap;
}
.barcode-scan-btn:hover{border-color:var(--accent);color:var(--accent);}
/* ── FILTER BAR (cats + brands) ── */
.pos-filter-bar{flex-shrink:0;border-bottom:1px solid var(--border);background:var(--s1);}
.pos-filter-row{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;align-items:center;}
.pos-filter-row::-webkit-scrollbar{height:2px;}
.pos-filter-row + .pos-filter-row{padding-top:0;border-top:1px solid var(--border);}
.filter-row-label{font-size:0.6rem;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;padding-right:4px;}
.cat-pill{
background:var(--s2);border:1px solid var(--border);color:var(--muted);
font-size:0.73rem;font-weight:700;padding:5px 13px;border-radius:20px;
white-space:nowrap;transition:all 0.15s;flex-shrink:0;
}
.cat-pill:hover{background:var(--s3);border-color:var(--border2);color:var(--text);}
.cat-pill.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px var(--accent-glow);}
.brand-pill{
background:var(--s2);border:1px solid var(--border);color:var(--muted);
font-size:0.7rem;font-weight:600;padding:4px 11px;border-radius:20px;
white-space:nowrap;transition:all 0.15s;flex-shrink:0;cursor:pointer;
}
.brand-pill:hover{background:var(--s3);border-color:var(--border2);color:var(--text);}
.brand-pill.active{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 2px 8px rgba(155,114,255,0.25);}
/* ── PRODUCT GRID ── */
.products-area{
flex:1;overflow-y:auto;
padding:14px 14px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:10px;
align-content:start;
}
.prod-card{
background:var(--s2);border:1px solid var(--border);
border-radius:12px;padding:14px 12px 11px;cursor:pointer;
transition:all 0.18s;position:relative;
display:flex;flex-direction:column;
}
.prod-card:hover{border-color:var(--accent);box-shadow:0 4px 16px var(--accent-glow);transform:translateY(-1px);}
.prod-card:active{transform:scale(0.96);}
.prod-card.low-stock{border-color:rgba(245,200,66,0.35);background:rgba(245,200,66,0.03);}
.prod-card.no-stock{opacity:0.3;pointer-events:none;}
.prod-emoji{font-size:2rem;display:block;margin-bottom:8px;line-height:1;}
.prod-name{font-size:0.8rem;font-weight:700;line-height:1.25;margin-bottom:5px;color:var(--text);}
.prod-brand-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;background:rgba(79,158,255,0.1);border:1px solid rgba(79,158,255,0.2);font-size:0.6rem;font-weight:700;color:var(--accent);margin-bottom:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prod-subbrand-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;background:rgba(155,114,255,0.08);border:1px solid rgba(155,114,255,0.2);font-size:0.58rem;font-weight:600;color:var(--purple);margin-left:4px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prod-chips-row{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-bottom:6px;min-height:18px;}
.prod-meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;}
.prod-price{font-family:var(--mono);font-size:0.95rem;color:var(--accent);font-weight:700;letter-spacing:-0.3px;}
.prod-stock-tag{font-size:0.62rem;color:var(--muted);text-align:right;}
.prod-stock-tag.low{color:var(--yellow);font-weight:700;}
.stock-badge{position:absolute;top:8px;right:8px;background:rgba(245,200,66,0.15);color:var(--yellow);border:1px solid rgba(245,200,66,0.35);font-size:0.58rem;font-weight:800;padding:2px 6px;border-radius:6px;white-space:nowrap;}
.stock-badge.out{background:rgba(255,77,109,0.12);color:var(--red);border-color:rgba(255,77,109,0.3);}
/* RIGHT/TICKET */
.pos-right{display:flex;flex-direction:column;background:var(--s1);min-height:0;overflow:hidden;}
.ticket-top{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.ticket-top h3{font-size:0.95rem;font-weight:800;}
.ticket-actions{display:flex;gap:6px;}
.t-action-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:0.72rem;padding:4px 10px;border-radius:7px;transition:all 0.15s;}
.t-action-btn:hover{border-color:var(--red);color:var(--red);}
.ticket-client{padding:8px 14px;border-bottom:1px solid var(--border);}
.ticket-client input{
width:100%;background:var(--s2);border:1px solid var(--border);
border-radius:8px;color:var(--text);padding:6px 10px;font-size:0.78rem;outline:none;
}
.ticket-client input:focus{border-color:var(--accent);}
.ticket-items{flex:1;overflow-y:auto;padding:8px;min-height:0;}
.ticket-empty{text-align:center;color:var(--muted);padding:30px 16px;font-size:0.82rem;}
.ticket-empty .te-icon{font-size:2.5rem;display:block;margin-bottom:6px;}
.t-item{
display:flex;align-items:center;gap:8px;
background:var(--s2);border:1px solid var(--border);
border-radius:9px;padding:8px 10px;margin-bottom:6px;
}
.ti-emoji{font-size:1.2rem;flex-shrink:0;}
.ti-info{flex:1;min-width:0;}
.ti-name{font-size:0.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ti-unit{font-family:var(--mono);font-size:0.7rem;color:var(--muted);}
.ti-qty-ctrl{display:flex;align-items:center;gap:4px;}
.qb{width:22px;height:22px;border-radius:6px;border:1px solid var(--border);background:var(--s1);color:var(--text);font-size:0.9rem;display:flex;align-items:center;justify-content:center;transition:all 0.12s;}
.qb:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.qv{font-family:var(--mono);font-size:0.82rem;min-width:18px;text-align:center;}
.qv-input{font-family:var(--mono);font-size:0.82rem;width:38px;text-align:center;background:var(--s1);border:1px solid var(--border2);border-radius:5px;color:var(--text);padding:2px 4px;outline:none;-moz-appearance:textfield;}
.qv-input::-webkit-outer-spin-button,.qv-input::-webkit-inner-spin-button{-webkit-appearance:none;}
.qv-input:focus{border-color:var(--accent);}
.ti-subtotal{font-family:var(--mono);font-size:0.78rem;color:var(--accent);min-width:52px;text-align:right;}
.ti-del{background:none;border:none;color:var(--muted2);font-size:0.9rem;padding:2px;transition:color 0.1s;}
.ti-del:hover{color:var(--red);}
.ticket-footer{border-top:1px solid var(--border);flex-shrink:0;}
.totals-box{padding:10px 14px;}
.tot-row{display:flex;justify-content:space-between;font-size:0.78rem;color:var(--muted);margin-bottom:5px;}
.tot-row span:last-child{font-family:var(--mono);}
.tot-row.grand{color:var(--text);font-size:1rem;font-weight:800;border-top:1px solid var(--border);padding-top:8px;margin-top:4px;margin-bottom:0;}
.tot-row.grand span:last-child{color:var(--accent);font-size:1.1rem;}
.disc-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.disc-row input{
flex:1;background:var(--s2);border:1px solid var(--border);
border-radius:7px;color:var(--text);padding:5px 8px;font-size:0.78rem;outline:none;
font-family:var(--mono);
}
.disc-row input:focus{border-color:var(--yellow);}
.disc-row label{font-size:0.73rem;color:var(--muted);white-space:nowrap;}
.cobrar-btn{
margin:0 14px 14px;width:calc(100% - 28px);padding:14px;
background:linear-gradient(135deg,var(--green),#1aad65);
border:none;border-radius:var(--radius);color:#fff;
font-size:1rem;font-weight:800;transition:all 0.15s;
}
.cobrar-btn:hover{box-shadow:0 0 20px var(--green-glow);transform:translateY(-1px);}
.cobrar-btn:disabled{opacity:0.3;pointer-events:none;transform:none;}
/* INVENTARIO TAB */
#tabInventario{display:none;flex-direction:column;}
#tabInventario.active{display:flex;}
.inv-toolbar{
padding:14px 20px;border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.inv-toolbar h2{font-size:1.1rem;font-weight:800;margin-right:8px;}
.tb-search{
flex:1;min-width:200px;background:var(--s2);border:1px solid var(--border);
border-radius:var(--radius);color:var(--text);padding:8px 14px;
font-size:0.85rem;outline:none;transition:border 0.15s;
}
.tb-search:focus{border-color:var(--accent);}
.btn-primary{background:var(--accent);border:none;color:#fff;font-family:var(--font);font-size:0.82rem;font-weight:700;padding:8px 16px;border-radius:var(--radius);transition:all 0.15s;white-space:nowrap;}
.btn-primary:hover{background:#6aadff;}
.btn-secondary{background:var(--s2);border:1px solid var(--border);color:var(--muted);font-family:var(--font);font-size:0.82rem;font-weight:600;padding:8px 14px;border-radius:var(--radius);transition:all 0.15s;white-space:nowrap;}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}
.btn-danger{background:rgba(255,77,109,0.1);border:1px solid rgba(255,77,109,0.3);color:var(--red);font-family:var(--font);font-size:0.78rem;font-weight:600;padding:6px 12px;border-radius:8px;transition:all 0.15s;}
.btn-danger:hover{background:rgba(255,77,109,0.2);}
.btn-success{background:rgba(34,201,122,0.12);border:1px solid rgba(34,201,122,0.3);color:var(--green);font-family:var(--font);font-size:0.82rem;font-weight:600;padding:8px 14px;border-radius:var(--radius);transition:all 0.15s;white-space:nowrap;}
.btn-success:hover{background:rgba(34,201,122,0.2);}
.inv-table-wrap{flex:1;overflow-y:auto;padding:16px 20px;}
table{width:100%;border-collapse:collapse;}
thead th{
text-align:left;font-size:0.72rem;font-weight:700;color:var(--muted);
text-transform:uppercase;letter-spacing:0.8px;padding:0 12px 10px;
border-bottom:1px solid var(--border);
}
tbody tr{border-bottom:1px solid var(--border);transition:background 0.1s;}
tbody tr:hover{background:var(--s2);}
tbody td{padding:10px 12px;font-size:0.82rem;}
.td-code{font-family:var(--mono);font-size:0.75rem;color:var(--muted);}
.td-emoji{font-size:1.2rem;}
.td-stock{font-family:var(--mono);font-weight:700;}
.td-stock.ok{color:var(--green);}
.td-stock.low{color:var(--yellow);}
.td-stock.zero{color:var(--red);}
.td-price{font-family:var(--mono);color:var(--accent);}
.td-cat span{background:var(--s2);border:1px solid var(--border);border-radius:20px;padding:2px 8px;font-size:0.72rem;color:var(--muted);}
.row-actions{display:flex;gap:6px;}
.edit-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:0.72rem;padding:4px 10px;border-radius:7px;transition:all 0.15s;}
.edit-btn:hover{border-color:var(--accent);color:var(--accent);}
/* HELP SYSTEM */
.help-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted2);background:none;color:var(--muted);font-size:0.67rem;font-weight:800;cursor:pointer;transition:all 0.15s;flex-shrink:0;line-height:1;font-family:var(--font);vertical-align:middle;}
.help-btn:hover{border-color:var(--accent);color:var(--accent);}
body.no-help-btns .help-btn{display:none!important;}
#helpOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s;}
#helpOverlay.open{opacity:1;pointer-events:all;}
#helpBox{background:var(--s2);border:1px solid var(--border);border-radius:16px;padding:0;width:min(480px,94vw);max-height:85vh;overflow-y:auto;transform:translateY(12px);transition:transform 0.2s;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
#helpOverlay.open #helpBox{transform:translateY(0);}
.help-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--border);}
.help-header h3{font-size:0.95rem;font-weight:800;margin:0;display:flex;align-items:center;gap:8px;}
.help-close{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color 0.15s;font-family:var(--font);}
.help-close:hover{color:var(--text);}
.help-body{padding:16px 18px 20px;}
.help-section{margin-bottom:14px;}
.help-section:last-child{margin-bottom:0;}
.help-section h4{font-size:0.72rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:0.5px;margin:0 0 6px;}
.help-section p,.help-section li{font-size:0.82rem;color:var(--text);line-height:1.55;margin:0;}
.help-section ul{padding-left:16px;margin:4px 0 0;}
.help-section li{margin-bottom:4px;}
.help-tip{display:flex;gap:8px;align-items:flex-start;background:rgba(79,158,255,0.07);border:1px solid rgba(79,158,255,0.2);border-radius:8px;padding:8px 10px;margin-top:10px;}
.help-tip span{font-size:0.78rem;color:var(--text);line-height:1.5;}
kbd{display:inline-block;padding:1px 6px;border:1px solid var(--border2);border-radius:4px;font-family:var(--mono);font-size:0.72rem;background:var(--s3);color:var(--text);}
/* PRODUCT MODAL */
.modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,0.8);
display:flex;align-items:center;justify-content:center;
z-index:300;opacity:0;pointer-events:none;transition:opacity 0.2s;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-box{
background:var(--s1);border:1px solid var(--border);
border-radius:20px;padding:28px;width:440px;max-width:95vw;
max-height:90vh;overflow-y:auto;
scrollbar-gutter:stable; /* reserva el espacio de la barra: evita el "salto" (CLS) al aparecer */
transform:translateY(16px);transition:transform 0.2s;
}
.modal-overlay.open .modal-box{transform:translateY(0);}
.modal-box h3{font-size:1.1rem;font-weight:800;margin-bottom:20px;}
/* Modal header with close X */
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.modal-header h3 { margin-bottom: 0; }
.modal-close-x {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--s3);
border: 1px solid var(--border);
color: var(--text);
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s;
padding: 0;
line-height: 1;
}
.modal-close-x:hover { background: var(--s2); }
.modal-close-x::before { content: '×'; font-size: 1.3rem; line-height: 1; }
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-field{margin-bottom:14px;}
.form-field.full{grid-column:1/-1;}
.form-field label{display:block;font-size:0.75rem;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px;}
.form-field input,.form-field select{
width:100%;background:var(--s2);border:1px solid var(--border);
border-radius:var(--radius);color:var(--text);padding:9px 12px;
font-size:0.88rem;outline:none;transition:border 0.15s;
}
.form-field input:focus,.form-field select:focus{border-color:var(--accent);}
.form-field select option{background:var(--s2);}
.modal-btns{display:flex;gap:10px;margin-top:20px;}
.modal-cancel{flex:1;padding:11px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--muted);font-family:var(--font);font-size:0.88rem;font-weight:700;transition:all 0.15s;}
.modal-cancel:hover{border-color:var(--red);color:var(--red);}
.modal-confirm{flex:2;padding:11px;border-radius:var(--radius);border:none;background:var(--accent);color:#fff;font-family:var(--font);font-size:0.88rem;font-weight:800;transition:all 0.15s;}
.modal-confirm:hover{background:#6aadff;}
/* CORTE TAB */
#tabCorte{display:none;flex-direction:column;overflow-y:auto;}
#tabCorte.active{display:flex;}
.corte-wrap{padding:20px;max-width:1000px;margin:0 auto;width:100%;}
.corte-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.corte-header h2{font-size:1.3rem;font-weight:900;}
.corte-date{font-family:var(--mono);font-size:0.78rem;color:var(--muted);}
.corte-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px;}
.stat-card{
background:var(--s1);border:1px solid var(--border);
border-radius:var(--radius-lg);padding:18px;position:relative;overflow:hidden;
}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;}
.stat-card.green::before{background:var(--green);}
.stat-card.blue::before{background:var(--accent);}
.stat-card.yellow::before{background:var(--yellow);}
.stat-card.purple::before{background:var(--purple);}
.stat-card.red::before{background:var(--red);}
.sc-label{font-size:0.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:6px;}
.sc-value{font-family:var(--mono);font-size:1.6rem;font-weight:700;line-height:1;}
.sc-value.green{color:var(--green);}
.sc-value.blue{color:var(--accent);}
.sc-value.yellow{color:var(--yellow);}
.sc-value.purple{color:var(--purple);}
.sc-sub{font-size:0.72rem;color:var(--muted);margin-top:4px;}
.corte-sections{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.cs-panel{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;}
.cs-panel h4{font-size:0.82rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:14px;}
.method-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
.method-row:last-child{border-bottom:none;}
.mr-label{display:flex;align-items:center;gap:8px;font-size:0.82rem;}
.mr-count{font-size:0.72rem;color:var(--muted);}
.mr-amount{font-family:var(--mono);font-size:0.88rem;font-weight:600;color:var(--green);}
.sales-table-wrap{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;}
.sales-table-wrap h4{font-size:0.82rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:14px;}
.stw-table{width:100%;border-collapse:collapse;font-size:0.8rem;}
.stw-table th{text-align:left;color:var(--muted);font-size:0.7rem;font-weight:700;text-transform:uppercase;padding:0 8px 8px;border-bottom:1px solid var(--border);}
.stw-table td{padding:8px;border-bottom:1px solid var(--border2);}
.stw-table td:last-child{font-family:var(--mono);color:var(--accent);}
.print-corte-btn{
width:100%;padding:14px;background:var(--s2);border:1px solid var(--border);
border-radius:var(--radius);color:var(--text);font-family:var(--font);
font-size:0.9rem;font-weight:700;transition:all 0.15s;
}
.print-corte-btn:hover{border-color:var(--accent);color:var(--accent);}
.empty-corte{text-align:center;padding:60px 20px;color:var(--muted);}
.empty-corte .ec-icon{font-size:3rem;display:block;margin-bottom:12px;}
/* TERMINAL TAB */
#tabTerminal{display:none;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:24px;}
#tabTerminal.active{display:flex;}
.terminal-wrap{width:100%;max-width:860px;}
.terminal-wrap h2{font-size:1.3rem;font-weight:900;margin-bottom:4px;}
.terminal-wrap .term-sub{font-size:0.82rem;color:var(--muted);margin-bottom:20px;}
.term-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.term-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;}
.term-card h3{font-size:0.9rem;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.term-card p{font-size:0.78rem;color:var(--muted);margin-bottom:16px;}
.config-field{margin-bottom:12px;}
.config-field label{display:block;font-size:0.72rem;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px;}
.config-field input,.config-field select{
width:100%;background:var(--s2);border:1px solid var(--border);
border-radius:8px;color:var(--text);padding:8px 12px;
font-size:0.85rem;outline:none;transition:border 0.15s;font-family:var(--mono);
}
.config-field input:focus,.config-field select:focus{border-color:var(--accent);}
.status-indicator{display:flex;align-items:center;gap:6px;font-size:0.78rem;margin-bottom:14px;}
.si-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite;}
.si-dot.green{background:var(--green);box-shadow:0 0 6px var(--green);}
.si-dot.yellow{background:var(--yellow);}
.si-dot.red{background:var(--red);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}
.provider-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px;}
.provider-card{background:var(--s2);border:2px solid var(--border);border-radius:10px;padding:12px 8px;text-align:center;transition:all 0.15s;cursor:pointer;}
.provider-card:hover,.provider-card.selected{border-color:var(--accent);background:var(--accent-glow);}
.pv-icon{font-size:1.6rem;display:block;margin-bottom:4px;}
.pv-name{font-size:0.75rem;font-weight:700;}
.pv-desc{font-size:0.65rem;color:var(--muted);}
.test-btn{width:100%;padding:11px;background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:0.85rem;font-weight:700;transition:all 0.15s;margin-bottom:8px;}
.test-btn:hover{border-color:var(--accent);color:var(--accent);}
.save-config-btn{width:100%;padding:11px;background:var(--accent);border:none;border-radius:var(--radius);color:#fff;font-family:var(--font);font-size:0.85rem;font-weight:800;transition:all 0.15s;}
.save-config-btn:hover{background:#6aadff;}
.term-info-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;margin-top:16px;grid-column:1/-1;}
.term-info-card h3{font-size:0.9rem;font-weight:800;margin-bottom:12px;}
.api-steps{counter-reset:step;}
.api-step{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.api-step-num{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:0.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.api-step-text h5{font-size:0.82rem;font-weight:700;margin-bottom:2px;}
.api-step-text p{font-size:0.75rem;color:var(--muted);line-height:1.4;}
.code-snippet{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-family:var(--mono);font-size:0.72rem;color:var(--accent);margin-top:6px;overflow-x:auto;}
/* ══════════════════════════════════
CONFIG TAB (Usuarios + Excel)
══════════════════════════════════ */
#tabConfig{display:none;flex-direction:column;overflow-y:auto;}
#tabConfig.active{display:flex;}
#tabDatos{display:none;flex-direction:column;overflow-y:auto;}
#tabDatos.active{display:flex;}
#tabDatos .config-wrap{overflow-y:visible;}
#tabAdmin{display:none;flex-direction:column;overflow-y:auto;}
#tabAdmin.active{display:flex;}
/* Personal (Trabajadores/Asistencias/Horarios/Actividad): faltaba el scroll vertical
que sí tienen Datos y Admin → su contenido largo no se podía recorrer. */
#tabPersonal{display:none;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#tabPersonal.active{display:flex;}
.config-wrap{padding:24px;max-width:1000px;margin:0 auto;width:100%;}
.config-wrap h2{font-size:1.3rem;font-weight:900;margin-bottom:4px;}
.config-wrap .config-sub{font-size:0.82rem;color:var(--muted);margin-bottom:24px;}
.admin-grid{display:flex;flex-direction:column;gap:16px;}
.admin-col{display:contents;}
.admin-col > .config-section:last-child{margin-bottom:0;}
.config-section{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;margin-bottom:20px;}
.config-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.config-section-header h3{font-size:0.95rem;font-weight:800;display:flex;align-items:center;gap:8px;}
/* Users table */
.users-table{width:100%;border-collapse:collapse;font-size:0.82rem;}
.users-table th{text-align:left;font-size:0.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;padding:0 10px 10px;border-bottom:1px solid var(--border);}
.users-table td{padding:10px;border-bottom:1px solid var(--border2);}
.users-table tr:last-child td{border-bottom:none;}
.users-table tr:hover td{background:var(--s2);}
.u-role-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;}
.urb-admin{background:rgba(155,114,255,0.15);color:var(--purple);border:1px solid rgba(155,114,255,0.3);}
.urb-gerente{background:rgba(245,200,66,0.12);color:var(--yellow);border:1px solid rgba(245,200,66,0.3);}
.urb-cajero{background:rgba(79,158,255,0.12);color:var(--accent);border:1px solid rgba(79,158,255,0.3);}
.urb-almacen{background:rgba(34,201,122,0.1);color:var(--green);border:1px solid rgba(34,201,122,0.25);}
.u-status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;}
.u-status-dot.active{background:var(--green);}
.u-status-dot.inactive{background:var(--muted2);}
/* ══ CLIENT DB TAB inside Datos ══ */
.db-tabs { display:flex; gap:4px; margin-bottom:14px; border-bottom:1px solid var(--border); padding-bottom:0; }
.db-tab-btn { background:transparent; border:none; color:var(--muted); font-family:var(--font); font-size:0.82rem; font-weight:700; padding:8px 16px; border-radius:8px 8px 0 0; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.15s; }
.db-tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); background:rgba(79,158,255,0.06); }
.db-tab-pane { display:none; }
.db-tab-pane.active { display:block; }
.db-search-row { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.db-search-row input { flex:1; background:var(--s2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); padding:9px 14px 9px 36px; font-size:0.88rem; outline:none; transition:border 0.15s; }
.db-search-row input:focus { border-color:var(--accent); }
.db-search-wrap { position:relative; flex:1; }
.db-search-wrap::before { content:'🔍'; position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:0.85rem; pointer-events:none; }
/* Client card */
.client-card { background:var(--s2); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; display:flex; align-items:center; gap:12px; transition:all 0.15s; }
.client-card:hover { border-color:var(--border2); }
.client-avatar { width:38px; height:38px; border-radius:50%; background:rgba(79,158,255,0.15); border:1px solid rgba(79,158,255,0.3); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.client-info { flex:1; min-width:0; }
.client-name { font-size:0.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.client-meta { font-size:0.7rem; color:var(--muted); margin-top:2px; display:flex; gap:10px; flex-wrap:wrap; }
.client-barcode { font-family:var(--mono); font-size:0.68rem; color:var(--accent); }
/* Client scan button in POS */
.client-scan-btn { background:var(--s2); border:1px solid var(--border); color:var(--muted); border-radius:var(--radius); padding:6px 10px; font-size:0.78rem; font-weight:700; cursor:pointer; transition:all 0.15s; white-space:nowrap; flex-shrink:0; }
.client-scan-btn:hover { border-color:var(--purple); color:var(--purple); }
.client-badge { display:flex; align-items:center; gap:6px; padding:5px 10px; background:rgba(79,158,255,0.08); border:1px solid rgba(79,158,255,0.2); border-radius:8px; font-size:0.78rem; flex:1; min-width:0; }
.client-badge .cb-name { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.client-badge .cb-clear { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:0.85rem; flex-shrink:0; padding:0 2px; }
.client-badge .cb-clear:hover { color:var(--red); }
/* Inventory search bar enhancements */
.inv-search-wrap { position:relative; flex:1; }
.inv-search-wrap::before { content:'🔍'; position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:0.85rem; pointer-events:none; }
.inv-search-wrap input { padding-left:34px !important; }
/* Datos tab search bars */
.section-search-wrap { position:relative; }
.section-search-wrap::before { content:'🔍'; position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:0.82rem; pointer-events:none; }
.section-search-wrap input { padding-left:34px !important; width:100%; background:var(--s2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); padding:8px 14px 8px 34px; font-size:0.82rem; outline:none; transition:border 0.15s; }
.section-search-wrap input:focus { border-color:var(--accent); }
.excel-card{
background:var(--s2);border:1px solid var(--border);
border-radius:var(--radius);padding:18px;
}
.excel-card h4{font-size:0.85rem;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:7px;}
.excel-card p{font-size:0.75rem;color:var(--muted);margin-bottom:14px;line-height:1.4;}
.excel-card .import-zone{
border:2px dashed var(--border2);border-radius:8px;
padding:20px;text-align:center;font-size:0.78rem;color:var(--muted);
cursor:pointer;transition:all 0.15s;
}
.excel-card .import-zone:hover{border-color:var(--accent);color:var(--accent);}
/* PAYMENT MODAL */
.pay-modal-box{width:480px;}
.pm-total{font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--green);margin:8px 0 14px;}
.pay-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.pm-card{background:var(--s2);border:2px solid var(--border);border-radius:10px;padding:11px;text-align:center;transition:all 0.15s;cursor:pointer;}
.pm-card:hover,.pm-card.active{border-color:var(--green);background:var(--green-glow);}
.pm-icon{font-size:1.6rem;display:block;margin-bottom:4px;}
.pm-label{font-size:0.78rem;font-weight:700;}
.pm-desc{font-size:0.65rem;color:var(--muted);}
.cash-panel{background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:14px;}
.cash-panel .cp-label{font-size:0.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;}
.quick-amounts{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
.qa-btn{background:var(--s1);border:1px solid var(--border);color:var(--muted);font-family:var(--mono);font-size:0.78rem;padding:5px 10px;border-radius:7px;transition:all 0.12s;}
.qa-btn:hover{border-color:var(--accent);color:var(--accent);}
.cash-input-wrap{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--s1);}
.cash-input-wrap span{padding:0 10px;color:var(--muted);font-weight:700;}
.cash-input-wrap input{flex:1;background:transparent;border:none;color:var(--text);padding:10px 8px 10px 0;font-size:1.1rem;font-family:var(--mono);outline:none;}
.change-box{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;margin-top:10px;}
.change-box.ok{background:var(--green-glow);border:1px solid rgba(34,201,122,0.3);}
.change-box.bad{background:rgba(255,77,109,0.08);border:1px solid rgba(255,77,109,0.3);}
.change-box .cb-label{font-size:0.8rem;}
.change-box.ok .cb-label{color:var(--green);}
.change-box.bad .cb-label{color:var(--red);}
.change-box .cb-value{font-family:var(--mono);font-size:1.2rem;font-weight:700;}
.change-box.ok .cb-value{color:var(--green);}
.change-box.bad .cb-value{color:var(--red);}
/* Botón Cobrar: SIEMPRE visible aunque el modal tenga scroll (se pega al fondo).
Así el cajero nunca tiene que buscar/scrollear para cobrar. */
.pm-confirm-btn{width:100%;padding:15px;background:var(--green);border:none;border-radius:var(--radius);color:#fff;font-family:var(--font);font-size:1.05rem;font-weight:800;transition:background 0.15s,box-shadow 0.15s;position:sticky;bottom:0;margin-top:10px;box-shadow:0 -14px 16px -8px var(--s1);}
.pm-confirm-btn:hover{background:#2edda0;box-shadow:0 0 20px var(--green-glow);}
.pm-confirm-btn:disabled{opacity:0.35;pointer-events:none;}
/* SUCCESS */
.success-flash{
position:fixed;inset:0;background:rgba(0,0,0,0.92);
display:flex;flex-direction:column;align-items:center;justify-content:center;
z-index:400;opacity:0;pointer-events:none;transition:opacity 0.25s;text-align:center;
}
.success-flash.open{opacity:1;pointer-events:all;}
.sf-icon{font-size:5rem;animation:popIn 0.4s ease;margin-bottom:16px;}
@keyframes popIn{0%{transform:scale(0) rotate(-10deg);}70%{transform:scale(1.15);}100%{transform:scale(1) rotate(0);}}
.sf-title{font-size:2rem;font-weight:900;color:var(--green);margin-bottom:6px;}
.sf-method{font-size:0.88rem;color:var(--muted);margin-bottom:20px;}
.sf-change{font-family:var(--mono);font-size:3rem;font-weight:700;color:var(--accent);}
.sf-change-label{font-size:0.82rem;color:var(--muted);margin-bottom:28px;}
.sf-new-btn{background:var(--green);border:none;color:#fff;font-family:var(--font);font-size:1rem;font-weight:800;padding:16px 40px;border-radius:var(--radius);transition:all 0.15s;}
.sf-new-btn:hover{background:#2edda0;}
/* TOAST */
.toast{
position:fixed;top:26px;left:50%;
background:var(--s1);border:3px solid var(--border);
border-radius:18px;padding:24px 38px;font-size:1.5rem;font-weight:800;
max-width:90vw;text-align:center;line-height:1.3;
box-shadow:0 26px 70px rgba(0,0,0,0.5);
z-index:2147483600;transform:translate(-50%,-40px);opacity:0;
transition:all 0.25s;pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1;}
.toast.success{border-color:var(--green);color:var(--green);}
.toast.error{border-color:var(--red);color:var(--red);}
.toast.info{border-color:var(--accent);color:var(--accent);}
/* RESTRICT BANNER */
.restrict-banner{
background:rgba(255,77,109,0.08);border:1px solid rgba(255,77,109,0.25);
border-radius:10px;padding:14px 18px;margin:16px 20px;
font-size:0.82rem;color:var(--red);display:flex;align-items:center;gap:10px;
}
/* USER MODAL */
.user-modal-box{width:400px;}
/* ══ PROMO TAB ══ */
#tabPromo{display:none;overflow-y:auto;}
#tabPromo.active{display:flex;}
.promo-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;height:100%;}
.promo-col{display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden;}
.promo-col:last-child{border-right:none;}
.promo-col-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.promo-col-header h2{font-size:1.05rem;font-weight:800;}
.promo-list{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px;}
/* Promo card */
.promo-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;position:relative;overflow:hidden;}
.promo-card.inactive{opacity:0.5;}
.promo-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;}
.promo-card.pct::before{background:var(--accent);}
.promo-card.fixed::before{background:var(--green);}
.promo-card.x21::before,.promo-card.x32::before{background:var(--purple);}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.pc-name{font-weight:800;font-size:0.92rem;}
.pc-badge{font-size:0.7rem;font-weight:700;padding:2px 8px;border-radius:20px;}
.pc-badge.pct{background:rgba(79,158,255,0.15);color:var(--accent);}
.pc-badge.fixed{background:rgba(34,201,122,0.12);color:var(--green);}
.pc-badge.x21,.pc-badge.x32{background:rgba(155,114,255,0.15);color:var(--purple);}
.pc-meta{font-size:0.75rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;}
.pc-actions{display:flex;gap:6px;margin-top:10px;}
/* Coupon card */
.coupon-card{
background:var(--s2);border:2px dashed var(--border2);border-radius:var(--radius);
padding:14px;position:relative;
}
.coupon-card.inactive{opacity:0.5;}
.coupon-code{font-family:var(--mono);font-size:1.1rem;font-weight:800;color:var(--yellow);letter-spacing:3px;margin-bottom:4px;}
.coupon-discount{font-size:0.82rem;color:var(--muted);}
.coupon-meta{font-size:0.72rem;color:var(--muted2);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;}
.coupon-uses{
position:absolute;top:10px;right:10px;
background:rgba(79,158,255,0.12);border:1px solid rgba(79,158,255,0.25);
color:var(--accent);font-size:0.68rem;font-weight:700;
padding:2px 7px;border-radius:20px;
}
.coupon-actions{display:flex;gap:6px;margin-top:10px;}
/* ══ PRINT COUPONS ══ */
/* print handled via separate window — no @media print override needed here */
#couponPrintDoc { display: none; }
/* ══ COUPON INPUT REDESIGN ══ */
.coupon-row {
display: flex;
gap: 0;
background: var(--s2);
border: 1.5px solid var(--border2);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
margin: 6px 0;
}
.coupon-row:focus-within {
border-color: var(--yellow);
box-shadow: 0 0 0 3px rgba(245,200,66,0.12);
}
.coupon-row input {
flex: 1;
background: transparent;
border: none;
color: var(--text);
padding: 9px 12px;
font-size: 0.88rem;
font-family: var(--mono);
font-weight: 700;
letter-spacing: 1.5px;
outline: none;
min-width: 0;
}
.coupon-row input::placeholder { color: var(--muted2); font-weight: 400; letter-spacing: 0; font-family: var(--font); }
.apply-coupon-btn {
background: linear-gradient(135deg, rgba(245,200,66,0.18), rgba(245,200,66,0.1));
border: none;
border-left: 1px solid var(--border2);
color: var(--yellow);
font-family: var(--font);
font-size: 0.75rem;
font-weight: 800;
padding: 0 14px;
cursor: pointer;
transition: all 0.15s;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.apply-coupon-btn:hover {
background: rgba(245,200,66,0.25);
color: #ffe066;
}
.coupon-row-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.68rem;
font-weight: 800;
color: var(--yellow);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 3px;
opacity: 0.85;
}
/* ══ PANEL CANCEL BUTTON (tab arrow) ══ */
.tab-cancel-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255,77,109,0.08);
border: 1px solid rgba(255,77,109,0.2);
color: var(--muted);
font-family: var(--font);
font-size: 0.72rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
margin-left: auto;
}
.tab-cancel-btn:hover {
background: rgba(255,77,109,0.15);
border-color: var(--red);
color: var(--red);
}
/* ══ COUPON QTY SELECTOR ══ */
.coupon-qty-wrap {
display: flex;
align-items: center;
gap: 10px;
background: var(--s2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 14px;
margin-bottom: 10px;
}
.coupon-qty-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); flex: 1; }
.coupon-qty-label span { color: var(--text); }
.cq-btn {
width: 28px; height: 28px;
background: var(--s3);
border: 1px solid var(--border2);
border-radius: 6px;
color: var(--text);
font-size: 1rem;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.12s;
flex-shrink: 0;
}
.cq-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cq-btn:active { transform: scale(0.9); }
.cq-input {
width: 46px;
text-align: center;
background: var(--s1);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-family: var(--mono);
font-size: 0.92rem;
font-weight: 800;
padding: 4px 6px;
outline: none;
transition: border 0.15s;
}
.cq-input:focus { border-color: var(--accent); }
/* remove arrows from number input */
.cq-input::-webkit-inner-spin-button,
.cq-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.cq-input[type=number] { -moz-appearance: textfield; }
/* ══ INVENTORY IMPROVEMENTS ══ */
.inv-filter-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px 8px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
background: var(--s1);
}
.inv-filter-select {
background: var(--s2);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
padding: 5px 10px;
font-size: 0.78rem;
font-family: var(--font);
font-weight: 600;
outline: none;
cursor: pointer;
transition: border 0.15s;
min-width: 120px;
}
.inv-filter-select:focus { border-color: var(--accent); }
.inv-filter-label { font-size: 0.7rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.inv-stats-bar {
display: flex;
gap: 10px;
padding: 5px 12px;
border-bottom: 1px solid var(--border);
background: var(--s1);
flex-shrink: 0;
}
.inv-stat-chip {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
font-weight: 700;
color: var(--muted);
background: var(--s2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 3px 9px;
}
.inv-stat-chip.ok { color: var(--green); border-color: rgba(34,201,122,0.3); background: rgba(34,201,122,0.06); }
.inv-stat-chip.warn { color: var(--yellow); border-color: rgba(245,200,66,0.3); background: rgba(245,200,66,0.06); }
.inv-stat-chip.err { color: var(--red); border-color: rgba(255,77,109,0.3); background: rgba(255,77,109,0.06); }
/* ══ BULK SELECTION ══ */
.bulk-bar{
display:none;align-items:center;gap:12px;
padding:8px 16px;background:rgba(255,77,109,0.07);
border-bottom:1px solid rgba(255,77,109,0.2);
font-size:0.82rem;font-weight:700;color:var(--red);flex-shrink:0;
}
.bulk-bar.show{display:flex;}
.bulk-bar span{flex:1;}
.bulk-check{width:17px;height:17px;accent-color:var(--red);cursor:pointer;}
.select-col{width:36px;}
/* ══ SCANNER OVERLAY — MEJORADO ══ */
.scanner-overlay{
position:fixed;inset:0;background:rgba(0,0,0,0.92);
z-index:300;display:flex;align-items:center;justify-content:center;
opacity:0;pointer-events:none;transition:opacity 0.2s;
}
.scanner-overlay.open{opacity:1;pointer-events:all;}
.scanner-box{
background:var(--s1);border:1px solid var(--border2);
border-radius:20px;padding:24px;width:520px;max-width:95vw;
box-shadow:0 24px 80px rgba(0,0,0,0.8);
}
.scanner-box h3{font-size:1.1rem;font-weight:800;margin-bottom:4px;}
.scanner-box > p{font-size:0.78rem;color:var(--muted);margin-bottom:14px;}
/* Mode tabs */
.scanner-mode-tabs{display:flex;gap:6px;margin-bottom:14px;background:var(--s2);border-radius:10px;padding:4px;}
.smt-btn{
flex:1;background:transparent;border:none;color:var(--muted);
font-family:var(--font);font-size:0.78rem;font-weight:700;
padding:7px 10px;border-radius:8px;transition:all 0.15s;cursor:pointer;
}
.smt-btn.active{background:var(--accent);color:#fff;}
.smt-btn:hover:not(.active){background:var(--s3);color:var(--text);}
/* Camera viewport */
#scannerViewport{
width:100%;height:220px;background:#000;border-radius:12px;
overflow:hidden;position:relative;margin-bottom:12px;
}
#scannerViewport video{width:100%;height:100%;object-fit:cover;}
#scannerViewport canvas{position:absolute;top:0;left:0;width:100%;height:100%;}
.scan-laser{
position:absolute;left:10%;right:10%;top:50%;height:2px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
border-radius:2px;box-shadow:0 0 8px var(--accent);
animation:laserScan 2s ease-in-out infinite;z-index:10;
pointer-events:none;
}
@keyframes laserScan{0%,100%{top:30%;opacity:1;}50%{top:70%;opacity:0.7;}}
.scan-corners{position:absolute;inset:12px;pointer-events:none;z-index:10;}
.scan-corners::before,.scan-corners::after,
.scan-corners span::before,.scan-corners span::after{
content:'';position:absolute;width:20px;height:20px;
border-color:var(--accent);border-style:solid;
}
.scan-corners::before{top:0;left:0;border-width:3px 0 0 3px;border-radius:4px 0 0 0;}
.scan-corners::after{top:0;right:0;border-width:3px 3px 0 0;border-radius:0 4px 0 0;}
.scan-corners span::before{bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 4px;}
.scan-corners span::after{bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 4px 0;}
/* HID / USB scanner status */
.hid-status{
display:flex;align-items:center;gap:8px;
background:var(--s2);border:1px solid var(--border);
border-radius:8px;padding:8px 12px;margin-bottom:10px;
font-size:0.78rem;
}
.hid-dot{width:8px;height:8px;border-radius:50%;background:var(--muted2);flex-shrink:0;transition:background 0.3s;}
.hid-dot.active{background:var(--green);box-shadow:0 0 6px var(--green);}
.hid-dot.waiting{background:var(--yellow);animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.hid-info{flex:1;}
.hid-info strong{display:block;font-weight:700;color:var(--text);}
.hid-info span{color:var(--muted);font-size:0.72rem;}
.hid-connect-btn{
background:rgba(79,158,255,0.1);border:1px solid rgba(79,158,255,0.3);
color:var(--accent);font-size:0.72rem;font-weight:700;
padding:5px 10px;border-radius:6px;cursor:pointer;transition:all 0.15s;
}
.hid-connect-btn:hover{background:rgba(79,158,255,0.2);}
/* Scan result */
.scan-result{
display:none;align-items:center;gap:12px;
background:var(--s2);border:1px solid var(--border);
border-radius:10px;padding:12px 14px;margin-bottom:10px;
}
.scan-result.found{border-color:rgba(34,201,122,0.4);background:rgba(34,201,122,0.06);}
.scan-result.notfound{border-color:rgba(245,200,66,0.4);background:rgba(245,200,66,0.05);}
.scan-result-icon{font-size:2rem;flex-shrink:0;}
.scan-result-info{flex:1;min-width:0;}
.sr-code{font-family:var(--mono);font-size:0.75rem;color:var(--muted);margin-bottom:3px;}
.sr-name{font-size:0.88rem;font-weight:700;}
.sr-stock{font-size:0.75rem;color:var(--muted);margin-top:2px;}
/* Quick stock add (scanner mode inv) */
.quick-stock-add{
display:none;
background:rgba(34,201,122,0.07);border:1px solid rgba(34,201,122,0.25);
border-radius:10px;padding:12px 14px;margin-bottom:10px;
}
.qsa-label{font-size:0.78rem;font-weight:700;color:var(--green);margin-bottom:8px;}
.qsa-row{display:flex;gap:8px;align-items:center;}
.qsa-row input{
flex:1;background:var(--s2);border:1px solid var(--border);
border-radius:8px;color:var(--text);padding:8px 12px;
font-size:1rem;font-family:var(--mono);font-weight:700;outline:none;
text-align:center;transition:border 0.15s;
}
.qsa-row input:focus{border-color:var(--green);}
.qsa-qbtns{display:flex;gap:4px;}
.qsa-qbtn{
background:var(--s2);border:1px solid var(--border);color:var(--text);
width:34px;height:34px;border-radius:7px;font-size:0.82rem;font-weight:700;
display:flex;align-items:center;justify-content:center;cursor:pointer;
transition:all 0.12s;
}
.qsa-qbtn:hover{background:var(--green);border-color:var(--green);color:#fff;}
.qsa-confirm{
background:var(--green);border:none;color:#fff;
font-family:var(--font);font-size:0.88rem;font-weight:800;
padding:8px 16px;border-radius:8px;cursor:pointer;transition:all 0.15s;white-space:nowrap;
}
.qsa-confirm:hover{background:#2edda0;}
/* Continuous mode toggle */
.scan-continuous{
display:flex;align-items:center;gap:8px;
font-size:0.75rem;color:var(--muted);margin-bottom:10px;cursor:pointer;
}
.scan-continuous input{accent-color:var(--accent);width:15px;height:15px;}
/* Manual input */
.manual-barcode{display:flex;gap:8px;margin-bottom:10px;}
.manual-barcode input{
flex:1;background:var(--s2);border:1px solid var(--border);
border-radius:8px;color:var(--text);padding:9px 12px;
font-size:0.88rem;font-family:var(--mono);outline:none;transition:border 0.15s;
}
.manual-barcode input:focus{border-color:var(--accent);}
.scanner-btns{display:flex;gap:8px;}
.scanner-history{
margin-top:10px;max-height:80px;overflow-y:auto;
}
.sh-item{
display:flex;justify-content:space-between;align-items:center;
padding:4px 8px;font-size:0.72rem;border-radius:5px;
background:var(--s2);margin-bottom:3px;cursor:pointer;
transition:background 0.1s;
}
.sh-item:hover{background:var(--s3);}
.sh-code{font-family:var(--mono);color:var(--muted);}
.sh-name{color:var(--text);font-weight:600;}
/* ══ BARCODE GENERATOR (Admin) ══ */
.barcode-gen-section{
background:var(--s2);border:1px solid var(--border);
border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;
}
.barcode-gen-section h3{font-size:1rem;font-weight:800;margin-bottom:4px;}
.barcode-gen-section > p{font-size:0.78rem;color:var(--muted);margin-bottom:16px;}
.bg-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.bg-field{display:flex;flex-direction:column;gap:4px;}
.bg-field.full{grid-column:1/-1;}
.bg-field label{font-size:0.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.4px;}
.bg-field input,.bg-field select{
background:var(--s1);border:1px solid var(--border);
border-radius:8px;color:var(--text);padding:8px 12px;
font-size:0.88rem;font-family:var(--font);outline:none;transition:border 0.15s;
}
.bg-field input:focus,.bg-field select:focus{border-color:var(--accent);}
.bg-preview{
background:#fff;border-radius:10px;padding:16px;
display:flex;flex-direction:column;align-items:center;
gap:10px;min-height:120px;justify-content:center;
border:2px dashed var(--border2);transition:border 0.2s;
}
.bg-preview.has-code{border-style:solid;border-color:var(--border);}
.bg-preview-label{font-size:0.72rem;color:#999;font-style:italic;}
.bg-preview svg{max-width:100%;}
.bg-preview-name{font-size:0.8rem;color:#333;font-weight:700;text-align:center;font-family:sans-serif;}
.bg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px;}
.bg-card{
background:var(--s1);border:1px solid var(--border);
border-radius:10px;padding:12px;cursor:pointer;transition:all 0.15s;
position:relative;
}
.bg-card:hover{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);}
.bg-card .bc-barcode{background:#fff;border-radius:6px;padding:8px 6px;margin-bottom:6px;display:flex;justify-content:center;}
.bg-card .bc-barcode svg{max-width:100%;height:50px;}
.bg-card .bc-name{font-size:0.78rem;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bg-card .bc-code{font-family:var(--mono);font-size:0.65rem;color:var(--muted);}
.bg-card .bc-actions{display:flex;gap:5px;margin-top:6px;}
.bg-card-del{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted2);cursor:pointer;font-size:0.85rem;transition:color 0.1s;}
.bg-card-del:hover{color:var(--red);}
.print-barcodes-btn{
background:rgba(79,158,255,0.12);border:1px solid rgba(79,158,255,0.3);
color:var(--accent);font-size:0.82rem;font-weight:700;
padding:8px 16px;border-radius:8px;cursor:pointer;transition:all 0.15s;
display:inline-flex;align-items:center;gap:6px;
}
.print-barcodes-btn:hover{background:rgba(79,158,255,0.2);}
/* ══ TOPBAR STATS ══ */
.topbar-stat{
display:flex;align-items:center;gap:5px;
background:var(--s2);border:1px solid var(--border);
border-radius:8px;padding:4px 10px;font-size:0.75rem;font-weight:700;
}
.ts-icon{font-size:0.85rem;}
.topbar-stat.low-alert{border-color:rgba(245,200,66,0.4);cursor:pointer;}
.topbar-stat.low-alert:hover{background:rgba(245,200,66,0.08);}
.theme-toggle-btn{
background:var(--s2);border:1px solid var(--border);
border-radius:8px;padding:4px 10px;font-size:0.95rem;cursor:pointer;
transition:all 0.15s;line-height:1;
}
.theme-toggle-btn:hover{background:var(--s3);}
/* ══ PRINT BARCODES ══ */
#barcodePrintDoc{display:none;}
/* Hide shortcuts */
#quickShortcutsWrap { display: none !important; }
/* New module tabs use standard .tab-content CSS */
/* ── CARD PANEL ── */
.card-visual{
background:linear-gradient(135deg,#1a1f35,#2d3561);
border-radius:14px;padding:18px 20px;margin-bottom:14px;
position:relative;overflow:hidden;min-height:130px;
}
.card-visual::before{
content:'';position:absolute;top:-40px;right:-40px;
width:150px;height:150px;border-radius:50%;
background:rgba(79,158,255,0.12);
}
.card-visual::after{
content:'';position:absolute;bottom:-30px;left:60px;
width:100px;height:100px;border-radius:50%;
background:rgba(155,114,255,0.1);
}
.cv-chip{font-size:1.4rem;margin-bottom:10px;display:block;}
.cv-number{font-family:var(--mono);font-size:1.1rem;letter-spacing:3px;color:#fff;margin-bottom:10px;word-spacing:8px;}
.cv-bottom{display:flex;justify-content:space-between;align-items:flex-end;}
.cv-label{font-size:0.6rem;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.5px;}
.cv-value{font-size:0.82rem;color:#fff;font-weight:600;}
.card-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.cf-full{grid-column:1/-1;}
.cf-label{font-size:0.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;display:block;margin-bottom:5px;}
.cf-input{
width:100%;background:var(--s2);border:1px solid var(--border);
border-radius:8px;color:var(--text);padding:9px 12px;
font-size:0.88rem;outline:none;font-family:var(--mono);
transition:border 0.15s;
}
.cf-input:focus{border-color:var(--accent);}
/* ── TRANSFER PANEL ── */
.transfer-panel{background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;}
.clabe-display{
font-family:var(--mono);font-size:1.05rem;letter-spacing:3px;
background:var(--s1);border:1px solid var(--border2);border-radius:8px;
padding:10px 14px;color:var(--accent);text-align:center;
margin:8px 0;cursor:pointer;transition:all 0.15s;word-spacing:6px;
}
.clabe-display:hover{border-color:var(--accent);}
.qr-mock{
width:100px;height:100px;margin:10px auto;
background:white;border-radius:8px;display:flex;align-items:center;
justify-content:center;font-size:0.65rem;color:#333;text-align:center;
padding:6px;line-height:1.3;position:relative;overflow:hidden;
}
.qr-grid{
display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);
width:84px;height:84px;gap:1px;
}
.qr-cell{border-radius:1px;}
.spei-confirm{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;
background:rgba(34,201,122,0.08);border:1px solid rgba(34,201,122,0.2);margin-top:10px;}
.spei-confirm input{width:18px;height:18px;accent-color:var(--green);cursor:pointer;}
.spei-confirm label{font-size:0.82rem;color:var(--muted);cursor:pointer;}
/* ── VALES PANEL ── */
.vales-panel{background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;}
.vale-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.vale-row input{flex:1;background:var(--s1);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 12px;font-size:0.88rem;outline:none;font-family:var(--mono);}
.vale-row input:focus{border-color:var(--yellow);}
.add-vale-btn{background:rgba(245,200,66,0.12);border:1px solid rgba(245,200,66,0.3);color:var(--yellow);padding:8px 12px;border-radius:8px;font-size:0.82rem;font-weight:700;transition:all 0.15s;white-space:nowrap;}
.add-vale-btn:hover{background:rgba(245,200,66,0.2);}
.vales-list{max-height:100px;overflow-y:auto;}
.vale-item{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;border-radius:6px;background:var(--s1);margin-bottom:4px;font-size:0.82rem;}
.vale-item span{font-family:var(--mono);color:var(--yellow);}
.vale-del{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:0.85rem;}
.vale-del:hover{color:var(--red);}
.vales-total-row{display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid var(--border);margin-top:6px;font-size:0.82rem;}
.vales-total-row .vt-val{font-family:var(--mono);color:var(--yellow);font-weight:700;}
.vales-total-row .vt-rest{font-family:var(--mono);}
.vt-rest.ok{color:var(--green);}
.vt-rest.bad{color:var(--red);}
/* Terminal dot animation */
.terminal-dot-anim {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
animation: termPulse 1.2s ease-in-out infinite;
display: inline-block;
}
@keyframes termPulse {
0%,100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
/* Plan modals */
#plansModal.open, #upgradeModal.open { display: flex !important; }
/* App modals (hidden by default, flex when .open) */
.app-modal { display: none; }
.app-modal.open { display: flex; }
/* Thermal width button toggle */
.thermal-btn.active { border-color:var(--accent)!important; background:rgba(79,158,255,0.1)!important; color:var(--accent)!important; }
/* ══════════════════════════════════════════════════════════════
RESPONSIVE — MOBILE (≤768px)
══════════════════════════════════════════════════════════════ */
/* ── Hamburger button (only on mobile) ── */
.hamburger-btn {
display: none;
background: none;
border: 1px solid var(--border);
color: var(--text);
font-size: 1.1rem;
width: 36px; height: 36px;
border-radius: 8px;
cursor: pointer;
flex-shrink: 0;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.hamburger-btn:hover { border-color: var(--accent); color: var(--accent); }
/* ── Sidebar overlay backdrop ── */
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
z-index: 39;
backdrop-filter: blur(2px);
}
/* ── Floating cart button (POS mobile) ── */
.mobile-cart-fab {
position: fixed;
bottom: 20px; left: 50%; transform: translateX(-50%);
z-index: 90;
background: var(--accent);
color: #fff;
border: none;
border-radius: 50px;
padding: 13px 28px;
font-family: var(--font);
font-size: 0.95rem;
font-weight: 800;
box-shadow: 0 4px 20px var(--accent-glow);
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
}
.mobile-cart-fab:hover { background: #6aadff; transform: translateX(-50%) translateY(-2px); }
@media (max-width: 768px) {
/* ── Show hamburger, hide desktop stats ── */
.hamburger-btn { display: flex; }
.topbar-stat, .clock-display { display: none !important; }
.topbar { gap: 8px; padding: 0 10px; }
.topbar-logo { font-size: 0.9rem; }
.user-info .u-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#planBadge { display: none !important; }
.logout-btn { font-size: 0; padding: 6px 8px; }
.logout-btn::after { content: '→'; font-size: 0.9rem; }
/* ── Sidebar: hidden by default, slide in as overlay ── */
.sidebar {
position: fixed !important;
top: 50px; left: 0; bottom: 0;
width: 220px !important;
transform: translateX(-100%);
z-index: 40;
transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
box-shadow: 4px 0 20px rgba(0,0,0,0.4);
}
.sidebar.mobile-open {
transform: translateX(0);
}
.sidebar-overlay.mobile-open { display: block; }
.sidebar-toggle { display: none; }
.sidebar.collapsed { width: 220px !important; transform: translateX(-100%); }
.sidebar.collapsed.mobile-open { transform: translateX(0); }
.sidebar.collapsed .nb-label { opacity: 1; }
.sidebar.collapsed .nav-group-label { opacity: 1; max-height: 24px; padding-bottom: 5px; }
/* ── POS layout: stack vertically ── */
#tabPOS.active {
display: flex !important;
flex-direction: column;
position: relative;
}
.pos-left { flex: 1; overflow: hidden; border-right: none !important; border-bottom: 1px solid var(--border); }
.pos-right {
position: fixed !important;
inset: 0;
z-index: 85;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-radius: 16px 16px 0 0;
top: auto !important;
height: 85vh;
height: 85dvh;
padding-bottom: env(safe-area-inset-bottom, 0px);
box-shadow: 0 -4px 30px rgba(0,0,0,0.5);
}
.pos-right.mobile-open {
transform: translateY(0);
}
.mobile-cart-fab { display: flex !important; align-items: center; gap: 8px; }
.mobile-cart-fab.hidden { display: none !important; }
/* ── Modals: always fit screen ── */
.modal-box,
.pay-modal-box,
.user-modal-box,
.scanner-box { width: 95vw !important; max-width: 95vw !important; }
.modal-overlay { align-items: flex-end; padding: 0; }
.modal-box, .pay-modal-box, .user-modal-box { border-radius: 16px 16px 0 0; margin: 0; max-height: 90vh; overflow-y: auto; }
/* ── 2-column grids → 1 column ── */
.form-grid { grid-template-columns: 1fr !important; }
.pay-method-grid { grid-template-columns: 1fr 1fr; } /* keep 2 for pay methods, they're small */
.promo-layout { grid-template-columns: 1fr !important; height: auto; }
.promo-col { border-right: none !important; border-bottom: 1px solid var(--border); max-height: 50vh; }
.promo-col:last-child { border-bottom: none; }
/* ── Tables: horizontal scroll ── */
.inv-table-wrap, .sales-table-wrap, .compras-table-wrap,
.analisis-table, .contabilidad-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
table { min-width: 600px; }
/* ── Inventory/other tabs ── */
.corte-wrap, .config-wrap, .terminal-wrap { padding: 12px; }
.corte-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-value { font-size: 1.2rem; }
/* ── Toast: bottom-center ── */
.toast { left: 50%; top: 16px; font-size: 1.25rem; padding: 18px 22px; transform: translate(-50%, -40px); }
.toast.show { transform: translate(-50%, 0); }
/* ── Login card ── */
.login-card { padding: 28px 20px !important; }
/* ── Plans modal ── */
.plans-grid { grid-template-columns: 1fr !important; gap: 12px; }
/* ── Marketing / Análisis tab ── */
.mkt-layout, .analisis-layout { flex-direction: column !important; }
/* ── Content area full width ── */
.content { width: 100%; }
/* ── Ticket close button for mobile ── */
.ticket-top { position: relative; }
}
/* ═══════════════════════════════════════════════════
MÓVIL — menos amontonado y más claro (SOLO celular)
No toca la versión de escritorio.
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Barra superior: deja lo esencial, sin que se encime ni se corte */
#onlineStatus { font-size: 0 !important; padding: 6px 7px !important; }
#onlineStatus span { font-size: 0.85rem; } /* conserva el punto verde/rojo */
.user-pill .u-role { display: none; } /* el rol sobra en celular */
.user-pill { padding: 3px 8px 3px 3px; }
.user-info .u-name { max-width: 96px; }
/* Botón de tutorial: solo "?" (el texto largo amontonaba la barra) */
#tourHelpBtn { font-size: 0 !important; padding: 8px 12px !important; line-height: 0; }
#tourHelpBtn::before { content: '?'; font-size: 1.05rem; font-weight: 800; line-height: 1; }
/* Caja: buscador a todo lo ancho y botones grandes debajo */
.pos-search { flex-wrap: wrap; padding: 10px; gap: 8px; }
.pos-search input { flex: 1 1 100%; min-height: 46px; font-size: 1rem; }
.pos-search > div { display: none; } /* oculta la insignia "Pistola activa" (el escáner sigue activo) */
.pos-search .barcode-scan-btn { flex: 1; min-height: 42px; }
/* Filtros: que se VEAN TODOS (envueltos), sin scroll escondido que confunde */
.pos-filter-row { flex-wrap: wrap; overflow-x: visible; gap: 8px; padding: 10px 12px; }
.cat-pill, .pos-filter-row > button { min-height: 38px; padding: 8px 14px; font-size: 0.84rem; }
.filter-row-label { width: 100%; margin: 0 0 2px; }
/* Sub-pestañas (Datos, Contabilidad, Análisis…): deslizables, no cortadas a la fuerza */
.db-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 420px) {
.pay-method-grid { grid-template-columns: 1fr; }
.corte-stats { grid-template-columns: 1fr; }
.products-area { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 10px; }
.corte-header { flex-direction: column; align-items: flex-start; }
.corte-header > div:last-child { width: 100%; display: flex; gap: 6px; }
.corte-header > div:last-child button { flex: 1; font-size: 0.78rem; padding: 7px 6px; }
.db-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.db-tab-btn { white-space: nowrap; flex-shrink: 0; font-size: 0.75rem; padding: 7px 11px; }
.config-section-header { flex-wrap: wrap; gap: 8px; }
.config-section-header h3 { font-size: 0.88rem; }
.topbar-logo { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corte-sections { grid-template-columns: 1fr; }
}
/* ── Tablet (769px – 1024px) ─────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
.sidebar { width: 180px !important; }
.sidebar .nb-label { font-size: 0.78rem; }
.pos-left { min-width: 0; }
.products-area { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.corte-stats { grid-template-columns: 1fr 1fr; }
.corte-sections { flex-direction: column; gap: 10px; }
.modal-box, .pay-modal-box, .user-modal-box { max-width: 92vw; }
.config-wrap { padding: 16px; }
.admin-grid { gap: 12px; }
.db-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.db-tab-btn { white-space: nowrap; flex-shrink: 0; }
}
/* ── Emoji visibility toggles ──────────────────────── */
.no-prod-emojis .prod-emoji { display: none !important; }
.no-prod-emojis .prod-card { padding-top: 10px !important; }
/* Toggle switch visual */
#uiEmojisToggle, #prodEmojisToggle {
position: relative;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
}
#uiEmojisToggle::after, #prodEmojisToggle::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 14px; height: 14px;
border-radius: 50%;
background: #fff;
transition: transform 0.2s;
}
#uiEmojisToggle:checked::after, #prodEmojisToggle:checked::after { transform: translateX(16px); }
#uiEmojisToggle, #prodEmojisToggle { background: var(--border) !important; }
#uiEmojisToggle:checked, #prodEmojisToggle:checked { background: var(--accent) !important; }
/* ── Responsive: all tabs full-width on small screens ── */
@media (max-width: 768px) {
.corte-sections { flex-direction: column; gap: 10px; }
.cs-panel { min-width: unset; width: 100%; }
}
@keyframes tourPulseAnim {
0% { opacity: 1; transform: scale(1); }
70% { opacity: 0; transform: scale(1.08); }
100% { opacity: 0; transform: scale(1.08); }
}
/* Botones rápidos de peso en el modal de báscula */
.weight-quick {
background: var(--s2);
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
padding: 7px 14px;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
font-family: var(--font);
transition: all 0.15s;
}
.weight-quick:hover { border-color: var(--accent); color: var(--accent); }
/* Resalta el botón "Tutorial de…" cuando el usuario sale del tour */
@keyframes tourHelpHintPulse {
0%, 100% { box-shadow: 0 0 0 0 var(--accent); }
50% { box-shadow: 0 0 0 6px transparent; }
}
.tour-help-hint {
animation: tourHelpHintPulse 0.85s ease-in-out 5;
border-color: var(--accent) !important;
color: var(--accent) !important;
background: var(--accent-glow) !important;
}
/* ═══════════════════════════════════════════════════════
HORARIOS DE TRABAJO — SCHEDULE CALENDAR
═══════════════════════════════════════════════════════ */
.sched-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 6px;
min-width: 560px;
}
.sched-header-row th {
padding: 6px 8px;
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
background: transparent;
border-bottom: 2px solid var(--border);
text-align: center;
}
.sched-emp-th {
text-align: left !important;
min-width: 150px;
padding-left: 14px !important;
}
.sched-day-th { min-width: 110px; }
.sched-emp-row td { vertical-align: middle; }
.sched-emp-label-td {
background: var(--s2);
border-radius: 12px 0 0 12px;
border: 1px solid var(--border);
border-right: none;
white-space: nowrap;
}
.sched-emp-avatar {
width: 34px; height: 34px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.88rem; font-weight: 800; color: #fff;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.sched-emp-name {
font-size: 0.82rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
}
.sched-emp-total {
font-size: 0.7rem;
font-weight: 600;
margin-top: 1px;
}
.sched-cell {
padding: 5px 4px;
background: var(--s2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.12s;
}
.sched-cell:last-child {
border-radius: 0 12px 12px 0;
border-right: 1px solid var(--border);
}
.sched-cell:hover { background: var(--s3, var(--hover)); }
.sched-shift-card {
background: linear-gradient(135deg, var(--sc1), var(--sc2));
border-radius: 8px;
padding: 7px 8px 6px;
min-height: 56px;
display: flex;
flex-direction: column;
gap: 3px;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
transition: transform 0.12s, box-shadow 0.12s;
}
.sched-shift-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.sched-shift-times {
font-size: 0.73rem;
font-weight: 700;
color: #fff;
font-family: var(--mono);
letter-spacing: 0.01em;
}
.sched-shift-dur {
font-size: 0.65rem;
color: rgba(255,255,255,0.8);
font-weight: 600;
}
.sched-time-ruler {
position: relative;
height: 6px;
background: rgba(255,255,255,0.25);
border-radius: 3px;
overflow: hidden;
margin-top: 5px;
}
.sched-time-bar {
position: absolute;
top: 0; bottom: 0;
background: rgba(255,255,255,0.75);
border-radius: 3px;
min-width: 8px;
}
.sched-off-card {
border-radius: 8px;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed var(--border);
transition: border-color 0.12s, background 0.12s;
}
.sched-cell:hover .sched-off-card {
border-color: var(--accent);
background: var(--accent-glow);
}
.sched-off-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sched-ruler-hint {
margin-bottom: 10px;
padding: 8px 14px;
background: var(--s2);
border-radius: 10px;
border: 1px solid var(--border);
}
.sched-ruler-title {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
margin-bottom: 6px;
}
.sched-ruler-bar {
position: relative;
height: 8px;
background: var(--border);
border-radius: 4px;
}
.sched-ruler-tick {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
font-size: 0.6rem;
color: var(--muted);
font-family: var(--mono);
font-weight: 700;
white-space: nowrap;
line-height: 1;
}
.sched-ruler-tick::before {
content: '';
display: block;
width: 2px; height: 8px;
background: var(--muted);
margin: 0 auto 3px;
border-radius: 1px;
}
/* Schedule editor floating panel */
.sched-editor-panel {
width: min(380px, 92vw);
background: var(--s1);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
transform: scale(0.88);
opacity: 0;
transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), opacity 0.18s;
}
.sched-editor-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
}
.sched-editor-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.25);
display: flex; align-items: center; justify-content: center;
font-size: 1rem; font-weight: 800; color: #fff;
flex-shrink: 0;
border: 2px solid rgba(255,255,255,0.4);
}
.sched-editor-body {
padding: 18px 20px 20px;
}
.sched-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--s2);
border-radius: 12px;
border: 1px solid var(--border);
}
.sched-sw {
position: relative;
width: 42px; height: 24px;
flex-shrink: 0;
cursor: pointer;
}
.sched-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sched-sw-knob {
position: absolute;
inset: 0;
background: var(--border);
border-radius: 24px;
transition: background 0.2s;
}
.sched-sw-knob::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.sched-sw input:checked ~ .sched-sw-knob {
background: var(--ton, var(--accent));
}
.sched-sw input:checked ~ .sched-sw-knob::after {
transform: translateX(18px);
}
/* Responsive — schedule table */
@media (max-width: 768px) {
.sched-table { min-width: 460px; }
.sched-emp-th { min-width: 120px; }
.sched-day-th { min-width: 80px; }
.sched-emp-name { max-width: 95px; font-size: 0.78rem; }
.sched-shift-card { min-height: 48px; padding: 5px 6px; }
.sched-shift-times { font-size: 0.68rem; }
.sched-editor-panel { width: min(340px, 95vw); }
}
@media (max-width: 420px) {
.sched-table { min-width: 380px; }
.sched-day-th { min-width: 68px; }
.sched-emp-avatar { width: 28px; height: 28px; font-size: 0.76rem; }
.sched-emp-name { font-size: 0.74rem; max-width: 72px; }
.sched-emp-total { font-size: 0.64rem; }
.sched-shift-times { font-size: 0.62rem; }
.sched-shift-dur { display: none; }
.sched-shift-card { min-height: 42px; }
.sched-ruler-hint { display: none; }
.sched-editor-panel { border-radius: 14px; }
}
/* ── Checkboxes, radios y selectores de fecha/hora: aspecto consistente y temático ──
Los switches usan input oculto (.sched-sw) o estilo propio por id (#uiEmojisToggle),
así que solo tocamos accent-color/cursor para no romperlos. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); cursor: pointer; }
input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"] {
accent-color: var(--accent);
}
/* Día seleccionado y "Hoy" del calendario nativo toman el color de marca; el popup
ya hereda el color-scheme (claro/oscuro) del tema. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.7;
border-radius: 6px;
padding: 3px;
transition: opacity 0.15s, background 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
background: var(--accent-glow, rgba(79,158,255,0.18));
}
/* Inputs de fecha/hora que NO traen estilo en línea: alineados con el resto de la UI */
input[type="date"]:not([style]), input[type="time"]:not([style]),
input[type="month"]:not([style]), input[type="datetime-local"]:not([style]) {
background: var(--s2);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
padding: 10px 12px;
font-family: var(--font);
font-size: 0.9rem;
outline: none;
}
input[type="date"]:focus, input[type="time"]:focus,
input[type="month"]:focus, input[type="datetime-local"]:focus { border-color: var(--accent); }
/* ── Landing (pestaña inicial) — más vida y menos "plantilla" ── */
#landingScreen { position: relative; }
#landingScreen header, #landingScreen section, #landingScreen footer { position: relative; z-index: 1; }
.lp-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; pointer-events: none; z-index: 0; }
.lp-blob-1 { width: 420px; height: 420px; background: var(--accent); top: -120px; left: -80px; }
.lp-blob-2 { width: 360px; height: 360px; background: var(--purple); top: 320px; right: -120px; opacity: 0.35; }
.lp-blob-3 { width: 300px; height: 300px; background: var(--accent); bottom: 240px; left: -100px; opacity: 0.25; }
.lp-trust { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: center; padding: 6px 5vw 4px; }
.lp-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); font-weight: 600; }
.lp-trust svg { color: var(--green); flex-shrink: 0; }
.lp-quote { background: var(--s1); border: 1px solid var(--border); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.lp-quote-stars { color: #f5b301; font-size: 0.95rem; letter-spacing: 2px; }
.lp-quote p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--text); }
.lp-quote-who { display: flex; align-items: center; gap: 10px; }
.lp-quote-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex-shrink: 0; }
.lp-faq { background: var(--s1); border: 1px solid var(--border); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; transition: border-color .15s; }
.lp-faq[open] { border-color: var(--accent); }
.lp-faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.95rem; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; color: var(--accent); font-size: 1.4rem; font-weight: 800; line-height: 1; }
.lp-faq[open] summary::after { content: '−'; }
.lp-faq p { margin: 0 0 16px; color: var(--muted); font-size: 0.9rem; line-height: 1.65; }
/* ── Estabilidad visual (CLS): reservar espacio en la barra superior para que
no "salte" el layout cuando cargan los números, badges o el logo ── */
.topbar-stat { min-width: 62px; justify-content: center; }
.user-pill .u-name, .user-pill .u-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.user-pill { min-width: 0; }
#topbarLogoImg { width: 28px; height: 28px; flex: 0 0 28px; }
.nav-low-badge, .nav-cart-badge { min-width: 18px; text-align: center; }
#planBadge { min-width: 74px; text-align: center; }
/* ═══════════════════════════════════════════════════════
MÓVIL & TÁCTIL — barra inferior, áreas táctiles, safe-area
(mobile-first: primero celular, luego PC touch, tablet, mini)
═══════════════════════════════════════════════════════ */
.bottom-nav { display: none; }
@media (max-width: 768px) {
/* Barra de navegación inferior, estilo app */
.bottom-nav {
display: flex;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
background: var(--s1);
border-top: 1px solid var(--border);
padding-bottom: env(safe-area-inset-bottom, 0px);
box-shadow: 0 -2px 16px rgba(0,0,0,0.18);
}
.bnav-btn {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
background: none; border: none; cursor: pointer;
color: var(--muted); font-family: var(--font); font-size: 0.62rem; font-weight: 700;
padding: 8px 2px 7px; min-height: 56px; position: relative;
-webkit-tap-highlight-color: transparent;
}
.bnav-btn svg { width: 22px; height: 22px; }
.bnav-btn span:not(.bnav-badge) { line-height: 1; white-space: nowrap; }
.bnav-btn.active { color: var(--accent); }
.bnav-btn.active::after {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}
.bnav-btn:active { background: var(--s2); }
.bnav-badge {
position: absolute; top: 5px; left: calc(50% + 6px);
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
background: var(--accent); color: #fff; font-size: 0.56rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
/* Reservar espacio para que el contenido no quede tapado por la barra */
.content { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
/* FAB del carrito y chip de instalar, por encima de la barra inferior */
.mobile-cart-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
#mtInstallChip { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
/* El drawer (menú "Más") y su fondo cubren la barra inferior cuando se abren */
.sidebar.mobile-open { z-index: 60 !important; }
.sidebar-overlay.mobile-open { z-index: 50 !important; }
/* Safe-area lateral para notch en modo app instalada */
.topbar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
}
/* Áreas táctiles cómodas en cualquier pantalla táctil (celular, tablet, PC touch) */
@media (pointer: coarse) {
.nav-btn, .db-tab-btn, .bnav-btn, .help-btn,
.modal-cancel, .modal-confirm, .btn-primary, .logout-btn { min-height: 44px; }
.help-btn { min-width: 44px; }
select, input[type="date"], input[type="number"], input[type="text"], input[type="search"] { min-height: 40px; }
/* iOS hace ZOOM automático al enfocar inputs < 16px (la pantalla salta y se descuadra).
Forzar 16px lo elimina. input:not([type]) cubre el chat/comunidad de MiTiendaGO, que
no declaran type; el !important vence a los font-size inline de los inputs de js/app.js. */
input:not([type]),
input[type="text"], input[type="number"], input[type="search"],
input[type="tel"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="url"],
textarea, select { font-size: 16px !important; }
}
/* Sensación nativa en iOS: sin el rectángulo gris de resaltado al tocar, y scroll inercial. */
button, a, [role="button"], .bnav-btn { -webkit-tap-highlight-color: transparent; }
.ticket-items, .inv-table-wrap, #helpBox, .modal-box, .pay-modal-box, .user-modal-box,
.sidebar, .pos-right { -webkit-overflow-scrolling: touch; }
/* Pantallas diminutas (~smartwatch / mini) */
@media (max-width: 360px) {
.topbar-logo { font-size: 0.82rem; }
.bnav-btn { font-size: 0.56rem; }
.bnav-btn svg { width: 20px; height: 20px; }
.bnav-btn span:not(.bnav-badge) { font-size: 0.54rem; }
}
/* ═══════════════════════════════════════════════════════
LANDING PRO — acabado editorial (no plantilla genérica)
═══════════════════════════════════════════════════════ */
#landingScreen { scroll-behavior: smooth; }
/* Etiqueta "eyebrow" sobre cada título de sección */
.lp-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.lp-eyebrow::before { content:''; width:24px; height:2px; background:linear-gradient(90deg,var(--accent),transparent); border-radius:2px; }
.lp-section-center .lp-eyebrow { justify-content:center; }
/* Texto con degradado de marca */
.lp-grad { background:linear-gradient(120deg,var(--accent),var(--purple)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* Elevación al pasar el cursor (da profundidad y se siente premium) */
.lp-card-lift { transition: transform .2s cubic-bezier(.4,0,.2,1), border-color .2s, box-shadow .2s; }
.lp-card-lift:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 22px 48px -26px rgba(0,0,0,.75); }
/* Malla "bento" de funciones: rompe la monotonía de tarjetas iguales */
.lp-bento { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.lp-feat { background:var(--s1); border:1px solid var(--border); border-radius:16px; padding:20px; }
.lp-feat-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:13px; background:var(--accent-glow,rgba(79,158,255,.12)); color:var(--accent); }
.lp-feat h3 { margin:0 0 6px; font-size:1.02rem; font-weight:800; }
.lp-feat p { margin:0; color:var(--muted); font-size:0.88rem; line-height:1.55; }
.lp-feat-hero { grid-column: span 2; grid-row: span 2; background:linear-gradient(155deg, rgba(79,158,255,.12), rgba(155,114,255,.07) 55%, var(--s1)) !important; border-color: rgba(79,158,255,.28) !important; display:flex; flex-direction:column; }
.lp-feat-hero .lp-feat-icon { width:50px; height:50px; background:var(--accent); color:#fff; }
.lp-feat-hero h3 { font-size:1.35rem; letter-spacing:-0.3px; }
.lp-feat-hero p { font-size:0.95rem; }
.lp-feat-hero .lp-feat-mock { margin-top:auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding-top:18px; }
.lp-feat-hero .lp-feat-mock > div { background:var(--s2); border:1px solid var(--border); border-radius:10px; padding:11px 8px; text-align:center; }
.lp-feat-hero .lp-feat-mock .em { font-size:1.4rem; }
.lp-feat-hero .lp-feat-mock .pr { font-size:0.74rem; font-weight:800; margin-top:3px; }
@media (max-width: 760px){ .lp-bento { grid-template-columns: 1fr 1fr; } .lp-feat-hero { grid-column: span 2; grid-row: auto; } }
@media (max-width: 480px){ .lp-bento { grid-template-columns: 1fr; } .lp-feat-hero { grid-column: span 1; } }
/* Banda de datos honestos (sin inventar usuarios) */
.lp-stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.lp-stat { background:var(--s1); padding:24px 16px; text-align:center; }
.lp-stat .n { font-size:1.55rem; font-weight:900; letter-spacing:-0.5px; line-height:1; }
.lp-stat .l { font-size:0.78rem; color:var(--muted); margin-top:6px; font-weight:600; }
@media (max-width: 620px){ .lp-stats { grid-template-columns: 1fr 1fr; } }
/* Vista previa del hero con profundidad + detalle flotante */
.lp-hero-prev { position:relative; }
.lp-hero-chip { position:absolute; right:-10px; bottom:-14px; display:flex; align-items:center; gap:8px; background:var(--s1); border:1px solid var(--border); border-radius:12px; padding:9px 13px; box-shadow:0 18px 40px -16px rgba(0,0,0,.7); font-size:0.78rem; font-weight:700; }
.lp-hero-chip .dot { width:24px; height:24px; border-radius:50%; background:rgba(34,201,122,.18); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:0.8rem; }
@media (max-width: 480px){ .lp-hero-chip { right:6px; } }
/* ═══════════════════════════════════════════════
RESPONSIVE: tutorial (tour) + login en pantallas chicas
═══════════════════════════════════════════════ */
/* Tooltip del tutorial: que no se desborde en celulares */
@media (max-width: 480px) {
#tourTooltip {
width: calc(100vw - 24px) !important;
max-width: 340px;
left: 12px !important;
box-sizing: border-box;
padding: 16px !important;
}
#tourStepText { font-size: 0.82rem; }
}
/* Login: la tarjeta no debe desbordar en celulares angostos */
.login-card { width: min(420px, 92vw); }
@media (max-width: 420px) {
.login-card { padding: 26px 18px !important; border-radius: 22px; padding-top: 40px !important; }
}
/* Más aire arriba para que el botón "Volver al inicio" no choque con el logo */
.login-card { padding-top: 34px; }
/* Orbes más suaves en móvil (rinde mejor y se ve más limpio) */
@media (max-width: 480px) {
.login-orb { filter: blur(55px); transform: scale(0.7); }
}
/* ── Tutorial (tour): controles cómodos al tacto en celular/tablet ── */
@media (max-width: 768px) {
#tourTooltip button { min-height: 42px; }
#tourTooltip #tourPrevBtn, #tourTooltip #tourNextBtn { padding: 10px 16px !important; font-size: 0.88rem !important; }
#tourTooltip #tourProgress { font-size: 0.7rem; }
#tourTooltip #tourStepTitle { font-size: 1.05rem; }
#tourTooltip #tourStepText { font-size: 0.9rem; }
}