Refactor CSS styles for improved readability and consistency

src/pages/DashboardPage.js

@@ -68,9 +68,9 @@ function formatDate(dateStr) {
 
 function getStatusBadge(status) {
   const map = {
-    draft:  { label: 'Borrador',  cls: 'badge-draft'  },
+    draft: { label: 'Borrador', cls: 'badge-draft' },
     unpaid: { label: 'Pte. Pago', cls: 'badge-unpaid' },
-    paid:   { label: 'Pagada',    cls: 'badge-paid'   },
+    paid: { label: 'Pagada', cls: 'badge-paid' },
   };
   const s = map[status] || { label: status || '—', cls: 'badge-draft' };
   return `<span class="badge ${s.cls}">${s.label}</span>`;
@@ -78,23 +78,23 @@ function getStatusBadge(status) {
 
 function statusDotStyle(status) {
   const map = {
-    paid:   { bg: '#f0fdf4', color: '#16a34a' },
+    paid: { bg: '#f0fdf4', color: '#16a34a' },
     unpaid: { bg: '#fffbeb', color: '#b45309' },
-    draft:  { bg: '#f3f4f6', color: '#6b7280' },
+    draft: { bg: '#f3f4f6', color: '#6b7280' },
   };
   const s = map[status] || map.draft;
   return `background:${s.bg};color:${s.color}`;
 }
 
 function openInvoiceModal(invoiceId) {
-  const modal = InvoiceModal(invoiceId, null, () => {});
+  const modal = InvoiceModal(invoiceId, null, () => { });
   document.body.appendChild(modal);
 }
 
 export function renderDashboard() {
-  const user     = auth.getUser();
+  const user = auth.getUser();
   const userName = user?.identifier || user?.email || user?.username || 'Usuario';
-  const year     = new Date().getFullYear();
+  const year = new Date().getFullYear();
 
   const container = document.createElement('div');
   container.className = 'dashboard';

src/style.css

@@ -1750,10 +1750,24 @@ button:disabled {
   min-height: 1rem;
 }
 
-.db-sub-green { color: var(--green-600); font-weight: 500; }
+.db-sub-green {
-.db-sub-amber { color: var(--amber-600); font-weight: 500; }
+  color: var(--green-600);
-.db-sub-red   { color: var(--red-600);   font-weight: 500; }
+  font-weight: 500;
-.db-sub-muted { color: var(--text-secondary); }
+}
+
+.db-sub-amber {
+  color: var(--amber-600);
+  font-weight: 500;
+}
+
+.db-sub-red {
+  color: var(--red-600);
+  font-weight: 500;
+}
+
+.db-sub-muted {
+  color: var(--text-secondary);
+}
 
 /* Skeleton loaders */
 .db-kpi-skeleton {
@@ -1772,8 +1786,13 @@ button:disabled {
 }
 
 @keyframes db-shimmer {
-  0%   { background-position: 200% 0; }
+  0% {
-  100% { background-position: -200% 0; }
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
 }
 
 /* Middle row: chart + recent */
@@ -1826,7 +1845,9 @@ button:disabled {
   font-weight: 500;
 }
 
-.db-see-all:hover { text-decoration: underline; }
+.db-see-all:hover {
+  text-decoration: underline;
+}
 
 /* Chart body */
 .db-chart-body {
@@ -1856,9 +1877,13 @@ button:disabled {
   transition: background var(--transition-fast);
 }
 
-.db-recent-item:last-child { border-bottom: none; }
+.db-recent-item:last-child {
+  border-bottom: none;
+}
 
-.db-recent-item:hover { background: var(--gray-50); }
+.db-recent-item:hover {
+  background: var(--gray-50);
+}
 
 .db-recent-dot {
   width: 30px;
@@ -1878,7 +1903,9 @@ button:disabled {
   transition: color var(--transition-fast);
 }
 
-.db-recent-item:hover .db-recent-arrow { color: var(--gray-500); }
+.db-recent-item:hover .db-recent-arrow {
+  color: var(--gray-500);
+}
 
 .db-recent-info {
   flex: 1;
@@ -1925,9 +1952,13 @@ button:disabled {
 }
 
 /* Monitoring table */
-.db-table-card { margin-bottom: var(--space-4); }
+.db-table-card {
+  margin-bottom: var(--space-4);
+}
 
-.db-table-wrap { overflow-x: auto; }
+.db-table-wrap {
+  overflow-x: auto;
+}
 
 .db-monitoring-table {
   width: 100%;
@@ -1948,10 +1979,17 @@ button:disabled {
   white-space: nowrap;
 }
 
-.db-th-right { text-align: right !important; }
+.db-th-right {
+  text-align: right !important;
+}
 
-.db-monitoring-table thead th:first-child { padding-left: var(--space-5); }
+.db-monitoring-table thead th:first-child {
-.db-monitoring-table thead th:last-child  { padding-right: var(--space-5); }
+  padding-left: var(--space-5);
+}
+
+.db-monitoring-table thead th:last-child {
+  padding-right: var(--space-5);
+}
 
 .db-table-row {
   cursor: pointer;
@@ -1965,17 +2003,47 @@ button:disabled {
   transition: background var(--transition-fast);
 }
 
-.db-table-row:last-child td { border-bottom: none; }
+.db-table-row:last-child td {
-.db-table-row:hover td { background: var(--gray-50); }
+  border-bottom: none;
+}
 
-.db-table-row td:first-child { padding-left: var(--space-5); }
+.db-table-row:hover td {
-.db-table-row td:last-child  { padding-right: var(--space-5); }
+  background: var(--gray-50);
+}
 
-.db-cell-num    { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
+.db-table-row td:first-child {
-.db-cell-client { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  padding-left: var(--space-5);
-.db-cell-right  { text-align: right; }
+}
-.db-remain-due  { color: var(--red-600); font-weight: 600; }
+
-.db-remain-ok   { color: var(--green-600); }
+.db-table-row td:last-child {
+  padding-right: var(--space-5);
+}
+
+.db-cell-num {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.db-cell-client {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.db-cell-right {
+  text-align: right;
+}
+
+.db-remain-due {
+  color: var(--red-600);
+  font-weight: 600;
+}
+
+.db-remain-ok {
+  color: var(--green-600);
+}
 
 .db-table-loading {
   text-align: center;
@@ -1995,8 +2063,13 @@ button:disabled {
   margin: 0;
 }
 
-.db-error { color: var(--red-600); }
+.db-error {
-.db-td-center { text-align: center; }
+  color: var(--red-600);
+}
+
+.db-td-center {
+  text-align: center;
+}
 
 /* Recent skeleton */
 .db-recent-skeleton {
@@ -2029,8 +2102,13 @@ button:disabled {
   animation: db-shimmer 1.4s infinite;
 }
 
-.db-skel-lines span:first-child { width: 70%; }
+.db-skel-lines span:first-child {
-.db-skel-lines span:last-child  { width: 50%; }
+  width: 70%;
+}
+
+.db-skel-lines span:last-child {
+  width: 50%;
+}
 
 .db-skel-right {
   display: flex;
@@ -2048,21 +2126,35 @@ button:disabled {
   animation: db-shimmer 1.4s infinite;
 }
 
-.db-skel-right span:first-child { width: 60px; }
+.db-skel-right span:first-child {
-.db-skel-right span:last-child  { width: 44px; }
+  width: 60px;
+}
+
+.db-skel-right span:last-child {
+  width: 44px;
+}
 
 /* Responsive */
 @media (max-width: 1100px) {
-  .db-kpi-row  { grid-template-columns: repeat(2, 1fr); }
+  .db-kpi-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 @media (max-width: 900px) {
-  .db-mid-row  { grid-template-columns: 1fr; }
+  .db-mid-row {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 580px) {
-  .db-kpi-row  { grid-template-columns: 1fr; }
+  .db-kpi-row {
-  .db-greeting { font-size: 1.1rem; }
+    grid-template-columns: 1fr;
+  }
+
+  .db-greeting {
+    font-size: 1.1rem;
+  }
 }
 
 /* Keep legacy dashboard-subtitle for possible other uses */