consultoria-as
5a88d7c7ff
- Kiosk mode: fullscreen, wake lock, auto-login, context menu block, PWA/Capacitor detection - AI vision: camera photos analyzed by Gemma 3 27B vision model via OpenRouter - AI part classification: auto-suggest name/brand/category when entering part number - Public catalog chatbot: /api/chat endpoint with rate limiting, chat widget on catalog page Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1937 lines
70 KiB
HTML
1937 lines
70 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" data-theme="industrial">
|
|
<head>
|
|
<script>/*pos_theme_early*/(function(){var t=localStorage.getItem("pos_theme")||"industrial";document.documentElement.setAttribute("data-theme",t);})()</script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Configuración — Nexus Autoparts POS</title>
|
|
<link rel="stylesheet" href="/pos/static/css/tokens.css" />
|
|
<link rel="manifest" href="/pos/static/pwa/manifest.json" />
|
|
<meta name="theme-color" content="#F5A623" />
|
|
|
|
<style>
|
|
/* =========================================================================
|
|
BASE RESET & SHELL
|
|
========================================================================= */
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-base);
|
|
transition: background-color var(--duration-normal) var(--ease-in-out),
|
|
color var(--duration-normal) var(--ease-in-out);
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-theme="modern"] body {
|
|
background-color: var(--color-bg-base);
|
|
background-image: radial-gradient(
|
|
circle,
|
|
var(--dot-grid-color) 1px,
|
|
transparent 1px
|
|
);
|
|
background-size: var(--dot-grid-size) var(--dot-grid-size);
|
|
}
|
|
|
|
/* =========================================================================
|
|
THEME SWITCHER BAR
|
|
========================================================================= */
|
|
|
|
.theme-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: var(--z-toast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 var(--space-5);
|
|
background: var(--color-bg-overlay);
|
|
border-bottom: 1px solid var(--color-border);
|
|
backdrop-filter: blur(10px);
|
|
height: 36px;
|
|
}
|
|
|
|
[data-theme="industrial"] .theme-bar {
|
|
background: rgba(13, 13, 13, 0.95);
|
|
border-bottom-color: var(--color-primary-muted);
|
|
}
|
|
|
|
.theme-bar__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.theme-bar__store {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: 0.75rem;
|
|
letter-spacing: var(--tracking-widest);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-accent);
|
|
}
|
|
|
|
.theme-bar__dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--color-success);
|
|
border-radius: var(--radius-full);
|
|
box-shadow: 0 0 6px var(--color-success);
|
|
animation: blink 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.35; }
|
|
}
|
|
|
|
.theme-bar__sep {
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--color-border);
|
|
}
|
|
|
|
.theme-bar__label {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.theme-bar__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.theme-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: 2px var(--space-3);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-full);
|
|
background: transparent;
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
letter-spacing: var(--tracking-wide);
|
|
}
|
|
|
|
.theme-btn:hover {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.theme-btn.is-active {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
}
|
|
|
|
.theme-btn__swatch {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.theme-btn--industrial .theme-btn__swatch { background: #F5A623; }
|
|
.theme-btn--modern .theme-btn__swatch { background: #FF6B35; }
|
|
|
|
/* =========================================================================
|
|
APP LAYOUT
|
|
========================================================================= */
|
|
|
|
.app-shell {
|
|
display: flex;
|
|
height: 100vh;
|
|
padding-top: 36px;
|
|
}
|
|
|
|
/* =========================================================================
|
|
SIDEBAR
|
|
========================================================================= */
|
|
|
|
.sidebar {
|
|
width: 260px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-bg-elevated);
|
|
border-right: 1px solid var(--color-border);
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar { width: 4px; }
|
|
.sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); }
|
|
.sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }
|
|
|
|
.sidebar__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-4) var(--space-4) var(--space-3);
|
|
border-bottom: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: 1.125rem;
|
|
letter-spacing: -0.04em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-theme="industrial"] .brand-logo {
|
|
clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
|
|
}
|
|
|
|
[data-theme="modern"] .brand-logo {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.brand-name__primary {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: 0.9375rem;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-primary);
|
|
line-height: 1;
|
|
}
|
|
|
|
.brand-name__sub {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.sidebar__nav {
|
|
flex: 1;
|
|
padding: var(--space-3) 0;
|
|
}
|
|
|
|
.nav-section-label {
|
|
padding: var(--space-3) var(--space-4) var(--space-1);
|
|
font-size: 0.6875rem;
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-widest);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-4);
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-regular);
|
|
border-left: 3px solid transparent;
|
|
transition: var(--transition-fast);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--color-surface-2);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.nav-item.is-active {
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
border-left-color: var(--color-primary);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.nav-item__icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.nav-item.is-active .nav-item__icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sidebar__footer {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-top: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.sidebar__user-avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-bold);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar__user-info { flex: 1; overflow: hidden; }
|
|
|
|
.sidebar__user-name {
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sidebar__user-role {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* =========================================================================
|
|
MAIN CONTENT
|
|
========================================================================= */
|
|
|
|
.main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-4) var(--space-6);
|
|
background: var(--color-bg-elevated);
|
|
border-bottom: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-theme="industrial"] .page-header {
|
|
background: var(--color-surface-1);
|
|
}
|
|
|
|
.page-header__title-group { display: flex; flex-direction: column; gap: 2px; }
|
|
|
|
.page-header__eyebrow {
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-widest);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.page-header__title {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: var(--text-h4);
|
|
letter-spacing: var(--heading-tracking-h4);
|
|
color: var(--color-text-primary);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
[data-theme="industrial"] .page-header__title {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.page-header__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
/* =========================================================================
|
|
SCROLLABLE CONTENT
|
|
========================================================================= */
|
|
|
|
.content-scroll {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--space-5) var(--space-6);
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
}
|
|
|
|
.content-scroll::-webkit-scrollbar { width: 6px; }
|
|
.content-scroll::-webkit-scrollbar-track { background: var(--scrollbar-track); }
|
|
.content-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }
|
|
|
|
/* =========================================================================
|
|
SETTINGS SECTIONS
|
|
========================================================================= */
|
|
|
|
.settings-section {
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
.settings-section__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
padding-bottom: var(--space-3);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.settings-section__icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-primary-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.settings-section__icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke: var(--color-primary);
|
|
fill: none;
|
|
stroke-width: 1.75;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.settings-section__title {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-secondary);
|
|
font-size: var(--text-h5);
|
|
color: var(--color-text-primary);
|
|
letter-spacing: var(--heading-tracking-h5);
|
|
}
|
|
|
|
[data-theme="industrial"] .settings-section__title {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.settings-section__desc {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* =========================================================================
|
|
SETTINGS CARD
|
|
========================================================================= */
|
|
|
|
.settings-card {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5);
|
|
box-shadow: var(--shadow-sm);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
[data-theme="modern"] .settings-card {
|
|
background: var(--color-bg-overlay);
|
|
}
|
|
|
|
.settings-card__title {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
margin-bottom: var(--space-4);
|
|
font-size: var(--text-body);
|
|
}
|
|
|
|
/* =========================================================================
|
|
FORM ELEMENTS
|
|
========================================================================= */
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.form-group--full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.form-input {
|
|
height: 38px;
|
|
padding: 0 var(--space-3);
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
transition: var(--transition-fast);
|
|
outline: none;
|
|
}
|
|
|
|
[data-theme="modern"] .form-input {
|
|
background: var(--color-bg-base);
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: var(--color-border-focus);
|
|
box-shadow: var(--shadow-accent);
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.form-select {
|
|
height: 38px;
|
|
padding: 0 var(--space-3);
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.form-select:focus {
|
|
border-color: var(--color-border-focus);
|
|
box-shadow: var(--shadow-accent);
|
|
}
|
|
|
|
.form-textarea {
|
|
padding: var(--space-3);
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
outline: none;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.form-textarea:focus {
|
|
border-color: var(--color-border-focus);
|
|
box-shadow: var(--shadow-accent);
|
|
}
|
|
|
|
.form-hint {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* =========================================================================
|
|
TOGGLE SWITCH
|
|
========================================================================= */
|
|
|
|
.toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-3) 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.toggle-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.toggle-row__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.toggle-row__label {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.toggle-row__desc {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.toggle {
|
|
position: relative;
|
|
width: 44px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toggle input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle__slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
inset: 0;
|
|
background: var(--color-border-strong);
|
|
border-radius: var(--radius-full);
|
|
transition: var(--transition-normal);
|
|
}
|
|
|
|
.toggle__slider::before {
|
|
content: '';
|
|
position: absolute;
|
|
height: 18px;
|
|
width: 18px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background: white;
|
|
border-radius: var(--radius-full);
|
|
transition: var(--transition-normal);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.toggle input:checked + .toggle__slider {
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
.toggle input:checked + .toggle__slider::before {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.toggle input:focus + .toggle__slider {
|
|
box-shadow: var(--shadow-focus);
|
|
}
|
|
|
|
/* =========================================================================
|
|
THEME SELECTOR (in-app)
|
|
========================================================================= */
|
|
|
|
.theme-selector {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.theme-option {
|
|
background: var(--color-bg-base);
|
|
border: 2px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4);
|
|
cursor: pointer;
|
|
transition: var(--transition-normal);
|
|
position: relative;
|
|
}
|
|
|
|
.theme-option:hover {
|
|
border-color: var(--color-border-strong);
|
|
}
|
|
|
|
.theme-option.is-selected {
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--shadow-accent);
|
|
}
|
|
|
|
.theme-option__check {
|
|
position: absolute;
|
|
top: var(--space-3);
|
|
right: var(--space-3);
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.theme-option.is-selected .theme-option__check {
|
|
display: flex;
|
|
}
|
|
|
|
.theme-option__check svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: var(--color-text-inverse);
|
|
fill: none;
|
|
stroke-width: 2.5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.theme-option__preview {
|
|
height: 100px;
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: var(--space-3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.theme-option__preview--dark {
|
|
background: #0d0d0d;
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.theme-option__preview--light {
|
|
background: #FFFFFF;
|
|
border: 1px solid #e2e4f0;
|
|
background-image: radial-gradient(circle, rgba(26,26,46,0.07) 1px, transparent 1px);
|
|
background-size: 12px 12px;
|
|
}
|
|
|
|
.theme-option__preview-logo {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.theme-option__preview-logo--dark {
|
|
background: #F5A623;
|
|
color: #000;
|
|
clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
|
|
}
|
|
|
|
.theme-option__preview-logo--light {
|
|
background: #FF6B35;
|
|
color: #fff;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.theme-option__preview-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.theme-option__preview-bar {
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.theme-option__preview--dark .theme-option__preview-bar:nth-child(1) { width: 60px; background: #fff; }
|
|
.theme-option__preview--dark .theme-option__preview-bar:nth-child(2) { width: 40px; background: #888; }
|
|
.theme-option__preview--dark .theme-option__preview-bar:nth-child(3) { width: 50px; background: #F5A623; }
|
|
|
|
.theme-option__preview--light .theme-option__preview-bar:nth-child(1) { width: 60px; background: #1a1a2e; }
|
|
.theme-option__preview--light .theme-option__preview-bar:nth-child(2) { width: 40px; background: #8080a0; }
|
|
.theme-option__preview--light .theme-option__preview-bar:nth-child(3) { width: 50px; background: #FF6B35; }
|
|
|
|
.theme-option__name {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-secondary);
|
|
font-size: var(--text-body);
|
|
color: var(--color-text-primary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.theme-option__desc {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.theme-option__colors {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.theme-option__swatch {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* =========================================================================
|
|
BUTTONS
|
|
========================================================================= */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: 0 var(--space-4);
|
|
height: 36px;
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-wide);
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
transition: var(--transition-fast);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn--primary {
|
|
background: var(--btn-primary-bg);
|
|
color: var(--btn-primary-text);
|
|
border-color: var(--btn-primary-border);
|
|
}
|
|
|
|
.btn--primary:hover {
|
|
background: var(--btn-primary-bg-hover);
|
|
}
|
|
|
|
.btn--secondary {
|
|
background: var(--btn-secondary-bg);
|
|
color: var(--btn-secondary-text);
|
|
border-color: var(--btn-secondary-border);
|
|
}
|
|
|
|
.btn--secondary:hover {
|
|
background: var(--btn-secondary-bg-hover);
|
|
}
|
|
|
|
.btn--ghost {
|
|
background: var(--btn-ghost-bg);
|
|
color: var(--btn-ghost-text);
|
|
border-color: var(--btn-ghost-border);
|
|
}
|
|
|
|
.btn--ghost:hover {
|
|
background: var(--color-surface-2);
|
|
border-color: var(--color-border-strong);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.btn--danger {
|
|
background: var(--btn-danger-bg);
|
|
color: var(--btn-danger-text);
|
|
}
|
|
|
|
.btn--sm {
|
|
height: 28px;
|
|
padding: 0 var(--space-3);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
/* =========================================================================
|
|
DATA TABLE
|
|
========================================================================= */
|
|
|
|
.table-wrapper {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
[data-theme="modern"] .table-wrapper {
|
|
background: var(--color-bg-overlay);
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.data-table thead {
|
|
background: var(--color-surface-2);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
[data-theme="industrial"] .data-table thead {
|
|
background: var(--color-surface-3);
|
|
}
|
|
|
|
.data-table th {
|
|
padding: var(--space-3) var(--space-4);
|
|
text-align: left;
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.data-table th:first-child { padding-left: var(--space-5); }
|
|
.data-table th:last-child { padding-right: var(--space-5); }
|
|
|
|
.data-table tbody tr {
|
|
border-bottom: 1px solid var(--color-border);
|
|
transition: background var(--duration-fast) var(--ease-in-out);
|
|
}
|
|
|
|
.data-table tbody tr:last-child { border-bottom: none; }
|
|
|
|
.data-table tbody tr:hover {
|
|
background: var(--color-surface-2);
|
|
}
|
|
|
|
.data-table td {
|
|
padding: var(--space-3) var(--space-4);
|
|
color: var(--color-text-secondary);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.data-table td:first-child { padding-left: var(--space-5); }
|
|
.data-table td:last-child { padding-right: var(--space-5); }
|
|
|
|
.data-table .td--primary {
|
|
color: var(--color-text-primary);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
/* =========================================================================
|
|
BADGES
|
|
========================================================================= */
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px var(--space-2);
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.6875rem;
|
|
font-weight: var(--font-weight-bold);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge::before {
|
|
content: '';
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: var(--radius-full);
|
|
background: currentColor;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.badge--ok {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.badge--pending {
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.badge--inactive {
|
|
background: rgba(115, 115, 115, 0.15);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.badge--admin {
|
|
background: rgba(99, 102, 241, 0.15);
|
|
color: #818cf8;
|
|
}
|
|
|
|
/* =========================================================================
|
|
USER AVATAR (table)
|
|
========================================================================= */
|
|
|
|
.user-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.user-cell__avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-bold);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.user-cell__name {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* =========================================================================
|
|
PRINTER/DEVICE CARDS
|
|
========================================================================= */
|
|
|
|
.device-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.device-card {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4) var(--space-5);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-4);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: var(--transition-normal);
|
|
}
|
|
|
|
[data-theme="modern"] .device-card {
|
|
background: var(--color-bg-overlay);
|
|
}
|
|
|
|
.device-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-border-strong);
|
|
}
|
|
|
|
.device-card__icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-primary-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.device-card__icon svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
stroke: var(--color-primary);
|
|
fill: none;
|
|
stroke-width: 1.75;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.device-card__body { flex: 1; }
|
|
|
|
.device-card__name {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.device-card__detail {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.device-card__detail + .device-card__detail {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.device-card__actions {
|
|
margin-top: var(--space-3);
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* =========================================================================
|
|
RESPONSIVE
|
|
========================================================================= */
|
|
|
|
@media (max-width: 1024px) {
|
|
.sidebar { width: 60px; }
|
|
.brand-name__primary,
|
|
.brand-name__sub,
|
|
.nav-section-label,
|
|
.sidebar__user-info { display: none; }
|
|
.sidebar__brand { justify-content: center; padding: var(--space-3); }
|
|
.nav-item { justify-content: center; padding: var(--space-2); border-left: none; border-bottom: 3px solid transparent; }
|
|
.nav-item.is-active { border-left: none; border-bottom-color: var(--color-primary); }
|
|
.sidebar__footer { justify-content: center; }
|
|
.form-grid { grid-template-columns: 1fr; }
|
|
.theme-selector { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.device-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- =========================================================================
|
|
THEME SWITCHER BAR
|
|
========================================================================= -->
|
|
|
|
<div class="theme-bar">
|
|
<div class="theme-bar__left">
|
|
<div class="theme-bar__store">
|
|
<span class="theme-bar__dot"></span>
|
|
Nexus Autoparts
|
|
</div>
|
|
<div class="theme-bar__sep"></div>
|
|
<span class="theme-bar__label">Design System Preview</span>
|
|
</div>
|
|
<div class="theme-bar__right">
|
|
<button class="theme-btn theme-btn--industrial is-active" data-theme-target="industrial" onclick="setTheme('industrial')">
|
|
<span class="theme-btn__swatch"></span> Industrial
|
|
</button>
|
|
<button class="theme-btn theme-btn--modern" data-theme-target="modern" onclick="setTheme('modern')">
|
|
<span class="theme-btn__swatch"></span> Moderno
|
|
</button>
|
|
<div class="theme-bar__sep"></div>
|
|
<span class="theme-bar__label" id="live-clock">--:--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- =========================================================================
|
|
APP SHELL
|
|
========================================================================= -->
|
|
|
|
<div class="app-shell">
|
|
|
|
<!-- SIDEBAR -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar__brand">
|
|
<div class="brand-logo">N</div>
|
|
<div>
|
|
<div class="brand-name__primary">Nexus</div>
|
|
<div class="brand-name__sub">Autoparts</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar__nav">
|
|
<div class="nav-section-label">Principal</div>
|
|
<a class="nav-item" href="/pos/dashboard">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
|
Dashboard
|
|
</a>
|
|
<a class="nav-item" href="/pos/sale">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="2" y1="20" x2="22" y2="20"/></svg>
|
|
Punto de Venta
|
|
</a>
|
|
<a class="nav-item" href="/pos/catalog">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
|
Catálogo
|
|
</a>
|
|
|
|
<div class="nav-section-label">Operaciones</div>
|
|
<a class="nav-item" href="/pos/inventory">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
|
Inventario
|
|
</a>
|
|
<a class="nav-item" href="/pos/customers">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
Clientes
|
|
</a>
|
|
|
|
<div class="nav-section-label">Finanzas</div>
|
|
<a class="nav-item" href="/pos/invoicing">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
Facturación
|
|
</a>
|
|
<a class="nav-item" href="/pos/accounting">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
Contabilidad
|
|
</a>
|
|
|
|
<div class="nav-section-label">Sistema</div>
|
|
<a class="nav-item" href="/pos/reports">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
|
Reportes
|
|
</a>
|
|
<a class="nav-item is-active" href="/pos/config">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
Configuración
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar__footer">
|
|
<div class="sidebar__user-avatar">AM</div>
|
|
<div class="sidebar__user-info">
|
|
<div class="sidebar__user-name">Admin</div>
|
|
<div class="sidebar__user-role">Administrador</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<main class="main">
|
|
|
|
<!-- Page Header -->
|
|
<header class="page-header">
|
|
<div class="page-header__title-group">
|
|
<span class="page-header__eyebrow">Sistema</span>
|
|
<h1 class="page-header__title">Configuración</h1>
|
|
</div>
|
|
<div class="page-header__actions">
|
|
<button class="btn btn--primary">
|
|
<svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
|
|
Guardar Cambios
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Scrollable Content -->
|
|
<div class="content-scroll">
|
|
|
|
<!-- ===============================================================
|
|
SECTION 1: APARIENCIA / TEMA
|
|
=============================================================== -->
|
|
<div class="settings-section">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Apariencia</div>
|
|
<div class="settings-section__desc">Selecciona el tema visual del sistema</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="theme-selector">
|
|
<div class="theme-option is-selected" onclick="selectThemeOption('industrial')">
|
|
<div class="theme-option__check">
|
|
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
|
</div>
|
|
<div class="theme-option__preview theme-option__preview--dark">
|
|
<div class="theme-option__preview-logo theme-option__preview-logo--dark">N</div>
|
|
<div class="theme-option__preview-text">
|
|
<div class="theme-option__preview-bar"></div>
|
|
<div class="theme-option__preview-bar"></div>
|
|
<div class="theme-option__preview-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-option__name">Tema A — Industrial Robusto</div>
|
|
<div class="theme-option__desc">Fondo oscuro, acentos ámbar, tipografía Barlow Condensed</div>
|
|
<div class="theme-option__colors">
|
|
<div class="theme-option__swatch" style="background: #0d0d0d;"></div>
|
|
<div class="theme-option__swatch" style="background: #1a1a1a;"></div>
|
|
<div class="theme-option__swatch" style="background: #F5A623;"></div>
|
|
<div class="theme-option__swatch" style="background: #333333;"></div>
|
|
<div class="theme-option__swatch" style="background: #FFFFFF;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="theme-option" onclick="selectThemeOption('modern')">
|
|
<div class="theme-option__check">
|
|
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
|
</div>
|
|
<div class="theme-option__preview theme-option__preview--light">
|
|
<div class="theme-option__preview-logo theme-option__preview-logo--light">N</div>
|
|
<div class="theme-option__preview-text">
|
|
<div class="theme-option__preview-bar"></div>
|
|
<div class="theme-option__preview-bar"></div>
|
|
<div class="theme-option__preview-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-option__name">Tema B — Técnico Moderno</div>
|
|
<div class="theme-option__desc">Fondo claro, acentos naranja, tipografía Poppins</div>
|
|
<div class="theme-option__colors">
|
|
<div class="theme-option__swatch" style="background: #FFFFFF;"></div>
|
|
<div class="theme-option__swatch" style="background: #F8F9FF;"></div>
|
|
<div class="theme-option__swatch" style="background: #FF6B35;"></div>
|
|
<div class="theme-option__swatch" style="background: #1a1a2e;"></div>
|
|
<div class="theme-option__swatch" style="background: #e2e4f0;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 2: DATOS DE LA EMPRESA
|
|
=============================================================== -->
|
|
<div class="settings-section">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Datos de la Empresa</div>
|
|
<div class="settings-section__desc">Información fiscal y comercial</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Razón Social</label>
|
|
<input class="form-input" id="biz-razon-social" type="text" value="" readonly />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Nombre Comercial</label>
|
|
<input class="form-input" id="biz-nombre" type="text" value="" readonly />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">RFC</label>
|
|
<input class="form-input" id="biz-rfc" type="text" value="" readonly />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Régimen Fiscal</label>
|
|
<input class="form-input" id="biz-regimen" type="text" value="" readonly />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Dirección Fiscal</label>
|
|
<input class="form-input" id="biz-direccion" type="text" value="" readonly />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Teléfono</label>
|
|
<input class="form-input" id="biz-telefono" type="tel" value="" readonly />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Email</label>
|
|
<input class="form-input" id="biz-email" type="email" value="" readonly />
|
|
</div>
|
|
</div>
|
|
<p class="form-hint" style="margin-top: var(--space-3);">Datos configurados durante el aprovisionamiento del tenant. Contacta soporte para cambios.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 3: USUARIOS Y PERMISOS
|
|
=============================================================== -->
|
|
<div class="settings-section">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Usuarios y Permisos</div>
|
|
<div class="settings-section__desc">Gestiona quién accede al sistema y qué puede hacer</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card" style="padding: 0;">
|
|
<div style="padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border);">
|
|
<span id="employees-count" style="font-weight: var(--font-weight-semibold); color: var(--color-text-primary);">Cargando...</span>
|
|
<button class="btn btn--primary btn--sm" id="btn-new-employee">
|
|
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Nuevo Empleado
|
|
</button>
|
|
</div>
|
|
<div class="table-wrapper" style="border: none; border-radius: 0; box-shadow: none;">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Usuario</th>
|
|
<th>Email</th>
|
|
<th>Rol</th>
|
|
<th>Sucursal</th>
|
|
<th>Estado</th>
|
|
<th>Desc. Max</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="employees-tbody">
|
|
<tr><td colspan="7" style="text-align:center; padding: var(--space-5);">Cargando empleados...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 4: IMPRESORAS
|
|
=============================================================== -->
|
|
<div class="settings-section">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Impresoras</div>
|
|
<div class="settings-section__desc">Configura impresoras de tickets y etiquetas</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-grid">
|
|
<div class="device-card">
|
|
<div class="device-card__icon">
|
|
<svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
|
</div>
|
|
<div class="device-card__body">
|
|
<div class="device-card__name">Epson TM-T88VI</div>
|
|
<div class="device-card__detail">
|
|
<span class="badge badge--ok" style="padding: 0 4px; font-size: 0.625rem;">En línea</span>
|
|
Tickets de venta
|
|
</div>
|
|
<div class="device-card__detail">USB · 192.168.10.50</div>
|
|
<div class="device-card__detail">Predeterminada para POS</div>
|
|
<div class="device-card__actions">
|
|
<button class="btn btn--ghost btn--sm">Configurar</button>
|
|
<button class="btn btn--ghost btn--sm">Test</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-card">
|
|
<div class="device-card__icon">
|
|
<svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
|
</div>
|
|
<div class="device-card__body">
|
|
<div class="device-card__name">Zebra GK420d</div>
|
|
<div class="device-card__detail">
|
|
<span class="badge badge--ok" style="padding: 0 4px; font-size: 0.625rem;">En línea</span>
|
|
Etiquetas de código de barras
|
|
</div>
|
|
<div class="device-card__detail">USB · 192.168.10.51</div>
|
|
<div class="device-card__detail">Predeterminada para inventario</div>
|
|
<div class="device-card__actions">
|
|
<button class="btn btn--ghost btn--sm">Configurar</button>
|
|
<button class="btn btn--ghost btn--sm">Test</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-card">
|
|
<div class="device-card__icon" style="background: rgba(115,115,115,.12);">
|
|
<svg viewBox="0 0 24 24" style="stroke: var(--color-text-muted);"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
|
</div>
|
|
<div class="device-card__body">
|
|
<div class="device-card__name">HP LaserJet Pro M404</div>
|
|
<div class="device-card__detail">
|
|
<span class="badge badge--inactive" style="padding: 0 4px; font-size: 0.625rem;">Fuera de línea</span>
|
|
Facturas y reportes
|
|
</div>
|
|
<div class="device-card__detail">Red · 192.168.10.52</div>
|
|
<div class="device-card__actions">
|
|
<button class="btn btn--ghost btn--sm">Configurar</button>
|
|
<button class="btn btn--ghost btn--sm">Reintentar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 5: SUCURSALES
|
|
=============================================================== -->
|
|
<div class="settings-section">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Sucursales</div>
|
|
<div class="settings-section__desc">Gestiona las ubicaciones de tu negocio</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-grid" id="branches-grid">
|
|
<div class="device-card"><div class="device-card__body" style="text-align:center;">Cargando sucursales...</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 6: PARÁMETROS FISCALES
|
|
=============================================================== -->
|
|
<div class="settings-section">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Parámetros Fiscales</div>
|
|
<div class="settings-section__desc">Configuración de facturación electrónica CFDI</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="settings-card__title">Certificados y Sellos Digitales</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Certificado (.cer)</label>
|
|
<div style="display: flex; align-items: center; gap: var(--space-2);">
|
|
<input class="form-input" type="text" value="CSD_NAU260101ABC_20250115.cer" readonly style="flex:1; opacity: 0.7;" />
|
|
<button class="btn btn--ghost btn--sm">Cambiar</button>
|
|
</div>
|
|
<span class="form-hint">Vigente hasta: 15/01/2029</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Llave Privada (.key)</label>
|
|
<div style="display: flex; align-items: center; gap: var(--space-2);">
|
|
<input class="form-input" type="text" value="CSD_NAU260101ABC_20250115.key" readonly style="flex:1; opacity: 0.7;" />
|
|
<button class="btn btn--ghost btn--sm">Cambiar</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Contraseña del CSD</label>
|
|
<input class="form-input" type="password" value="••••••••" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">PAC (Proveedor de Certificación)</label>
|
|
<select class="form-select">
|
|
<option selected>Finkok</option>
|
|
<option>Diverza</option>
|
|
<option>Edicom</option>
|
|
<option>SW Sapien</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="settings-card__title">Configuración de Facturación</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Facturación automática</span>
|
|
<span class="toggle-row__desc">Generar CFDI automáticamente al cerrar una venta</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Envío automático por email</span>
|
|
<span class="toggle-row__desc">Enviar PDF y XML al correo del cliente</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Factura global diaria</span>
|
|
<span class="toggle-row__desc">Generar CFDI global para ventas sin RFC</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Complemento de pago</span>
|
|
<span class="toggle-row__desc">Generar complemento de pago para cobros parciales</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="settings-card__title">Parámetros de Impuestos</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Tasa IVA (%)</label>
|
|
<input class="form-input" type="number" value="16" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Tasa IEPS (%)</label>
|
|
<input class="form-input" type="number" value="0" />
|
|
<span class="form-hint">Dejar en 0 si no aplica</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Serie de Facturación</label>
|
|
<input class="form-input" type="text" value="FA" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Folio Actual</label>
|
|
<input class="form-input" type="number" value="893" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Moneda Predeterminada</label>
|
|
<select class="form-select">
|
|
<option selected>MXN — Peso Mexicano</option>
|
|
<option>USD — Dólar Americano</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Forma de Pago Default</label>
|
|
<select class="form-select">
|
|
<option selected>01 — Efectivo</option>
|
|
<option>03 — Transferencia Electrónica</option>
|
|
<option>04 — Tarjeta de Crédito</option>
|
|
<option>28 — Tarjeta de Débito</option>
|
|
<option>99 — Por Definir</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn--primary btn--sm">Guardar Parámetros</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 7: PREFERENCIAS DEL SISTEMA
|
|
=============================================================== -->
|
|
<div class="settings-section">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Preferencias del Sistema</div>
|
|
<div class="settings-section__desc">Ajustes generales de operación</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Notificaciones de stock bajo</span>
|
|
<span class="toggle-row__desc">Alertar cuando un producto baje del mínimo configurado</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Sonidos de notificación</span>
|
|
<span class="toggle-row__desc">Reproducir sonido al completar una venta o recibir alerta</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Cierre de caja obligatorio</span>
|
|
<span class="toggle-row__desc">Requerir cierre de caja al finalizar el turno</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Modo offline</span>
|
|
<span class="toggle-row__desc">Permitir ventas sin conexión a internet (sincroniza al reconectar)</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Autocompletado de búsqueda</span>
|
|
<span class="toggle-row__desc">Sugerir productos mientras se escribe en la barra de búsqueda</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Modo Kiosko</span>
|
|
<span class="toggle-row__desc">Pantalla completa, bloqueo de pantalla activa, sin menú contextual (ideal para tablet/mostrador)</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-kiosk-mode" />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 8: MONEDA / CURRENCY
|
|
=============================================================== -->
|
|
<div class="settings-section">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title" data-i18n="currency_config">Moneda</div>
|
|
<div class="settings-section__desc">Configura la moneda y tipo de cambio para ventas</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card" style="padding:var(--space-5);">
|
|
<div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="default_currency">Moneda Predeterminada</label>
|
|
<select class="form-input" id="cfg-currency" style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm,4px);background:var(--color-bg-base);color:var(--color-text-primary);font-size:var(--text-body-sm);">
|
|
<option value="MXN">$ MXN — Peso Mexicano</option>
|
|
<option value="USD">US$ USD — US Dollar</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="exchange_rate">Tipo de Cambio USD/MXN</label>
|
|
<input class="form-input" id="cfg-exchange-rate" type="number" step="0.01" min="0.01" value="17.50"
|
|
style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm,4px);background:var(--color-bg-base);color:var(--color-text-primary);font-size:var(--text-body-sm);font-family:var(--font-mono);" />
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:var(--space-4);display:flex;gap:var(--space-3);align-items:center;">
|
|
<button class="btn btn--primary" id="btn-save-currency" style="padding:var(--space-2) var(--space-4);font-size:var(--text-body-sm);" onclick="Config.saveCurrency()">
|
|
Guardar Moneda
|
|
</button>
|
|
<span id="currency-status" style="font-size:var(--text-caption);color:var(--color-text-muted);"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content-scroll -->
|
|
</main>
|
|
</div><!-- /app-shell -->
|
|
|
|
<!-- =====================================================================
|
|
MODALS
|
|
===================================================================== -->
|
|
|
|
<!-- Modal: Nueva Sucursal -->
|
|
<div class="cfg-modal-overlay" id="modal-branch" style="display:none;">
|
|
<div class="cfg-modal">
|
|
<div class="cfg-modal__header">
|
|
<h3 class="cfg-modal__title">Nueva Sucursal</h3>
|
|
<button class="cfg-modal__close" onclick="Config.closeModal('modal-branch')">×</button>
|
|
</div>
|
|
<div class="cfg-modal__body">
|
|
<div class="form-grid">
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Nombre</label>
|
|
<input class="form-input" id="branch-name" type="text" placeholder="Ej. Sucursal Norte" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Direccion</label>
|
|
<input class="form-input" id="branch-address" type="text" placeholder="Calle, Colonia, Ciudad" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Telefono</label>
|
|
<input class="form-input" id="branch-phone" type="tel" placeholder="(55) 1234-5678" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cfg-modal__footer">
|
|
<button class="btn btn--ghost" onclick="Config.closeModal('modal-branch')">Cancelar</button>
|
|
<button class="btn btn--primary" id="btn-save-branch">Guardar Sucursal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Nuevo Empleado -->
|
|
<div class="cfg-modal-overlay" id="modal-employee" style="display:none;">
|
|
<div class="cfg-modal">
|
|
<div class="cfg-modal__header">
|
|
<h3 class="cfg-modal__title">Nuevo Empleado</h3>
|
|
<button class="cfg-modal__close" onclick="Config.closeModal('modal-employee')">×</button>
|
|
</div>
|
|
<div class="cfg-modal__body">
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Nombre Completo *</label>
|
|
<input class="form-input" id="emp-name" type="text" placeholder="Nombre y apellido" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Email</label>
|
|
<input class="form-input" id="emp-email" type="email" placeholder="correo@empresa.mx" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Telefono</label>
|
|
<input class="form-input" id="emp-phone" type="tel" placeholder="(55) 1234-5678" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Rol *</label>
|
|
<select class="form-select" id="emp-role">
|
|
<option value="">-- Seleccionar --</option>
|
|
<option value="admin">Administrador</option>
|
|
<option value="cashier">Cajero</option>
|
|
<option value="warehouse">Almacenista</option>
|
|
<option value="accountant">Contador</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">PIN (4 digitos) *</label>
|
|
<input class="form-input" id="emp-pin" type="password" maxlength="4" pattern="\d{4}" placeholder="0000" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Sucursal</label>
|
|
<select class="form-select" id="emp-branch">
|
|
<option value="">-- Todas --</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Descuento Max. (%)</label>
|
|
<input class="form-input" id="emp-discount" type="number" min="0" max="100" value="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cfg-modal__footer">
|
|
<button class="btn btn--ghost" onclick="Config.closeModal('modal-employee')">Cancelar</button>
|
|
<button class="btn btn--primary" id="btn-save-employee">Guardar Empleado</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Modal styles */
|
|
.cfg-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
background: rgba(0,0,0,0.6);
|
|
backdrop-filter: blur(4px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: fadeIn var(--duration-fast) var(--ease-in-out);
|
|
}
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
|
|
.cfg-modal {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
width: 520px;
|
|
max-width: 90vw;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.cfg-modal__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-4) var(--space-5);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.cfg-modal__title {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-secondary);
|
|
font-size: var(--text-h5);
|
|
color: var(--color-text-primary);
|
|
}
|
|
.cfg-modal__close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
.cfg-modal__close:hover { color: var(--color-text-primary); }
|
|
.cfg-modal__body { padding: var(--space-5); }
|
|
.cfg-modal__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-3);
|
|
padding: var(--space-4) var(--space-5);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* Extra badge colors for roles */
|
|
.badge--owner { background: rgba(245,166,35,0.15); color: var(--color-primary); }
|
|
.badge--blue { background: rgba(99,102,241,0.15); color: #818cf8; }
|
|
.badge--green { background: rgba(34,197,94,0.15); color: var(--color-success); }
|
|
.badge--yellow { background: rgba(234,179,8,0.15); color: #eab308; }
|
|
.badge--purple { background: rgba(168,85,247,0.15); color: #a855f7; }
|
|
|
|
/* Toast notification */
|
|
.cfg-toast {
|
|
position: fixed;
|
|
bottom: var(--space-5);
|
|
right: var(--space-5);
|
|
z-index: 10000;
|
|
padding: var(--space-3) var(--space-5);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-inverse);
|
|
animation: slideUp var(--duration-normal) var(--ease-in-out);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.cfg-toast--ok { background: var(--color-success); }
|
|
.cfg-toast--error { background: var(--color-error, #ef4444); }
|
|
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
|
</style>
|
|
|
|
<script src="/pos/static/js/i18n.js"></script>
|
|
<script src="/pos/static/js/app-init.js"></script>
|
|
<script src="/pos/static/js/sidebar.js"></script>
|
|
<script src="/pos/static/js/kiosk.js"></script>
|
|
<script src="/pos/static/js/config.js"></script>
|
|
<script src="/pos/static/js/sync-engine.js"></script>
|
|
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
|
|
|
|
</body>
|
|
</html>
|