/* Estilos extra al CDN de Tailwind */ /* Badge de desarrollo del CDN de Tailwind — atributos exactos del CDN, sin selectores de substring */ tailwindcss-badge, [data-tailwindcss-badge], [data-tailwindcss] { display: none !important; } /* Focus rings */ input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(217, 52, 43, 0.15); border-color: #D9342B; } button:focus-visible { outline: 2px solid #D9342B; outline-offset: 2px; } /* Transición suave al cambiar tema (solo elementos estructurales) */ body, header, .bg-white, .bg-gray-50, .bg-gray-100, input, textarea, select { transition: background-color 0.2s ease, border-color 0.15s ease, color 0.1s ease; } /* ─── MODO OSCURO ────────────────────────────────────────────────────────────── Paleta: GitHub Dark (Primer) — https://primer.style/foundations/color/overview Ratios de contraste verificados contra WCAG 2.1 (mínimo AA = 4.5:1). Estrategia: override por clase Tailwind con !important. Se activa agregando .dark al elemento . ──────────────────────────────────────────────────────────────────────────── */ /* ── 1. Fondos — jerarquía de 3 niveles ── */ html.dark body { background-color: #0d1117; color: #e6edf3; } html.dark .bg-white { background-color: #161b22 !important; } /* card / header — slate equivalente */ html.dark .bg-gray-50 { background-color: #0d1117 !important; } /* page bg + table headers */ html.dark .bg-gray-100 { background-color: #0d1117 !important; } /* auth page bg + insets */ /* ── 2. Bordes ── */ html.dark .border-gray-50, html.dark .border-gray-100 { border-color: #21262d !important; } html.dark .border-gray-200 { border-color: #30363d !important; } html.dark .border-gray-300 { border-color: #444c56 !important; } html.dark .border-amber-200 { border-color: #6e4c1e !important; } html.dark .border-red-200 { border-color: #6b1c1c !important; } html.dark .border-green-200 { border-color: #1a4731 !important; } html.dark .border-blue-100 { border-color: #1b3a5c !important; } html.dark .border-t { border-top-color: #21262d !important; } html.dark .border-b { border-bottom-color: #21262d !important; } html.dark .border-l { border-left-color: #30363d !important; } /* ── 3. Divisores ── */ html.dark .divide-y > * + *, html.dark .divide-gray-50 > * + *, html.dark .divide-gray-100 > * + * { border-color: #21262d !important; } /* ── 4. Texto — ratios WCAG verificados sobre #161b22 ── gray-800 → #e6edf3 (13.5:1) ✓ gray-700 → #c9d1d9 ( 9.7:1) ✓ gray-600 → #aab4be ( 6.8:1) ✓ gray-500 → #8d96a0 ( 4.6:1) ✓ mínimo AA gray-400 → #8d96a0 ( 4.6:1) ✓ igualado — en modo claro este nivel ya es sublabel ── */ html.dark .text-gray-800 { color: #e6edf3 !important; } html.dark .text-gray-700 { color: #c9d1d9 !important; } html.dark .text-gray-600 { color: #aab4be !important; } html.dark .text-gray-500 { color: #8d96a0 !important; } html.dark .text-gray-400 { color: #8d96a0 !important; } /* no puede ser más oscuro que 8d96a0 */ /* ── 5. Texto semántico ── */ html.dark .text-amber-800, html.dark .text-amber-700 { color: #e3b341 !important; } html.dark .text-amber-600, html.dark .text-amber-500 { color: #d29922 !important; } html.dark .text-blue-700 { color: #58a6ff !important; } html.dark .text-green-700, html.dark .text-green-600 { color: #3fb950 !important; } html.dark .text-red-700, html.dark .text-red-600 { color: #f85149 !important; } /* ── 6. Badges de estado (fondo translúcido) ── */ html.dark .bg-blue-50 { background-color: rgba(56, 139, 253, 0.18) !important; } html.dark .bg-amber-50 { background-color: rgba(187, 128, 9, 0.18) !important; } html.dark .bg-green-50 { background-color: rgba(46, 160, 67, 0.18) !important; } html.dark .bg-red-50 { background-color: rgba(248, 81, 73, 0.18) !important; } /* ── 7. Fondos de alerta / aviso ── */ html.dark .bg-amber-100 { background-color: rgba(187, 128, 9, 0.14) !important; } html.dark .bg-green-100 { background-color: rgba(46, 160, 67, 0.14) !important; } html.dark .bg-red-100 { background-color: rgba(248, 81, 73, 0.14) !important; } /* ── 8. Inputs, textareas y selects ── */ html.dark input:not([type="radio"]):not([type="checkbox"]):not([type="color"]), html.dark textarea, html.dark select { background-color: #0d1117; color: #e6edf3; border-color: #30363d; } /* Placeholder visible pero claramente secundario */ html.dark input::placeholder, html.dark textarea::placeholder { color: #484f58; } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { outline: none; box-shadow: 0 0 0 3px rgba(217, 52, 43, 0.28); border-color: #D9342B; } /* ── 9. Hover sobre filas y elementos interactivos ── */ /* El ':' en clases Tailwind se escapa como '\:' en CSS */ html.dark .hover\:bg-gray-50:hover { background-color: #1c2128 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #21262d !important; } /* ── 10. Sombras — refuerzo para jerarquía visual ── */ html.dark .shadow-sm { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.55) !important; } html.dark .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.65) !important; } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.7) !important; } html.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.8) !important; } /* ── 11. Modal overlay ── */ html.dark .bg-black\/40 { background-color: rgba(0, 0, 0, 0.72) !important; } /* ── 12. Botón de tema (sol/luna) ── */ html.dark #theme-toggle { color: #8d96a0; } html.dark #theme-toggle:hover { background-color: #1c2128 !important; color: #e6edf3; }