87028143ee
- tokens.css: CSS custom properties para Tema A (Industrial) y Tema B (Moderno) - design-system/index.html: 20 componentes con theme switcher - social-media/: 3 propuestas de look & feel para redes sociales - branding/: opciones de branding y look & feel aprobadas - Brief del proyecto incluido
1595 lines
73 KiB
HTML
1595 lines
73 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" data-theme="industrial">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Nexus Autoparts — Design System</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Barlow+Condensed:wght@600;700;800&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="tokens.css">
|
|
<style>
|
|
/* ---- Reset ---- */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-normal);
|
|
color: var(--color-text-primary);
|
|
background: var(--color-bg-primary);
|
|
transition: background var(--transition-base), color var(--transition-base);
|
|
}
|
|
|
|
/* ---- Theme Switcher ---- */
|
|
.theme-bar {
|
|
position: sticky; top: 0; z-index: var(--z-sticky);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: var(--space-3) var(--space-6);
|
|
background: var(--color-bg-secondary);
|
|
border-bottom: 1px solid var(--color-border);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.theme-bar h1 {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight);
|
|
font-size: var(--text-xl);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wide);
|
|
color: var(--color-accent);
|
|
}
|
|
.theme-toggle { display: flex; gap: var(--space-2); }
|
|
.theme-toggle button {
|
|
padding: var(--space-2) var(--space-4);
|
|
border: 2px solid var(--color-border);
|
|
background: transparent;
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border-radius: var(--button-radius);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
.theme-toggle button.active {
|
|
border-color: var(--color-accent);
|
|
background: var(--color-accent);
|
|
color: var(--color-text-on-accent);
|
|
}
|
|
.theme-toggle button:hover:not(.active) {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* ---- Layout ---- */
|
|
.container { max-width: 1280px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
|
|
|
|
.section {
|
|
margin-bottom: var(--space-16);
|
|
}
|
|
.section-title {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight);
|
|
font-size: var(--text-3xl);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wide);
|
|
color: var(--color-text-primary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.section-subtitle {
|
|
font-size: var(--text-sm);
|
|
color: var(--color-text-tertiary);
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
/* ---- Grid helpers ---- */
|
|
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
|
|
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
|
|
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
|
|
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
|
|
.flex-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
|
|
.flex-col { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
|
|
@media (max-width: 768px) {
|
|
.grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ==== SECTION: Colors ==== */
|
|
.color-swatch {
|
|
border-radius: var(--component-radius);
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.color-swatch .preview {
|
|
height: 80px;
|
|
display: flex; align-items: flex-end; padding: var(--space-2);
|
|
}
|
|
.color-swatch .meta {
|
|
padding: var(--space-3);
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
.color-swatch .meta .name {
|
|
font-weight: 600; font-size: var(--text-sm);
|
|
color: var(--color-text-primary);
|
|
}
|
|
.color-swatch .meta .value {
|
|
font-family: var(--font-mono); font-size: var(--text-xs);
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
/* ==== SECTION: Typography ==== */
|
|
.type-row {
|
|
padding: var(--space-4) 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex; align-items: baseline; gap: var(--space-6);
|
|
}
|
|
.type-label {
|
|
min-width: 100px;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
color: var(--color-text-tertiary);
|
|
flex-shrink: 0;
|
|
}
|
|
.type-sample { flex: 1; }
|
|
|
|
/* ==== SECTION: Buttons ==== */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-5);
|
|
height: var(--input-height-md);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
border: 2px solid transparent;
|
|
border-radius: var(--button-radius);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-primary {
|
|
background: var(--color-accent);
|
|
color: var(--color-text-on-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
.btn-secondary:hover { background: var(--color-accent-subtle); }
|
|
.btn-danger {
|
|
background: var(--color-error);
|
|
color: #fff;
|
|
border-color: var(--color-error);
|
|
}
|
|
.btn-danger:hover { opacity: 0.9; }
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--color-text-secondary);
|
|
border-color: transparent;
|
|
}
|
|
.btn-ghost:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
|
|
.btn-sm { height: var(--input-height-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
|
|
.btn-lg { height: var(--input-height-lg); padding: var(--space-3) var(--space-8); font-size: var(--text-lg); }
|
|
.btn-icon {
|
|
width: var(--input-height-md); height: var(--input-height-md);
|
|
padding: 0; border-radius: var(--component-radius);
|
|
background: var(--color-bg-tertiary);
|
|
color: var(--color-text-secondary);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.btn-icon:hover { background: var(--color-bg-hover); color: var(--color-accent); border-color: var(--color-accent); }
|
|
|
|
/* ==== SECTION: Inputs ==== */
|
|
.input-group { display: flex; flex-direction: column; gap: var(--space-1); }
|
|
.input-group label {
|
|
font-size: var(--text-sm); font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.input {
|
|
height: var(--input-height-md);
|
|
padding: 0 var(--space-3);
|
|
background: var(--color-bg-input);
|
|
border: 1px solid var(--color-border-input);
|
|
border-radius: var(--input-radius);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-sm);
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
outline: none;
|
|
width: 100%;
|
|
}
|
|
.input:focus {
|
|
border-color: var(--color-border-focus);
|
|
box-shadow: 0 0 0 3px var(--color-accent-subtle);
|
|
}
|
|
.input::placeholder { color: var(--color-text-disabled); }
|
|
.input-error { border-color: var(--color-error); }
|
|
.input-error:focus { box-shadow: 0 0 0 3px var(--color-error-bg); }
|
|
.helper-text { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); }
|
|
.error-text { font-size: var(--text-xs); color: var(--color-error); margin-top: var(--space-1); }
|
|
|
|
textarea.input { height: auto; padding: var(--space-3); min-height: 100px; resize: vertical; }
|
|
|
|
.search-bar {
|
|
display: flex; align-items: center; gap: var(--space-2);
|
|
background: var(--color-bg-input);
|
|
border: 1px solid var(--color-border-input);
|
|
border-radius: var(--input-radius);
|
|
padding: 0 var(--space-3);
|
|
height: var(--input-height-lg);
|
|
transition: border-color var(--transition-fast);
|
|
}
|
|
.search-bar:focus-within { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
|
|
.search-bar .search-icon { color: var(--color-text-tertiary); flex-shrink: 0; }
|
|
.search-bar input {
|
|
flex: 1; border: none; background: transparent; outline: none;
|
|
color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-sm);
|
|
}
|
|
.search-bar input::placeholder { color: var(--color-text-disabled); }
|
|
|
|
/* Select */
|
|
.select {
|
|
appearance: none;
|
|
height: var(--input-height-md);
|
|
padding: 0 var(--space-8) 0 var(--space-3);
|
|
background: var(--color-bg-input) 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='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
|
|
border: 1px solid var(--color-border-input);
|
|
border-radius: var(--input-radius);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-body); font-size: var(--text-sm);
|
|
cursor: pointer; width: 100%;
|
|
}
|
|
.select:focus { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px var(--color-accent-subtle); outline: none; }
|
|
|
|
/* Checkbox & Radio */
|
|
.checkbox-group, .radio-group { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
|
|
.checkbox-group input, .radio-group input { accent-color: var(--color-accent); width: 18px; height: 18px; cursor: pointer; }
|
|
.checkbox-group span, .radio-group span { font-size: var(--text-sm); color: var(--color-text-primary); }
|
|
|
|
/* Toggle */
|
|
.toggle { position: relative; width: 44px; height: 24px; cursor: pointer; }
|
|
.toggle input { opacity: 0; width: 0; height: 0; }
|
|
.toggle .slider {
|
|
position: absolute; inset: 0;
|
|
background: var(--color-bg-hover);
|
|
border-radius: var(--radius-full);
|
|
border: 1px solid var(--color-border);
|
|
transition: background var(--transition-fast);
|
|
}
|
|
.toggle .slider::before {
|
|
content: '';
|
|
position: absolute; top: 2px; left: 2px;
|
|
width: 18px; height: 18px;
|
|
background: var(--color-text-secondary);
|
|
border-radius: 50%;
|
|
transition: transform var(--transition-fast), background var(--transition-fast);
|
|
}
|
|
.toggle input:checked + .slider { background: var(--color-accent); border-color: var(--color-accent); }
|
|
.toggle input:checked + .slider::before { transform: translateX(20px); background: var(--color-text-on-accent); }
|
|
|
|
/* ==== SECTION: Cards ==== */
|
|
.card {
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--card-radius);
|
|
overflow: hidden;
|
|
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-hover); }
|
|
.card-body { padding: var(--space-4); }
|
|
.card-header {
|
|
padding: var(--space-4);
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.card-footer {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
|
|
/* Product Card */
|
|
.product-card .product-img {
|
|
height: 160px;
|
|
background: var(--color-bg-tertiary);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: var(--color-text-disabled); font-size: var(--text-3xl);
|
|
}
|
|
.product-card .product-info { padding: var(--space-4); }
|
|
.product-card .product-name {
|
|
font-weight: 700; font-size: var(--text-sm);
|
|
color: var(--color-text-primary);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.product-card .product-sku {
|
|
font-family: var(--font-mono); font-size: var(--text-xs);
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
.product-card .product-price {
|
|
font-family: var(--font-mono); font-weight: 700;
|
|
font-size: var(--text-xl);
|
|
color: var(--color-accent);
|
|
margin-top: var(--space-3);
|
|
}
|
|
.product-card .product-compat {
|
|
font-size: var(--text-xs); color: var(--color-text-tertiary);
|
|
margin-top: var(--space-1);
|
|
}
|
|
.product-card .product-actions {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-top: 1px solid var(--color-border);
|
|
display: flex; gap: var(--space-2);
|
|
}
|
|
.product-card .product-actions .btn { flex: 1; }
|
|
|
|
/* Client Card */
|
|
.client-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); }
|
|
.client-card .avatar {
|
|
width: 48px; height: 48px; border-radius: 50%;
|
|
background: var(--color-accent-subtle);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-weight: 700; color: var(--color-accent); font-size: var(--text-lg);
|
|
flex-shrink: 0;
|
|
}
|
|
.client-card .client-name { font-weight: 600; color: var(--color-text-primary); }
|
|
.client-card .client-detail { font-size: var(--text-sm); color: var(--color-text-tertiary); }
|
|
|
|
/* Summary Card */
|
|
.summary-card { padding: var(--space-5); }
|
|
.summary-card .summary-label { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-1); }
|
|
.summary-card .summary-value {
|
|
font-family: var(--font-heading); font-weight: var(--heading-weight);
|
|
font-size: var(--text-3xl); color: var(--color-text-primary);
|
|
}
|
|
.summary-card .summary-change { font-size: var(--text-xs); margin-top: var(--space-1); }
|
|
.summary-card .summary-change.positive { color: var(--color-success); }
|
|
.summary-card .summary-change.negative { color: var(--color-error); }
|
|
|
|
/* ==== SECTION: Table ==== */
|
|
.table-wrapper {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--card-radius);
|
|
overflow: hidden;
|
|
}
|
|
table {
|
|
width: 100%; border-collapse: collapse;
|
|
font-size: var(--text-sm);
|
|
}
|
|
thead { background: var(--color-bg-secondary); }
|
|
th {
|
|
padding: var(--space-3) var(--space-4);
|
|
text-align: left; font-weight: 600;
|
|
color: var(--color-text-tertiary);
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wide);
|
|
border-bottom: 1px solid var(--color-border);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
th:hover { color: var(--color-accent); }
|
|
th .sort-icon { opacity: 0.4; margin-left: var(--space-1); }
|
|
td {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-bottom: 1px solid var(--color-border);
|
|
color: var(--color-text-primary);
|
|
}
|
|
tr:last-child td { border-bottom: none; }
|
|
tr:hover td { background: var(--color-bg-hover); }
|
|
.table-pagination {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: var(--space-3) var(--space-4);
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-bg-secondary);
|
|
font-size: var(--text-xs); color: var(--color-text-tertiary);
|
|
}
|
|
.table-pagination .page-btns { display: flex; gap: var(--space-1); }
|
|
.table-pagination .page-btn {
|
|
width: 32px; height: 32px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--component-radius);
|
|
background: transparent; color: var(--color-text-secondary);
|
|
font-size: var(--text-xs); cursor: pointer;
|
|
}
|
|
.table-pagination .page-btn.active {
|
|
background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent);
|
|
}
|
|
.table-pagination .page-btn:hover:not(.active) { border-color: var(--color-accent); color: var(--color-accent); }
|
|
|
|
/* ==== SECTION: Modal ==== */
|
|
.modal-backdrop {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0,0,0,0.6);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: var(--z-modal-backdrop);
|
|
/* For demo, relative positioning */
|
|
position: relative; min-height: 300px;
|
|
border-radius: var(--card-radius);
|
|
}
|
|
.modal {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--modal-radius);
|
|
width: 100%; max-width: 480px;
|
|
box-shadow: var(--shadow-xl);
|
|
}
|
|
.modal-header {
|
|
padding: var(--space-4) var(--space-5);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.modal-header h3 {
|
|
font-family: var(--font-heading); font-weight: var(--heading-weight-sub);
|
|
font-size: var(--text-lg); color: var(--color-text-primary);
|
|
}
|
|
.modal-close {
|
|
width: 32px; height: 32px; border: none; background: transparent;
|
|
color: var(--color-text-tertiary); font-size: var(--text-xl); cursor: pointer;
|
|
border-radius: var(--component-radius);
|
|
}
|
|
.modal-close:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
|
|
.modal-body { padding: var(--space-5); }
|
|
.modal-footer {
|
|
padding: var(--space-3) var(--space-5);
|
|
display: flex; justify-content: flex-end; gap: var(--space-3);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* ==== SECTION: Tabs ==== */
|
|
.tabs {
|
|
display: flex; gap: 0; border-bottom: 2px solid var(--color-border);
|
|
}
|
|
.tab {
|
|
padding: var(--space-3) var(--space-5);
|
|
font-size: var(--text-sm); font-weight: 600;
|
|
color: var(--color-text-tertiary);
|
|
border: none; background: transparent; cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
transition: color var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
.tab:hover { color: var(--color-text-primary); }
|
|
.tab.active {
|
|
color: var(--color-accent);
|
|
border-bottom-color: var(--color-accent);
|
|
}
|
|
|
|
/* ==== SECTION: Badges & Tags ==== */
|
|
.badge {
|
|
display: inline-flex; align-items: center; gap: var(--space-1);
|
|
padding: var(--space-1) var(--space-3);
|
|
font-size: var(--text-xs); font-weight: 600;
|
|
border-radius: var(--badge-radius);
|
|
white-space: nowrap;
|
|
}
|
|
.badge-accent { background: var(--color-accent-subtle); color: var(--color-accent); }
|
|
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
|
|
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
|
|
.badge-error { background: var(--color-error-bg); color: var(--color-error); }
|
|
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
|
|
.badge-neutral {
|
|
background: var(--color-bg-tertiary); color: var(--color-text-secondary);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.tag {
|
|
display: inline-flex; align-items: center; gap: var(--space-1);
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: var(--text-xs);
|
|
background: var(--color-bg-tertiary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--component-radius);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.tag .tag-remove {
|
|
cursor: pointer; opacity: 0.5; font-size: 10px;
|
|
}
|
|
.tag .tag-remove:hover { opacity: 1; color: var(--color-error); }
|
|
|
|
/* ==== SECTION: Toast / Notification ==== */
|
|
.toast {
|
|
display: flex; align-items: flex-start; gap: var(--space-3);
|
|
padding: var(--space-4);
|
|
border-radius: var(--component-radius);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-bg-elevated);
|
|
box-shadow: var(--shadow-lg);
|
|
max-width: 400px;
|
|
}
|
|
.toast-icon { font-size: var(--text-xl); flex-shrink: 0; line-height: 1; }
|
|
.toast-content { flex: 1; }
|
|
.toast-title { font-weight: 600; font-size: var(--text-sm); color: var(--color-text-primary); }
|
|
.toast-message { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 2px; }
|
|
.toast-success { border-left: 3px solid var(--color-success); }
|
|
.toast-error { border-left: 3px solid var(--color-error); }
|
|
.toast-warning { border-left: 3px solid var(--color-warning); }
|
|
.toast-info { border-left: 3px solid var(--color-info); }
|
|
|
|
/* ==== SECTION: Sidebar & Header ==== */
|
|
.header-demo {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 var(--space-5);
|
|
height: var(--header-height);
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--card-radius);
|
|
}
|
|
.header-logo {
|
|
font-family: var(--font-heading); font-weight: var(--heading-weight);
|
|
font-size: var(--text-xl); color: var(--color-accent);
|
|
text-transform: uppercase; letter-spacing: var(--tracking-wide);
|
|
}
|
|
.header-nav { display: flex; gap: var(--space-5); }
|
|
.header-nav a {
|
|
font-size: var(--text-sm); color: var(--color-text-secondary);
|
|
text-decoration: none; font-weight: 500;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
.header-nav a:hover, .header-nav a.active { color: var(--color-accent); }
|
|
.header-actions { display: flex; gap: var(--space-2); align-items: center; }
|
|
|
|
.sidebar-demo {
|
|
width: var(--sidebar-width);
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--card-radius);
|
|
padding: var(--space-4) 0;
|
|
display: inline-flex; flex-direction: column; vertical-align: top;
|
|
}
|
|
.sidebar-brand {
|
|
padding: 0 var(--space-5) var(--space-4);
|
|
border-bottom: 1px solid var(--color-border);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.sidebar-brand .logo {
|
|
font-family: var(--font-heading); font-weight: var(--heading-weight);
|
|
font-size: var(--text-lg); color: var(--color-accent);
|
|
text-transform: uppercase;
|
|
}
|
|
.sidebar-item {
|
|
display: flex; align-items: center; gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-5);
|
|
font-size: var(--text-sm); color: var(--color-text-secondary);
|
|
cursor: pointer; transition: all var(--transition-fast);
|
|
text-decoration: none; border: none; background: none; width: 100%;
|
|
font-family: var(--font-body);
|
|
}
|
|
.sidebar-item:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
|
|
.sidebar-item.active {
|
|
color: var(--color-accent);
|
|
background: var(--color-accent-subtle);
|
|
border-right: 3px solid var(--color-accent);
|
|
}
|
|
.sidebar-item .icon { width: 20px; text-align: center; }
|
|
.sidebar-section-label {
|
|
padding: var(--space-4) var(--space-5) var(--space-2);
|
|
font-size: var(--text-xs); font-weight: 700;
|
|
color: var(--color-text-disabled);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wider);
|
|
}
|
|
|
|
/* ==== SECTION: PIN Pad ==== */
|
|
.pinpad {
|
|
display: grid; grid-template-columns: repeat(3, 72px); gap: var(--space-2);
|
|
justify-content: center;
|
|
}
|
|
.pinpad-btn {
|
|
height: 72px; border-radius: var(--component-radius);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-bg-secondary);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-heading); font-weight: var(--heading-weight);
|
|
font-size: var(--text-2xl);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
.pinpad-btn:hover { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); }
|
|
.pinpad-btn.action { background: var(--color-bg-tertiary); font-size: var(--text-sm); font-weight: 600; }
|
|
.pinpad-dots {
|
|
display: flex; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-5);
|
|
}
|
|
.pinpad-dot {
|
|
width: 16px; height: 16px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-border);
|
|
background: transparent;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
.pinpad-dot.filled { background: var(--color-accent); border-color: var(--color-accent); }
|
|
|
|
/* ==== SECTION: Numpad ==== */
|
|
.numpad {
|
|
display: grid; grid-template-columns: repeat(3, 64px); gap: var(--space-2);
|
|
justify-content: center;
|
|
}
|
|
.numpad-display {
|
|
grid-column: 1 / -1;
|
|
text-align: right;
|
|
font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 700;
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--color-bg-input);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--component-radius);
|
|
color: var(--color-text-primary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.numpad-btn {
|
|
height: 56px; border-radius: var(--component-radius);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-bg-secondary);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-mono); font-weight: 600;
|
|
font-size: var(--text-lg);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
.numpad-btn:hover { background: var(--color-accent-subtle); border-color: var(--color-accent); }
|
|
.numpad-btn.accent { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); }
|
|
|
|
/* ==== SECTION: List Items (Cart/Inventory) ==== */
|
|
.list-item {
|
|
display: flex; align-items: center; gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-bottom: 1px solid var(--color-border);
|
|
transition: background var(--transition-fast);
|
|
}
|
|
.list-item:hover { background: var(--color-bg-hover); }
|
|
.list-item:last-child { border-bottom: none; }
|
|
.list-item .item-icon {
|
|
width: 40px; height: 40px;
|
|
border-radius: var(--component-radius);
|
|
background: var(--color-bg-tertiary);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: var(--color-text-tertiary); font-size: var(--text-lg);
|
|
flex-shrink: 0;
|
|
}
|
|
.list-item .item-info { flex: 1; }
|
|
.list-item .item-name { font-weight: 600; font-size: var(--text-sm); color: var(--color-text-primary); }
|
|
.list-item .item-detail { font-size: var(--text-xs); color: var(--color-text-tertiary); }
|
|
.list-item .item-qty {
|
|
display: flex; align-items: center; gap: var(--space-2);
|
|
}
|
|
.list-item .item-qty button {
|
|
width: 28px; height: 28px;
|
|
border: 1px solid var(--color-border); border-radius: var(--component-radius);
|
|
background: var(--color-bg-secondary); color: var(--color-text-primary);
|
|
cursor: pointer; font-size: var(--text-sm);
|
|
}
|
|
.list-item .item-qty span {
|
|
font-family: var(--font-mono); font-weight: 600; min-width: 24px; text-align: center;
|
|
}
|
|
.list-item .item-price {
|
|
font-family: var(--font-mono); font-weight: 700;
|
|
color: var(--color-accent); font-size: var(--text-sm);
|
|
text-align: right; min-width: 80px;
|
|
}
|
|
|
|
/* ==== SECTION: Avatars ==== */
|
|
.avatar-row { display: flex; gap: var(--space-3); align-items: center; }
|
|
.avatar {
|
|
display: flex; align-items: center; justify-content: center;
|
|
border-radius: 50%; font-weight: 700;
|
|
background: var(--color-accent-subtle); color: var(--color-accent);
|
|
}
|
|
.avatar-xs { width: 24px; height: 24px; font-size: var(--text-xs); }
|
|
.avatar-sm { width: 32px; height: 32px; font-size: var(--text-sm); }
|
|
.avatar-md { width: 40px; height: 40px; font-size: var(--text-base); }
|
|
.avatar-lg { width: 56px; height: 56px; font-size: var(--text-xl); }
|
|
|
|
/* ==== SECTION: Breadcrumbs ==== */
|
|
.breadcrumbs {
|
|
display: flex; align-items: center; gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.breadcrumbs a { color: var(--color-text-tertiary); text-decoration: none; }
|
|
.breadcrumbs a:hover { color: var(--color-accent); }
|
|
.breadcrumbs .separator { color: var(--color-text-disabled); }
|
|
.breadcrumbs .current { color: var(--color-text-primary); font-weight: 600; }
|
|
|
|
/* ==== SECTION: Dropdown ==== */
|
|
.dropdown-demo {
|
|
position: relative; display: inline-block;
|
|
}
|
|
.dropdown-menu {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--component-radius);
|
|
box-shadow: var(--shadow-lg);
|
|
min-width: 200px;
|
|
padding: var(--space-1) 0;
|
|
margin-top: var(--space-2);
|
|
}
|
|
.dropdown-item {
|
|
display: flex; align-items: center; gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-4);
|
|
font-size: var(--text-sm); color: var(--color-text-primary);
|
|
cursor: pointer; transition: background var(--transition-fast);
|
|
}
|
|
.dropdown-item:hover { background: var(--color-bg-hover); }
|
|
.dropdown-item.danger { color: var(--color-error); }
|
|
.dropdown-divider { height: 1px; background: var(--color-border); margin: var(--space-1) 0; }
|
|
|
|
/* ==== SECTION: Tooltip ==== */
|
|
.tooltip-demo { display: inline-flex; align-items: center; gap: var(--space-6); }
|
|
.tooltip-wrapper { position: relative; display: inline-block; }
|
|
.tooltip-trigger {
|
|
padding: var(--space-2) var(--space-4);
|
|
background: var(--color-bg-tertiary); border: 1px solid var(--color-border);
|
|
border-radius: var(--component-radius); color: var(--color-text-secondary);
|
|
font-size: var(--text-sm); cursor: help;
|
|
}
|
|
.tooltip-box {
|
|
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
|
|
background: var(--color-text-primary); color: var(--color-bg-primary);
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--component-radius);
|
|
font-size: var(--text-xs); white-space: nowrap;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.tooltip-box::after {
|
|
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
|
|
border: 5px solid transparent;
|
|
border-top-color: var(--color-text-primary);
|
|
}
|
|
|
|
/* ==== SECTION: Progress ==== */
|
|
.progress-bar {
|
|
width: 100%; height: 8px;
|
|
background: var(--color-bg-tertiary);
|
|
border-radius: var(--radius-full);
|
|
overflow: hidden;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: var(--radius-full);
|
|
transition: width var(--transition-base);
|
|
}
|
|
.progress-accent .progress-fill { background: var(--color-accent); }
|
|
.progress-success .progress-fill { background: var(--color-success); }
|
|
.progress-warning .progress-fill { background: var(--color-warning); }
|
|
.progress-error .progress-fill { background: var(--color-error); }
|
|
.progress-label {
|
|
display: flex; justify-content: space-between;
|
|
font-size: var(--text-xs); color: var(--color-text-tertiary);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
/* ==== SECTION: Empty State ==== */
|
|
.empty-state {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
padding: var(--space-16) var(--space-8);
|
|
text-align: center;
|
|
}
|
|
.empty-state .empty-icon {
|
|
font-size: 64px; color: var(--color-text-disabled); margin-bottom: var(--space-4);
|
|
}
|
|
.empty-state h3 {
|
|
font-family: var(--font-heading); font-weight: var(--heading-weight-sub);
|
|
font-size: var(--text-xl); color: var(--color-text-primary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.empty-state p {
|
|
color: var(--color-text-tertiary); font-size: var(--text-sm);
|
|
max-width: 360px; margin-bottom: var(--space-5);
|
|
}
|
|
|
|
/* ==== SECTION: Loading / Skeleton ==== */
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
.skeleton {
|
|
background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-hover) 50%, var(--color-bg-tertiary) 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
border-radius: var(--component-radius);
|
|
}
|
|
.skeleton-text { height: 14px; margin-bottom: var(--space-2); }
|
|
.skeleton-text.short { width: 60%; }
|
|
.skeleton-text.medium { width: 80%; }
|
|
.skeleton-heading { height: 24px; width: 50%; margin-bottom: var(--space-3); }
|
|
.skeleton-img { height: 160px; width: 100%; }
|
|
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
|
|
.skeleton-btn { height: 40px; width: 120px; }
|
|
|
|
/* ==== SECTION: Iconography ==== */
|
|
.icon-grid {
|
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--space-4);
|
|
}
|
|
.icon-item {
|
|
display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
|
|
padding: var(--space-4);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--component-radius);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
.icon-item:hover { border-color: var(--color-accent); background: var(--color-accent-subtle); }
|
|
.icon-item .icon-svg { font-size: 28px; color: var(--color-text-primary); }
|
|
.icon-item .icon-label { font-size: var(--text-xs); color: var(--color-text-tertiary); }
|
|
|
|
/* ==== Utility ==== */
|
|
.mono { font-family: var(--font-mono); }
|
|
.accent-text { color: var(--color-accent); }
|
|
.divider { height: 1px; background: var(--color-border); margin: var(--space-6) 0; }
|
|
.note {
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--color-info-bg);
|
|
border-left: 3px solid var(--color-info);
|
|
border-radius: var(--component-radius);
|
|
font-size: var(--text-sm); color: var(--color-text-secondary);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Theme Switcher Bar -->
|
|
<div class="theme-bar">
|
|
<h1>Nexus Autoparts — Design System</h1>
|
|
<div class="theme-toggle">
|
|
<button class="active" onclick="setTheme('industrial', this)">Tema A: Industrial</button>
|
|
<button onclick="setTheme('modern', this)">Tema B: Moderno</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<!-- ===================== COLORS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Paleta de Colores</h2>
|
|
<p class="section-subtitle">Colores primarios, accent, semánticos y neutrales para ambos temas.</p>
|
|
|
|
<h3 style="font-size:var(--text-sm); font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; margin-bottom:var(--space-3); letter-spacing:var(--tracking-wide);">Superficies</h3>
|
|
<div class="grid-5" style="margin-bottom:var(--space-6);">
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-bg-primary);"></div><div class="meta"><div class="name">BG Primary</div><div class="value">--color-bg-primary</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-bg-secondary);"></div><div class="meta"><div class="name">BG Secondary</div><div class="value">--color-bg-secondary</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-bg-tertiary);"></div><div class="meta"><div class="name">BG Tertiary</div><div class="value">--color-bg-tertiary</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-bg-elevated);"></div><div class="meta"><div class="name">BG Elevated</div><div class="value">--color-bg-elevated</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-bg-hover);"></div><div class="meta"><div class="name">BG Hover</div><div class="value">--color-bg-hover</div></div></div>
|
|
</div>
|
|
|
|
<h3 style="font-size:var(--text-sm); font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; margin-bottom:var(--space-3); letter-spacing:var(--tracking-wide);">Accent</h3>
|
|
<div class="grid-5" style="margin-bottom:var(--space-6);">
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-accent);"></div><div class="meta"><div class="name">Accent</div><div class="value">--color-accent</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-accent-hover);"></div><div class="meta"><div class="name">Accent Hover</div><div class="value">--color-accent-hover</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-accent-active);"></div><div class="meta"><div class="name">Accent Active</div><div class="value">--color-accent-active</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-accent-subtle); border:1px dashed var(--color-border);"></div><div class="meta"><div class="name">Accent Subtle</div><div class="value">--color-accent-subtle</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-accent-muted); border:1px dashed var(--color-border);"></div><div class="meta"><div class="name">Accent Muted</div><div class="value">--color-accent-muted</div></div></div>
|
|
</div>
|
|
|
|
<h3 style="font-size:var(--text-sm); font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; margin-bottom:var(--space-3); letter-spacing:var(--tracking-wide);">Semanticos</h3>
|
|
<div class="grid-4">
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-success);"></div><div class="meta"><div class="name">Success</div><div class="value">--color-success</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-warning);"></div><div class="meta"><div class="name">Warning</div><div class="value">--color-warning</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-error);"></div><div class="meta"><div class="name">Error</div><div class="value">--color-error</div></div></div>
|
|
<div class="color-swatch"><div class="preview" style="background:var(--color-info);"></div><div class="meta"><div class="name">Info</div><div class="value">--color-info</div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== TYPOGRAPHY ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Tipografia</h2>
|
|
<p class="section-subtitle">Escala tipografica con heading font y body font segun el tema activo.</p>
|
|
|
|
<div class="type-row"><span class="type-label">H1 / 60px</span><div class="type-sample" style="font-family:var(--font-heading); font-weight:var(--heading-weight); font-size:var(--text-6xl); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight);">Nexus Autoparts</div></div>
|
|
<div class="type-row"><span class="type-label">H2 / 48px</span><div class="type-sample" style="font-family:var(--font-heading); font-weight:var(--heading-weight); font-size:var(--text-5xl); line-height:var(--leading-tight);">Catalogo de Refacciones</div></div>
|
|
<div class="type-row"><span class="type-label">H3 / 36px</span><div class="type-sample" style="font-family:var(--font-heading); font-weight:var(--heading-weight-sub); font-size:var(--text-4xl); line-height:var(--leading-tight);">Punto de Venta</div></div>
|
|
<div class="type-row"><span class="type-label">H4 / 30px</span><div class="type-sample" style="font-family:var(--font-heading); font-weight:var(--heading-weight-sub); font-size:var(--text-3xl); line-height:var(--leading-tight);">Inventario General</div></div>
|
|
<div class="type-row"><span class="type-label">H5 / 24px</span><div class="type-sample" style="font-family:var(--font-heading); font-weight:var(--heading-weight-sub); font-size:var(--text-2xl);">Clientes Registrados</div></div>
|
|
<div class="type-row"><span class="type-label">H6 / 20px</span><div class="type-sample" style="font-family:var(--font-heading); font-weight:var(--heading-weight-sub); font-size:var(--text-xl);">Detalle de Factura</div></div>
|
|
<div class="type-row"><span class="type-label">Body / 16px</span><div class="type-sample">Busca entre mas de 1.4 millones de partes OEM y 300K aftermarket con compatibilidad verificada para cada vehiculo.</div></div>
|
|
<div class="type-row"><span class="type-label">Small / 14px</span><div class="type-sample" style="font-size:var(--text-sm);">Compatible con: Toyota Corolla 2018-2023, Honda Civic 2020-2024</div></div>
|
|
<div class="type-row"><span class="type-label">Caption / 12px</span><div class="type-sample" style="font-size:var(--text-xs); color:var(--color-text-tertiary);">Ultima actualizacion: hace 2 horas | SKU: NX-BRK-4521</div></div>
|
|
<div class="type-row"><span class="type-label">Mono / Price</span><div class="type-sample" style="font-family:var(--font-mono); font-size:var(--text-2xl); font-weight:700; color:var(--color-accent);">$1,245.00 MXN</div></div>
|
|
</div>
|
|
|
|
<!-- ===================== BUTTONS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Botones</h2>
|
|
<p class="section-subtitle">Primary, secondary, danger, ghost e icon buttons en 3 tamanos.</p>
|
|
|
|
<div class="flex-row" style="margin-bottom:var(--space-4);">
|
|
<button class="btn btn-primary">Agregar al Carrito</button>
|
|
<button class="btn btn-secondary">Ver Detalles</button>
|
|
<button class="btn btn-danger">Eliminar</button>
|
|
<button class="btn btn-ghost">Cancelar</button>
|
|
<button class="btn btn-icon">+</button>
|
|
</div>
|
|
<div class="flex-row" style="margin-bottom:var(--space-4);">
|
|
<button class="btn btn-primary btn-sm">Pequeno</button>
|
|
<button class="btn btn-primary">Normal</button>
|
|
<button class="btn btn-primary btn-lg">Grande</button>
|
|
</div>
|
|
<div class="flex-row">
|
|
<button class="btn btn-primary" disabled style="opacity:0.5; cursor:not-allowed;">Deshabilitado</button>
|
|
<button class="btn btn-secondary" disabled style="opacity:0.5; cursor:not-allowed;">Deshabilitado</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== INPUTS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Inputs y Formularios</h2>
|
|
<p class="section-subtitle">Text, search, select, checkbox, radio, toggle.</p>
|
|
|
|
<div class="grid-2" style="margin-bottom:var(--space-6);">
|
|
<div class="input-group">
|
|
<label>Nombre del Producto</label>
|
|
<input type="text" class="input" placeholder="Ej: Balata delantera...">
|
|
<span class="helper-text">Ingresa el nombre o numero de parte</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Precio (MXN)</label>
|
|
<input type="number" class="input" placeholder="0.00">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Correo (con error)</label>
|
|
<input type="email" class="input input-error" value="correo-invalido">
|
|
<span class="error-text">El correo no tiene un formato valido</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Categoria</label>
|
|
<select class="select">
|
|
<option>Seleccionar categoria...</option>
|
|
<option>Frenos</option>
|
|
<option>Motor</option>
|
|
<option>Suspension</option>
|
|
<option>Electrico</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Bar -->
|
|
<div style="margin-bottom:var(--space-6);">
|
|
<label style="font-size:var(--text-sm); font-weight:600; color:var(--color-text-secondary); display:block; margin-bottom:var(--space-2);">Barra de Busqueda</label>
|
|
<div class="search-bar">
|
|
<span class="search-icon">🔍</span>
|
|
<input type="text" placeholder="Buscar por nombre, numero de parte o vehiculo...">
|
|
<button class="btn btn-primary btn-sm">Buscar</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checkbox, Radio, Toggle -->
|
|
<div class="grid-3">
|
|
<div class="flex-col">
|
|
<strong style="font-size:var(--text-sm); color:var(--color-text-secondary);">Checkbox</strong>
|
|
<label class="checkbox-group"><input type="checkbox" checked><span>En stock</span></label>
|
|
<label class="checkbox-group"><input type="checkbox"><span>Solo ofertas</span></label>
|
|
<label class="checkbox-group"><input type="checkbox"><span>Envio gratis</span></label>
|
|
</div>
|
|
<div class="flex-col">
|
|
<strong style="font-size:var(--text-sm); color:var(--color-text-secondary);">Radio</strong>
|
|
<label class="radio-group"><input type="radio" name="payment" checked><span>Efectivo</span></label>
|
|
<label class="radio-group"><input type="radio" name="payment"><span>Tarjeta</span></label>
|
|
<label class="radio-group"><input type="radio" name="payment"><span>Transferencia</span></label>
|
|
</div>
|
|
<div class="flex-col">
|
|
<strong style="font-size:var(--text-sm); color:var(--color-text-secondary);">Toggle</strong>
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<label class="toggle"><input type="checkbox" checked><span class="slider"></span></label>
|
|
<span style="font-size:var(--text-sm);">Notificaciones</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<label class="toggle"><input type="checkbox"><span class="slider"></span></label>
|
|
<span style="font-size:var(--text-sm);">Modo oscuro</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== CARDS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Cards</h2>
|
|
<p class="section-subtitle">Producto, cliente y resumen (dashboard).</p>
|
|
|
|
<h3 style="font-size:var(--text-sm); font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; margin-bottom:var(--space-3);">Tarjeta de Producto</h3>
|
|
<div class="grid-3" style="margin-bottom:var(--space-8);">
|
|
<div class="card product-card">
|
|
<div class="product-img">⚙</div>
|
|
<div class="product-info">
|
|
<div class="product-name">Balata Delantera Ceramica</div>
|
|
<div class="product-sku">SKU: NX-BRK-4521</div>
|
|
<div class="product-price">$845.00</div>
|
|
<div class="product-compat">Toyota Corolla 2018-2023</div>
|
|
</div>
|
|
<div class="product-actions">
|
|
<button class="btn btn-primary btn-sm">Agregar</button>
|
|
<button class="btn btn-secondary btn-sm">Detalles</button>
|
|
</div>
|
|
</div>
|
|
<div class="card product-card">
|
|
<div class="product-img">⚙</div>
|
|
<div class="product-info">
|
|
<div class="product-name">Filtro de Aceite Premium</div>
|
|
<div class="product-sku">SKU: NX-FLT-8832</div>
|
|
<div class="product-price">$189.00</div>
|
|
<div class="product-compat">Honda Civic 2020-2024</div>
|
|
</div>
|
|
<div class="product-actions">
|
|
<button class="btn btn-primary btn-sm">Agregar</button>
|
|
<button class="btn btn-secondary btn-sm">Detalles</button>
|
|
</div>
|
|
</div>
|
|
<div class="card product-card">
|
|
<div class="product-img">⚙</div>
|
|
<div class="product-info">
|
|
<div class="product-name">Amortiguador Trasero</div>
|
|
<div class="product-sku">SKU: NX-SUS-2211</div>
|
|
<div class="product-price">$1,650.00</div>
|
|
<div class="product-compat">Nissan Sentra 2019-2023</div>
|
|
</div>
|
|
<div class="product-actions">
|
|
<button class="btn btn-primary btn-sm">Agregar</button>
|
|
<button class="btn btn-secondary btn-sm">Detalles</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="font-size:var(--text-sm); font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; margin-bottom:var(--space-3);">Tarjeta de Cliente</h3>
|
|
<div class="grid-3" style="margin-bottom:var(--space-8);">
|
|
<div class="card client-card">
|
|
<div class="avatar">JR</div>
|
|
<div><div class="client-name">Juan Rodriguez</div><div class="client-detail">Taller Mecanico Rodriguez</div></div>
|
|
</div>
|
|
<div class="card client-card">
|
|
<div class="avatar">ML</div>
|
|
<div><div class="client-name">Maria Lopez</div><div class="client-detail">Refaccionaria La Central</div></div>
|
|
</div>
|
|
<div class="card client-card">
|
|
<div class="avatar">CP</div>
|
|
<div><div class="client-name">Carlos Perez</div><div class="client-detail">AutoServicio Express</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="font-size:var(--text-sm); font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; margin-bottom:var(--space-3);">Tarjeta Resumen (Dashboard)</h3>
|
|
<div class="grid-4">
|
|
<div class="card summary-card">
|
|
<div class="summary-label">Ventas Hoy</div>
|
|
<div class="summary-value">$24,580</div>
|
|
<div class="summary-change positive">+12.5% vs ayer</div>
|
|
</div>
|
|
<div class="card summary-card">
|
|
<div class="summary-label">Productos Vendidos</div>
|
|
<div class="summary-value">47</div>
|
|
<div class="summary-change positive">+8 unidades</div>
|
|
</div>
|
|
<div class="card summary-card">
|
|
<div class="summary-label">Clientes Nuevos</div>
|
|
<div class="summary-value">5</div>
|
|
<div class="summary-change positive">+2 esta semana</div>
|
|
</div>
|
|
<div class="card summary-card">
|
|
<div class="summary-label">Stock Bajo</div>
|
|
<div class="summary-value">12</div>
|
|
<div class="summary-change negative">Requiere atencion</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== TABLE ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Tabla con Paginacion</h2>
|
|
<p class="section-subtitle">Tabla de datos con sorting y paginacion para inventario, ventas, etc.</p>
|
|
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>SKU <span class="sort-icon">▲</span></th>
|
|
<th>Producto <span class="sort-icon">▼</span></th>
|
|
<th>Categoria</th>
|
|
<th>Stock</th>
|
|
<th>Precio</th>
|
|
<th>Estado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="mono">NX-BRK-4521</td>
|
|
<td>Balata Delantera Ceramica</td>
|
|
<td>Frenos</td>
|
|
<td class="mono">124</td>
|
|
<td class="mono accent-text">$845.00</td>
|
|
<td><span class="badge badge-success">En stock</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">NX-FLT-8832</td>
|
|
<td>Filtro de Aceite Premium</td>
|
|
<td>Motor</td>
|
|
<td class="mono">58</td>
|
|
<td class="mono accent-text">$189.00</td>
|
|
<td><span class="badge badge-success">En stock</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">NX-SUS-2211</td>
|
|
<td>Amortiguador Trasero</td>
|
|
<td>Suspension</td>
|
|
<td class="mono">3</td>
|
|
<td class="mono accent-text">$1,650.00</td>
|
|
<td><span class="badge badge-warning">Stock bajo</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">NX-ELC-1105</td>
|
|
<td>Alternador Remanufacturado</td>
|
|
<td>Electrico</td>
|
|
<td class="mono">0</td>
|
|
<td class="mono accent-text">$3,200.00</td>
|
|
<td><span class="badge badge-error">Agotado</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="mono">NX-MTR-7744</td>
|
|
<td>Junta de Cabeza</td>
|
|
<td>Motor</td>
|
|
<td class="mono">22</td>
|
|
<td class="mono accent-text">$520.00</td>
|
|
<td><span class="badge badge-success">En stock</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="table-pagination">
|
|
<span>Mostrando 1-5 de 1,423,847 productos</span>
|
|
<div class="page-btns">
|
|
<button class="page-btn">«</button>
|
|
<button class="page-btn active">1</button>
|
|
<button class="page-btn">2</button>
|
|
<button class="page-btn">3</button>
|
|
<button class="page-btn">...</button>
|
|
<button class="page-btn">284,770</button>
|
|
<button class="page-btn">»</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== MODAL ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Modal / Dialog</h2>
|
|
<p class="section-subtitle">Ventana modal para confirmaciones, formularios y alertas.</p>
|
|
|
|
<div class="modal-backdrop">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3>Confirmar Venta</h3>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p style="color:var(--color-text-secondary); font-size:var(--text-sm); margin-bottom:var(--space-4);">Estas a punto de procesar una venta por <strong class="accent-text">$3,284.00 MXN</strong> para el cliente <strong>Juan Rodriguez</strong>.</p>
|
|
<div class="input-group">
|
|
<label>Metodo de pago</label>
|
|
<select class="select">
|
|
<option>Efectivo</option>
|
|
<option>Tarjeta</option>
|
|
<option>Transferencia</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-ghost">Cancelar</button>
|
|
<button class="btn btn-primary">Confirmar Venta</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== TABS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Tabs / Navegacion</h2>
|
|
<p class="section-subtitle">Tabs para secciones como Inventario (7 tabs) y Contabilidad.</p>
|
|
|
|
<div class="tabs" style="margin-bottom:var(--space-4);">
|
|
<button class="tab active">General</button>
|
|
<button class="tab">Stock</button>
|
|
<button class="tab">Precios</button>
|
|
<button class="tab">Proveedores</button>
|
|
<button class="tab">Historial</button>
|
|
<button class="tab">Ubicacion</button>
|
|
<button class="tab">Notas</button>
|
|
</div>
|
|
<div class="card" style="padding:var(--space-5);">
|
|
<p style="color:var(--color-text-tertiary); font-size:var(--text-sm);">Contenido de la tab "General" se muestra aqui. Cada tab carga su contenido correspondiente.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== BADGES & TAGS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Badges y Tags</h2>
|
|
<p class="section-subtitle">Indicadores de estado, categorias y etiquetas removibles.</p>
|
|
|
|
<h3 style="font-size:var(--text-sm); font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; margin-bottom:var(--space-3);">Badges</h3>
|
|
<div class="flex-row" style="margin-bottom:var(--space-6);">
|
|
<span class="badge badge-accent">Nuevo</span>
|
|
<span class="badge badge-success">En stock</span>
|
|
<span class="badge badge-warning">Stock bajo</span>
|
|
<span class="badge badge-error">Agotado</span>
|
|
<span class="badge badge-info">Pedido</span>
|
|
<span class="badge badge-neutral">Inactivo</span>
|
|
</div>
|
|
|
|
<h3 style="font-size:var(--text-sm); font-weight:700; color:var(--color-text-tertiary); text-transform:uppercase; margin-bottom:var(--space-3);">Tags</h3>
|
|
<div class="flex-row">
|
|
<span class="tag">Frenos <span class="tag-remove">×</span></span>
|
|
<span class="tag">Toyota <span class="tag-remove">×</span></span>
|
|
<span class="tag">2020-2024 <span class="tag-remove">×</span></span>
|
|
<span class="tag">OEM <span class="tag-remove">×</span></span>
|
|
<span class="tag">Ceramica <span class="tag-remove">×</span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== TOASTS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Toasts / Notificaciones</h2>
|
|
<p class="section-subtitle">Mensajes de feedback para acciones del usuario.</p>
|
|
|
|
<div class="flex-col" style="gap:var(--space-4);">
|
|
<div class="toast toast-success">
|
|
<span class="toast-icon">✔</span>
|
|
<div class="toast-content"><div class="toast-title">Venta completada</div><div class="toast-message">Folio #NX-2024-0847 generado exitosamente</div></div>
|
|
</div>
|
|
<div class="toast toast-error">
|
|
<span class="toast-icon">❌</span>
|
|
<div class="toast-content"><div class="toast-title">Error al procesar</div><div class="toast-message">No se pudo conectar con el servidor de facturacion</div></div>
|
|
</div>
|
|
<div class="toast toast-warning">
|
|
<span class="toast-icon">⚠</span>
|
|
<div class="toast-content"><div class="toast-title">Stock insuficiente</div><div class="toast-message">Solo quedan 3 unidades de NX-SUS-2211</div></div>
|
|
</div>
|
|
<div class="toast toast-info">
|
|
<span class="toast-icon">ℹ</span>
|
|
<div class="toast-content"><div class="toast-title">Actualizacion disponible</div><div class="toast-message">Hay 247 nuevas partes en el catalogo</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SIDEBAR & HEADER ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Sidebar y Header</h2>
|
|
<p class="section-subtitle">Navegacion principal de la aplicacion POS.</p>
|
|
|
|
<div class="header-demo" style="margin-bottom:var(--space-6);">
|
|
<div class="header-logo">⚙ Nexus Autoparts</div>
|
|
<div class="header-nav">
|
|
<a href="#" class="active">POS</a>
|
|
<a href="#">Catalogo</a>
|
|
<a href="#">Inventario</a>
|
|
<a href="#">Clientes</a>
|
|
<a href="#">Reportes</a>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="btn btn-icon">🔔</button>
|
|
<div class="avatar avatar-sm" style="font-size:var(--text-xs);">IA</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-demo">
|
|
<div class="sidebar-brand"><div class="logo">⚙ Nexus</div></div>
|
|
<div class="sidebar-section-label">Principal</div>
|
|
<button class="sidebar-item"><span class="icon">📈</span> Dashboard</button>
|
|
<button class="sidebar-item active"><span class="icon">💰</span> Punto de Venta</button>
|
|
<button class="sidebar-item"><span class="icon">🔍</span> Catalogo</button>
|
|
<button class="sidebar-item"><span class="icon">📦</span> Inventario</button>
|
|
<div class="sidebar-section-label">Gestion</div>
|
|
<button class="sidebar-item"><span class="icon">👤</span> Clientes</button>
|
|
<button class="sidebar-item"><span class="icon">📄</span> Facturacion</button>
|
|
<button class="sidebar-item"><span class="icon">📊</span> Contabilidad</button>
|
|
<button class="sidebar-item"><span class="icon">📋</span> Reportes</button>
|
|
<div class="sidebar-section-label">Sistema</div>
|
|
<button class="sidebar-item"><span class="icon">⚙</span> Configuracion</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== PIN PAD ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">PIN Pad</h2>
|
|
<p class="section-subtitle">Acceso rapido por PIN numerico para login.</p>
|
|
|
|
<div style="max-width:280px; margin:0 auto;">
|
|
<div style="text-align:center; margin-bottom:var(--space-4);">
|
|
<div style="font-family:var(--font-heading); font-weight:var(--heading-weight); font-size:var(--text-xl); color:var(--color-accent); margin-bottom:var(--space-3);">🔒 Ingresa tu PIN</div>
|
|
<div class="pinpad-dots">
|
|
<div class="pinpad-dot filled"></div>
|
|
<div class="pinpad-dot filled"></div>
|
|
<div class="pinpad-dot"></div>
|
|
<div class="pinpad-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="pinpad">
|
|
<button class="pinpad-btn">1</button>
|
|
<button class="pinpad-btn">2</button>
|
|
<button class="pinpad-btn">3</button>
|
|
<button class="pinpad-btn">4</button>
|
|
<button class="pinpad-btn">5</button>
|
|
<button class="pinpad-btn">6</button>
|
|
<button class="pinpad-btn">7</button>
|
|
<button class="pinpad-btn">8</button>
|
|
<button class="pinpad-btn">9</button>
|
|
<button class="pinpad-btn action">⌫</button>
|
|
<button class="pinpad-btn">0</button>
|
|
<button class="pinpad-btn action" style="background:var(--color-accent); color:var(--color-text-on-accent); border-color:var(--color-accent);">✔</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== NUMPAD ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Numpad</h2>
|
|
<p class="section-subtitle">Teclado numerico para cantidades y precios en POS.</p>
|
|
|
|
<div style="max-width:230px; margin:0 auto;">
|
|
<div class="numpad">
|
|
<div class="numpad-display">$1,245.00</div>
|
|
<button class="numpad-btn">1</button>
|
|
<button class="numpad-btn">2</button>
|
|
<button class="numpad-btn">3</button>
|
|
<button class="numpad-btn">4</button>
|
|
<button class="numpad-btn">5</button>
|
|
<button class="numpad-btn">6</button>
|
|
<button class="numpad-btn">7</button>
|
|
<button class="numpad-btn">8</button>
|
|
<button class="numpad-btn">9</button>
|
|
<button class="numpad-btn">.</button>
|
|
<button class="numpad-btn">0</button>
|
|
<button class="numpad-btn accent">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== LIST ITEMS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Listas (Carrito / Inventario)</h2>
|
|
<p class="section-subtitle">Items de lista con cantidad, precio y acciones.</p>
|
|
|
|
<div class="card" style="max-width:600px;">
|
|
<div class="card-header">
|
|
<strong style="font-size:var(--text-sm);">Carrito de Venta</strong>
|
|
<span class="badge badge-accent">3 items</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="item-icon">⚙</div>
|
|
<div class="item-info">
|
|
<div class="item-name">Balata Delantera Ceramica</div>
|
|
<div class="item-detail">NX-BRK-4521 | Toyota Corolla</div>
|
|
</div>
|
|
<div class="item-qty"><button>-</button><span>2</span><button>+</button></div>
|
|
<div class="item-price">$1,690.00</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="item-icon">⚙</div>
|
|
<div class="item-info">
|
|
<div class="item-name">Filtro de Aceite Premium</div>
|
|
<div class="item-detail">NX-FLT-8832 | Honda Civic</div>
|
|
</div>
|
|
<div class="item-qty"><button>-</button><span>1</span><button>+</button></div>
|
|
<div class="item-price">$189.00</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="item-icon">⚙</div>
|
|
<div class="item-info">
|
|
<div class="item-name">Amortiguador Trasero</div>
|
|
<div class="item-detail">NX-SUS-2211 | Nissan Sentra</div>
|
|
</div>
|
|
<div class="item-qty"><button>-</button><span>1</span><button>+</button></div>
|
|
<div class="item-price">$1,650.00</div>
|
|
</div>
|
|
<div class="card-footer" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<strong style="font-size:var(--text-sm); color:var(--color-text-secondary);">Total</strong>
|
|
<strong style="font-family:var(--font-mono); font-size:var(--text-xl); color:var(--color-accent);">$3,529.00</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== AVATARS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Avatares</h2>
|
|
<p class="section-subtitle">Iniciales de usuario en diferentes tamanos.</p>
|
|
|
|
<div class="avatar-row">
|
|
<div class="avatar avatar-xs">I</div>
|
|
<div class="avatar avatar-sm">IA</div>
|
|
<div class="avatar avatar-md">IA</div>
|
|
<div class="avatar avatar-lg">IA</div>
|
|
<span style="font-size:var(--text-sm); color:var(--color-text-tertiary); margin-left:var(--space-4);">XS (24) / SM (32) / MD (40) / LG (56)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== BREADCRUMBS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Breadcrumbs</h2>
|
|
<p class="section-subtitle">Navegacion jerárquica para secciones profundas.</p>
|
|
|
|
<div class="breadcrumbs" style="margin-bottom:var(--space-4);">
|
|
<a href="#">Inicio</a>
|
|
<span class="separator">/</span>
|
|
<a href="#">Inventario</a>
|
|
<span class="separator">/</span>
|
|
<a href="#">Frenos</a>
|
|
<span class="separator">/</span>
|
|
<span class="current">Balata Delantera Ceramica</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== DROPDOWN ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Dropdown</h2>
|
|
<p class="section-subtitle">Menu contextual para acciones secundarias.</p>
|
|
|
|
<div class="dropdown-demo">
|
|
<button class="btn btn-secondary">Acciones ▾</button>
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-item">✎ Editar producto</div>
|
|
<div class="dropdown-item">📋 Duplicar</div>
|
|
<div class="dropdown-item">🖨 Exportar PDF</div>
|
|
<div class="dropdown-divider"></div>
|
|
<div class="dropdown-item danger">🗑 Eliminar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== TOOLTIP ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Tooltips</h2>
|
|
<p class="section-subtitle">Informacion contextual al hover.</p>
|
|
|
|
<div class="tooltip-demo">
|
|
<div class="tooltip-wrapper">
|
|
<span class="tooltip-trigger">Hover aqui</span>
|
|
<div class="tooltip-box">Balata ceramica de alto rendimiento</div>
|
|
</div>
|
|
<div class="tooltip-wrapper">
|
|
<span class="tooltip-trigger">Stock info</span>
|
|
<div class="tooltip-box">124 unidades disponibles en almacen</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== PROGRESS BARS ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Barras de Progreso</h2>
|
|
<p class="section-subtitle">Indicadores de progreso para stock, metas y procesos.</p>
|
|
|
|
<div class="flex-col" style="max-width:500px; gap:var(--space-5);">
|
|
<div>
|
|
<div class="progress-label"><span>Meta de ventas diaria</span><span>78%</span></div>
|
|
<div class="progress-bar progress-accent"><div class="progress-fill" style="width:78%;"></div></div>
|
|
</div>
|
|
<div>
|
|
<div class="progress-label"><span>Stock balatas</span><span>92%</span></div>
|
|
<div class="progress-bar progress-success"><div class="progress-fill" style="width:92%;"></div></div>
|
|
</div>
|
|
<div>
|
|
<div class="progress-label"><span>Stock amortiguadores</span><span>15%</span></div>
|
|
<div class="progress-bar progress-warning"><div class="progress-fill" style="width:15%;"></div></div>
|
|
</div>
|
|
<div>
|
|
<div class="progress-label"><span>Stock alternadores</span><span>0%</span></div>
|
|
<div class="progress-bar progress-error"><div class="progress-fill" style="width:3%;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== EMPTY STATE ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Empty States</h2>
|
|
<p class="section-subtitle">Estados vacios cuando no hay datos que mostrar.</p>
|
|
|
|
<div class="card">
|
|
<div class="empty-state">
|
|
<div class="empty-icon">🔍</div>
|
|
<h3>No se encontraron resultados</h3>
|
|
<p>No hay productos que coincidan con tu busqueda. Intenta con otro termino o revisa los filtros aplicados.</p>
|
|
<button class="btn btn-primary">Limpiar Filtros</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== LOADING / SKELETON ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Loading States / Skeleton</h2>
|
|
<p class="section-subtitle">Placeholders de carga mientras se obtienen datos.</p>
|
|
|
|
<div class="grid-3">
|
|
<div class="card" style="padding:var(--space-4);">
|
|
<div class="skeleton skeleton-img" style="margin-bottom:var(--space-3);"></div>
|
|
<div class="skeleton skeleton-heading"></div>
|
|
<div class="skeleton skeleton-text"></div>
|
|
<div class="skeleton skeleton-text short"></div>
|
|
</div>
|
|
<div class="card" style="padding:var(--space-4);">
|
|
<div style="display:flex; gap:var(--space-3); margin-bottom:var(--space-3);">
|
|
<div class="skeleton skeleton-avatar"></div>
|
|
<div style="flex:1;">
|
|
<div class="skeleton skeleton-text" style="width:60%;"></div>
|
|
<div class="skeleton skeleton-text short" style="width:40%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="skeleton skeleton-text"></div>
|
|
<div class="skeleton skeleton-text medium"></div>
|
|
<div class="skeleton skeleton-text short"></div>
|
|
</div>
|
|
<div class="card" style="padding:var(--space-4);">
|
|
<div class="skeleton skeleton-heading" style="width:40%;"></div>
|
|
<div class="skeleton" style="height:80px; margin-bottom:var(--space-3);"></div>
|
|
<div style="display:flex; gap:var(--space-2);">
|
|
<div class="skeleton skeleton-btn"></div>
|
|
<div class="skeleton skeleton-btn" style="width:80px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== ICONOGRAPHY ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Iconografia POS</h2>
|
|
<p class="section-subtitle">Set de iconos consistente para el sistema POS.</p>
|
|
|
|
<div class="icon-grid">
|
|
<div class="icon-item"><div class="icon-svg">🛒</div><div class="icon-label">Carrito</div></div>
|
|
<div class="icon-item"><div class="icon-svg">⚙</div><div class="icon-label">Producto</div></div>
|
|
<div class="icon-item"><div class="icon-svg">👤</div><div class="icon-label">Cliente</div></div>
|
|
<div class="icon-item"><div class="icon-svg">📄</div><div class="icon-label">Factura</div></div>
|
|
<div class="icon-item"><div class="icon-svg">📦</div><div class="icon-label">Inventario</div></div>
|
|
<div class="icon-item"><div class="icon-svg">📈</div><div class="icon-label">Dashboard</div></div>
|
|
<div class="icon-item"><div class="icon-svg">⚙</div><div class="icon-label">Config</div></div>
|
|
<div class="icon-item"><div class="icon-svg">🔍</div><div class="icon-label">Buscar</div></div>
|
|
<div class="icon-item"><div class="icon-svg">💰</div><div class="icon-label">Ventas</div></div>
|
|
<div class="icon-item"><div class="icon-svg">📊</div><div class="icon-label">Reportes</div></div>
|
|
<div class="icon-item"><div class="icon-svg">🔒</div><div class="icon-label">Login</div></div>
|
|
<div class="icon-item"><div class="icon-svg">🔔</div><div class="icon-label">Alertas</div></div>
|
|
</div>
|
|
<div class="note" style="margin-top:var(--space-4);">
|
|
<strong>Nota:</strong> En produccion, reemplazar emojis por un set SVG consistente (Lucide Icons, Phosphor, o iconos custom). Los emojis son solo placeholder.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SPACING REFERENCE ===================== -->
|
|
<div class="section">
|
|
<h2 class="section-title">Referencia de Espaciado</h2>
|
|
<p class="section-subtitle">Grid base de 4px para mantener consistencia visual.</p>
|
|
|
|
<div class="flex-col" style="gap:var(--space-3);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
|
<span class="mono" style="min-width:100px; font-size:var(--text-xs); color:var(--color-text-tertiary);">4px (space-1)</span>
|
|
<div style="height:16px; width:4px; background:var(--color-accent); border-radius:2px;"></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
|
<span class="mono" style="min-width:100px; font-size:var(--text-xs); color:var(--color-text-tertiary);">8px (space-2)</span>
|
|
<div style="height:16px; width:8px; background:var(--color-accent); border-radius:2px;"></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
|
<span class="mono" style="min-width:100px; font-size:var(--text-xs); color:var(--color-text-tertiary);">16px (space-4)</span>
|
|
<div style="height:16px; width:16px; background:var(--color-accent); border-radius:2px;"></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
|
<span class="mono" style="min-width:100px; font-size:var(--text-xs); color:var(--color-text-tertiary);">24px (space-6)</span>
|
|
<div style="height:16px; width:24px; background:var(--color-accent); border-radius:2px;"></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
|
<span class="mono" style="min-width:100px; font-size:var(--text-xs); color:var(--color-text-tertiary);">32px (space-8)</span>
|
|
<div style="height:16px; width:32px; background:var(--color-accent); border-radius:2px;"></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
|
<span class="mono" style="min-width:100px; font-size:var(--text-xs); color:var(--color-text-tertiary);">48px (space-12)</span>
|
|
<div style="height:16px; width:48px; background:var(--color-accent); border-radius:2px;"></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
|
<span class="mono" style="min-width:100px; font-size:var(--text-xs); color:var(--color-text-tertiary);">64px (space-16)</span>
|
|
<div style="height:16px; width:64px; background:var(--color-accent); border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /container -->
|
|
|
|
<script>
|
|
function setTheme(theme, btn) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
document.querySelectorAll('.theme-toggle button').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|