From 599dce26296edcc9fedaafe7ea92f44133b562a9 Mon Sep 17 00:00:00 2001
From: Consult AS Technology <ialcarazsalazar@consultoria-as.com>
Date: Thu, 3 Sep 2026 02:35:34 +0000
Subject: [PATCH] style: reskin NovaSpark en las 7 apps

Del look editorial (verde #1B4332, esquinas a 0, botones en mayusculas)
al sistema NovaSpark: primario azul #2563EB, detalle naranja #F97316,
fondo #F8FAFC con tarjetas blancas rounded-xl + shadow-sm, chips
rounded-full semanticos, focus ring azul, transiciones 100-200ms.
Incluye headers de tabla en los PDFs (cotizador y estado de cuenta).
---
 apps/agente-ia/src/components/AuthGate.tsx    |  10 +-
 apps/agente-ia/src/components/Burbuja.tsx     |   8 +-
 .../src/components/CambiarPasswordModal.tsx   |  20 +--
 apps/agente-ia/src/components/LoginScreen.tsx |  24 +--
 apps/agente-ia/src/index.css                  |  15 +-
 apps/agente-ia/src/pages/ChatPage.tsx         |  33 ++--
 .../src/components/AltaAfluenciaForm.tsx      |  20 +--
 .../alta-clientes/src/components/AuthGate.tsx |  10 +-
 .../src/components/BotonOcrIne.tsx            |  20 +--
 .../src/components/BusquedaLead.tsx           |  16 +-
 .../src/components/CambiarPasswordModal.tsx   |  20 +--
 apps/alta-clientes/src/components/Campos.tsx  |   6 +-
 .../src/components/ChecklistExpediente.tsx    |  10 +-
 .../src/components/FileUploader.tsx           |  24 +--
 .../src/components/LoginScreen.tsx            |  20 +--
 .../src/components/SectionCard.tsx            |   6 +-
 .../src/components/SignaturePad.tsx           |   4 +-
 apps/alta-clientes/src/components/Stepper.tsx |  10 +-
 .../src/forms/CoacreditadoForm.tsx            |   4 +-
 .../src/forms/DatosGeneralesCampos.tsx        |   2 +-
 .../src/forms/EconomicosCampos.tsx            |   8 +-
 apps/alta-clientes/src/forms/FirmasForm.tsx   |  48 +++---
 apps/alta-clientes/src/forms/Navegacion.tsx   |   4 +-
 .../src/forms/ReferenciasForm.tsx             |   4 +-
 .../src/forms/ViviendaCreditoForm.tsx         |   6 +-
 apps/alta-clientes/src/index.css              |  15 +-
 .../src/pages/AltaClientePage.tsx             |  96 +++++------
 .../src/pages/FirmaRemotaPage.tsx             |  42 ++---
 apps/cobranza/src/components/AuthGate.tsx     |  10 +-
 apps/cobranza/src/components/BadgeStatus.tsx  |  10 +-
 .../src/components/CambiarPasswordModal.tsx   |  18 +--
 apps/cobranza/src/components/KpiCard.tsx      |   8 +-
 apps/cobranza/src/components/Layout.tsx       |  17 +-
 apps/cobranza/src/components/LoginScreen.tsx  |  22 +--
 apps/cobranza/src/components/ModalAbono.tsx   |  20 +--
 apps/cobranza/src/components/Semaforo.tsx     |  10 +-
 apps/cobranza/src/index.css                   |  15 +-
 apps/cobranza/src/lib/pdf/estadoCuenta.ts     |   4 +-
 apps/cobranza/src/pages/DashboardPage.tsx     |  86 +++++-----
 apps/cobranza/src/pages/HoyPage.tsx           |  54 +++----
 apps/cobranza/src/pages/NuevoPlanPage.tsx     |  24 +--
 apps/cobranza/src/pages/PlanDetallePage.tsx   |  96 +++++------
 apps/cotizador/index.html                     |   2 +-
 apps/cotizador/public/manifest.webmanifest    |   2 +-
 apps/cotizador/src/components/AuthGate.tsx    |  10 +-
 .../src/components/CambiarPasswordModal.tsx   |  20 +--
 .../src/components/ComparadorPropuestas.tsx   |  24 +--
 .../src/components/ComparadorUnidades.tsx     |  26 +--
 apps/cotizador/src/components/LoginScreen.tsx |  26 +--
 .../src/components/MisCotizaciones.tsx        |  36 ++---
 .../cotizador/src/components/ModalCliente.tsx |  14 +-
 .../cotizador/src/components/ProposalCard.tsx |  20 +--
 .../cotizador/src/components/UnitInfoCard.tsx |  16 +-
 .../cotizador/src/components/UnitSelector.tsx |  16 +-
 apps/cotizador/src/index.css                  |  19 +--
 apps/cotizador/src/lib/pdf.ts                 |   2 +-
 apps/cotizador/src/pages/CotizadorPage.tsx    |  64 ++++----
 apps/dashboards/src/components/AuthGate.tsx   |  10 +-
 .../src/components/CambiarPasswordModal.tsx   |  20 +--
 apps/dashboards/src/components/KpiCard.tsx    |   8 +-
 .../dashboards/src/components/LoginScreen.tsx |  24 +--
 apps/dashboards/src/components/MiTablero.tsx  |  16 +-
 .../src/components/Perfilamiento.tsx          |   6 +-
 .../src/components/SeccionEquipo.tsx          |  19 ++-
 .../src/components/TableroGeneral.tsx         |  24 +--
 apps/dashboards/src/components/comunes.tsx    |   8 +-
 apps/dashboards/src/index.css                 |  15 +-
 apps/dashboards/src/pages/DashboardPage.tsx   |   6 +-
 apps/landing/src/App.tsx                      |  10 +-
 .../src/components/ConfiguracionCuenta.tsx    |  49 +++---
 apps/landing/src/components/TarjetaModulo.tsx |   8 +-
 apps/landing/src/index.css                    |  20 +--
 apps/mi-dia/src/components/AuthGate.tsx       |  10 +-
 .../src/components/CambiarPasswordModal.tsx   |  20 +--
 apps/mi-dia/src/components/KpiCard.tsx        |   8 +-
 apps/mi-dia/src/components/LoginScreen.tsx    |  29 ++--
 apps/mi-dia/src/index.css                     |  15 +-
 apps/mi-dia/src/pages/MiDiaPage.tsx           | 149 +++++++++++-------
 78 files changed, 842 insertions(+), 828 deletions(-)

diff --git a/apps/agente-ia/src/components/AuthGate.tsx b/apps/agente-ia/src/components/AuthGate.tsx
index baba256..877e788 100644
--- a/apps/agente-ia/src/components/AuthGate.tsx
+++ b/apps/agente-ia/src/components/AuthGate.tsx
@@ -17,17 +17,17 @@ export default function AuthGate({ children }: { children: ReactNode }) {
   }
 
   return (
-    <div className="min-h-screen bg-white text-neutral-900">
-      <div className="border-b border-neutral-200">
+    <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
+      <div className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
-          <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <span className="text-xs font-medium text-[#64748B]">
             {sesion.usuario.nombre} · {sesion.usuario.rol}
           </span>
           <div className="flex items-center gap-4">
             <button
               type="button"
               onClick={() => setModalPassword(true)}
-              className="text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
+              className="rounded-md px-2 py-1.5 text-xs font-medium text-[#64748B] transition-all duration-100 ease-out hover:text-[#111827]"
             >
               Contraseña
             </button>
@@ -37,7 +37,7 @@ export default function AuthGate({ children }: { children: ReactNode }) {
                 logout()
                 setSesion(null)
               }}
-              className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
+              className="rounded-md px-2 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:text-accent-hover"
             >
               Salir
             </button>
diff --git a/apps/agente-ia/src/components/Burbuja.tsx b/apps/agente-ia/src/components/Burbuja.tsx
index aec6648..2fe367c 100644
--- a/apps/agente-ia/src/components/Burbuja.tsx
+++ b/apps/agente-ia/src/components/Burbuja.tsx
@@ -6,8 +6,10 @@ function Burbuja({ mensaje }: { mensaje: Mensaje }) {
     <div className={`flex ${esUsuario ? 'justify-end' : 'justify-start'}`}>
       <div className={`max-w-[80%] ${esUsuario ? 'text-right' : 'text-left'}`}>
         <div
-          className={`inline-block whitespace-pre-wrap px-4 py-3 text-sm leading-relaxed ${
-            esUsuario ? 'bg-accent text-white' : 'bg-neutral-100 text-neutral-900'
+          className={`inline-block whitespace-pre-wrap rounded-2xl px-4 py-3 text-sm leading-relaxed ${
+            esUsuario
+              ? 'rounded-br-md bg-accent text-white shadow-sm'
+              : 'rounded-bl-md border border-[#E5E7EB] bg-white text-[#111827] shadow-sm'
           }`}
         >
           {mensaje.contenido}
@@ -18,7 +20,7 @@ function Burbuja({ mensaje }: { mensaje: Mensaje }) {
               <span
                 key={f.titulo}
                 title={`Relevancia: ${(f.score * 100).toFixed(0)}%`}
-                className="border border-neutral-300 px-2 py-1 text-xs font-bold uppercase tracking-widest text-neutral-500"
+                className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700"
               >
                 {f.titulo}
               </span>
diff --git a/apps/agente-ia/src/components/CambiarPasswordModal.tsx b/apps/agente-ia/src/components/CambiarPasswordModal.tsx
index 1be9e05..0358db2 100644
--- a/apps/agente-ia/src/components/CambiarPasswordModal.tsx
+++ b/apps/agente-ia/src/components/CambiarPasswordModal.tsx
@@ -3,8 +3,8 @@ import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
 import { cambiarPassword } from '../services/auth'
 
 const CLASE_INPUT =
-  'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
-const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
+const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563]'
 
 /**
  * Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
@@ -45,19 +45,19 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
       aria-modal="true"
       aria-label="Cambiar contraseña"
     >
-      <div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
-        <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
+      <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
+        <h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
           Cambiar contraseña
         </h2>
         {exito ? (
           <>
-            <p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
+            <p className="rounded-lg bg-green-50 px-4 py-3 text-xs font-medium text-green-700">
               Contraseña actualizada
             </p>
             <button
               type="button"
               onClick={onCerrar}
-              className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
+              className="mt-6 w-full rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
             >
               Cerrar
             </button>
@@ -92,7 +92,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
                 required
                 className={CLASE_INPUT}
               />
-              <p className="mt-2 text-xs text-neutral-400">Mínimo 8 caracteres y un número</p>
+              <p className="mt-2 text-xs text-[#94A3B8]">Mínimo 8 caracteres y un número</p>
             </div>
             <div>
               <label htmlFor="password-confirmar" className={CLASE_LABEL}>
@@ -111,7 +111,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
             {error && (
               <p
                 role="alert"
-                className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+                className="rounded-lg bg-red-50 px-4 py-3 text-xs font-medium text-red-700"
               >
                 {error}
               </p>
@@ -120,14 +120,14 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
               <button
                 type="submit"
                 disabled={cargando}
-                className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+                className="flex-1 rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
               >
                 {cargando ? 'Guardando…' : 'Guardar'}
               </button>
               <button
                 type="button"
                 onClick={onCerrar}
-                className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
+                className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-3 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
               >
                 Cancelar
               </button>
diff --git a/apps/agente-ia/src/components/LoginScreen.tsx b/apps/agente-ia/src/components/LoginScreen.tsx
index b19fcbb..5f8d7fb 100644
--- a/apps/agente-ia/src/components/LoginScreen.tsx
+++ b/apps/agente-ia/src/components/LoginScreen.tsx
@@ -1,7 +1,7 @@
 import { useState, type FormEvent } from 'react'
 import { login, ErrorLogin, type UsuarioSesion } from '../services/auth'
 
-/** Pantalla de login StudioBlank: marca FRASA, usuario + contraseña, Enter envía */
+/** Pantalla de login NovaSpark: marca FRASA, usuario + contraseña, Enter envía */
 export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSesion) => void }) {
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
@@ -22,11 +22,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-4">
-      <div className="w-full max-w-sm">
+    <div className="flex min-h-screen items-center justify-center bg-[#F8FAFC] px-4">
+      <div className="w-full max-w-sm rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm">
         <div className="mb-10 text-center">
-          <p className="text-lg font-bold tracking-widest">FRASA</p>
-          <p className="mt-2 text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <p className="text-lg font-bold tracking-wide">
+            FRASA<span className="text-[#F97316]">.</span>
+          </p>
+          <p className="mt-2 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
             Acceso al ecosistema
           </p>
         </div>
@@ -34,7 +36,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <div>
             <label
               htmlFor="login-usuario"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Usuario
             </label>
@@ -46,13 +48,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               autoComplete="username"
               autoFocus
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           <div>
             <label
               htmlFor="login-password"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Contraseña
             </label>
@@ -63,13 +65,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               onChange={(e) => setPassword(e.target.value)}
               autoComplete="current-password"
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           {error && (
             <p
               role="alert"
-              className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+              className="rounded-lg bg-red-50 px-4 py-3 text-xs font-medium text-red-700"
             >
               {error}
             </p>
@@ -77,7 +79,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <button
             type="submit"
             disabled={cargando}
-            className="w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+            className="w-full rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
           >
             {cargando ? 'Entrando…' : 'Entrar'}
           </button>
diff --git a/apps/agente-ia/src/index.css b/apps/agente-ia/src/index.css
index 5de6ae6..f68f994 100644
--- a/apps/agente-ia/src/index.css
+++ b/apps/agente-ia/src/index.css
@@ -2,22 +2,17 @@
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --color-accent: #1B4332;
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 0;
-  --radius-xl: 0;
-  --radius-2xl: 0;
-  --radius-3xl: 0;
+  --color-accent: #2563EB;
+  --color-accent-hover: #1D4ED8;
 }
 
 @layer base {
   body {
-    @apply bg-white text-neutral-900 antialiased;
+    @apply bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   *:focus-visible {
-    outline: 2px solid #1B4332;
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
   }
 }
diff --git a/apps/agente-ia/src/pages/ChatPage.tsx b/apps/agente-ia/src/pages/ChatPage.tsx
index 4306e92..b72c191 100644
--- a/apps/agente-ia/src/pages/ChatPage.tsx
+++ b/apps/agente-ia/src/pages/ChatPage.tsx
@@ -69,17 +69,18 @@ export default function ChatPage() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col bg-white text-neutral-900">
-      <header className="border-b border-neutral-200">
+    <div className="flex min-h-screen flex-col bg-[#F8FAFC] text-[#111827]">
+      <header className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex w-full max-w-3xl items-center justify-between px-4 py-4">
-          <span className="text-sm tracking-widest">
-            <span className="font-bold">FRASA</span>{' '}
-            <span className="font-light text-neutral-500">ASISTENTE IA</span>
+          <span className="text-sm tracking-wide">
+            <span className="font-bold">FRASA</span>
+            <span className="text-[#F97316]"> · </span>
+            <span className="font-light text-[#64748B]">ASISTENTE IA</span>
           </span>
           <button
             type="button"
             onClick={nuevaConversacion}
-            className="border border-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white"
+            className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
           >
             Nueva conversación
           </button>
@@ -88,19 +89,23 @@ export default function ChatPage() {
 
       <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col px-4 py-8">
         {sinConexion && (
-          <p className="mb-6 text-xs text-amber-700">
+          <p className="mb-6 rounded-lg bg-amber-50 px-4 py-3 text-xs font-medium text-amber-700">
             Sin conexión al API del asistente. Revisa que el servicio esté disponible e inténtalo de
             nuevo.
           </p>
         )}
-        {error && <p className="mb-6 text-xs text-red-700">{error}</p>}
+        {error && (
+          <p className="mb-6 rounded-lg bg-red-50 px-4 py-3 text-xs font-medium text-red-700">
+            {error}
+          </p>
+        )}
 
         {mensajes.length === 0 && !escribiendo ? (
           <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center">
-            <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+            <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
               Asistente interno
             </p>
-            <p className="max-w-md text-2xl font-light text-neutral-900">
+            <p className="max-w-md text-2xl font-light text-[#111827]">
               Pregunta sobre el catálogo DIAGONAL, las propuestas del cotizador, el proceso de venta
               o las políticas de Frasa.
             </p>
@@ -112,7 +117,7 @@ export default function ChatPage() {
             ))}
             {escribiendo && (
               <div className="flex justify-start">
-                <p className="bg-neutral-100 px-4 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500">
+                <p className="rounded-full bg-white px-4 py-2 text-xs font-medium text-[#64748B] shadow-sm">
                   Escribiendo…
                 </p>
               </div>
@@ -122,7 +127,7 @@ export default function ChatPage() {
         )}
       </main>
 
-      <footer className="border-t border-neutral-200">
+      <footer className="border-t border-[#E5E7EB] bg-white">
         <form
           className="mx-auto flex w-full max-w-3xl items-stretch gap-4 px-4 py-4"
           onSubmit={(e) => {
@@ -140,12 +145,12 @@ export default function ChatPage() {
             onChange={(e) => setEntrada(e.target.value)}
             placeholder="Escribe tu pregunta…"
             autoComplete="off"
-            className="flex-1 border border-neutral-300 px-4 py-3 text-sm placeholder:text-neutral-400"
+            className="flex-1 rounded-lg border border-[#D1D5DB] bg-white px-4 py-3 text-sm placeholder:text-[#94A3B8] transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
           />
           <button
             type="submit"
             disabled={escribiendo || entrada.trim().length === 0}
-            className="bg-accent px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-opacity duration-150 hover:opacity-90 disabled:opacity-40"
+            className="rounded-lg bg-accent px-6 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-40"
           >
             Enviar
           </button>
diff --git a/apps/alta-clientes/src/components/AltaAfluenciaForm.tsx b/apps/alta-clientes/src/components/AltaAfluenciaForm.tsx
index 16802f8..8197095 100644
--- a/apps/alta-clientes/src/components/AltaAfluenciaForm.tsx
+++ b/apps/alta-clientes/src/components/AltaAfluenciaForm.tsx
@@ -22,9 +22,9 @@ interface Props {
 const emailSchema = z.string().trim().email()
 
 const inputClase =
-  'w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none'
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
 
-const labelClase = 'mb-1 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+const labelClase = 'mb-1 block text-xs font-medium text-[#4B5563]'
 
 interface Errores {
   nombre?: string
@@ -141,7 +141,7 @@ export default function AltaAfluenciaForm({ onVolver, onPasarAAltaCliente }: Pro
       <div className="max-w-md">
         <p
           role="status"
-          className="border border-accent bg-white px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent"
+          className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700"
         >
           Registrado en afluencia — se asignará por round-robin
         </p>
@@ -149,21 +149,21 @@ export default function AltaAfluenciaForm({ onVolver, onPasarAAltaCliente }: Pro
           <button
             type="button"
             onClick={() => onPasarAAltaCliente(leadCreado)}
-            className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-neutral-900"
+            className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
           >
             Pasar a Alta de Cliente
           </button>
           <button
             type="button"
             onClick={capturarOtro}
-            className="border border-accent bg-white px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white"
+            className="rounded-lg border border-accent bg-white px-5 py-2.5 text-sm font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white"
           >
             Capturar otro
           </button>
           <button
             type="button"
             onClick={onVolver}
-            className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+            className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
           >
             Volver
           </button>
@@ -239,7 +239,7 @@ export default function AltaAfluenciaForm({ onVolver, onPasarAAltaCliente }: Pro
             value={form.modelo}
             onChange={cambiar('modelo')}
             disabled={form.desarrollo === ''}
-            className={`${inputClase} disabled:bg-neutral-100 disabled:text-neutral-400`}
+            className={`${inputClase} disabled:bg-[#F1F5F9] disabled:text-[#94A3B8]`}
           >
             <option value="">
               {form.desarrollo === '' ? 'Selecciona primero el desarrollo' : '— Selecciona —'}
@@ -424,7 +424,7 @@ export default function AltaAfluenciaForm({ onVolver, onPasarAAltaCliente }: Pro
       </div>
 
       {aviso && (
-        <p role="alert" className="mt-6 border border-red-300 bg-red-50 px-4 py-3 text-xs text-red-700">
+        <p role="alert" className="mt-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-700">
           {aviso}
         </p>
       )}
@@ -433,14 +433,14 @@ export default function AltaAfluenciaForm({ onVolver, onPasarAAltaCliente }: Pro
         <button
           type="submit"
           disabled={enviando}
-          className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-neutral-900 disabled:opacity-50"
+          className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
         >
           {enviando ? 'Registrando…' : 'Registrar en afluencia'}
         </button>
         <button
           type="button"
           onClick={onVolver}
-          className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
         >
           Volver
         </button>
diff --git a/apps/alta-clientes/src/components/AuthGate.tsx b/apps/alta-clientes/src/components/AuthGate.tsx
index baba256..6809deb 100644
--- a/apps/alta-clientes/src/components/AuthGate.tsx
+++ b/apps/alta-clientes/src/components/AuthGate.tsx
@@ -17,17 +17,17 @@ export default function AuthGate({ children }: { children: ReactNode }) {
   }
 
   return (
-    <div className="min-h-screen bg-white text-neutral-900">
-      <div className="border-b border-neutral-200">
+    <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
+      <div className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
-          <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <span className="text-xs font-medium text-[#64748B]">
             {sesion.usuario.nombre} · {sesion.usuario.rol}
           </span>
           <div className="flex items-center gap-4">
             <button
               type="button"
               onClick={() => setModalPassword(true)}
-              className="text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
+              className="rounded-lg px-2 py-1 text-xs font-medium text-[#64748B] transition-colors duration-100 hover:text-[#111827]"
             >
               Contraseña
             </button>
@@ -37,7 +37,7 @@ export default function AuthGate({ children }: { children: ReactNode }) {
                 logout()
                 setSesion(null)
               }}
-              className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
+              className="rounded-lg px-2 py-1 text-xs font-medium text-accent transition-colors duration-100 hover:text-accent-hover"
             >
               Salir
             </button>
diff --git a/apps/alta-clientes/src/components/BotonOcrIne.tsx b/apps/alta-clientes/src/components/BotonOcrIne.tsx
index 4e04e12..3c4ab20 100644
--- a/apps/alta-clientes/src/components/BotonOcrIne.tsx
+++ b/apps/alta-clientes/src/components/BotonOcrIne.tsx
@@ -84,53 +84,53 @@ export default function BotonOcrIne({ archivo, onAplicar }: Props) {
   }
 
   return (
-    <div className="border border-neutral-200 bg-white px-4 py-3">
+    <div className="rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm">
       <div className="flex items-center justify-between gap-4">
-        <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">Lectura automática (OCR)</p>
+        <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Lectura automática (OCR)</p>
         <button
           type="button"
           onClick={() => void leer()}
           disabled={estado.fase === 'procesando'}
-          className="shrink-0 border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white disabled:opacity-40"
+          className="shrink-0 rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-40"
         >
           {estado.fase === 'procesando' ? `Leyendo… ${estado.progreso}%` : 'Leer INE con OCR'}
         </button>
       </div>
 
       {estado.fase === 'procesando' && (
-        <p className="mt-3 text-xs font-light text-neutral-500" role="status">
+        <p className="mt-3 text-xs text-[#64748B]" role="status">
           Reconociendo texto de la credencial… {estado.progreso}%
         </p>
       )}
 
       {estado.fase === 'error' && (
-        <p className="mt-3 border border-red-400 px-3 py-2 text-xs text-red-700" role="alert">
+        <p className="mt-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700" role="alert">
           {estado.mensaje}
         </p>
       )}
 
       {estado.fase === 'listo' && (
         <div className="mt-3">
-          <p className="text-xs font-light text-neutral-500">
+          <p className="text-xs text-[#64748B]">
             Sugerencias detectadas — nada se sobreescribe sin tu confirmación:
           </p>
           <ul className="mt-2 space-y-2">
             {aVisibles(estado.sugerencias).map((s) => (
               <li key={s.clave} className="flex items-baseline justify-between gap-4 text-sm">
-                <span className="font-light text-neutral-900">
-                  <span className="mr-2 text-xs font-bold uppercase tracking-widest text-neutral-500">
+                <span className="text-[#111827]">
+                  <span className="mr-2 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
                     {s.etiqueta}
                   </span>
                   {s.valor}
                 </span>
                 {s.aplicable &&
                   (aplicados.includes(s.clave) ? (
-                    <span className="text-xs font-bold uppercase tracking-widest text-accent">✓</span>
+                    <span className="rounded-full bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-700">✓</span>
                   ) : (
                     <button
                       type="button"
                       onClick={() => aplicar(s)}
-                      className="shrink-0 border border-neutral-900 bg-transparent px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+                      className="shrink-0 rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
                     >
                       Aplicar
                     </button>
diff --git a/apps/alta-clientes/src/components/BusquedaLead.tsx b/apps/alta-clientes/src/components/BusquedaLead.tsx
index 8180b16..54365d0 100644
--- a/apps/alta-clientes/src/components/BusquedaLead.tsx
+++ b/apps/alta-clientes/src/components/BusquedaLead.tsx
@@ -45,7 +45,7 @@ export default function BusquedaLead({ onSeleccion }: Props) {
     <div>
       <label
         htmlFor="busqueda-lead"
-        className="mb-1 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+        className="mb-1 block text-xs font-medium text-[#4B5563]"
       >
         Buscar lead (nombre, teléfono o email)
       </label>
@@ -55,30 +55,30 @@ export default function BusquedaLead({ onSeleccion }: Props) {
         value={q}
         onChange={(e) => setQ(e.target.value)}
         placeholder="Escribe al menos 2 caracteres…"
-        className="w-full max-w-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-neutral-900"
+        className="w-full max-w-md rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm text-[#111827] transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
       />
 
-      {buscando && <p className="mt-3 text-xs font-light text-neutral-500">Buscando…</p>}
+      {buscando && <p className="mt-3 text-xs text-[#64748B]">Buscando…</p>}
       {error && (
         <p role="alert" className="mt-3 text-xs text-red-700">
           {error}
         </p>
       )}
       {!buscando && !error && resultados !== null && resultados.length === 0 && (
-        <p className="mt-3 text-xs font-light text-neutral-500">Sin leads que coincidan.</p>
+        <p className="mt-3 text-xs text-[#64748B]">Sin leads que coincidan.</p>
       )}
 
       {resultados !== null && resultados.length > 0 && (
-        <ul className="mt-3 max-w-md divide-y divide-neutral-200 border border-neutral-200 bg-white">
+        <ul className="mt-3 max-w-md divide-y divide-[#E5E7EB] rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
           {resultados.map((lead) => (
             <li key={lead.id}>
               <button
                 type="button"
                 onClick={() => onSeleccion(lead)}
-                className="flex w-full flex-wrap items-baseline justify-between gap-2 px-4 py-3 text-left transition-colors duration-150 hover:bg-neutral-50"
+                className="flex w-full flex-wrap items-baseline justify-between gap-2 px-4 py-3 text-left transition-colors duration-100 hover:bg-[#F8FAFC]"
               >
-                <span className="text-sm text-neutral-900">{lead.nombre}</span>
-                <span className="text-xs font-light text-neutral-500">
+                <span className="text-sm text-[#111827]">{lead.nombre}</span>
+                <span className="text-xs text-[#64748B]">
                   {lead.telefono || 'sin teléfono'}
                   {lead.estado ? ` · ${lead.estado}` : ''}
                 </span>
diff --git a/apps/alta-clientes/src/components/CambiarPasswordModal.tsx b/apps/alta-clientes/src/components/CambiarPasswordModal.tsx
index 1be9e05..a21e77b 100644
--- a/apps/alta-clientes/src/components/CambiarPasswordModal.tsx
+++ b/apps/alta-clientes/src/components/CambiarPasswordModal.tsx
@@ -3,8 +3,8 @@ import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
 import { cambiarPassword } from '../services/auth'
 
 const CLASE_INPUT =
-  'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
-const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-4 py-3 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
+const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563]'
 
 /**
  * Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
@@ -45,19 +45,19 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
       aria-modal="true"
       aria-label="Cambiar contraseña"
     >
-      <div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
-        <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
+      <div className="w-full max-w-sm rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-xl">
+        <h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
           Cambiar contraseña
         </h2>
         {exito ? (
           <>
-            <p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
+            <p className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">
               Contraseña actualizada
             </p>
             <button
               type="button"
               onClick={onCerrar}
-              className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
+              className="mt-6 w-full rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
             >
               Cerrar
             </button>
@@ -92,7 +92,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
                 required
                 className={CLASE_INPUT}
               />
-              <p className="mt-2 text-xs text-neutral-400">Mínimo 8 caracteres y un número</p>
+              <p className="mt-2 text-xs text-[#64748B]">Mínimo 8 caracteres y un número</p>
             </div>
             <div>
               <label htmlFor="password-confirmar" className={CLASE_LABEL}>
@@ -111,7 +111,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
             {error && (
               <p
                 role="alert"
-                className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+                className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-700"
               >
                 {error}
               </p>
@@ -120,14 +120,14 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
               <button
                 type="submit"
                 disabled={cargando}
-                className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+                className="flex-1 rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
               >
                 {cargando ? 'Guardando…' : 'Guardar'}
               </button>
               <button
                 type="button"
                 onClick={onCerrar}
-                className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
+                className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-3 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
               >
                 Cancelar
               </button>
diff --git a/apps/alta-clientes/src/components/Campos.tsx b/apps/alta-clientes/src/components/Campos.tsx
index 7be0ed0..f69ca86 100644
--- a/apps/alta-clientes/src/components/Campos.tsx
+++ b/apps/alta-clientes/src/components/Campos.tsx
@@ -8,9 +8,9 @@ export interface CampoBaseProps {
 }
 
 const inputClase =
-  'w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm uppercase transition-colors duration-150 focus:border-neutral-900 focus:outline-none'
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm uppercase transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
 
-const labelClase = 'mb-1 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+const labelClase = 'mb-1 block text-xs font-medium text-[#4B5563]'
 
 function Etiqueta({ etiqueta, requerido }: { etiqueta: string; requerido?: boolean }) {
   return (
@@ -52,7 +52,7 @@ export function CampoTexto({ nombre, etiqueta, tipo = 'text', placeholder, reque
         type={tipo}
         placeholder={placeholder}
         readOnly={soloLectura}
-        className={`${claseInput(nombre, errors)} ${soloLectura ? 'bg-neutral-50' : ''}`}
+        className={`${claseInput(nombre, errors)} ${soloLectura ? 'bg-[#F8FAFC]' : ''}`}
         {...register(nombre)}
       />
       <MensajeError nombre={nombre} />
diff --git a/apps/alta-clientes/src/components/ChecklistExpediente.tsx b/apps/alta-clientes/src/components/ChecklistExpediente.tsx
index d63f7b2..9de37c7 100644
--- a/apps/alta-clientes/src/components/ChecklistExpediente.tsx
+++ b/apps/alta-clientes/src/components/ChecklistExpediente.tsx
@@ -12,19 +12,19 @@ export default function ChecklistExpediente({ documentos, firmaDataUrl }: Props)
   return (
     <section
       aria-label="Checklist del expediente"
-      className="border border-neutral-200 bg-white px-4 py-3"
+      className="rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
     >
-      <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+      <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
         Expediente: {estado.completos}/{estado.total}
       </p>
       <ul className="mt-3 space-y-2">
         {estado.items.map((item) => (
           <li key={item.clave} className="flex items-baseline justify-between gap-4 text-sm">
-            <span className="font-light text-neutral-900">{item.etiqueta}</span>
+            <span className="text-[#111827]">{item.etiqueta}</span>
             {item.completo ? (
-              <span className="text-xs font-bold uppercase tracking-widest text-accent">✓</span>
+              <span className="rounded-full bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-700">✓</span>
             ) : (
-              <span className="text-xs uppercase tracking-widest text-neutral-400">Pendiente</span>
+              <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">Pendiente</span>
             )}
           </li>
         ))}
diff --git a/apps/alta-clientes/src/components/FileUploader.tsx b/apps/alta-clientes/src/components/FileUploader.tsx
index 8106477..061f324 100644
--- a/apps/alta-clientes/src/components/FileUploader.tsx
+++ b/apps/alta-clientes/src/components/FileUploader.tsx
@@ -25,14 +25,14 @@ function Miniatura({ documento, url }: { documento: DocumentoCargado; url: strin
       rel="noreferrer"
       title={`Abrir ${documento.nombre} en una pestaña nueva`}
       aria-label={`Abrir ${documento.nombre} en una pestaña nueva`}
-      className="block h-20 w-20 shrink-0 border border-neutral-200 bg-neutral-50"
+      className="block h-20 w-20 shrink-0 overflow-hidden rounded-lg border border-[#E5E7EB] bg-[#F8FAFC]"
     >
       {esImagen ? (
         <img src={url} alt={`Vista previa de ${documento.nombre}`} className="h-full w-full object-cover" />
       ) : (
         <span className="flex h-full w-full flex-col items-center justify-center gap-1">
-          <span className="text-xs font-bold uppercase tracking-widest text-neutral-900">PDF</span>
-          <span className="max-w-full truncate px-1 text-[10px] font-light text-neutral-500">{documento.nombre}</span>
+          <span className="text-xs font-semibold text-[#111827]">PDF</span>
+          <span className="max-w-full truncate px-1 text-[10px] text-[#64748B]">{documento.nombre}</span>
         </span>
       )}
     </a>
@@ -76,12 +76,12 @@ export default function FileUploader({ slot, etiqueta, documento, onAgregar, onQ
 
   if (documento) {
     return (
-      <div className="flex items-center justify-between gap-4 border border-neutral-200 bg-white px-4 py-3">
+      <div className="flex items-center justify-between gap-4 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm">
         <div className="flex min-w-0 items-center gap-4">
           {urlObjeto && <Miniatura documento={documento} url={urlObjeto} />}
           <div className="min-w-0">
-            <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{etiqueta}</p>
-            <p className="mt-1 truncate text-sm text-neutral-900">
+            <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{etiqueta}</p>
+            <p className="mt-1 truncate text-sm text-[#111827]">
               {documento.nombre} · {formatoTamano(documento.tamano)}
             </p>
           </div>
@@ -89,7 +89,7 @@ export default function FileUploader({ slot, etiqueta, documento, onAgregar, onQ
         <button
           type="button"
           onClick={() => onQuitar(slot)}
-          className="shrink-0 border border-red-300 bg-white px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-red-700 transition-colors duration-150 hover:bg-red-50"
+          className="shrink-0 rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 transition-all duration-100 ease-out hover:bg-red-50"
         >
           Quitar
         </button>
@@ -101,16 +101,16 @@ export default function FileUploader({ slot, etiqueta, documento, onAgregar, onQ
     <div>
       <div
         {...getRootProps()}
-        className={`cursor-pointer border border-dashed border-neutral-300 bg-white px-4 py-6 text-center transition-colors duration-150 ${
-          isDragActive ? 'border-neutral-900 bg-neutral-50' : 'hover:border-neutral-500'
+        className={`cursor-pointer rounded-xl border border-dashed border-[#D1D5DB] bg-white px-4 py-6 text-center transition-colors duration-200 ${
+          isDragActive ? 'border-accent bg-accent/5' : 'hover:border-accent'
         }`}
       >
         <input {...getInputProps()} aria-label={`Seleccionar archivo para ${etiqueta}`} />
-        <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{etiqueta}</p>
-        <p className="mt-2 text-xs font-light text-neutral-500">Arrastra el archivo aquí · PDF/JPG/PNG · máx 10 MB</p>
+        <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{etiqueta}</p>
+        <p className="mt-2 text-xs text-[#64748B]">Arrastra el archivo aquí · PDF/JPG/PNG · máx 10 MB</p>
         <button
           type="button"
-          className="mt-4 border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+          className="mt-4 rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
         >
           Seleccionar archivo
         </button>
diff --git a/apps/alta-clientes/src/components/LoginScreen.tsx b/apps/alta-clientes/src/components/LoginScreen.tsx
index b19fcbb..1101180 100644
--- a/apps/alta-clientes/src/components/LoginScreen.tsx
+++ b/apps/alta-clientes/src/components/LoginScreen.tsx
@@ -22,11 +22,11 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-4">
-      <div className="w-full max-w-sm">
+    <div className="flex min-h-screen items-center justify-center bg-[#F8FAFC] px-4">
+      <div className="w-full max-w-sm rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm">
         <div className="mb-10 text-center">
-          <p className="text-lg font-bold tracking-widest">FRASA</p>
-          <p className="mt-2 text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <p className="text-lg font-bold tracking-widest text-[#111827]">FRASA<span className="text-[#F97316]">.</span></p>
+          <p className="mt-2 text-xs font-medium uppercase tracking-wider text-[#64748B]">
             Acceso al ecosistema
           </p>
         </div>
@@ -34,7 +34,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <div>
             <label
               htmlFor="login-usuario"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Usuario
             </label>
@@ -46,13 +46,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               autoComplete="username"
               autoFocus
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-4 py-3 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           <div>
             <label
               htmlFor="login-password"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Contraseña
             </label>
@@ -63,13 +63,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               onChange={(e) => setPassword(e.target.value)}
               autoComplete="current-password"
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-4 py-3 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           {error && (
             <p
               role="alert"
-              className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+              className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-700"
             >
               {error}
             </p>
@@ -77,7 +77,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <button
             type="submit"
             disabled={cargando}
-            className="w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+            className="w-full rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
           >
             {cargando ? 'Entrando…' : 'Entrar'}
           </button>
diff --git a/apps/alta-clientes/src/components/SectionCard.tsx b/apps/alta-clientes/src/components/SectionCard.tsx
index 9eaf7da..3fabd47 100644
--- a/apps/alta-clientes/src/components/SectionCard.tsx
+++ b/apps/alta-clientes/src/components/SectionCard.tsx
@@ -9,9 +9,9 @@ interface Props {
 /** Tarjeta de sección del wizard */
 export default function SectionCard({ titulo, descripcion, children }: Props) {
   return (
-    <section className="border border-neutral-200 bg-white p-6">
-      <h3 className="text-xs font-bold uppercase tracking-widest text-neutral-500">{titulo}</h3>
-      {descripcion && <p className="mt-2 text-sm font-light text-neutral-500">{descripcion}</p>}
+    <section className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
+      <h3 className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</h3>
+      {descripcion && <p className="mt-2 text-sm text-[#64748B]">{descripcion}</p>}
       <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">{children}</div>
     </section>
   )
diff --git a/apps/alta-clientes/src/components/SignaturePad.tsx b/apps/alta-clientes/src/components/SignaturePad.tsx
index afbdc4a..4f2bbb1 100644
--- a/apps/alta-clientes/src/components/SignaturePad.tsx
+++ b/apps/alta-clientes/src/components/SignaturePad.tsx
@@ -28,7 +28,7 @@ export default function SignaturePad({ onFirma }: Props) {
 
   return (
     <div>
-      <div className="border border-neutral-900 bg-white">
+      <div className="rounded-lg border border-[#D1D5DB] bg-white shadow-sm">
         <SignatureCanvas
           ref={ref}
           onEnd={alTerminar}
@@ -39,7 +39,7 @@ export default function SignaturePad({ onFirma }: Props) {
       <button
         type="button"
         onClick={limpiar}
-        className="mt-4 border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+        className="mt-4 rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
       >
         Limpiar firma
       </button>
diff --git a/apps/alta-clientes/src/components/Stepper.tsx b/apps/alta-clientes/src/components/Stepper.tsx
index 9773d28..beb69eb 100644
--- a/apps/alta-clientes/src/components/Stepper.tsx
+++ b/apps/alta-clientes/src/components/Stepper.tsx
@@ -8,7 +8,7 @@ interface Props {
 export default function Stepper({ pasos, pasoActual, onIrAPaso }: Props) {
   return (
     <nav aria-label="Progreso">
-      <ol className="flex flex-wrap items-baseline gap-x-6 gap-y-3 border-b border-neutral-200 pb-4">
+      <ol className="flex flex-wrap items-baseline gap-x-6 gap-y-3 border-b border-[#E5E7EB] pb-4">
         {pasos.map((nombre, i) => {
           const activo = i === pasoActual
           const completado = i < pasoActual
@@ -19,12 +19,12 @@ export default function Stepper({ pasos, pasoActual, onIrAPaso }: Props) {
                 onClick={() => completado && onIrAPaso(i)}
                 disabled={!completado}
                 aria-current={activo ? 'step' : undefined}
-                className={`text-xs uppercase tracking-widest transition-colors duration-150 ${
+                className={`text-xs font-medium transition-colors duration-150 ${
                   activo
-                    ? 'font-bold text-accent'
+                    ? 'font-semibold text-accent'
                     : completado
-                      ? 'font-medium text-neutral-900 hover:text-accent'
-                      : 'font-light text-neutral-400'
+                      ? 'text-[#111827] hover:text-accent'
+                      : 'text-[#94A3B8]'
                 }`}
                 title={nombre}
               >
diff --git a/apps/alta-clientes/src/forms/CoacreditadoForm.tsx b/apps/alta-clientes/src/forms/CoacreditadoForm.tsx
index a7e711d..ae3415e 100644
--- a/apps/alta-clientes/src/forms/CoacreditadoForm.tsx
+++ b/apps/alta-clientes/src/forms/CoacreditadoForm.tsx
@@ -20,14 +20,14 @@ export default function CoacreditadoForm({ valores, onAnterior, onSiguiente }: P
   return (
     <FormProvider {...metodos}>
       <form onSubmit={metodos.handleSubmit(onSiguiente)} noValidate>
-        <label htmlFor="tieneCoacreditado" className="flex items-center gap-3 border border-neutral-200 bg-white p-6">
+        <label htmlFor="tieneCoacreditado" className="flex items-center gap-3 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
           <input
             id="tieneCoacreditado"
             type="checkbox"
             className="h-5 w-5 accent-accent"
             {...metodos.register('tieneCoacreditado')}
           />
-          <span className="text-xs font-bold uppercase tracking-widest text-neutral-900">¿Hay co-acreditado o cónyuge?</span>
+          <span className="text-sm font-medium text-[#111827]">¿Hay co-acreditado o cónyuge?</span>
         </label>
 
         {tieneCoacreditado && (
diff --git a/apps/alta-clientes/src/forms/DatosGeneralesCampos.tsx b/apps/alta-clientes/src/forms/DatosGeneralesCampos.tsx
index a3172ac..eb8162d 100644
--- a/apps/alta-clientes/src/forms/DatosGeneralesCampos.tsx
+++ b/apps/alta-clientes/src/forms/DatosGeneralesCampos.tsx
@@ -29,7 +29,7 @@ export default function DatosGeneralesCampos({ prefix, compacto = false }: Props
       <CampoTexto nombre={p('nivelEstudios')} etiqueta="Nivel de estudios" />
       <CampoTexto nombre={p('curp')} etiqueta="CURP" requerido={!compacto} placeholder="XXXX000000XXXXXXX0" />
       {advertenciasCurp.length > 0 && (
-        <div role="alert" className="border border-amber-300 bg-amber-50 px-4 py-3 sm:col-span-2">
+        <div role="alert" className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 sm:col-span-2">
           {advertenciasCurp.map((aviso) => (
             <p key={aviso} className="text-xs text-amber-700">
               {aviso}
diff --git a/apps/alta-clientes/src/forms/EconomicosCampos.tsx b/apps/alta-clientes/src/forms/EconomicosCampos.tsx
index 601bd1f..6fa676f 100644
--- a/apps/alta-clientes/src/forms/EconomicosCampos.tsx
+++ b/apps/alta-clientes/src/forms/EconomicosCampos.tsx
@@ -22,25 +22,25 @@ export default function EconomicosCampos({ prefix }: Props) {
       <CampoNumero nombre={p('ingresosMensuales')} etiqueta="Ingresos mensuales" />
       <CampoNumero nombre={p('otrosIngresos')} etiqueta="Otros ingresos" />
       <label htmlFor={`${prefix}totalIngresos`} className="block">
-        <span className="mb-1 block text-xs font-bold uppercase tracking-widest text-neutral-500">Total ingresos</span>
+        <span className="mb-1 block text-xs font-medium text-[#4B5563]">Total ingresos</span>
         <input
           id={`${prefix}totalIngresos`}
           type="text"
           readOnly
           value={formatoMoneda(ingresosMensuales + otrosIngresos)}
-          className="w-full border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm font-bold text-neutral-900"
+          className="w-full rounded-lg border border-[#E5E7EB] bg-[#F8FAFC] px-3 py-2.5 text-sm font-semibold text-[#111827]"
         />
       </label>
       <CampoNumero nombre={p('gastosLuz')} etiqueta="Gastos luz" />
       <CampoNumero nombre={p('gastosOtros')} etiqueta="Otros gastos" />
       <label htmlFor={`${prefix}gastosTotal`} className="block">
-        <span className="mb-1 block text-xs font-bold uppercase tracking-widest text-neutral-500">Gastos total</span>
+        <span className="mb-1 block text-xs font-medium text-[#4B5563]">Gastos total</span>
         <input
           id={`${prefix}gastosTotal`}
           type="text"
           readOnly
           value={formatoMoneda(gastosLuz + gastosOtros)}
-          className="w-full border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm font-bold text-neutral-900"
+          className="w-full rounded-lg border border-[#E5E7EB] bg-[#F8FAFC] px-3 py-2.5 text-sm font-semibold text-[#111827]"
         />
       </label>
       <CampoTexto nombre={p('dependientes.personas')} etiqueta="Dependientes económicos (personas)" />
diff --git a/apps/alta-clientes/src/forms/FirmasForm.tsx b/apps/alta-clientes/src/forms/FirmasForm.tsx
index aa05356..05b199b 100644
--- a/apps/alta-clientes/src/forms/FirmasForm.tsx
+++ b/apps/alta-clientes/src/forms/FirmasForm.tsx
@@ -66,42 +66,42 @@ export default function FirmasForm({ alta, onCambiarFirma, onAnterior }: Props)
       <SectionCard titulo="Resumen del alta">
         <dl className="grid grid-cols-2 gap-x-6 gap-y-4 text-sm sm:col-span-2 lg:col-span-3 lg:grid-cols-3">
           <div>
-            <dt className="text-xs font-bold uppercase tracking-widest text-neutral-500">Cliente</dt>
-            <dd className="mt-1 font-light text-neutral-900">{g.nombreCompleto}</dd>
+            <dt className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Cliente</dt>
+            <dd className="mt-1 text-[#111827]">{g.nombreCompleto}</dd>
           </div>
           <div>
-            <dt className="text-xs font-bold uppercase tracking-widest text-neutral-500">CURP</dt>
-            <dd className="mt-1 font-light text-neutral-900">{g.curp}</dd>
+            <dt className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">CURP</dt>
+            <dd className="mt-1 text-[#111827]">{g.curp}</dd>
           </div>
           <div>
-            <dt className="text-xs font-bold uppercase tracking-widest text-neutral-500">RFC</dt>
-            <dd className="mt-1 font-light text-neutral-900">{g.rfc}</dd>
+            <dt className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">RFC</dt>
+            <dd className="mt-1 text-[#111827]">{g.rfc}</dd>
           </div>
           <div>
-            <dt className="text-xs font-bold uppercase tracking-widest text-neutral-500">Proyecto</dt>
-            <dd className="mt-1 font-light text-neutral-900">{proyecto || '—'}</dd>
+            <dt className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Proyecto</dt>
+            <dd className="mt-1 text-[#111827]">{proyecto || '—'}</dd>
           </div>
           <div>
-            <dt className="text-xs font-bold uppercase tracking-widest text-neutral-500">Ubicación / Modelo</dt>
-            <dd className="mt-1 font-light text-neutral-900">
+            <dt className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Ubicación / Modelo</dt>
+            <dd className="mt-1 text-[#111827]">
               {v.ubicacion || '—'} {v.modelo}
             </dd>
           </div>
           <div>
-            <dt className="text-xs font-bold uppercase tracking-widest text-neutral-500">Valor venta</dt>
-            <dd className="mt-1 font-light text-neutral-900">{formatoMoneda(Number(v.valorVenta) || 0)}</dd>
+            <dt className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Valor venta</dt>
+            <dd className="mt-1 text-[#111827]">{formatoMoneda(Number(v.valorVenta) || 0)}</dd>
           </div>
           <div>
-            <dt className="text-xs font-bold uppercase tracking-widest text-neutral-500">Total ingresos</dt>
-            <dd className="mt-1 font-light text-neutral-900">{formatoMoneda(calcularTotalIngresos(economicos))}</dd>
+            <dt className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Total ingresos</dt>
+            <dd className="mt-1 text-[#111827]">{formatoMoneda(calcularTotalIngresos(economicos))}</dd>
           </div>
           <div>
-            <dt className="text-xs font-bold uppercase tracking-widest text-neutral-500">Fecha</dt>
-            <dd className="mt-1 font-light text-neutral-900">{formatoFechaCorta(g.fecha)}</dd>
+            <dt className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Fecha</dt>
+            <dd className="mt-1 text-[#111827]">{formatoFechaCorta(g.fecha)}</dd>
           </div>
           <div>
-            <dt className="text-xs font-bold uppercase tracking-widest text-neutral-500">Documentos</dt>
-            <dd className="mt-1 font-light text-neutral-900">{alta.documentos.length} de 5</dd>
+            <dt className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Documentos</dt>
+            <dd className="mt-1 text-[#111827]">{alta.documentos.length} de 5</dd>
           </div>
         </dl>
       </SectionCard>
@@ -113,7 +113,7 @@ export default function FirmasForm({ alta, onCambiarFirma, onAnterior }: Props)
           <SignaturePad onFirma={(dataUrl) => onCambiarFirma({ ...firma, firmaDataUrl: dataUrl })} />
         </div>
         <label htmlFor="asesorNombre" className="block">
-          <span className="mb-1 block text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <span className="mb-1 block text-xs font-semibold uppercase tracking-wider text-[#64748B]">
             Nombre del asesor <span className="text-red-700">*</span>
           </span>
           <input
@@ -121,7 +121,7 @@ export default function FirmasForm({ alta, onCambiarFirma, onAnterior }: Props)
             type="text"
             value={firma.asesorNombre}
             onChange={(e) => onCambiarFirma({ ...firma, asesorNombre: e.target.value.toUpperCase() })}
-            className="w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm uppercase transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+            className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm uppercase transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
           />
         </label>
       </SectionCard>
@@ -132,7 +132,7 @@ export default function FirmasForm({ alta, onCambiarFirma, onAnterior }: Props)
         {avisoExpediente && (
           <p
             role="alert"
-            className="border border-amber-300 bg-amber-50 px-4 py-3 text-xs text-amber-700 sm:col-span-2 lg:col-span-3"
+            className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-700 sm:col-span-2 lg:col-span-3"
           >
             {avisoExpediente}
           </p>
@@ -143,7 +143,7 @@ export default function FirmasForm({ alta, onCambiarFirma, onAnterior }: Props)
               key={g3.tipo}
               type="button"
               onClick={() => generar(g3.descargar)}
-              className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+              className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
             >
               {g3.tipo}
             </button>
@@ -151,7 +151,7 @@ export default function FirmasForm({ alta, onCambiarFirma, onAnterior }: Props)
           <button
             type="button"
             onClick={generarTodos}
-            className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-neutral-900 disabled:opacity-40"
+            className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-40"
           >
             Generar todos
           </button>
@@ -162,7 +162,7 @@ export default function FirmasForm({ alta, onCambiarFirma, onAnterior }: Props)
         <button
           type="button"
           onClick={onAnterior}
-          className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
         >
           Anterior
         </button>
diff --git a/apps/alta-clientes/src/forms/Navegacion.tsx b/apps/alta-clientes/src/forms/Navegacion.tsx
index 872e029..1ccf4a9 100644
--- a/apps/alta-clientes/src/forms/Navegacion.tsx
+++ b/apps/alta-clientes/src/forms/Navegacion.tsx
@@ -13,7 +13,7 @@ export default function Navegacion({ onAnterior, onSiguiente, textoSiguiente = '
         <button
           type="button"
           onClick={onAnterior}
-          className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
         >
           Anterior
         </button>
@@ -23,7 +23,7 @@ export default function Navegacion({ onAnterior, onSiguiente, textoSiguiente = '
       <button
         type={onSiguiente ? 'button' : 'submit'}
         onClick={onSiguiente}
-        className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-neutral-900 disabled:opacity-40"
+        className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-40"
       >
         {textoSiguiente}
       </button>
diff --git a/apps/alta-clientes/src/forms/ReferenciasForm.tsx b/apps/alta-clientes/src/forms/ReferenciasForm.tsx
index 4a77715..380b196 100644
--- a/apps/alta-clientes/src/forms/ReferenciasForm.tsx
+++ b/apps/alta-clientes/src/forms/ReferenciasForm.tsx
@@ -31,8 +31,8 @@ export default function ReferenciasForm({ valores, onAnterior, onSiguiente }: Pa
           descripcion="Captura al menos 1 referencia con nombre y teléfono."
         >
           {[0, 1, 2, 3].map((i) => (
-            <div key={i} className="border border-neutral-200 p-6">
-              <p className="mb-4 text-xs font-bold uppercase tracking-widest text-neutral-500">Referencia {i + 1}</p>
+            <div key={i} className="rounded-xl border border-[#E5E7EB] p-6">
+              <p className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#64748B]">Referencia {i + 1}</p>
               <div className="space-y-3">
                 <CampoTexto nombre={`referencias.${i}.nombre`} etiqueta="Nombre completo" />
                 <CampoTexto nombre={`referencias.${i}.telefono`} etiqueta="Teléfono" />
diff --git a/apps/alta-clientes/src/forms/ViviendaCreditoForm.tsx b/apps/alta-clientes/src/forms/ViviendaCreditoForm.tsx
index c017775..da18a0b 100644
--- a/apps/alta-clientes/src/forms/ViviendaCreditoForm.tsx
+++ b/apps/alta-clientes/src/forms/ViviendaCreditoForm.tsx
@@ -80,10 +80,10 @@ export default function ViviendaCreditoForm({ valores, onAnterior, onSiguiente }
                   <label
                     key={tc.valor}
                     htmlFor={`tipoCredito-${tc.valor}`}
-                    className={`cursor-pointer border px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors duration-150 ${
+                    className={`cursor-pointer rounded-full border px-3 py-1.5 text-xs font-medium transition-all duration-100 ease-out ${
                       tiposSeleccionados.includes(tc.valor)
-                        ? 'border-accent bg-accent text-white'
-                        : 'border-neutral-300 bg-white text-neutral-600 hover:border-neutral-900'
+                        ? 'border-accent bg-accent text-white shadow-sm'
+                        : 'border-[#D1D5DB] bg-white text-[#4B5563] hover:border-accent hover:text-accent'
                     }`}
                   >
                     <input
diff --git a/apps/alta-clientes/src/index.css b/apps/alta-clientes/src/index.css
index 7b9719e..bfc5a7e 100644
--- a/apps/alta-clientes/src/index.css
+++ b/apps/alta-clientes/src/index.css
@@ -2,22 +2,17 @@
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --color-accent: #1B4332;
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 0;
-  --radius-xl: 0;
-  --radius-2xl: 0;
-  --radius-3xl: 0;
+  --color-accent: #2563EB;
+  --color-accent-hover: #1D4ED8;
 }
 
 @layer base {
   body {
-    @apply bg-white text-neutral-900 antialiased;
+    @apply bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   :focus-visible {
-    outline: 2px solid #1b4332;
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
   }
 }
diff --git a/apps/alta-clientes/src/pages/AltaClientePage.tsx b/apps/alta-clientes/src/pages/AltaClientePage.tsx
index 7dc04a7..4c12c95 100644
--- a/apps/alta-clientes/src/pages/AltaClientePage.tsx
+++ b/apps/alta-clientes/src/pages/AltaClientePage.tsx
@@ -238,9 +238,9 @@ export default function AltaClientePage() {
 
   if (pantalla === 'cargando') {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-[#F8FAFC]">
         <main className="mx-auto max-w-6xl px-4 py-16">
-          <p className="text-sm text-neutral-500">Cargando…</p>
+          <p className="text-sm text-[#64748B]">Cargando…</p>
         </main>
       </div>
     )
@@ -248,11 +248,11 @@ export default function AltaClientePage() {
 
   if (pantalla === 'entrada') {
     return (
-      <div className="min-h-screen bg-white">
-        <header className="border-b border-neutral-200 px-4 py-6">
+      <div className="min-h-screen bg-[#F8FAFC]">
+        <header className="border-b border-[#E5E7EB] bg-white px-4 py-6">
           <div className="mx-auto flex max-w-6xl items-baseline gap-3">
-            <span className="text-sm font-bold uppercase tracking-widest">FRASA</span>
-            <h1 className="text-2xl font-light tracking-wide">Alta de Clientes</h1>
+            <span className="text-sm font-bold tracking-widest text-[#111827]">FRASA<span className="text-[#F97316]">.</span></span>
+            <h1 className="text-2xl font-semibold text-[#111827]">Alta de Clientes</h1>
           </div>
         </header>
         <main className="mx-auto max-w-6xl px-4 py-16">
@@ -260,20 +260,20 @@ export default function AltaClientePage() {
             <button
               type="button"
               onClick={() => setPantalla('afluencia')}
-              className="border border-neutral-200 bg-white p-8 text-left transition-colors duration-150 hover:border-accent"
+              className="rounded-xl border border-[#E5E7EB] bg-white p-8 text-left shadow-sm transition-all duration-200 ease-in-out hover:border-accent hover:shadow-md"
             >
-              <h2 className="text-lg font-light tracking-wide text-neutral-900">Alta Afluencia</h2>
-              <p className="mt-2 text-xs font-light text-neutral-500">
+              <h2 className="text-lg font-semibold text-[#111827]">Alta Afluencia</h2>
+              <p className="mt-2 text-sm text-[#64748B]">
                 Captura rápida del interesado; entra al embudo de ventas.
               </p>
             </button>
             <button
               type="button"
               onClick={() => setPantalla('picker')}
-              className="border border-neutral-200 bg-white p-8 text-left transition-colors duration-150 hover:border-accent"
+              className="rounded-xl border border-[#E5E7EB] bg-white p-8 text-left shadow-sm transition-all duration-200 ease-in-out hover:border-accent hover:shadow-md"
             >
-              <h2 className="text-lg font-light tracking-wide text-neutral-900">Alta de Cliente</h2>
-              <p className="mt-2 text-xs font-light text-neutral-500">
+              <h2 className="text-lg font-semibold text-[#111827]">Alta de Cliente</h2>
+              <p className="mt-2 text-sm text-[#64748B]">
                 Formato completo para quien aparta.
               </p>
             </button>
@@ -285,11 +285,11 @@ export default function AltaClientePage() {
 
   if (pantalla === 'afluencia') {
     return (
-      <div className="min-h-screen bg-white">
-        <header className="border-b border-neutral-200 px-4 py-6">
+      <div className="min-h-screen bg-[#F8FAFC]">
+        <header className="border-b border-[#E5E7EB] bg-white px-4 py-6">
           <div className="mx-auto flex max-w-6xl items-baseline gap-3">
-            <span className="text-sm font-bold uppercase tracking-widest">FRASA</span>
-            <h1 className="text-2xl font-light tracking-wide">Alta Afluencia</h1>
+            <span className="text-sm font-bold tracking-widest text-[#111827]">FRASA<span className="text-[#F97316]">.</span></span>
+            <h1 className="text-2xl font-semibold text-[#111827]">Alta Afluencia</h1>
           </div>
         </header>
         <main className="mx-auto max-w-6xl px-4 py-16">
@@ -304,26 +304,26 @@ export default function AltaClientePage() {
 
   if (pantalla === 'picker') {
     return (
-      <div className="min-h-screen bg-white">
-        <header className="border-b border-neutral-200 px-4 py-6">
+      <div className="min-h-screen bg-[#F8FAFC]">
+        <header className="border-b border-[#E5E7EB] bg-white px-4 py-6">
           <div className="mx-auto flex max-w-6xl items-baseline gap-3">
-            <span className="text-sm font-bold uppercase tracking-widest">FRASA</span>
-            <h1 className="text-2xl font-light tracking-wide">Alta de Clientes</h1>
+            <span className="text-sm font-bold tracking-widest text-[#111827]">FRASA<span className="text-[#F97316]">.</span></span>
+            <h1 className="text-2xl font-semibold text-[#111827]">Alta de Clientes</h1>
           </div>
         </header>
         <main className="mx-auto max-w-6xl px-4 py-16">
           {borradores.length > 0 && (
             <>
-              <h2 className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+              <h2 className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
                 Tienes {borradores.length} borrador{borradores.length === 1 ? '' : 'es'} guardado
                 {borradores.length === 1 ? '' : 's'}
               </h2>
-              <ul className="mt-6 divide-y divide-neutral-200 border border-neutral-200 bg-white">
+              <ul className="mt-6 divide-y divide-[#E5E7EB] rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
                 {borradores.map((b) => (
                   <li key={b.id} className="flex flex-wrap items-center justify-between gap-4 px-4 py-3">
                     <div className="min-w-0">
-                      <p className="truncate text-sm text-neutral-900">{b.nombre}</p>
-                      <p className="mt-1 text-xs font-light text-neutral-500">
+                      <p className="truncate text-sm text-[#111827]">{b.nombre}</p>
+                      <p className="mt-1 text-xs text-[#64748B]">
                         Paso {b.paso + 1} de {PASOS.length} · {formatoFechaHora(b.updatedAt)}
                       </p>
                     </div>
@@ -331,14 +331,14 @@ export default function AltaClientePage() {
                       <button
                         type="button"
                         onClick={() => void continuarBorrador(b.id)}
-                        className="border border-accent bg-white px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white"
+                        className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white"
                       >
                         Continuar
                       </button>
                       <button
                         type="button"
                         onClick={() => void borrarBorrador(b.id)}
-                        className="border border-red-300 bg-white px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-red-700 transition-colors duration-150 hover:bg-red-50"
+                        className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 transition-all duration-100 ease-out hover:bg-red-50"
                       >
                         Eliminar
                       </button>
@@ -352,16 +352,16 @@ export default function AltaClientePage() {
           <button
             type="button"
             onClick={empezarNuevo}
-            className="mt-8 bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-neutral-900"
+            className="mt-8 rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
           >
             Empezar nuevo
           </button>
 
-          <section aria-labelledby="titulo-lead" className="mt-12 border-t border-neutral-200 pt-8">
-            <h3 id="titulo-lead" className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <section aria-labelledby="titulo-lead" className="mt-12 border-t border-[#E5E7EB] pt-8">
+            <h3 id="titulo-lead" className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
               Desde un lead de Monday
             </h3>
-            <p className="mt-2 text-xs font-light text-neutral-500">
+            <p className="mt-2 text-sm text-[#64748B]">
               Empieza un alta nueva con el nombre, email y celular del lead ya capturados.
             </p>
             <div className="mt-4">
@@ -374,26 +374,26 @@ export default function AltaClientePage() {
   }
 
   return (
-    <div className="min-h-screen bg-white">
-      <header className="border-b border-neutral-200 px-4 py-6">
+    <div className="min-h-screen bg-[#F8FAFC]">
+      <header className="border-b border-[#E5E7EB] bg-white px-4 py-6">
         <div className="mx-auto flex max-w-6xl flex-wrap items-baseline gap-3">
-          <span className="text-sm font-bold uppercase tracking-widest">FRASA</span>
-          <h1 className="text-2xl font-light tracking-wide">Alta de Clientes</h1>
+          <span className="text-sm font-bold tracking-widest text-[#111827]">FRASA<span className="text-[#F97316]">.</span></span>
+          <h1 className="text-2xl font-semibold text-[#111827]">Alta de Clientes</h1>
           <div className="ml-auto flex items-center gap-3">
             {avisoBorrador && (
-              <span role="status" className="text-xs font-light text-neutral-500">
+              <span role="status" className="text-xs text-[#64748B]">
                 {avisoBorrador}
               </span>
             )}
             {avisoProgreso && (
-              <span role="status" className="text-xs font-light text-amber-700">
+              <span role="status" className="text-xs text-amber-700">
                 {avisoProgreso}
               </span>
             )}
             <button
               type="button"
               onClick={() => void guardar()}
-              className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+              className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
             >
               Guardar borrador
             </button>
@@ -405,7 +405,7 @@ export default function AltaClientePage() {
         <Stepper pasos={[...PASOS]} pasoActual={paso} onIrAPaso={irAPaso} />
 
         {errorCarga && (
-          <p role="alert" className="mt-8 border border-amber-300 bg-amber-50 px-4 py-3 text-xs text-amber-700">
+          <p role="alert" className="mt-8 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-700">
             {errorCarga}
           </p>
         )}
@@ -481,7 +481,7 @@ export default function AltaClientePage() {
               {cargoDeBorrador && (
                 <p
                   role="note"
-                  className="mb-8 border border-amber-300 bg-amber-50 px-4 py-3 text-xs text-amber-700"
+                  className="mb-8 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-700"
                 >
                   Retomaste un borrador: los archivos de los documentos no se guardan en el borrador,
                   vuelve a adjuntarlos.
@@ -507,14 +507,14 @@ export default function AltaClientePage() {
           {paso === 7 && (
             <>
               {registro && (
-                <p className="mb-8 border border-accent bg-white px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
+                <p className="mb-8 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">
                   Alta registrada en el servidor: {registro}
                 </p>
               )}
               {sinConexion && (
                 <p
                   role="alert"
-                  className="mb-8 border border-amber-300 bg-amber-50 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700"
+                  className="mb-8 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-700"
                 >
                   Sin conexión al servidor — el expediente se generó solo localmente
                 </p>
@@ -522,32 +522,32 @@ export default function AltaClientePage() {
               {errorValidacion && (
                 <p
                   role="alert"
-                  className="mb-8 border border-red-300 bg-red-50 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+                  className="mb-8 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-700"
                 >
                   El servidor rechazó el alta: {errorValidacion}
                 </p>
               )}
               {registro && (
-                <div className="mb-8 border border-neutral-200 bg-white px-4 py-4">
-                  <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+                <div className="mb-8 rounded-xl border border-[#E5E7EB] bg-white px-4 py-4 shadow-sm">
+                  <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
                     Firma en remoto
                   </p>
-                  <p className="mt-2 text-xs font-light text-neutral-500">
+                  <p className="mt-2 text-sm text-[#64748B]">
                     Genera una liga pública (vigencia 72 h) para que el cliente firme y suba sus
                     documentos desde su celular, sin usuario ni contraseña.
                   </p>
                   <button
                     type="button"
                     onClick={() => void generarLiga()}
-                    className="mt-4 border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+                    className="mt-4 rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
                   >
                     Generar liga para firmar en remoto
                   </button>
                   {ligaUrl && (
-                    <p className="mt-4 break-all text-xs text-neutral-900">
+                    <p className="mt-4 break-all text-xs text-[#111827]">
                       {ligaUrl}
                       {ligaCopiada && (
-                        <span role="status" className="ml-2 font-bold uppercase tracking-widest text-accent">
+                        <span role="status" className="ml-2 font-medium text-accent">
                           Liga y mensaje de WhatsApp copiados
                         </span>
                       )}
diff --git a/apps/alta-clientes/src/pages/FirmaRemotaPage.tsx b/apps/alta-clientes/src/pages/FirmaRemotaPage.tsx
index 818a3a1..7dcb174 100644
--- a/apps/alta-clientes/src/pages/FirmaRemotaPage.tsx
+++ b/apps/alta-clientes/src/pages/FirmaRemotaPage.tsx
@@ -82,10 +82,10 @@ export default function FirmaRemotaPage() {
 
   if (errorCarga) {
     return (
-      <div className="min-h-screen bg-white text-neutral-900">
+      <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
         <main className="mx-auto max-w-xl px-4 py-24 text-center">
-          <span className="text-sm font-bold uppercase tracking-widest">FRASA</span>
-          <p role="alert" className="mt-8 border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700">
+          <span className="text-sm font-bold tracking-widest text-[#111827]">FRASA<span className="text-[#F97316]">.</span></span>
+          <p role="alert" className="mt-8 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
             {errorCarga}
           </p>
         </main>
@@ -95,29 +95,29 @@ export default function FirmaRemotaPage() {
 
   if (!cliente) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-[#F8FAFC]">
         <main className="mx-auto max-w-xl px-4 py-24">
-          <p className="text-sm text-neutral-500">Cargando…</p>
+          <p className="text-sm text-[#64748B]">Cargando…</p>
         </main>
       </div>
     )
   }
 
   return (
-    <div className="min-h-screen bg-white text-neutral-900">
-      <header className="border-b border-neutral-200 px-4 py-6">
+    <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
+      <header className="border-b border-[#E5E7EB] bg-white px-4 py-6">
         <div className="mx-auto flex max-w-xl items-baseline gap-3">
-          <span className="text-sm font-bold uppercase tracking-widest">FRASA</span>
-          <h1 className="text-2xl font-light tracking-wide">Expediente digital</h1>
+          <span className="text-sm font-bold tracking-widest text-[#111827]">FRASA<span className="text-[#F97316]">.</span></span>
+          <h1 className="text-2xl font-semibold text-[#111827]">Expediente digital</h1>
         </div>
       </header>
 
       <main className="mx-auto max-w-xl space-y-12 px-4 py-12">
         <section>
-          <h2 className="text-lg font-light">
-            Hola, <span className="font-medium">{cliente.nombre}</span>
+          <h2 className="text-lg font-semibold text-[#111827]">
+            Hola, <span className="font-semibold">{cliente.nombre}</span>
           </h2>
-          <p className="mt-2 text-sm font-light text-neutral-500">
+          <p className="mt-2 text-sm text-[#64748B]">
             Proyecto {cliente.proyecto}
             {cliente.unidad ? ` · Unidad ${cliente.unidad}` : ''}. Firma y sube los documentos de tu
             expediente desde aquí.
@@ -125,11 +125,11 @@ export default function FirmaRemotaPage() {
         </section>
 
         <section aria-labelledby="firma-titulo">
-          <h3 id="firma-titulo" className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <h3 id="firma-titulo" className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
             Tu firma
           </h3>
           {firmaOk ? (
-            <p role="status" className="mt-4 border border-accent bg-white px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
+            <p role="status" className="mt-4 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">
               Firma registrada correctamente
             </p>
           ) : (
@@ -140,7 +140,7 @@ export default function FirmaRemotaPage() {
                 type="button"
                 disabled={enviandoFirma}
                 onClick={() => void enviarFirma()}
-                className="mt-4 bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-neutral-900 disabled:opacity-40"
+                className="mt-4 rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-40"
               >
                 {enviandoFirma ? 'Enviando…' : 'Enviar firma'}
               </button>
@@ -149,22 +149,22 @@ export default function FirmaRemotaPage() {
         </section>
 
         <section aria-labelledby="docs-titulo">
-          <h3 id="docs-titulo" className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <h3 id="docs-titulo" className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
             Tus documentos
           </h3>
           <ul className="mt-4 space-y-4">
             {SLOTS_DOCUMENTOS.map(({ slot, etiqueta }) => {
               const subido = cliente.documentos.find((d) => d.tipo === slot)
               return (
-                <li key={slot} className="border border-neutral-200 bg-white px-4 py-3">
-                  <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{etiqueta}</p>
+                <li key={slot} className="rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm">
+                  <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{etiqueta}</p>
                   {subido ? (
-                    <p role="status" className="mt-2 text-sm text-neutral-900">
+                    <p role="status" className="mt-2 text-sm text-[#111827]">
                       ✓ {subido.nombreArchivo}
                     </p>
                   ) : (
                     <div className="mt-2">
-                      <label className="inline-block cursor-pointer border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white">
+                      <label className="inline-block cursor-pointer rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]">
                         {subiendoSlot === slot ? 'Subiendo…' : 'Seleccionar archivo'}
                         <input
                           type="file"
@@ -178,7 +178,7 @@ export default function FirmaRemotaPage() {
                           }}
                         />
                       </label>
-                      <p className="mt-2 text-xs font-light text-neutral-500">PDF/JPG/PNG · máx 10 MB</p>
+                      <p className="mt-2 text-xs text-[#64748B]">PDF/JPG/PNG · máx 10 MB</p>
                     </div>
                   )}
                   {erroresDoc[slot] && (
diff --git a/apps/cobranza/src/components/AuthGate.tsx b/apps/cobranza/src/components/AuthGate.tsx
index baba256..b354a11 100644
--- a/apps/cobranza/src/components/AuthGate.tsx
+++ b/apps/cobranza/src/components/AuthGate.tsx
@@ -17,17 +17,17 @@ export default function AuthGate({ children }: { children: ReactNode }) {
   }
 
   return (
-    <div className="min-h-screen bg-white text-neutral-900">
-      <div className="border-b border-neutral-200">
+    <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
+      <div className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
-          <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <span className="text-xs font-medium text-[#64748B]">
             {sesion.usuario.nombre} · {sesion.usuario.rol}
           </span>
           <div className="flex items-center gap-4">
             <button
               type="button"
               onClick={() => setModalPassword(true)}
-              className="text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
+              className="text-xs font-medium text-[#64748B] transition-colors duration-100 ease-out hover:text-[#111827]"
             >
               Contraseña
             </button>
@@ -37,7 +37,7 @@ export default function AuthGate({ children }: { children: ReactNode }) {
                 logout()
                 setSesion(null)
               }}
-              className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
+              className="text-xs font-medium text-accent transition-colors duration-100 ease-out hover:text-accent-hover"
             >
               Salir
             </button>
diff --git a/apps/cobranza/src/components/BadgeStatus.tsx b/apps/cobranza/src/components/BadgeStatus.tsx
index 3cd8d5e..a13f8e3 100644
--- a/apps/cobranza/src/components/BadgeStatus.tsx
+++ b/apps/cobranza/src/components/BadgeStatus.tsx
@@ -1,16 +1,16 @@
 import type { StatusPago } from '../types'
 
 const CLASES: Record<StatusPago, string> = {
-  PENDIENTE: 'border-neutral-300 text-neutral-500',
-  PAGADO: 'border-green-300 text-green-700',
-  VENCIDO: 'border-red-300 text-red-700',
-  PARCIAL: 'border-amber-300 text-amber-700',
+  PENDIENTE: 'bg-gray-100 text-gray-600',
+  PAGADO: 'bg-green-50 text-green-700',
+  VENCIDO: 'bg-red-50 text-red-700',
+  PARCIAL: 'bg-amber-50 text-amber-700',
 }
 
 export default function BadgeStatus({ status }: { status: StatusPago }) {
   return (
     <span
-      className={`inline-block border bg-white px-2 py-0.5 text-xs font-bold uppercase tracking-wider ${CLASES[status]}`}
+      className={`inline-block rounded-full px-2.5 py-0.5 text-xs font-medium ${CLASES[status]}`}
     >
       {status}
     </span>
diff --git a/apps/cobranza/src/components/CambiarPasswordModal.tsx b/apps/cobranza/src/components/CambiarPasswordModal.tsx
index 1be9e05..d049f46 100644
--- a/apps/cobranza/src/components/CambiarPasswordModal.tsx
+++ b/apps/cobranza/src/components/CambiarPasswordModal.tsx
@@ -3,8 +3,8 @@ import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
 import { cambiarPassword } from '../services/auth'
 
 const CLASE_INPUT =
-  'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
-const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
+const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563]'
 
 /**
  * Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
@@ -45,19 +45,19 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
       aria-modal="true"
       aria-label="Cambiar contraseña"
     >
-      <div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
-        <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
+      <div className="w-full max-w-sm rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-xl">
+        <h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
           Cambiar contraseña
         </h2>
         {exito ? (
           <>
-            <p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
+            <p className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">
               Contraseña actualizada
             </p>
             <button
               type="button"
               onClick={onCerrar}
-              className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
+              className="mt-6 w-full rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
             >
               Cerrar
             </button>
@@ -111,7 +111,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
             {error && (
               <p
                 role="alert"
-                className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+                className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
               >
                 {error}
               </p>
@@ -120,14 +120,14 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
               <button
                 type="submit"
                 disabled={cargando}
-                className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+                className="flex-1 rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
               >
                 {cargando ? 'Guardando…' : 'Guardar'}
               </button>
               <button
                 type="button"
                 onClick={onCerrar}
-                className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
+                className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
               >
                 Cancelar
               </button>
diff --git a/apps/cobranza/src/components/KpiCard.tsx b/apps/cobranza/src/components/KpiCard.tsx
index e841007..422b119 100644
--- a/apps/cobranza/src/components/KpiCard.tsx
+++ b/apps/cobranza/src/components/KpiCard.tsx
@@ -2,10 +2,10 @@ import type { ReactNode } from 'react'
 
 export default function KpiCard({ titulo, valor, detalle }: { titulo: string; valor: ReactNode; detalle?: string }) {
   return (
-    <div className="border border-neutral-200 bg-white p-6">
-      <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{titulo}</p>
-      <p className="mt-2 text-3xl font-light text-neutral-900">{valor}</p>
-      {detalle && <p className="mt-2 text-xs text-neutral-500">{detalle}</p>}
+    <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm transition-shadow duration-200 ease-in-out hover:shadow-md">
+      <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</p>
+      <p className="mt-2 text-3xl font-light text-[#111827]">{valor}</p>
+      {detalle && <p className="mt-2 text-xs text-[#64748B]">{detalle}</p>}
     </div>
   )
 }
diff --git a/apps/cobranza/src/components/Layout.tsx b/apps/cobranza/src/components/Layout.tsx
index 45084db..ad5efd6 100644
--- a/apps/cobranza/src/components/Layout.tsx
+++ b/apps/cobranza/src/components/Layout.tsx
@@ -3,36 +3,37 @@ import { Link } from 'react-router-dom'
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <div className="min-h-screen bg-white text-neutral-900">
-      <header className="border-b border-neutral-200">
+    <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
+      <header className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
           <Link to="/" className="text-sm tracking-widest">
-            <span className="font-bold">FRASA</span>{' '}
-            <span className="font-light text-neutral-500">COBRANZA</span>
+            <span className="font-bold">FRASA</span>
+            <span className="text-[#F97316]">.</span>{' '}
+            <span className="font-light text-[#64748B]">COBRANZA</span>
           </Link>
           <nav className="flex items-center gap-6 text-sm">
             <Link
               to="/"
-              className="text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
+              className="text-[#64748B] transition-colors duration-150 hover:text-[#111827]"
             >
               Cobranza
             </Link>
             <Link
               to="/hoy"
-              className="border border-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white"
+              className="rounded-lg border border-accent px-5 py-2.5 text-sm font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white"
             >
               Cobranza del día
             </Link>
             <Link
               to="/nuevo"
-              className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:opacity-90"
+              className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
             >
               Nuevo plan
             </Link>
           </nav>
         </div>
       </header>
-      <main className="mx-auto max-w-6xl px-4 py-16">{children}</main>
+      <main className="mx-auto max-w-6xl px-4 py-10">{children}</main>
     </div>
   )
 }
diff --git a/apps/cobranza/src/components/LoginScreen.tsx b/apps/cobranza/src/components/LoginScreen.tsx
index b19fcbb..45b6b22 100644
--- a/apps/cobranza/src/components/LoginScreen.tsx
+++ b/apps/cobranza/src/components/LoginScreen.tsx
@@ -22,11 +22,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-4">
-      <div className="w-full max-w-sm">
+    <div className="flex min-h-screen items-center justify-center bg-[#F8FAFC] px-4">
+      <div className="w-full max-w-sm rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm">
         <div className="mb-10 text-center">
-          <p className="text-lg font-bold tracking-widest">FRASA</p>
-          <p className="mt-2 text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <p className="text-lg font-bold tracking-widest">
+            FRASA<span className="text-[#F97316]">.</span>
+          </p>
+          <p className="mt-2 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
             Acceso al ecosistema
           </p>
         </div>
@@ -34,7 +36,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <div>
             <label
               htmlFor="login-usuario"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Usuario
             </label>
@@ -46,13 +48,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               autoComplete="username"
               autoFocus
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           <div>
             <label
               htmlFor="login-password"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Contraseña
             </label>
@@ -63,13 +65,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               onChange={(e) => setPassword(e.target.value)}
               autoComplete="current-password"
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           {error && (
             <p
               role="alert"
-              className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+              className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
             >
               {error}
             </p>
@@ -77,7 +79,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <button
             type="submit"
             disabled={cargando}
-            className="w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+            className="w-full rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
           >
             {cargando ? 'Entrando…' : 'Entrar'}
           </button>
diff --git a/apps/cobranza/src/components/ModalAbono.tsx b/apps/cobranza/src/components/ModalAbono.tsx
index 58f6292..f96bddb 100644
--- a/apps/cobranza/src/components/ModalAbono.tsx
+++ b/apps/cobranza/src/components/ModalAbono.tsx
@@ -25,7 +25,7 @@ interface Props {
   onGuardar: (datos: AbonoForm) => void
 }
 
-const claseLabel = 'block text-xs font-bold uppercase tracking-widest text-neutral-500'
+const claseLabel = 'block text-xs font-medium text-[#4B5563]'
 
 /** Modal para registrar un abono (total o parcial) a un pago del plan */
 export default function ModalAbono({ pago, onCancelar, onGuardar }: Props) {
@@ -62,13 +62,13 @@ export default function ModalAbono({ pago, onCancelar, onGuardar }: Props) {
         role="dialog"
         aria-modal="true"
         aria-labelledby="titulo-abono"
-        className="w-full max-w-md border border-neutral-900 bg-white p-8"
+        className="w-full max-w-md rounded-2xl border border-[#E5E7EB] bg-white p-8 shadow-xl"
       >
-        <h2 id="titulo-abono" className="text-xl font-light text-neutral-900">
+        <h2 id="titulo-abono" className="text-xl font-light text-[#111827]">
           Registrar abono — Pago #{pago.numPago}
         </h2>
-        <p className="mt-2 text-sm text-neutral-500">
-          Restante: <span className="font-bold text-neutral-900">{formatoMoneda(restante)}</span>
+        <p className="mt-2 text-sm text-[#64748B]">
+          Restante: <span className="font-bold text-[#111827]">{formatoMoneda(restante)}</span>
         </p>
         <form
           className="mt-8 space-y-6"
@@ -84,7 +84,7 @@ export default function ModalAbono({ pago, onCancelar, onGuardar }: Props) {
               id="abono-monto"
               type="number"
               step="0.01"
-              className={`mt-1 w-full border bg-white px-3 py-2.5 text-sm focus:border-neutral-900 focus:outline-none ${errors.monto ? 'border-red-400' : 'border-neutral-300'}`}
+              className={`mt-1 w-full rounded-lg border bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 ${errors.monto ? 'border-red-400' : 'border-[#D1D5DB]'}`}
               {...regMonto}
               ref={(el) => {
                 regMonto.ref(el)
@@ -100,7 +100,7 @@ export default function ModalAbono({ pago, onCancelar, onGuardar }: Props) {
             <input
               id="abono-fecha"
               type="date"
-              className={`mt-1 w-full border bg-white px-3 py-2.5 text-sm focus:border-neutral-900 focus:outline-none ${errors.fechaPago ? 'border-red-400' : 'border-neutral-300'}`}
+              className={`mt-1 w-full rounded-lg border bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 ${errors.fechaPago ? 'border-red-400' : 'border-[#D1D5DB]'}`}
               {...register('fechaPago')}
             />
             {errors.fechaPago && <p className="mt-1 text-xs text-red-700">{errors.fechaPago.message}</p>}
@@ -112,7 +112,7 @@ export default function ModalAbono({ pago, onCancelar, onGuardar }: Props) {
             <input
               id="abono-referencia"
               type="text"
-              className={`mt-1 w-full border bg-white px-3 py-2.5 text-sm focus:border-neutral-900 focus:outline-none ${errors.referencia ? 'border-red-400' : 'border-neutral-300'}`}
+              className={`mt-1 w-full rounded-lg border bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 ${errors.referencia ? 'border-red-400' : 'border-[#D1D5DB]'}`}
               placeholder="SPEI-000123"
               {...register('referencia')}
             />
@@ -123,13 +123,13 @@ export default function ModalAbono({ pago, onCancelar, onGuardar }: Props) {
               type="button"
               onClick={onCancelar}
               aria-label="Cancelar y cerrar el registro de abono"
-              className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+              className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
             >
               Cancelar
             </button>
             <button
               type="submit"
-              className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:opacity-90 disabled:opacity-40"
+              className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-40"
             >
               Guardar abono
             </button>
diff --git a/apps/cobranza/src/components/Semaforo.tsx b/apps/cobranza/src/components/Semaforo.tsx
index dd4c55d..afa294a 100644
--- a/apps/cobranza/src/components/Semaforo.tsx
+++ b/apps/cobranza/src/components/Semaforo.tsx
@@ -11,10 +11,10 @@ const ETIQUETA: Record<Semaforo, string> = {
 }
 
 const CLASE_DOT: Record<Semaforo, string> = {
-  VERDE: 'border-green-300 bg-white text-green-700',
-  AMBAR: 'border-amber-300 bg-white text-amber-700',
-  ROJO: 'border-red-300 bg-white text-red-700',
-  GRIS: 'border-neutral-300 bg-white text-neutral-500',
+  VERDE: 'bg-green-50 text-green-700',
+  AMBAR: 'bg-amber-50 text-amber-700',
+  ROJO: 'bg-red-50 text-red-700',
+  GRIS: 'bg-gray-100 text-gray-600',
 }
 
 /**
@@ -37,7 +37,7 @@ export function semaforoPlan(plan: PlanPago, hoy: Date = new Date()): Semaforo {
 export default function SemaforoDot({ valor }: { valor: Semaforo }) {
   return (
     <span
-      className={`inline-block border px-2 py-0.5 text-xs font-bold uppercase tracking-wider ${CLASE_DOT[valor]}`}
+      className={`inline-block rounded-full px-2.5 py-0.5 text-xs font-medium ${CLASE_DOT[valor]}`}
     >
       {ETIQUETA[valor]}
     </span>
diff --git a/apps/cobranza/src/index.css b/apps/cobranza/src/index.css
index 5de6ae6..f68f994 100644
--- a/apps/cobranza/src/index.css
+++ b/apps/cobranza/src/index.css
@@ -2,22 +2,17 @@
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --color-accent: #1B4332;
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 0;
-  --radius-xl: 0;
-  --radius-2xl: 0;
-  --radius-3xl: 0;
+  --color-accent: #2563EB;
+  --color-accent-hover: #1D4ED8;
 }
 
 @layer base {
   body {
-    @apply bg-white text-neutral-900 antialiased;
+    @apply bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   *:focus-visible {
-    outline: 2px solid #1B4332;
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
   }
 }
diff --git a/apps/cobranza/src/lib/pdf/estadoCuenta.ts b/apps/cobranza/src/lib/pdf/estadoCuenta.ts
index 497044e..37c9c48 100644
--- a/apps/cobranza/src/lib/pdf/estadoCuenta.ts
+++ b/apps/cobranza/src/lib/pdf/estadoCuenta.ts
@@ -48,7 +48,7 @@ export function crearDocumento(plan: PlanPago, hoy: Date = new Date()): Document
       formatoMoneda(plan.mensualidad),
       String(plan.numPagos),
     ]],
-    headStyles: { fillColor: [4, 120, 87] },
+    headStyles: { fillColor: [37, 99, 235] },
   })
   y = finalY(doc) + 6
 
@@ -69,7 +69,7 @@ export function crearDocumento(plan: PlanPago, hoy: Date = new Date()): Document
         .map((a) => `${a.referencia} (${formatoFechaCorta(a.fechaPago)})`)
         .join('\n') || '—',
     ]),
-    headStyles: { fillColor: [4, 120, 87] },
+    headStyles: { fillColor: [37, 99, 235] },
   })
   y = finalY(doc) + 6
 
diff --git a/apps/cobranza/src/pages/DashboardPage.tsx b/apps/cobranza/src/pages/DashboardPage.tsx
index bffc4a1..a3605c7 100644
--- a/apps/cobranza/src/pages/DashboardPage.tsx
+++ b/apps/cobranza/src/pages/DashboardPage.tsx
@@ -32,7 +32,7 @@ import KpiCard from '../components/KpiCard'
 import SemaforoDot, { semaforoPlan } from '../components/Semaforo'
 
 const MESES_CORTOS = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic']
-const COLORES_PIE = ['#1B4332', '#d4d4d4']
+const COLORES_PIE = ['#2563EB', '#CBD5E1']
 
 type ColumnaOrden = 'saldo' | 'vencimiento' | 'atraso' | 'avance'
 const COLUMNAS_ORDEN: ColumnaOrden[] = ['saldo', 'vencimiento', 'atraso', 'avance']
@@ -160,9 +160,9 @@ export default function DashboardPage() {
 
   if (!resultado) {
     return errorCarga ? (
-      <div className="border border-red-300 bg-white px-4 py-3 text-sm text-red-700">{errorCarga}</div>
+      <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{errorCarga}</div>
     ) : (
-      <p className="text-sm text-neutral-400">Cargando...</p>
+      <p className="text-sm text-[#64748B]">Cargando...</p>
     )
   }
 
@@ -200,12 +200,12 @@ export default function DashboardPage() {
   })()
 
   const encabezadoOrdenable = (columna: ColumnaOrden, titulo: string, alineadoDerecha = false) => (
-    <th scope="col" className={`py-3 pr-4 ${alineadoDerecha ? 'text-right' : ''}`}>
+    <th scope="col" className={`px-4 py-3 ${alineadoDerecha ? 'text-right' : ''}`}>
       <button
         type="button"
         onClick={() => alternarOrden(columna)}
         aria-label={`Ordenar por ${titulo}`}
-        className="inline-flex items-center gap-1 font-bold uppercase tracking-widest transition-colors duration-150 hover:text-neutral-900"
+        className="inline-flex items-center gap-1 font-semibold uppercase tracking-wider transition-colors duration-100 ease-out hover:text-[#111827]"
       >
         {titulo}
         {orden === columna && <span aria-hidden="true">{dir === 'asc' ? '↑' : '↓'}</span>}
@@ -214,12 +214,12 @@ export default function DashboardPage() {
   )
 
   return (
-    <div className="space-y-16">
+    <div className="space-y-8">
       <div className="flex items-center justify-between">
-        <h1 className="text-3xl font-light text-neutral-900">Módulo Cobranza — Planes de enganche</h1>
+        <h1 className="text-3xl font-light text-[#111827]">Módulo Cobranza — Planes de enganche</h1>
         <Link
           to="/nuevo"
-          className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:opacity-90"
+          className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
         >
           Nuevo plan
         </Link>
@@ -248,8 +248,8 @@ export default function DashboardPage() {
 
       {/* Gráficas */}
       <div className="grid gap-6 lg:grid-cols-2">
-        <div className="border border-neutral-200 bg-white p-6">
-          <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
+        <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
+          <h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
             Al corriente vs vencidos
           </h2>
           <ResponsiveContainer width="100%" height={240}>
@@ -272,21 +272,21 @@ export default function DashboardPage() {
             </PieChart>
           </ResponsiveContainer>
         </div>
-        <div className="border border-neutral-200 bg-white p-6">
-          <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
+        <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
+          <h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
             Cobrado por mes (últimos 6 meses)
           </h2>
           <ResponsiveContainer width="100%" height={240}>
             <BarChart data={datosBarras}>
-              <CartesianGrid stroke="#e5e5e5" strokeDasharray="3 3" vertical={false} />
-              <XAxis dataKey="mes" tickLine={false} axisLine={{ stroke: '#e5e5e5' }} />
+              <CartesianGrid stroke="#E5E7EB" strokeDasharray="3 3" vertical={false} />
+              <XAxis dataKey="mes" tickLine={false} axisLine={{ stroke: '#E5E7EB' }} />
               <YAxis
                 tickLine={false}
                 axisLine={false}
                 tickFormatter={(v: number) => `$${(v / 1000).toLocaleString('es-MX')}k`}
               />
-              <Tooltip formatter={(v) => formatoMoneda(Number(v))} cursor={{ fill: '#fafafa' }} />
-              <Bar dataKey="cobrado" fill="#1B4332" name="Cobrado" />
+              <Tooltip formatter={(v) => formatoMoneda(Number(v))} cursor={{ fill: '#F8FAFC' }} />
+              <Bar dataKey="cobrado" fill="#2563EB" name="Cobrado" radius={[6, 6, 0, 0]} />
             </BarChart>
           </ResponsiveContainer>
         </div>
@@ -295,13 +295,13 @@ export default function DashboardPage() {
       {/* Filtros */}
       <div className="flex flex-wrap items-center gap-4">
         {/* Toggle Mis planes / Todos (?mios=1 filtra en el API por el vendedor del token) */}
-        <div className="flex border border-neutral-300" role="group" aria-label="Alcance de planes">
+        <div className="flex rounded-lg border border-[#D1D5DB] bg-white" role="group" aria-label="Alcance de planes">
           <button
             type="button"
             onClick={() => actualizarParams({ vista: mios ? null : 'mios' })}
             aria-pressed={mios}
-            className={`px-4 py-2.5 text-xs font-bold uppercase tracking-widest transition-colors duration-150 ${
-              mios ? 'bg-accent text-white' : 'bg-white text-neutral-600 hover:text-neutral-900'
+            className={`rounded-l-lg px-4 py-2.5 text-sm font-medium transition-all duration-100 ease-out ${
+              mios ? 'bg-accent text-white shadow-sm' : 'bg-white text-[#64748B] hover:text-[#111827]'
             }`}
           >
             Mis planes
@@ -310,8 +310,8 @@ export default function DashboardPage() {
             type="button"
             onClick={() => actualizarParams({ vista: mios ? 'todos' : null })}
             aria-pressed={!mios}
-            className={`px-4 py-2.5 text-xs font-bold uppercase tracking-widest transition-colors duration-150 ${
-              mios ? 'bg-white text-neutral-600 hover:text-neutral-900' : 'bg-accent text-white'
+            className={`rounded-r-lg px-4 py-2.5 text-sm font-medium transition-all duration-100 ease-out ${
+              mios ? 'bg-white text-[#64748B] hover:text-[#111827]' : 'bg-accent text-white shadow-sm'
             }`}
           >
             Todos
@@ -326,7 +326,7 @@ export default function DashboardPage() {
           value={busqueda}
           onChange={(e) => actualizarParams({ q: e.target.value })}
           placeholder="Buscar por cliente o unidad…"
-          className="w-64 border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+          className="w-64 rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
         />
         <label htmlFor="filtro-status" className="sr-only">
           Filtrar por status
@@ -335,7 +335,7 @@ export default function DashboardPage() {
           id="filtro-status"
           value={filtroStatus}
           onChange={(e) => actualizarParams({ status: e.target.value === 'TODOS' ? null : e.target.value })}
-          className="border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
         >
           <option value="TODOS">Todos los status</option>
           <option value="ACTIVO">ACTIVO</option>
@@ -349,7 +349,7 @@ export default function DashboardPage() {
           id="filtro-proyecto"
           value={filtroProyecto}
           onChange={(e) => actualizarParams({ proyecto: e.target.value === 'TODOS' ? null : e.target.value })}
-          className="border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
         >
           <option value="TODOS">Todos los proyectos</option>
           {proyectos.map((p) => (
@@ -361,49 +361,49 @@ export default function DashboardPage() {
       </div>
 
       {/* Tabla de planes */}
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
         <table className="w-full text-left text-sm">
           <thead>
-            <tr className="border-b border-neutral-900 text-xs font-bold uppercase tracking-widest text-neutral-500">
-              <th scope="col" className="py-3 pr-4">Cliente</th>
-              <th scope="col" className="py-3 pr-4">Unidad</th>
-              <th scope="col" className="py-3 pr-4">Proyecto</th>
+            <tr className="border-b border-[#E5E7EB] bg-[#F8FAFC] text-xs font-semibold uppercase tracking-wider text-[#64748B]">
+              <th scope="col" className="px-4 py-3">Cliente</th>
+              <th scope="col" className="px-4 py-3">Unidad</th>
+              <th scope="col" className="px-4 py-3">Proyecto</th>
               {encabezadoOrdenable('avance', '% pagado')}
               {encabezadoOrdenable('vencimiento', 'Próx. vencimiento')}
               {encabezadoOrdenable('saldo', 'Saldo', true)}
               {encabezadoOrdenable('atraso', 'Días atraso', true)}
-              <th scope="col" className="py-3">Estado</th>
+              <th scope="col" className="px-4 py-3">Estado</th>
             </tr>
           </thead>
-          <tbody>
+          <tbody className="divide-y divide-[#E5E7EB]">
             {ordenados.map((d) => (
-              <tr key={d.plan.id} className="border-b border-neutral-200 transition-colors duration-150 hover:bg-neutral-50">
-                <td className="py-3 pr-4">
+              <tr key={d.plan.id} className="transition-colors duration-100 ease-out hover:bg-[#F8FAFC]">
+                <td className="px-4 py-3">
                   <Link to={`/planes/${d.plan.id}`} className="font-medium text-accent hover:underline">
                     {d.plan.clienteNombre}
                   </Link>
                 </td>
-                <td className="py-3 pr-4">{d.plan.unidadCodigo}</td>
-                <td className="py-3 pr-4">{d.plan.proyecto}</td>
-                <td className="py-3 pr-4">
+                <td className="px-4 py-3">{d.plan.unidadCodigo}</td>
+                <td className="px-4 py-3">{d.plan.proyecto}</td>
+                <td className="px-4 py-3">
                   <div className="flex items-center gap-2">
-                    <div className="h-1 w-24 bg-neutral-200">
+                    <div className="h-1.5 w-24 rounded-full bg-[#E5E7EB]">
                       <div
-                        className="h-full bg-accent"
+                        className="h-full rounded-full bg-accent"
                         style={{ width: `${Math.min(100, d.avance * 100)}%` }}
                       />
                     </div>
-                    <span className="text-xs text-neutral-500">{formatoPorcentaje(d.avance)}</span>
+                    <span className="text-xs text-[#64748B]">{formatoPorcentaje(d.avance)}</span>
                   </div>
                 </td>
-                <td className="py-3 pr-4">
+                <td className="px-4 py-3">
                   {d.proximo ? formatoFechaCorta(d.proximo.fechaVencimiento) : '—'}
                 </td>
-                <td className="py-3 pr-4 text-right font-medium">{formatoMoneda(d.saldo)}</td>
-                <td className="py-3 pr-4 text-right">
+                <td className="px-4 py-3 text-right font-medium">{formatoMoneda(d.saldo)}</td>
+                <td className="px-4 py-3 text-right">
                   {d.atraso > 0 ? <span className="text-red-700">{d.atraso}</span> : '0'}
                 </td>
-                <td className="py-3">
+                <td className="px-4 py-3">
                   <SemaforoDot valor={d.semaforo} />
                 </td>
               </tr>
diff --git a/apps/cobranza/src/pages/HoyPage.tsx b/apps/cobranza/src/pages/HoyPage.tsx
index bac08b8..c7afa1c 100644
--- a/apps/cobranza/src/pages/HoyPage.tsx
+++ b/apps/cobranza/src/pages/HoyPage.tsx
@@ -36,17 +36,17 @@ export default function HoyPage() {
 
   if (!resultado) {
     return errorCarga ? (
-      <div className="border border-red-300 bg-white px-4 py-3 text-sm text-red-700">{errorCarga}</div>
+      <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{errorCarga}</div>
     ) : (
-      <p className="text-sm text-neutral-400">Cargando...</p>
+      <p className="text-sm text-[#64748B]">Cargando...</p>
     )
   }
 
   return (
-    <div className="space-y-16">
+    <div className="space-y-8">
       <div>
-        <h1 className="text-3xl font-light text-neutral-900">Cobranza del día</h1>
-        <p className="mt-1 text-sm text-neutral-500">
+        <h1 className="text-3xl font-light text-[#111827]">Cobranza del día</h1>
+        <p className="mt-1 text-sm text-[#64748B]">
           Pagos vencidos y vencimientos de los próximos 7 días, en todos los planes activos.
         </p>
         {resultado.origen === 'local' && (
@@ -62,29 +62,29 @@ export default function HoyPage() {
         <KpiCard titulo="Monto por cobrar" valor={formatoMoneda(totalPorCobrar)} />
       </div>
 
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
         <table className="w-full text-left text-sm">
           <thead>
-            <tr className="border-b border-neutral-900 text-xs font-bold uppercase tracking-widest text-neutral-500">
-              <th scope="col" className="py-3 pr-4">Cliente</th>
-              <th scope="col" className="py-3 pr-4">Teléfono</th>
-              <th scope="col" className="py-3 pr-4">Unidad</th>
-              <th scope="col" className="py-3 pr-4"># pago</th>
-              <th scope="col" className="py-3 pr-4">Vencimiento</th>
-              <th scope="col" className="py-3 pr-4 text-right">Monto</th>
-              <th scope="col" className="py-3 pr-4 text-right">Restante</th>
-              <th scope="col" className="py-3 pr-4 text-right">Días atraso</th>
-              <th scope="col" className="py-3">Plan</th>
+            <tr className="border-b border-[#E5E7EB] bg-[#F8FAFC] text-xs font-semibold uppercase tracking-wider text-[#64748B]">
+              <th scope="col" className="px-4 py-3">Cliente</th>
+              <th scope="col" className="px-4 py-3">Teléfono</th>
+              <th scope="col" className="px-4 py-3">Unidad</th>
+              <th scope="col" className="px-4 py-3"># pago</th>
+              <th scope="col" className="px-4 py-3">Vencimiento</th>
+              <th scope="col" className="px-4 py-3 text-right">Monto</th>
+              <th scope="col" className="px-4 py-3 text-right">Restante</th>
+              <th scope="col" className="px-4 py-3 text-right">Días atraso</th>
+              <th scope="col" className="px-4 py-3">Plan</th>
             </tr>
           </thead>
-          <tbody>
+          <tbody className="divide-y divide-[#E5E7EB]">
             {items.map(({ plan, pago, atraso }) => (
               <tr
                 key={`${plan.id}-${pago.id}`}
-                className="border-b border-neutral-200 transition-colors duration-150 hover:bg-neutral-50"
+                className="transition-colors duration-100 ease-out hover:bg-[#F8FAFC]"
               >
-                <td className="py-3 pr-4 font-medium">{plan.clienteNombre}</td>
-                <td className="py-3 pr-4">
+                <td className="px-4 py-3 font-medium">{plan.clienteNombre}</td>
+                <td className="px-4 py-3">
                   {plan.clienteTelefono ? (
                     <a href={`tel:${plan.clienteTelefono.replace(/\s/g, '')}`} className="text-accent hover:underline">
                       {plan.clienteTelefono}
@@ -93,14 +93,14 @@ export default function HoyPage() {
                     <span className="text-neutral-400">—</span>
                   )}
                 </td>
-                <td className="py-3 pr-4">{plan.unidadCodigo}</td>
-                <td className="py-3 pr-4">{pago.numPago}</td>
-                <td className="py-3 pr-4">{formatoFechaCorta(pago.fechaVencimiento)}</td>
-                <td className="py-3 pr-4 text-right">{formatoMoneda(pago.monto)}</td>
-                <td className="py-3 pr-4 text-right font-medium">
+                <td className="px-4 py-3">{plan.unidadCodigo}</td>
+                <td className="px-4 py-3">{pago.numPago}</td>
+                <td className="px-4 py-3">{formatoFechaCorta(pago.fechaVencimiento)}</td>
+                <td className="px-4 py-3 text-right">{formatoMoneda(pago.monto)}</td>
+                <td className="px-4 py-3 text-right font-medium">
                   {formatoMoneda(round2(pago.monto - pago.montoPagado))}
                 </td>
-                <td className="py-3 pr-4 text-right">
+                <td className="px-4 py-3 text-right">
                   {atraso > 0 ? (
                     <span className="font-medium text-red-700">{atraso}</span>
                   ) : (
@@ -109,7 +109,7 @@ export default function HoyPage() {
                     </span>
                   )}
                 </td>
-                <td className="py-3">
+                <td className="px-4 py-3">
                   <Link to={`/planes/${plan.id}`} className="text-accent hover:underline">
                     Ver plan
                   </Link>
diff --git a/apps/cobranza/src/pages/NuevoPlanPage.tsx b/apps/cobranza/src/pages/NuevoPlanPage.tsx
index c9620d5..80f7668 100644
--- a/apps/cobranza/src/pages/NuevoPlanPage.tsx
+++ b/apps/cobranza/src/pages/NuevoPlanPage.tsx
@@ -37,9 +37,9 @@ const esquema = z.object({
 type NuevoPlanForm = z.infer<typeof esquema>
 
 const claseInput =
-  'mt-1 w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none'
+  'mt-1 w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
 const claseError = 'mt-1 text-xs text-red-700'
-const claseLabel = 'block text-xs font-bold uppercase tracking-widest text-neutral-500'
+const claseLabel = 'block text-xs font-medium text-[#4B5563]'
 
 export default function NuevoPlanPage() {
   const navigate = useNavigate()
@@ -88,11 +88,11 @@ export default function NuevoPlanPage() {
   }
 
   return (
-    <div className="mx-auto max-w-3xl space-y-16">
-      <h1 className="text-3xl font-light text-neutral-900">Nuevo plan de enganche</h1>
+    <div className="mx-auto max-w-3xl space-y-8">
+      <h1 className="text-3xl font-light text-[#111827]">Nuevo plan de enganche</h1>
 
       <form
-        className="border border-neutral-200 bg-white p-8"
+        className="rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm"
         onSubmit={(e) => {
           void handleSubmit(guardar)(e)
         }}
@@ -176,14 +176,14 @@ export default function NuevoPlanPage() {
 
         {/* Vista previa del calendario */}
         {vistaPrevia && (
-          <div className="mt-8 border border-neutral-200 bg-white p-6">
-            <h2 className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <div className="mt-8 rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] p-6">
+            <h2 className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
               Vista previa — {vistaPrevia.pagos.length} pagos de {formatoMoneda(vistaPrevia.mensualidad)}
             </h2>
             <div className="mt-4 max-h-48 overflow-y-auto">
               <table className="w-full text-left text-xs">
-                <thead className="text-neutral-500">
-                  <tr className="border-b border-neutral-900">
+                <thead className="text-[#64748B]">
+                  <tr className="border-b border-[#D1D5DB]">
                     <th scope="col" className="py-1">#</th>
                     <th scope="col" className="py-1">Vencimiento</th>
                     <th scope="col" className="py-1 text-right">Monto</th>
@@ -191,7 +191,7 @@ export default function NuevoPlanPage() {
                 </thead>
                 <tbody>
                   {vistaPrevia.pagos.map((p) => (
-                    <tr key={p.numPago} className="border-b border-neutral-200">
+                    <tr key={p.numPago} className="border-b border-[#E5E7EB]">
                       <td className="py-1">{p.numPago}</td>
                       <td className="py-1">{formatoFechaCorta(p.fechaVencimiento)}</td>
                       <td className="py-1 text-right">{formatoMoneda(p.monto)}</td>
@@ -208,14 +208,14 @@ export default function NuevoPlanPage() {
           <button
             type="button"
             onClick={() => void navigate('/')}
-            className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+            className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
           >
             Cancelar
           </button>
           <button
             type="submit"
             disabled={guardando}
-            className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:opacity-90 disabled:opacity-40"
+            className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-40"
           >
             {guardando ? 'Guardando…' : 'Guardar plan'}
           </button>
diff --git a/apps/cobranza/src/pages/PlanDetallePage.tsx b/apps/cobranza/src/pages/PlanDetallePage.tsx
index bac5ef0..c8d6a59 100644
--- a/apps/cobranza/src/pages/PlanDetallePage.tsx
+++ b/apps/cobranza/src/pages/PlanDetallePage.tsx
@@ -63,17 +63,17 @@ export default function PlanDetallePage() {
   }, [id])
 
   if (cargando) {
-    return <p className="text-sm text-neutral-400">Cargando...</p>
+    return <p className="text-sm text-[#64748B]">Cargando...</p>
   }
 
   if (errorCarga) {
-    return <div className="border border-red-300 bg-white px-4 py-3 text-sm text-red-700">{errorCarga}</div>
+    return <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{errorCarga}</div>
   }
 
   if (!plan) {
     return (
-      <div className="border border-neutral-200 bg-white p-16 text-center">
-        <p className="text-neutral-500">Plan no encontrado.</p>
+      <div className="rounded-xl border border-[#E5E7EB] bg-white p-16 text-center shadow-sm">
+        <p className="text-[#64748B]">Plan no encontrado.</p>
         <Link to="/" className="mt-4 inline-block text-accent hover:underline">
           Volver al dashboard
         </Link>
@@ -134,19 +134,19 @@ export default function PlanDetallePage() {
   }
 
   return (
-    <div className="space-y-16">
+    <div className="space-y-8">
       <div className="flex flex-wrap items-start justify-between gap-6">
         <div>
           <Link to="/" className="text-sm text-accent hover:underline">
             ← Volver al dashboard
           </Link>
-          <h1 className="mt-2 text-3xl font-light text-neutral-900">{plan.clienteNombre}</h1>
-          <p className="mt-1 text-sm text-neutral-500">
+          <h1 className="mt-2 text-3xl font-light text-[#111827]">{plan.clienteNombre}</h1>
+          <p className="mt-1 text-sm text-[#64748B]">
             {plan.unidadCodigo} · {plan.proyecto} · Venta {plan.ventaRef || '—'} ·{' '}
-            <span className="font-bold text-neutral-900">{status}</span>
+            <span className="font-semibold text-[#111827]">{status}</span>
             {atraso > 0 && <span className="text-red-700"> · {atraso} días de atraso</span>}
           </p>
-          <p className="mt-1 text-sm text-neutral-500">
+          <p className="mt-1 text-sm text-[#64748B]">
             Tel. {plan.clienteTelefono || '—'}
             {tasaMora > 0 && <span> · Mora {tasaMora}% mensual</span>}
           </p>
@@ -154,14 +154,14 @@ export default function PlanDetallePage() {
         <div className="flex gap-3">
           <button
             onClick={() => descargar(plan)}
-            className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+            className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
           >
             Estado de cuenta PDF
           </button>
           {status === 'ACTIVO' && saldo > 0 && (
             <button
               onClick={cancelar}
-              className="border border-red-300 bg-white px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-red-700 transition-colors duration-150 hover:bg-red-700 hover:text-white"
+              className="rounded-lg border border-red-600 bg-white px-5 py-2.5 text-sm font-medium text-red-600 transition-all duration-100 ease-out hover:bg-red-600 hover:text-white"
             >
               Cancelar plan
             </button>
@@ -176,7 +176,7 @@ export default function PlanDetallePage() {
       )}
 
       {error && (
-        <div className="border border-red-300 bg-white px-4 py-3 text-sm text-red-700">{error}</div>
+        <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>
       )}
 
       {/* KPIs del plan */}
@@ -196,22 +196,22 @@ export default function PlanDetallePage() {
       </div>
 
       {/* Tabla de pagos */}
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
         <table className="w-full text-left text-sm">
           <thead>
-            <tr className="border-b border-neutral-900 text-xs font-bold uppercase tracking-widest text-neutral-500">
-              <th scope="col" className="py-3 pr-4">#</th>
-              <th scope="col" className="py-3 pr-4">Vencimiento</th>
-              <th scope="col" className="py-3 pr-4 text-right">Monto</th>
-              <th scope="col" className="py-3 pr-4 text-right">Pagado</th>
-              <th scope="col" className="py-3 pr-4 text-right">Restante</th>
-              {tasaMora > 0 && <th scope="col" className="py-3 pr-4 text-right">Mora</th>}
-              <th scope="col" className="py-3 pr-4">Status</th>
-              <th scope="col" className="py-3 pr-4">Abonos</th>
-              <th scope="col" className="py-3" />
+            <tr className="border-b border-[#E5E7EB] bg-[#F8FAFC] text-xs font-semibold uppercase tracking-wider text-[#64748B]">
+              <th scope="col" className="px-4 py-3">#</th>
+              <th scope="col" className="px-4 py-3">Vencimiento</th>
+              <th scope="col" className="px-4 py-3 text-right">Monto</th>
+              <th scope="col" className="px-4 py-3 text-right">Pagado</th>
+              <th scope="col" className="px-4 py-3 text-right">Restante</th>
+              {tasaMora > 0 && <th scope="col" className="px-4 py-3 text-right">Mora</th>}
+              <th scope="col" className="px-4 py-3">Status</th>
+              <th scope="col" className="px-4 py-3">Abonos</th>
+              <th scope="col" className="px-4 py-3" />
             </tr>
           </thead>
-          <tbody>
+          <tbody className="divide-y divide-[#E5E7EB]">
             {plan.pagos.map((pago) => {
               const st = statusPago(pago, hoy)
               const restante = round2(pago.monto - pago.montoPagado)
@@ -219,14 +219,14 @@ export default function PlanDetallePage() {
               const expandido = expandidos.has(pago.id)
               return (
                 <Fragment key={pago.id}>
-                  <tr className="border-b border-neutral-200 transition-colors duration-150 hover:bg-neutral-50">
-                    <td className="py-3 pr-4 font-medium">{pago.numPago}</td>
-                    <td className="py-3 pr-4">{formatoFechaCorta(pago.fechaVencimiento)}</td>
-                    <td className="py-3 pr-4 text-right">{formatoMoneda(pago.monto)}</td>
-                    <td className="py-3 pr-4 text-right">{formatoMoneda(pago.montoPagado)}</td>
-                    <td className="py-3 pr-4 text-right font-medium">{formatoMoneda(restante)}</td>
+                  <tr className="transition-colors duration-100 ease-out hover:bg-[#F8FAFC]">
+                    <td className="px-4 py-3 font-medium">{pago.numPago}</td>
+                    <td className="px-4 py-3">{formatoFechaCorta(pago.fechaVencimiento)}</td>
+                    <td className="px-4 py-3 text-right">{formatoMoneda(pago.monto)}</td>
+                    <td className="px-4 py-3 text-right">{formatoMoneda(pago.montoPagado)}</td>
+                    <td className="px-4 py-3 text-right font-medium">{formatoMoneda(restante)}</td>
                     {tasaMora > 0 && (
-                      <td className="py-3 pr-4 text-right">
+                      <td className="px-4 py-3 text-right">
                         {moraPago > 0 ? (
                           <span className="text-red-700">{formatoMoneda(moraPago)}</span>
                         ) : (
@@ -234,10 +234,10 @@ export default function PlanDetallePage() {
                         )}
                       </td>
                     )}
-                    <td className="py-3 pr-4">
+                    <td className="px-4 py-3">
                       <BadgeStatus status={st} />
                     </td>
-                    <td className="py-3 pr-4">
+                    <td className="px-4 py-3">
                       {pago.aplicaciones.length > 0 ? (
                         <button
                           onClick={() => toggleExpandido(pago.id)}
@@ -249,11 +249,11 @@ export default function PlanDetallePage() {
                         <span className="text-neutral-400">—</span>
                       )}
                     </td>
-                    <td className="py-3 text-right">
+                    <td className="px-4 py-3 text-right">
                       {st !== 'PAGADO' && status === 'ACTIVO' && (
                         <button
                           onClick={() => setPagoAbono(pago)}
-                          className="bg-accent px-4 py-2 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:opacity-90"
+                          className="rounded-lg bg-accent px-4 py-2 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
                         >
                           Registrar abono
                         </button>
@@ -261,11 +261,11 @@ export default function PlanDetallePage() {
                     </td>
                   </tr>
                   {expandido && (
-                    <tr className="border-b border-neutral-200 bg-neutral-50">
+                    <tr className="bg-[#F8FAFC]">
                       <td colSpan={tasaMora > 0 ? 9 : 8} className="px-4 py-4">
                         <table className="w-full text-xs">
                           <thead>
-                            <tr className="text-left font-bold uppercase tracking-widest text-neutral-500">
+                            <tr className="text-left font-semibold uppercase tracking-wider text-[#64748B]">
                               <th scope="col" className="py-1">Fecha</th>
                               <th scope="col" className="py-1 text-right">Monto</th>
                               <th scope="col" className="py-1">Referencia</th>
@@ -274,7 +274,7 @@ export default function PlanDetallePage() {
                           </thead>
                           <tbody>
                             {pago.aplicaciones.map((a) => (
-                              <tr key={a.id} className="border-t border-neutral-200">
+                              <tr key={a.id} className="border-t border-[#E5E7EB]">
                                 <td className="py-1">{formatoFechaCorta(a.fechaPago)}</td>
                                 <td className="py-1 text-right">{formatoMoneda(a.monto)}</td>
                                 <td className="py-1">{a.referencia}</td>
@@ -302,19 +302,19 @@ export default function PlanDetallePage() {
       </div>
 
       {/* Bitácora del plan */}
-      <section className="border border-neutral-200 bg-white p-8" aria-labelledby="titulo-bitacora">
-        <h2 id="titulo-bitacora" className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+      <section className="rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm" aria-labelledby="titulo-bitacora">
+        <h2 id="titulo-bitacora" className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
           Bitácora
         </h2>
         {(plan.notas ?? []).length === 0 ? (
-          <p className="mt-6 text-sm text-neutral-500">Sin notas registradas.</p>
+          <p className="mt-6 text-sm text-[#64748B]">Sin notas registradas.</p>
         ) : (
           <ul className="mt-6 space-y-4">
             {[...(plan.notas ?? [])]
               .sort((a, b) => b.fecha.localeCompare(a.fecha))
               .map((nota) => (
-                <li key={nota.id} className="border-l-2 border-neutral-200 pl-4">
-                  <p className="text-xs text-neutral-500">
+                <li key={nota.id} className="border-l-2 border-[#E5E7EB] pl-4">
+                  <p className="text-xs text-[#64748B]">
                     {new Date(nota.fecha).toLocaleString('es-MX', {
                       day: '2-digit',
                       month: '2-digit',
@@ -323,7 +323,7 @@ export default function PlanDetallePage() {
                       minute: '2-digit',
                     })}
                   </p>
-                  <p className="mt-1 text-sm text-neutral-900">{nota.texto}</p>
+                  <p className="mt-1 text-sm text-[#111827]">{nota.texto}</p>
                 </li>
               ))}
           </ul>
@@ -337,7 +337,7 @@ export default function PlanDetallePage() {
         >
           <label
             htmlFor="nota-texto"
-            className="block text-xs font-bold uppercase tracking-widest text-neutral-500"
+            className="block text-xs font-medium text-[#4B5563]"
           >
             Nueva nota
           </label>
@@ -347,14 +347,14 @@ export default function PlanDetallePage() {
             onChange={(e) => setNotaTexto(e.target.value)}
             rows={3}
             placeholder="Gestión realizada, acuerdos con el cliente…"
-            className="mt-1 w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+            className="mt-1 w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
           />
           {errorNota && <p className="mt-1 text-xs text-red-700">{errorNota}</p>}
           <div className="mt-4 flex justify-end">
             <button
               type="submit"
               disabled={notaTexto.trim().length < 3}
-              className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:opacity-90 disabled:opacity-40"
+              className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-40"
             >
               Agregar nota
             </button>
@@ -365,7 +365,7 @@ export default function PlanDetallePage() {
       {status === 'CANCELADO' && (
         <button
           onClick={() => void navigate('/')}
-          className="border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
         >
           Volver
         </button>
diff --git a/apps/cotizador/index.html b/apps/cotizador/index.html
index 26e8784..824e49c 100644
--- a/apps/cotizador/index.html
+++ b/apps/cotizador/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#1B4332" />
+    <meta name="theme-color" content="#2563EB" />
     <link rel="manifest" href="/quote/manifest.webmanifest" />
     <link rel="apple-touch-icon" href="/quote/icons/icon-192.png" />
     <title>FRASA Desarrollos — Cotizador</title>
diff --git a/apps/cotizador/public/manifest.webmanifest b/apps/cotizador/public/manifest.webmanifest
index 9d10068..55712cb 100644
--- a/apps/cotizador/public/manifest.webmanifest
+++ b/apps/cotizador/public/manifest.webmanifest
@@ -5,7 +5,7 @@
   "scope": "/quote/",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#1B4332",
+  "theme_color": "#2563EB",
   "icons": [
     { "src": "/quote/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
     { "src": "/quote/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
diff --git a/apps/cotizador/src/components/AuthGate.tsx b/apps/cotizador/src/components/AuthGate.tsx
index baba256..535a552 100644
--- a/apps/cotizador/src/components/AuthGate.tsx
+++ b/apps/cotizador/src/components/AuthGate.tsx
@@ -17,17 +17,17 @@ export default function AuthGate({ children }: { children: ReactNode }) {
   }
 
   return (
-    <div className="min-h-screen bg-white text-neutral-900">
-      <div className="border-b border-neutral-200">
+    <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
+      <div className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
-          <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <span className="text-xs font-medium text-[#64748B]">
             {sesion.usuario.nombre} · {sesion.usuario.rol}
           </span>
           <div className="flex items-center gap-4">
             <button
               type="button"
               onClick={() => setModalPassword(true)}
-              className="text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
+              className="text-xs font-medium text-[#64748B] transition-colors duration-100 hover:text-[#111827]"
             >
               Contraseña
             </button>
@@ -37,7 +37,7 @@ export default function AuthGate({ children }: { children: ReactNode }) {
                 logout()
                 setSesion(null)
               }}
-              className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
+              className="text-xs font-medium text-accent transition-colors duration-100 hover:text-accent-hover"
             >
               Salir
             </button>
diff --git a/apps/cotizador/src/components/CambiarPasswordModal.tsx b/apps/cotizador/src/components/CambiarPasswordModal.tsx
index 1be9e05..7d9a95d 100644
--- a/apps/cotizador/src/components/CambiarPasswordModal.tsx
+++ b/apps/cotizador/src/components/CambiarPasswordModal.tsx
@@ -3,8 +3,8 @@ import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
 import { cambiarPassword } from '../services/auth'
 
 const CLASE_INPUT =
-  'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
-const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none'
+const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563]'
 
 /**
  * Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
@@ -45,19 +45,19 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
       aria-modal="true"
       aria-label="Cambiar contraseña"
     >
-      <div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
-        <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
+      <div className="w-full max-w-sm rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-xl">
+        <h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
           Cambiar contraseña
         </h2>
         {exito ? (
           <>
-            <p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
+            <p className="rounded-lg bg-green-50 px-4 py-3 text-xs font-medium text-green-700">
               Contraseña actualizada
             </p>
             <button
               type="button"
               onClick={onCerrar}
-              className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
+              className="mt-6 w-full rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
             >
               Cerrar
             </button>
@@ -92,7 +92,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
                 required
                 className={CLASE_INPUT}
               />
-              <p className="mt-2 text-xs text-neutral-400">Mínimo 8 caracteres y un número</p>
+              <p className="mt-2 text-xs text-[#64748B]">Mínimo 8 caracteres y un número</p>
             </div>
             <div>
               <label htmlFor="password-confirmar" className={CLASE_LABEL}>
@@ -111,7 +111,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
             {error && (
               <p
                 role="alert"
-                className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+                className="rounded-lg bg-red-50 px-4 py-3 text-xs font-medium text-red-700"
               >
                 {error}
               </p>
@@ -120,14 +120,14 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
               <button
                 type="submit"
                 disabled={cargando}
-                className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+                className="flex-1 rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
               >
                 {cargando ? 'Guardando…' : 'Guardar'}
               </button>
               <button
                 type="button"
                 onClick={onCerrar}
-                className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
+                className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
               >
                 Cancelar
               </button>
diff --git a/apps/cotizador/src/components/ComparadorPropuestas.tsx b/apps/cotizador/src/components/ComparadorPropuestas.tsx
index 11a5415..35c66db 100644
--- a/apps/cotizador/src/components/ComparadorPropuestas.tsx
+++ b/apps/cotizador/src/components/ComparadorPropuestas.tsx
@@ -76,7 +76,7 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
       <div className="flex flex-wrap items-center justify-between gap-4">
         <h2
           id="comparador-titulo"
-          className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
+          className="text-xs font-semibold uppercase tracking-wider text-[#64748B]"
         >
           Comparar propuestas
         </h2>
@@ -85,18 +85,18 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
           aria-expanded={abierto}
           aria-controls="comparador-contenido"
           onClick={() => setAbierto((v) => !v)}
-          className="border border-neutral-900 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-100"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
         >
           {abierto ? 'Ocultar comparación' : 'Comparar propuestas'}
         </button>
       </div>
 
       {abierto && (
-        <div id="comparador-contenido" className="mt-6 border border-neutral-200 bg-white p-6">
+        <div id="comparador-contenido" className="mt-6 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
           <div className="overflow-x-auto">
             <table className="w-full min-w-[720px] border-collapse text-sm">
               <thead>
-                <tr>
+                <tr className="bg-[#F8FAFC]">
                   <th scope="col" className="w-48 p-3 text-left align-bottom">
                     <span className="sr-only">Concepto</span>
                   </th>
@@ -106,11 +106,11 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
                       scope="col"
                       className={`p-3 text-right align-bottom ${bordeColumna(i, 'inicio')}`}
                     >
-                      <span className="block text-xs font-bold tracking-widest text-neutral-900 uppercase">
+                      <span className="block text-xs font-semibold uppercase tracking-wider text-[#111827]">
                         {titulos[i] ?? p.tipo}
                       </span>
                       {i === ganador && (
-                        <span className="mt-2 inline-block border border-accent px-2 py-0.5 text-xs font-bold tracking-widest text-accent uppercase">
+                        <span className="mt-2 inline-block rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
                           Menor total
                         </span>
                       )}
@@ -120,20 +120,20 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
               </thead>
               <tbody>
                 {filas.map((fila, indiceFila) => (
-                  <tr key={fila.etiqueta}>
+                  <tr key={fila.etiqueta} className="hover:bg-[#F8FAFC]">
                     <th
                       scope="row"
-                      className="border-t border-neutral-200 p-3 text-left text-xs font-bold tracking-widest text-neutral-500 uppercase"
+                      className="border-t border-[#E5E7EB] p-3 text-left text-xs font-medium text-[#64748B]"
                     >
                       {fila.etiqueta}
                     </th>
                     {propuestas.map((p, i) => (
                       <td
                         key={p.tipo}
-                        className={`border-t border-neutral-200 p-3 text-right whitespace-nowrap ${
+                        className={`border-t border-[#E5E7EB] p-3 text-right whitespace-nowrap ${
                           fila.destacada
-                            ? `font-bold ${i === ganador ? 'text-accent' : 'text-neutral-900'}`
-                            : 'font-light text-neutral-900'
+                            ? `font-semibold ${i === ganador ? 'text-accent' : 'text-[#111827]'}`
+                            : 'text-[#111827]'
                         } ${bordeColumna(
                           i,
                           indiceFila === filas.length - 1 ? 'fin' : 'media',
@@ -147,7 +147,7 @@ export function ComparadorPropuestas({ precioLista, apartado, propuestas, titulo
               </tbody>
             </table>
           </div>
-          <p className="mt-6 text-xs text-neutral-400">
+          <p className="mt-6 text-xs text-[#64748B]">
             El enganche ya incluye la deducción del apartado. El total pagado suma apartado +
             enganche + mensualidades + pago final.
           </p>
diff --git a/apps/cotizador/src/components/ComparadorUnidades.tsx b/apps/cotizador/src/components/ComparadorUnidades.tsx
index 042275e..b5c0d43 100644
--- a/apps/cotizador/src/components/ComparadorUnidades.tsx
+++ b/apps/cotizador/src/components/ComparadorUnidades.tsx
@@ -71,14 +71,14 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
 
   const selector = (id: string, valor: string, onChange: (v: string) => void, etiqueta: string) => (
     <div>
-      <label htmlFor={id} className="mb-2 block text-xs font-bold tracking-widest text-neutral-500 uppercase">
+      <label htmlFor={id} className="mb-2 block text-xs font-medium text-[#4B5563]">
         {etiqueta}
       </label>
       <select
         id={id}
         value={valor}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+        className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
       >
         <option value="">Selecciona una unidad…</option>
         {LISTA_DESARROLLOS.map((dev) => {
@@ -103,7 +103,7 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
       <div className="flex flex-wrap items-center justify-between gap-4">
         <h2
           id="comparador-unidades-titulo"
-          className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
+          className="text-xs font-semibold uppercase tracking-wider text-[#64748B]"
         >
           Comparar unidades
         </h2>
@@ -112,28 +112,28 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
           aria-expanded={abierto}
           aria-controls="comparador-unidades-contenido"
           onClick={() => setAbierto((v) => !v)}
-          className="border border-neutral-900 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-100"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
         >
           {abierto ? 'Ocultar comparación' : 'Comparar 2 unidades'}
         </button>
       </div>
 
       {abierto && (
-        <div id="comparador-unidades-contenido" className="mt-6 border border-neutral-200 bg-white p-6">
+        <div id="comparador-unidades-contenido" className="mt-6 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
           <div className="grid gap-6 md:grid-cols-2">
             {selector('comparador-a', codigoA, setCodigoA, 'Unidad A')}
             {selector('comparador-b', codigoB, setCodigoB, 'Unidad B')}
           </div>
 
           {!comparacion ? (
-            <p className="mt-6 text-sm text-neutral-500">
+            <p className="mt-6 text-sm text-[#64748B]">
               Selecciona dos unidades para ver la comparación lado a lado.
             </p>
           ) : (
             <div className="mt-6 overflow-x-auto">
               <table className="w-full min-w-[480px] border-collapse text-sm">
                 <thead>
-                  <tr>
+                  <tr className="bg-[#F8FAFC]">
                     <th scope="col" className="w-48 p-3 text-left">
                       <span className="sr-only">Concepto</span>
                     </th>
@@ -141,7 +141,7 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
                       <th
                         key={`${c.desarrolloId}|${c.unidad.codigo}`}
                         scope="col"
-                        className="p-3 text-right text-xs font-bold tracking-widest text-neutral-900 uppercase"
+                        className="p-3 text-right text-xs font-semibold uppercase tracking-wider text-[#111827]"
                       >
                         {c.unidad.codigo}
                       </th>
@@ -150,18 +150,18 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
                 </thead>
                 <tbody>
                   {filas.map((fila) => (
-                    <tr key={fila.etiqueta}>
+                    <tr key={fila.etiqueta} className="hover:bg-[#F8FAFC]">
                       <th
                         scope="row"
-                        className="border-t border-neutral-200 p-3 text-left text-xs font-bold tracking-widest text-neutral-500 uppercase"
+                        className="border-t border-[#E5E7EB] p-3 text-left text-xs font-medium text-[#64748B]"
                       >
                         {fila.etiqueta}
                       </th>
                       {[comparacion.a, comparacion.b].map((c) => (
                         <td
                           key={`${c.desarrolloId}|${c.unidad.codigo}`}
-                          className={`border-t border-neutral-200 p-3 text-right whitespace-nowrap ${
-                            fila.destacada ? 'font-bold text-accent' : 'font-light text-neutral-900'
+                          className={`border-t border-[#E5E7EB] p-3 text-right whitespace-nowrap ${
+                            fila.destacada ? 'font-semibold text-accent' : 'text-[#111827]'
                           }`}
                         >
                           {fila.obtener(c)}
@@ -171,7 +171,7 @@ export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props
                   ))}
                 </tbody>
               </table>
-              <p className="mt-6 text-xs text-neutral-400">
+              <p className="mt-6 text-xs text-[#64748B]">
                 Cada unidad se calcula con los parámetros de su desarrollo y el mismo apartado.
                 El enganche ya incluye la deducción del apartado.
               </p>
diff --git a/apps/cotizador/src/components/LoginScreen.tsx b/apps/cotizador/src/components/LoginScreen.tsx
index b19fcbb..8e7b15c 100644
--- a/apps/cotizador/src/components/LoginScreen.tsx
+++ b/apps/cotizador/src/components/LoginScreen.tsx
@@ -1,7 +1,7 @@
 import { useState, type FormEvent } from 'react'
 import { login, ErrorLogin, type UsuarioSesion } from '../services/auth'
 
-/** Pantalla de login StudioBlank: marca FRASA, usuario + contraseña, Enter envía */
+/** Pantalla de login NovaSpark: marca FRASA, usuario + contraseña, Enter envía */
 export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSesion) => void }) {
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
@@ -22,11 +22,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-4">
-      <div className="w-full max-w-sm">
-        <div className="mb-10 text-center">
-          <p className="text-lg font-bold tracking-widest">FRASA</p>
-          <p className="mt-2 text-xs font-bold uppercase tracking-widest text-neutral-500">
+    <div className="flex min-h-screen items-center justify-center bg-[#F8FAFC] px-4">
+      <div className="w-full max-w-sm rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm">
+        <div className="mb-8 text-center">
+          <p className="text-lg font-bold tracking-wide">
+            FRASA<span className="text-[#F97316]">.</span>
+          </p>
+          <p className="mt-2 text-xs font-medium text-[#64748B]">
             Acceso al ecosistema
           </p>
         </div>
@@ -34,7 +36,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <div>
             <label
               htmlFor="login-usuario"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Usuario
             </label>
@@ -46,13 +48,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               autoComplete="username"
               autoFocus
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
             />
           </div>
           <div>
             <label
               htmlFor="login-password"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Contraseña
             </label>
@@ -63,13 +65,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               onChange={(e) => setPassword(e.target.value)}
               autoComplete="current-password"
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
             />
           </div>
           {error && (
             <p
               role="alert"
-              className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+              className="rounded-lg bg-red-50 px-4 py-3 text-xs font-medium text-red-700"
             >
               {error}
             </p>
@@ -77,7 +79,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <button
             type="submit"
             disabled={cargando}
-            className="w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+            className="w-full rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
           >
             {cargando ? 'Entrando…' : 'Entrar'}
           </button>
diff --git a/apps/cotizador/src/components/MisCotizaciones.tsx b/apps/cotizador/src/components/MisCotizaciones.tsx
index 2449a01..48a4cdb 100644
--- a/apps/cotizador/src/components/MisCotizaciones.tsx
+++ b/apps/cotizador/src/components/MisCotizaciones.tsx
@@ -36,7 +36,7 @@ export function MisCotizaciones({ cotizaciones, cargando, error, onRetomar }: Pr
       <div className="flex flex-wrap items-center justify-between gap-4">
         <h2
           id="mis-cotizaciones-titulo"
-          className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
+          className="text-xs font-semibold uppercase tracking-wider text-[#64748B]"
         >
           Mis cotizaciones
         </h2>
@@ -45,18 +45,18 @@ export function MisCotizaciones({ cotizaciones, cargando, error, onRetomar }: Pr
           aria-expanded={abierto}
           aria-controls="mis-cotizaciones-contenido"
           onClick={() => setAbierto((v) => !v)}
-          className="border border-neutral-900 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-100"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
         >
           {abierto ? 'Ocultar historial' : `Ver historial (${cotizaciones.length})`}
         </button>
       </div>
 
       {abierto && (
-        <div id="mis-cotizaciones-contenido" className="mt-6 border border-neutral-200 bg-white p-6">
-          {cargando && <p className="text-sm text-neutral-500">Cargando historial…</p>}
+        <div id="mis-cotizaciones-contenido" className="mt-6 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
+          {cargando && <p className="text-sm text-[#64748B]">Cargando historial…</p>}
           {error && <p className="text-xs text-red-700">{error}</p>}
           {!cargando && !error && cotizaciones.length === 0 && (
-            <p className="text-sm text-neutral-500">
+            <p className="text-sm text-[#64748B]">
               Aún no tienes cotizaciones guardadas. Se guardan al generar el PDF.
             </p>
           )}
@@ -64,13 +64,13 @@ export function MisCotizaciones({ cotizaciones, cargando, error, onRetomar }: Pr
             <div className="overflow-x-auto">
               <table className="w-full min-w-[640px] border-collapse text-sm">
                 <thead>
-                  <tr>
+                  <tr className="bg-[#F8FAFC]">
                     {['Fecha', 'Folio', 'Cliente', 'Unidad', 'Propuesta', 'Precio final', ''].map(
                       (h) => (
                         <th
                           key={h}
                           scope="col"
-                          className="p-3 text-left text-xs font-bold tracking-widest text-neutral-500 uppercase"
+                          className="p-3 text-left text-xs font-semibold uppercase tracking-wider text-[#64748B]"
                         >
                           {h}
                         </th>
@@ -80,36 +80,36 @@ export function MisCotizaciones({ cotizaciones, cargando, error, onRetomar }: Pr
                 </thead>
                 <tbody>
                   {cotizaciones.map((c) => (
-                    <tr key={c.id}>
-                      <td className="border-t border-neutral-200 p-3 whitespace-nowrap">
+                    <tr key={c.id} className="hover:bg-[#F8FAFC]">
+                      <td className="border-t border-[#E5E7EB] p-3 whitespace-nowrap">
                         {formatoFechaHora(c.createdAt)}
                       </td>
-                      <td className="border-t border-neutral-200 p-3 whitespace-nowrap">
+                      <td className="border-t border-[#E5E7EB] p-3 whitespace-nowrap">
                         {c.folio ?? '—'}
                       </td>
-                      <td className="border-t border-neutral-200 p-3">{c.clienteNombre}</td>
-                      <td className="border-t border-neutral-200 p-3 whitespace-nowrap">
+                      <td className="border-t border-[#E5E7EB] p-3">{c.clienteNombre}</td>
+                      <td className="border-t border-[#E5E7EB] p-3 whitespace-nowrap">
                         {c.unidadCodigo}
-                        <span className="ml-1 text-xs text-neutral-400">{c.desarrollo}</span>
+                        <span className="ml-1 text-xs text-[#64748B]">{c.desarrollo}</span>
                       </td>
-                      <td className="border-t border-neutral-200 p-3 whitespace-nowrap">
+                      <td className="border-t border-[#E5E7EB] p-3 whitespace-nowrap">
                         {TITULO_PROPUESTA[c.tipoPropuesta] ?? c.tipoPropuesta}
                       </td>
-                      <td className="border-t border-neutral-200 p-3 text-right whitespace-nowrap">
+                      <td className="border-t border-[#E5E7EB] p-3 text-right whitespace-nowrap">
                         {formatoMoneda(c.precioFinal)}
                       </td>
-                      <td className="border-t border-neutral-200 p-3 text-right">
+                      <td className="border-t border-[#E5E7EB] p-3 text-right">
                         <div className="flex justify-end gap-2">
                           <button
                             type="button"
                             onClick={() => onRetomar(c)}
-                            className="border border-accent bg-white px-3 py-1.5 text-xs font-bold tracking-widest text-accent uppercase transition-colors duration-150 hover:bg-accent hover:text-white"
+                            className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white"
                           >
                             Retomar
                           </button>
                           <a
                             href={`/client/?cotizacion=${c.id}`}
-                            className="border border-neutral-900 bg-white px-3 py-1.5 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+                            className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
                           >
                             Iniciar alta
                           </a>
diff --git a/apps/cotizador/src/components/ModalCliente.tsx b/apps/cotizador/src/components/ModalCliente.tsx
index ced99ef..c48230e 100644
--- a/apps/cotizador/src/components/ModalCliente.tsx
+++ b/apps/cotizador/src/components/ModalCliente.tsx
@@ -12,8 +12,8 @@ interface Props {
 }
 
 const campoInput =
-  'w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none'
-const etiquetaCampo = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none'
+const etiquetaCampo = 'mb-2 block text-xs font-medium text-[#4B5563]'
 
 /**
  * Modal sencillo para pedir los datos del cliente cuando se va a
@@ -55,14 +55,14 @@ export function ModalCliente({ abierto, nombreInicial = '', telefonoInicial = ''
       aria-modal="true"
       aria-labelledby="modal-cliente-titulo"
     >
-      <div className="w-full max-w-md border border-neutral-200 bg-white p-6">
+      <div className="w-full max-w-md rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-xl">
         <h2
           id="modal-cliente-titulo"
-          className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
+          className="text-xs font-semibold uppercase tracking-wider text-[#64748B]"
         >
           Datos del cliente
         </h2>
-        <p className="mt-2 text-sm text-neutral-600">
+        <p className="mt-2 text-sm text-[#4B5563]">
           Se necesitan para guardar la cotización y generar el PDF.
         </p>
 
@@ -113,14 +113,14 @@ export function ModalCliente({ abierto, nombreInicial = '', telefonoInicial = ''
           <button
             type="button"
             onClick={onCancelar}
-            className="border border-neutral-300 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-600 uppercase transition-colors duration-150 hover:bg-neutral-100"
+            className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
           >
             Cancelar
           </button>
           <button
             type="button"
             onClick={aceptar}
-            className="bg-accent px-5 py-2.5 text-xs font-bold tracking-widest text-white uppercase transition-colors duration-150 hover:bg-accent-hover"
+            className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
           >
             Continuar
           </button>
diff --git a/apps/cotizador/src/components/ProposalCard.tsx b/apps/cotizador/src/components/ProposalCard.tsx
index 88e429d..f92bf19 100644
--- a/apps/cotizador/src/components/ProposalCard.tsx
+++ b/apps/cotizador/src/components/ProposalCard.tsx
@@ -11,15 +11,15 @@ interface Props {
 function Renglon({ etiqueta, valor, nota }: { etiqueta: string; valor: string; nota?: string }) {
   return (
     <div className="flex items-baseline justify-between gap-2 py-2">
-      <span className="text-xs font-bold tracking-widest text-neutral-500 uppercase">
+      <span className="text-xs font-medium text-[#64748B]">
         {etiqueta}
         {nota && (
-          <span className="mt-0.5 block text-xs font-normal tracking-normal text-neutral-400 normal-case">
+          <span className="mt-0.5 block text-xs font-normal text-[#64748B]">
             {nota}
           </span>
         )}
       </span>
-      <span className="text-lg font-light text-neutral-900">{valor}</span>
+      <span className="text-lg font-medium text-[#111827]">{valor}</span>
     </div>
   )
 }
@@ -29,18 +29,18 @@ export function ProposalCard({ numero, titulo, propuesta, onDescuentoChange }: P
   const porcentaje = propuesta.descuento * 100
 
   return (
-    <article className="flex flex-col border border-neutral-200 bg-white p-6">
-      <header className="mb-6 border-b border-neutral-200 pb-4">
-        <p className="text-xs font-bold tracking-widest text-accent uppercase">
+    <article className="flex flex-col rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm transition-all duration-200 hover:shadow-md">
+      <header className="mb-6 border-b border-[#E5E7EB] pb-4">
+        <p className="text-xs font-semibold uppercase tracking-wider text-accent">
           Propuesta comercial #{numero}
         </p>
-        <h2 className="mt-1 text-xl font-light text-neutral-900">{titulo}</h2>
+        <h2 className="mt-1 text-xl font-semibold text-[#111827]">{titulo}</h2>
       </header>
 
       <div className="mb-6">
         <label
           htmlFor={`descuento-${propuesta.tipo}`}
-          className="mb-2 block text-xs font-bold tracking-widest text-neutral-500 uppercase"
+          className="mb-2 block text-xs font-medium text-[#4B5563]"
         >
           Descuento (%)
         </label>
@@ -55,11 +55,11 @@ export function ProposalCard({ numero, titulo, propuesta, onDescuentoChange }: P
             const v = Number(e.target.value)
             onDescuentoChange(Number.isFinite(v) ? Math.min(100, Math.max(0, v)) / 100 : 0)
           }}
-          className="w-28 border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+          className="w-28 rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
         />
       </div>
 
-      <div className="divide-y divide-neutral-200">
+      <div className="divide-y divide-[#E5E7EB]">
         <Renglon etiqueta="Monto de descuento" valor={formatoMoneda(propuesta.montoDescuento)} />
         <Renglon etiqueta="Precio final c/desc." valor={formatoMoneda(propuesta.precioFinal)} />
         <Renglon
diff --git a/apps/cotizador/src/components/UnitInfoCard.tsx b/apps/cotizador/src/components/UnitInfoCard.tsx
index 0cf84f0..ec0f755 100644
--- a/apps/cotizador/src/components/UnitInfoCard.tsx
+++ b/apps/cotizador/src/components/UnitInfoCard.tsx
@@ -9,8 +9,8 @@ interface Props {
 function Fila({ etiqueta, valor }: { etiqueta: string; valor: string }) {
   return (
     <div className="flex items-center justify-between py-2">
-      <dt className="text-sm text-neutral-500">{etiqueta}</dt>
-      <dd className="text-sm font-medium text-neutral-900">{valor}</dd>
+      <dt className="text-sm text-[#64748B]">{etiqueta}</dt>
+      <dd className="text-sm font-medium text-[#111827]">{valor}</dd>
     </div>
   )
 }
@@ -33,16 +33,18 @@ export function UnitInfoCard({ unidad, numMeses }: Props) {
   const extras = unidad.extras ?? {}
   const etiquetaStatus = ETIQUETA_STATUS[unidad.status]
   return (
-    <section className="border border-neutral-200 bg-white p-6">
-      <h2 className="mb-4 text-xs font-bold tracking-widest text-neutral-900 uppercase">
+    <section className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
+      <h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#111827]">
         Unidad {unidad.codigo}
       </h2>
       {etiquetaStatus !== undefined && unidad.etapa != null && unidad.etapa !== '' && (
-        <p className="mb-4 text-xs text-neutral-500">
-          {etiquetaStatus} — en {unidad.etapa.toLowerCase()}
+        <p className="mb-4">
+          <span className="rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-700">
+            {etiquetaStatus} — en {unidad.etapa.toLowerCase()}
+          </span>
         </p>
       )}
-      <dl className="divide-y divide-neutral-200">
+      <dl className="divide-y divide-[#E5E7EB]">
         <Fila etiqueta="Modelo" valor={unidad.modelo} />
         {extras['prototipo'] != null && <Fila etiqueta="Prototipo" valor={String(extras['prototipo'])} />}
         {extras['etapa'] != null && <Fila etiqueta="Etapa" valor={String(extras['etapa'])} />}
diff --git a/apps/cotizador/src/components/UnitSelector.tsx b/apps/cotizador/src/components/UnitSelector.tsx
index 1f49f98..3e4752d 100644
--- a/apps/cotizador/src/components/UnitSelector.tsx
+++ b/apps/cotizador/src/components/UnitSelector.tsx
@@ -78,7 +78,7 @@ export function UnitSelector({ unidades, valor, onChange }: Props) {
     <div ref={contenedorRef} className="relative">
       <label
         htmlFor="unidad"
-        className="mb-2 block text-xs font-bold tracking-widest text-neutral-500 uppercase"
+        className="mb-2 block text-xs font-medium text-[#4B5563]"
       >
         Unidad
       </label>
@@ -100,17 +100,17 @@ export function UnitSelector({ unidades, valor, onChange }: Props) {
         }}
         onFocus={() => setAbierto(true)}
         onKeyDown={onKeyDown}
-        className="w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+        className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
       />
       {abierto && (
         <ul
           id="unidad-listbox"
           role="listbox"
           aria-label="Unidades disponibles"
-          className="absolute z-10 mt-1 max-h-64 w-full overflow-auto border border-neutral-300 bg-white"
+          className="absolute z-10 mt-1 max-h-64 w-full overflow-auto rounded-lg border border-[#E5E7EB] bg-white shadow-xl"
         >
           {opciones.length === 0 ? (
-            <li className="px-3 py-2.5 text-sm text-neutral-500">Sin unidades que coincidan</li>
+            <li className="px-3 py-2.5 text-sm text-[#64748B]">Sin unidades que coincidan</li>
           ) : (
             opciones.map((u, i) => (
               <li
@@ -127,12 +127,12 @@ export function UnitSelector({ unidades, valor, onChange }: Props) {
                 }}
                 onMouseEnter={() => setIndiceActivo(i)}
                 className={`cursor-pointer px-3 py-2.5 text-sm ${
-                  i === indiceActivo ? 'bg-neutral-100' : 'bg-white'
+                  i === indiceActivo ? 'bg-[#F8FAFC]' : 'bg-white'
                 }`}
               >
-                <span className="font-medium text-neutral-900">{u.codigo}</span>
-                <span className="text-neutral-500"> — Modelo {u.modelo} — </span>
-                <span className="text-neutral-900">{formatoMoneda(u.precioSinAcabados)}</span>
+                <span className="font-medium text-[#111827]">{u.codigo}</span>
+                <span className="text-[#64748B]"> — Modelo {u.modelo} — </span>
+                <span className="text-[#111827]">{formatoMoneda(u.precioSinAcabados)}</span>
               </li>
             ))
           )}
diff --git a/apps/cotizador/src/index.css b/apps/cotizador/src/index.css
index b2bdae8..d9d1433 100644
--- a/apps/cotizador/src/index.css
+++ b/apps/cotizador/src/index.css
@@ -2,25 +2,18 @@
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --color-accent: #1B4332;
-  --color-accent-hover: #132f23;
-  --radius-xs: 0;
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 0;
-  --radius-xl: 0;
-  --radius-2xl: 0;
-  --radius-3xl: 0;
-  --radius-4xl: 0;
+  --color-accent: #2563EB;
+  --color-accent-hover: #1D4ED8;
+  --color-naranja: #F97316;
 }
 
 @layer base {
   body {
-    @apply bg-white text-neutral-900 antialiased;
+    @apply bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   :focus-visible {
-    outline: 2px solid #1B4332;
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
   }
 }
diff --git a/apps/cotizador/src/lib/pdf.ts b/apps/cotizador/src/lib/pdf.ts
index 9633d41..68e5815 100644
--- a/apps/cotizador/src/lib/pdf.ts
+++ b/apps/cotizador/src/lib/pdf.ts
@@ -147,7 +147,7 @@ export function crearDocumentoPdf({ unidad, acabados, apartado, precioLista, pro
       startY: y,
       margin: { left: MARGEN, right: MARGEN },
       styles: { fontSize: 8 },
-      headStyles: { fillColor: [4, 120, 87] },
+      headStyles: { fillColor: [37, 99, 235] },
       head: [[`PROPUESTA COMERCIAL #${i + 1} — ${p.titulo.toUpperCase()}`, '%', 'PAGOS MENSUALES', 'TOTAL']],
       body: [
         ['DESCUENTO', formatoPorcentaje(p.descuento), '', ''],
diff --git a/apps/cotizador/src/pages/CotizadorPage.tsx b/apps/cotizador/src/pages/CotizadorPage.tsx
index 88be1b8..76fb5ab 100644
--- a/apps/cotizador/src/pages/CotizadorPage.tsx
+++ b/apps/cotizador/src/pages/CotizadorPage.tsx
@@ -39,11 +39,11 @@ const esquemaCliente = z.object({
 type FormularioCliente = z.infer<typeof esquemaCliente>
 
 const campoInputBase =
-  'w-full border bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none'
-const campoInput = `${campoInputBase} border-neutral-300`
+  'w-full rounded-lg border bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none'
+const campoInput = `${campoInputBase} border-[#D1D5DB]`
 const campoInputError = `${campoInputBase} border-red-400`
 
-const etiquetaCampo = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+const etiquetaCampo = 'mb-2 block text-xs font-medium text-[#4B5563]'
 
 export default function CotizadorPage() {
   const { unidades, cargando, error, usandoSeed } = useUnidades()
@@ -254,18 +254,18 @@ export default function CotizadorPage() {
   }
 
   return (
-    <div className="min-h-screen bg-white">
-      <header className="border-b border-neutral-200 bg-white">
+    <div className="min-h-screen bg-[#F8FAFC]">
+      <header className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex max-w-7xl flex-wrap items-baseline justify-between gap-2 px-4 py-6">
-          <h1 className="text-lg tracking-widest text-neutral-900">
-            <span className="font-bold">FRASA DESARROLLOS</span>{' '}
-            <span className="font-light text-neutral-500">— Cotizador</span>
+          <h1 className="text-lg text-[#111827]">
+            <span className="font-bold">FRASA DESARROLLOS<span className="text-[#F97316]">.</span></span>{' '}
+            <span className="font-normal text-[#64748B]">— Cotizador</span>
           </h1>
           <div className="text-right">
-            <p className="text-xs font-bold tracking-widest text-neutral-500 uppercase capitalize">
+            <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] capitalize">
               {formatoFechaLarga(new Date())}
             </p>
-            <p className="mt-1 text-xs text-neutral-500">
+            <p className="mt-1 text-xs text-[#64748B]">
               Vigencia: hasta el {formatoFechaLarga(calcularVigencia())}
             </p>
           </div>
@@ -275,18 +275,18 @@ export default function CotizadorPage() {
       <main className="mx-auto grid max-w-7xl gap-x-8 gap-y-16 px-4 py-16 lg:grid-cols-[minmax(320px,380px)_1fr]">
         {/* Panel de configuración */}
         <aside className="space-y-16">
-          <section className="space-y-8 border border-neutral-200 bg-white p-6">
+          <section className="space-y-8 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
             {error && <p className="text-xs text-red-700">{error}</p>}
             {usandoSeed && !cargando && (
               <p className="text-xs text-amber-700">Datos de demostración (sin conexión al servidor)</p>
             )}
             {cargando ? (
-              <p className="text-sm text-neutral-500">Cargando unidades…</p>
+              <p className="text-sm text-[#64748B]">Cargando unidades…</p>
             ) : (
               <>
                 <div>
                   <span className={etiquetaCampo}>Desarrollo</span>
-                  <div className="flex flex-wrap border border-neutral-300" role="group">
+                  <div className="flex flex-wrap overflow-hidden rounded-lg border border-[#D1D5DB]" role="group">
                     {LISTA_DESARROLLOS.map((id) => {
                       const activo = id === desarrollo
                       const total = unidades.filter((u) => (u.desarrollo ?? 'DIAGONAL') === id).length
@@ -299,21 +299,21 @@ export default function CotizadorPage() {
                           type="button"
                           aria-pressed={activo}
                           onClick={() => setDesarrollo(id)}
-                          className={`px-4 py-2.5 text-xs font-bold tracking-widest uppercase transition-colors duration-150 ${
+                          className={`px-4 py-2.5 text-xs font-medium transition-colors duration-100 ${
                             activo
                               ? 'bg-accent text-white'
-                              : 'bg-white text-neutral-600 hover:bg-neutral-100'
+                              : 'bg-white text-[#4B5563] hover:bg-[#F9FAFB]'
                           }`}
                         >
                           {obtenerDesarrollo(id).nombre}
-                          <span className={`ml-1 font-normal ${activo ? 'text-white' : 'text-neutral-400'}`}>
+                          <span className={`ml-1 font-normal ${activo ? 'text-blue-100' : 'text-[#64748B]'}`}>
                             {disponibles}/{total}
                           </span>
                         </button>
                       )
                     })}
                   </div>
-                  <p className="mt-2 text-xs text-neutral-500">
+                  <p className="mt-2 text-xs text-[#64748B]">
                     {unidadesDesarrollo.length} unidades · {disponiblesDesarrollo} disponibles
                   </p>
                 </div>
@@ -330,7 +330,7 @@ export default function CotizadorPage() {
             {!params.precioUnico && (
             <div>
               <span className={etiquetaCampo}>Cocina y closet</span>
-              <div className="inline-flex border border-neutral-300" role="group">
+              <div className="inline-flex overflow-hidden rounded-lg border border-[#D1D5DB]" role="group">
                 {(['SI', 'NO'] as const).map((opcion) => {
                   const activo = (opcion === 'SI') === acabados
                   return (
@@ -339,10 +339,10 @@ export default function CotizadorPage() {
                       type="button"
                       aria-pressed={activo}
                       onClick={() => setAcabados(opcion === 'SI')}
-                      className={`px-5 py-2.5 text-xs font-bold tracking-widest uppercase transition-colors duration-150 ${
+                      className={`px-5 py-2.5 text-xs font-medium transition-colors duration-100 ${
                         activo
                           ? 'bg-accent text-white'
-                          : 'bg-white text-neutral-600 hover:bg-neutral-100'
+                          : 'bg-white text-[#4B5563] hover:bg-[#F9FAFB]'
                       }`}
                     >
                       {opcion}
@@ -372,7 +372,7 @@ export default function CotizadorPage() {
               {errorApartado ? (
                 <p className="mt-1 text-xs text-red-700">{errorApartado}</p>
               ) : (
-                <p className="mt-1 text-xs text-neutral-500">{formatoMoneda(apartado)}</p>
+                <p className="mt-1 text-xs text-[#64748B]">{formatoMoneda(apartado)}</p>
               )}
             </div>
 
@@ -418,11 +418,11 @@ export default function CotizadorPage() {
             </div>
 
             {unidad && (
-              <div className="border-t border-neutral-200 pt-8">
-                <p className="text-xs font-bold tracking-widest text-neutral-500 uppercase">
+              <div className="border-t border-[#E5E7EB] pt-8">
+                <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
                   Precio de lista
                 </p>
-                <p className="mt-2 text-3xl font-light text-neutral-900">
+                <p className="mt-2 text-3xl font-semibold text-[#111827]">
                   {formatoMoneda(precioLista)}
                 </p>
               </div>
@@ -432,7 +432,7 @@ export default function CotizadorPage() {
               <button
                 type="button"
                 onClick={handleNueva}
-                className="w-full border border-neutral-300 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-600 uppercase transition-colors duration-150 hover:bg-neutral-100"
+                className="w-full rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
               >
                 Nueva cotización
               </button>
@@ -452,8 +452,8 @@ export default function CotizadorPage() {
           />
 
           {!unidad ? (
-            <div className="mt-16 flex h-64 items-center justify-center border border-dashed border-neutral-300 bg-white">
-              <p className="text-sm text-neutral-500">
+            <div className="mt-16 flex h-64 items-center justify-center rounded-xl border border-dashed border-[#D1D5DB] bg-white">
+              <p className="text-sm text-[#64748B]">
                 Selecciona una unidad para ver las propuestas comerciales.
               </p>
             </div>
@@ -485,7 +485,7 @@ export default function CotizadorPage() {
                     id="propuesta-elegida"
                     value={Math.min(propuestaIndex, propuestas.length - 1)}
                     onChange={(e) => setPropuestaIndex(Number(e.target.value))}
-                    className="border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
+                    className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:ring-2 focus:ring-accent/20 focus:outline-none"
                   >
                     {propuestas.map((p, i) => (
                       <option key={p.tipo} value={i}>
@@ -498,7 +498,7 @@ export default function CotizadorPage() {
                   type="button"
                   onClick={handleCompartir}
                   disabled={!puedeGenerarPdf}
-                  className="border border-accent bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-accent uppercase transition-colors duration-150 hover:bg-accent hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+                  className="rounded-lg border border-accent bg-white px-5 py-2.5 text-sm font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
                 >
                   Compartir
                 </button>
@@ -506,14 +506,14 @@ export default function CotizadorPage() {
                   type="button"
                   onClick={handleGenerarPdf}
                   disabled={!puedeGenerarPdf}
-                  className="bg-accent px-5 py-2.5 text-xs font-bold tracking-widest text-white uppercase transition-colors duration-150 hover:bg-accent-hover disabled:cursor-not-allowed disabled:opacity-40"
+                  className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:cursor-not-allowed disabled:opacity-40"
                 >
                   {guardando ? 'Guardando…' : 'Guardar y generar PDF'}
                 </button>
               </div>
-              {aviso && <p className="mt-2 text-right text-xs text-neutral-500">{aviso}</p>}
+              {aviso && <p className="mt-2 text-right text-xs text-[#64748B]">{aviso}</p>}
               {!puedeGenerarPdf && !guardando && (
-                <p className="mt-2 text-right text-xs text-neutral-400">
+                <p className="mt-2 text-right text-xs text-[#64748B]">
                   Selecciona una unidad para guardar y generar el PDF.
                 </p>
               )}
diff --git a/apps/dashboards/src/components/AuthGate.tsx b/apps/dashboards/src/components/AuthGate.tsx
index baba256..2e97267 100644
--- a/apps/dashboards/src/components/AuthGate.tsx
+++ b/apps/dashboards/src/components/AuthGate.tsx
@@ -17,17 +17,17 @@ export default function AuthGate({ children }: { children: ReactNode }) {
   }
 
   return (
-    <div className="min-h-screen bg-white text-neutral-900">
-      <div className="border-b border-neutral-200">
+    <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
+      <div className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
-          <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <span className="text-xs font-medium text-[#4B5563]">
             {sesion.usuario.nombre} · {sesion.usuario.rol}
           </span>
           <div className="flex items-center gap-4">
             <button
               type="button"
               onClick={() => setModalPassword(true)}
-              className="text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
+              className="rounded-lg px-2 py-1.5 text-xs font-medium text-[#4B5563] transition-all duration-100 ease-out hover:bg-[#F9FAFB] hover:text-[#111827]"
             >
               Contraseña
             </button>
@@ -37,7 +37,7 @@ export default function AuthGate({ children }: { children: ReactNode }) {
                 logout()
                 setSesion(null)
               }}
-              className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
+              className="rounded-lg px-2 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:bg-blue-50 hover:text-accent-hover"
             >
               Salir
             </button>
diff --git a/apps/dashboards/src/components/CambiarPasswordModal.tsx b/apps/dashboards/src/components/CambiarPasswordModal.tsx
index 1be9e05..dc3532d 100644
--- a/apps/dashboards/src/components/CambiarPasswordModal.tsx
+++ b/apps/dashboards/src/components/CambiarPasswordModal.tsx
@@ -3,8 +3,8 @@ import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
 import { cambiarPassword } from '../services/auth'
 
 const CLASE_INPUT =
-  'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
-const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
+const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563]'
 
 /**
  * Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
@@ -45,19 +45,19 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
       aria-modal="true"
       aria-label="Cambiar contraseña"
     >
-      <div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
-        <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
+      <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
+        <h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
           Cambiar contraseña
         </h2>
         {exito ? (
           <>
-            <p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
+            <p className="rounded-lg bg-green-50 px-4 py-3 text-xs font-medium text-green-700">
               Contraseña actualizada
             </p>
             <button
               type="button"
               onClick={onCerrar}
-              className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
+              className="mt-6 w-full rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
             >
               Cerrar
             </button>
@@ -92,7 +92,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
                 required
                 className={CLASE_INPUT}
               />
-              <p className="mt-2 text-xs text-neutral-400">Mínimo 8 caracteres y un número</p>
+              <p className="mt-2 text-xs text-[#64748B]">Mínimo 8 caracteres y un número</p>
             </div>
             <div>
               <label htmlFor="password-confirmar" className={CLASE_LABEL}>
@@ -111,7 +111,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
             {error && (
               <p
                 role="alert"
-                className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+                className="rounded-lg bg-red-50 px-4 py-3 text-xs font-medium text-red-700"
               >
                 {error}
               </p>
@@ -120,14 +120,14 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
               <button
                 type="submit"
                 disabled={cargando}
-                className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+                className="flex-1 rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
               >
                 {cargando ? 'Guardando…' : 'Guardar'}
               </button>
               <button
                 type="button"
                 onClick={onCerrar}
-                className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
+                className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
               >
                 Cancelar
               </button>
diff --git a/apps/dashboards/src/components/KpiCard.tsx b/apps/dashboards/src/components/KpiCard.tsx
index e841007..17c9434 100644
--- a/apps/dashboards/src/components/KpiCard.tsx
+++ b/apps/dashboards/src/components/KpiCard.tsx
@@ -2,10 +2,10 @@ import type { ReactNode } from 'react'
 
 export default function KpiCard({ titulo, valor, detalle }: { titulo: string; valor: ReactNode; detalle?: string }) {
   return (
-    <div className="border border-neutral-200 bg-white p-6">
-      <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{titulo}</p>
-      <p className="mt-2 text-3xl font-light text-neutral-900">{valor}</p>
-      {detalle && <p className="mt-2 text-xs text-neutral-500">{detalle}</p>}
+    <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm transition-shadow duration-200 hover:shadow-md">
+      <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</p>
+      <p className="mt-2 text-3xl font-light text-[#111827]">{valor}</p>
+      {detalle && <p className="mt-2 text-xs text-[#4B5563]">{detalle}</p>}
     </div>
   )
 }
diff --git a/apps/dashboards/src/components/LoginScreen.tsx b/apps/dashboards/src/components/LoginScreen.tsx
index b19fcbb..c485327 100644
--- a/apps/dashboards/src/components/LoginScreen.tsx
+++ b/apps/dashboards/src/components/LoginScreen.tsx
@@ -1,7 +1,7 @@
 import { useState, type FormEvent } from 'react'
 import { login, ErrorLogin, type UsuarioSesion } from '../services/auth'
 
-/** Pantalla de login StudioBlank: marca FRASA, usuario + contraseña, Enter envía */
+/** Pantalla de login NovaSpark: marca FRASA, usuario + contraseña, Enter envía */
 export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSesion) => void }) {
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
@@ -22,11 +22,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-4">
-      <div className="w-full max-w-sm">
+    <div className="flex min-h-screen items-center justify-center bg-[#F8FAFC] px-4">
+      <div className="w-full max-w-sm rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm">
         <div className="mb-10 text-center">
-          <p className="text-lg font-bold tracking-widest">FRASA</p>
-          <p className="mt-2 text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <p className="text-lg font-bold tracking-widest">
+            FRASA<span className="text-[#F97316]">.</span>
+          </p>
+          <p className="mt-2 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
             Acceso al ecosistema
           </p>
         </div>
@@ -34,7 +36,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <div>
             <label
               htmlFor="login-usuario"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Usuario
             </label>
@@ -46,13 +48,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               autoComplete="username"
               autoFocus
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           <div>
             <label
               htmlFor="login-password"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Contraseña
             </label>
@@ -63,13 +65,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               onChange={(e) => setPassword(e.target.value)}
               autoComplete="current-password"
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           {error && (
             <p
               role="alert"
-              className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+              className="rounded-lg bg-red-50 px-4 py-3 text-xs font-medium text-red-700"
             >
               {error}
             </p>
@@ -77,7 +79,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <button
             type="submit"
             disabled={cargando}
-            className="w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+            className="w-full rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
           >
             {cargando ? 'Entrando…' : 'Entrar'}
           </button>
diff --git a/apps/dashboards/src/components/MiTablero.tsx b/apps/dashboards/src/components/MiTablero.tsx
index 3c2dd83..40dbe12 100644
--- a/apps/dashboards/src/components/MiTablero.tsx
+++ b/apps/dashboards/src/components/MiTablero.tsx
@@ -5,8 +5,8 @@ import { EstadoVacio, TituloSeccion } from './comunes'
 import { funnelMisLeads, type ResumenMiDia } from '../lib/mi-tablero'
 import { fetchResumenMiDia } from '../services/mi-dia'
 
-// Misma paleta del funnel del tablero general
-const COLORES_FUNNEL = ['#a3a3a3', '#737373', '#52796f', '#1B4332']
+// Misma paleta del funnel del tablero general (NovaSpark: azules + neutros)
+const COLORES_FUNNEL = ['#94A3B8', '#64748B', '#3B82F6', '#2563EB']
 
 /**
  * "Mi tablero": KPIs personales del vendedor logueado (mis leads, actividades,
@@ -40,10 +40,10 @@ export default function MiTablero() {
     <main className="mx-auto max-w-6xl px-4 py-8">
       <div className="mb-8 flex items-end justify-between">
         <div>
-          <p className="text-xs font-bold uppercase tracking-widest text-accent">FRASA Desarrollos</p>
-          <h1 className="mt-2 text-3xl font-light text-neutral-900">Mi tablero</h1>
+          <p className="text-xs font-semibold uppercase tracking-wider text-accent">FRASA Desarrollos</p>
+          <h1 className="mt-2 text-3xl font-light text-[#111827]">Mi tablero</h1>
           {resumen && (
-            <p className="mt-1 text-xs text-neutral-400">
+            <p className="mt-1 text-xs text-[#64748B]">
               Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
             </p>
           )}
@@ -52,20 +52,20 @@ export default function MiTablero() {
           type="button"
           onClick={() => void cargar()}
           disabled={cargando}
-          className="border border-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-blue-50 disabled:opacity-50"
         >
           {cargando ? 'Actualizando…' : 'Actualizar'}
         </button>
       </div>
 
       {error && (
-        <p role="alert" className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
+        <p role="alert" className="mb-8 rounded-lg bg-amber-50 px-4 py-3 text-xs font-medium text-amber-700">
           Sin datos del API — {error}
         </p>
       )}
 
       {resumen?.sinMapeoMonday && (
-        <p className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
+        <p className="mb-8 rounded-lg bg-amber-50 px-4 py-3 text-xs font-medium text-amber-700">
           Tu usuario aún no está ligado a Monday: las listas personales aparecen vacías
         </p>
       )}
diff --git a/apps/dashboards/src/components/Perfilamiento.tsx b/apps/dashboards/src/components/Perfilamiento.tsx
index b486281..c03f38b 100644
--- a/apps/dashboards/src/components/Perfilamiento.tsx
+++ b/apps/dashboards/src/components/Perfilamiento.tsx
@@ -20,8 +20,8 @@ const DIMENSIONES: { titulo: string; registro: (perfil: ResumenReportes['leads']
 function TarjetaDimension({ titulo, datos }: { titulo: string; datos: Record<string, number> }) {
   const rebanadas = rebanadasDe(datos)
   return (
-    <div className="border border-neutral-200 p-4">
-      <p className="mb-2 text-xs font-bold uppercase tracking-widest text-neutral-500">{titulo}</p>
+    <div className="rounded-xl border border-[#E5E7EB] bg-white p-4 shadow-sm transition-shadow duration-200 hover:shadow-md">
+      <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</p>
       {rebanadas.length === 0 ? (
         <EstadoVacio mensaje="Sin datos" />
       ) : (
@@ -32,7 +32,7 @@ function TarjetaDimension({ titulo, datos }: { titulo: string; datos: Record<str
               <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} />
               <YAxis type="category" dataKey="nombre" width={90} tick={{ fontSize: 11 }} />
               <Tooltip />
-              <Bar dataKey="valor" name="Leads" fill="#1B4332" isAnimationActive={false} />
+              <Bar dataKey="valor" name="Leads" fill="#2563EB" isAnimationActive={false} />
             </BarChart>
           </ResponsiveContainer>
         </div>
diff --git a/apps/dashboards/src/components/SeccionEquipo.tsx b/apps/dashboards/src/components/SeccionEquipo.tsx
index b796bff..b5f5aa9 100644
--- a/apps/dashboards/src/components/SeccionEquipo.tsx
+++ b/apps/dashboards/src/components/SeccionEquipo.tsx
@@ -3,9 +3,8 @@ import { EstadoVacio, TituloSeccion } from './comunes'
 import type { ResumenMiDia } from '../lib/mi-tablero'
 import { fetchResumenMiDia } from '../services/mi-dia'
 
-const CLASE_CELDA = 'px-4 py-3 text-sm text-neutral-900'
-const CLASE_ENCABEZADO =
-  'px-4 py-2 text-left text-xs font-bold uppercase tracking-widest text-neutral-500'
+const CLASE_CELDA = 'px-4 py-3 text-sm text-[#111827]'
+const CLASE_ENCABEZADO = 'bg-[#F8FAFC] px-4 py-2 text-left text-xs font-semibold uppercase text-[#64748B]'
 
 /**
  * Sección "Equipo" (solo coordinador/corporativo/admin): tabla vendedor →
@@ -34,31 +33,31 @@ export default function SeccionEquipo() {
     <section aria-label="Equipo" className="mt-12">
       <TituloSeccion>Equipo: leads por vendedor</TituloSeccion>
       {error && (
-        <p role="alert" className="border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
+        <p role="alert" className="rounded-lg bg-amber-50 px-4 py-3 text-xs font-medium text-amber-700">
           Sin datos del API — {error}
         </p>
       )}
       {!error && !equipo && <EstadoVacio mensaje="Sin datos de equipo" />}
       {!error && equipo && (
         <>
-          <p className="mb-4 text-xs text-neutral-500">
+          <p className="mb-4 text-xs text-[#4B5563]">
             Leads nuevos sin asignar:{' '}
-            <span className="font-bold text-neutral-900">{equipo.leadsNuevosSinAsignar}</span>
+            <span className="font-semibold text-[#111827]">{equipo.leadsNuevosSinAsignar}</span>
           </p>
           {equipo.porVendedor.length === 0 ? (
             <EstadoVacio mensaje="Sin leads asignados al equipo" />
           ) : (
-            <table className="w-full border border-neutral-200 bg-white">
-              <thead className="border-b border-neutral-200">
+            <table className="w-full overflow-hidden rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
+              <thead className="border-b border-[#E5E7EB]">
                 <tr>
                   <th className={CLASE_ENCABEZADO}>Vendedor</th>
                   <th className={CLASE_ENCABEZADO}>Leads asignados</th>
                   <th className={CLASE_ENCABEZADO}>Nuevos esta semana</th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody className="divide-y divide-[#E5E7EB]">
                 {equipo.porVendedor.map((v) => (
-                  <tr key={v.mondayUserId} className="border-b border-neutral-100 last:border-b-0">
+                  <tr key={v.mondayUserId} className="transition-colors duration-100 hover:bg-[#F8FAFC]">
                     <td className={CLASE_CELDA}>{v.nombre ?? `Monday #${v.mondayUserId}`}</td>
                     <td className={CLASE_CELDA}>{v.leadsAsignados}</td>
                     <td className={CLASE_CELDA}>{v.leadsNuevosSemana}</td>
diff --git a/apps/dashboards/src/components/TableroGeneral.tsx b/apps/dashboards/src/components/TableroGeneral.tsx
index adc3d9d..72ae1d0 100644
--- a/apps/dashboards/src/components/TableroGeneral.tsx
+++ b/apps/dashboards/src/components/TableroGeneral.tsx
@@ -31,16 +31,16 @@ import {
 } from '../lib/reportes'
 import { fetchResumen } from '../services/reportes'
 
-// Paleta StudioBlank: acento verde + neutros (sin gradientes ni sombras)
+// Paleta NovaSpark: acento azul + semánticos (sin gradientes)
 const COLORES_STATUS: Record<string, string> = {
-  DISPONIBLE: '#1B4332',
-  APARTADO: '#b45309',
+  DISPONIBLE: '#2563EB',
+  APARTADO: '#F59E0B',
   VENDIDO: '#525252',
-  BLOQUEADO: '#b91c1c',
+  BLOQUEADO: '#EF4444',
   OTROS: '#d4d4d4',
 }
-const COLORES_FUNNEL = ['#a3a3a3', '#737373', '#52796f', '#1B4332']
-const COLORES_COBRANZA = ['#1B4332', '#b45309']
+const COLORES_FUNNEL = ['#94A3B8', '#64748B', '#3B82F6', '#2563EB']
+const COLORES_COBRANZA = ['#2563EB', '#F59E0B']
 
 /**
  * Vista "General": el tablero comercial de todo el ecosistema (KPIs, inventario,
@@ -79,10 +79,10 @@ export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boole
     <main className="mx-auto max-w-6xl px-4 py-8">
       <div className="mb-8 flex items-end justify-between">
         <div>
-          <p className="text-xs font-bold uppercase tracking-widest text-accent">FRASA Desarrollos</p>
-          <h1 className="mt-2 text-3xl font-light text-neutral-900">Tablero comercial</h1>
+          <p className="text-xs font-semibold uppercase tracking-wider text-accent">FRASA Desarrollos</p>
+          <h1 className="mt-2 text-3xl font-light text-[#111827]">Tablero comercial</h1>
           {resumen && (
-            <p className="mt-1 text-xs text-neutral-400">
+            <p className="mt-1 text-xs text-[#64748B]">
               Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
             </p>
           )}
@@ -91,14 +91,14 @@ export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boole
           type="button"
           onClick={() => void cargar()}
           disabled={cargando}
-          className="border border-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-blue-50 disabled:opacity-50"
         >
           {cargando ? 'Actualizando…' : 'Actualizar'}
         </button>
       </div>
 
       {error && (
-        <p role="alert" className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
+        <p role="alert" className="mb-8 rounded-lg bg-amber-50 px-4 py-3 text-xs font-medium text-amber-700">
           Sin datos del API — {error}
         </p>
       )}
@@ -185,7 +185,7 @@ export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boole
                     <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} />
                     <YAxis type="category" dataKey="etapa" width={90} tick={{ fontSize: 11 }} />
                     <Tooltip />
-                    <Bar dataKey="valor" name="Unidades" fill="#1B4332" isAnimationActive={false} />
+                    <Bar dataKey="valor" name="Unidades" fill="#2563EB" isAnimationActive={false} />
                   </BarChart>
                 </ResponsiveContainer>
               </div>
diff --git a/apps/dashboards/src/components/comunes.tsx b/apps/dashboards/src/components/comunes.tsx
index 0590c3c..5f8752e 100644
--- a/apps/dashboards/src/components/comunes.tsx
+++ b/apps/dashboards/src/components/comunes.tsx
@@ -1,13 +1,13 @@
-// Piezas visuales compartidas por las vistas del tablero (StudioBlank)
+// Piezas visuales compartidas por las vistas del tablero (NovaSpark)
 
 export function EstadoVacio({ mensaje }: { mensaje: string }) {
   return (
-    <div className="flex h-64 items-center justify-center border border-dashed border-neutral-300">
-      <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">{mensaje}</p>
+    <div className="flex h-64 items-center justify-center rounded-xl border border-dashed border-[#E5E7EB] bg-white">
+      <p className="text-xs font-medium uppercase tracking-wider text-[#64748B]">{mensaje}</p>
     </div>
   )
 }
 
 export function TituloSeccion({ children }: { children: string }) {
-  return <h2 className="mb-4 text-xs font-bold uppercase tracking-widest text-neutral-500">{children}</h2>
+  return <h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#64748B]">{children}</h2>
 }
diff --git a/apps/dashboards/src/index.css b/apps/dashboards/src/index.css
index 5de6ae6..f68f994 100644
--- a/apps/dashboards/src/index.css
+++ b/apps/dashboards/src/index.css
@@ -2,22 +2,17 @@
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --color-accent: #1B4332;
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 0;
-  --radius-xl: 0;
-  --radius-2xl: 0;
-  --radius-3xl: 0;
+  --color-accent: #2563EB;
+  --color-accent-hover: #1D4ED8;
 }
 
 @layer base {
   body {
-    @apply bg-white text-neutral-900 antialiased;
+    @apply bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   *:focus-visible {
-    outline: 2px solid #1B4332;
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
   }
 }
diff --git a/apps/dashboards/src/pages/DashboardPage.tsx b/apps/dashboards/src/pages/DashboardPage.tsx
index 68c148a..4c5f16e 100644
--- a/apps/dashboards/src/pages/DashboardPage.tsx
+++ b/apps/dashboards/src/pages/DashboardPage.tsx
@@ -23,7 +23,7 @@ export default function DashboardPage() {
 
   return (
     <div>
-      <div className="border-b border-neutral-200 bg-white">
+      <div className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex max-w-6xl gap-2 px-4 py-3" role="tablist" aria-label="Vista del tablero">
           {VISTAS.map((v) => (
             <button
@@ -34,8 +34,8 @@ export default function DashboardPage() {
               onClick={() => setVista(v.id)}
               className={
                 vista === v.id
-                  ? 'bg-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-white'
-                  : 'border border-neutral-300 px-5 py-2 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500'
+                  ? 'rounded-lg bg-accent px-5 py-2 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover'
+                  : 'rounded-lg border border-[#D1D5DB] bg-white px-5 py-2 text-xs font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]'
               }
             >
               {v.etiqueta}
diff --git a/apps/landing/src/App.tsx b/apps/landing/src/App.tsx
index bd4b335..444bf7e 100644
--- a/apps/landing/src/App.tsx
+++ b/apps/landing/src/App.tsx
@@ -5,9 +5,11 @@ import { ConfiguracionCuenta } from './components/ConfiguracionCuenta'
 export default function App() {
   return (
     <div className="flex min-h-screen flex-col">
-      <header className="px-6 pt-20 pb-16 sm:px-12 lg:px-24">
-        <p className="text-xs font-bold tracking-widest text-accent uppercase">FRASA Desarrollos</p>
-        <h1 className="mt-4 text-4xl font-light text-neutral-900 sm:text-5xl">
+      <header className="border-b border-[#E5E7EB] bg-white px-6 pt-20 pb-16 sm:px-12 lg:px-24">
+        <p className="text-xs font-semibold tracking-wider text-accent uppercase">
+          FRASA Desarrollos <span aria-hidden="true" className="text-[#F97316]">●</span>
+        </p>
+        <h1 className="mt-4 text-4xl font-light text-[#111827] sm:text-5xl">
           Ecosistema comercial
         </h1>
       </header>
@@ -25,7 +27,7 @@ export default function App() {
       </main>
 
       <footer className="px-6 pt-24 pb-10 sm:px-12 lg:px-24">
-        <p className="text-xs text-neutral-400">Consult (AS) Technology</p>
+        <p className="text-xs text-[#64748B]">Consult (AS) Technology</p>
       </footer>
     </div>
   )
diff --git a/apps/landing/src/components/ConfiguracionCuenta.tsx b/apps/landing/src/components/ConfiguracionCuenta.tsx
index ccffb7c..fd43730 100644
--- a/apps/landing/src/components/ConfiguracionCuenta.tsx
+++ b/apps/landing/src/components/ConfiguracionCuenta.tsx
@@ -2,9 +2,9 @@ import { useEffect, useState, type FormEvent } from 'react'
 import { ErrorLogin, getSesion, login, logout, type UsuarioSesion } from '../services/auth'
 import { getMe, getUsuariosMonday, guardarVinculoMonday, type UsuarioMonday } from '../services/api'
 
-const labelEstilo = 'block text-xs font-bold tracking-widest text-neutral-500 uppercase'
+const labelEstilo = 'block text-xs font-medium text-[#4B5563]'
 const inputEstilo =
-  'mt-2 w-full border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-neutral-900'
+  'mt-2 w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm text-[#111827] transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
 
 /**
  * Sección "Configuración de cuenta": login inline y, con sesión, el vínculo
@@ -95,14 +95,17 @@ export function ConfiguracionCuenta() {
     perfil?.mondayUserId != null ? (usuarios?.find((u) => u.id === perfil.mondayUserId) ?? null) : null
 
   return (
-    <section aria-labelledby="titulo-cuenta" className="mt-24 border-t border-neutral-200 pt-16">
-      <h2 id="titulo-cuenta" className="text-xs font-bold tracking-widest text-accent uppercase">
+    <section aria-labelledby="titulo-cuenta" className="mt-24 border-t border-[#E5E7EB] pt-16">
+      <h2 id="titulo-cuenta" className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
         Configuración de cuenta
       </h2>
 
       {!conSesion ? (
-        <form onSubmit={(e) => void entrar(e)} className="mt-8 max-w-sm">
-          <p className="text-sm leading-relaxed text-neutral-500">
+        <form
+          onSubmit={(e) => void entrar(e)}
+          className="mt-8 max-w-sm rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm"
+        >
+          <p className="text-sm leading-relaxed text-[#64748B]">
             Inicia sesión para vincular tu usuario de Monday.
           </p>
           <div className="mt-6">
@@ -134,55 +137,55 @@ export function ConfiguracionCuenta() {
             />
           </div>
           {errorLogin && (
-            <p role="alert" className="mt-4 text-xs text-red-700">
+            <p role="alert" className="mt-4 text-sm text-red-600">
               {errorLogin}
             </p>
           )}
           <button
             type="submit"
             disabled={entrando}
-            className="mt-6 bg-accent px-5 py-2.5 text-xs font-bold tracking-widest text-white uppercase transition-colors duration-150 hover:bg-neutral-900 disabled:opacity-50"
+            className="mt-6 rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
           >
             {entrando ? 'Entrando…' : 'Entrar'}
           </button>
         </form>
       ) : (
-        <div className="mt-8 max-w-md">
-          {cargandoPerfil && <p className="text-sm text-neutral-500">Cargando tu perfil…</p>}
+        <div className="mt-8 max-w-md rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
+          {cargandoPerfil && <p className="text-sm text-[#64748B]">Cargando tu perfil…</p>}
 
           {perfil && (
             <>
-              <p className="text-sm text-neutral-900">
+              <p className="text-sm text-[#111827]">
                 Sesión: <span className="font-medium">{perfil.nombre}</span>
               </p>
-              <p className="mt-2 text-sm text-neutral-500">
+              <p className="mt-2 text-sm text-[#64748B]">
                 Vínculo Monday actual:{' '}
                 {perfil.mondayUserId === null ? (
-                  <span className="text-neutral-400">sin vincular</span>
+                  <span className="text-[#94A3B8]">sin vincular</span>
                 ) : vinculado ? (
-                  <span className="text-neutral-900">
+                  <span className="text-[#111827]">
                     {vinculado.nombre} ({vinculado.email})
                   </span>
                 ) : (
-                  <span className="text-neutral-900">ID {perfil.mondayUserId}</span>
+                  <span className="text-[#111827]">ID {perfil.mondayUserId}</span>
                 )}
               </p>
 
               {errorUsuarios ? (
                 <div className="mt-6">
-                  <p role="alert" className="text-xs text-red-700">
+                  <p role="alert" className="text-sm text-red-600">
                     {errorUsuarios}
                   </p>
                   <button
                     type="button"
                     onClick={cargarUsuarios}
-                    className="mt-3 border border-neutral-900 bg-transparent px-4 py-2 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+                    className="mt-3 rounded-lg border border-[#D1D5DB] bg-white px-4 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
                   >
                     Reintentar
                   </button>
                 </div>
               ) : usuarios === null ? (
-                <p className="mt-6 text-sm text-neutral-500">Cargando usuarios de Monday…</p>
+                <p className="mt-6 text-sm text-[#64748B]">Cargando usuarios de Monday…</p>
               ) : (
                 <div className="mt-6">
                   <label htmlFor="cuenta-monday" className={labelEstilo}>
@@ -206,7 +209,7 @@ export function ConfiguracionCuenta() {
                       type="button"
                       disabled={guardando}
                       onClick={() => void guardar(seleccion === '' ? null : Number(seleccion))}
-                      className="bg-accent px-5 py-2.5 text-xs font-bold tracking-widest text-white uppercase transition-colors duration-150 hover:bg-neutral-900 disabled:opacity-50"
+                      className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
                     >
                       {guardando ? 'Guardando…' : 'Guardar'}
                     </button>
@@ -215,7 +218,7 @@ export function ConfiguracionCuenta() {
                         type="button"
                         disabled={guardando}
                         onClick={() => void guardar(null)}
-                        className="border border-red-300 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-red-700 uppercase transition-colors duration-150 hover:bg-red-50 disabled:opacity-50"
+                        className="rounded-lg border border-red-300 bg-white px-5 py-2.5 text-sm font-medium text-red-600 transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50"
                       >
                         Desvincular
                       </button>
@@ -225,12 +228,12 @@ export function ConfiguracionCuenta() {
               )}
 
               {aviso && (
-                <p role="status" className="mt-4 text-xs font-bold tracking-widest text-accent uppercase">
+                <p role="status" className="mt-4 text-sm font-medium text-green-600">
                   {aviso}
                 </p>
               )}
               {errorGuardar && (
-                <p role="alert" className="mt-4 text-xs text-red-700">
+                <p role="alert" className="mt-4 text-sm text-red-600">
                   {errorGuardar}
                 </p>
               )}
@@ -240,7 +243,7 @@ export function ConfiguracionCuenta() {
           <button
             type="button"
             onClick={cerrarSesion}
-            className="mt-8 border border-neutral-900 bg-transparent px-4 py-2 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
+            className="mt-8 rounded-lg border border-[#D1D5DB] bg-white px-4 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
           >
             Cerrar sesión
           </button>
diff --git a/apps/landing/src/components/TarjetaModulo.tsx b/apps/landing/src/components/TarjetaModulo.tsx
index 57b0074..f97aba2 100644
--- a/apps/landing/src/components/TarjetaModulo.tsx
+++ b/apps/landing/src/components/TarjetaModulo.tsx
@@ -10,11 +10,11 @@ export function TarjetaModulo({ modulo }: Props) {
     <li>
       <a
         href={modulo.url}
-        className="group flex h-full flex-col border border-neutral-200 bg-white p-8 transition-colors duration-150 hover:border-neutral-900"
+        className="group flex h-full flex-col rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm transition-all duration-200 ease-in-out hover:shadow-md"
       >
-        <h2 className="text-2xl font-light text-neutral-900">{modulo.nombre}</h2>
-        <p className="mt-3 text-sm leading-relaxed text-neutral-500">{modulo.descripcion}</p>
-        <span className="mt-auto pt-8 text-xs font-bold tracking-widest text-accent uppercase">
+        <h2 className="text-2xl font-light text-[#111827]">{modulo.nombre}</h2>
+        <p className="mt-3 text-sm leading-relaxed text-[#64748B]">{modulo.descripcion}</p>
+        <span className="mt-auto pt-8 text-sm font-medium text-accent transition-colors duration-100 ease-out group-hover:text-accent-hover">
           Entrar <span aria-hidden="true">&rarr;</span>
         </span>
       </a>
diff --git a/apps/landing/src/index.css b/apps/landing/src/index.css
index cd12187..dc04958 100644
--- a/apps/landing/src/index.css
+++ b/apps/landing/src/index.css
@@ -2,26 +2,18 @@
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --color-accent: #1B4332;
-  --color-accent-hover: #132f23;
-  --radius-xs: 0;
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 0;
-  --radius-xl: 0;
-  --radius-2xl: 0;
-  --radius-3xl: 0;
-  --radius-4xl: 0;
+  --color-accent: #2563EB;
+  --color-accent-hover: #1D4ED8;
 }
 
 @layer base {
   body {
-    @apply bg-white text-neutral-900 antialiased;
+    @apply bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
-  /* Foco visible accesible: outline en color de acento */
+  /* Foco visible accesible: anillo azul en elementos interactivos */
   :focus-visible {
-    outline: 2px solid #1B4332;
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
   }
 }
diff --git a/apps/mi-dia/src/components/AuthGate.tsx b/apps/mi-dia/src/components/AuthGate.tsx
index baba256..e20f9e3 100644
--- a/apps/mi-dia/src/components/AuthGate.tsx
+++ b/apps/mi-dia/src/components/AuthGate.tsx
@@ -17,17 +17,17 @@ export default function AuthGate({ children }: { children: ReactNode }) {
   }
 
   return (
-    <div className="min-h-screen bg-white text-neutral-900">
-      <div className="border-b border-neutral-200">
+    <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
+      <div className="border-b border-[#E5E7EB] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
-          <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          <span className="text-xs font-medium text-[#64748B]">
             {sesion.usuario.nombre} · {sesion.usuario.rol}
           </span>
           <div className="flex items-center gap-4">
             <button
               type="button"
               onClick={() => setModalPassword(true)}
-              className="text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
+              className="rounded-md px-2 py-1.5 text-xs font-medium text-[#4B5563] transition-all duration-100 ease-out hover:text-[#111827]"
             >
               Contraseña
             </button>
@@ -37,7 +37,7 @@ export default function AuthGate({ children }: { children: ReactNode }) {
                 logout()
                 setSesion(null)
               }}
-              className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
+              className="rounded-md px-2 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:text-accent-hover"
             >
               Salir
             </button>
diff --git a/apps/mi-dia/src/components/CambiarPasswordModal.tsx b/apps/mi-dia/src/components/CambiarPasswordModal.tsx
index 1be9e05..7e1d06f 100644
--- a/apps/mi-dia/src/components/CambiarPasswordModal.tsx
+++ b/apps/mi-dia/src/components/CambiarPasswordModal.tsx
@@ -3,8 +3,8 @@ import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
 import { cambiarPassword } from '../services/auth'
 
 const CLASE_INPUT =
-  'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
-const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
+const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563]'
 
 /**
  * Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
@@ -45,19 +45,19 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
       aria-modal="true"
       aria-label="Cambiar contraseña"
     >
-      <div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
-        <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
+      <div className="w-full max-w-sm rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-xl">
+        <h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
           Cambiar contraseña
         </h2>
         {exito ? (
           <>
-            <p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
+            <p className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">
               Contraseña actualizada
             </p>
             <button
               type="button"
               onClick={onCerrar}
-              className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
+              className="mt-6 w-full rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
             >
               Cerrar
             </button>
@@ -92,7 +92,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
                 required
                 className={CLASE_INPUT}
               />
-              <p className="mt-2 text-xs text-neutral-400">Mínimo 8 caracteres y un número</p>
+              <p className="mt-2 text-xs text-[#94A3B8]">Mínimo 8 caracteres y un número</p>
             </div>
             <div>
               <label htmlFor="password-confirmar" className={CLASE_LABEL}>
@@ -111,7 +111,7 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
             {error && (
               <p
                 role="alert"
-                className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+                className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700"
               >
                 {error}
               </p>
@@ -120,14 +120,14 @@ export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => voi
               <button
                 type="submit"
                 disabled={cargando}
-                className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+                className="flex-1 rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
               >
                 {cargando ? 'Guardando…' : 'Guardar'}
               </button>
               <button
                 type="button"
                 onClick={onCerrar}
-                className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
+                className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-3 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
               >
                 Cancelar
               </button>
diff --git a/apps/mi-dia/src/components/KpiCard.tsx b/apps/mi-dia/src/components/KpiCard.tsx
index e841007..c5c3e8e 100644
--- a/apps/mi-dia/src/components/KpiCard.tsx
+++ b/apps/mi-dia/src/components/KpiCard.tsx
@@ -2,10 +2,10 @@ import type { ReactNode } from 'react'
 
 export default function KpiCard({ titulo, valor, detalle }: { titulo: string; valor: ReactNode; detalle?: string }) {
   return (
-    <div className="border border-neutral-200 bg-white p-6">
-      <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{titulo}</p>
-      <p className="mt-2 text-3xl font-light text-neutral-900">{valor}</p>
-      {detalle && <p className="mt-2 text-xs text-neutral-500">{detalle}</p>}
+    <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm transition-shadow duration-200 hover:shadow-md">
+      <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</p>
+      <p className="mt-2 text-3xl font-semibold text-[#111827]">{valor}</p>
+      {detalle && <p className="mt-2 text-xs text-[#64748B]">{detalle}</p>}
     </div>
   )
 }
diff --git a/apps/mi-dia/src/components/LoginScreen.tsx b/apps/mi-dia/src/components/LoginScreen.tsx
index b19fcbb..7307e22 100644
--- a/apps/mi-dia/src/components/LoginScreen.tsx
+++ b/apps/mi-dia/src/components/LoginScreen.tsx
@@ -1,7 +1,7 @@
 import { useState, type FormEvent } from 'react'
 import { login, ErrorLogin, type UsuarioSesion } from '../services/auth'
 
-/** Pantalla de login StudioBlank: marca FRASA, usuario + contraseña, Enter envía */
+/** Pantalla de login: marca FRASA, usuario + contraseña, Enter envía */
 export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSesion) => void }) {
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
@@ -22,19 +22,24 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-4">
+    <div className="flex min-h-screen items-center justify-center bg-[#F8FAFC] px-4">
       <div className="w-full max-w-sm">
-        <div className="mb-10 text-center">
-          <p className="text-lg font-bold tracking-widest">FRASA</p>
-          <p className="mt-2 text-xs font-bold uppercase tracking-widest text-neutral-500">
+        <div className="mb-8 text-center">
+          <p className="text-lg font-bold tracking-widest text-[#111827]">
+            FRASA<span aria-hidden="true" className="text-[#F97316]">.</span>
+          </p>
+          <p className="mt-2 text-xs font-medium uppercase tracking-wider text-[#64748B]">
             Acceso al ecosistema
           </p>
         </div>
-        <form onSubmit={enviar} className="space-y-6">
+        <form
+          onSubmit={enviar}
+          className="space-y-6 rounded-xl border border-[#E5E7EB] bg-white p-8 shadow-sm"
+        >
           <div>
             <label
               htmlFor="login-usuario"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Usuario
             </label>
@@ -46,13 +51,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               autoComplete="username"
               autoFocus
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           <div>
             <label
               htmlFor="login-password"
-              className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
+              className="mb-2 block text-xs font-medium text-[#4B5563]"
             >
               Contraseña
             </label>
@@ -63,13 +68,13 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
               onChange={(e) => setPassword(e.target.value)}
               autoComplete="current-password"
               required
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className="w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
             />
           </div>
           {error && (
             <p
               role="alert"
-              className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+              className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700"
             >
               {error}
             </p>
@@ -77,7 +82,7 @@ export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSes
           <button
             type="submit"
             disabled={cargando}
-            className="w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+            className="w-full rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
           >
             {cargando ? 'Entrando…' : 'Entrar'}
           </button>
diff --git a/apps/mi-dia/src/index.css b/apps/mi-dia/src/index.css
index 5de6ae6..f68f994 100644
--- a/apps/mi-dia/src/index.css
+++ b/apps/mi-dia/src/index.css
@@ -2,22 +2,17 @@
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --color-accent: #1B4332;
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 0;
-  --radius-xl: 0;
-  --radius-2xl: 0;
-  --radius-3xl: 0;
+  --color-accent: #2563EB;
+  --color-accent-hover: #1D4ED8;
 }
 
 @layer base {
   body {
-    @apply bg-white text-neutral-900 antialiased;
+    @apply bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   *:focus-visible {
-    outline: 2px solid #1B4332;
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
   }
 }
diff --git a/apps/mi-dia/src/pages/MiDiaPage.tsx b/apps/mi-dia/src/pages/MiDiaPage.tsx
index 473a99d..d31ca05 100644
--- a/apps/mi-dia/src/pages/MiDiaPage.tsx
+++ b/apps/mi-dia/src/pages/MiDiaPage.tsx
@@ -17,19 +17,24 @@ import { cambiarEstadoLead, crearLead, descartarLead, fetchResumenMiDia } from '
 import { getSesion } from '../services/auth'
 
 function TituloSeccion({ children }: { children: string }) {
-  return <h2 className="mb-4 text-xs font-bold uppercase tracking-widest text-neutral-500">{children}</h2>
+  return <h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#64748B]">{children}</h2>
 }
 
 function EstadoVacio({ mensaje }: { mensaje: string }) {
   return (
-    <div className="flex h-24 items-center justify-center border border-dashed border-neutral-300">
-      <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">{mensaje}</p>
+    <div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-[#E5E7EB] bg-white">
+      <p className="text-xs font-semibold uppercase tracking-wider text-[#94A3B8]">{mensaje}</p>
     </div>
   )
 }
 
 const CLASE_BOTON_ACCION =
-  'border border-accent px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50'
+  'rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-blue-50 disabled:opacity-50'
+
+const CLASE_INPUT =
+  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
+
+const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563]'
 
 /** Modal de descarte: motivo (dropdown CRM) + comentario opcional */
 function ModalDescartar({
@@ -47,9 +52,9 @@ function ModalDescartar({
   const [comentario, setComentario] = useState('')
   return (
     <div className="fixed inset-0 z-10 flex items-center justify-center bg-black/40 px-4" role="dialog" aria-modal="true">
-      <div className="w-full max-w-md border border-neutral-300 bg-white p-6">
-        <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">Descartar lead</p>
-        <p className="mt-2 text-lg font-light">{lead.nombre}</p>
+      <div className="w-full max-w-md rounded-2xl border border-[#E5E7EB] bg-white p-6 shadow-xl">
+        <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">Descartar lead</p>
+        <p className="mt-2 text-lg font-medium text-[#111827]">{lead.nombre}</p>
         <form
           className="mt-6 space-y-4"
           onSubmit={(e) => {
@@ -58,14 +63,14 @@ function ModalDescartar({
           }}
         >
           <div>
-            <label htmlFor="motivo-descarte" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
+            <label htmlFor="motivo-descarte" className={CLASE_LABEL}>
               Motivo
             </label>
             <select
               id="motivo-descarte"
               value={motivo}
               onChange={(e) => setMotivo(e.target.value as MotivoNoCompra)}
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className={CLASE_INPUT}
             >
               {MOTIVOS_NO_COMPRA.map((m) => (
                 <option key={m} value={m}>
@@ -75,7 +80,7 @@ function ModalDescartar({
             </select>
           </div>
           <div>
-            <label htmlFor="comentario-descarte" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
+            <label htmlFor="comentario-descarte" className={CLASE_LABEL}>
               Comentario (opcional)
             </label>
             <textarea
@@ -83,7 +88,7 @@ function ModalDescartar({
               value={comentario}
               onChange={(e) => setComentario(e.target.value)}
               rows={3}
-              className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+              className={CLASE_INPUT}
             />
           </div>
           <div className="flex justify-end gap-3">
@@ -91,14 +96,14 @@ function ModalDescartar({
               type="button"
               onClick={onCancelar}
               disabled={enviando}
-              className="border border-neutral-300 px-5 py-2 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500 disabled:opacity-50"
+              className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2 text-sm font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50"
             >
               Cancelar
             </button>
             <button
               type="submit"
               disabled={enviando}
-              className="bg-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+              className="rounded-lg bg-red-600 px-5 py-2 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-red-700 disabled:opacity-50"
             >
               {enviando ? 'Descartando…' : 'Descartar'}
             </button>
@@ -124,16 +129,16 @@ function FilaLead({
   const [conCita, setConCita] = useState(false)
   const [fechaCita, setFechaCita] = useState('')
   return (
-    <li className="border border-neutral-200 p-4">
+    <li className="rounded-xl border border-[#E5E7EB] bg-white p-4 shadow-sm">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div>
           <p className="text-sm font-medium">{lead.nombre}</p>
-          <p className="mt-1 text-xs text-neutral-500">
+          <p className="mt-1 text-xs text-[#64748B]">
             {lead.telefono || 'Sin teléfono'}
             {lead.origen ? ` · ${lead.origen}` : ''}
           </p>
         </div>
-        <span className="border border-neutral-300 px-2 py-1 text-xs font-bold uppercase tracking-widest text-neutral-500">
+        <span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
           {lead.estado || 'Sin estado'}
         </span>
       </div>
@@ -158,14 +163,14 @@ function FilaLead({
             aria-label="Fecha de la cita"
             value={fechaCita}
             onChange={(e) => setFechaCita(e.target.value)}
-            className="border border-neutral-300 px-2 py-1.5 text-xs focus:border-accent focus:outline-none"
+            className="rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
           />
         )}
         <button
           type="button"
           disabled={enviando}
           onClick={onDescartar}
-          className="border border-red-700 px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-red-700 transition-colors duration-150 hover:bg-red-700 hover:text-white disabled:opacity-50"
+          className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50"
         >
           Descartar
         </button>
@@ -258,31 +263,33 @@ export default function MiDiaPage() {
     <main className="mx-auto max-w-6xl px-4 py-8">
       <div className="mb-8 flex items-end justify-between">
         <div>
-          <p className="text-xs font-bold uppercase tracking-widest text-accent">FRASA · Mi día</p>
-          <h1 className="mt-2 text-3xl font-light text-neutral-900">{nombreVendedor}</h1>
+          <p className="text-xs font-semibold uppercase tracking-wider text-accent">
+            FRASA <span aria-hidden="true" className="text-[#F97316]">·</span> Mi día
+          </p>
+          <h1 className="mt-2 text-3xl font-semibold text-[#111827]">{nombreVendedor}</h1>
         </div>
         <button
           type="button"
           onClick={() => void cargar()}
           disabled={cargando}
-          className="border border-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50"
+          className="rounded-lg bg-accent px-5 py-2 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
         >
           {cargando ? 'Actualizando…' : 'Actualizar'}
         </button>
       </div>
 
       {error && (
-        <p role="alert" className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
+        <p role="alert" className="mb-8 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-700">
           Sin datos del API — {error}
         </p>
       )}
       {aviso && (
-        <p role="alert" className="mb-8 border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700">
+        <p role="alert" className="mb-8 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700">
           {aviso}
         </p>
       )}
       {resumen?.sinMapeoMonday && (
-        <p className="mb-8 border border-neutral-300 px-4 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500">
+        <p className="mb-8 rounded-lg border border-[#E5E7EB] bg-white px-4 py-3 text-sm font-medium text-[#64748B] shadow-sm">
           Tu usuario aún no está vinculado a Monday; las acciones siguen funcionando
         </p>
       )}
@@ -309,14 +316,17 @@ export default function MiDiaPage() {
             ) : (
               <ul className="space-y-2">
                 {resumen.misActividadesHoy.map((a) => (
-                  <li key={a.id} className="flex items-center justify-between gap-3 border border-neutral-200 px-4 py-3">
+                  <li
+                    key={a.id}
+                    className="flex items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
+                  >
                     <p className="text-sm">
                       {a.nombre}
-                      {a.tipo ? <span className="ml-2 text-xs uppercase tracking-widest text-neutral-400">{a.tipo}</span> : null}
+                      {a.tipo ? <span className="ml-2 text-xs uppercase tracking-wider text-[#94A3B8]">{a.tipo}</span> : null}
                     </p>
                     <span
-                      className={`text-xs font-bold uppercase tracking-widest ${
-                        esActividadVencida(a.fecha, hoy) ? 'text-red-700' : 'text-neutral-500'
+                      className={`text-xs font-medium ${
+                        esActividadVencida(a.fecha, hoy) ? 'text-red-600' : 'text-[#64748B]'
                       }`}
                     >
                       {formatoFechaCorta(a.fecha)}
@@ -332,14 +342,17 @@ export default function MiDiaPage() {
               <TituloSeccion>Apartados por vencer</TituloSeccion>
               <ul className="space-y-2">
                 {resumen.apartadosPorVencer.map((a) => (
-                  <li key={a.id} className="flex flex-wrap items-center justify-between gap-3 border border-neutral-200 px-4 py-3">
+                  <li
+                    key={a.id}
+                    className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
+                  >
                     <p className="text-sm">
                       {a.nombre}
-                      {a.unidadCodigo ? <span className="ml-2 text-xs text-neutral-400">{a.unidadCodigo}</span> : null}
+                      {a.unidadCodigo ? <span className="ml-2 text-xs text-[#94A3B8]">{a.unidadCodigo}</span> : null}
                     </p>
                     <span
-                      className={`text-xs font-bold uppercase tracking-widest ${
-                        a.diasRestantes <= 1 ? 'text-red-700' : 'text-amber-700'
+                      className={`text-xs font-medium ${
+                        a.diasRestantes <= 1 ? 'text-red-600' : 'text-amber-600'
                       }`}
                     >
                       {textoDiasRestantes(a.diasRestantes)} · {formatoFechaCorta(a.fechaLimite)}
@@ -376,19 +389,22 @@ export default function MiDiaPage() {
             ) : (
               <ul className="space-y-2">
                 {resumen.misCapturas.map((c) => (
-                  <li key={c.leadId} className="flex flex-wrap items-center justify-between gap-3 border border-neutral-200 px-4 py-3">
+                  <li
+                    key={c.leadId}
+                    className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
+                  >
                     <div>
                       <p className="text-sm font-medium">{c.nombre}</p>
-                      <p className="mt-1 text-xs text-neutral-500">
+                      <p className="mt-1 text-xs text-[#64748B]">
                         {c.telefono || 'Sin teléfono'}
                         {c.origen ? ` · ${c.origen}` : ''}
                       </p>
                     </div>
                     <div className="flex items-center gap-3">
-                      <span className="border border-neutral-300 px-2 py-1 text-xs font-bold uppercase tracking-widest text-neutral-500">
+                      <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
                         {c.estado || '—'}
                       </span>
-                      <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+                      <span className="text-xs font-medium text-[#64748B]">
                         {formatoFechaCorta(c.capturadoEn.slice(0, 10))}
                       </span>
                     </div>
@@ -405,24 +421,27 @@ export default function MiDiaPage() {
             ) : (
               <ul className="space-y-2">
                 {resumen.misClientes.map((c) => (
-                  <li key={c.id} className="flex flex-wrap items-center justify-between gap-3 border border-neutral-200 px-4 py-3">
+                  <li
+                    key={c.id}
+                    className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
+                  >
                     <div>
                       <p className="text-sm font-medium">{c.nombre}</p>
-                      <p className="mt-1 text-xs text-neutral-500">
+                      <p className="mt-1 text-xs text-[#64748B]">
                         {[c.proyecto, c.unidadCodigo].filter((p) => p !== '').join(' · ') || 'Alta sin proyecto'}
                       </p>
                     </div>
                     <div className="flex items-center gap-3">
                       <span
-                        className={`border px-2 py-1 text-xs font-bold uppercase tracking-widest ${
+                        className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
                           c.completado
-                            ? 'border-neutral-300 text-neutral-500'
-                            : 'border-amber-700 text-amber-700'
+                            ? 'bg-gray-100 text-gray-600'
+                            : 'bg-amber-50 text-amber-700'
                         }`}
                       >
                         {c.completado ? 'Cliente' : 'En captura'}
                       </span>
-                      <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+                      <span className="text-xs font-medium text-[#64748B]">
                         {formatoFechaCorta(c.capturadoEn.slice(0, 10))}
                       </span>
                     </div>
@@ -434,9 +453,12 @@ export default function MiDiaPage() {
 
           <section aria-label="Captura rápida de lead" className="mt-12">
             <TituloSeccion>Captura rápida de lead</TituloSeccion>
-            <form onSubmit={enviarCaptura} className="grid gap-4 border border-neutral-200 p-6 sm:grid-cols-2">
+            <form
+              onSubmit={enviarCaptura}
+              className="grid gap-4 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm sm:grid-cols-2"
+            >
               <div>
-                <label htmlFor="cap-nombre" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
+                <label htmlFor="cap-nombre" className={CLASE_LABEL}>
                   Nombre
                 </label>
                 <input
@@ -445,11 +467,11 @@ export default function MiDiaPage() {
                   value={capNombre}
                   onChange={(e) => setCapNombre(e.target.value)}
                   required
-                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+                  className={CLASE_INPUT}
                 />
               </div>
               <div>
-                <label htmlFor="cap-telefono" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
+                <label htmlFor="cap-telefono" className={CLASE_LABEL}>
                   Teléfono
                 </label>
                 <input
@@ -457,11 +479,11 @@ export default function MiDiaPage() {
                   type="tel"
                   value={capTelefono}
                   onChange={(e) => setCapTelefono(e.target.value)}
-                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+                  className={CLASE_INPUT}
                 />
               </div>
               <div>
-                <label htmlFor="cap-email" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
+                <label htmlFor="cap-email" className={CLASE_LABEL}>
                   Email
                 </label>
                 <input
@@ -469,18 +491,18 @@ export default function MiDiaPage() {
                   type="email"
                   value={capEmail}
                   onChange={(e) => setCapEmail(e.target.value)}
-                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+                  className={CLASE_INPUT}
                 />
               </div>
               <div>
-                <label htmlFor="cap-origen" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
+                <label htmlFor="cap-origen" className={CLASE_LABEL}>
                   Origen
                 </label>
                 <select
                   id="cap-origen"
                   value={capOrigen}
                   onChange={(e) => setCapOrigen(e.target.value)}
-                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+                  className={CLASE_INPUT}
                 >
                   {ORIGENES_LEAD.map((o) => (
                     <option key={o} value={o}>
@@ -490,14 +512,14 @@ export default function MiDiaPage() {
                 </select>
               </div>
               <div>
-                <label htmlFor="cap-desarrollo" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
+                <label htmlFor="cap-desarrollo" className={CLASE_LABEL}>
                   Desarrollo de interés
                 </label>
                 <select
                   id="cap-desarrollo"
                   value={capDesarrollo}
                   onChange={(e) => setCapDesarrollo(e.target.value)}
-                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+                  className={CLASE_INPUT}
                 >
                   <option value="">Sin especificar</option>
                   {DESARROLLOS_LEAD.map((d) => (
@@ -508,7 +530,7 @@ export default function MiDiaPage() {
                 </select>
               </div>
               <div>
-                <label htmlFor="cap-notas" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
+                <label htmlFor="cap-notas" className={CLASE_LABEL}>
                   Notas
                 </label>
                 <input
@@ -516,14 +538,16 @@ export default function MiDiaPage() {
                   type="text"
                   value={capNotas}
                   onChange={(e) => setCapNotas(e.target.value)}
-                  className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
+                  className={CLASE_INPUT}
                 />
               </div>
               {capMensaje && (
                 <p
                   role="status"
-                  className={`border px-4 py-3 text-xs font-bold uppercase tracking-widest sm:col-span-2 ${
-                    capMensaje.tipo === 'ok' ? 'border-accent text-accent' : 'border-red-700 text-red-700'
+                  className={`rounded-lg border px-4 py-3 text-sm font-medium sm:col-span-2 ${
+                    capMensaje.tipo === 'ok'
+                      ? 'border-green-200 bg-green-50 text-green-700'
+                      : 'border-red-200 bg-red-50 text-red-700'
                   }`}
                 >
                   {capMensaje.texto}
@@ -533,7 +557,7 @@ export default function MiDiaPage() {
                 <button
                   type="submit"
                   disabled={capEnviando}
-                  className="bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+                  className="rounded-lg bg-accent px-5 py-3 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
                 >
                   {capEnviando ? 'Registrando…' : 'Registrar lead'}
                 </button>
@@ -544,7 +568,7 @@ export default function MiDiaPage() {
           {esRolConEquipo(rol) && resumen.equipo && (
             <section aria-label="Equipo" className="mt-12">
               <TituloSeccion>Equipo</TituloSeccion>
-              <p className="mb-4 text-sm text-neutral-500">
+              <p className="mb-4 text-sm text-[#64748B]">
                 Leads nuevos sin asignar: <strong>{resumen.equipo.leadsNuevosSinAsignar}</strong>
               </p>
               {resumen.equipo.porVendedor.length === 0 ? (
@@ -552,9 +576,12 @@ export default function MiDiaPage() {
               ) : (
                 <ul className="space-y-2">
                   {resumen.equipo.porVendedor.map((v) => (
-                    <li key={v.mondayUserId} className="flex items-center justify-between border border-neutral-200 px-4 py-3">
+                    <li
+                      key={v.mondayUserId}
+                      className="flex items-center justify-between rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
+                    >
                       <p className="text-sm">{v.nombre ?? `Monday #${v.mondayUserId}`}</p>
-                      <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+                      <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
                         {v.leadsAsignados} lead(s)
                       </span>
                     </li>