Visual changes

expenses_manager/expenses/static/expenses/css/base.css

@@ -96,4 +96,83 @@ body {
 
 .tag:hover {
     background: #dbe3ee;
+}
+
+.kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-file, minmax(180px, 1fr));
+    gap: 1rem;
+    margin: 1.5rem 0;
+}
+
+.kpi-card {
+    background: #ffffff;
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.kpi-label {
+    font-size: 0.85rem;
+    color: #666;
+}
+
+.kpi-value {
+    display: block;
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-top: 0.25rem;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+}
+
+th, td {
+    padding: 0.6rem 0.75rem;
+    text-align: left;
+}
+
+thead {
+    background: #f4f6f8;
+}
+
+tbody tr:nth-child(even) {
+    background: #fafafa;    
+}
+
+tbody tr:hover {
+    background: #f0f4f8;
+}
+
+.table-actions a {
+    margin-right: 0.5rem;
+    text-decoration: none;
+    font-size: 0.9rem;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+}
+
+.empty-state a {
+    display: inline-block;
+    margin-top: 0.5rem;
+}
+
+.btn {
+    background: #2563eb;
+    color: white;
+    padding: 0.4rem 0.7rem;
+    border-radius: 6px;
+    text-decoration: none;
+    font-size: 0.9rem;
+}
+
+.btn.secondary {
+    background: #6b7280;
 }

expenses_manager/expenses/templates/expenses/account_form.html

@@ -15,7 +15,7 @@
         {{ form.as_p }}
 
         <button type="submit">Guardar</button>
-        <a href="{% url 'account_list' %}">Cancelar</a>
+        <a class="btn secondary" href="{% url 'account_list' %}">Cancelar</a>
     </form>
 
 {% endblock %}

expenses_manager/expenses/templates/expenses/account_list.html

@@ -4,7 +4,7 @@
 
     <h1>Mis cuentas</h1>
 
-    <a href="{% url 'account_create' %}">➕ Nueva cuenta</a>
+    <a class="btn" href="{% url 'account_create' %}">➕ Nueva cuenta</a>
 
     <table>
         <thead>
@@ -23,14 +23,17 @@
                     <td>{{ account.initial_balance }}</td>
                     <td>{{ account.current_balance|floatformat:2 }}</td>
                     <td>{{ account.active }}</td>
-                    <td>
+                    <td class="table-actions">
                         <a href="{% url 'account_edit' account.id %}">Editar</a>
                         <a href="{% url 'account_delete' account.id %}">Eliminar</a>
                     </td>
                 </tr>
             {% empty %}
             <tr>
-                <td colspan="5">No hay cuentas</td>
+                <td colspan="5" class="empty-state">
+                    <p>No hay cuentas</p>
+                    <a href="{% url 'account_create' %}">Añade la primera</a>
+                </td>
             </tr>
             {% endfor %}
         </tbody>

expenses_manager/expenses/templates/expenses/dashboard.html

@@ -87,29 +87,29 @@
     <!-- ========================= -->
 
     
-    <div class="kpis">            
+    <section class="kpi-grid">            
 
-        <div class="kpi">
-            <h3>Saldo actual</h3>
-            {{ kpi_balance|floatformat:2 }}€
+        <div class="kpi-card">
+            <span class="kpi-label">Saldo actual</span>
+            <span class="kpi-value">{{ kpi_balance|floatformat:2 }}€</span>
         </div>
         
-        <div class="kpi">
-            <h3>Gastos totales</h3>
-            <p>{{ kpi_total }}€</p>
+        <div class="kpi-card">
+            <span class="kpi-label">Gastos totales</span>
+            <span class="kpi-value">{{ kpi_total }}€</span>
         </div>
 
-        <div class="kpi">
-            <h3>Nº de gastos</h3>
-            <p>{{ kpi_count }}</p>
+        <div class="kpi-card">
+            <span class="kpi-label">Nº de gastos</span>
+            <span class="kpi-value">{{ kpi_count }}</span>
         </div>
 
-        <div class="kpi">
-            <h3>Categorías</h3>
-            <p>{{ kpi_categories }}</p>
+        <div class="kpi-card">
+            <span class="kpi-label">Categorías</span>
+            <span class="kpi-value">{{ kpi_categories }}</span>
         </div>
 
-    </div>
+    </section>
 
     {% if compare_enabled %}
         <section class="kpi compare">

expenses_manager/expenses/templates/expenses/expense_list.html

@@ -72,7 +72,7 @@
 
     <br>
 
-    <a href="{% url 'expense_create' %}">➕ Nuevo gasto</a>
+    <a class="btn" href="{% url 'expense_create' %}">➕ Nuevo gasto</a>
 
     <br>
 
@@ -109,14 +109,17 @@
                             <span>-</span>
                         {% endfor %}
                     </td>
-                    <td>
+                    <td class="table-actions">
                         <a href="{% url 'expense_edit' expense.id %}">Editar</a>
                         <a href="{% url 'expense_delete' expense.id %}">Eliminar</a>
                     </td>
                 </tr>
             {% empty %}
                 <tr>
-                    <td colspan="4">No hay gastos</td>
+                    <td colspan="4"  class="empty-state">
+                        <p>No hay gastos</p>
+                        <a href="{% url 'expense_create' %}">Añade el primero</a>
+                    </td>
                 </tr>
             {% endfor %}
         </tbody>

expenses_manager/expenses/templates/expenses/income_confirm_delete.html

@@ -19,5 +19,5 @@
         <button type="submit">Sí, borrar</button>
     </form>
 
-    <a href="{% url 'income_list' %}">Cancelar</a>
+    <a class="btn secondary" href="{% url 'income_list' %}">Cancelar</a>
 {% endblock %}

expenses_manager/expenses/templates/expenses/income_form.html

@@ -28,5 +28,5 @@
         </button>            
     </form>
 
-    <a href="{% url 'income_list' %}">Volver</a>
+    <a class="btn secondary" href="{% url 'income_list' %}">Volver</a>
 {% endblock %}

expenses_manager/expenses/templates/expenses/income_list.html

@@ -3,7 +3,7 @@
 {% block content %}
     <h1>Mis ingresos</h1>
 
-    <a href="{% url 'income_create' %}">➕ Nuevo ingreso</a>
+    <a class="btn" href="{% url 'income_create' %}">➕ Nuevo ingreso</a>
 
     <table>
         <thead>
@@ -22,14 +22,17 @@
                     <td>{{ income.account }}</td>
                     <td>{{ income.amount|floatformat:2 }}</td>
                     <td>{{ income.date }}</td>
-                    <td>
+                    <td class="table-actions">
                         <a href="{% url 'income_edit' income.id %}">Editar</a>
                         <a href="{% url 'income_delete' income.id %}">Eliminar</a>
                     </td>
                 </tr>
             {% empty %}
             <tr>
-                <td colspan="5">No hay ingresos</td>
+                <td colspan="5" class="empty-state">
+                    <p>No hay ingresos</p>
+                    <a href="{% url 'income_create' %}">Añade el primero</a>
+                </td>
             </tr>
             {% endfor %}
         </tbody>

expenses_manager/expenses/templates/expenses/tag_confirm_delete.html

@@ -8,5 +8,5 @@
         <button type="submit">Eliminar</button>
     </form>
 
-    <a href="{% url 'tag_list' %}">Cancelar</a>
+    <a class="btn secondary" href="{% url 'tag_list' %}">Cancelar</a>
 {% endblock %}

expenses_manager/expenses/templates/expenses/tag_form.html

@@ -9,5 +9,5 @@
         <button type="submit">Guardar</button>
     </form>
 
-    <a href="{% url 'tag_list' %}">Volver</a>
+    <a class="btn secondary" href="{% url 'tag_list' %}">Volver</a>
 {% endblock %}

expenses_manager/expenses/templates/expenses/tag_list.html

@@ -3,11 +3,11 @@
 {% block content %}
     <h1>Etiquetas</h1>
 
-    <a href="{% url 'tag_create' %}">➕ Nueva etiqueta</a>
+    <a class="btn" href="{% url 'tag_create' %}">➕ Nueva etiqueta</a>
 
     <ul>
         {% for tag in tags %}
-            <li>
+            <li class="table-actions">
                 {{ tag.name }}
                 <a href="{% url 'tag_edit' tag.id %}">Editar</a>
                 <a href="{% url 'tag_delete' tag.id %}">Eliminar</a>