/* Ajustes puntuales que Tailwind (vía CDN) no cubre por sí solo. */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background-color: rgba(100, 116, 139, 0.4); border-radius: 9999px; } .htmx-request main#main-content { opacity: 0.6; transition: opacity 150ms ease-in-out; } /* Botón de acción principal: azul oscuro fijo de marca (el mismo del favicon) en toda la app, igual para todas las empresas. */ .btn-primario { background-color: #4f46e5; color: #fff; transition: filter 150ms ease-in-out; } .btn-primario:hover { filter: brightness(0.9); } body { background-color: #f1f5f9; } #carrusel-meses::-webkit-scrollbar { display: none; } /* Modo oscuro: la app usa clases de Tailwind ya escritas en cada plantilla (bg-white, text-slate-900, border-slate-200...), sin variante dark: generada por un build de Tailwind. En vez de reescribir cada plantilla, se sobreescriben aquí las clases de color más habituales cuando lleva la clase "dark", añadida por el selector de tema. Cubre la mayoría de la app; algún color puntual muy específico puede no quedar perfecto, pero el conjunto es legible y consistente. */ html.dark { color-scheme: dark; } html.dark body { background-color: #0f172a; } html.dark .bg-white, html.dark .bg-slate-50 { background-color: #1e293b !important; } html.dark .bg-slate-100 { background-color: #334155 !important; } html.dark .bg-indigo-50, html.dark .bg-indigo-50\/40, html.dark .bg-indigo-50\/60, html.dark .bg-emerald-50, html.dark .bg-emerald-50\/40, html.dark .bg-emerald-50\/60, html.dark .bg-red-50, html.dark .bg-red-50\/40, html.dark .bg-red-50\/60 { background-color: rgba(148, 163, 184, 0.12) !important; } html.dark .text-slate-900 { color: #f1f5f9 !important; } html.dark .text-slate-800, html.dark .text-slate-700 { color: #e2e8f0 !important; } html.dark .text-slate-600, html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #64748b !important; } html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300 { border-color: #334155 !important; } html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]), html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; } html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; } html.dark input, html.dark select, html.dark textarea { background-color: #1e293b; color: #f1f5f9; } html.dark ::placeholder { color: #64748b; } html.dark .shadow-sm, html.dark .shadow-lg, html.dark .shadow-2xl, html.dark .shadow-xl { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); } #selector-tema svg { transition: opacity 100ms ease-in-out; }