From 4719bf61e3028e9395115b8275f60d44c73e90e9 Mon Sep 17 00:00:00 2001 From: javiermengual Date: Wed, 11 Feb 2026 13:56:28 +0100 Subject: [PATCH] mejora de ux/ui --- index.html | 3 + src/components/BlockedNavigationToast.js | 2 +- src/components/ClientItem.js | 2 +- src/components/ConfirmExitModal.js | 2 +- src/components/InvoiceItem.js | 4 +- src/components/InvoiceModal.js | 14 +- src/components/Sidebar.js | 4 +- src/pages/DashboardPage.js | 31 +- src/pages/pagesRegistry.js | 8 +- src/style.css | 1624 +++++++++++----------- 10 files changed, 882 insertions(+), 812 deletions(-) diff --git a/index.html b/index.html index 491f46d..2aa003d 100755 --- a/index.html +++ b/index.html @@ -6,6 +6,9 @@ doli-front + + + diff --git a/src/components/BlockedNavigationToast.js b/src/components/BlockedNavigationToast.js index 3c95e52..b8d5bb4 100644 --- a/src/components/BlockedNavigationToast.js +++ b/src/components/BlockedNavigationToast.js @@ -15,7 +15,7 @@ export function showBlockedNavigationToast(message = 'Guarda los cambios antes d toast.innerHTML = /*html*/`
- + diff --git a/src/components/ClientItem.js b/src/components/ClientItem.js index c789982..3b68f5f 100644 --- a/src/components/ClientItem.js +++ b/src/components/ClientItem.js @@ -69,7 +69,7 @@ export function ClientItem(client, onView) { ${displayValue(client.phone)}
- + diff --git a/src/components/InvoiceItem.js b/src/components/InvoiceItem.js index 275e0e8..26fde95 100644 --- a/src/components/InvoiceItem.js +++ b/src/components/InvoiceItem.js @@ -48,7 +48,7 @@ export function InvoiceItem(invoice, onView) { - + ${invoice.clientName || 'Sin nombre'} ${formatDate(invoice.date)} @@ -56,7 +56,7 @@ export function InvoiceItem(invoice, onView) { ${formatCurrency(invoice.remainToPay)} `; diff --git a/src/components/InvoiceModal.js b/src/components/InvoiceModal.js index 1f5565d..ccc02b7 100644 --- a/src/components/InvoiceModal.js +++ b/src/components/InvoiceModal.js @@ -218,7 +218,7 @@ export function InvoiceModal(invoiceId, onClose, onUpdate) { ${isDraft ? `
@@ -319,7 +319,7 @@ export function InvoiceModal(invoiceId, onClose, onUpdate) {
- ${isDraft ? '' : ''} + ${isDraft ? '' : ''}
@@ -507,7 +507,7 @@ export function InvoiceModal(invoiceId, onClose, onUpdate) { const validateBtn = modal.querySelector('.btn-validate'); if (validateBtn) { validateBtn.disabled = false; - validateBtn.innerHTML = 'Validar Factura'; + validateBtn.innerHTML = 'Validar Factura'; } } }; @@ -597,7 +597,7 @@ export function InvoiceModal(invoiceId, onClose, onUpdate) { const btn = modal.querySelector(`.btn-delete-line[data-line-id="${lineId}"]`); if (btn) { btn.disabled = true; - btn.innerHTML = ''; + btn.innerHTML = ''; } await deleteInvoiceLine(invoiceId, lineId); @@ -612,7 +612,7 @@ export function InvoiceModal(invoiceId, onClose, onUpdate) { const btn = modal.querySelector(`.btn-delete-line[data-line-id="${lineId}"]`); if (btn) { btn.disabled = false; - btn.innerHTML = ''; + btn.innerHTML = ''; } } }; @@ -676,7 +676,7 @@ export function InvoiceModal(invoiceId, onClose, onUpdate) { const payBtn = modal.querySelector('#btn-pay'); if (payBtn) { payBtn.disabled = false; - payBtn.innerHTML = 'Registrar Pago'; + payBtn.innerHTML = 'Registrar Pago'; } } }; diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 19e3a21..dd25251 100755 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -6,9 +6,9 @@ export function createSidebar(pages, currentPage) { const sidebarHeader = document.createElement('div'); sidebarHeader.className = 'sidebar-header'; sidebarHeader.innerHTML = /*html*/` -

Doli App

+

Doli

`; diff --git a/src/pages/DashboardPage.js b/src/pages/DashboardPage.js index eca570f..7b86cb1 100755 --- a/src/pages/DashboardPage.js +++ b/src/pages/DashboardPage.js @@ -7,11 +7,34 @@ export function renderDashboard() { container.innerHTML = /*html*/`
-

Bienvenido, ${user?.email || 'Usuario'}

- +
+

Dashboard

+

${user?.email || 'Usuario'}

+
+
-
-

Dashboard protegido

+
+ +
+ +
+ Facturas + Gestionar facturas + + +
+ +
+ Clientes + Ver directorio + + +
+ +
+ Nueva factura + Crear borrador +
`; diff --git a/src/pages/pagesRegistry.js b/src/pages/pagesRegistry.js index aeb8e18..ed59fb5 100755 --- a/src/pages/pagesRegistry.js +++ b/src/pages/pagesRegistry.js @@ -8,7 +8,7 @@ export const pagesRegistry = [ { route: 'dashboard', name: 'Dashboard', - icon: '', + icon: '', requiresAuth: true, showInSidebar: true, render: renderDashboard @@ -16,7 +16,7 @@ export const pagesRegistry = [ { route: 'invoices', name: 'Facturas', - icon: '', + icon: '', requiresAuth: true, showInSidebar: true, render: renderFacturasPage @@ -32,7 +32,7 @@ export const pagesRegistry = [ { route: 'clients', name: 'Clientes', - icon: '', + icon: '', requiresAuth: true, showInSidebar: true, render: renderClientesPage @@ -40,7 +40,7 @@ export const pagesRegistry = [ { route: 'settings', name: 'Configuración', - icon: '', + icon: '', requiresAuth: true, showInSidebar: true, render: () => { diff --git a/src/style.css b/src/style.css index 5ad7f13..bb7ae24 100755 --- a/src/style.css +++ b/src/style.css @@ -1,24 +1,90 @@ +/* ============================================ + Design Tokens + ============================================ */ :root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + /* Typography */ + font-family: 'Inter', system-ui, -apple-system, sans-serif; + font-size: 14px; line-height: 1.5; font-weight: 400; - color-scheme: light dark; - color: #1e293b; - background-color: #f8fafc; + /* Color tokens */ + --gray-50: #f9fafb; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-300: #d1d5db; + --gray-400: #9ca3af; + --gray-500: #6b7280; + --gray-600: #4b5563; + --gray-700: #374151; + --gray-800: #1f2937; + --gray-900: #111827; + + --blue-50: #eff6ff; + --blue-100: #dbeafe; + --blue-500: #3b82f6; + --blue-600: #2563eb; + --blue-700: #1d4ed8; + + --green-50: #f0fdf4; + --green-100: #dcfce7; + --green-600: #16a34a; + --green-700: #15803d; + + --amber-50: #fffbeb; + --amber-100: #fef3c7; + --amber-600: #d97706; + + --red-50: #fef2f2; + --red-100: #fee2e2; + --red-500: #ef4444; + --red-600: #dc2626; + --red-700: #b91c1c; + + /* Semantic tokens */ + --primary: var(--blue-600); + --primary-hover: var(--blue-700); + --success: var(--green-600); + --success-hover: var(--green-700); + --warning: var(--amber-600); + --danger: var(--red-500); + --danger-hover: var(--red-600); - --primary: #2563eb; - --primary-hover: #1d4ed8; - --success: #10b981; - --success-hover: #059669; - --warning: #f59e0b; - --warning-hover: #d97706; - --danger: #ef4444; - --danger-hover: #dc2626; --card-bg: #ffffff; - --border-color: #e2e8f0; - --text-primary: #0f172a; - --text-secondary: #64748b; + --border-color: var(--gray-200); + --text-primary: var(--gray-900); + --text-secondary: var(--gray-500); + --bg-page: var(--gray-50); + --bg-subtle: var(--gray-100); + + /* Spacing (4px grid) */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-10: 40px; + + /* Radius */ + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + + /* Shadows */ + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04); + + /* Transitions */ + --transition-fast: 120ms ease; + --transition-base: 150ms ease; + + color-scheme: light; + color: var(--text-primary); + background-color: var(--bg-page); font-synthesis: none; text-rendering: optimizeLegibility; @@ -26,14 +92,11 @@ -moz-osx-font-smoothing: grayscale; } -a { - font-weight: 500; - color: var(--primary); - text-decoration: inherit; -} - -a:hover { - color: var(--primary-hover); +/* ============================================ + Reset & Base + ============================================ */ +*, *::before, *::after { + box-sizing: border-box; } body { @@ -42,240 +105,140 @@ body { min-height: 100vh; } -h1 { - font-size: 3.2em; - line-height: 1.1; +a { + font-weight: 500; + color: var(--primary); + text-decoration: none; } +a:hover { + color: var(--primary-hover); +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-weight: 600; + line-height: 1.3; + color: var(--text-primary); + letter-spacing: -0.01em; +} + +h1 { font-size: 1.5rem; } +h2 { font-size: 1.25rem; } +h3 { font-size: 1rem; } + #app { width: 100%; min-height: 100vh; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} - -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} - -.logo.vanilla:hover { - filter: drop-shadow(0 0 2em #f7df1eaa); -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} - +/* ============================================ + Buttons + ============================================ */ button { - border-radius: 8px; + border-radius: var(--radius-md); border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; + padding: var(--space-2) var(--space-4); + font-size: 14px; font-weight: 500; font-family: inherit; background-color: var(--primary); color: white; cursor: pointer; - transition: background-color 0.25s, border-color 0.25s; + transition: background-color var(--transition-fast); + line-height: 1.4; } button:hover { background-color: var(--primary-hover); } -button:focus, button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; + outline: 2px solid var(--primary); + outline-offset: 2px; } -@media (prefers-color-scheme: light) { - :root { - color: var(--text-primary); - background-color: #f8fafc; - } - - a:hover { - color: var(--primary-hover); - } -} - -.login-container { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; -} - -.login-card { - background: var(--card-bg); - padding: 2.5rem; - border-radius: 12px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - width: 100%; - max-width: 400px; - border: 1px solid var(--border-color); -} - -.login-title { - color: var(--text-primary); - margin: 0 0 2rem 0; - font-size: 1.8rem; - text-align: center; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - color: var(--text-primary); - margin-bottom: 0.5rem; - font-weight: 500; -} - -.form-group input { - width: 100%; - padding: 0.75rem; - border: 1px solid var(--border-color); - border-radius: 6px; - background: #fff; - color: var(--text-primary); - font-size: 1rem; - box-sizing: border-box; -} - -.form-group input:focus { - outline: none; - border-color: var(--primary); - box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); -} - -.login-button { - width: 100%; - padding: 0.875rem; - background-color: var(--primary); - color: white; - border: none; - border-radius: 6px; - font-size: 1rem; - font-weight: 600; - cursor: pointer; - transition: background-color 0.25s; -} - -.login-button:hover { - background-color: var(--primary-hover); - border-color: transparent; -} - -.login-error { - color: var(--danger); - text-align: center; - margin-top: 1rem; - font-size: 0.9rem; -} - -.dashboard { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; -} - -.dashboard-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; -} - -.dashboard-header h1 { - font-size: 2rem; - margin: 0; -} - -.dashboard-content { - background: var(--card-bg); - padding: 2rem; - border-radius: 12px; - border: 1px solid var(--border-color); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); -} - -.logout-button { - background-color: var(--danger); - color: white; - padding: 0.5rem 1rem; - border: none; - border-radius: 6px; - cursor: pointer; -} - -.logout-button:hover { - background-color: var(--danger-hover); - border-color: transparent; +button:disabled { + opacity: 0.5; + cursor: not-allowed; } +/* ============================================ + Status Badges + ============================================ */ .status-badge { - display: inline-block; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - font-size: 0.875rem; + display: inline-flex; + align-items: center; + padding: 2px var(--space-2); + border-radius: var(--radius-sm); + font-size: 12px; font-weight: 500; + line-height: 1.5; + white-space: nowrap; } .status-pending { - background-color: #fef3c7; - color: #000000; + background-color: var(--amber-50); + color: var(--amber-600); } .status-paid { - background-color: #d1fae5; - color: #000000; + background-color: var(--green-50); + color: var(--green-600); } -.status-overdue { - background-color: #fee2e2; - color: #000000; +.status-overdue, +.status-unpaid { + background-color: var(--red-50); + color: var(--red-600); } .status-draft { - background-color: #f1f5f9; - color: #000000; + background-color: var(--gray-100); + color: var(--gray-600); } +.status-validated { + background-color: var(--blue-50); + color: var(--blue-600); +} + +.status-canceled { + background-color: var(--gray-100); + color: var(--gray-400); + text-decoration: line-through; +} + +/* ============================================ + Amount & Stats + ============================================ */ .amount-display { - font-family: 'Courier New', monospace; - font-weight: 600; + font-variant-numeric: tabular-nums; + font-weight: 500; color: var(--text-primary); } .card-stat { background: var(--card-bg); - padding: 1.5rem; - border-radius: 8px; + padding: var(--space-4) var(--space-5); + border-radius: var(--radius-lg); border: 1px solid var(--border-color); } .card-stat-label { color: var(--text-secondary); - font-size: 0.875rem; - margin-bottom: 0.5rem; + font-size: 12px; + margin-bottom: var(--space-1); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.03em; } .card-stat-value { - font-size: 1.5rem; - font-weight: 700; + font-size: 1.25rem; + font-weight: 600; color: var(--text-primary); + font-variant-numeric: tabular-nums; } .card-stat.positive .card-stat-value { @@ -286,62 +249,75 @@ button:focus-visible { color: var(--danger); } -/* App Layout with Sidebar */ +/* ============================================ + App Layout with Sidebar + ============================================ */ .app-layout { display: flex; min-height: 100vh; width: 100%; } -/* Sidebar Styles */ +/* ============================================ + Sidebar + ============================================ */ .sidebar { - width: 250px; + width: 220px; background-color: var(--card-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; - transition: width 0.3s ease, transform 0.3s ease; + transition: width var(--transition-base); position: relative; z-index: 100; + flex-shrink: 0; } .sidebar-header { - padding: 1.5rem 1rem; + padding: var(--space-4); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; + height: 52px; } .sidebar-header h2 { margin: 0; - font-size: 1.5rem; + font-size: 14px; + font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + letter-spacing: -0.01em; } .sidebar-toggle { background: transparent; border: none; cursor: pointer; - padding: 0.5rem; + padding: var(--space-1); color: var(--text-secondary); - font-size: 1.25rem; - border-radius: 4px; - transition: background-color 0.2s; + font-size: 14px; + border-radius: var(--radius-sm); + transition: background-color var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; } .sidebar-toggle:hover { - background-color: var(--border-color); + background-color: var(--gray-100); border-color: transparent; } .sidebar-nav { flex: 1; overflow-y: auto; - padding: 1rem 0; + padding: var(--space-2) 0; } .sidebar-menu { @@ -352,34 +328,47 @@ button:focus-visible { .sidebar-menu li { margin: 0; + padding: 0 var(--space-2); } .sidebar-link { display: flex; align-items: center; - padding: 0.75rem 1rem; + gap: var(--space-3); + padding: var(--space-2) var(--space-3); color: var(--text-secondary); text-decoration: none; - transition: background-color 0.2s, color 0.2s; + transition: color var(--transition-fast), background-color var(--transition-fast); cursor: pointer; + border-radius: var(--radius-md); + font-size: 14px; + font-weight: 400; + margin-bottom: 1px; } .sidebar-link:hover { - background-color: var(--border-color); + background-color: var(--gray-100); color: var(--text-primary); } .sidebar-link.active { - background-color: rgba(37, 99, 235, 0.1); + background-color: var(--blue-50); color: var(--primary); - border-left: 3px solid var(--primary); + font-weight: 500; } .sidebar-icon { - font-size: 1.25rem; - margin-right: 0.75rem; - min-width: 1.5rem; - text-align: center; + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.sidebar-icon svg { + width: 16px; + height: 16px; } .sidebar-text { @@ -388,9 +377,9 @@ button:focus-visible { text-overflow: ellipsis; } -/* Collapsed Sidebar State */ +/* Collapsed Sidebar */ .sidebar.collapsed { - width: 70px; + width: 56px; } .sidebar.collapsed .sidebar-header h2, @@ -404,67 +393,190 @@ button:focus-visible { margin-right: 0; } +.sidebar.collapsed .sidebar-link { + justify-content: center; + padding: var(--space-2); +} + /* Main Content Area */ .main-content { flex: 1; overflow-y: auto; - background-color: #f8fafc; + background-color: var(--bg-page); + min-width: 0; } -.main-content>div { +.main-content > div { max-width: 1280px; margin: 0 auto; - padding: 2rem; + padding: var(--space-6); } -/* Responsive Design */ -@media (max-width: 768px) { - .sidebar { - position: fixed; - left: 0; - top: 0; - bottom: 0; - z-index: 1000; - transform: translateX(0); - } - - .sidebar.collapsed { - transform: translateX(-100%); - width: 250px; - } - - .main-content { - margin-left: 0; - } +/* ============================================ + Login + ============================================ */ +.login-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + width: 100%; + background: var(--bg-page); } -/* Facturas Page Styles */ +.login-card { + background: var(--card-bg); + padding: var(--space-8); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + width: 100%; + max-width: 380px; + border: 1px solid var(--border-color); +} + +.login-title { + color: var(--text-primary); + margin: 0 0 var(--space-6) 0; + font-size: 1.25rem; + text-align: center; + font-weight: 600; +} + +.form-group { + margin-bottom: var(--space-4); +} + +.form-group label { + display: block; + color: var(--text-secondary); + margin-bottom: var(--space-1); + font-weight: 500; + font-size: 13px; +} + +.form-group input { + width: 100%; + padding: var(--space-2) var(--space-3); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + background: var(--card-bg); + color: var(--text-primary); + font-size: 14px; + font-family: inherit; + box-sizing: border-box; + transition: border-color var(--transition-fast); + height: 36px; +} + +.form-group input:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12); +} + +.login-button { + width: 100%; + padding: var(--space-2) var(--space-4); + background-color: var(--primary); + color: white; + border: none; + border-radius: var(--radius-md); + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: background-color var(--transition-fast); + height: 36px; + margin-top: var(--space-2); +} + +.login-button:hover { + background-color: var(--primary-hover); + border-color: transparent; +} + +.login-error { + color: var(--danger); + text-align: center; + margin-top: var(--space-3); + font-size: 13px; +} + +/* ============================================ + Dashboard + ============================================ */ +.dashboard { + max-width: 1280px; + margin: 0 auto; + padding: var(--space-6); +} + +.dashboard-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-6); +} + +.dashboard-header h1 { + font-size: 1.25rem; + font-weight: 600; +} + +.dashboard-content { + background: var(--card-bg); + padding: var(--space-5); + border-radius: var(--radius-lg); + border: 1px solid var(--border-color); + box-shadow: var(--shadow-xs); +} + +.logout-button { + background-color: transparent; + color: var(--text-secondary); + padding: var(--space-2) var(--space-3); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + cursor: pointer; + font-size: 13px; + font-weight: 500; + transition: color var(--transition-fast), border-color var(--transition-fast); +} + +.logout-button:hover { + color: var(--danger); + border-color: var(--danger); + background-color: var(--red-50); +} + +/* ============================================ + Facturas Page + ============================================ */ .facturas-page { - padding: 2rem; - max-width: 1600px; + padding: var(--space-6); + max-width: 1400px; margin: 0 auto; } .facturas-header { - margin-bottom: 2rem; + margin-bottom: var(--space-5); } .facturas-header h1 { - color: var(--text-primary); - font-size: 2rem; - margin: 0; + font-size: 1.25rem; + font-weight: 600; } .btn-new-invoice { background-color: var(--primary); color: white; - padding: 0.75rem 1.5rem; + padding: var(--space-2) var(--space-4); border: none; - border-radius: 8px; + border-radius: var(--radius-md); cursor: pointer; - font-weight: 600; - transition: background-color 0.2s; - margin-left: auto; + font-weight: 500; + font-size: 14px; + transition: background-color var(--transition-fast); + height: 36px; } .btn-new-invoice:hover { @@ -473,327 +585,244 @@ button:focus-visible { .facturas-filters { display: flex; - gap: 1rem; - margin-bottom: 1.5rem; + gap: var(--space-3); + margin-bottom: var(--space-4); align-items: center; } .search-input, .filter-status { - padding: 0.75rem 1rem; + padding: var(--space-2) var(--space-3); border: 1px solid var(--border-color); - border-radius: 8px; - font-size: 0.95rem; + border-radius: var(--radius-md); + font-size: 14px; + font-family: inherit; background: var(--card-bg); - color: #000000; + color: var(--text-primary); + height: 36px; + transition: border-color var(--transition-fast); +} + +.search-input:focus, +.filter-status:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12); } .search-input { flex: 1; - max-width: 400px; + max-width: 320px; } .filter-status { - min-width: 200px; + min-width: 180px; cursor: pointer; } -/* Invoices Table Styles */ -.invoices-table-container { +/* ============================================ + Tables (Invoices & Clients) + ============================================ */ +.invoices-table-container, +.clients-table-container { background: var(--card-bg); - border-radius: 12px; + border-radius: var(--radius-lg); border: 1px solid var(--border-color); overflow: hidden; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-xs); } -.invoices-table { +.invoices-table, +.clients-table { width: 100%; border-collapse: collapse; } -.invoices-table thead { - background: #f8fafc; - border-bottom: 2px solid var(--border-color); +.invoices-table thead, +.clients-table thead { + background: var(--gray-50); + border-bottom: 1px solid var(--border-color); } -.invoices-table th { - font-weight: 600; +.invoices-table th, +.clients-table th { + font-weight: 500; color: var(--text-secondary); - font-size: 0.85rem; + font-size: 12px; text-transform: uppercase; - padding: 1rem 1.5rem; + letter-spacing: 0.04em; + padding: var(--space-3) var(--space-4); text-align: left; } -.invoices-table tbody tr { +.invoices-table tbody tr, +.clients-table tbody tr { border-bottom: 1px solid var(--border-color); - transition: background-color 0.2s; + transition: background-color var(--transition-fast); } -.invoices-table tbody tr:hover { - background-color: #f8fafc; +.invoices-table tbody tr:hover, +.clients-table tbody tr:hover { + background-color: var(--gray-50); } -.invoices-table tbody tr:last-child { +.invoices-table tbody tr:last-child, +.clients-table tbody tr:last-child { border-bottom: none; } -.invoices-table td { - padding: 1rem 1.5rem; +.invoices-table td, +.clients-table td { + padding: var(--space-3) var(--space-4); + font-size: 14px; } .invoice-number { - font-weight: 600; + font-weight: 500; color: var(--text-primary); } -.invoice-status .status-badge { - display: inline-block; - padding: 0.4rem 0.8rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 600; - text-align: center; -} - -.status-draft { - background: #f3f4f6; - color: #000000; -} - -.status-validated { - background: #dbeafe; - color: #000000; -} - -.status-paid { - background: #d1fae5; - color: #000000; -} - -.status-unpaid { - background: #fee2e2; - color: #000000; -} - -.status-canceled { - background: #f3f4f6; - color: #000000; - text-decoration: line-through; -} - .invoice-client { display: flex; align-items: center; - gap: 0.5rem; + gap: var(--space-2); color: var(--text-secondary); } .client-icon { - font-size: 1rem; + display: flex; + align-items: center; + color: var(--gray-400); } -.invoice-date, -.invoice-total, -.invoice-remain { +.invoice-date { color: var(--text-primary); } .invoice-total, .invoice-remain { - font-weight: 600; + font-weight: 500; + font-variant-numeric: tabular-nums; + color: var(--text-primary); } .invoice-actions { display: flex; - gap: 0.5rem; + gap: var(--space-1); justify-content: center; } -.btn-view { +.btn-view, +.btn-action { background: transparent; border: none; - padding: 0.25rem; - border-radius: 4px; + padding: var(--space-1); + border-radius: var(--radius-sm); cursor: pointer; - color: var(--text-secondary); - transition: all 0.2s; + color: var(--gray-400); + transition: color var(--transition-fast), background-color var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; + width: 28px; + height: 28px; } .btn-view:hover { color: var(--primary); - transform: scale(1.1); + background-color: var(--blue-50); +} + +.btn-action:hover { + background-color: var(--gray-100); + color: var(--text-primary); +} + +.btn-delete:hover { + background-color: var(--red-50); + color: var(--danger); } .loading, .error, -.no-invoices { - padding: 3rem; +.no-invoices, +.no-clients { + padding: var(--space-10); text-align: center; color: var(--text-secondary); - font-size: 1.1rem; + font-size: 14px; } .error { color: var(--danger); } -/* Pagination Styles */ +/* ============================================ + Pagination + ============================================ */ .pagination { display: flex; justify-content: center; align-items: center; - gap: 2rem; - margin-top: 2rem; - padding: 1.5rem; + gap: var(--space-4); + margin-top: var(--space-4); + padding: var(--space-3) var(--space-4); background: var(--card-bg); - border-radius: 12px; + border-radius: var(--radius-lg); border: 1px solid var(--border-color); } .pagination-info { - font-weight: 600; - color: var(--text-primary); - font-size: 1rem; + font-weight: 500; + color: var(--text-secondary); + font-size: 13px; display: flex; - gap: 0.5rem; + gap: var(--space-1); align-items: center; + font-variant-numeric: tabular-nums; } .pagination-info .current-page, .pagination-info .total-pages { - font-weight: 700; - color: var(--primary); - min-width: 30px; + font-weight: 600; + color: var(--text-primary); + min-width: 20px; text-align: center; } .btn-pagination { - padding: 0.75rem 1.5rem; - background-color: var(--primary); - color: white; - border: none; - border-radius: 8px; + padding: var(--space-2) var(--space-3); + background-color: var(--card-bg); + color: var(--text-primary); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); cursor: pointer; - font-weight: 600; - transition: all 0.2s; + font-weight: 500; + font-size: 13px; + transition: background-color var(--transition-fast), border-color var(--transition-fast); display: flex; align-items: center; - gap: 0.5rem; + gap: var(--space-1); } .btn-pagination:hover:not(:disabled) { - background-color: var(--primary-hover); - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); + background-color: var(--gray-50); + border-color: var(--gray-300); } .btn-pagination:disabled { - background-color: #cbd5e1; + background-color: var(--gray-50); + color: var(--gray-300); cursor: not-allowed; - opacity: 0.6; + border-color: var(--gray-200); } -.btn-pagination:active:not(:disabled) { - transform: translateY(0); -} - -/* Responsive */ -@media (max-width: 768px) { - .pagination { - flex-wrap: wrap; - gap: 1rem; - } - - .btn-pagination { - flex: 1; - min-width: 120px; - } - - .pagination-info { - order: 3; - width: 100%; - justify-content: center; - } -} - -@media (max-width: 1400px) { - - .invoices-header, - .invoice-item { - grid-template-columns: 40px 120px 100px 50px 130px 100px 100px 100px 70px; - font-size: 0.9rem; - } -} - -@media (max-width: 1024px) { - .facturas-page { - padding: 1rem; - } - - .invoices-header, - .invoice-item { - grid-template-columns: 40px 100px 90px 130px 90px 90px 60px; - gap: 0.5rem; - padding: 1rem; - } - - .invoice-id, - .invoice-remain { - display: none; - } -} - -@media (max-width: 768px) { - .facturas-filters { - flex-direction: column; - } - - .search-input { - max-width: 100%; - } - - .invoices-header { - display: none; - } - - .invoice-item { - grid-template-columns: 1fr; - gap: 0.5rem; - padding: 1.5rem; - } - - .invoice-item>div { - display: flex; - justify-content: space-between; - align-items: center; - } - - .invoice-item>div::before { - content: attr(class); - font-weight: 600; - color: var(--text-secondary); - text-transform: capitalize; - } -} - -/* Adjust dashboard and login for new layout */ -.login-container { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - width: 100%; -} - -/* Create Invoice Page - Ultra Compact */ +/* ============================================ + Create Invoice Page + ============================================ */ .create-invoice-page { - padding: 2rem; - max-width: 1000px; + padding: var(--space-6); + max-width: 960px; margin: 0 auto; min-height: 100vh; } @@ -802,14 +831,11 @@ button:focus-visible { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 2rem; - flex-shrink: 0; + margin-bottom: var(--space-5); } .invoice-header-compact h1 { - margin: 0; - font-size: 1.5rem; - color: var(--text-primary); + font-size: 1.25rem; font-weight: 600; } @@ -817,41 +843,41 @@ button:focus-visible { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); - padding: 0.5rem 1rem; - border-radius: 6px; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-md); cursor: pointer; font-weight: 500; - font-size: 0.9rem; - transition: all 0.2s; + font-size: 13px; + transition: border-color var(--transition-fast), color var(--transition-fast); + height: 32px; } .btn-back:hover { - background: #f8fafc; color: var(--text-primary); - border-color: #cbd5e1; + border-color: var(--gray-300); + background: transparent; } .invoice-form-compact { background: var(--card-bg); - border-radius: 12px; + border-radius: var(--radius-lg); border: 1px solid var(--border-color); - padding: 2rem; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + padding: var(--space-5); + box-shadow: var(--shadow-xs); } .form-grid-compact { display: grid; grid-template-columns: 2fr 1fr 1fr; - gap: 1rem; - margin-bottom: 1.5rem; - flex-shrink: 0; + gap: var(--space-3); + margin-bottom: var(--space-5); } .notes-grid-compact { display: grid; grid-template-columns: 1fr 1fr; - gap: 1rem; - margin-bottom: 1.5rem; + gap: var(--space-3); + margin-bottom: var(--space-5); } .form-field-compact { @@ -865,24 +891,29 @@ button:focus-visible { .form-field-compact label { font-weight: 500; - margin-bottom: 0.5rem; + margin-bottom: var(--space-1); color: var(--text-secondary); - font-size: 0.875rem; + font-size: 13px; } .form-field-compact input, .form-field-compact select, .form-field-compact textarea { - padding: 0.625rem 0.75rem; + padding: var(--space-2) var(--space-3); border: 1px solid var(--border-color); - border-radius: 6px; - font-size: 0.9375rem; + border-radius: var(--radius-md); + font-size: 14px; color: var(--text-primary); - background: #ffffff; + background: var(--card-bg); resize: vertical; - min-height: 38px; font-family: inherit; - transition: all 0.2s; + transition: border-color var(--transition-fast); + height: 36px; +} + +.form-field-compact textarea { + height: auto; + min-height: 64px; } .form-field-compact input:focus, @@ -890,7 +921,7 @@ button:focus-visible { .form-field-compact textarea:focus { outline: none; border-color: var(--primary); - box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12); } .lines-section-compact { @@ -898,39 +929,37 @@ button:focus-visible { display: flex; flex-direction: column; overflow: hidden; - margin-bottom: 1.5rem; + margin-bottom: var(--space-5); } .lines-header-compact { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 1rem; - flex-shrink: 0; + margin-bottom: var(--space-3); } .lines-header-compact h3 { margin: 0; - font-size: 1.125rem; - color: var(--text-primary); + font-size: 14px; font-weight: 600; } .btn-add-compact { - background: #f8fafc; + background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color); - padding: 0.5rem 1rem; - border-radius: 6px; + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-md); cursor: pointer; font-weight: 500; - font-size: 0.875rem; - transition: all 0.2s; + font-size: 13px; + transition: border-color var(--transition-fast); + height: 32px; } .btn-add-compact:hover { - background: #f1f5f9; - border-color: #cbd5e1; + border-color: var(--gray-300); } .lines-table-compact { @@ -938,36 +967,33 @@ button:focus-visible { overflow-y: auto; display: flex; flex-direction: column; - gap: 0.75rem; + gap: var(--space-2); } .line-row-compact { display: grid; grid-template-columns: 4fr 0.8fr 1.2fr 0.8fr 1.2fr auto; - gap: 0.75rem; + gap: var(--space-2); align-items: center; - background: #f8fafc; + background: var(--gray-50); border: 1px solid var(--border-color); - border-radius: 6px; - padding: 0.75rem; - transition: all 0.2s; -} - -.line-row-compact:hover { - background: #f1f5f9; + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-3); } .line-desc-compact, .line-qty-compact, .line-price-compact, .line-tax-compact { - padding: 0.5rem 0.625rem; + padding: var(--space-1) var(--space-2); border: 1px solid var(--border-color); - border-radius: 4px; - font-size: 0.875rem; + border-radius: var(--radius-sm); + font-size: 13px; background: white; color: var(--text-primary); - transition: all 0.2s; + font-family: inherit; + transition: border-color var(--transition-fast); + height: 32px; } .line-desc-compact { @@ -980,78 +1006,81 @@ button:focus-visible { .line-tax-compact:focus { outline: none; border-color: var(--primary); - box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12); } .line-total-compact { - font-weight: 600; + font-weight: 500; color: var(--text-primary); - font-size: 0.9375rem; + font-size: 13px; text-align: right; - padding-right: 0.5rem; + padding-right: var(--space-2); + font-variant-numeric: tabular-nums; } .btn-delete-compact { background: transparent; - color: #94a3b8; - border: 1px solid transparent; - width: 32px; - height: 32px; - border-radius: 4px; + color: var(--gray-400); + border: none; + width: 28px; + height: 28px; + border-radius: var(--radius-sm); cursor: pointer; - font-size: 1.5rem; - font-weight: 300; + font-size: 16px; + font-weight: 400; line-height: 1; display: flex; align-items: center; justify-content: center; - transition: all 0.2s; + transition: color var(--transition-fast), background-color var(--transition-fast); flex-shrink: 0; + padding: 0; } .btn-delete-compact:hover { - color: #ef4444; - background: #fee2e2; + color: var(--danger); + background: var(--red-50); border-color: transparent; } .form-actions-compact { display: flex; justify-content: flex-end; - gap: 0.75rem; - margin-top: 0; - padding-top: 1.5rem; + gap: var(--space-2); + padding-top: var(--space-4); border-top: 1px solid var(--border-color); - flex-shrink: 0; } .btn-cancel-compact { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); - padding: 0.625rem 1.25rem; - border-radius: 6px; + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-md); cursor: pointer; font-weight: 500; - font-size: 0.9375rem; - transition: all 0.2s; + font-size: 14px; + transition: border-color var(--transition-fast), color var(--transition-fast); + height: 36px; } .btn-cancel-compact:hover { - background: #f8fafc; color: var(--text-primary); + border-color: var(--gray-300); + background: transparent; } .btn-submit-compact { background: var(--primary); color: white; border: none; - padding: 0.625rem 1.5rem; - border-radius: 6px; + padding: var(--space-2) var(--space-5); + border-radius: var(--radius-md); cursor: pointer; font-weight: 500; - font-size: 0.9375rem; - transition: all 0.2s; + font-size: 14px; + transition: background-color var(--transition-fast); + height: 36px; } .btn-submit-compact:hover { @@ -1059,168 +1088,83 @@ button:focus-visible { } .btn-submit-compact:disabled { - background: #e2e8f0; - color: #94a3b8; + background: var(--gray-200); + color: var(--gray-400); cursor: not-allowed; } -@media (max-width: 768px) { - .create-invoice-page { - padding: 0.5rem; - height: calc(100vh - 1rem); - } - - .form-grid-compact { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - .form-field-compact.full-width { - grid-column: 1; - } - - .line-row-compact { - grid-template-columns: 1fr auto; - gap: 0.5rem; - padding: 0.75rem; - } - - .line-desc-compact { - grid-column: 1; - } - - .line-qty-compact, - .line-price-compact, - .line-tax-compact, - .line-total-compact { - width: 60px; - } - - .btn-delete-compact { - grid-column: 2; - } -} - -/* ========================================== - CLIENTES PAGE STYLES - ========================================== */ - +/* ============================================ + Clientes Page + ============================================ */ .clientes-page { - padding: 2rem; - max-width: 1600px; + padding: var(--space-6); + max-width: 1400px; margin: 0 auto; } .clientes-header { - margin-bottom: 2rem; + margin-bottom: var(--space-5); } .clientes-header h1 { - color: var(--text-primary); - font-size: 2rem; - margin: 0; + font-size: 1.25rem; + font-weight: 600; } .clientes-filters { display: flex; - gap: 1rem; - margin-bottom: 1.5rem; + gap: var(--space-3); + margin-bottom: var(--space-4); align-items: center; } .clientes-filters .search-input { flex: 1; - max-width: 500px; -} - -/* Clients Table */ -.clients-table-container { - background: var(--card-bg); - border-radius: 12px; - border: 1px solid var(--border-color); - overflow: hidden; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); -} - -.clients-table { - width: 100%; - border-collapse: collapse; -} - -.clients-table thead { - background: #f8fafc; - border-bottom: 2px solid var(--border-color); -} - -.clients-table th { - font-weight: 600; - color: var(--text-secondary); - font-size: 0.85rem; - text-transform: uppercase; - padding: 1rem 1.5rem; - text-align: left; -} - -.clients-table tbody tr { - border-bottom: 1px solid var(--border-color); - transition: background-color 0.2s; -} - -.clients-table tbody tr:hover { - background-color: #f8fafc; -} - -.clients-table tbody tr:last-child { - border-bottom: none; -} - -.clients-table td { - padding: 1rem 1.5rem; - vertical-align: middle; + max-width: 400px; } +/* Client table cells */ .client-avatar-col { - width: 60px; + width: 48px; } .client-avatar-cell { - width: 60px; + width: 48px; } .client-avatar { - width: 42px; - height: 42px; + width: 32px; + height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; - font-weight: 600; - font-size: 0.9rem; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + font-weight: 500; + font-size: 12px; } .client-name-wrapper { display: flex; flex-direction: column; - gap: 0.25rem; + gap: 1px; } .client-company-name { - font-weight: 600; + font-weight: 500; color: var(--text-primary); } .client-code { - font-size: 0.8rem; + font-size: 11px; color: var(--text-secondary); - font-family: monospace; + font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace; } .contact-info { display: flex; flex-direction: column; - gap: 0.25rem; + gap: 1px; } .contact-name { @@ -1228,13 +1172,14 @@ button:focus-visible { } .contacts-count { - font-size: 0.75rem; + font-size: 11px; color: var(--primary); - background: rgba(37, 99, 235, 0.1); - padding: 0.15rem 0.5rem; - border-radius: 10px; + background: var(--blue-50); + padding: 1px var(--space-2); + border-radius: var(--radius-sm); display: inline-block; width: fit-content; + font-weight: 500; } .client-email .email-text { @@ -1244,26 +1189,21 @@ button:focus-visible { text-overflow: ellipsis; white-space: nowrap; display: inline-block; + font-size: 13px; } .client-phone { color: var(--text-primary); - font-family: monospace; + font-variant-numeric: tabular-nums; + font-size: 13px; } .client-actions { text-align: center; } -.client-actions .btn-action { - margin: 0 auto; - display: flex; - align-items: center; - justify-content: center; -} - .clients-table .client-actions-col { - width: 80px; + width: 60px; text-align: center; } @@ -1276,49 +1216,50 @@ button:focus-visible { margin: 0 auto; } -/* Status badge for clients */ +/* Client status badge */ .status-badge-client { - display: inline-block; - padding: 0.2rem 0.6rem; - border-radius: 12px; - font-size: 0.8rem; + display: inline-flex; + align-items: center; + padding: 2px var(--space-2); + border-radius: var(--radius-sm); + font-size: 12px; font-weight: 500; white-space: nowrap; } .status-badge-client.status-active { - background: rgba(16, 185, 129, 0.1); - color: #059669; + background: var(--green-50); + color: var(--green-600); } .status-badge-client.status-inactive { - background: rgba(239, 68, 68, 0.1); - color: #dc2626; + background: var(--red-50); + color: var(--red-600); } .status-badge-client.status-unknown { - background: rgba(100, 116, 139, 0.1); - color: #64748b; + background: var(--gray-100); + color: var(--gray-500); } /* Contacts button */ .btn-contacts { position: relative; - background: rgba(37, 99, 235, 0.08); - border: 1px solid rgba(37, 99, 235, 0.2); + background: var(--blue-50); + border: 1px solid rgba(59, 130, 246, 0.15); color: var(--primary); - border-radius: 6px; - padding: 0.35rem 0.5rem; + border-radius: var(--radius-sm); + padding: 2px var(--space-2); cursor: pointer; - transition: all 0.2s; + transition: background-color var(--transition-fast); display: flex; align-items: center; - gap: 0.15rem; + gap: 2px; + font-size: 12px; } .btn-contacts:hover { - background: rgba(37, 99, 235, 0.15); - border-color: var(--primary); + background: var(--blue-100); } .btn-contacts.active { @@ -1328,65 +1269,54 @@ button:focus-visible { } .contacts-badge { - font-size: 0.7rem; - font-weight: 700; - min-width: 16px; + font-size: 11px; + font-weight: 600; + min-width: 14px; text-align: center; } /* Expandable contacts row */ .contacts-expand-row td { padding: 0 !important; - background: #f8fafc; + background: var(--gray-50); } .contacts-expand-content { - padding: 1rem 1.5rem; + padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-color); border-bottom: 2px solid var(--primary); - animation: expandDown 0.2s ease-out; -} - -@keyframes expandDown { - from { - opacity: 0; - max-height: 0; - } - to { - opacity: 1; - max-height: 500px; - } } .contacts-expand-header h4 { - margin: 0 0 0.75rem 0; - font-size: 0.85rem; + margin: 0 0 var(--space-3) 0; + font-size: 12px; color: var(--text-secondary); text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.04em; + font-weight: 500; } .contacts-expand-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 0.75rem; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: var(--space-2); } .contact-expand-card { background: white; border: 1px solid var(--border-color); - border-radius: 8px; - padding: 0.75rem 1rem; + border-radius: var(--radius-md); + padding: var(--space-3); } .contact-expand-name { display: flex; align-items: center; - gap: 0.5rem; - font-weight: 600; + gap: var(--space-2); + font-weight: 500; color: var(--text-primary); - margin-bottom: 0.5rem; - font-size: 0.95rem; + margin-bottom: var(--space-2); + font-size: 14px; } .contact-expand-name svg { @@ -1397,8 +1327,8 @@ button:focus-visible { .contact-expand-details { display: grid; grid-template-columns: 1fr 1fr; - gap: 0.3rem 1rem; - font-size: 0.8rem; + gap: 2px var(--space-3); + font-size: 12px; color: var(--text-secondary); } @@ -1408,13 +1338,6 @@ button:focus-visible { text-overflow: ellipsis; } -.no-clients { - padding: 3rem; - text-align: center; - color: var(--text-secondary); - font-size: 1.1rem; -} - /* Client Modal */ .client-modal-overlay { position: fixed; @@ -1422,173 +1345,230 @@ button:focus-visible { left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; - padding: 1rem; + padding: var(--space-4); } .client-modal { background: var(--card-bg); - border-radius: 12px; + border-radius: var(--radius-lg); width: 100%; - max-width: 600px; + max-width: 560px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + box-shadow: var(--shadow-lg); } .client-modal-header { display: flex; justify-content: space-between; align-items: center; - padding: 1.5rem; + padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-color); - background: #f8fafc; } .client-modal-header h2 { margin: 0; - font-size: 1.5rem; - color: var(--text-primary); + font-size: 1.125rem; + font-weight: 600; } .btn-close-modal { background: transparent; border: none; - font-size: 1.5rem; + font-size: 18px; cursor: pointer; color: var(--text-secondary); - padding: 0.25rem 0.5rem; - border-radius: 4px; - transition: all 0.2s; + padding: var(--space-1); + border-radius: var(--radius-sm); + transition: color var(--transition-fast), background-color var(--transition-fast); + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; } .btn-close-modal:hover { - background: var(--border-color); + background: var(--gray-100); color: var(--text-primary); } .client-modal-body { - padding: 1.5rem; + padding: var(--space-5); overflow-y: auto; } .client-info-section, .contacts-section { - margin-bottom: 1.5rem; + margin-bottom: var(--space-5); +} + +.client-info-section:last-child, +.contacts-section:last-child { + margin-bottom: 0; } .client-info-section h3, .contacts-section h3 { - margin: 0 0 1rem 0; - font-size: 1rem; + margin: 0 0 var(--space-3) 0; + font-size: 12px; color: var(--text-secondary); text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.04em; + font-weight: 500; } .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 1rem; + gap: var(--space-3); } .info-item { display: flex; flex-direction: column; - gap: 0.25rem; + gap: 1px; } .info-label { - font-size: 0.8rem; + font-size: 11px; color: var(--text-secondary); text-transform: uppercase; + letter-spacing: 0.04em; + font-weight: 500; } .info-value { - font-weight: 600; + font-weight: 500; color: var(--text-primary); + font-size: 14px; } .contacts-list { display: flex; flex-direction: column; - gap: 1rem; + gap: var(--space-3); } .contact-card { - background: #f8fafc; - border-radius: 8px; - padding: 1rem; + background: var(--gray-50); + border-radius: var(--radius-md); + padding: var(--space-3); border: 1px solid var(--border-color); } .contact-header { - margin-bottom: 0.75rem; + margin-bottom: var(--space-2); } .contact-full-name { - font-weight: 600; + font-weight: 500; color: var(--text-primary); - font-size: 1.05rem; + font-size: 14px; } .contact-details { display: flex; flex-direction: column; - gap: 0.5rem; + gap: var(--space-1); } .contact-row { display: flex; - gap: 0.5rem; - font-size: 0.9rem; + gap: var(--space-2); + font-size: 13px; color: var(--text-secondary); } .contact-row .label { - min-width: 120px; + min-width: 110px; + flex-shrink: 0; } .no-contacts { color: var(--text-secondary); text-align: center; - padding: 2rem; - background: #f8fafc; - border-radius: 8px; -} - -/* Responsive Clients */ -@media (max-width: 1024px) { - .clientes-page { - padding: 1rem; - } - - .clients-table th, - .clients-table td { - padding: 0.75rem 1rem; - } - - .client-email-col, - .client-email, - .client-type-col, - .client-type { - display: none; - } + padding: var(--space-5); + background: var(--gray-50); + border-radius: var(--radius-md); + font-size: 13px; } +/* ============================================ + Responsive Design + ============================================ */ @media (max-width: 768px) { + .sidebar { + position: fixed; + left: 0; + top: 0; + bottom: 0; + z-index: 1000; + transform: translateX(0); + } + + .sidebar.collapsed { + transform: translateX(-100%); + width: 220px; + } + + .main-content { + margin-left: 0; + } + + .facturas-filters, .clientes-filters { flex-direction: column; } - .clientes-filters .search-input { - max-width: 100%; + .search-input { + max-width: 100% !important; + } + + .pagination { + flex-wrap: wrap; + gap: var(--space-3); + } + + .btn-pagination { + flex: 1; + min-width: 100px; + justify-content: center; + } + + .pagination-info { + order: 3; + width: 100%; + justify-content: center; + } + + .create-invoice-page { + padding: var(--space-3); + } + + .form-grid-compact { + grid-template-columns: 1fr; + } + + .form-field-compact.full-width { + grid-column: 1; + } + + .notes-grid-compact { + grid-template-columns: 1fr; + } + + .line-row-compact { + grid-template-columns: 1fr auto; + gap: var(--space-2); + padding: var(--space-3); } .clients-table thead { @@ -1598,8 +1578,8 @@ button:focus-visible { .clients-table tbody tr.client-item { display: flex; flex-wrap: wrap; - padding: 1rem; - gap: 0.5rem; + padding: var(--space-3); + gap: var(--space-2); position: relative; } @@ -1613,19 +1593,13 @@ button:focus-visible { .client-avatar-cell { width: auto; - margin-right: 1rem; + margin-right: var(--space-3); } .client-name { flex: 1; } - .client-status, - .client-phone { - width: 100%; - padding-left: 58px; - } - .client-type-col, .client-type { display: none; @@ -1633,7 +1607,7 @@ button:focus-visible { .client-actions { position: absolute; - right: 1rem; + right: var(--space-3); top: 50%; transform: translateY(-50%); } @@ -1642,11 +1616,81 @@ button:focus-visible { grid-template-columns: 1fr; } - .contact-expand-details { - grid-template-columns: 1fr; - } - .info-grid { grid-template-columns: 1fr; } } + +@media (max-width: 1024px) { + .clientes-page, + .facturas-page { + padding: var(--space-4); + } + + .clients-table th, + .clients-table td { + padding: var(--space-2) var(--space-3); + } + + .client-email-col, + .client-email, + .client-type-col, + .client-type { + display: none; + } +} + +/* ============================================ + Dashboard Cards + ============================================ */ +.dashboard-subtitle { + color: var(--text-secondary); + font-size: 13px; + margin: var(--space-1) 0 0 0; +} + +.dashboard-stats { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: var(--space-3); +} + +.dashboard-card { + background: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: var(--space-5); + text-decoration: none; + color: var(--text-primary); + display: flex; + flex-direction: column; + gap: var(--space-2); + transition: border-color var(--transition-fast); +} + +.dashboard-card:hover { + border-color: var(--gray-300); + color: var(--text-primary); +} + +.dashboard-card-icon { + width: 32px; + height: 32px; + border-radius: var(--radius-md); + background: var(--gray-50); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-secondary); + margin-bottom: var(--space-1); +} + +.dashboard-card-label { + font-weight: 500; + font-size: 14px; +} + +.dashboard-card-desc { + font-size: 13px; + color: var(--text-secondary); +}