Refactor invoice status labels and update navigation toast functionality

src/components/InvoiceItem.js

@@ -20,7 +20,7 @@ export function InvoiceItem(invoice, onView) {
   const getStatusClass = (status) => {
     const statusMap = {
       'draft': 'status-draft',
-      'validated': 'status-validated',
+      'validated': 'status-unpaid',
       'paid': 'status-paid',
       'unpaid': 'status-unpaid',
       'canceled': 'status-canceled'
@@ -32,9 +32,9 @@ export function InvoiceItem(invoice, onView) {
   const getStatusText = (status) => {
     const statusTextMap = {
       'draft': 'Borrador',
-      'validated': 'Validada',
+      'validated': 'Pte. Pago',
       'paid': 'Pagada',
-      'unpaid': 'Impagada',
+      'unpaid': 'Pte. Pago',
       'canceled': 'Cancelada'
     };
     return statusTextMap[status] || status;

src/components/InvoiceModal.js

@@ -39,9 +39,9 @@ export function InvoiceModal(invoiceId, onClose, onUpdate) {
   const getStatusText = (status) => {
     const statusTextMap = {
       'draft': 'Borrador',
-            'validated': 'Validada',
+      'validated': 'Pte. Pago',
       'paid': 'Pagada',
-            'unpaid': 'Impagada',
+      'unpaid': 'Pte. Pago',
       'canceled': 'Cancelada'
     };
     return statusTextMap[status] || status;
@@ -144,14 +144,14 @@ export function InvoiceModal(invoiceId, onClose, onUpdate) {
             <div class="form-row">
               <div class="form-group full-width">
                 <label>Nota Pública</label>
-                <textarea name="note_public" rows="3">${invoice.note_public || ''}</textarea>
+                <textarea name="note_public" rows="3">${invoice.notePublic || ''}</textarea>
               </div>
             </div>
 
             <div class="form-row">
               <div class="form-group full-width">
                 <label>Nota Privada</label>
-                <textarea name="note_private" rows="3">${invoice.note_private || ''}</textarea>
+                <textarea name="note_private" rows="3">${invoice.notePrivate || ''}</textarea>
               </div>
             </div>
           </div>

src/pages/Facturas.js

@@ -24,9 +24,8 @@ export function renderFacturasPage() {
       <select class="filter-status">
         <option value="">Todos los estados</option>
         <option value="draft">Borrador</option>
+        <option value="unpaid">Pte. Pago</option>
         <option value="paid">Pagada</option>
-        <option value="unpaid">Impagada</option>
-        <option value="canceled">Cancelada</option>
       </select>
       <button class="btn-new-invoice">+ Nueva Factura</button>
     </div>

src/style.css

@@ -95,7 +95,9 @@
 /* ============================================
    Reset & Base
    ============================================ */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -115,7 +117,12 @@ a:hover {
   color: var(--primary-hover);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
   font-weight: 600;
   line-height: 1.3;
@@ -123,9 +130,17 @@ h1, h2, h3, h4, h5, h6 {
   letter-spacing: -0.01em;
 }
 
-h1 { font-size: 1.5rem; }
-h2 { font-size: 1.25rem; }
-h3 { font-size: 1rem; }
+h1 {
+  font-size: 1.5rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+}
+
+h3 {
+  font-size: 1rem;
+}
 
 #app {
   width: 100%;
@@ -1622,6 +1637,7 @@ button:disabled {
 }
 
 @media (max-width: 1024px) {
+
   .clientes-page,
   .facturas-page {
     padding: var(--space-4);