diff --git a/resources/view/contabilidad/contabilidad.html b/resources/view/contabilidad/contabilidad.html
index 7029fab..8a9e30f 100644
--- a/resources/view/contabilidad/contabilidad.html
+++ b/resources/view/contabilidad/contabilidad.html
@@ -120,3 +120,21 @@ function contabilidadApp() {
   }
 }
 </script>
+
+<style>
+.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
+.btn-primary:hover { background:#6d8c24; }
+.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
+.btn-danger { background:#ef4444; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; }
+.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
+.btn-icon:hover { background:#f1f5f9; }
+.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
+.input-field:focus { border-color:#8eb02f; }
+.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
+.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
+.badge-green { background:#dcfce7; color:#15803d; }
+.badge-yellow { background:#fef9c3; color:#854d0e; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.badge-blue { background:#dbeafe; color:#1d4ed8; }
+</style>
diff --git a/resources/view/contabilidad/cuentas.html b/resources/view/contabilidad/cuentas.html
index 07916bb..46fc632 100644
--- a/resources/view/contabilidad/cuentas.html
+++ b/resources/view/contabilidad/cuentas.html
@@ -5,7 +5,14 @@
       <h1 class="text-2xl font-bold text-slate-800">Categorías contables</h1>
       <p class="text-sm text-slate-500 mt-1">Plan de cuentas para clasificar transacciones</p>
     </div>
-    <button @click="openCreate()" class="btn-primary flex items-center gap-2">Nueva categoría</button>
+    <button @click="openCreate()" class="btn-primary flex items-center gap-2">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+      Nueva categoría
+    </button>
+  </div>
+
+  <div class="mb-4">
+    <input x-model="search" @input.debounce.400ms="page=1;load()" type="text" placeholder="Buscar por nombre o código..." class="input-field w-full max-w-sm">
   </div>
 
   <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-x-auto">
@@ -57,10 +64,10 @@
 
   <!-- Modal -->
   <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-    <div @click.outside="showModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 p-6">
-      <h2 class="text-lg font-bold mb-4" x-text="editId ? 'Editar categoría' : 'Nueva categoría'"></h2>
+    <div @click.outside="showModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6">
+      <h2 class="text-lg font-bold text-slate-800 mb-4" x-text="editId ? 'Editar categoría' : 'Nueva categoría'"></h2>
       <form @submit.prevent="save()">
-        <div class="grid grid-cols-2 gap-3">
+        <div class="grid grid-cols-2 gap-4">
           <div>
             <label class="label">Código</label>
             <input x-model="form.codigo" class="input-field w-full" placeholder="ING-FAC">
@@ -78,7 +85,7 @@
           </div>
           <div>
             <label class="label">Color</label>
-            <input x-model="form.color" type="color" class="input-field w-full h-10">
+            <input x-model="form.color" type="color" class="h-10 w-full rounded border border-slate-200 cursor-pointer">
           </div>
           <div class="flex items-center gap-2 pt-5">
             <input type="checkbox" x-model="form.activo" id="ca" class="w-4 h-4">
@@ -96,7 +103,8 @@
 
   <div x-show="showDelete" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showDelete=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6">
-      <h2 class="text-lg font-bold mb-2">¿Eliminar categoría?</h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-2">¿Eliminar categoría?</h2>
+      <p class="text-slate-600 text-sm mb-5">Esta acción no se puede deshacer.</p>
       <div class="flex justify-end gap-3">
         <button @click="showDelete=false" class="btn-secondary">Cancelar</button>
         <button @click="doDelete()" :disabled="saving" class="btn-danger" x-text="saving?'Eliminando...':'Eliminar'"></button>
@@ -109,7 +117,7 @@
 <script>
 function cuentasApp() {
   return {
-    items:[], total:0, totalPages:1, page:1,
+    items:[], total:0, totalPages:1, page:1, search:'',
     loading:false, saving:false, showModal:false, showDelete:false,
     editId:null, deleteId:null, error:'',
     form:{ codigo:'', nombre:'', tipo:'egreso', color:'#3b82f6', activo:true },
@@ -119,7 +127,7 @@ function cuentasApp() {
     async load(){
       this.loading=true;
       try {
-        const r=await axios.get(`/app/contabilidad/cuentas/list?page=${this.page}`);
+        const r=await axios.get(`/app/contabilidad/cuentas/list?page=${this.page}&search=${encodeURIComponent(this.search)}`);
         this.items=r.data.items; this.total=r.data.total; this.totalPages=r.data.totalPages;
       } finally{ this.loading=false; }
     },
@@ -148,3 +156,21 @@ function cuentasApp() {
   }
 }
 </script>
+
+<style>
+.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
+.btn-primary:hover { background:#6d8c24; }
+.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
+.btn-danger { background:#ef4444; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; }
+.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
+.btn-icon:hover { background:#f1f5f9; }
+.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
+.input-field:focus { border-color:#8eb02f; }
+.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
+.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
+.badge-green { background:#dcfce7; color:#15803d; }
+.badge-yellow { background:#fef9c3; color:#854d0e; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.badge-blue { background:#dbeafe; color:#1d4ed8; }
+</style>
diff --git a/resources/view/contabilidad/cuentas_cobro.html b/resources/view/contabilidad/cuentas_cobro.html
index 024c964..951a365 100644
--- a/resources/view/contabilidad/cuentas_cobro.html
+++ b/resources/view/contabilidad/cuentas_cobro.html
@@ -5,7 +5,10 @@
       <h1 class="text-2xl font-bold text-slate-800">Cuentas por cobrar</h1>
       <p class="text-sm text-slate-500 mt-1">Facturas y montos pendientes de cobro</p>
     </div>
-    <button @click="openCreate()" class="btn-primary flex items-center gap-2">Nuevo cobro</button>
+    <button @click="openCreate()" class="btn-primary flex items-center gap-2">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+      Nuevo cobro
+    </button>
   </div>
 
   <div class="flex flex-wrap items-center gap-3 mb-4">
@@ -47,8 +50,12 @@
             </td>
             <td class="px-4 py-3">
               <div class="flex items-center gap-2">
-                <button @click="marcarPagado(c)" class="btn-icon text-green-500" title="Marcar pagado" x-show="c.estado!=='pagado'">✓</button>
-                <button @click="confirmDelete(c)" class="btn-icon text-red-500">🗑️</button>
+                <button @click="marcarPagado(c)" class="btn-icon text-green-500" title="Marcar pagado" x-show="c.estado!=='pagado'">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+                </button>
+                <button @click="confirmDelete(c)" class="btn-icon text-red-500" title="Eliminar">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                </button>
               </div>
             </td>
           </tr>
@@ -69,9 +76,9 @@
   <!-- Modal crear -->
   <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6">
-      <h2 class="text-lg font-bold mb-4">Nuevo cobro pendiente</h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-4">Nuevo cobro pendiente</h2>
       <form @submit.prevent="save()">
-        <div class="grid grid-cols-2 gap-3">
+        <div class="grid grid-cols-2 gap-4">
           <div class="col-span-2">
             <label class="label">Entidad (quien debe)</label>
             <select x-model.number="form.entidad_id" class="input-field w-full" required>
@@ -114,11 +121,11 @@
   <!-- Modal pagado -->
   <div x-show="showPagarModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showPagarModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6">
-      <h2 class="text-lg font-bold mb-4">Marcar como pagado</h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-4">Marcar como pagado</h2>
       <form @submit.prevent="doPagar()">
         <label class="label">Fecha de pago</label>
         <input x-model="pagoFecha" type="date" class="input-field w-full mb-4" required>
-        <div class="flex justify-end gap-3">
+        <div class="flex justify-end gap-3 mt-5">
           <button type="button" @click="showPagarModal=false" class="btn-secondary">Cancelar</button>
           <button type="submit" :disabled="saving" class="btn-primary" x-text="saving?'Guardando...':'Confirmar'"></button>
         </div>
@@ -128,7 +135,8 @@
 
   <div x-show="showDelete" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showDelete=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6">
-      <h2 class="text-lg font-bold mb-2">¿Eliminar?</h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-2">¿Eliminar cobro?</h2>
+      <p class="text-slate-600 text-sm mb-5">Esta acción no se puede deshacer.</p>
       <div class="flex justify-end gap-3">
         <button @click="showDelete=false" class="btn-secondary">Cancelar</button>
         <button @click="doDelete()" :disabled="saving" class="btn-danger" x-text="saving?'Eliminando...':'Eliminar'"></button>
@@ -192,3 +200,21 @@ function cobroApp() {
   }
 }
 </script>
+
+<style>
+.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
+.btn-primary:hover { background:#6d8c24; }
+.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
+.btn-danger { background:#ef4444; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; }
+.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
+.btn-icon:hover { background:#f1f5f9; }
+.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
+.input-field:focus { border-color:#8eb02f; }
+.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
+.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
+.badge-green { background:#dcfce7; color:#15803d; }
+.badge-yellow { background:#fef9c3; color:#854d0e; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.badge-blue { background:#dbeafe; color:#1d4ed8; }
+</style>
diff --git a/resources/view/contabilidad/cuentas_pagar.html b/resources/view/contabilidad/cuentas_pagar.html
index 2ab7bc9..42eee30 100644
--- a/resources/view/contabilidad/cuentas_pagar.html
+++ b/resources/view/contabilidad/cuentas_pagar.html
@@ -5,7 +5,10 @@
       <h1 class="text-2xl font-bold text-slate-800">Cuentas por pagar</h1>
       <p class="text-sm text-slate-500 mt-1">Facturas y montos pendientes de pago</p>
     </div>
-    <button @click="openCreate()" class="btn-primary flex items-center gap-2">Nuevo pendiente</button>
+    <button @click="openCreate()" class="btn-primary flex items-center gap-2">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+      Nuevo pendiente
+    </button>
   </div>
 
   <div class="flex flex-wrap items-center gap-3 mb-4">
@@ -47,8 +50,12 @@
             </td>
             <td class="px-4 py-3">
               <div class="flex items-center gap-2">
-                <button @click="marcarPagado(c)" class="btn-icon text-green-500" title="Marcar pagado" x-show="c.estado!=='pagado'">✓</button>
-                <button @click="confirmDelete(c)" class="btn-icon text-red-500">🗑️</button>
+                <button @click="marcarPagado(c)" class="btn-icon text-green-500" title="Marcar pagado" x-show="c.estado!=='pagado'">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+                </button>
+                <button @click="confirmDelete(c)" class="btn-icon text-red-500" title="Eliminar">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                </button>
               </div>
             </td>
           </tr>
@@ -69,9 +76,9 @@
   <!-- Modal crear -->
   <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6">
-      <h2 class="text-lg font-bold mb-4">Nuevo pendiente de pago</h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-4">Nuevo pendiente de pago</h2>
       <form @submit.prevent="save()">
-        <div class="grid grid-cols-2 gap-3">
+        <div class="grid grid-cols-2 gap-4">
           <div class="col-span-2">
             <label class="label">Entidad (a quién debemos)</label>
             <select x-model.number="form.entidad_id" class="input-field w-full" required>
@@ -114,11 +121,11 @@
   <!-- Modal pagado -->
   <div x-show="showPagarModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showPagarModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6">
-      <h2 class="text-lg font-bold mb-4">Marcar como pagado</h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-4">Marcar como pagado</h2>
       <form @submit.prevent="doPagar()">
         <label class="label">Fecha de pago</label>
         <input x-model="pagoFecha" type="date" class="input-field w-full mb-4" required>
-        <div class="flex justify-end gap-3">
+        <div class="flex justify-end gap-3 mt-5">
           <button type="button" @click="showPagarModal=false" class="btn-secondary">Cancelar</button>
           <button type="submit" :disabled="saving" class="btn-primary" x-text="saving?'Guardando...':'Confirmar'"></button>
         </div>
@@ -128,7 +135,8 @@
 
   <div x-show="showDelete" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showDelete=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6">
-      <h2 class="text-lg font-bold mb-2">¿Eliminar?</h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-2">¿Eliminar pendiente?</h2>
+      <p class="text-slate-600 text-sm mb-5">Esta acción no se puede deshacer.</p>
       <div class="flex justify-end gap-3">
         <button @click="showDelete=false" class="btn-secondary">Cancelar</button>
         <button @click="doDelete()" :disabled="saving" class="btn-danger" x-text="saving?'Eliminando...':'Eliminar'"></button>
@@ -192,3 +200,21 @@ function pagarApp() {
   }
 }
 </script>
+
+<style>
+.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
+.btn-primary:hover { background:#6d8c24; }
+.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
+.btn-danger { background:#ef4444; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; }
+.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
+.btn-icon:hover { background:#f1f5f9; }
+.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
+.input-field:focus { border-color:#8eb02f; }
+.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
+.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
+.badge-green { background:#dcfce7; color:#15803d; }
+.badge-yellow { background:#fef9c3; color:#854d0e; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.badge-blue { background:#dbeafe; color:#1d4ed8; }
+</style>
diff --git a/resources/view/contabilidad/entidades.html b/resources/view/contabilidad/entidades.html
index 0800793..19c4cf5 100644
--- a/resources/view/contabilidad/entidades.html
+++ b/resources/view/contabilidad/entidades.html
@@ -5,7 +5,10 @@
       <h1 class="text-2xl font-bold text-slate-800">Entidades</h1>
       <p class="text-sm text-slate-500 mt-1">Clientes, proveedores y empresas</p>
     </div>
-    <button @click="openCreate()" class="btn-primary flex items-center gap-2">Nueva entidad</button>
+    <button @click="openCreate()" class="btn-primary flex items-center gap-2">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+      Nueva entidad
+    </button>
   </div>
 
   <div class="mb-4">
@@ -41,8 +44,12 @@
             <td class="px-4 py-3"><span x-show="e.activo" class="text-green-500">Activo</span><span x-show="!e.activo" class="text-red-400">Inactivo</span></td>
             <td class="px-4 py-3">
               <div class="flex items-center gap-2">
-                <button @click="openEdit(e)" class="btn-icon text-yellow-500">✏️</button>
-                <button @click="confirmDelete(e)" class="btn-icon text-red-500">🗑️</button>
+                <button @click="openEdit(e)" class="btn-icon text-yellow-500" title="Editar">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
+                </button>
+                <button @click="confirmDelete(e)" class="btn-icon text-red-500" title="Eliminar">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                </button>
               </div>
             </td>
           </tr>
@@ -63,9 +70,9 @@
   <!-- Modal -->
   <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6">
-      <h2 class="text-lg font-bold mb-4" x-text="editId?'Editar entidad':'Nueva entidad'"></h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-4" x-text="editId?'Editar entidad':'Nueva entidad'"></h2>
       <form @submit.prevent="save()">
-        <div class="grid grid-cols-2 gap-3">
+        <div class="grid grid-cols-2 gap-4">
           <div class="col-span-2">
             <label class="label">Nombre</label>
             <input x-model="form.nombre" class="input-field w-full" required>
@@ -115,7 +122,8 @@
 
   <div x-show="showDelete" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showDelete=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6">
-      <h2 class="text-lg font-bold mb-2">¿Eliminar entidad?</h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-2">¿Eliminar entidad?</h2>
+      <p class="text-slate-600 text-sm mb-5">Esta acción no se puede deshacer.</p>
       <div class="flex justify-end gap-3">
         <button @click="showDelete=false" class="btn-secondary">Cancelar</button>
         <button @click="doDelete()" :disabled="saving" class="btn-danger" x-text="saving?'Eliminando...':'Eliminar'"></button>
@@ -167,3 +175,21 @@ function entidadesApp() {
   }
 }
 </script>
+
+<style>
+.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
+.btn-primary:hover { background:#6d8c24; }
+.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
+.btn-danger { background:#ef4444; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; }
+.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
+.btn-icon:hover { background:#f1f5f9; }
+.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
+.input-field:focus { border-color:#8eb02f; }
+.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
+.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
+.badge-green { background:#dcfce7; color:#15803d; }
+.badge-yellow { background:#fef9c3; color:#854d0e; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.badge-blue { background:#dbeafe; color:#1d4ed8; }
+</style>
diff --git a/resources/view/contabilidad/transacciones.html b/resources/view/contabilidad/transacciones.html
index d969125..fa22802 100644
--- a/resources/view/contabilidad/transacciones.html
+++ b/resources/view/contabilidad/transacciones.html
@@ -89,9 +89,9 @@
   <!-- Modal crear/editar -->
   <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6 max-h-screen overflow-y-auto">
-      <h2 class="text-lg font-bold mb-4" x-text="editId ? 'Editar transacción' : 'Nueva transacción'"></h2>
+      <h2 class="text-lg font-bold text-slate-800 mb-4" x-text="editId ? 'Editar transacción' : 'Nueva transacción'"></h2>
       <form @submit.prevent="save()">
-        <div class="grid grid-cols-2 gap-3">
+        <div class="grid grid-cols-2 gap-4">
           <div class="col-span-2">
             <label class="label">Tipo</label>
             <select x-model="form.tipo" class="input-field w-full" required>
@@ -164,8 +164,8 @@
   <!-- Modal eliminar -->
   <div x-show="showDelete" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
     <div @click.outside="showDelete=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6">
-      <h2 class="text-lg font-bold mb-2">¿Eliminar transacción?</h2>
-      <p class="text-slate-500 text-sm mb-5">Esta acción no se puede deshacer.</p>
+      <h2 class="text-lg font-bold text-slate-800 mb-2">¿Eliminar transacción?</h2>
+      <p class="text-slate-600 text-sm mb-5">Esta acción no se puede deshacer.</p>
       <div class="flex justify-end gap-3">
         <button @click="showDelete=false" class="btn-secondary">Cancelar</button>
         <button @click="doDelete()" :disabled="saving" class="btn-danger" x-text="saving?'Eliminando...':'Eliminar'"></button>
@@ -242,3 +242,21 @@ function transaccionesApp() {
   }
 }
 </script>
+
+<style>
+.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
+.btn-primary:hover { background:#6d8c24; }
+.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
+.btn-danger { background:#ef4444; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; }
+.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
+.btn-icon:hover { background:#f1f5f9; }
+.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
+.input-field:focus { border-color:#8eb02f; }
+.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
+.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
+.badge-green { background:#dcfce7; color:#15803d; }
+.badge-yellow { background:#fef9c3; color:#854d0e; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.badge-blue { background:#dbeafe; color:#1d4ed8; }
+</style>
diff --git a/resources/view/websms_config.html b/resources/view/websms_config.html
index d62f24e..62e8d66 100644
--- a/resources/view/websms_config.html
+++ b/resources/view/websms_config.html
@@ -1,4 +1,4 @@
-<div x-data="websmsApp()" x-init="init()" class="p-6 max-w-3xl mx-auto">
+<div x-data="websmsApp()" x-init="init()" class="p-6">
 
   <div class="flex items-center justify-between mb-6">
     <div>
@@ -169,3 +169,21 @@ function websmsApp() {
   }
 }
 </script>
+
+<style>
+.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; transition:background .15s; }
+.btn-primary:hover { background:#6d8c24; }
+.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
+.btn-danger { background:#ef4444; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; }
+.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
+.btn-icon:hover { background:#f1f5f9; }
+.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; transition:border-color .15s; }
+.input-field:focus { border-color:#8eb02f; }
+.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
+.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
+.badge-green { background:#dcfce7; color:#15803d; }
+.badge-yellow { background:#fef9c3; color:#854d0e; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.badge-blue { background:#dbeafe; color:#1d4ed8; }
+</style>
diff --git a/resources/views/portal/proyecto.html b/resources/views/portal/proyecto.html
index dd3af5f..30becd4 100644
--- a/resources/views/portal/proyecto.html
+++ b/resources/views/portal/proyecto.html
@@ -103,7 +103,7 @@
         <div class="flex items-start gap-3">
           <div class="w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center text-xs font-bold"
             style="background:#8eb02f;color:#fff">
-            {{ if eq .Tipo "milestone" }}🎯{{ else if eq .Tipo "alerta" }}⚠️{{ else }}✓{{ end }}
+            {{ if eq .Tipo "milestone" }}🎯{{ else if eq .Tipo "alerta" }}⚠️{{ else if eq .Tipo "nota" }}📝{{ else if eq .Tipo "update" }}✨{{ else }}✓{{ end }}
           </div>
           <div>
             <h3 class="font-semibold text-slate-800 text-sm">{{ .Titulo }}</h3>