diff --git a/resources/views/contabilidad/contabilidad.html b/resources/views/contabilidad/contabilidad.html
index 7029fab..e17c656 100644
--- a/resources/views/contabilidad/contabilidad.html
+++ b/resources/views/contabilidad/contabilidad.html
@@ -120,3 +120,22 @@ 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-blue { background:#dbeafe; color:#1d4ed8; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.text-primary { color:#8eb02f; }
+</style>
diff --git a/resources/views/contabilidad/cuentas.html b/resources/views/contabilidad/cuentas.html
index 07916bb..ba0d84b 100644
--- a/resources/views/contabilidad/cuentas.html
+++ b/resources/views/contabilidad/cuentas.html
@@ -58,7 +58,7 @@
   <!-- 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>
+      <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>
@@ -96,7 +96,7 @@
 
   <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>
       <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>
@@ -148,3 +148,22 @@ 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-blue { background:#dbeafe; color:#1d4ed8; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.text-primary { color:#8eb02f; }
+</style>
diff --git a/resources/views/contabilidad/cuentas_cobro.html b/resources/views/contabilidad/cuentas_cobro.html
index 024c964..81dafe9 100644
--- a/resources/views/contabilidad/cuentas_cobro.html
+++ b/resources/views/contabilidad/cuentas_cobro.html
@@ -69,7 +69,7 @@
   <!-- 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="col-span-2">
@@ -114,7 +114,7 @@
   <!-- 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>
@@ -128,7 +128,7 @@
 
   <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?</h2>
       <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 +192,22 @@ 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-blue { background:#dbeafe; color:#1d4ed8; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.text-primary { color:#8eb02f; }
+</style>
diff --git a/resources/views/contabilidad/cuentas_pagar.html b/resources/views/contabilidad/cuentas_pagar.html
index 2ab7bc9..5d1216c 100644
--- a/resources/views/contabilidad/cuentas_pagar.html
+++ b/resources/views/contabilidad/cuentas_pagar.html
@@ -69,7 +69,7 @@
   <!-- 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="col-span-2">
@@ -114,7 +114,7 @@
   <!-- 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>
@@ -128,7 +128,7 @@
 
   <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?</h2>
       <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 +192,22 @@ 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-blue { background:#dbeafe; color:#1d4ed8; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.text-primary { color:#8eb02f; }
+</style>
diff --git a/resources/views/contabilidad/entidades.html b/resources/views/contabilidad/entidades.html
index 0800793..69a230f 100644
--- a/resources/views/contabilidad/entidades.html
+++ b/resources/views/contabilidad/entidades.html
@@ -63,7 +63,7 @@
   <!-- 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="col-span-2">
@@ -115,7 +115,7 @@
 
   <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>
       <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 +167,22 @@ 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-blue { background:#dbeafe; color:#1d4ed8; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.text-primary { color:#8eb02f; }
+</style>
diff --git a/resources/views/contabilidad/transacciones.html b/resources/views/contabilidad/transacciones.html
index d969125..eb3e864 100644
--- a/resources/views/contabilidad/transacciones.html
+++ b/resources/views/contabilidad/transacciones.html
@@ -89,7 +89,7 @@
   <!-- 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="col-span-2">
@@ -164,7 +164,7 @@
   <!-- 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>
+      <h2 class="text-lg font-bold text-slate-800 mb-2">¿Eliminar transacción?</h2>
       <p class="text-slate-500 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>
@@ -242,3 +242,22 @@ 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-blue { background:#dbeafe; color:#1d4ed8; }
+.badge-slate { background:#f1f5f9; color:#475569; }
+.badge-red { background:#fee2e2; color:#991b1b; }
+.text-primary { color:#8eb02f; }
+</style>