/* ═══════════════════════════════════════════════════════════════════ * Sistema RRHH — Tema Oscuro / Claro * ─────────────────────────────────────────────────────────────────── * Activación: aplica modo oscuro. * Por defecto (sin atributo) o data-theme="light" => modo claro. * * Estrategia: overrides selectivos sobre las clases Tailwind más * usadas en el sistema. Tailwind ya viene precompilado, así que no * podemos usar el modo `dark:` nativo — usamos selectores de atributo. * ═══════════════════════════════════════════════════════════════════ */ /* Transición global suave al cambiar tema */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease !important; } /* color-scheme nativo: alinea scrollbars, date pickers y form controls del navegador */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* ═════ MODO OSCURO ═════ */ html[data-theme="dark"] body { background-color: #0f172a !important; color: #e2e8f0; } /* Fondos principales */ html[data-theme="dark"] .bg-white { background-color: #1e293b !important; } html[data-theme="dark"] .bg-slate-50 { background-color: #1a2336 !important; } html[data-theme="dark"] .bg-slate-100 { background-color: #0f172a !important; } html[data-theme="dark"] .bg-slate-200 { background-color: #334155 !important; } html[data-theme="dark"] .bg-gray-50 { background-color: #1a2336 !important; } html[data-theme="dark"] .bg-gray-100 { background-color: #0f172a !important; } html[data-theme="dark"] .bg-gray-200 { background-color: #334155 !important; } /* Hover en blancos */ html[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: #243046 !important; } html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: #243046 !important; } html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: #243046 !important; } html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #243046 !important; } html[data-theme="dark"] .hover\:bg-amber-50:hover { background-color: #3a2e10 !important; } /* Textos oscuros → claros */ html[data-theme="dark"] .text-slate-900 { color: #f1f5f9 !important; } html[data-theme="dark"] .text-slate-800 { color: #e2e8f0 !important; } html[data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; } html[data-theme="dark"] .text-slate-600 { color: #94a3b8 !important; } html[data-theme="dark"] .text-slate-500 { color: #94a3b8 !important; } html[data-theme="dark"] .text-slate-400 { color: #94a3b8 !important; } html[data-theme="dark"] .text-gray-900 { color: #f1f5f9 !important; } html[data-theme="dark"] .text-gray-800 { color: #e2e8f0 !important; } html[data-theme="dark"] .text-gray-700 { color: #cbd5e1 !important; } html[data-theme="dark"] .text-gray-600 { color: #94a3b8 !important; } html[data-theme="dark"] .text-gray-500 { color: #94a3b8 !important; } html[data-theme="dark"] .text-gray-400 { color: #94a3b8 !important; } html[data-theme="dark"] .text-black { color: #f1f5f9 !important; } /* Bordes claros → oscuros */ html[data-theme="dark"] .border-slate-100 { border-color: #334155 !important; } html[data-theme="dark"] .border-slate-200 { border-color: #334155 !important; } html[data-theme="dark"] .border-slate-300 { border-color: #475569 !important; } html[data-theme="dark"] .border-gray-100 { border-color: #334155 !important; } html[data-theme="dark"] .border-gray-200 { border-color: #334155 !important; } html[data-theme="dark"] .border-gray-300 { border-color: #475569 !important; } html[data-theme="dark"] .border { border-color: #334155; } /* Divide (bordes entre filas en tablas) */ html[data-theme="dark"] .divide-slate-100 > * + * { border-color: #334155 !important; } html[data-theme="dark"] .divide-slate-200 > * + * { border-color: #334155 !important; } html[data-theme="dark"] .divide-gray-100 > * + * { border-color: #334155 !important; } html[data-theme="dark"] .divide-gray-200 > * + * { border-color: #334155 !important; } /* Inputs / selects / textareas */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: #60a5fa !important; } /* Disabled inputs */ html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled { background-color: #0f172a !important; color: #64748b !important; } /* Tablas */ html[data-theme="dark"] table { color: #e2e8f0; } html[data-theme="dark"] thead.bg-slate-50, html[data-theme="dark"] thead.bg-gray-50, html[data-theme="dark"] thead .bg-slate-50, html[data-theme="dark"] thead .bg-gray-50 { background-color: #1a2336 !important; } html[data-theme="dark"] tbody tr:hover { background-color: #243046 !important; } /* Sombras: más sutiles en oscuro (deja contornos) */ html[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.55) !important; } html[data-theme="dark"] .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"] .shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7) !important; } /* Cards / contenedores con bg-white deben mantener jerarquía */ html[data-theme="dark"] .bg-white.rounded-xl, html[data-theme="dark"] .bg-white.rounded-2xl, html[data-theme="dark"] .bg-white.rounded-lg { border: 1px solid #334155; } /* Banners / avisos con tinte muy claro: hacerlos translúcidos en oscuro */ html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; color: #93c5fd !important; } html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; color: #6ee7b7 !important; } html[data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; color: #86efac !important; } html[data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; color: #fcd34d !important; } html[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; color: #fde047 !important; } html[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; color: #fca5a5 !important; } html[data-theme="dark"] .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12) !important; color: #fda4af !important; } html[data-theme="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, 0.12) !important; color: #fdba74 !important; } html[data-theme="dark"] .bg-purple-50 { background-color: rgba(168, 85, 247, 0.12) !important; color: #d8b4fe !important; } html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12) !important; color: #a5b4fc !important; } html[data-theme="dark"] .bg-teal-50 { background-color: rgba(20, 184, 166, 0.12) !important; color: #5eead4 !important; } html[data-theme="dark"] .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.12) !important; color: #67e8f9 !important; } html[data-theme="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, 0.12) !important; color: #7dd3fc !important; } /* Texto de bordes alternos para alertas */ html[data-theme="dark"] .text-emerald-800 { color: #6ee7b7 !important; } html[data-theme="dark"] .text-blue-800 { color: #93c5fd !important; } html[data-theme="dark"] .text-amber-800 { color: #fcd34d !important; } html[data-theme="dark"] .text-red-800 { color: #fca5a5 !important; } html[data-theme="dark"] .text-slate-800 { color: #e2e8f0 !important; } /* Footer */ html[data-theme="dark"] footer.bg-white, html[data-theme="dark"] footer { background-color: #0f172a !important; border-top-color: #334155 !important; } /* Header sticky */ html[data-theme="dark"] header.bg-white { background-color: #1e293b !important; border-bottom-color: #334155 !important; } /* Modales / dropdowns que usan bg-white directo */ html[data-theme="dark"] [class*="bg-white"][class*="rounded"] { color: #e2e8f0; } /* Prose / contenidos de texto largo */ html[data-theme="dark"] .prose { color: #cbd5e1; } html[data-theme="dark"] .prose strong { color: #f1f5f9; } /* Ringed elementos focus */ html[data-theme="dark"] .ring-slate-200 { --tw-ring-color: #334155 !important; } html[data-theme="dark"] .ring-gray-200 { --tw-ring-color: #334155 !important; } /* ═════ TOGGLE BUTTON ═════ */ .theme-toggle-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: transparent; border: 1px solid transparent; color: #64748b; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; flex-shrink: 0; } .theme-toggle-btn:hover { background-color: #f1f5f9; color: #1e293b; transform: scale(1.05); } .theme-toggle-btn:active { transform: scale(0.95); } html[data-theme="dark"] .theme-toggle-btn { color: #fbbf24; } html[data-theme="dark"] .theme-toggle-btn:hover { background-color: rgba(251, 191, 36, 0.12); color: #fde047; } /* Iconos sol/luna: animación al cambiar */ .theme-toggle-btn .icon-sun, .theme-toggle-btn .icon-moon { width: 20px; height: 20px; transition: opacity .25s ease, transform .35s ease; } .theme-toggle-btn .icon-sun { display: none; } .theme-toggle-btn .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; } /* ═══════════════════════════════════════════════════════════════════ * MOBILE-FIRST RESPONSIVE BASE — auditoría ≤768px * ─────────────────────────────────────────────────────────────────── * Reglas globales mobile-first. Aplican a TODA la app (admin + portal * + landing) sin requerir cambios en cada template. * ═══════════════════════════════════════════════════════════════════ */ /* Evitar que Safari/Chrome inflen tipografía al rotar (iOS bug) */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* line-height base legible (criterio ≥1.5) */ body { line-height: 1.5; } /* Sin scroll horizontal accidental. `clip` preserva position:sticky; fallback a `hidden` para navegadores antiguos. Se aplica a html Y body: en iOS Safari el scroll del viewport a veces vive en , y limitarlo solo en deja pasar el "arrastre lateral que se re-centra". */ html, body { max-width: 100vw; overflow-x: hidden; overflow-x: clip; } /* Imágenes y media siempre responsive (defensa CLS + overflow) */ img, video, svg, canvas, iframe { max-width: 100%; height: auto; } /* Prevenir overflow en flex/grid children por texto largo sin espacios */ * { min-width: 0; } /* Tap highlight más sutil en móvil */ html, body { -webkit-tap-highlight-color: rgba(0,0,0,.08); } /* ── Inputs/selects/textareas: ≥16px en móvil para evitar zoom iOS ── */ @media (max-width: 768px) { input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; line-height: 1.5; } } /* Aro de foco visible y consistente (accesibilidad teclado). Usa el token de marca del tenant (--brand, definido en base.html), con fallback al azul del sistema. */ :focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; border-radius: 4px; } html[data-theme="dark"] :focus-visible { outline-color: #60a5fa; } /* Reduce motion respeta preferencia del SO */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── Safe areas (notch / home indicator iOS, PWA standalone) ── */ .safe-pt { padding-top: env(safe-area-inset-top); } .safe-pb { padding-bottom: env(safe-area-inset-bottom); } .safe-pl { padding-left: env(safe-area-inset-left); } .safe-pr { padding-right: env(safe-area-inset-right); } .safe-px { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* ── Alturas full-screen con `dvh` (bug barra Safari iOS) ── */ .h-screen-d { height: 100vh; height: 100dvh; } .min-h-screen-d { min-height: 100vh; min-height: 100dvh; } .h-svh { height: 100vh; height: 100svh; } /* ── Targets táctiles ≥44×44 en móvil (WCAG 2.5.5 AAA / Apple HIG) ── */ @media (max-width: 768px) { .tap-44 { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Navegación interna del sidebar admin: subo padding vertical para ≥44 */ .nav-simple, .nav-trigger { padding-top: 12px; padding-bottom: 12px; } .nav-sub { padding-top: 10px; padding-bottom: 10px; } } /* ── Tipografía fluida con clamp() (entre 320px y 1280px) ── */ .text-fluid-h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.75rem); line-height: 1.1; letter-spacing: -0.02em; } .text-fluid-h2 { font-size: clamp(1.375rem, 2.5vw + .75rem, 2.25rem); line-height: 1.2; } .text-fluid-h3 { font-size: clamp(1.125rem, 1.5vw + .5rem, 1.5rem); line-height: 1.3; } .text-fluid-body { font-size: clamp(1rem, .5vw + .9rem, 1.125rem); line-height: 1.55; } /* ── Ocultar Alpine x-cloak (evita FOUC) ── */ [x-cloak] { display: none !important; } /* ── Backdrop overlay para drawers móviles ── */ .mobile-backdrop { position: fixed; inset: 0; background-color: rgba(15, 23, 42, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 35; transition: opacity .2s ease-out; } /* ── Placeholder con contraste mínimo AA ── */ input::placeholder, textarea::placeholder { color: #64748b; opacity: 1; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #94a3b8; } /* ── Aspect-ratio reservado para embeds/PDF/mapas (CLS bajo) ── */ .aspect-video-fb { aspect-ratio: 16 / 9; } .aspect-square-fb { aspect-ratio: 1 / 1; } .aspect-pdf { aspect-ratio: 8.5 / 11; } /* ── Tablas con scroll horizontal dentro de un wrapper, no del viewport ── */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Sticky header: no rompe con overflow-x: clip del body ── */ /* (Nota: subir contraste de slate-400/gray-400 globalmente rompería sidebars sobre fondos oscuros donde se necesita texto claro; preferimos ajustar el contraste por instancia donde el fondo sea claro.) */