diff --git a/apps/alta-clientes/src/components/BotonOcrIne.tsx b/apps/alta-clientes/src/components/BotonOcrIne.tsx
index 90b90bb..fae8f3a 100644
--- a/apps/alta-clientes/src/components/BotonOcrIne.tsx
+++ b/apps/alta-clientes/src/components/BotonOcrIne.tsx
@@ -84,7 +84,7 @@ export default function BotonOcrIne({ archivo, onAplicar }: Props) {
   }
 
   return (
-    <div className="rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm">
+    <div className="rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
       <div className="flex items-center justify-between gap-4">
         <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">Lectura automática (OCR)</p>
         <button
diff --git a/apps/alta-clientes/src/components/FileUploader.tsx b/apps/alta-clientes/src/components/FileUploader.tsx
index fff9a83..d598e28 100644
--- a/apps/alta-clientes/src/components/FileUploader.tsx
+++ b/apps/alta-clientes/src/components/FileUploader.tsx
@@ -76,7 +76,7 @@ export default function FileUploader({ slot, etiqueta, documento, onAgregar, onQ
 
   if (documento) {
     return (
-      <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 items-center justify-between gap-4 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
         <div className="flex min-w-0 items-center gap-4">
           {urlObjeto && <Miniatura documento={documento} url={urlObjeto} />}
           <div className="min-w-0">
@@ -89,7 +89,7 @@ export default function FileUploader({ slot, etiqueta, documento, onAgregar, onQ
         <button
           type="button"
           onClick={() => onQuitar(slot)}
-          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"
+          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 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400"
         >
           Quitar
         </button>
diff --git a/apps/cobranza/src/components/ModalAbono.tsx b/apps/cobranza/src/components/ModalAbono.tsx
index 4161cf1..300973a 100644
--- a/apps/cobranza/src/components/ModalAbono.tsx
+++ b/apps/cobranza/src/components/ModalAbono.tsx
@@ -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 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]'}`}
+              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 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0] ${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 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]'}`}
+              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 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0] ${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 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]'}`}
+              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 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0] ${errors.referencia ? 'border-red-400' : 'border-[#D1D5DB]'}`}
               placeholder="SPEI-000123"
               {...register('referencia')}
             />
diff --git a/apps/cobranza/src/pages/DashboardPage.tsx b/apps/cobranza/src/pages/DashboardPage.tsx
index affc33b..7f085d8 100644
--- a/apps/cobranza/src/pages/DashboardPage.tsx
+++ b/apps/cobranza/src/pages/DashboardPage.tsx
@@ -298,13 +298,13 @@ export default function DashboardPage() {
         {/* Filtros */}
         <div className="flex flex-wrap items-center gap-3 border-b border-[#E5E7EB] p-4 md:gap-4 md:px-5">
         {/* Toggle Mis planes / Todos (?mios=1 filtra en el API por el vendedor del token) */}
-        <div className="flex rounded-lg border border-[#D1D5DB] bg-white" role="group" aria-label="Alcance de planes">
+        <div className="flex rounded-lg border border-[#D1D5DB] bg-white dark:border-[#334155] dark:bg-[#0F172A]" role="group" aria-label="Alcance de planes">
           <button
             type="button"
             onClick={() => actualizarParams({ vista: mios ? null : 'mios' })}
             aria-pressed={mios}
             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] dark:text-[#94A3B8] hover:text-[#111827] dark:text-[#E2E8F0]'
+              mios ? 'bg-accent text-white shadow-sm' : 'bg-white text-[#64748B] dark:text-[#94A3B8] hover:text-[#111827] dark:hover:text-[#E2E8F0] dark:bg-[#0F172A] dark:hover:bg-[#1E293B]'
             }`}
           >
             Mis planes
@@ -314,7 +314,7 @@ export default function DashboardPage() {
             onClick={() => actualizarParams({ vista: mios ? 'todos' : null })}
             aria-pressed={!mios}
             className={`rounded-r-lg px-4 py-2.5 text-sm font-medium transition-all duration-100 ease-out ${
-              mios ? 'bg-white text-[#64748B] dark:text-[#94A3B8] hover:text-[#111827] dark:text-[#E2E8F0]' : 'bg-accent text-white shadow-sm'
+              mios ? 'bg-white text-[#64748B] dark:text-[#94A3B8] hover:text-[#111827] dark:hover:text-[#E2E8F0] dark:bg-[#0F172A] dark:hover:bg-[#1E293B]' : 'bg-accent text-white shadow-sm'
             }`}
           >
             Todos
diff --git a/apps/cotizador/src/pages/CotizadorPage.tsx b/apps/cotizador/src/pages/CotizadorPage.tsx
index 247d2ef..c8bafbc 100644
--- a/apps/cotizador/src/pages/CotizadorPage.tsx
+++ b/apps/cotizador/src/pages/CotizadorPage.tsx
@@ -44,7 +44,7 @@ const esquemaCliente = z.object({
 type FormularioCliente = z.infer<typeof esquemaCliente>
 
 const campoInputBase =
-  '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'
+  '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 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0]'
 const campoInput = `${campoInputBase} border-[#D1D5DB]`
 const campoInputError = `${campoInputBase} border-red-400`
 
@@ -358,7 +358,7 @@ export default function CotizadorPage() {
                             className={`px-4 py-2.5 text-xs font-medium transition-colors duration-100 ${
                               activo
                                 ? 'bg-accent text-white'
-                                : 'bg-white text-[#4B5563] dark:text-[#CBD5E1] hover:bg-[#F9FAFB]'
+                                : 'bg-white text-[#4B5563] dark:text-[#CBD5E1] hover:bg-[#F9FAFB] dark:bg-[#0F172A] dark:hover:bg-[#1E293B]'
                             }`}
                           >
                             {obtenerDesarrollo(id).nombre}
@@ -398,7 +398,7 @@ export default function CotizadorPage() {
                         className={`px-5 py-2.5 text-xs font-medium transition-colors duration-100 ${
                           activo
                             ? 'bg-accent text-white'
-                            : 'bg-white text-[#4B5563] dark:text-[#CBD5E1] hover:bg-[#F9FAFB]'
+                            : 'bg-white text-[#4B5563] dark:text-[#CBD5E1] hover:bg-[#F9FAFB] dark:bg-[#0F172A] dark:hover:bg-[#1E293B]'
                         }`}
                       >
                         {opcion}
@@ -549,7 +549,7 @@ export default function CotizadorPage() {
           {/* Panel de propuestas */}
           <section className="min-w-0">
             {!unidad ? (
-              <div className="flex h-64 items-center justify-center rounded-xl border border-dashed border-[#D1D5DB] bg-white">
+              <div className="flex h-64 items-center justify-center rounded-xl border border-dashed border-[#D1D5DB] bg-white dark:border-[#334155] dark:bg-[#0F172A]">
                 <p className="text-sm text-[#64748B] dark:text-[#94A3B8]">
                   Selecciona una unidad para ver las propuestas comerciales.
                 </p>
@@ -595,7 +595,7 @@ export default function CotizadorPage() {
                       type="button"
                       onClick={handleCompartir}
                       disabled={!puedeGenerarPdf}
-                      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"
+                      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 dark:bg-[#0F172A] dark:border-accent dark:text-accent"
                     >
                       Compartir
                     </button>
diff --git a/apps/dashboards/src/components/MiTablero.tsx b/apps/dashboards/src/components/MiTablero.tsx
index 05d160a..9de4e81 100644
--- a/apps/dashboards/src/components/MiTablero.tsx
+++ b/apps/dashboards/src/components/MiTablero.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Cell, Funnel, FunnelChart, LabelList, ResponsiveContainer, Tooltip } from 'recharts'
+import { tooltipProps } from '../lib/chart-theme'
 import KpiCard from './KpiCard'
 import { EstadoVacio, TarjetaGrafica, type AccionesTablero } from './comunes'
 import { funnelMisLeads, type ResumenMiDia } from '../lib/mi-tablero'
@@ -95,7 +96,7 @@ export default function MiTablero({ alCambiarAcciones }: { alCambiarAcciones: (a
                 <div className="h-72">
                   <ResponsiveContainer width="100%" height="100%">
                     <FunnelChart>
-                      <Tooltip />
+                      <Tooltip {...tooltipProps()} />
                       <Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
                         {funnel.map((etapa, i) => (
                           <Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
diff --git a/apps/dashboards/src/components/Perfilamiento.tsx b/apps/dashboards/src/components/Perfilamiento.tsx
index e5240ee..8a47a5b 100644
--- a/apps/dashboards/src/components/Perfilamiento.tsx
+++ b/apps/dashboards/src/components/Perfilamiento.tsx
@@ -1,4 +1,5 @@
 import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { axisTextColor, gridStroke, tooltipProps } from '../lib/chart-theme'
 import { EstadoVacio, TituloSeccion } from './comunes'
 import { rebanadasDe, type ResumenReportes } from '../lib/reportes'
 
@@ -28,10 +29,10 @@ function TarjetaDimension({ titulo, datos }: { titulo: string; datos: Record<str
         <div className="h-48">
           <ResponsiveContainer width="100%" height="100%">
             <BarChart data={rebanadas} layout="vertical" margin={{ top: 4, right: 24, left: 24, bottom: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" horizontal={false} />
-              <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} />
-              <YAxis type="category" dataKey="nombre" width={90} tick={{ fontSize: 11 }} />
-              <Tooltip />
+              <CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} horizontal={false} />
+              <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11, fill: axisTextColor() }} />
+              <YAxis type="category" dataKey="nombre" width={90} tick={{ fontSize: 11, fill: axisTextColor() }} />
+              <Tooltip {...tooltipProps()} />
               <Bar dataKey="valor" name="Leads" fill="#2563EB" isAnimationActive={false} />
             </BarChart>
           </ResponsiveContainer>
diff --git a/apps/dashboards/src/components/TableroGeneral.tsx b/apps/dashboards/src/components/TableroGeneral.tsx
index 2ee290e..96eecdc 100644
--- a/apps/dashboards/src/components/TableroGeneral.tsx
+++ b/apps/dashboards/src/components/TableroGeneral.tsx
@@ -15,6 +15,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts'
+import { axisTextColor, gridStroke, tooltipProps } from '../lib/chart-theme'
 import KpiCard from './KpiCard'
 import Perfilamiento from './Perfilamiento'
 import SeccionEquipo from './SeccionEquipo'
@@ -160,10 +161,10 @@ export default function TableroGeneral({
                   <div className="h-72">
                     <ResponsiveContainer width="100%" height="100%">
                       <BarChart data={unidades} margin={{ top: 8, right: 8, left: -16, bottom: 0 }}>
-                        <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                        <XAxis dataKey="desarrollo" tick={{ fontSize: 11 }} />
-                        <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
-                        <Tooltip />
+                        <CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} vertical={false} />
+                        <XAxis dataKey="desarrollo" tick={{ fontSize: 11, fill: axisTextColor() }} />
+                        <YAxis allowDecimals={false} tick={{ fontSize: 11, fill: axisTextColor() }} />
+                        <Tooltip {...tooltipProps()} />
                         <Legend wrapperStyle={{ fontSize: 11 }} />
                         {Object.keys(COLORES_STATUS).map((status) => (
                           <Bar key={status} dataKey={status} stackId="unidades" fill={COLORES_STATUS[status]} />
@@ -183,10 +184,10 @@ export default function TableroGeneral({
                   <div className="h-80">
                     <ResponsiveContainer width="100%" height="100%">
                       <BarChart data={pipeline} layout="vertical" margin={{ top: 8, right: 24, left: 24, bottom: 0 }}>
-                        <CartesianGrid strokeDasharray="3 3" horizontal={false} />
-                        <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} />
-                        <YAxis type="category" dataKey="etapa" width={90} tick={{ fontSize: 11 }} />
-                        <Tooltip />
+                        <CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} horizontal={false} />
+                        <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11, fill: axisTextColor() }} />
+                        <YAxis type="category" dataKey="etapa" width={90} tick={{ fontSize: 11, fill: axisTextColor() }} />
+                        <Tooltip {...tooltipProps()} />
                         <Bar dataKey="valor" name="Unidades" fill="#2563EB" isAnimationActive={false} />
                       </BarChart>
                     </ResponsiveContainer>
@@ -203,7 +204,7 @@ export default function TableroGeneral({
                   <div className="h-72">
                     <ResponsiveContainer width="100%" height="100%">
                       <FunnelChart>
-                        <Tooltip />
+                        <Tooltip {...tooltipProps()} />
                         <Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
                           {funnel.map((etapa, i) => (
                             <Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
@@ -226,6 +227,7 @@ export default function TableroGeneral({
                   <div className="h-72">
                     <ResponsiveContainer width="100%" height="100%">
                       <PieChart>
+                        <Tooltip {...tooltipProps()} />
                         <Pie
                           data={cobranza}
                           dataKey="valor"
@@ -240,7 +242,6 @@ export default function TableroGeneral({
                             <Cell key={rebanada.nombre} fill={COLORES_COBRANZA[i % COLORES_COBRANZA.length]} />
                           ))}
                         </Pie>
-                        <Tooltip />
                       </PieChart>
                     </ResponsiveContainer>
                   </div>
diff --git a/apps/dashboards/src/index.css b/apps/dashboards/src/index.css
index 038e755..a9dd8fc 100644
--- a/apps/dashboards/src/index.css
+++ b/apps/dashboards/src/index.css
@@ -8,6 +8,21 @@
   --color-accent-hover: #1D4ED8;
 }
 
+:root {
+  --chart-grid: #E5E7EB;
+  --chart-text: #64748B;
+  --chart-tooltip-bg: white;
+  --chart-tooltip-border: #E5E7EB;
+  --chart-tooltip-text: #111827;
+}
+.dark {
+  --chart-grid: #334155;
+  --chart-text: #94A3B8;
+  --chart-tooltip-bg: #1E293B;
+  --chart-tooltip-border: #334155;
+  --chart-tooltip-text: #E2E8F0;
+}
+
 @layer base {
   body {
     @apply bg-[#F8FAFC] text-[#111827] antialiased;
diff --git a/apps/dashboards/src/lib/chart-theme.ts b/apps/dashboards/src/lib/chart-theme.ts
new file mode 100644
index 0000000..b8c4cdc
--- /dev/null
+++ b/apps/dashboards/src/lib/chart-theme.ts
@@ -0,0 +1,24 @@
+/**
+ * Helpers de tema para gráficas Recharts.
+ *
+ * Recharts renderiza SVG puro y no resuelve CSS custom properties en
+ * atributos como `fill` / `stroke`, así que necesitamos funciones que
+ * lean el estado dark-mode del documento y devuelvan los colores
+ * apropiados como strings literales.
+ */
+
+/** `true` cuando el `<html>` lleva la clase `dark` (Tailwind convention). */
+export const isDark = (): boolean =>
+  typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+
+/** Color de texto para los ejes (XAxis / YAxis tick fill). */
+export const axisTextColor = (): string => (isDark() ? '#94A3B8' : '#64748B')
+
+/** Color de la cuadrícula (CartesianGrid stroke). */
+export const gridStroke = (): string => (isDark() ? '#334155' : '#E5E7EB')
+
+/** Props comunes de Tooltip para aplicar estilo dark/light. */
+export const tooltipProps = (): Record<string, unknown> =>
+  isDark()
+    ? { contentStyle: { backgroundColor: '#1E293B', borderColor: '#334155', color: '#E2E8F0', borderRadius: 8, fontSize: 12 } }
+    : { contentStyle: { borderRadius: 8, fontSize: 12 } }
diff --git a/apps/dashboards/src/pages/DashboardPage.tsx b/apps/dashboards/src/pages/DashboardPage.tsx
index e132931..7650cad 100644
--- a/apps/dashboards/src/pages/DashboardPage.tsx
+++ b/apps/dashboards/src/pages/DashboardPage.tsx
@@ -64,7 +64,7 @@ export default function DashboardPage() {
             <DarkModeToggle />
             {permitidas.length > 1 && (
               <div
-                className="inline-flex rounded-lg border border-[#E5E7EB] bg-[#F1F5F9] p-0.5 sm:p-1"
+                className="inline-flex rounded-lg border border-[#E5E7EB] bg-[#F1F5F9] p-0.5 dark:border-[#334155] dark:bg-[#1E293B] sm:p-1"
                 role="tablist"
                 aria-label="Vista del tablero"
               >
@@ -77,8 +77,8 @@ export default function DashboardPage() {
                     onClick={() => setElegida(v.id)}
                     className={
                       vista === v.id
-                        ? 'rounded-md bg-white px-2 py-1.5 text-[10px] font-medium text-[#111827] dark:text-[#E2E8F0] shadow-sm transition-all duration-100 ease-out sm:px-3 sm:text-xs'
-                        : 'rounded-md px-2 py-1.5 text-[10px] font-medium text-[#64748B] dark:text-[#94A3B8] transition-all duration-100 ease-out hover:text-[#111827] dark:text-[#E2E8F0] sm:px-3 sm:text-xs'
+                        ? 'rounded-md bg-white px-2 py-1.5 text-[10px] font-medium text-[#111827] dark:text-[#E2E8F0] shadow-sm transition-all duration-100 ease-out sm:px-3 sm:text-xs dark:bg-[#1E293B]'
+                        : 'rounded-md px-2 py-1.5 text-[10px] font-medium text-[#64748B] dark:text-[#94A3B8] transition-all duration-100 ease-out hover:text-[#111827] dark:hover:text-[#E2E8F0] sm:px-3 sm:text-xs'
                     }
                   >
                     {v.etiqueta}
diff --git a/apps/landing/src/components/config/ConfigPage.tsx b/apps/landing/src/components/config/ConfigPage.tsx
index bd61e3e..a7f4e42 100644
--- a/apps/landing/src/components/config/ConfigPage.tsx
+++ b/apps/landing/src/components/config/ConfigPage.tsx
@@ -30,18 +30,18 @@ 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]"
+          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]"
         >
           &larr; Volver
         </button>
-        <h1 className="text-2xl font-semibold tracking-tight text-[#111827] sm:text-3xl">
+        <h1 className="text-2xl font-semibold tracking-tight text-[#111827] dark:text-[#E2E8F0] sm:text-3xl">
           Configuraciones
         </h1>
       </div>
 
       {/* Tabs */}
       <nav aria-label="Tabs de configuraciones" className="mt-8">
-        <ul className="flex gap-1 rounded-xl border border-[#E5E7EB] bg-[#F9FAFB] p-1">
+        <ul className="flex gap-1 rounded-xl border border-[#E5E7EB] bg-[#F9FAFB] p-1 dark:border-[#1E293B] dark:bg-[#1E293B]">
           {tabs.map((t) => (
             <li key={t.key}>
               <button
@@ -49,8 +49,8 @@ export function ConfigPage({ onVolver }: Props) {
                 onClick={() => setTab(t.key)}
                 className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
                   tab === t.key
-                    ? 'bg-white text-[#111827] shadow-sm'
-                    : 'text-[#64748B] hover:text-[#374151]'
+                    ? 'bg-white text-[#111827] shadow-sm dark:bg-[#1E293B] dark:text-[#E2E8F0]'
+                    : 'text-[#64748B] hover:text-[#374151] dark:text-[#94A3B8] dark:hover:text-[#CBD5E1]'
                 }`}
               >
                 {t.label}
diff --git a/apps/landing/src/components/config/ModoTrabajo.tsx b/apps/landing/src/components/config/ModoTrabajo.tsx
index 7e90a4d..dba97ba 100644
--- a/apps/landing/src/components/config/ModoTrabajo.tsx
+++ b/apps/landing/src/components/config/ModoTrabajo.tsx
@@ -75,22 +75,22 @@ export function ModoTrabajo() {
 
   if (cargando) {
     return (
-      <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
-        <p className="text-sm text-[#64748B]">Cargando estado del sistema…</p>
+      <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
+        <p className="text-sm text-[#64748B] dark:text-[#94A3B8]">Cargando estado del sistema…</p>
       </div>
     )
   }
 
   return (
-    <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
-      <h2 className="text-lg font-semibold text-[#111827]">Modo de trabajo</h2>
+    <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
+      <h2 className="text-lg font-semibold text-[#111827] dark:text-[#E2E8F0]">Modo de trabajo</h2>
 
       {/* Indicador del estado de Monday */}
       <div className="mt-4 flex items-center gap-2">
         <span
           className={`h-2.5 w-2.5 rounded-full ${estado?.mondayOk ? 'bg-green-500' : 'bg-red-500'}`}
         />
-        <span className="text-sm text-[#64748B]">
+        <span className="text-sm text-[#64748B] dark:text-[#94A3B8]">
           Monday: {estado?.mondayOk ? 'Conectado' : 'No disponible'}
           {estado && ` · ${estado.pendientesSync} pendiente(s) de sincronizar`}
         </span>
@@ -116,10 +116,10 @@ export function ModoTrabajo() {
           />
         </button>
         <div>
-          <p className="text-sm font-medium text-[#111827]">
+          <p className="text-sm font-medium text-[#111827] dark:text-[#E2E8F0]">
             {modoLocal ? 'Modo local (sin Monday)' : 'Vinculado a Monday'}
           </p>
-          <p className="mt-0.5 text-xs text-[#64748B]">
+          <p className="mt-0.5 text-xs text-[#64748B] dark:text-[#94A3B8]">
             {modoLocal
               ? 'Las capturas se guardan localmente y se sincronizarán cuando Monday esté disponible.'
               : 'Los leads, actividades y contactos se sincronizan con Monday en tiempo real.'}
@@ -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"
+          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]"
         >
           {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 15382e3..05c06c7 100644
--- a/apps/landing/src/components/config/RolesPermisos.tsx
+++ b/apps/landing/src/components/config/RolesPermisos.tsx
@@ -146,8 +146,8 @@ export function RolesPermisos() {
 
   if (cargando) {
     return (
-      <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
-        <p className="text-sm text-[#64748B]">Cargando configuración de roles…</p>
+      <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
+        <p className="text-sm text-[#64748B] dark:text-[#94A3B8]">Cargando configuración de roles…</p>
       </div>
     )
   }
@@ -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"
+          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]"
         >
           Restaurar valores por defecto
         </button>
@@ -183,11 +183,11 @@ export function RolesPermisos() {
       )}
 
       {/* Tabla de roles */}
-      <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
+      <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
         <table className="w-full text-left text-sm">
           <thead>
-            <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB]">
-              <th className="px-4 py-3 font-medium text-[#111827]">Rol</th>
+            <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]">
                   {MODULO_LABELS[m] ?? m}
@@ -205,8 +205,8 @@ export function RolesPermisos() {
               const estado = edicion[r.rol]
               if (!estado) return null
               return (
-                <tr key={r.rol} className="border-b border-[#E5E7EB] last:border-0">
-                  <td className="whitespace-nowrap px-4 py-3 font-medium text-[#111827]">
+                <tr key={r.rol} className="border-b border-[#E5E7EB] dark:border-[#334155] last:border-0">
+                  <td className="whitespace-nowrap px-4 py-3 font-medium text-[#111827] dark:text-[#E2E8F0]">
                     {r.rol}
                   </td>
                   {MODULOS_DISPONIBLES.map((m) => (
diff --git a/apps/landing/src/components/config/Sistema.tsx b/apps/landing/src/components/config/Sistema.tsx
index b5ebdf0..e6f221c 100644
--- a/apps/landing/src/components/config/Sistema.tsx
+++ b/apps/landing/src/components/config/Sistema.tsx
@@ -19,7 +19,7 @@ const TTL_OPTIONS = [
 
 const labelEstilo = 'block text-xs font-medium text-[#4B5563]'
 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'
+  '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]'
 
 export function Sistema() {
   const [form, setForm] = useState<Formulario>({
@@ -75,15 +75,15 @@ export function Sistema() {
 
   if (cargando) {
     return (
-      <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
-        <p className="text-sm text-[#64748B]">Cargando configuraciones…</p>
+      <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
+        <p className="text-sm text-[#64748B] dark:text-[#94A3B8]">Cargando configuraciones…</p>
       </div>
     )
   }
 
   return (
-    <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
-      <h2 className="text-lg font-semibold text-[#111827]">Configuración del sistema</h2>
+    <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
+      <h2 className="text-lg font-semibold text-[#111827] dark:text-[#E2E8F0]">Configuración del sistema</h2>
 
       <div className="mt-6 grid gap-6 sm:grid-cols-2">
         {/* Recordatorio inactividad */}
diff --git a/apps/landing/src/components/config/Usuarios.tsx b/apps/landing/src/components/config/Usuarios.tsx
index 469247b..28f7935 100644
--- a/apps/landing/src/components/config/Usuarios.tsx
+++ b/apps/landing/src/components/config/Usuarios.tsx
@@ -120,8 +120,8 @@ export function Usuarios() {
 
   if (cargando) {
     return (
-      <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
-        <p className="text-sm text-[#64748B]">Cargando usuarios…</p>
+      <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
+        <p className="text-sm text-[#64748B] dark:text-[#94A3B8]">Cargando usuarios…</p>
       </div>
     )
   }
@@ -133,8 +133,8 @@ export function Usuarios() {
       )}
 
       {/* Búsqueda */}
-      <div className="rounded-xl border border-[#E5E7EB] bg-white p-4 shadow-sm">
-        <label htmlFor="buscar-usuario" className="block text-xs font-medium text-[#4B5563]">
+      <div className="rounded-xl border border-[#E5E7EB] bg-white p-4 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
+        <label htmlFor="buscar-usuario" className="block text-xs font-medium text-[#4B5563] dark:text-[#CBD5E1]">
           Buscar usuario
         </label>
         <input
@@ -143,20 +143,20 @@ export function Usuarios() {
           value={busqueda}
           onChange={(e) => setBusqueda(e.target.value)}
           placeholder="Nombre o usuario…"
-          className="mt-2 w-full max-w-sm rounded-lg border border-[#D1D5DB] bg-white px-3 py-2 text-sm text-[#111827] transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
+          className="mt-2 w-full max-w-sm rounded-lg border border-[#D1D5DB] bg-white px-3 py-2 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]"
         />
       </div>
 
       {/* Tabla */}
-      <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
+      <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B]">
         <table className="w-full text-left text-sm">
           <thead>
-            <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB]">
-              <th className="px-4 py-3 font-medium text-[#111827]">Nombre</th>
-              <th className="px-4 py-3 font-medium text-[#111827]">Usuario</th>
-              <th className="px-4 py-3 font-medium text-[#111827]">Rol</th>
-              <th className="px-4 py-3 font-medium text-[#111827]">Asignación</th>
-              <th className="px-4 py-3 text-center font-medium text-[#111827]">Activo</th>
+            <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]">Nombre</th>
+              <th className="px-4 py-3 font-medium text-[#111827] dark:text-[#E2E8F0]">Usuario</th>
+              <th className="px-4 py-3 font-medium text-[#111827] dark:text-[#E2E8F0]">Rol</th>
+              <th className="px-4 py-3 font-medium text-[#111827] dark:text-[#E2E8F0]">Asignación</th>
+              <th className="px-4 py-3 text-center font-medium text-[#111827] dark:text-[#E2E8F0]">Activo</th>
             </tr>
           </thead>
           <tbody>
@@ -168,14 +168,14 @@ export function Usuarios() {
               </tr>
             ) : (
               filtrados.map((u) => (
-                <tr key={u.id} className="border-b border-[#E5E7EB] last:border-0">
-                  <td className="whitespace-nowrap px-4 py-3 text-[#111827]">{u.nombre}</td>
-                  <td className="whitespace-nowrap px-4 py-3 text-[#64748B]">{u.username}</td>
+                <tr key={u.id} className="border-b border-[#E5E7EB] dark:border-[#334155] last:border-0">
+                  <td className="whitespace-nowrap px-4 py-3 text-[#111827] dark:text-[#E2E8F0]">{u.nombre}</td>
+                  <td className="whitespace-nowrap px-4 py-3 text-[#64748B] dark:text-[#94A3B8]">{u.username}</td>
                   <td className="px-4 py-3">
                     <select
                       value={u.rol}
                       onChange={(e) => void cambiarRol(u.id, e.target.value)}
-                      className="rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs text-[#111827] focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
+                      className="rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs text-[#111827] focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0]"
                     >
                       {ROLES.map((r) => (
                         <option key={r} value={r}>{ROL_LABELS[r]}</option>
@@ -186,7 +186,7 @@ export function Usuarios() {
                     <select
                       value={u.asignacion ?? ''}
                       onChange={(e) => void cambiarAsignacion(u.id, e.target.value)}
-                      className="rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs text-[#111827] focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
+                      className="rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs text-[#111827] focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0]"
                     >
                       {ASIGNACIONES.map((a) => (
                         <option key={a} value={a}>{ASIGNACION_LABELS[a]}</option>
diff --git a/apps/mi-dia/src/components/DashboardVendedor.tsx b/apps/mi-dia/src/components/DashboardVendedor.tsx
index 9600de7..719e48f 100644
--- a/apps/mi-dia/src/components/DashboardVendedor.tsx
+++ b/apps/mi-dia/src/components/DashboardVendedor.tsx
@@ -4,15 +4,13 @@ import {
   Cell,
 } from 'recharts'
 import { fetchMiTablero, type MiTablero } from '../services/reporte-mi-tablero'
+import { axisTextColor, gridStroke, tooltipProps } from '../lib/chart-theme'
 import KpiCard from './KpiCard'
 
 // ---------- Colores ----------
 
 const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6']
 
-const LIGHT_TEXT = '#64748B'
-const GRID_LIGHT = '#E5E7EB'
-
 // ---------- Sub-componentes ----------
 
 function TituloSeccion({ children }: { children: string }) {
@@ -129,16 +127,16 @@ export default function DashboardVendedor() {
           <TituloSeccion>Leads por día (últimos 30 días)</TituloSeccion>
           <ResponsiveContainer width="100%" height={260}>
             <BarChart data={tablero.leadsPorDia} margin={{ top: 8, right: 4, left: -16, bottom: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke={GRID_LIGHT} vertical={false} />
+              <CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} vertical={false} />
               <XAxis
                 dataKey="fecha"
                 tickFormatter={(f: string) => f.slice(8)}
-                tick={{ fontSize: 10, fill: LIGHT_TEXT }}
+                tick={{ fontSize: 10, fill: axisTextColor() }}
                 interval="preserveStartEnd"
               />
-              <YAxis tick={{ fontSize: 10, fill: LIGHT_TEXT }} allowDecimals={false} />
+              <YAxis tick={{ fontSize: 10, fill: axisTextColor() }} allowDecimals={false} />
               <Tooltip
-                contentStyle={{ fontSize: 12, borderRadius: 8 }}
+                {...tooltipProps()}
                 labelFormatter={(f: unknown) => `Fecha: ${String(f)}`}
                 formatter={(value: unknown) => [`${Number(value)} leads`, "Leads"]}
               />
@@ -166,16 +164,16 @@ export default function DashboardVendedor() {
           ) : (
             <ResponsiveContainer width="100%" height={260}>
               <BarChart data={datosOrigen} layout="vertical" margin={{ top: 8, right: 16, left: 8, bottom: 0 }}>
-                <CartesianGrid strokeDasharray="3 3" stroke={GRID_LIGHT} horizontal={false} />
-                <XAxis type="number" tick={{ fontSize: 10, fill: LIGHT_TEXT }} allowDecimals={false} />
+                <CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} horizontal={false} />
+                <XAxis type="number" tick={{ fontSize: 10, fill: axisTextColor() }} allowDecimals={false} />
                 <YAxis
                   type="category"
                   dataKey="origen"
-                  tick={{ fontSize: 10, fill: LIGHT_TEXT }}
+                  tick={{ fontSize: 10, fill: axisTextColor() }}
                   width={100}
                 />
                 <Tooltip
-                  contentStyle={{ fontSize: 12, borderRadius: 8 }}
+                  {...tooltipProps()}
                   formatter={(value: unknown, name: unknown) => [`${Number(value)}`, String(name) === "total" ? "Total" : "Convertidos"]}
                 />
                 <Bar dataKey="total" fill="#3B82F6" radius={[0, 4, 4, 0]} maxBarSize={18} />
@@ -193,16 +191,16 @@ export default function DashboardVendedor() {
           ) : (
             <ResponsiveContainer width="100%" height={260}>
               <BarChart data={datosDesarrollo} layout="vertical" margin={{ top: 8, right: 16, left: 8, bottom: 0 }}>
-                <CartesianGrid strokeDasharray="3 3" stroke={GRID_LIGHT} horizontal={false} />
-                <XAxis type="number" tick={{ fontSize: 10, fill: LIGHT_TEXT }} allowDecimals={false} />
+                <CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} horizontal={false} />
+                <XAxis type="number" tick={{ fontSize: 10, fill: axisTextColor() }} allowDecimals={false} />
                 <YAxis
                   type="category"
                   dataKey="desarrollo"
-                  tick={{ fontSize: 10, fill: LIGHT_TEXT }}
+                  tick={{ fontSize: 10, fill: axisTextColor() }}
                   width={90}
                 />
                 <Tooltip
-                  contentStyle={{ fontSize: 12, borderRadius: 8 }}
+                  {...tooltipProps()}
                   formatter={(value: unknown) => [`${Number(value)} ventas`, "Ventas"]}
                 />
                 <Bar dataKey="ventas" fill="#8B5CF6" radius={[0, 4, 4, 0]} maxBarSize={18}>
diff --git a/apps/mi-dia/src/index.css b/apps/mi-dia/src/index.css
index 038e755..a9dd8fc 100644
--- a/apps/mi-dia/src/index.css
+++ b/apps/mi-dia/src/index.css
@@ -8,6 +8,21 @@
   --color-accent-hover: #1D4ED8;
 }
 
+:root {
+  --chart-grid: #E5E7EB;
+  --chart-text: #64748B;
+  --chart-tooltip-bg: white;
+  --chart-tooltip-border: #E5E7EB;
+  --chart-tooltip-text: #111827;
+}
+.dark {
+  --chart-grid: #334155;
+  --chart-text: #94A3B8;
+  --chart-tooltip-bg: #1E293B;
+  --chart-tooltip-border: #334155;
+  --chart-tooltip-text: #E2E8F0;
+}
+
 @layer base {
   body {
     @apply bg-[#F8FAFC] text-[#111827] antialiased;
diff --git a/apps/mi-dia/src/lib/chart-theme.ts b/apps/mi-dia/src/lib/chart-theme.ts
new file mode 100644
index 0000000..b8c4cdc
--- /dev/null
+++ b/apps/mi-dia/src/lib/chart-theme.ts
@@ -0,0 +1,24 @@
+/**
+ * Helpers de tema para gráficas Recharts.
+ *
+ * Recharts renderiza SVG puro y no resuelve CSS custom properties en
+ * atributos como `fill` / `stroke`, así que necesitamos funciones que
+ * lean el estado dark-mode del documento y devuelvan los colores
+ * apropiados como strings literales.
+ */
+
+/** `true` cuando el `<html>` lleva la clase `dark` (Tailwind convention). */
+export const isDark = (): boolean =>
+  typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+
+/** Color de texto para los ejes (XAxis / YAxis tick fill). */
+export const axisTextColor = (): string => (isDark() ? '#94A3B8' : '#64748B')
+
+/** Color de la cuadrícula (CartesianGrid stroke). */
+export const gridStroke = (): string => (isDark() ? '#334155' : '#E5E7EB')
+
+/** Props comunes de Tooltip para aplicar estilo dark/light. */
+export const tooltipProps = (): Record<string, unknown> =>
+  isDark()
+    ? { contentStyle: { backgroundColor: '#1E293B', borderColor: '#334155', color: '#E2E8F0', borderRadius: 8, fontSize: 12 } }
+    : { contentStyle: { borderRadius: 8, fontSize: 12 } }
diff --git a/apps/mi-dia/src/pages/MiDiaPage.tsx b/apps/mi-dia/src/pages/MiDiaPage.tsx
index 6f416c7..b594610 100644
--- a/apps/mi-dia/src/pages/MiDiaPage.tsx
+++ b/apps/mi-dia/src/pages/MiDiaPage.tsx
@@ -236,7 +236,7 @@ function FilaOportunidad({
           type="button"
           disabled={enviando}
           onClick={onAfluencia}
-          className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:opacity-50"
+          className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:opacity-50 dark:bg-[#0F172A] dark:border-accent dark:text-accent"
         >
           Afluencia →
         </button>
@@ -277,7 +277,7 @@ function FilaOportunidad({
           type="button"
           disabled={enviando || (acciones !== undefined && !acciones.includes('descartar_lead'))}
           onClick={onDescartar}
-          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"
+          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 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400"
         >
           Descartar
         </button>
@@ -339,7 +339,7 @@ function FilaApartado({
             }}
             className={
               fase === 'Cancelacion Apartado'
-                ? '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'
+                ? '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 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400'
                 : fase === 'Firma Cliente (Venta)'
                   ? 'rounded-lg bg-accent px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50'
                   : fase === apartado.estado
@@ -422,7 +422,7 @@ function PanelDocumentosApartado({ itemId }: { itemId: string }) {
                   {slot.obligatorio && <span className="ml-1 text-red-600">*</span>}
                 </p>
                 <label
-                  className={`cursor-pointer 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 ${
+                  className={`cursor-pointer 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 dark:bg-[#0F172A] dark:border-accent dark:text-accent ${
                     subiendo !== null ? 'pointer-events-none opacity-50' : ''
                   }`}
                 >
@@ -574,7 +574,7 @@ function FilaLead({
           type="button"
           disabled={enviando}
           onClick={onConvertir}
-          className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:opacity-50"
+          className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:opacity-50 dark:bg-[#0F172A] dark:border-accent dark:text-accent"
         >
           Agendo →
         </button>
@@ -582,7 +582,7 @@ function FilaLead({
           type="button"
           disabled={enviando || (acciones !== undefined && !acciones.includes("descartar_lead"))}
           onClick={onDescartar}
-          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"
+          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 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400"
         >
           Descartar
         </button>
@@ -854,7 +854,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
           </p>
         )}
         {resumen?.sinMapeoMonday && (
-          <p className="mb-6 rounded-lg border border-[#E5E7EB] bg-white px-4 py-3 text-sm font-medium text-[#64748B] dark:text-[#94A3B8] shadow-sm">
+          <p className="mb-6 rounded-lg border border-[#E5E7EB] bg-white px-4 py-3 text-sm font-medium text-[#64748B] dark:text-[#94A3B8] shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]">
             Tu usuario aún no está vinculado a Monday; las acciones siguen funcionando
           </p>
         )}
@@ -907,7 +907,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                           <button
                             type="button"
                             onClick={() => exportarLeads(leadsFiltrados)}
-                            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]"
+                            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] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
                           >
                             Exportar
                           </button>
@@ -949,7 +949,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                           <button
                             type="button"
                             onClick={() => exportarOportunidades(opsFiltradas)}
-                            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]"
+                            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] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
                           >
                             Exportar
                           </button>
@@ -995,7 +995,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                           <button
                             type="button"
                             onClick={() => exportarApartados(apartadosFiltrados)}
-                            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]"
+                            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] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
                           >
                             Exportar
                           </button>
@@ -1040,7 +1040,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                       {resumen.misCapturas.map((c) => (
                         <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"
+                          className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                         >
                           <div>
                             <p className="flex items-center gap-2 text-sm font-medium">
@@ -1075,7 +1075,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                       {resumen.misClientes.map((c) => (
                         <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"
+                          className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                         >
                           <div>
                             <p className="text-sm font-medium">{c.nombre}</p>
@@ -1120,7 +1120,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                       {resumen.misActividadesHoy.map((a) => (
                         <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"
+                          className="flex items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                         >
                           <p className="text-sm">
                             {a.nombre}
@@ -1146,7 +1146,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                       {resumen.apartadosPorVencer.map((a) => (
                         <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"
+                          className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                         >
                           <p className="text-sm">
                             {a.nombre}
@@ -1309,7 +1309,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                     {resumen.equipo.porVendedor.map((v) => (
                       <li
                         key={v.mondayUserId}
-                        className="flex items-center justify-between rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
+                        className="flex items-center justify-between rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
                       >
                         <p className="text-sm">{v.nombre ?? `Monday #${v.mondayUserId}`}</p>
                         <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">