consultoria-as
04340f2f29
Demo/sample rows in HTML tables were visible on first render before JS populated real data. Replaced all hardcoded tbody rows and finance cards with empty containers that JS populates from API on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1742 lines
58 KiB
HTML
1742 lines
58 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" data-theme="industrial">
|
|
<head>
|
|
<script>/*pos_theme_early*/(function(){var t=localStorage.getItem("pos_theme")||"industrial";document.documentElement.setAttribute("data-theme",t);})()</script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Contabilidad — Nexus Autoparts POS</title>
|
|
<link rel="stylesheet" href="/pos/static/css/tokens.css" />
|
|
<link rel="manifest" href="/pos/static/pwa/manifest.json" />
|
|
<meta name="theme-color" content="#F5A623" />
|
|
|
|
<style>
|
|
/* =========================================================================
|
|
BASE RESET & SHELL
|
|
========================================================================= */
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-base);
|
|
transition: background-color var(--duration-normal) var(--ease-in-out),
|
|
color var(--duration-normal) var(--ease-in-out);
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-theme="modern"] body {
|
|
background-color: var(--color-bg-base);
|
|
background-image: radial-gradient(
|
|
circle,
|
|
var(--dot-grid-color) 1px,
|
|
transparent 1px
|
|
);
|
|
background-size: var(--dot-grid-size) var(--dot-grid-size);
|
|
}
|
|
|
|
/* =========================================================================
|
|
THEME SWITCHER BAR
|
|
========================================================================= */
|
|
|
|
.theme-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: var(--z-toast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 var(--space-5);
|
|
background: var(--color-bg-overlay);
|
|
border-bottom: 1px solid var(--color-border);
|
|
backdrop-filter: blur(10px);
|
|
height: 36px;
|
|
}
|
|
|
|
[data-theme="industrial"] .theme-bar {
|
|
background: rgba(13, 13, 13, 0.95);
|
|
border-bottom-color: var(--color-primary-muted);
|
|
}
|
|
|
|
.theme-bar__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.theme-bar__store {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: 0.75rem;
|
|
letter-spacing: var(--tracking-widest);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-accent);
|
|
}
|
|
|
|
.theme-bar__dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--color-success);
|
|
border-radius: var(--radius-full);
|
|
box-shadow: 0 0 6px var(--color-success);
|
|
animation: blink 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.35; }
|
|
}
|
|
|
|
.theme-bar__sep {
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--color-border);
|
|
}
|
|
|
|
.theme-bar__label {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.theme-bar__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.theme-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: 2px var(--space-3);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-full);
|
|
background: transparent;
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
letter-spacing: var(--tracking-wide);
|
|
}
|
|
|
|
.theme-btn:hover {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.theme-btn.is-active {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
}
|
|
|
|
.theme-btn__swatch {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.theme-btn--industrial .theme-btn__swatch { background: #F5A623; }
|
|
.theme-btn--modern .theme-btn__swatch { background: #FF6B35; }
|
|
|
|
/* =========================================================================
|
|
APP LAYOUT
|
|
========================================================================= */
|
|
|
|
.app-shell {
|
|
display: flex;
|
|
height: 100vh;
|
|
padding-top: 36px;
|
|
}
|
|
|
|
/* =========================================================================
|
|
SIDEBAR
|
|
========================================================================= */
|
|
|
|
.sidebar {
|
|
width: 260px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-bg-elevated);
|
|
border-right: 1px solid var(--color-border);
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar { width: 4px; }
|
|
.sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); }
|
|
.sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }
|
|
|
|
.sidebar__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-4) var(--space-4) var(--space-3);
|
|
border-bottom: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: 1.125rem;
|
|
letter-spacing: -0.04em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-theme="industrial"] .brand-logo {
|
|
clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
|
|
}
|
|
|
|
[data-theme="modern"] .brand-logo {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.brand-name__primary {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: 0.9375rem;
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-primary);
|
|
line-height: 1;
|
|
}
|
|
|
|
.brand-name__sub {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.sidebar__nav {
|
|
flex: 1;
|
|
padding: var(--space-3) 0;
|
|
}
|
|
|
|
.nav-section-label {
|
|
padding: var(--space-3) var(--space-4) var(--space-1);
|
|
font-size: 0.6875rem;
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-widest);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-4);
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-regular);
|
|
border-left: 3px solid transparent;
|
|
transition: var(--transition-fast);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--color-surface-2);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.nav-item.is-active {
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
border-left-color: var(--color-primary);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.nav-item__icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.nav-item.is-active .nav-item__icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sidebar__footer {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-top: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.sidebar__user-avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-bold);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar__user-info { flex: 1; overflow: hidden; }
|
|
|
|
.sidebar__user-name {
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sidebar__user-role {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* =========================================================================
|
|
MAIN CONTENT
|
|
========================================================================= */
|
|
|
|
.main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-4) var(--space-6);
|
|
background: var(--color-bg-elevated);
|
|
border-bottom: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-theme="industrial"] .page-header {
|
|
background: var(--color-surface-1);
|
|
}
|
|
|
|
.page-header__title-group { display: flex; flex-direction: column; gap: 2px; }
|
|
|
|
.page-header__eyebrow {
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-widest);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.page-header__title {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: var(--text-h4);
|
|
letter-spacing: var(--heading-tracking-h4);
|
|
color: var(--color-text-primary);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
[data-theme="industrial"] .page-header__title {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.page-header__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
/* ---- Summary Cards ---- */
|
|
|
|
.summary-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--space-4);
|
|
padding: var(--space-4) var(--space-6);
|
|
background: var(--color-bg-base);
|
|
border-bottom: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-theme="modern"] .summary-strip {
|
|
background: transparent;
|
|
}
|
|
|
|
.summary-card {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4) var(--space-5);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: var(--transition-normal);
|
|
}
|
|
|
|
.summary-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-border-strong);
|
|
}
|
|
|
|
[data-theme="industrial"] .summary-card {
|
|
border-left: 3px solid var(--color-primary);
|
|
}
|
|
|
|
[data-theme="modern"] .summary-card {
|
|
background: var(--color-bg-overlay);
|
|
}
|
|
|
|
.summary-card__icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-primary-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.summary-card__icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke: var(--color-primary);
|
|
fill: none;
|
|
stroke-width: 1.75;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.summary-card__icon--success { background: rgba(34,197,94,.12); }
|
|
.summary-card__icon--success svg { stroke: var(--color-success); }
|
|
.summary-card__icon--error { background: rgba(239,68,68,.12); }
|
|
.summary-card__icon--error svg { stroke: var(--color-error); }
|
|
.summary-card__icon--warning { background: rgba(234,179,8,.12); }
|
|
.summary-card__icon--warning svg { stroke: var(--color-warning); }
|
|
|
|
.summary-card__body { flex: 1; min-width: 0; }
|
|
|
|
.summary-card__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);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.summary-card__value {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
font-size: 1.5rem;
|
|
color: var(--color-text-primary);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.summary-card__sub {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.summary-card__delta {
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.summary-card__delta--up { color: var(--color-success); }
|
|
.summary-card__delta--down { color: var(--color-error); }
|
|
|
|
/* ---- Tabs Row ---- */
|
|
|
|
.tabs-row {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
padding: 0 var(--space-6);
|
|
background: var(--color-bg-elevated);
|
|
border-bottom: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.tabs-row::-webkit-scrollbar { display: none; }
|
|
|
|
[data-theme="industrial"] .tabs-row {
|
|
background: var(--color-surface-1);
|
|
}
|
|
|
|
.tab-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-4);
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
background: transparent;
|
|
color: var(--color-text-muted);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: var(--transition-fast);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
color: var(--color-text-primary);
|
|
background: var(--color-surface-2);
|
|
}
|
|
|
|
.tab-btn.is-active {
|
|
color: var(--color-primary);
|
|
border-bottom-color: var(--color-primary);
|
|
}
|
|
|
|
.tab-btn__badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 var(--space-1);
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
font-size: 0.6875rem;
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.tab-btn.is-active .tab-btn__badge {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
}
|
|
|
|
.tab-btn__badge--alert {
|
|
background: rgba(239,68,68,.15);
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.tab-btn.is-active .tab-btn__badge--alert {
|
|
background: var(--color-error);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ---- Tab Panels ---- */
|
|
|
|
.tab-panels {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
}
|
|
|
|
.tab-panels::-webkit-scrollbar { width: 6px; }
|
|
.tab-panels::-webkit-scrollbar-track { background: var(--scrollbar-track); }
|
|
.tab-panels::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }
|
|
|
|
.tab-panel {
|
|
display: none;
|
|
padding: var(--space-5) var(--space-6);
|
|
}
|
|
|
|
.tab-panel.is-active {
|
|
display: block;
|
|
}
|
|
|
|
/* =========================================================================
|
|
TOOLBAR
|
|
========================================================================= */
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
padding: 0 var(--space-3);
|
|
height: 36px;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
max-width: 360px;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.search-box:focus-within {
|
|
border-color: var(--color-border-focus);
|
|
box-shadow: var(--shadow-accent);
|
|
}
|
|
|
|
.search-box svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
stroke: var(--color-text-muted);
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-box input {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.search-box input::placeholder {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.select-filter {
|
|
height: 36px;
|
|
padding: 0 var(--space-3);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.select-filter:focus {
|
|
border-color: var(--color-border-focus);
|
|
box-shadow: var(--shadow-accent);
|
|
}
|
|
|
|
.toolbar__spacer { flex: 1; }
|
|
|
|
/* =========================================================================
|
|
BUTTONS
|
|
========================================================================= */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: 0 var(--space-4);
|
|
height: 36px;
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-wide);
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
transition: var(--transition-fast);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn--primary {
|
|
background: var(--btn-primary-bg);
|
|
color: var(--btn-primary-text);
|
|
border-color: var(--btn-primary-border);
|
|
}
|
|
|
|
.btn--primary:hover {
|
|
background: var(--btn-primary-bg-hover);
|
|
}
|
|
|
|
.btn--secondary {
|
|
background: var(--btn-secondary-bg);
|
|
color: var(--btn-secondary-text);
|
|
border-color: var(--btn-secondary-border);
|
|
}
|
|
|
|
.btn--secondary:hover {
|
|
background: var(--btn-secondary-bg-hover);
|
|
}
|
|
|
|
.btn--ghost {
|
|
background: var(--btn-ghost-bg);
|
|
color: var(--btn-ghost-text);
|
|
border-color: var(--btn-ghost-border);
|
|
}
|
|
|
|
.btn--ghost:hover {
|
|
background: var(--color-surface-2);
|
|
border-color: var(--color-border-strong);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.btn--danger {
|
|
background: var(--btn-danger-bg);
|
|
color: var(--btn-danger-text);
|
|
}
|
|
|
|
.btn--sm {
|
|
height: 28px;
|
|
padding: 0 var(--space-3);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
/* =========================================================================
|
|
DATA TABLE
|
|
========================================================================= */
|
|
|
|
.table-wrapper {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
[data-theme="modern"] .table-wrapper {
|
|
background: var(--color-bg-overlay);
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.data-table thead {
|
|
background: var(--color-surface-2);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
[data-theme="industrial"] .data-table thead {
|
|
background: var(--color-surface-3);
|
|
}
|
|
|
|
.data-table th {
|
|
padding: var(--space-3) var(--space-4);
|
|
text-align: left;
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase;
|
|
color: var(--color-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.data-table th:first-child { padding-left: var(--space-5); }
|
|
.data-table th:last-child { padding-right: var(--space-5); }
|
|
|
|
.data-table tbody tr {
|
|
border-bottom: 1px solid var(--color-border);
|
|
transition: background var(--duration-fast) var(--ease-in-out);
|
|
}
|
|
|
|
.data-table tbody tr:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.data-table tbody tr:hover {
|
|
background: var(--color-surface-2);
|
|
}
|
|
|
|
.data-table td {
|
|
padding: var(--space-3) var(--space-4);
|
|
color: var(--color-text-secondary);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.data-table td:first-child { padding-left: var(--space-5); }
|
|
.data-table td:last-child { padding-right: var(--space-5); }
|
|
|
|
.data-table .td--primary {
|
|
color: var(--color-text-primary);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.data-table .td--mono {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-accent);
|
|
}
|
|
|
|
.data-table .td--amount {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-primary);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.data-table .td--right {
|
|
text-align: right;
|
|
}
|
|
|
|
/* =========================================================================
|
|
BADGES
|
|
========================================================================= */
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px var(--space-2);
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.6875rem;
|
|
font-weight: var(--font-weight-bold);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge::before {
|
|
content: '';
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: var(--radius-full);
|
|
background: currentColor;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.badge--ok {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.badge--pending {
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.badge--overdue {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.badge--partial {
|
|
background: rgba(234, 179, 8, 0.15);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.badge--info {
|
|
background: rgba(99, 102, 241, 0.15);
|
|
color: #818cf8;
|
|
}
|
|
|
|
.badge--closed {
|
|
background: rgba(115, 115, 115, 0.15);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* =========================================================================
|
|
PAGINATION
|
|
========================================================================= */
|
|
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-3) var(--space-5);
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.pagination__pages {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.pagination__btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.pagination__btn:hover {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.pagination__btn.is-active {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
}
|
|
|
|
/* =========================================================================
|
|
FINANCIAL CARDS / REPORT PANELS
|
|
========================================================================= */
|
|
|
|
.finance-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.finance-card {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
[data-theme="modern"] .finance-card {
|
|
background: var(--color-bg-overlay);
|
|
}
|
|
|
|
.finance-card__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.finance-card__title {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-secondary);
|
|
font-size: var(--text-body);
|
|
color: var(--color-text-primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wide);
|
|
}
|
|
|
|
.finance-card__row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--space-2) 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.finance-card__row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.finance-card__row--total {
|
|
border-top: 2px solid var(--color-border-strong);
|
|
border-bottom: none;
|
|
font-weight: var(--font-weight-bold);
|
|
padding-top: var(--space-3);
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.finance-card__row-label {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.finance-card__row-value {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.finance-card__row-value--positive { color: var(--color-success); }
|
|
.finance-card__row-value--negative { color: var(--color-error); }
|
|
|
|
/* Balance sheet indented rows */
|
|
.finance-card__row--indent {
|
|
padding-left: var(--space-5);
|
|
}
|
|
|
|
.finance-card__row--section {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
padding-top: var(--space-3);
|
|
margin-top: var(--space-2);
|
|
border-top: 1px solid var(--color-border);
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* =========================================================================
|
|
CHART PLACEHOLDER
|
|
========================================================================= */
|
|
|
|
.chart-placeholder {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-3);
|
|
min-height: 200px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
[data-theme="modern"] .chart-placeholder {
|
|
background: var(--color-bg-overlay);
|
|
}
|
|
|
|
.chart-placeholder svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
stroke: var(--color-text-muted);
|
|
fill: none;
|
|
stroke-width: 1.5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.chart-placeholder__label {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =========================================================================
|
|
CONCILIATION MATCH ROWS
|
|
========================================================================= */
|
|
|
|
.match-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
gap: var(--space-4);
|
|
align-items: center;
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
[data-theme="modern"] .match-row {
|
|
background: var(--color-bg-overlay);
|
|
}
|
|
|
|
.match-row__side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.match-row__label {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wider);
|
|
}
|
|
|
|
.match-row__amount {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.match-row__desc {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.match-row__connector {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary-muted);
|
|
}
|
|
|
|
.match-row__connector svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke: var(--color-primary);
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.match-row--matched {
|
|
border-color: var(--color-success);
|
|
background: rgba(34, 197, 94, 0.04);
|
|
}
|
|
|
|
.match-row--unmatched {
|
|
border-color: var(--color-warning);
|
|
}
|
|
|
|
/* =========================================================================
|
|
CHECKLIST (Cierre de Mes)
|
|
========================================================================= */
|
|
|
|
.checklist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.checklist-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
[data-theme="modern"] .checklist-item {
|
|
background: var(--color-bg-overlay);
|
|
}
|
|
|
|
.checklist-item:hover {
|
|
border-color: var(--color-border-strong);
|
|
}
|
|
|
|
.checklist-item__check {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: var(--radius-sm);
|
|
border: 2px solid var(--color-border-strong);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
.checklist-item__check svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: transparent;
|
|
stroke-width: 2.5;
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.checklist-item--done .checklist-item__check {
|
|
background: var(--color-success);
|
|
border-color: var(--color-success);
|
|
}
|
|
|
|
.checklist-item--done .checklist-item__check svg {
|
|
stroke: #fff;
|
|
}
|
|
|
|
.checklist-item__body { flex: 1; }
|
|
|
|
.checklist-item__title {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.checklist-item--done .checklist-item__title {
|
|
text-decoration: line-through;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.checklist-item__desc {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.checklist-item__badge {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* =========================================================================
|
|
SECTION HEADER (within tabs)
|
|
========================================================================= */
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.section-title {
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-secondary);
|
|
font-size: var(--text-h5);
|
|
color: var(--color-text-primary);
|
|
letter-spacing: var(--heading-tracking-h5);
|
|
}
|
|
|
|
[data-theme="industrial"] .section-title {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* =========================================================================
|
|
RESPONSIVE
|
|
========================================================================= */
|
|
|
|
@media (max-width: 1024px) {
|
|
.sidebar { width: 60px; }
|
|
.brand-name__primary,
|
|
.brand-name__sub,
|
|
.nav-section-label,
|
|
.sidebar__user-info { display: none; }
|
|
.sidebar__brand { justify-content: center; padding: var(--space-3); }
|
|
.nav-item { justify-content: center; padding: var(--space-2) var(--space-2); border-left: none; border-bottom: 3px solid transparent; }
|
|
.nav-item.is-active { border-left: none; border-bottom-color: var(--color-primary); }
|
|
.sidebar__footer { justify-content: center; }
|
|
.summary-strip { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.summary-strip { grid-template-columns: 1fr; }
|
|
.finance-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- =========================================================================
|
|
THEME SWITCHER BAR
|
|
========================================================================= -->
|
|
|
|
<div class="theme-bar">
|
|
<div class="theme-bar__left">
|
|
<div class="theme-bar__store">
|
|
<span class="theme-bar__dot"></span>
|
|
Nexus Autoparts
|
|
</div>
|
|
<div class="theme-bar__sep"></div>
|
|
<span class="theme-bar__label">Design System Preview</span>
|
|
</div>
|
|
<div class="theme-bar__right">
|
|
<button class="theme-btn theme-btn--industrial is-active" data-theme-target="industrial" onclick="setTheme('industrial')">
|
|
<span class="theme-btn__swatch"></span> Industrial
|
|
</button>
|
|
<button class="theme-btn theme-btn--modern" data-theme-target="modern" onclick="setTheme('modern')">
|
|
<span class="theme-btn__swatch"></span> Moderno
|
|
</button>
|
|
<div class="theme-bar__sep"></div>
|
|
<span class="theme-bar__label" id="live-clock">--:--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- =========================================================================
|
|
APP SHELL
|
|
========================================================================= -->
|
|
|
|
<div class="app-shell">
|
|
|
|
<!-- SIDEBAR -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar__brand">
|
|
<div class="brand-logo">N</div>
|
|
<div>
|
|
<div class="brand-name__primary">Nexus</div>
|
|
<div class="brand-name__sub">Autoparts</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar__nav">
|
|
<div class="nav-section-label">Principal</div>
|
|
<a class="nav-item" href="/pos/dashboard">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
|
Dashboard
|
|
</a>
|
|
<a class="nav-item" href="/pos/sale">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="2" y1="20" x2="22" y2="20"/></svg>
|
|
Punto de Venta
|
|
</a>
|
|
<a class="nav-item" href="/pos/catalog">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
|
Catálogo
|
|
</a>
|
|
|
|
<div class="nav-section-label">Operaciones</div>
|
|
<a class="nav-item" href="/pos/inventory">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
|
Inventario
|
|
</a>
|
|
<a class="nav-item" href="/pos/customers">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
Clientes
|
|
</a>
|
|
|
|
<div class="nav-section-label">Finanzas</div>
|
|
<a class="nav-item" href="/pos/invoicing">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
Facturación
|
|
</a>
|
|
<a class="nav-item is-active" href="/pos/accounting">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
Contabilidad
|
|
</a>
|
|
|
|
<div class="nav-section-label">Sistema</div>
|
|
<a class="nav-item" href="/pos/reports">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
|
Reportes
|
|
</a>
|
|
<a class="nav-item" href="/pos/config">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
Configuración
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar__footer">
|
|
<div class="sidebar__user-avatar">CM</div>
|
|
<div class="sidebar__user-info">
|
|
<div class="sidebar__user-name">Carlos M.</div>
|
|
<div class="sidebar__user-role">Contador</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<main class="main">
|
|
|
|
<!-- Page Header -->
|
|
<header class="page-header">
|
|
<div class="page-header__title-group">
|
|
<span class="page-header__eyebrow">Finanzas</span>
|
|
<h1 class="page-header__title">Contabilidad</h1>
|
|
</div>
|
|
<div class="page-header__actions">
|
|
<select class="select-filter">
|
|
<option>Marzo 2026</option>
|
|
<option>Febrero 2026</option>
|
|
<option>Enero 2026</option>
|
|
<option>Diciembre 2025</option>
|
|
</select>
|
|
<button class="btn btn--secondary" onclick="window.exportarContabilidad()">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Exportar
|
|
</button>
|
|
<button class="btn btn--primary" onclick="window.showNewEntryModal()">
|
|
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Nueva Póliza
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Summary Strip -->
|
|
<div class="summary-strip">
|
|
<div class="summary-card">
|
|
<div class="summary-card__icon summary-card__icon--success">
|
|
<svg viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
</div>
|
|
<div class="summary-card__body">
|
|
<div class="summary-card__label">Ingresos Mes</div>
|
|
<div class="summary-card__value">$2,847,320</div>
|
|
<div class="summary-card__delta summary-card__delta--up">+12.4% vs mes anterior</div>
|
|
</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-card__icon summary-card__icon--error">
|
|
<svg viewBox="0 0 24 24"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
|
|
</div>
|
|
<div class="summary-card__body">
|
|
<div class="summary-card__label">Egresos Mes</div>
|
|
<div class="summary-card__value">$1,923,480</div>
|
|
<div class="summary-card__delta summary-card__delta--down">+8.1% vs mes anterior</div>
|
|
</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-card__icon">
|
|
<svg viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
|
|
</div>
|
|
<div class="summary-card__body">
|
|
<div class="summary-card__label">Cuentas por Cobrar</div>
|
|
<div class="summary-card__value">$438,920</div>
|
|
<div class="summary-card__sub">23 facturas pendientes</div>
|
|
</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-card__icon summary-card__icon--warning">
|
|
<svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|
</div>
|
|
<div class="summary-card__body">
|
|
<div class="summary-card__label">Cuentas por Pagar</div>
|
|
<div class="summary-card__value">$612,750</div>
|
|
<div class="summary-card__sub">18 facturas · 3 vencidas</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs-row" role="tablist">
|
|
<button class="tab-btn is-active" role="tab" aria-selected="true" onclick="switchTab('cxc')">
|
|
Ctas. por Cobrar <span class="tab-btn__badge">23</span>
|
|
</button>
|
|
<button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('cxp')">
|
|
Ctas. por Pagar <span class="tab-btn__badge--alert tab-btn__badge">3</span>
|
|
</button>
|
|
<button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('balance')">
|
|
Balance General
|
|
</button>
|
|
<button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('resultados')">
|
|
Estado de Resultados
|
|
</button>
|
|
<button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('flujo')">
|
|
Flujo de Efectivo
|
|
</button>
|
|
<button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('conciliacion')">
|
|
Conciliación Bancaria
|
|
</button>
|
|
<button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('cierre')">
|
|
Cierre de Mes
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Panels -->
|
|
<div class="tab-panels" id="tab-panels">
|
|
|
|
<!-- ===============================================================
|
|
TAB 1: CUENTAS POR COBRAR
|
|
=============================================================== -->
|
|
<div class="tab-panel is-active" id="panel-cxc">
|
|
<div class="toolbar">
|
|
<div class="search-box">
|
|
<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
<input type="text" placeholder="Buscar cliente o factura..." />
|
|
</div>
|
|
<select class="select-filter">
|
|
<option>Todos los estados</option>
|
|
<option>Vigente</option>
|
|
<option>Vencida</option>
|
|
<option>Parcial</option>
|
|
</select>
|
|
<select class="select-filter">
|
|
<option>Todas las sucursales</option>
|
|
<option>Matriz</option>
|
|
<option>Sucursal Norte</option>
|
|
</select>
|
|
<div class="toolbar__spacer"></div>
|
|
<button class="btn btn--ghost btn--sm">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Exportar
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-wrapper">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Factura</th>
|
|
<th>Cliente</th>
|
|
<th>Emisión</th>
|
|
<th>Vencimiento</th>
|
|
<th>Total</th>
|
|
<th>Pagado</th>
|
|
<th>Saldo</th>
|
|
<th>Estado</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
<div class="pagination">
|
|
<span></span>
|
|
<div class="pagination__pages"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
TAB 2: CUENTAS POR PAGAR
|
|
=============================================================== -->
|
|
<div class="tab-panel" id="panel-cxp">
|
|
<div class="toolbar">
|
|
<div class="search-box">
|
|
<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
<input type="text" placeholder="Buscar proveedor o factura..." />
|
|
</div>
|
|
<select class="select-filter">
|
|
<option>Todos los estados</option>
|
|
<option>Vigente</option>
|
|
<option>Vencida</option>
|
|
</select>
|
|
<div class="toolbar__spacer"></div>
|
|
<button class="btn btn--primary btn--sm">
|
|
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Registrar Pago
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-wrapper">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Factura Prov.</th>
|
|
<th>Proveedor</th>
|
|
<th>Recepción</th>
|
|
<th>Vencimiento</th>
|
|
<th>Total</th>
|
|
<th>Pagado</th>
|
|
<th>Saldo</th>
|
|
<th>Estado</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
<div class="pagination">
|
|
<span></span>
|
|
<div class="pagination__pages"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
TAB 3: BALANCE GENERAL
|
|
=============================================================== -->
|
|
<div class="tab-panel" id="panel-balance">
|
|
<div class="toolbar">
|
|
<select class="select-filter">
|
|
<option>Al 31/03/2026</option>
|
|
<option>Al 28/02/2026</option>
|
|
<option>Al 31/01/2026</option>
|
|
</select>
|
|
<div class="toolbar__spacer"></div>
|
|
<button class="btn btn--ghost btn--sm">
|
|
<svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
|
Imprimir
|
|
</button>
|
|
<button class="btn btn--secondary btn--sm">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Exportar PDF
|
|
</button>
|
|
</div>
|
|
|
|
<div class="finance-grid" style="grid-template-columns: 1fr 1fr;" id="balanceContent">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
TAB 4: ESTADO DE RESULTADOS
|
|
=============================================================== -->
|
|
<div class="tab-panel" id="panel-resultados">
|
|
<div class="toolbar">
|
|
<select class="select-filter">
|
|
<option>Marzo 2026</option>
|
|
<option>Febrero 2026</option>
|
|
<option>Enero 2026</option>
|
|
</select>
|
|
<select class="select-filter">
|
|
<option>Mensual</option>
|
|
<option>Acumulado</option>
|
|
</select>
|
|
<div class="toolbar__spacer"></div>
|
|
<button class="btn btn--secondary btn--sm">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Exportar
|
|
</button>
|
|
</div>
|
|
|
|
<div class="finance-grid" style="grid-template-columns: 1fr;" id="resultadosContent">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
TAB 5: FLUJO DE EFECTIVO
|
|
=============================================================== -->
|
|
<div class="tab-panel" id="panel-flujo">
|
|
<div class="toolbar">
|
|
<select class="select-filter">
|
|
<option>Marzo 2026</option>
|
|
<option>Febrero 2026</option>
|
|
</select>
|
|
<div class="toolbar__spacer"></div>
|
|
<button class="btn btn--secondary btn--sm">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Exportar
|
|
</button>
|
|
</div>
|
|
|
|
<div class="finance-grid" style="grid-template-columns: 1fr;" id="flujoContent">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
TAB 6: CONCILIACIÓN BANCARIA
|
|
=============================================================== -->
|
|
<div class="tab-panel" id="panel-conciliacion">
|
|
<div class="toolbar">
|
|
<select class="select-filter">
|
|
<option>BBVA — *4521</option>
|
|
<option>Banorte — *8903</option>
|
|
<option>Santander — *2156</option>
|
|
</select>
|
|
<select class="select-filter">
|
|
<option>Marzo 2026</option>
|
|
<option>Febrero 2026</option>
|
|
</select>
|
|
<div class="toolbar__spacer"></div>
|
|
<button class="btn btn--secondary btn--sm">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
Importar Estado de Cuenta
|
|
</button>
|
|
<button class="btn btn--primary btn--sm">Conciliar Automático</button>
|
|
</div>
|
|
|
|
<div id="conciliacionContent">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
TAB 7: CIERRE DE MES
|
|
=============================================================== -->
|
|
<div class="tab-panel" id="panel-cierre">
|
|
<div class="toolbar">
|
|
<select class="select-filter">
|
|
<option>Marzo 2026</option>
|
|
<option>Febrero 2026 (cerrado)</option>
|
|
<option>Enero 2026 (cerrado)</option>
|
|
</select>
|
|
<div class="toolbar__spacer"></div>
|
|
<button class="btn btn--primary">
|
|
<svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
|
Ejecutar Cierre
|
|
</button>
|
|
</div>
|
|
|
|
<div id="cierreContent">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /tab-panels -->
|
|
</main>
|
|
</div><!-- /app-shell -->
|
|
|
|
<!-- Nueva Poliza Modal -->
|
|
<div id="newEntryModalOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
|
|
<div style="background:var(--color-surface-1);border-radius:var(--radius-lg);width:min(640px,90vw);max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);">
|
|
<div style="padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;">
|
|
<div style="font-family:var(--font-heading);font-size:var(--text-h4);font-weight:var(--heading-weight-primary);">Nueva Poliza</div>
|
|
<button class="btn btn--ghost btn--sm" onclick="window.closeNewEntryModal()">×</button>
|
|
</div>
|
|
<div style="padding:var(--space-6);">
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4);">
|
|
<div>
|
|
<label style="display:block;font-size:var(--text-caption);color:var(--color-text-muted);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:var(--tracking-widest);">Fecha</label>
|
|
<input type="date" id="entryDate" style="width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);" />
|
|
</div>
|
|
<div>
|
|
<label style="display:block;font-size:var(--text-caption);color:var(--color-text-muted);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:var(--tracking-widest);">Tipo</label>
|
|
<select id="entryType" style="width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);">
|
|
<option value="ingreso">Ingreso</option>
|
|
<option value="egreso">Egreso</option>
|
|
<option value="diario">Diario</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div style="margin-bottom:var(--space-4);">
|
|
<label style="display:block;font-size:var(--text-caption);color:var(--color-text-muted);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:var(--tracking-widest);">Descripcion</label>
|
|
<input type="text" id="entryDescription" placeholder="Concepto de la poliza" style="width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);" />
|
|
</div>
|
|
<div style="margin-bottom:var(--space-3);">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2);">
|
|
<label style="font-size:var(--text-caption);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-widest);">Partidas</label>
|
|
<button class="btn btn--ghost btn--sm" onclick="window.addEntryLine()">+ Agregar linea</button>
|
|
</div>
|
|
<div id="entryLines">
|
|
<div class="entry-line" style="display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:var(--space-2);margin-bottom:var(--space-2);align-items:center;">
|
|
<input type="text" placeholder="Cuenta contable" class="entry-account" style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);" />
|
|
<input type="number" placeholder="Debe" class="entry-debit" step="0.01" style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);" />
|
|
<input type="number" placeholder="Haber" class="entry-credit" step="0.01" style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);" />
|
|
<button class="btn btn--ghost btn--sm" onclick="this.closest('.entry-line').remove()">×</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="entryResult" style="margin-bottom:var(--space-3);"></div>
|
|
</div>
|
|
<div style="padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--space-3);">
|
|
<button class="btn btn--ghost" onclick="window.closeNewEntryModal()">Cancelar</button>
|
|
<button class="btn btn--primary" onclick="window.submitNewEntry()">Guardar Poliza</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/pos/static/js/i18n.js"></script>
|
|
<script src="/pos/static/js/app-init.js"></script>
|
|
<script src="/pos/static/js/sidebar.js"></script>
|
|
<script src="/pos/static/js/accounting.js"></script>
|
|
<script src="/pos/static/js/sync-engine.js"></script>
|
|
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
|
|
|
|
</body>
|
|
</html>
|