From 7d19e0da3811d3e96a467a240331dc011d88cb5f Mon Sep 17 00:00:00 2001
From: Consult AS Technology <ialcarazsalazar@consultoria-as.com>
Date: Mon, 7 Sep 2026 06:57:12 +0000
Subject: [PATCH] fix(landing): dark mode completo en todos los componentes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

14 archivos corregidos:
- Body: dark:bg-[#0F172A] dark:text-[#E2E8F0]
- Navbar: badges, botones, hamburger
- ConfiguracionCuenta: botones, textos
- VistaContactos: botones, filas hover
- ModalContacto: borders, secciones, badges, items
- ConfigPage: botones
- ModoTrabajo: botón reconexión
- RolesPermisos: botones, headers tabla
- Usuarios: empty state
- Sistema: labels, toggles
- AuditoriaLog: todo (tabla, filtros, paginación)
- CommandPalette: botón cerrar

28 tests landing verdes.
---
 apps/landing/src/App.tsx                      |  2 +-
 .../landing/src/components/CommandPalette.tsx |  2 +-
 .../src/components/ConfiguracionCuenta.tsx    |  6 +--
 apps/landing/src/components/ModalContacto.tsx | 12 ++---
 apps/landing/src/components/Navbar.tsx        |  8 +--
 .../landing/src/components/VistaContactos.tsx |  6 +--
 .../src/components/config/AuditoriaLog.tsx    | 52 +++++++++----------
 .../src/components/config/ConfigPage.tsx      |  2 +-
 .../src/components/config/ModoTrabajo.tsx     |  2 +-
 .../src/components/config/RolesPermisos.tsx   |  6 +--
 .../landing/src/components/config/Sistema.tsx | 10 ++--
 .../src/components/config/Usuarios.tsx        |  2 +-
 apps/landing/src/index.css                    |  2 +-
 13 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/apps/landing/src/App.tsx b/apps/landing/src/App.tsx
index 81d16b3..0573a95 100644
--- a/apps/landing/src/App.tsx
+++ b/apps/landing/src/App.tsx
@@ -99,7 +99,7 @@ export default function App() {
         </div>
       </main>
 
-      <footer className="mt-16 border-t border-[#E5E7EB] dark:border-[#1E293B] dark:border-[#1E293B]">
+      <footer className="mt-16 border-t border-[#E5E7EB] dark:border-[#1E293B]">
         <div className="mx-auto max-w-[1280px] px-6 py-8">
           <p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Consult (AS) Technology</p>
         </div>
diff --git a/apps/landing/src/components/CommandPalette.tsx b/apps/landing/src/components/CommandPalette.tsx
index dc7b63d..111e747 100644
--- a/apps/landing/src/components/CommandPalette.tsx
+++ b/apps/landing/src/components/CommandPalette.tsx
@@ -143,7 +143,7 @@ export function CommandPalette() {
               <button
                 type="button"
                 onClick={() => setAbierto(false)}
-                className="rounded-md p-1 text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] hover:text-[#64748B]"
+                className="rounded-md p-1 text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] hover:text-[#64748B] dark:hover:bg-[#334155] dark:hover:text-[#CBD5E1]"
               >
                 <X size={16} />
               </button>
diff --git a/apps/landing/src/components/ConfiguracionCuenta.tsx b/apps/landing/src/components/ConfiguracionCuenta.tsx
index 23bf9e5..2bbcee5 100644
--- a/apps/landing/src/components/ConfiguracionCuenta.tsx
+++ b/apps/landing/src/components/ConfiguracionCuenta.tsx
@@ -174,7 +174,7 @@ export function ConfiguracionCuenta() {
               <p className="mt-2 text-sm text-[#64748B] dark:text-[#94A3B8]">
                 Vínculo Monday actual:{' '}
                 {perfil.mondayUserId === null ? (
-                  <span className="text-[#94A3B8]">sin vincular</span>
+                  <span className="text-[#94A3B8] dark:text-[#64748B]">sin vincular</span>
                 ) : vinculado ? (
                   <span className="text-[#111827] dark:text-[#E2E8F0]">
                     {vinculado.nombre} ({vinculado.email})
@@ -192,7 +192,7 @@ export function ConfiguracionCuenta() {
                   <button
                     type="button"
                     onClick={cargarUsuarios}
-                    className="mt-3 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
+                    className="mt-3 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
                   >
                     Reintentar
                   </button>
@@ -256,7 +256,7 @@ export function ConfiguracionCuenta() {
           <button
             type="button"
             onClick={cerrarSesion}
-            className="mt-8 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
+            className="mt-8 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
           >
             Cerrar sesión
           </button>
diff --git a/apps/landing/src/components/ModalContacto.tsx b/apps/landing/src/components/ModalContacto.tsx
index 65c88d7..53dfe99 100644
--- a/apps/landing/src/components/ModalContacto.tsx
+++ b/apps/landing/src/components/ModalContacto.tsx
@@ -32,7 +32,7 @@ function ListaRelaciones({ titulo, items }: { titulo: string; items: RelacionCrm
       <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">{titulo}</p>
       <ul className="mt-2 space-y-2">
         {items.map((r) => (
-          <li key={r.id} className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-[#E5E7EB] px-3 py-2">
+          <li key={r.id} className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-[#E5E7EB] px-3 py-2 dark:border-[#334155]">
             <span className="text-sm text-[#111827] dark:text-[#E2E8F0]">
               {r.estado || 'Sin estado'}
               {r.detalle ? <span className="ml-2 text-xs text-[#64748B] dark:text-[#94A3B8]">{r.detalle}</span> : null}
@@ -92,7 +92,7 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
       }}
     >
       <div className="w-full max-w-2xl rounded-2xl border border-[#E5E7EB] bg-white shadow dark:border-[#1E293B] dark:bg-[#1E293B] -xl">
-        <div className="flex items-center justify-between border-b border-[#E5E7EB] px-6 py-4">
+        <div className="flex items-center justify-between border-b border-[#E5E7EB] dark:border-[#334155] px-6 py-4">
           <div className="flex items-center gap-3">
             <h2 className="text-lg font-semibold text-[#111827] dark:text-[#E2E8F0]">{c['nombre'] ?? nombre}</h2>
             {c['Estado'] && (
@@ -103,7 +103,7 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
             type="button"
             onClick={onCerrar}
             aria-label="Cerrar"
-            className="rounded-lg px-2 py-1.5 text-sm text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F9FAFB] hover:text-[#111827] dark:text-[#E2E8F0]"
+            className="rounded-lg px-2 py-1.5 text-sm text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F9FAFB] hover:text-[#111827] dark:hover:bg-[#334155] dark:hover:text-[#E2E8F0]"
           >
             ✕
           </button>
@@ -139,7 +139,7 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
               {detalle.propiedad && (
                 <section aria-label="Propiedad">
                   <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">Propiedad</p>
-                  <div className="rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] p-4">
+                  <div className="rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] p-4 dark:border-[#334155] dark:bg-[#0F172A]">
                     <div className="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3">
                       <Dato etiqueta="Desarrollo" valor={detalle.propiedad.desarrollo} />
                       <Dato etiqueta="Unidad" valor={detalle.propiedad.unidadCodigo} />
@@ -167,11 +167,11 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
                 ) : (
                   <ul className="max-h-64 space-y-2 overflow-y-auto">
                     {detalle.historial.map((h, i) => (
-                      <li key={i} className="flex items-baseline justify-between gap-3 rounded-lg border border-[#E5E7EB] px-3 py-2">
+                      <li key={i} className="flex items-baseline justify-between gap-3 rounded-lg border border-[#E5E7EB] px-3 py-2 dark:border-[#334155]">
                         <div className="min-w-0">
                           <p className="text-sm text-[#111827] dark:text-[#E2E8F0]">
                             {h.detalle}
-                            <span className="ml-2 rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600">
+                            <span className="ml-2 rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-[#334155] dark:text-[#94A3B8]">
                               {h.fuente}
                             </span>
                           </p>
diff --git a/apps/landing/src/components/Navbar.tsx b/apps/landing/src/components/Navbar.tsx
index 90fe9be..c9b7643 100644
--- a/apps/landing/src/components/Navbar.tsx
+++ b/apps/landing/src/components/Navbar.tsx
@@ -38,7 +38,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
           <DarkModeToggle />
           <span
             className={`hidden items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium sm:inline-flex ${
-              conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:text-[#94A3B8]'
+              conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:bg-[#1E293B] dark:text-[#94A3B8]'
             }`}
           >
             <span
@@ -52,7 +52,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
               type="button"
               onClick={onConfiguraciones}
               title="Configuraciones"
-              className="flex h-8 w-8 items-center justify-center rounded-lg text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] hover:text-accent"
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] dark:hover:bg-[#334155] hover:text-accent"
               aria-label="Abrir configuraciones"
             >
               ⚙
@@ -70,7 +70,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
         <button
           type="button"
           onClick={() => setMenuAbierto((v) => !v)}
-          className="flex h-8 w-8 items-center justify-center rounded-lg text-[#4B5563] dark:text-[#CBD5E1] transition-colors hover:bg-[#F1F5F9] md:hidden"
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-[#4B5563] dark:text-[#CBD5E1] transition-colors hover:bg-[#F1F5F9] dark:hover:bg-[#334155] md:hidden"
           aria-label={menuAbierto ? 'Cerrar menú' : 'Abrir menú'}
           aria-expanded={menuAbierto}
         >
@@ -96,7 +96,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
             </div>
             <span
               className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium w-fit ${
-                conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:text-[#94A3B8]'
+                conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:bg-[#1E293B] dark:text-[#94A3B8]'
               }`}
             >
               <span
diff --git a/apps/landing/src/components/VistaContactos.tsx b/apps/landing/src/components/VistaContactos.tsx
index 30ce688..a8b2b69 100644
--- a/apps/landing/src/components/VistaContactos.tsx
+++ b/apps/landing/src/components/VistaContactos.tsx
@@ -51,7 +51,7 @@ export function VistaContactos({ onVolver }: Props) {
         <button
           type="button"
           onClick={onVolver}
-          className="rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
+          className="rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
         >
           &larr; Volver
         </button>
@@ -69,7 +69,7 @@ export function VistaContactos({ onVolver }: Props) {
             <button
               type="button"
               onClick={cargar}
-              className="mt-3 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
+              className="mt-3 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
             >
               Reintentar
             </button>
@@ -121,7 +121,7 @@ export function VistaContactos({ onVolver }: Props) {
                       <button
                         type="button"
                         onClick={() => setSeleccionado(contacto)}
-                        className="flex w-full flex-wrap items-center gap-x-4 gap-y-1 px-6 py-4 text-left transition-colors duration-100 hover:bg-[#F8FAFC] dark:bg-[#0F172A]"
+                        className="flex w-full flex-wrap items-center gap-x-4 gap-y-1 px-6 py-4 text-left transition-colors duration-100 hover:bg-[#F8FAFC] dark:bg-[#0F172A] dark:hover:bg-[#1E293B]"
                       >
                         <span className="text-sm font-semibold text-[#111827] dark:text-[#E2E8F0]">{contacto.nombre}</span>
                         {contacto.estado && (
diff --git a/apps/landing/src/components/config/AuditoriaLog.tsx b/apps/landing/src/components/config/AuditoriaLog.tsx
index 1d83c51..3ca572e 100644
--- a/apps/landing/src/components/config/AuditoriaLog.tsx
+++ b/apps/landing/src/components/config/AuditoriaLog.tsx
@@ -48,16 +48,16 @@ export function AuditoriaLog() {
 
   return (
     <div className="space-y-4">
-      <h2 className="text-sm font-semibold text-[#111827]">Registro de auditoría</h2>
+      <h2 className="text-sm font-semibold text-[#111827] dark:text-[#E2E8F0]">Registro de auditoría</h2>
 
       {/* Filtros */}
       <div className="flex flex-wrap items-end gap-3">
-        <label className="block text-xs text-[#64748B]">
+        <label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
           Entidad
           <select
             value={entidad}
             onChange={(e) => setEntidad(e.target.value)}
-            className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs"
+            className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0]"
           >
             {ENTIDADES.map((e) => (
               <option key={e} value={e}>
@@ -66,12 +66,12 @@ export function AuditoriaLog() {
             ))}
           </select>
         </label>
-        <label className="block text-xs text-[#64748B]">
+        <label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
           Usuario
           <select
             value={usuario}
             onChange={(e) => setUsuario(e.target.value)}
-            className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs"
+            className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0]"
           >
             <option value="">Todos</option>
             {usuariosLista.map((u) => (
@@ -81,28 +81,28 @@ export function AuditoriaLog() {
             ))}
           </select>
         </label>
-        <label className="block text-xs text-[#64748B]">
+        <label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
           Desde
           <input
             type="date"
             value={fechaDesde}
             onChange={(e) => setFechaDesde(e.target.value)}
-            className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs"
+            className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0]"
           />
         </label>
-        <label className="block text-xs text-[#64748B]">
+        <label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
           Hasta
           <input
             type="date"
             value={fechaHasta}
             onChange={(e) => setFechaHasta(e.target.value)}
-            className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs"
+            className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0]"
           />
         </label>
       </div>
 
       {error && (
-        <p role="alert" className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+        <p role="alert" className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
           {error}
         </p>
       )}
@@ -112,15 +112,15 @@ export function AuditoriaLog() {
       ) : (
         <>
           {/* Tabla */}
-          <div className="overflow-x-auto rounded-xl border border-[#E5E7EB]">
+          <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] dark:border-[#334155]">
             <table className="w-full text-left text-xs">
               <thead>
-                <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB]">
-                  <th className="px-3 py-2 font-medium text-[#64748B]">Fecha</th>
-                  <th className="px-3 py-2 font-medium text-[#64748B]">Usuario</th>
-                  <th className="px-3 py-2 font-medium text-[#64748B]">Acción</th>
-                  <th className="px-3 py-2 font-medium text-[#64748B]">Entidad</th>
-                  <th className="px-3 py-2 font-medium text-[#64748B]">Detalle</th>
+                <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB] dark:border-[#334155] dark:bg-[#1E293B]">
+                  <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Fecha</th>
+                  <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Usuario</th>
+                  <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Acción</th>
+                  <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Entidad</th>
+                  <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Detalle</th>
                 </tr>
               </thead>
               <tbody>
@@ -132,14 +132,14 @@ export function AuditoriaLog() {
                   </tr>
                 )}
                 {paginados.map((item) => (
-                  <tr key={item.id} className="border-b border-[#E5E7EB] last:border-0">
-                    <td className="whitespace-nowrap px-3 py-2 text-[#374151]">
+                  <tr key={item.id} className="border-b border-[#E5E7EB] dark:border-[#334155] last:border-0">
+                    <td className="whitespace-nowrap px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">
                       {new Date(item.createdAt).toLocaleString('es-MX')}
                     </td>
-                    <td className="px-3 py-2 text-[#374151]">{item.usuarioId}</td>
-                    <td className="px-3 py-2 text-[#374151]">{item.accion}</td>
-                    <td className="px-3 py-2 text-[#374151]">{item.entidad}</td>
-                    <td className="max-w-[200px] truncate px-3 py-2 text-[#64748B]">{item.detalle ?? '—'}</td>
+                    <td className="px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">{item.usuarioId}</td>
+                    <td className="px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">{item.accion}</td>
+                    <td className="px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">{item.entidad}</td>
+                    <td className="max-w-[200px] truncate px-3 py-2 text-[#64748B] dark:text-[#94A3B8]">{item.detalle ?? '—'}</td>
                   </tr>
                 ))}
               </tbody>
@@ -153,18 +153,18 @@ export function AuditoriaLog() {
                 type="button"
                 disabled={pagina <= 1}
                 onClick={() => setPagina((p) => p - 1)}
-                className="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] disabled:opacity-50"
+                className="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] disabled:opacity-50 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
               >
                 Anterior
               </button>
-              <span className="text-[#64748B]">
+              <span className="text-[#64748B] dark:text-[#94A3B8]">
                 Página {pagina} de {totalPaginas}
               </span>
               <button
                 type="button"
                 disabled={pagina >= totalPaginas}
                 onClick={() => setPagina((p) => p + 1)}
-                className="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] disabled:opacity-50"
+                className="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] disabled:opacity-50 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
               >
                 Siguiente
               </button>
diff --git a/apps/landing/src/components/config/ConfigPage.tsx b/apps/landing/src/components/config/ConfigPage.tsx
index a7f4e42..ca5b0f1 100644
--- a/apps/landing/src/components/config/ConfigPage.tsx
+++ b/apps/landing/src/components/config/ConfigPage.tsx
@@ -30,7 +30,7 @@ export function ConfigPage({ onVolver }: Props) {
         <button
           type="button"
           onClick={onVolver}
-          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] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
+          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] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
         >
           &larr; Volver
         </button>
diff --git a/apps/landing/src/components/config/ModoTrabajo.tsx b/apps/landing/src/components/config/ModoTrabajo.tsx
index dba97ba..baa3c0f 100644
--- a/apps/landing/src/components/config/ModoTrabajo.tsx
+++ b/apps/landing/src/components/config/ModoTrabajo.tsx
@@ -133,7 +133,7 @@ export function ModoTrabajo() {
           type="button"
           onClick={() => void reconectar()}
           disabled={guardando}
-          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] disabled:opacity-50 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
+          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] disabled:opacity-50 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
         >
           {guardando ? 'Procesando…' : 'Forzar reconexión'}
         </button>
diff --git a/apps/landing/src/components/config/RolesPermisos.tsx b/apps/landing/src/components/config/RolesPermisos.tsx
index 05c06c7..a218490 100644
--- a/apps/landing/src/components/config/RolesPermisos.tsx
+++ b/apps/landing/src/components/config/RolesPermisos.tsx
@@ -168,7 +168,7 @@ export function RolesPermisos() {
           type="button"
           onClick={() => void restaurar()}
           disabled={guardando}
-          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] disabled:opacity-50 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
+          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] disabled:opacity-50 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
         >
           Restaurar valores por defecto
         </button>
@@ -189,12 +189,12 @@ export function RolesPermisos() {
             <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB] dark:border-[#334155] dark:bg-[#1E293B]">
               <th className="px-4 py-3 font-medium text-[#111827] dark:text-[#E2E8F0]">Rol</th>
               {MODULOS_DISPONIBLES.map((m) => (
-                <th key={m} className="px-3 py-3 text-center text-xs font-medium text-[#64748B]">
+                <th key={m} className="px-3 py-3 text-center text-xs font-medium text-[#64748B] dark:text-[#94A3B8]">
                   {MODULO_LABELS[m] ?? m}
                 </th>
               ))}
               {ACCIONES_DISPONIBLES.map((a) => (
-                <th key={a} className="px-3 py-3 text-center text-xs font-medium text-[#64748B]">
+                <th key={a} className="px-3 py-3 text-center text-xs font-medium text-[#64748B] dark:text-[#94A3B8]">
                   {ACCION_LABELS[a] ?? a}
                 </th>
               ))}
diff --git a/apps/landing/src/components/config/Sistema.tsx b/apps/landing/src/components/config/Sistema.tsx
index e6f221c..a7120d2 100644
--- a/apps/landing/src/components/config/Sistema.tsx
+++ b/apps/landing/src/components/config/Sistema.tsx
@@ -17,7 +17,7 @@ const TTL_OPTIONS = [
   { value: '1440', label: '24 horas' },
 ]
 
-const labelEstilo = 'block text-xs font-medium text-[#4B5563]'
+const labelEstilo = 'block text-xs font-medium text-[#4B5563] dark:text-[#CBD5E1]'
 const inputEstilo =
   '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 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0]'
 
@@ -168,8 +168,8 @@ export function Sistema() {
             />
           </button>
           <div>
-            <p className="text-sm font-medium text-[#111827]">Mostrar precios en PDF</p>
-            <p className="text-xs text-[#64748B]">Controla si se muestra el descuento en el PDF del cotizador.</p>
+            <p className="text-sm font-medium text-[#111827] dark:text-[#E2E8F0]">Mostrar precios en PDF</p>
+            <p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Controla si se muestra el descuento en el PDF del cotizador.</p>
           </div>
         </div>
 
@@ -194,8 +194,8 @@ export function Sistema() {
             />
           </button>
           <div>
-            <p className="text-sm font-medium text-[#111827]">Logout automático</p>
-            <p className="text-xs text-[#64748B]">Cerrar sesión automáticamente al recibir 401.</p>
+            <p className="text-sm font-medium text-[#111827] dark:text-[#E2E8F0]">Logout automático</p>
+            <p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Cerrar sesión automáticamente al recibir 401.</p>
           </div>
         </div>
       </div>
diff --git a/apps/landing/src/components/config/Usuarios.tsx b/apps/landing/src/components/config/Usuarios.tsx
index 28f7935..0e94455 100644
--- a/apps/landing/src/components/config/Usuarios.tsx
+++ b/apps/landing/src/components/config/Usuarios.tsx
@@ -162,7 +162,7 @@ export function Usuarios() {
           <tbody>
             {filtrados.length === 0 ? (
               <tr>
-                <td colSpan={5} className="px-4 py-6 text-center text-sm text-[#64748B]">
+                <td colSpan={5} className="px-4 py-6 text-center text-sm text-[#64748B] dark:text-[#94A3B8]">
                   No se encontraron usuarios.
                 </td>
               </tr>
diff --git a/apps/landing/src/index.css b/apps/landing/src/index.css
index bf3dfcc..06766e6 100644
--- a/apps/landing/src/index.css
+++ b/apps/landing/src/index.css
@@ -10,7 +10,7 @@
 
 @layer base {
   body {
-    @apply bg-[#F8FAFC] text-[#111827] antialiased;
+    @apply bg-[#F8FAFC] text-[#111827] antialiased dark:bg-[#0F172A] dark:text-[#E2E8F0];
   }
 
   /* Foco visible accesible: anillo azul en elementos interactivos */