From 6ec3a90d5724124f4fc7ab40e0ae55b5d7e64fbd Mon Sep 17 00:00:00 2001 From: consultoria-as Date: Wed, 1 Apr 2026 07:52:03 +0000 Subject: [PATCH] fix(pos): corregir enlaces de navegacion en todas las paginas Reemplaza enlaces del design system (dashboard.html, pos.html, etc.) con rutas reales del POS (/pos/dashboard, /pos/sale, etc.). Limpia archivos backup. Co-Authored-By: Claude Opus 4.6 (1M context) --- pos/static/css/catalog-design.css | 1383 ----------------------------- pos/static/css/login-design.css | 834 ----------------- pos/static/css/pos-design.css | 1298 --------------------------- pos/templates/accounting.html | 18 +- pos/templates/config.html | 18 +- pos/templates/customers.html | 2 +- pos/templates/dashboard.html | 6 +- pos/templates/inventory.html | 6 +- pos/templates/invoicing.html | 18 +- pos/templates/reports.html | 18 +- 10 files changed, 43 insertions(+), 3558 deletions(-) delete mode 100644 pos/static/css/catalog-design.css delete mode 100644 pos/static/css/login-design.css delete mode 100644 pos/static/css/pos-design.css diff --git a/pos/static/css/catalog-design.css b/pos/static/css/catalog-design.css deleted file mode 100644 index 00c08a1..0000000 --- a/pos/static/css/catalog-design.css +++ /dev/null @@ -1,1383 +0,0 @@ - - /* ========================================================================= - 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); - 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, - [data-theme="modern"].body-shell { - 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: flex-end; - gap: var(--space-2); - padding: var(--space-2) var(--space-4); - background: var(--color-bg-overlay); - border-bottom: 1px solid var(--color-border); - backdrop-filter: blur(8px); - height: 36px; - } - - .theme-bar__label { - font-size: var(--text-caption); - color: var(--color-text-muted); - font-family: var(--font-body); - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - } - - .theme-btn { - display: inline-flex; - align-items: center; - gap: var(--space-1); - padding: 3px 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); - } - - .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); - } - - /* ========================================================================= - APP LAYOUT - ========================================================================= */ - - .app-shell { - display: flex; - height: 100vh; - padding-top: 36px; /* theme bar height */ - } - - /* ========================================================================= - 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; - transition: var(--transition-normal); - } - - [data-theme="industrial"] .sidebar { - border-right-color: var(--color-border); - } - - /* ---- Brand ---- */ - - .sidebar__brand { - display: flex; - align-items: center; - gap: var(--space-3); - padding: var(--space-5) var(--space-5) var(--space-4); - border-bottom: 1px solid var(--color-border); - flex-shrink: 0; - } - - .brand-logo { - width: 40px; - height: 40px; - 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.375rem; - letter-spacing: var(--tracking-tight); - flex-shrink: 0; - } - - [data-theme="industrial"] .brand-logo { - clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); - border-radius: 0; - } - - [data-theme="modern"] .brand-logo { - border-radius: var(--radius-md); - } - - .brand-name { - display: flex; - flex-direction: column; - line-height: 1; - } - - .brand-name__primary { - font-family: var(--font-heading); - font-weight: var(--heading-weight-primary); - font-size: 1.125rem; - letter-spacing: var(--tracking-wide); - color: var(--color-text-primary); - text-transform: uppercase; - } - - .brand-name__sub { - font-family: var(--font-body); - font-size: var(--text-caption); - color: var(--color-text-muted); - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - margin-top: 2px; - } - - /* ---- Navigation ---- */ - - .sidebar__nav { - flex: 1; - padding: var(--space-3) 0; - } - - .nav-section-label { - padding: var(--space-3) var(--space-5) var(--space-1); - font-size: var(--text-caption); - font-family: var(--font-body); - font-weight: var(--font-weight-semibold); - color: var(--color-text-muted); - letter-spacing: var(--tracking-widest); - text-transform: uppercase; - } - - .nav-item { - display: flex; - align-items: center; - gap: var(--space-3); - padding: var(--space-2) var(--space-5); - color: var(--color-text-secondary); - font-family: var(--font-body); - font-size: var(--text-body-sm); - font-weight: var(--font-weight-regular); - text-decoration: none; - cursor: pointer; - border: none; - background: none; - width: 100%; - text-align: left; - transition: var(--transition-fast); - border-left: 3px solid transparent; - position: relative; - } - - .nav-item:hover { - background: var(--color-primary-muted); - color: var(--color-text-primary); - border-left-color: var(--color-primary); - } - - .nav-item.is-active { - background: var(--color-primary-muted); - color: var(--color-primary); - font-weight: var(--font-weight-semibold); - border-left-color: var(--color-primary); - } - - [data-theme="industrial"] .nav-item.is-active { - background: rgba(245, 166, 35, 0.12); - } - - .nav-item__icon { - width: 18px; - height: 18px; - opacity: 0.75; - flex-shrink: 0; - } - - .nav-item.is-active .nav-item__icon, - .nav-item:hover .nav-item__icon { - opacity: 1; - } - - .nav-item__badge { - margin-left: auto; - background: var(--color-primary); - color: var(--color-text-inverse); - font-size: 10px; - font-weight: var(--font-weight-bold); - padding: 1px 6px; - border-radius: var(--radius-full); - line-height: 1.4; - } - - /* ---- User profile ---- */ - - .sidebar__profile { - padding: var(--space-4) var(--space-5); - border-top: 1px solid var(--color-border); - display: flex; - align-items: center; - gap: var(--space-3); - flex-shrink: 0; - } - - .profile-avatar { - width: 36px; - height: 36px; - background: var(--color-primary); - color: var(--color-text-inverse); - display: flex; - align-items: center; - justify-content: center; - font-family: var(--font-heading); - font-weight: var(--heading-weight-primary); - font-size: 0.9rem; - flex-shrink: 0; - } - - [data-theme="industrial"] .profile-avatar { - clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); - } - - [data-theme="modern"] .profile-avatar { - border-radius: var(--radius-full); - } - - .profile-info { - flex: 1; - min-width: 0; - } - - .profile-info__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; - } - - .profile-info__role { - font-size: var(--text-caption); - color: var(--color-text-muted); - } - - .profile-btn { - background: none; - border: none; - color: var(--color-text-muted); - cursor: pointer; - padding: var(--space-1); - border-radius: var(--radius-sm); - transition: var(--transition-fast); - flex-shrink: 0; - } - - .profile-btn:hover { - color: var(--color-text-primary); - background: var(--color-primary-muted); - } - - /* ========================================================================= - MAIN CONTENT AREA - ========================================================================= */ - - .main-content { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - min-width: 0; - } - - /* ---- Header bar ---- */ - - .content-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 var(--space-6); - height: 56px; - flex-shrink: 0; - background: var(--color-bg-elevated); - border-bottom: 1px solid var(--color-border); - } - - .breadcrumb { - display: flex; - align-items: center; - gap: var(--space-2); - font-size: var(--text-body-sm); - color: var(--color-text-muted); - } - - .breadcrumb__link { - color: var(--color-text-muted); - text-decoration: none; - transition: var(--transition-fast); - } - - .breadcrumb__link:hover { - color: var(--color-primary); - } - - .breadcrumb__sep { - color: var(--color-text-disabled); - } - - .breadcrumb__current { - color: var(--color-text-primary); - font-weight: var(--font-weight-semibold); - } - - .header-actions { - display: flex; - align-items: center; - gap: var(--space-3); - } - - .icon-btn { - width: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; - background: none; - border: 1px solid var(--color-border); - color: var(--color-text-secondary); - cursor: pointer; - transition: var(--transition-fast); - border-radius: var(--radius-md); - position: relative; - } - - [data-theme="industrial"] .icon-btn { - border-radius: 0; - } - - .icon-btn:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } - - .icon-btn .notif-dot { - position: absolute; - top: 6px; - right: 6px; - width: 7px; - height: 7px; - background: var(--color-error); - border-radius: var(--radius-full); - border: 1px solid var(--color-bg-elevated); - } - - /* ========================================================================= - SCROLLABLE PAGE BODY - ========================================================================= */ - - .page-body { - flex: 1; - overflow-y: auto; - padding: var(--space-6); - display: flex; - flex-direction: column; - gap: var(--space-5); - } - - [data-theme="modern"] .page-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); - } - - /* ========================================================================= - SEARCH SECTION - ========================================================================= */ - - .search-panel { - background: var(--color-bg-elevated); - border: 1px solid var(--color-border); - padding: var(--space-5); - box-shadow: var(--shadow-sm); - } - - [data-theme="industrial"] .search-panel { - clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); - border-radius: 0; - } - - [data-theme="modern"] .search-panel { - border-radius: var(--radius-lg); - } - - .search-panel__title { - font-family: var(--font-heading); - font-weight: var(--heading-weight-primary); - font-size: var(--text-h5); - color: var(--color-text-primary); - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - margin-bottom: var(--space-4); - display: flex; - align-items: center; - gap: var(--space-2); - } - - [data-theme="industrial"] .search-panel__title { - color: var(--color-primary); - } - - .search-panel__title svg { - color: var(--color-primary); - } - - .vehicle-search-row { - display: grid; - grid-template-columns: 1fr 1fr 1fr auto; - gap: var(--space-3); - align-items: end; - } - - .form-group { - display: flex; - flex-direction: column; - gap: var(--space-1); - } - - .form-label { - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - color: var(--color-text-muted); - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - } - - .form-select, - .form-input { - width: 100%; - padding: var(--space-2) var(--space-3); - background: var(--color-bg-overlay); - border: 1px solid var(--color-border); - color: var(--color-text-primary); - font-family: var(--font-body); - font-size: var(--text-body-sm); - outline: none; - transition: var(--transition-fast); - appearance: none; - -webkit-appearance: none; - height: 40px; - } - - [data-theme="industrial"] .form-select, - [data-theme="industrial"] .form-input { - border-radius: 0; - } - - [data-theme="modern"] .form-select, - [data-theme="modern"] .form-input { - border-radius: var(--radius-md); - } - - .form-select:focus, - .form-input:focus { - border-color: var(--color-border-focus); - box-shadow: var(--shadow-focus); - } - - .form-select { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 10px center; - padding-right: var(--space-8); - cursor: pointer; - } - - .form-select option { - background: var(--color-bg-overlay); - color: var(--color-text-primary); - } - - /* Part search row */ - - .part-search-row { - display: grid; - grid-template-columns: 1fr auto; - gap: var(--space-3); - align-items: end; - margin-top: var(--space-3); - } - - .form-input-with-icon { - position: relative; - } - - .form-input-with-icon svg { - position: absolute; - left: 10px; - top: 50%; - transform: translateY(-50%); - color: var(--color-text-muted); - pointer-events: none; - } - - .form-input-with-icon .form-input { - padding-left: var(--space-8); - } - - /* ---- Buttons ---- */ - - .btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--space-2); - padding: 0 var(--space-5); - height: 40px; - font-family: var(--font-body); - font-size: var(--text-body-sm); - font-weight: var(--font-weight-semibold); - border: 1px solid transparent; - cursor: pointer; - transition: var(--transition-fast); - white-space: nowrap; - text-decoration: none; - letter-spacing: var(--tracking-wide); - } - - [data-theme="industrial"] .btn { - border-radius: 0; - clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); - text-transform: uppercase; - } - - [data-theme="modern"] .btn { - border-radius: var(--radius-md); - } - - .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-primary:active { - background: var(--btn-primary-bg-active); - } - - .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 { - border-color: var(--color-primary); - color: var(--color-primary); - } - - /* ========================================================================= - RESULTS BAR - ========================================================================= */ - - .results-bar { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - gap: var(--space-3); - } - - .results-count { - font-family: var(--font-heading); - font-weight: var(--heading-weight-secondary); - font-size: var(--text-h5); - color: var(--color-text-primary); - letter-spacing: var(--tracking-snug); - } - - .results-count strong { - color: var(--color-primary); - font-weight: var(--heading-weight-primary); - } - - /* ========================================================================= - FILTER CHIPS - ========================================================================= */ - - .filters-row { - display: flex; - align-items: center; - gap: var(--space-2); - flex-wrap: wrap; - } - - .filters-label { - font-size: var(--text-caption); - color: var(--color-text-muted); - font-weight: var(--font-weight-semibold); - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - flex-shrink: 0; - } - - .chip { - display: inline-flex; - align-items: center; - gap: var(--space-1); - padding: 4px var(--space-3); - border: 1px solid var(--color-border); - 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); - user-select: none; - } - - [data-theme="industrial"] .chip { - border-radius: 0; - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - } - - [data-theme="modern"] .chip { - border-radius: var(--radius-full); - } - - .chip:hover { - border-color: var(--color-primary); - color: var(--color-primary); - background: var(--color-primary-muted); - } - - .chip.is-active { - background: var(--color-primary); - border-color: var(--color-primary); - color: var(--color-text-inverse); - } - - [data-theme="industrial"] .chip.is-active { - clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); - } - - /* ========================================================================= - TOOLBAR (sort + view toggle) - ========================================================================= */ - - .catalog-toolbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-3); - } - - .sort-row { - display: flex; - align-items: center; - gap: var(--space-3); - } - - .sort-label { - font-size: var(--text-caption); - color: var(--color-text-muted); - font-weight: var(--font-weight-semibold); - text-transform: uppercase; - letter-spacing: var(--tracking-wider); - } - - .sort-select { - padding: 4px var(--space-7) 4px var(--space-3); - background: var(--color-bg-elevated); - border: 1px solid var(--color-border); - color: var(--color-text-secondary); - font-family: var(--font-body); - font-size: var(--text-caption); - outline: none; - cursor: pointer; - appearance: none; - -webkit-appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 8px center; - transition: var(--transition-fast); - height: 32px; - } - - [data-theme="industrial"] .sort-select { - border-radius: 0; - } - - [data-theme="modern"] .sort-select { - border-radius: var(--radius-md); - } - - .sort-select:focus { - border-color: var(--color-border-focus); - } - - .view-toggle { - display: flex; - border: 1px solid var(--color-border); - overflow: hidden; - } - - [data-theme="industrial"] .view-toggle { - border-radius: 0; - } - - [data-theme="modern"] .view-toggle { - border-radius: var(--radius-md); - } - - .view-btn { - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - background: transparent; - border: none; - color: var(--color-text-muted); - cursor: pointer; - transition: var(--transition-fast); - border-right: 1px solid var(--color-border); - } - - .view-btn:last-child { - border-right: none; - } - - .view-btn:hover { - color: var(--color-primary); - background: var(--color-primary-muted); - } - - .view-btn.is-active { - background: var(--color-primary); - color: var(--color-text-inverse); - } - - /* ========================================================================= - PRODUCT GRID - ========================================================================= */ - - .product-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-4); - } - - .product-grid.view-list { - grid-template-columns: 1fr; - } - - /* ---- Product Card ---- */ - - .product-card { - background: var(--color-bg-elevated); - border: 1px solid var(--color-border); - display: flex; - flex-direction: column; - transition: var(--transition-normal); - position: relative; - overflow: hidden; - } - - [data-theme="industrial"] .product-card { - border-radius: 0; - clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); - } - - [data-theme="modern"] .product-card { - border-radius: var(--radius-lg); - } - - .product-card:hover { - border-color: var(--color-primary); - box-shadow: var(--shadow-md); - transform: translateY(-2px); - } - - [data-theme="industrial"] .product-card:hover { - box-shadow: 0 4px 16px rgba(245, 166, 35, 0.15), var(--shadow-md); - } - - /* List view card overrides */ - - .view-list .product-card { - flex-direction: row; - align-items: center; - } - - [data-theme="industrial"] .view-list .product-card { - clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); - } - - .view-list .product-card__image { - width: 100px; - min-width: 100px; - height: 80px; - } - - .view-list .product-card__body { - flex: 1; - display: grid; - grid-template-columns: 1fr auto; - align-items: center; - gap: var(--space-4); - } - - .view-list .product-card__pricing { - text-align: right; - flex-shrink: 0; - } - - .view-list .product-card__compatibility { - grid-column: 1 / -1; - } - - /* Card image placeholder */ - - .product-card__image { - height: 140px; - background: var(--color-bg-overlay); - display: flex; - align-items: center; - justify-content: center; - border-bottom: 1px solid var(--color-border); - flex-shrink: 0; - position: relative; - overflow: hidden; - } - - [data-theme="industrial"] .product-card__image { - background: var(--color-surface-2); - } - - .product-card__image svg { - color: var(--color-text-disabled); - opacity: 0.5; - } - - .product-card__image-label { - position: absolute; - bottom: var(--space-2); - left: var(--space-2); - font-size: 10px; - font-family: var(--font-mono); - color: var(--color-text-muted); - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - background: var(--color-bg-elevated); - padding: 1px var(--space-2); - } - - [data-theme="industrial"] .product-card__image-label { - border-radius: 0; - border-left: 2px solid var(--color-primary); - } - - [data-theme="modern"] .product-card__image-label { - border-radius: var(--radius-sm); - } - - /* Card stock badge (on image) */ - - .stock-badge { - position: absolute; - top: var(--space-2); - right: var(--space-2); - display: flex; - align-items: center; - gap: 4px; - padding: 3px var(--space-2); - font-size: 10px; - font-weight: var(--font-weight-bold); - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - } - - [data-theme="industrial"] .stock-badge { - border-radius: 0; - } - - [data-theme="modern"] .stock-badge { - border-radius: var(--radius-full); - } - - .stock-badge::before { - content: ''; - width: 6px; - height: 6px; - border-radius: var(--radius-full); - flex-shrink: 0; - } - - .stock-badge.stock-ok { - background: rgba(34, 197, 94, 0.15); - color: var(--color-success); - border: 1px solid rgba(34, 197, 94, 0.3); - } - - .stock-badge.stock-ok::before { background: var(--color-success); } - - .stock-badge.stock-low { - background: rgba(234, 179, 8, 0.15); - color: var(--color-warning); - border: 1px solid rgba(234, 179, 8, 0.3); - } - - .stock-badge.stock-low::before { background: var(--color-warning); } - - .stock-badge.stock-out { - background: rgba(239, 68, 68, 0.15); - color: var(--color-error); - border: 1px solid rgba(239, 68, 68, 0.3); - } - - .stock-badge.stock-out::before { background: var(--color-error); } - - /* Card body */ - - .product-card__body { - padding: var(--space-4); - flex: 1; - display: flex; - flex-direction: column; - gap: var(--space-2); - } - - .product-card__category { - font-size: 10px; - font-weight: var(--font-weight-bold); - letter-spacing: var(--tracking-widest); - text-transform: uppercase; - color: var(--color-primary); - } - - .product-card__name { - font-family: var(--font-heading); - font-weight: var(--heading-weight-secondary); - font-size: 0.9375rem; - color: var(--color-text-primary); - line-height: 1.3; - letter-spacing: var(--tracking-snug); - } - - [data-theme="industrial"] .product-card__name { - text-transform: uppercase; - } - - .product-card__oem { - font-family: var(--font-mono); - font-size: var(--text-caption); - color: var(--color-text-muted); - letter-spacing: var(--tracking-wide); - } - - .product-card__brand { - font-size: var(--text-caption); - color: var(--color-text-secondary); - display: flex; - align-items: center; - gap: var(--space-1); - } - - .product-card__brand-dot { - width: 3px; - height: 3px; - border-radius: var(--radius-full); - background: var(--color-text-disabled); - flex-shrink: 0; - } - - .product-card__compatibility { - display: flex; - align-items: center; - gap: var(--space-1); - padding: var(--space-1) var(--space-2); - background: var(--color-primary-muted); - border-left: 2px solid var(--color-primary); - font-size: 10px; - font-family: var(--font-body); - color: var(--color-text-accent); - } - - [data-theme="modern"] .product-card__compatibility { - border-radius: 0 var(--radius-sm) var(--radius-sm) 0; - } - - /* Card footer */ - - .product-card__footer { - padding: var(--space-3) var(--space-4); - border-top: 1px solid var(--color-border); - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-3); - flex-shrink: 0; - } - - .product-card__pricing {} - - .product-card__price { - font-family: var(--font-mono); - font-weight: var(--font-weight-bold); - font-size: 1.1875rem; - color: var(--color-text-primary); - line-height: 1; - } - - [data-theme="industrial"] .product-card__price { - color: var(--color-primary); - } - - .product-card__price-unit { - font-size: var(--text-caption); - color: var(--color-text-muted); - margin-top: 2px; - } - - /* Add button */ - - .btn-add { - display: inline-flex; - align-items: center; - gap: var(--space-1); - padding: var(--space-1) var(--space-3); - background: var(--btn-primary-bg); - color: var(--btn-primary-text); - font-family: var(--font-body); - font-size: var(--text-caption); - font-weight: var(--font-weight-bold); - border: 1px solid transparent; - cursor: pointer; - transition: var(--transition-fast); - letter-spacing: var(--tracking-wide); - white-space: nowrap; - height: 32px; - } - - [data-theme="industrial"] .btn-add { - border-radius: 0; - clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); - text-transform: uppercase; - } - - [data-theme="modern"] .btn-add { - border-radius: var(--radius-md); - } - - .btn-add:hover { - background: var(--btn-primary-bg-hover); - } - - .btn-add:active { - background: var(--btn-primary-bg-active); - } - - /* ========================================================================= - PAGINATION - ========================================================================= */ - - .pagination { - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-1); - padding: var(--space-4) 0; - } - - .page-item { - width: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; - background: var(--color-bg-elevated); - border: 1px solid var(--color-border); - color: var(--color-text-secondary); - font-family: var(--font-body); - font-size: var(--text-body-sm); - font-weight: var(--font-weight-semibold); - cursor: pointer; - transition: var(--transition-fast); - user-select: none; - } - - [data-theme="industrial"] .page-item { - border-radius: 0; - font-family: var(--font-mono); - } - - [data-theme="modern"] .page-item { - border-radius: var(--radius-md); - } - - .page-item:hover:not(.is-active):not(.is-disabled) { - border-color: var(--color-primary); - color: var(--color-primary); - background: var(--color-primary-muted); - } - - .page-item.is-active { - background: var(--color-primary); - border-color: var(--color-primary); - color: var(--color-text-inverse); - } - - [data-theme="industrial"] .page-item.is-active { - clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); - } - - .page-item.is-disabled { - opacity: 0.4; - cursor: not-allowed; - } - - .page-item--wide { - width: auto; - padding: 0 var(--space-3); - gap: var(--space-1); - } - - .page-ellipsis { - width: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; - color: var(--color-text-muted); - font-size: var(--text-body-sm); - user-select: none; - } - - /* ========================================================================= - SCROLLBAR - ========================================================================= */ - - .page-body::-webkit-scrollbar, - .sidebar::-webkit-scrollbar { - width: 6px; - } - - .page-body::-webkit-scrollbar-track, - .sidebar::-webkit-scrollbar-track { - background: var(--scrollbar-track); - } - - .page-body::-webkit-scrollbar-thumb, - .sidebar::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb); - border-radius: var(--radius-full); - } - - .page-body::-webkit-scrollbar-thumb:hover, - .sidebar::-webkit-scrollbar-thumb:hover { - background-color: var(--scrollbar-thumb-hover); - } - - /* ========================================================================= - INDUSTRIAL THEME — DECORATIVE ACCENTS - ========================================================================= */ - - [data-theme="industrial"] .sidebar__brand::after { - display: none; /* removed, using clip already */ - } - - [data-theme="industrial"] .content-header { - border-bottom-color: var(--color-border); - position: relative; - } - - [data-theme="industrial"] .content-header::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 80px; - height: 2px; - background: var(--color-primary); - } - - /* ========================================================================= - SIDEBAR TOGGLE (mobile) - ========================================================================= */ - - .sidebar-toggle { - display: none; - width: 36px; - height: 36px; - align-items: center; - justify-content: center; - background: none; - border: 1px solid var(--color-border); - color: var(--color-text-secondary); - cursor: pointer; - transition: var(--transition-fast); - border-radius: var(--radius-md); - } - - [data-theme="industrial"] .sidebar-toggle { - border-radius: 0; - } - - /* ========================================================================= - RESPONSIVE - ========================================================================= */ - - @media (max-width: 1024px) { - .product-grid:not(.view-list) { - grid-template-columns: repeat(2, 1fr); - } - - .vehicle-search-row { - grid-template-columns: 1fr 1fr; - } - - .vehicle-search-row .form-group:last-child { - grid-column: 1 / -1; - } - } - - @media (max-width: 768px) { - .sidebar { - position: fixed; - top: 36px; - left: 0; - bottom: 0; - z-index: var(--z-dropdown); - transform: translateX(-100%); - transition: transform var(--duration-normal) var(--ease-in-out); - } - - .sidebar.is-open { - transform: translateX(0); - box-shadow: var(--shadow-xl); - } - - .sidebar-toggle { - display: flex; - } - - .product-grid:not(.view-list) { - grid-template-columns: repeat(2, 1fr); - } - - .vehicle-search-row { - grid-template-columns: 1fr; - } - - .vehicle-search-row .form-group:last-child { - grid-column: auto; - } - - .part-search-row { - grid-template-columns: 1fr; - } - - .catalog-toolbar { - flex-direction: column; - align-items: flex-start; - } - - .results-bar { - flex-direction: column; - align-items: flex-start; - } - } - - @media (max-width: 480px) { - .product-grid:not(.view-list) { - grid-template-columns: 1fr; - } - - .page-body { - padding: var(--space-4); - } - } - - /* ========================================================================= - OVERLAY (mobile sidebar backdrop) - ========================================================================= */ - - .sidebar-overlay { - display: none; - position: fixed; - inset: 0; - top: 36px; - background: var(--overlay-backdrop); - z-index: calc(var(--z-dropdown) - 1); - backdrop-filter: blur(2px); - } - - .sidebar-overlay.is-open { - display: block; - } - \ No newline at end of file diff --git a/pos/static/css/login-design.css b/pos/static/css/login-design.css deleted file mode 100644 index c12c015..0000000 --- a/pos/static/css/login-design.css +++ /dev/null @@ -1,834 +0,0 @@ - - - /* ===================================================================== - RESET & BASE - ===================================================================== */ - - *, *::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); - color: var(--color-text-primary); - background-color: var(--color-bg-base); - transition: background-color var(--duration-slow) var(--ease-in-out), - color var(--duration-slow) var(--ease-in-out); - min-height: 100vh; - } - - /* Modern theme dot-grid on body */ - [data-theme="modern"] body, - [data-theme="modern"].theme-root { - background-image: radial-gradient( - circle, - var(--dot-grid-color) 1px, - transparent 1px - ); - background-size: var(--dot-grid-size) var(--dot-grid-size); - } - - button { - cursor: pointer; - border: none; - background: none; - font-family: inherit; - } - - /* ===================================================================== - THEME SWITCHER BAR (sticky top) - ===================================================================== */ - - .theme-bar { - position: sticky; - top: 0; - z-index: var(--z-sticky); - display: flex; - align-items: center; - justify-content: flex-end; - gap: var(--space-2); - padding: var(--space-2) var(--space-6); - background-color: var(--color-bg-elevated); - border-bottom: 1px solid var(--color-border); - box-shadow: var(--shadow-sm); - transition: background-color var(--duration-slow) var(--ease-in-out), - border-color var(--duration-slow) var(--ease-in-out); - } - - .theme-bar__label { - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - letter-spacing: var(--tracking-widest); - text-transform: uppercase; - color: var(--color-text-muted); - margin-right: var(--space-2); - } - - .theme-btn { - display: flex; - align-items: center; - gap: var(--space-2); - padding: var(--space-2) var(--space-4); - border-radius: var(--radius-full); - font-size: var(--text-body-sm); - font-weight: var(--font-weight-semibold); - color: var(--color-text-secondary); - border: 1.5px solid var(--color-border); - background: transparent; - transition: var(--transition-normal); - letter-spacing: var(--tracking-wide); - } - - .theme-btn:hover { - color: var(--color-primary); - border-color: var(--color-primary); - background: var(--color-primary-muted); - } - - .theme-btn.active { - color: var(--color-text-inverse); - background: var(--color-primary); - border-color: var(--color-primary); - } - - [data-theme="industrial"] .theme-btn.active { - color: #000; - } - - .theme-btn__dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: currentColor; - flex-shrink: 0; - } - - .theme-btn[data-theme-target="industrial"] .theme-btn__dot { - background: #F5A623; - } - - .theme-btn[data-theme-target="industrial"].active .theme-btn__dot { - background: #000; - } - - .theme-btn[data-theme-target="modern"] .theme-btn__dot { - background: #FF6B35; - } - - .theme-btn[data-theme-target="modern"].active .theme-btn__dot { - background: #fff; - } - - /* ===================================================================== - LAYOUT — centered login screen - ===================================================================== */ - - .login-screen { - min-height: calc(100vh - 49px); /* subtract theme bar height */ - display: flex; - align-items: center; - justify-content: center; - padding: var(--space-8) var(--space-4); - } - - /* ===================================================================== - LOGIN CARD - ===================================================================== */ - - .login-card { - width: 100%; - max-width: 480px; - background: var(--color-bg-elevated); - border: 1px solid var(--color-border); - box-shadow: var(--shadow-xl); - overflow: hidden; - transition: background-color var(--duration-slow) var(--ease-in-out), - border-color var(--duration-slow) var(--ease-in-out), - box-shadow var(--duration-slow) var(--ease-in-out); - } - - /* Industrial theme: angular clip-path on the card */ - [data-theme="industrial"] .login-card { - border-radius: 0; - clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); - } - - /* Modern theme: smooth rounded corners */ - [data-theme="modern"] .login-card { - border-radius: var(--radius-xl); - } - - /* ===================================================================== - CARD HEADER — brand / logo - ===================================================================== */ - - .card-header { - padding: var(--space-8) var(--space-8) var(--space-6); - text-align: center; - border-bottom: 1px solid var(--color-border); - position: relative; - overflow: hidden; - } - - /* Industrial: amber accent bar at top of header */ - [data-theme="industrial"] .card-header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--color-primary), transparent); - } - - /* Modern: subtle gradient wash */ - [data-theme="modern"] .card-header { - background: linear-gradient( - 135deg, - rgba(255, 107, 53, 0.04) 0%, - rgba(255, 107, 53, 0.01) 100% - ); - } - - .brand { - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-4); - } - - .brand-logo { - width: 52px; - height: 52px; - background: var(--color-primary); - display: flex; - align-items: center; - justify-content: center; - font-family: var(--font-heading); - font-size: 1.75rem; - font-weight: var(--heading-weight-primary); - color: var(--color-text-inverse); - flex-shrink: 0; - transition: background var(--duration-normal) var(--ease-in-out); - } - - [data-theme="industrial"] .brand-logo { - clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); - border-radius: 0; - } - - [data-theme="modern"] .brand-logo { - border-radius: var(--radius-md); - box-shadow: var(--shadow-md); - } - - [data-theme="industrial"] .brand-logo { - color: #000; - } - - .brand-text { - text-align: left; - } - - .brand-name { - font-family: var(--font-heading); - font-size: var(--text-h4); - font-weight: var(--heading-weight-primary); - color: var(--color-text-primary); - letter-spacing: var(--heading-tracking-h4); - line-height: var(--leading-h4); - text-transform: uppercase; - } - - [data-theme="industrial"] .brand-name { - letter-spacing: var(--tracking-wider); - } - - .brand-sub { - font-family: var(--font-body); - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - color: var(--color-text-accent); - letter-spacing: var(--tracking-widest); - text-transform: uppercase; - margin-top: var(--space-1); - } - - /* ===================================================================== - CARD BODY - ===================================================================== */ - - .card-body { - padding: var(--space-6) var(--space-8); - display: flex; - flex-direction: column; - gap: var(--space-6); - } - - /* ===================================================================== - SECTION LABEL - ===================================================================== */ - - .section-label { - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - letter-spacing: var(--tracking-widest); - text-transform: uppercase; - color: var(--color-text-muted); - margin-bottom: var(--space-3); - } - - /* ===================================================================== - USER SELECTION - ===================================================================== */ - - .users-section {} - - .users-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-3); - } - - .user-avatar-btn { - display: flex; - flex-direction: column; - align-items: center; - gap: var(--space-2); - padding: var(--space-3) var(--space-2); - background: var(--color-surface-1); - border: 1.5px solid var(--color-border); - cursor: pointer; - transition: var(--transition-normal); - position: relative; - } - - [data-theme="industrial"] .user-avatar-btn { - border-radius: 0; - clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); - } - - [data-theme="modern"] .user-avatar-btn { - border-radius: var(--radius-lg); - } - - .user-avatar-btn:hover { - border-color: var(--color-primary); - background: var(--color-primary-muted); - transform: translateY(-2px); - box-shadow: var(--shadow-md); - } - - .user-avatar-btn.selected { - border-color: var(--color-primary); - background: var(--color-primary-muted); - box-shadow: var(--shadow-accent); - } - - [data-theme="industrial"] .user-avatar-btn.selected { - background: rgba(245, 166, 35, 0.10); - } - - .user-avatar-btn.selected .user-initials { - background: var(--color-primary); - color: var(--color-text-inverse); - } - - [data-theme="industrial"] .user-avatar-btn.selected .user-initials { - color: #000; - } - - /* Selected check indicator */ - .user-avatar-btn.selected::after { - content: '✓'; - position: absolute; - top: 4px; - right: 6px; - font-size: 10px; - font-weight: bold; - color: var(--color-primary); - line-height: 1; - } - - .user-initials { - width: 44px; - height: 44px; - background: var(--color-surface-2); - border: 1.5px solid var(--color-border); - display: flex; - align-items: center; - justify-content: center; - font-family: var(--font-heading); - font-size: 0.9rem; - font-weight: var(--heading-weight-primary); - color: var(--color-text-secondary); - letter-spacing: var(--tracking-wide); - transition: var(--transition-normal); - flex-shrink: 0; - } - - [data-theme="industrial"] .user-initials { - border-radius: 0; - clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); - } - - [data-theme="modern"] .user-initials { - border-radius: var(--radius-full); - } - - .user-name { - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - color: var(--color-text-secondary); - text-align: center; - line-height: 1.3; - transition: color var(--duration-normal); - } - - .user-avatar-btn.selected .user-name { - color: var(--color-text-accent); - } - - .user-role { - font-size: 10px; - color: var(--color-text-muted); - text-align: center; - letter-spacing: var(--tracking-wide); - } - - /* ===================================================================== - PIN DISPLAY (dots) - ===================================================================== */ - - .pin-section {} - - .pin-display { - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-4); - padding: var(--space-4) var(--space-6); - background: var(--color-surface-2); - border: 1.5px solid var(--color-border); - margin-bottom: var(--space-4); - transition: border-color var(--duration-normal), box-shadow var(--duration-normal); - min-height: 64px; - } - - [data-theme="industrial"] .pin-display { - border-radius: 0; - } - - [data-theme="modern"] .pin-display { - border-radius: var(--radius-lg); - } - - .pin-display.has-digits { - border-color: var(--color-border-accent); - } - - .pin-display.error { - border-color: var(--color-error); - animation: pin-shake 0.4s var(--ease-in-out); - } - - @keyframes pin-shake { - 0%, 100% { transform: translateX(0); } - 20% { transform: translateX(-8px); } - 40% { transform: translateX(8px); } - 60% { transform: translateX(-5px); } - 80% { transform: translateX(5px); } - } - - .pin-dot { - width: 14px; - height: 14px; - border-radius: 50%; - border: 2px solid var(--color-border-strong); - background: transparent; - transition: all var(--duration-fast) var(--ease-out); - flex-shrink: 0; - } - - .pin-dot.filled { - background: var(--color-primary); - border-color: var(--color-primary); - transform: scale(1.1); - box-shadow: 0 0 8px var(--color-primary); - } - - /* PIN placeholder text when no user selected */ - .pin-placeholder { - font-size: var(--text-body-sm); - color: var(--color-text-muted); - font-style: italic; - } - - /* ===================================================================== - PIN PAD - ===================================================================== */ - - .pin-pad { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-3); - } - - .pin-key { - position: relative; - padding: 0; - height: 64px; - background: var(--color-surface-2); - border: 1.5px solid var(--color-border); - font-family: var(--font-heading); - font-size: 1.5rem; - font-weight: var(--heading-weight-primary); - color: var(--color-text-primary); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: var(--transition-fast); - user-select: none; - -webkit-tap-highlight-color: transparent; - overflow: hidden; - } - - [data-theme="industrial"] .pin-key { - border-radius: 0; - letter-spacing: var(--tracking-normal); - } - - [data-theme="modern"] .pin-key { - border-radius: var(--radius-md); - letter-spacing: var(--tracking-snug); - } - - .pin-key:hover { - background: var(--color-surface-3); - border-color: var(--color-border-strong); - transform: translateY(-1px); - box-shadow: var(--shadow-sm); - } - - .pin-key:active { - transform: translateY(1px) scale(0.97); - box-shadow: none; - background: var(--color-primary-muted); - border-color: var(--color-primary); - } - - /* Ripple effect */ - .pin-key::after { - content: ''; - position: absolute; - width: 100%; - height: 100%; - background: var(--color-primary); - opacity: 0; - border-radius: inherit; - transform: scale(0); - transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); - } - - .pin-key.ripple::after { - transform: scale(2.5); - opacity: 0.12; - } - - /* Backspace key */ - .pin-key--backspace { - font-size: 1.1rem; - color: var(--color-text-muted); - } - - .pin-key--backspace:hover { - color: var(--color-error); - border-color: var(--color-error); - background: rgba(239, 68, 68, 0.06); - } - - .pin-key--backspace:active { - border-color: var(--color-error); - background: rgba(239, 68, 68, 0.12); - } - - /* Enter key */ - .pin-key--enter { - background: var(--color-primary-muted); - border-color: var(--color-primary); - color: var(--color-primary); - font-size: 1rem; - font-weight: var(--font-weight-bold); - letter-spacing: var(--tracking-wide); - } - - .pin-key--enter:hover { - background: var(--color-primary); - color: var(--color-text-inverse); - transform: translateY(-1px); - box-shadow: var(--shadow-md); - } - - [data-theme="industrial"] .pin-key--enter:hover { - color: #000; - } - - .pin-key--enter:active { - background: var(--color-primary-active, var(--color-primary)); - color: var(--color-text-inverse); - transform: translateY(1px) scale(0.97); - } - - /* ===================================================================== - SUBMIT BUTTON - ===================================================================== */ - - .btn-login { - width: 100%; - padding: var(--space-4) var(--space-6); - background: var(--btn-primary-bg); - color: var(--btn-primary-text); - border: 1.5px solid var(--btn-primary-border, transparent); - font-family: var(--font-heading); - font-size: var(--text-h5); - font-weight: var(--heading-weight-primary); - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - cursor: pointer; - transition: var(--transition-normal); - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-3); - position: relative; - overflow: hidden; - } - - [data-theme="industrial"] .btn-login { - border-radius: 0; - clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); - } - - [data-theme="modern"] .btn-login { - border-radius: var(--radius-lg); - box-shadow: var(--shadow-md); - } - - .btn-login:hover:not(:disabled) { - background: var(--btn-primary-bg-hover); - transform: translateY(-2px); - box-shadow: var(--shadow-lg); - } - - .btn-login:active:not(:disabled) { - background: var(--btn-primary-bg-active); - transform: translateY(0); - box-shadow: var(--shadow-sm); - } - - .btn-login:disabled { - opacity: 0.45; - cursor: not-allowed; - transform: none; - } - - .btn-login__icon { - font-size: 1.1rem; - line-height: 1; - } - - /* ===================================================================== - CARD FOOTER - ===================================================================== */ - - .card-footer { - padding: var(--space-4) var(--space-8); - border-top: 1px solid var(--color-border); - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-4); - background: var(--color-surface-1); - transition: background-color var(--duration-slow) var(--ease-in-out), - border-color var(--duration-slow) var(--ease-in-out); - } - - .footer-version { - font-size: var(--text-caption); - color: var(--color-text-muted); - letter-spacing: var(--tracking-wide); - font-family: var(--font-mono); - } - - .footer-status { - display: flex; - align-items: center; - gap: var(--space-2); - font-size: var(--text-caption); - color: var(--color-text-muted); - } - - .status-dot { - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--color-success); - animation: status-pulse 2.5s infinite ease-in-out; - flex-shrink: 0; - } - - @keyframes status-pulse { - 0%, 100% { opacity: 1; transform: scale(1); } - 50% { opacity: 0.5; transform: scale(0.85); } - } - - /* ===================================================================== - INDUSTRIAL THEME EXTRAS — accent border line on card - ===================================================================== */ - - [data-theme="industrial"] .login-card { - border-color: #2a2a2a; - position: relative; - } - - [data-theme="industrial"] .login-card::before { - content: ''; - position: absolute; - inset: 0; - pointer-events: none; - /* Simulated angular highlight on top-left edge */ - border-top: 1px solid rgba(245, 166, 35, 0.15); - border-left: 1px solid rgba(245, 166, 35, 0.08); - clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); - z-index: 1; - } - - /* ===================================================================== - NOTIFICATION / TOAST for error feedback - ===================================================================== */ - - .toast { - position: fixed; - bottom: var(--space-8); - left: 50%; - transform: translateX(-50%) translateY(120%); - background: var(--color-error); - color: #fff; - padding: var(--space-3) var(--space-6); - font-size: var(--text-body-sm); - font-weight: var(--font-weight-semibold); - border-radius: var(--radius-full); - box-shadow: var(--shadow-lg); - z-index: var(--z-toast); - transition: transform 0.3s var(--ease-out); - white-space: nowrap; - pointer-events: none; - } - - .toast.show { - transform: translateX(-50%) translateY(0); - } - - /* ===================================================================== - RESPONSIVE - ===================================================================== */ - - @media (max-width: 640px) { - .theme-bar { - padding: var(--space-2) var(--space-4); - } - - .theme-bar__label { - display: none; - } - - .login-screen { - padding: var(--space-4) var(--space-3); - align-items: flex-start; - padding-top: var(--space-6); - } - - .card-body { - padding: var(--space-5) var(--space-5); - gap: var(--space-5); - } - - .card-header { - padding: var(--space-6) var(--space-5) var(--space-5); - } - - .card-footer { - padding: var(--space-3) var(--space-5); - } - - .brand-logo { - width: 44px; - height: 44px; - font-size: 1.4rem; - } - - .brand-name { - font-size: 1.25rem; - } - - .users-grid { - grid-template-columns: repeat(3, 1fr); - gap: var(--space-2); - } - - .pin-key { - height: 56px; - font-size: 1.35rem; - } - - .pin-dot { - width: 12px; - height: 12px; - } - } - - @media (max-width: 360px) { - .users-grid { - grid-template-columns: repeat(3, 1fr); - } - - .user-initials { - width: 36px; - height: 36px; - font-size: 0.75rem; - } - - .pin-key { - height: 50px; - font-size: 1.2rem; - } - } - - /* ===================================================================== - ACCESSIBILITY - ===================================================================== */ - - .pin-key:focus-visible, - .user-avatar-btn:focus-visible, - .theme-btn:focus-visible, - .btn-login:focus-visible { - outline: 2px solid var(--color-border-focus); - outline-offset: 3px; - } - - @media (prefers-reduced-motion: reduce) { - *, *::before, *::after { - transition-duration: 0.01ms !important; - animation-duration: 0.01ms !important; - } - } - - \ No newline at end of file diff --git a/pos/static/css/pos-design.css b/pos/static/css/pos-design.css deleted file mode 100644 index 42f643a..0000000 --- a/pos/static/css/pos-design.css +++ /dev/null @@ -1,1298 +0,0 @@ - - /* ===================================================================== - BASE RESET & LAYOUT SHELL - ===================================================================== */ - - *, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; - } - - html, body { - height: 100%; - overflow: hidden; - } - - body { - font-family: var(--font-body); - font-size: var(--text-body); - font-weight: var(--font-weight-regular); - background-color: var(--color-bg-base); - color: var(--color-text-primary); - transition: background-color var(--duration-normal) var(--ease-in-out), - color var(--duration-normal) var(--ease-in-out); - display: flex; - flex-direction: column; - } - - /* Dot-grid for modern theme (applied to body shell) */ - [data-theme="modern"] body, - [data-theme="modern"].pos-shell { - 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); - } - - /* ===================================================================== - STATUS BAR (very top) - ===================================================================== */ - - .status-bar { - display: flex; - align-items: center; - justify-content: space-between; - height: 36px; - padding: 0 var(--space-5); - background-color: var(--color-surface-3); - border-bottom: 1px solid var(--color-border); - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - color: var(--color-text-muted); - flex-shrink: 0; - z-index: var(--z-sticky); - } - - [data-theme="industrial"] .status-bar { - background-color: #111111; - border-bottom-color: var(--color-primary-muted); - } - - .status-bar__store { - display: flex; - align-items: center; - gap: var(--space-3); - color: var(--color-text-accent); - font-family: var(--font-heading); - font-weight: var(--heading-weight-primary); - font-size: 0.8rem; - letter-spacing: var(--tracking-widest); - } - - .status-bar__store-dot { - width: 7px; - height: 7px; - background-color: var(--color-success); - border-radius: var(--radius-full); - box-shadow: 0 0 6px var(--color-success); - animation: pulse-dot 2.5s ease-in-out infinite; - } - - @keyframes pulse-dot { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.4; } - } - - .status-bar__center { - display: flex; - align-items: center; - gap: var(--space-6); - } - - .status-bar__right { - display: flex; - align-items: center; - gap: var(--space-4); - } - - .status-bar__user { - display: flex; - align-items: center; - gap: var(--space-2); - color: var(--color-text-secondary); - } - - .status-bar__user-avatar { - width: 20px; - height: 20px; - border-radius: var(--radius-full); - background-color: var(--color-primary); - color: var(--color-text-inverse); - display: flex; - align-items: center; - justify-content: center; - font-size: 0.6rem; - font-weight: var(--font-weight-bold); - } - - /* Theme switcher inside status bar */ - .theme-switcher { - display: flex; - align-items: center; - gap: var(--space-2); - background-color: var(--color-surface-1); - border: 1px solid var(--color-border); - border-radius: var(--radius-full); - padding: 2px; - } - - .theme-btn { - display: flex; - align-items: center; - gap: var(--space-1); - padding: 3px var(--space-3); - border: none; - border-radius: var(--radius-full); - font-family: var(--font-body); - font-size: 0.68rem; - font-weight: var(--font-weight-semibold); - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - cursor: pointer; - transition: var(--transition-fast); - background: transparent; - color: var(--color-text-muted); - } - - .theme-btn.active { - background-color: var(--color-primary); - color: var(--color-text-inverse); - box-shadow: var(--shadow-sm); - } - - [data-theme="industrial"] .theme-btn.active { - color: #000; - } - - /* ===================================================================== - MAIN CONTENT — split layout - ===================================================================== */ - - .pos-shell { - display: flex; - flex-direction: column; - flex: 1; - overflow: hidden; - } - - .pos-main { - display: flex; - flex: 1; - overflow: hidden; - gap: 0; - } - - /* ===================================================================== - LEFT PANEL — Product Browser (60%) - ===================================================================== */ - - .panel-products { - display: flex; - flex-direction: column; - width: 60%; - min-width: 0; - border-right: 1px solid var(--color-border); - background-color: var(--color-bg-base); - overflow: hidden; - } - - [data-theme="modern"] .panel-products { - background-color: transparent; - } - - /* Search bar row */ - .search-row { - display: flex; - align-items: center; - gap: var(--space-3); - padding: var(--space-4) var(--space-5); - background-color: var(--color-surface-1); - border-bottom: 1px solid var(--color-border); - flex-shrink: 0; - } - - .search-wrap { - position: relative; - flex: 1; - } - - .search-icon { - position: absolute; - left: var(--space-4); - top: 50%; - transform: translateY(-50%); - color: var(--color-text-muted); - pointer-events: none; - } - - .search-input { - width: 100%; - height: 48px; - padding: 0 var(--space-4) 0 44px; - background-color: var(--color-bg-overlay); - border: 1.5px solid var(--color-border); - border-radius: var(--radius-md); - font-family: var(--font-body); - font-size: var(--text-body-lg); - font-weight: var(--font-weight-regular); - color: var(--color-text-primary); - outline: none; - transition: var(--transition-fast); - } - - .search-input::placeholder { - color: var(--color-text-muted); - } - - .search-input:focus { - border-color: var(--color-border-focus); - box-shadow: var(--shadow-focus); - background-color: var(--color-bg-overlay); - } - - [data-theme="modern"] .search-input { - border-radius: var(--radius-lg); - background-color: #fff; - } - - .btn-scan { - width: 48px; - height: 48px; - display: flex; - align-items: center; - justify-content: center; - background-color: var(--btn-secondary-bg); - border: 1.5px solid var(--btn-secondary-border); - border-radius: var(--radius-md); - color: var(--color-primary); - cursor: pointer; - transition: var(--transition-fast); - flex-shrink: 0; - } - - .btn-scan:hover { - background-color: var(--btn-secondary-bg-hover); - box-shadow: var(--shadow-accent); - } - - [data-theme="industrial"] .btn-scan { - clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); - } - - [data-theme="modern"] .btn-scan { - border-radius: var(--radius-lg); - } - - /* Quick category buttons */ - .categories-row { - display: flex; - align-items: center; - gap: var(--space-2); - padding: var(--space-3) var(--space-5); - border-bottom: 1px solid var(--color-border); - overflow-x: auto; - flex-shrink: 0; - scrollbar-width: none; - } - - .categories-row::-webkit-scrollbar { display: none; } - - .category-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); - white-space: nowrap; - margin-right: var(--space-1); - } - - .cat-btn { - display: flex; - align-items: center; - gap: var(--space-2); - padding: var(--space-2) var(--space-4); - border: 1.5px solid var(--color-border); - border-radius: var(--radius-sm); - background-color: transparent; - font-family: var(--font-body); - font-size: var(--text-body-sm); - font-weight: var(--font-weight-semibold); - color: var(--color-text-secondary); - cursor: pointer; - white-space: nowrap; - transition: var(--transition-fast); - letter-spacing: var(--tracking-snug); - } - - .cat-btn:hover { - border-color: var(--color-primary); - color: var(--color-primary); - background-color: var(--color-primary-muted); - } - - .cat-btn.active { - border-color: var(--color-primary); - background-color: var(--color-primary); - color: var(--color-text-inverse); - } - - [data-theme="industrial"] .cat-btn.active { color: #000; } - - [data-theme="modern"] .cat-btn { - border-radius: var(--radius-full); - } - - [data-theme="industrial"] .cat-btn { - clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); - } - - /* Product grid */ - .product-grid-wrap { - flex: 1; - overflow-y: auto; - padding: var(--space-4) var(--space-5); - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); - } - - .product-grid-wrap::-webkit-scrollbar { width: 6px; } - .product-grid-wrap::-webkit-scrollbar-track { background: var(--scrollbar-track); } - .product-grid-wrap::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb); - border-radius: var(--radius-full); - } - .product-grid-wrap::-webkit-scrollbar-thumb:hover { - background-color: var(--scrollbar-thumb-hover); - } - - .product-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-3); - } - - @media (max-width: 1100px) { - .product-grid { - grid-template-columns: repeat(2, 1fr); - } - } - - /* Product card */ - .product-card { - position: relative; - display: flex; - flex-direction: column; - padding: var(--space-4); - background-color: var(--color-surface-1); - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - cursor: pointer; - transition: var(--transition-fast); - overflow: hidden; - } - - .product-card:hover { - border-color: var(--color-primary); - box-shadow: var(--shadow-md); - transform: translateY(-1px); - } - - .product-card:hover .product-card__add { - opacity: 1; - transform: scale(1); - } - - [data-theme="industrial"] .product-card { - clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); - background-color: var(--color-surface-1); - border-color: #2a2a2a; - } - - [data-theme="industrial"] .product-card:hover { - border-color: var(--color-primary); - box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md); - } - - [data-theme="modern"] .product-card { - border-radius: var(--radius-lg); - background-color: #fff; - box-shadow: var(--shadow-sm); - } - - [data-theme="modern"] .product-card:hover { - box-shadow: var(--shadow-lg); - } - - .product-card__category { - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - letter-spacing: var(--tracking-widest); - text-transform: uppercase; - color: var(--color-primary); - margin-bottom: var(--space-1); - } - - .product-card__name { - font-family: var(--font-heading); - font-size: var(--text-body); - font-weight: var(--heading-weight-primary); - line-height: var(--leading-h5); - color: var(--color-text-primary); - margin-bottom: var(--space-1); - letter-spacing: var(--heading-tracking-h5); - } - - [data-theme="industrial"] .product-card__name { - font-size: 1.05rem; - letter-spacing: 0.01em; - } - - .product-card__oem { - font-family: var(--font-mono); - font-size: var(--text-caption); - color: var(--color-text-muted); - margin-bottom: var(--space-3); - } - - .product-card__footer { - display: flex; - align-items: flex-end; - justify-content: space-between; - margin-top: auto; - gap: var(--space-2); - } - - .product-card__price { - font-family: var(--font-mono); - font-size: 1.1rem; - font-weight: var(--font-weight-bold); - color: var(--color-text-primary); - line-height: 1; - } - - .product-card__stock { - font-size: var(--text-caption); - color: var(--color-text-muted); - margin-top: 2px; - } - - .product-card__stock.low { color: var(--color-warning); } - .product-card__stock.out { color: var(--color-error); } - - .product-card__add { - width: 32px; - height: 32px; - border: none; - border-radius: var(--radius-sm); - background-color: var(--color-primary); - color: var(--color-text-inverse); - font-size: 1.2rem; - font-weight: var(--font-weight-bold); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: 0.75; - transform: scale(0.95); - transition: var(--transition-fast); - flex-shrink: 0; - } - - .product-card__add:hover { - background-color: var(--color-primary-hover); - opacity: 1; - transform: scale(1.08) !important; - } - - [data-theme="industrial"] .product-card__add { color: #000; } - [data-theme="modern"] .product-card__add { border-radius: var(--radius-md); } - - /* Add flash animation */ - @keyframes card-flash { - 0% { background-color: var(--color-primary-muted); } - 100% { background-color: transparent; } - } - - .product-card.added { - animation: card-flash 0.4s ease forwards; - } - - /* ===================================================================== - RIGHT PANEL — Cart / Ticket (40%) - ===================================================================== */ - - .panel-cart { - display: flex; - flex-direction: column; - width: 40%; - min-width: 320px; - background-color: var(--color-surface-1); - overflow: hidden; - position: relative; - } - - [data-theme="modern"] .panel-cart { - background-color: #fff; - box-shadow: -4px 0 20px rgba(26, 26, 46, 0.06); - } - - [data-theme="industrial"] .panel-cart { - background-color: #141414; - border-left: 1px solid #2a2a2a; - } - - /* Cart header */ - .cart-header { - padding: var(--space-4) var(--space-5); - border-bottom: 1px solid var(--color-border); - flex-shrink: 0; - background-color: var(--color-surface-2); - } - - [data-theme="industrial"] .cart-header { - background-color: #1a1a1a; - border-bottom-color: var(--color-primary-muted); - } - - .cart-header__top { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: var(--space-3); - } - - .cart-header__sale-id { - font-family: var(--font-heading); - font-size: var(--text-h5); - font-weight: var(--heading-weight-primary); - color: var(--color-text-primary); - letter-spacing: var(--heading-tracking-h5); - display: flex; - align-items: center; - gap: var(--space-2); - } - - .cart-header__sale-id::before { - content: ''; - display: block; - width: 4px; - height: 20px; - background-color: var(--color-primary); - border-radius: 2px; - flex-shrink: 0; - } - - [data-theme="industrial"] .cart-header__sale-id { - font-size: 1.35rem; - letter-spacing: 0.03em; - } - - .cart-header__status { - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - color: var(--color-success); - background-color: rgba(34, 197, 94, 0.12); - padding: 3px var(--space-3); - border-radius: var(--radius-full); - border: 1px solid rgba(34, 197, 94, 0.25); - } - - /* Customer row */ - .customer-row { - display: flex; - align-items: center; - gap: var(--space-3); - } - - .customer-icon { - width: 34px; - height: 34px; - border-radius: var(--radius-full); - background-color: var(--color-primary-muted); - border: 1.5px solid var(--color-primary); - display: flex; - align-items: center; - justify-content: center; - color: var(--color-primary); - flex-shrink: 0; - } - - .customer-info { - flex: 1; - min-width: 0; - } - - .customer-info__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; - } - - .customer-info__label { - font-size: var(--text-caption); - color: var(--color-text-muted); - } - - .btn-change-customer { - padding: var(--space-1) var(--space-3); - border: 1px solid var(--color-border); - border-radius: var(--radius-full); - background: transparent; - font-family: var(--font-body); - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - color: var(--color-text-muted); - cursor: pointer; - transition: var(--transition-fast); - white-space: nowrap; - } - - .btn-change-customer:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } - - /* Cart items list */ - .cart-items { - flex: 1; - overflow-y: auto; - padding: var(--space-3) var(--space-4); - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); - } - - .cart-items::-webkit-scrollbar { width: 4px; } - .cart-items::-webkit-scrollbar-track { background: transparent; } - .cart-items::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb); - border-radius: var(--radius-full); - } - - .cart-empty { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 120px; - color: var(--color-text-muted); - font-size: var(--text-body-sm); - gap: var(--space-2); - opacity: 0.6; - } - - .cart-item { - display: flex; - align-items: center; - gap: var(--space-3); - padding: var(--space-3) var(--space-2); - border-bottom: 1px solid var(--color-border); - transition: var(--transition-fast); - animation: item-slide-in 0.2s ease; - } - - @keyframes item-slide-in { - from { opacity: 0; transform: translateX(10px); } - to { opacity: 1; transform: translateX(0); } - } - - .cart-item:hover { - background-color: var(--color-primary-muted); - border-radius: var(--radius-sm); - } - - .cart-item:last-child { border-bottom: none; } - - .cart-item__qty-ctrl { - display: flex; - align-items: center; - gap: var(--space-1); - flex-shrink: 0; - } - - .qty-btn { - width: 26px; - height: 26px; - border: 1px solid var(--color-border-strong); - border-radius: var(--radius-sm); - background-color: var(--color-surface-3); - color: var(--color-text-primary); - font-size: 0.9rem; - font-weight: var(--font-weight-bold); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: var(--transition-fast); - line-height: 1; - } - - .qty-btn:hover { - border-color: var(--color-primary); - background-color: var(--color-primary); - color: var(--color-text-inverse); - } - - [data-theme="industrial"] .qty-btn:hover { color: #000; } - - .qty-display { - font-family: var(--font-mono); - font-size: var(--text-body-sm); - font-weight: var(--font-weight-bold); - color: var(--color-text-primary); - min-width: 24px; - text-align: center; - } - - .cart-item__info { - flex: 1; - min-width: 0; - } - - .cart-item__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; - } - - .cart-item__unit { - font-family: var(--font-mono); - font-size: var(--text-caption); - color: var(--color-text-muted); - } - - .cart-item__total { - font-family: var(--font-mono); - font-size: var(--text-body-sm); - font-weight: var(--font-weight-bold); - color: var(--color-text-primary); - text-align: right; - min-width: 72px; - } - - .cart-item__remove { - width: 24px; - height: 24px; - border: none; - border-radius: var(--radius-sm); - background: transparent; - color: var(--color-text-muted); - font-size: 1rem; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: var(--transition-fast); - flex-shrink: 0; - line-height: 1; - } - - .cart-item__remove:hover { - background-color: rgba(239, 68, 68, 0.15); - color: var(--color-error); - } - - /* Cart footer (totals + payment) */ - .cart-footer { - flex-shrink: 0; - border-top: 1px solid var(--color-border); - background-color: var(--color-surface-2); - } - - [data-theme="industrial"] .cart-footer { - background-color: #1a1a1a; - border-top-color: var(--color-primary-muted); - } - - .totals-block { - padding: var(--space-3) var(--space-5) var(--space-2); - } - - .totals-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: var(--space-1) 0; - } - - .totals-row__label { - font-size: var(--text-body-sm); - color: var(--color-text-muted); - } - - .totals-row__value { - font-family: var(--font-mono); - font-size: var(--text-body-sm); - color: var(--color-text-secondary); - } - - .totals-row--total { - margin-top: var(--space-2); - padding-top: var(--space-2); - border-top: 1px solid var(--color-border); - } - - .totals-row--total .totals-row__label { - font-family: var(--font-heading); - font-size: var(--text-body-lg); - font-weight: var(--heading-weight-primary); - color: var(--color-text-primary); - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - } - - .totals-row--total .totals-row__value { - font-family: var(--font-mono); - font-size: 1.5rem; - font-weight: var(--font-weight-bold); - color: var(--color-primary); - } - - /* Discount row */ - .discount-row { - display: flex; - align-items: center; - gap: var(--space-3); - padding: 0 var(--space-5) var(--space-3); - } - - .discount-label { - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - color: var(--color-text-muted); - text-transform: uppercase; - letter-spacing: var(--tracking-wider); - white-space: nowrap; - } - - .discount-input { - flex: 1; - height: 30px; - padding: 0 var(--space-3); - background-color: var(--color-bg-base); - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - font-family: var(--font-mono); - font-size: var(--text-body-sm); - color: var(--color-text-primary); - outline: none; - transition: var(--transition-fast); - } - - .discount-input:focus { - border-color: var(--color-border-focus); - box-shadow: var(--shadow-focus); - } - - [data-theme="modern"] .discount-input { - border-radius: var(--radius-md); - } - - .discount-input::placeholder { color: var(--color-text-muted); } - - /* Payment method buttons */ - .payment-methods { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-2); - padding: 0 var(--space-5) var(--space-3); - } - - .pay-btn { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 3px; - padding: var(--space-2) var(--space-2); - border: 1.5px solid var(--color-border); - border-radius: var(--radius-sm); - background: transparent; - font-family: var(--font-body); - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - color: var(--color-text-muted); - cursor: pointer; - transition: var(--transition-fast); - } - - .pay-btn:hover { - border-color: var(--color-primary); - color: var(--color-primary); - background-color: var(--color-primary-muted); - } - - .pay-btn.selected { - border-color: var(--color-primary); - background-color: var(--color-primary-muted); - color: var(--color-primary); - box-shadow: var(--shadow-accent); - } - - .pay-btn__icon { - font-size: 1.1rem; - } - - [data-theme="modern"] .pay-btn { - border-radius: var(--radius-md); - } - - [data-theme="industrial"] .pay-btn { - clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); - } - - /* Main CTA button */ - .btn-cobrar { - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-3); - width: calc(100% - var(--space-10)); - margin: 0 var(--space-5) var(--space-3); - height: 56px; - background-color: var(--btn-primary-bg); - border: none; - border-radius: var(--radius-md); - font-family: var(--font-heading); - font-size: 1.2rem; - font-weight: var(--heading-weight-primary); - letter-spacing: var(--tracking-widest); - text-transform: uppercase; - color: var(--btn-primary-text); - cursor: pointer; - transition: var(--transition-fast); - box-shadow: var(--shadow-md); - } - - .btn-cobrar:hover { - background-color: var(--btn-primary-bg-hover); - transform: translateY(-1px); - box-shadow: var(--shadow-lg); - } - - .btn-cobrar:active { - background-color: var(--btn-primary-bg-active); - transform: translateY(0); - } - - .btn-cobrar:disabled { - opacity: 0.4; - cursor: not-allowed; - transform: none; - } - - [data-theme="industrial"] .btn-cobrar { - clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); - } - - [data-theme="modern"] .btn-cobrar { - border-radius: var(--radius-lg); - } - - /* Secondary actions row */ - .secondary-actions { - display: flex; - gap: var(--space-2); - padding: 0 var(--space-5) var(--space-4); - } - - .btn-secondary-action { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-1); - height: 34px; - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - background: transparent; - font-family: var(--font-body); - font-size: var(--text-caption); - font-weight: var(--font-weight-semibold); - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - color: var(--color-text-muted); - cursor: pointer; - transition: var(--transition-fast); - } - - .btn-secondary-action:hover { - border-color: var(--color-border-strong); - color: var(--color-text-secondary); - background-color: var(--color-surface-3); - } - - .btn-secondary-action.danger:hover { - border-color: var(--color-error); - color: var(--color-error); - background-color: rgba(239, 68, 68, 0.08); - } - - [data-theme="modern"] .btn-secondary-action { - border-radius: var(--radius-md); - } - - /* ===================================================================== - NUMPAD OVERLAY - ===================================================================== */ - - .numpad-overlay { - position: fixed; - inset: 0; - background-color: var(--overlay-backdrop); - display: flex; - align-items: flex-end; - justify-content: center; - z-index: var(--z-modal); - opacity: 0; - pointer-events: none; - transition: opacity var(--duration-normal) var(--ease-in-out); - } - - .numpad-overlay.visible { - opacity: 1; - pointer-events: all; - } - - .numpad-panel { - width: 360px; - background-color: var(--color-surface-2); - border: 1px solid var(--color-border-strong); - border-bottom: none; - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - padding: var(--space-5); - transform: translateY(100%); - transition: transform var(--duration-normal) var(--ease-out); - } - - .numpad-overlay.visible .numpad-panel { - transform: translateY(0); - } - - [data-theme="industrial"] .numpad-panel { - border-radius: var(--radius-sm) var(--radius-sm) 0 0; - background-color: #1e1e1e; - border-color: var(--color-primary-muted); - } - - .numpad-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: var(--space-4); - } - - .numpad-title { - font-family: var(--font-heading); - font-size: var(--text-h6); - font-weight: var(--heading-weight-primary); - text-transform: uppercase; - letter-spacing: var(--tracking-widest); - color: var(--color-text-primary); - } - - .numpad-close { - width: 28px; - height: 28px; - border: 1px solid var(--color-border); - border-radius: var(--radius-full); - background: transparent; - color: var(--color-text-muted); - font-size: 1rem; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: var(--transition-fast); - } - - .numpad-close:hover { - border-color: var(--color-error); - color: var(--color-error); - } - - .numpad-display { - background-color: var(--color-bg-base); - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - padding: var(--space-3) var(--space-4); - font-family: var(--font-mono); - font-size: 1.8rem; - font-weight: var(--font-weight-bold); - color: var(--color-primary); - text-align: right; - margin-bottom: var(--space-4); - min-height: 60px; - display: flex; - align-items: center; - justify-content: flex-end; - letter-spacing: var(--tracking-wide); - } - - .numpad-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: var(--space-2); - } - - .numpad-key { - height: 52px; - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - background-color: var(--color-surface-3); - font-family: var(--font-mono); - font-size: 1.1rem; - font-weight: var(--font-weight-semibold); - color: var(--color-text-primary); - cursor: pointer; - transition: var(--transition-fast); - display: flex; - align-items: center; - justify-content: center; - } - - .numpad-key:hover { - background-color: var(--color-primary-muted); - border-color: var(--color-primary); - color: var(--color-primary); - } - - .numpad-key:active { - transform: scale(0.95); - } - - .numpad-key.key-0 { grid-column: span 2; } - - .numpad-key.key-clear { - background-color: rgba(239, 68, 68, 0.1); - border-color: rgba(239, 68, 68, 0.3); - color: var(--color-error); - } - - .numpad-key.key-enter { - background-color: var(--color-primary); - border-color: var(--color-primary); - color: var(--color-text-inverse); - font-family: var(--font-heading); - font-size: 0.85rem; - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - } - - [data-theme="industrial"] .numpad-key.key-enter { color: #000; } - - .numpad-key.key-enter:hover { - background-color: var(--color-primary-hover); - } - - [data-theme="modern"] .numpad-key { - border-radius: var(--radius-md); - } - - /* ===================================================================== - TOAST NOTIFICATION - ===================================================================== */ - - .toast-container { - position: fixed; - bottom: var(--space-6); - left: 50%; - transform: translateX(-50%); - z-index: var(--z-toast); - display: flex; - flex-direction: column; - gap: var(--space-2); - pointer-events: none; - } - - .toast { - padding: var(--space-3) var(--space-5); - background-color: var(--color-surface-3); - border: 1px solid var(--color-border); - border-left: 3px solid var(--color-primary); - border-radius: var(--radius-md); - font-size: var(--text-body-sm); - font-weight: var(--font-weight-semibold); - color: var(--color-text-primary); - box-shadow: var(--shadow-lg); - white-space: nowrap; - animation: toast-in 0.25s ease, toast-out 0.3s ease 1.7s forwards; - } - - @keyframes toast-in { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } - } - - @keyframes toast-out { - from { opacity: 1; transform: translateY(0); } - to { opacity: 0; transform: translateY(-6px); } - } - - /* ===================================================================== - RESPONSIVE — tablet/small desktop - ===================================================================== */ - - @media (max-width: 900px) { - .pos-main { - flex-direction: column; - } - - .panel-products, - .panel-cart { - width: 100%; - min-width: 0; - } - - .panel-products { - border-right: none; - border-bottom: 1px solid var(--color-border); - max-height: 55%; - } - - .panel-cart { - max-height: 45%; - } - - .product-grid { - grid-template-columns: repeat(2, 1fr); - } - - .status-bar__center { display: none; } - } - - @media (max-width: 600px) { - .product-grid { - grid-template-columns: repeat(2, 1fr); - } - - .payment-methods { - grid-template-columns: repeat(3, 1fr); - } - - .status-bar { padding: 0 var(--space-3); } - .search-row { padding: var(--space-3); } - .categories-row { padding: var(--space-2) var(--space-3); } - } - - /* ===================================================================== - UTILITY - ===================================================================== */ - - .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - } - \ No newline at end of file diff --git a/pos/templates/accounting.html b/pos/templates/accounting.html index 31524f5..b15fbec 100644 --- a/pos/templates/accounting.html +++ b/pos/templates/accounting.html @@ -1300,45 +1300,45 @@