/* theme.css — overrides para modo oscuro de las páginas Tailwind * (index, status, signup). Funciona via clase `.dark` sobre * que aplica theme.js. * * Approach: mapeo de las clases Tailwind dominantes (descubiertas con * grep) a sus equivalentes en slate-900..slate-100. Evita tener que * spammear `dark:bg-X dark:text-Y` en cada elemento del HTML. * * Admin.html NO usa este archivo porque su look-and-feel lo maneja * Vuetify (defaultTheme = 'dark' / 'light' reactivo). */ /* ===== Body / base ===== */ html.dark { color-scheme: dark; } html.dark body { background-color: rgb(2 6 23); color: rgb(241 245 249); } /* ===== Backgrounds ===== */ html.dark .bg-white { background-color: rgb(15 23 42) !important; } html.dark .bg-slate-50 { background-color: rgb(15 23 42) !important; } html.dark .bg-slate-100 { background-color: rgb(30 41 59) !important; } html.dark .bg-slate-900 { background-color: rgb(2 6 23) !important; } html.dark .bg-slate-800 { background-color: rgb(15 23 42) !important; } /* Gradients usados en hero / footer (bg-gradient-to-* + from/to slate) * — los gradientes en sí mantienen su definición pero los slate-900 * de fondo se oscurecen extra. */ html.dark .bg-gradient-to-br.from-slate-50 { background-image: linear-gradient(to bottom right, rgb(2 6 23), rgb(15 23 42)); } html.dark .bg-gradient-to-b.from-white { background-image: linear-gradient(to bottom, rgb(15 23 42), rgb(30 41 59)); } /* ===== Text ===== * Mapeo más brillante que el original para mejorar contraste en * modo oscuro. El issue detectado en /landing en dark fue que los * text-slate-500 (captions de cards de stats + disclaimers) se veían * casi-grises sobre fondo navy. Bumpeamos un nivel: slate-500 → * slate-300, slate-600 → slate-400. Mantiene jerarquía visual y * cumple WCAG AA holgado. */ html.dark .text-slate-900 { color: rgb(241 245 249) !important; } html.dark .text-slate-800 { color: rgb(226 232 240) !important; } html.dark .text-slate-700 { color: rgb(226 232 240) !important; } html.dark .text-slate-600 { color: rgb(203 213 225) !important; } html.dark .text-slate-500 { color: rgb(203 213 225) !important; } html.dark .text-slate-400 { color: rgb(148 163 184) !important; } html.dark .text-slate-300 { color: rgb(100 116 139) !important; } /* Acentos (verdes, rojos, etc.) — un poco más claros en dark para * preservar el contraste WCAG sobre fondo oscuro. */ html.dark .text-emerald-600 { color: rgb(52 211 153) !important; } html.dark .text-emerald-700 { color: rgb(52 211 153) !important; } html.dark .text-red-600 { color: rgb(248 113 113) !important; } html.dark .text-red-700 { color: rgb(248 113 113) !important; } html.dark .text-amber-600 { color: rgb(251 191 36) !important; } html.dark .text-blue-600 { color: rgb(96 165 250) !important; } html.dark .text-purple-600 { color: rgb(192 132 252) !important; } html.dark .text-indigo-600 { color: rgb(165 180 252) !important; } /* ===== Borders ===== */ html.dark .border-slate-100 { border-color: rgb(30 41 59) !important; } html.dark .border-slate-200 { border-color: rgb(51 65 85) !important; } html.dark .border-slate-300 { border-color: rgb(71 85 105) !important; } html.dark .border-emerald-500 { border-color: rgb(16 185 129) !important; } /* ===== Pastel tints (signup CTA blocks: bg-red-50, bg-purple-50, etc.) * Las dejamos con un tinte sólido oscuro mantenedor del hue. */ html.dark .bg-red-50 { background-color: rgba(248, 113, 113, 0.08) !important; } html.dark .bg-purple-50 { background-color: rgba(192, 132, 252, 0.08) !important; } html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.08) !important; } html.dark .bg-blue-50 { background-color: rgba(96, 165, 250, 0.08) !important; } /* Shadow boost: las shadow-* de Tailwind se ven muy débiles en oscuro * porque están definidas con alpha sobre negro. Subimos la intensidad * para que las cards se diferencien del fondo. */ html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important; } html.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4) !important; } html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5) !important; } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important; } /* Inputs y forms del signup */ html.dark input, html.dark textarea, html.dark select { background-color: rgb(30 41 59); color: rgb(241 245 249); border-color: rgb(71 85 105); } html.dark input::placeholder, html.dark textarea::placeholder { color: rgb(100 116 139); }