/* ───────────────────────────────────────────────────────────────────────── Estilos complementarios a Tailwind. La mayoría del diseño se hace con utilidades en las plantillas; aquí solo van componentes reutilizables y ajustes globales que Tailwind no cubre limpiamente desde el HTML. ───────────────────────────────────────────────────────────────────────── */ /* Inputs number sin los spinners horribles del navegador. Aplicado a TODOS los inputs number — los spinners suelen estorbar más de lo que ayudan (especialmente cuando hay un sufijo flotante a la derecha que necesita ese espacio). El usuario puede teclear o usar teclas ↑↓ igual. */ input[type="number"].input::-webkit-outer-spin-button, input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"].input { -moz-appearance: textfield; } /* Inputs estilizados (usados desde widgets de forms Django) */ .input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid rgb(226 232 240); border-radius: 0.5rem; background-color: rgb(255 255 255); color: rgb(15 23 42); font-size: 0.875rem; line-height: 1.25rem; transition: border-color 120ms ease, box-shadow 120ms ease; } .input::placeholder { color: rgb(148 163 184); } .input:focus { outline: none; border-color: rgb(14 165 233); box-shadow: 0 0 0 3px rgb(14 165 233 / 0.15); } /* Dark mode para inputs y widgets de Django forms (tienen el HTML "crudo" que no podemos clasificar con dark: variants de Tailwind) */ .dark .input, .dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark input[type="number"], .dark input[type="tel"], .dark input[type="url"], .dark input[type="search"], .dark input[type="date"], .dark input[type="time"], .dark input[type="datetime-local"], .dark textarea, .dark select { background-color: rgb(30 41 59); /* slate-800 */ border-color: rgb(51 65 85); /* slate-700 */ color: rgb(226 232 240); /* slate-200 */ } .dark .input::placeholder, .dark textarea::placeholder, .dark input::placeholder { color: rgb(100 116 139); /* slate-500 */ } .dark input[type="date"], .dark input[type="datetime-local"], .dark input[type="time"] { color-scheme: dark; /* native pickers en dark mode */ } /* Scrollbar dark */ .dark aside::-webkit-scrollbar-thumb, .dark main::-webkit-scrollbar-thumb { background-color: rgb(51 65 85); } .dark aside::-webkit-scrollbar-thumb:hover, .dark main::-webkit-scrollbar-thumb:hover { background-color: rgb(71 85 105); } /* ───────────────────────────────────────────────────────────────────────── Dark-mode global overrides. En lugar de añadir `dark:bg-...` a cada elemento de las 30+ plantillas, sobrescribimos las clases Tailwind ESTÁNDAR que más se repiten dentro de `.dark`. Esto es pragmático y "automático" — funciona en todas las plantillas sin tocarlas. Para personalizaciones puntuales (ej. cards semáforo), añadimos overrides específicos o `dark:` variants in-line. Nota: usamos `!important` con moderación; sólo cuando el color es semántico (fondo de superficie / texto principal) y queremos que gane a las clases de Tailwind aplicadas con la misma especificidad. ───────────────────────────────────────────────────────────────────── */ /* Superficies (backgrounds). Jerarquía: - bg page (html): slate-950 (rgb 2 6 23) — el "void" - bg cards (white): slate-900 (rgb 15 23 42) — superficie elevada - bg hover/sub: slate-800 (rgb 30 41 59) — mayor elevación - bg slate-50 (cards alt): slate-900 igual que cards principales - bg slate-100/200 (badges): slate-800 / slate-700 */ /* html y body en dark — usamos selectores compound (no descendant) porque la clase .dark está en el propio , y un descendant combinator no matchea el mismo elemento. Sin esto, en pantallas largas con scroll el "fuera del body" muestra el slate-50 del html (corte light en dark). */ html.dark { background-color: rgb(2 6 23); } /* slate-950 */ .dark .bg-white { background-color: rgb(15 23 42); } /* slate-900 */ .dark .bg-slate-50 { background-color: rgb(30 41 59); } /* slate-800 — header stripes / table headers */ .dark .bg-slate-100 { background-color: rgb(30 41 59); } /* slate-800 — badges */ .dark .bg-slate-200 { background-color: rgb(51 65 85); } /* slate-700 */ /* Transparencias / hovers — todo coherente con la jerarquía */ .dark .bg-white\/80 { background-color: rgb(15 23 42 / 0.85); } .dark .bg-white\/85 { background-color: rgb(15 23 42 / 0.85); } .dark .bg-slate-50\/50 { background-color: rgb(2 6 23 / 0.6); } /* out-of-month: más oscuro aún */ .dark .hover\:bg-slate-50:hover { background-color: rgb(30 41 59 / 0.6); } .dark .hover\:bg-slate-100:hover { background-color: rgb(30 41 59); } /* Texto */ .dark .text-slate-900 { color: rgb(241 245 249); } /* slate-100 */ .dark .text-slate-800 { color: rgb(226 232 240); } /* slate-200 */ .dark .text-slate-700 { color: rgb(203 213 225); } /* slate-300 */ .dark .text-slate-600 { color: rgb(148 163 184); } /* slate-400 */ .dark .text-slate-500 { color: rgb(148 163 184); } /* slate-400 */ .dark .text-slate-400 { color: rgb(100 116 139); } /* slate-500 */ .dark .text-slate-300 { color: rgb(71 85 105); } /* slate-600 — para versión footer */ /* Bordes */ .dark .border-slate-100 { border-color: rgb(30 41 59); } .dark .border-slate-200 { border-color: rgb(51 65 85); } .dark .border-slate-300 { border-color: rgb(71 85 105); } .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(30 41 59); } .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(51 65 85); } /* Rings (focus, badges) */ .dark .ring-slate-200 { --tw-ring-color: rgb(51 65 85); } .dark .ring-slate-300 { --tw-ring-color: rgb(71 85 105); } /* Cards semáforo (colores suaves para activación, alertas, etc.) Subimos opacidad a 0.45/0.7 para que sobre slate-900 sigan distinguibles. */ .dark .bg-amber-50 { background-color: rgb(120 53 15 / 0.35); } /* amber-900 alpha */ .dark .bg-rose-50 { background-color: rgb(136 19 55 / 0.35); } /* rose-900 alpha */ .dark .bg-emerald-50 { background-color: rgb(6 78 59 / 0.35); } /* emerald-900 alpha */ .dark .bg-sky-50 { background-color: rgb(12 74 110 / 0.35); } /* sky-900 alpha */ .dark .bg-violet-50 { background-color: rgb(76 29 149 / 0.35); } /* violet-900 alpha */ .dark .bg-indigo-50 { background-color: rgb(49 46 129 / 0.35); } /* Chips usados en calendario / activación: opacidad alta para que el texto destaque sobre la card slate-900 — antes (0.4) quedaban washed out. */ .dark .bg-amber-100 { background-color: rgb(120 53 15 / 0.7); } .dark .bg-rose-100 { background-color: rgb(136 19 55 / 0.7); } .dark .bg-emerald-100 { background-color: rgb(6 78 59 / 0.7); } .dark .bg-sky-100 { background-color: rgb(12 74 110 / 0.7); } .dark .bg-violet-100 { background-color: rgb(76 29 149 / 0.7); } .dark .bg-indigo-100 { background-color: rgb(49 46 129 / 0.7); } /* Textos coloreados (badges) — los tonos -800 son ilegibles sobre fondo oscuro, los subimos a -200/-300 con saturación máxima. */ .dark .text-amber-800 { color: rgb(253 230 138); } /* amber-200 */ .dark .text-rose-800 { color: rgb(254 205 211); } /* rose-200 */ .dark .text-emerald-800 { color: rgb(167 243 208); } /* emerald-200 */ .dark .text-sky-800 { color: rgb(186 230 253); } /* sky-200 */ .dark .text-violet-800 { color: rgb(221 214 254); } /* violet-200 */ .dark .text-indigo-800 { color: rgb(199 210 254); } /* indigo-200 */ .dark .text-amber-700 { color: rgb(252 211 77); } .dark .text-rose-700 { color: rgb(253 164 175); } .dark .text-emerald-700 { color: rgb(110 231 183); } .dark .text-sky-700 { color: rgb(125 211 252); } .dark .text-violet-700 { color: rgb(196 181 253); } .dark .text-indigo-700 { color: rgb(165 180 252); } .dark .text-amber-600 { color: rgb(252 211 77); } .dark .text-rose-600 { color: rgb(253 164 175); } .dark .text-emerald-600 { color: rgb(110 231 183); } .dark .text-amber-900 { color: rgb(254 240 138); } /* amber-200 — contactos clave */ /* Rings de cards/chips coloreadas */ .dark .ring-rose-200 { --tw-ring-color: rgb(190 18 60 / 0.6); } .dark .ring-amber-200 { --tw-ring-color: rgb(180 83 9 / 0.6); } .dark .ring-emerald-200 { --tw-ring-color: rgb(4 120 87 / 0.6); } .dark .ring-sky-200 { --tw-ring-color: rgb(2 132 199 / 0.6); } .dark .ring-violet-200 { --tw-ring-color: rgb(124 58 237 / 0.6); } .dark .ring-indigo-200 { --tw-ring-color: rgb(79 70 229 / 0.6); } .dark .border-amber-200 { border-color: rgb(146 64 14); } .dark .border-rose-200 { border-color: rgb(159 18 57); } .dark .border-rose-300 { border-color: rgb(190 18 60); } .dark .border-emerald-200 { border-color: rgb(6 95 70); } .dark .border-sky-200 { border-color: rgb(7 89 133); } .dark .border-violet-200 { border-color: rgb(91 33 182); } .dark .border-indigo-200 { border-color: rgb(67 56 202); } /* (El gradiente del banner activación se eliminó: ahora el banner usa bg sólido + border-rose-300 que se ve igual de bien en light y dark.) */ /* Botones primarios (bg-slate-900) en dark: el contraste con el fondo slate-950 era casi nulo y se veían "transparentes" o invisibles. Aquí invertimos solo cuando es un