Refactor login and dashboard components to use template literals for HTML rendering; update styles for improved theming and responsiveness.

src/pages/DashboardPage.js

@@ -5,7 +5,7 @@ export function renderDashboard() {
   const container = document.createElement('div');
   container.className = 'dashboard';
 
-  container.innerHTML = `
+  container.innerHTML = html`
     <div class="dashboard-header">
       <h1>Bienvenido, ${user?.email || 'Usuario'}</h1>
       <button id="logout-button" class="logout-button">Cerrar Sesión</button>

src/style.css

@@ -4,8 +4,21 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: #1e293b;
+  background-color: #f8fafc;
+
+  --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;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,11 +28,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--primary);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: var(--primary-hover);
 }
 
 body {
@@ -70,12 +83,13 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: var(--primary);
+  color: white;
   cursor: pointer;
-  transition: border-color 0.25s;
+  transition: background-color 0.25s, border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  background-color: var(--primary-hover);
 }
 button:focus,
 button:focus-visible {
@@ -84,14 +98,11 @@ button:focus-visible {
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    color: var(--text-primary);
+    background-color: #f8fafc;
   }
   a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
+    color: var(--primary-hover);
   }
 }
 
@@ -103,16 +114,17 @@ button:focus-visible {
 }
 
 .login-card {
-  background: #2a2a2a;
+  background: var(--card-bg);
   padding: 2.5rem;
   border-radius: 12px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  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: #fff;
+  color: var(--text-primary);
   margin: 0 0 2rem 0;
   font-size: 1.8rem;
   text-align: center;
@@ -124,7 +136,7 @@ button:focus-visible {
 
 .form-group label {
   display: block;
-  color: #fff;
+  color: var(--text-primary);
   margin-bottom: 0.5rem;
   font-weight: 500;
 }
@@ -132,23 +144,24 @@ button:focus-visible {
 .form-group input {
   width: 100%;
   padding: 0.75rem;
-  border: 1px solid #444;
+  border: 1px solid var(--border-color);
   border-radius: 6px;
-  background: #1a1a1a;
-  color: #fff;
+  background: #fff;
+  color: var(--text-primary);
   font-size: 1rem;
   box-sizing: border-box;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #646cff;
+  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: #646cff;
+  background-color: var(--primary);
   color: white;
   border: none;
   border-radius: 6px;
@@ -159,12 +172,12 @@ button:focus-visible {
 }
 
 .login-button:hover {
-  background-color: #535bf2;
+  background-color: var(--primary-hover);
   border-color: transparent;
 }
 
 .login-error {
-  color: #ff6b6b;
+  color: var(--danger);
   text-align: center;
   margin-top: 1rem;
   font-size: 0.9rem;
@@ -189,13 +202,15 @@ button:focus-visible {
 }
 
 .dashboard-content {
-  background: #2a2a2a;
+  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: #ff6b6b;
+  background-color: var(--danger);
   color: white;
   padding: 0.5rem 1rem;
   border: none;
@@ -204,6 +219,67 @@ button:focus-visible {
 }
 
 .logout-button:hover {
-  background-color: #fa5252;
+  background-color: var(--danger-hover);
   border-color: transparent;
 }
+
+.status-badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.status-pending {
+  background-color: #fef3c7;
+  color: #d97706;
+}
+
+.status-paid {
+  background-color: #d1fae5;
+  color: #059669;
+}
+
+.status-overdue {
+  background-color: #fee2e2;
+  color: #dc2626;
+}
+
+.status-draft {
+  background-color: #f1f5f9;
+  color: #64748b;
+}
+
+.amount-display {
+  font-family: 'Courier New', monospace;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.card-stat {
+  background: var(--card-bg);
+  padding: 1.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+}
+
+.card-stat-label {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+.card-stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.card-stat.positive .card-stat-value {
+  color: var(--success);
+}
+
+.card-stat.negative .card-stat-value {
+  color: var(--danger);
+}