/* ═══════════════════════════════════════════════════════════════ Tecno-RRHH — Design Tokens Sistema unificado de variables de diseño. Reemplaza los :root{} locales duplicados en cada página. Cómo usar en una página: y eliminar el bloque :root{...} local. Mantiene aliases para compatibilidad con nombres legacy (--surf, --t1..t4, etc) — nada se rompe en páginas no migradas. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Fondos / superficies ───────────────────────────────── */ --bg: #f0f4f8; /* fondo de página */ --bg2: #e6ebf2; /* fondo alterno (zebra, hover) */ --surface: #ffffff; /* card / modal / surface principal */ --surface2: #f8fafc; /* surface secundario (header de tabla) */ /* ── Bordes ─────────────────────────────────────────────── */ --border: #e2e8f0; --border2: #cbd5e1; --border-d: #94a3b8; /* borde más oscuro (focus, énfasis) */ /* ── Texto ──────────────────────────────────────────────── */ --t1: #0f172a; /* texto principal */ --t2: #334155; /* secundario */ --t3: #64748b; /* terciario / labels */ --t4: #94a3b8; /* placeholder / hints */ /* ── Marca y semánticos ─────────────────────────────────── */ --blue: #2563eb; --blue-l: #eff6ff; --blue-m: #93b4fd; --blue-d: #1d4ed8; --green: #16a34a; --green-l: #f0fdf4; --green-d: #15803d; --amber: #d97706; --amber-l: #fffbeb; --orange: #ea580c; --orange-l: #fff7ed; --red: #dc2626; --red-l: #fef2f2; --red-d: #b91c1c; --purple: #9333ea; --purple-l: #faf5ff; --cyan: #0891b2; --cyan-l: #ecfeff; /* ── Tipografía ─────────────────────────────────────────── */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* ── Tamaños base ───────────────────────────────────────── */ --fs-xs: 11px; --fs-sm: 12px; --fs: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; /* ── Spacing ────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* ── Border radius ──────────────────────────────────────── */ --r-sm: 4px; --r: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 9999px; /* ── Sombras ────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(15,23,42,.04); --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --shadow: 0 2px 6px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05); --shadow-md: 0 4px 8px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06); --shadow-lg: 0 12px 24px rgba(15,23,42,.10), 0 24px 48px rgba(15,23,42,.08); /* ── Transiciones ───────────────────────────────────────── */ --tt-fast: .12s ease; --tt: .18s ease; --tt-slow: .28s ease; /* ── Z-index escala ─────────────────────────────────────── */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 1000; --z-toast: 2000; /* ── Aliases legacy (compatibilidad con código existente) ── */ --surf: var(--surface); /* dashboard.html, portal.html, etc */ --b: var(--border); /* algunos shorthand */ --r-default: var(--r); } /* ══════════════════════════════════════════════════════════════ DARK MODE — se activa con Sólo overridea variables; la estructura no cambia. ══════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --bg: #0f172a; --bg2: #1e293b; --surface: #1e293b; --surface2: #243149; --border: #334155; --border2: #475569; --border-d: #64748b; --t1: #f1f5f9; --t2: #cbd5e1; --t3: #94a3b8; --t4: #64748b; /* En dark, los "light" tints se vuelven sutiles transparentes */ --blue-l: rgba(59,130,246,.15); --green-l: rgba(34,197,94,.15); --amber-l: rgba(217,119,6,.18); --orange-l: rgba(234,88,12,.15); --red-l: rgba(220,38,38,.15); --purple-l: rgba(147,51,234,.15); --cyan-l: rgba(8,145,178,.15); /* Sombras menos prominentes (los bordes hacen el trabajo) */ --shadow-xs: 0 1px 2px rgba(0,0,0,.20); --shadow-sm: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.20); --shadow: 0 2px 6px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.20); --shadow-md: 0 4px 8px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.25); --shadow-lg: 0 12px 24px rgba(0,0,0,.40), 0 24px 48px rgba(0,0,0,.30); } /* Dark — fixes específicos comunes: - inputs que tenían background:#fff hardcoded → forzar surface - tablas con background:var(--bg) en hover → adaptar */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surface) !important; color: var(--t1) !important; border-color: var(--border) !important; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--t4) !important; } /* Skeleton más sutil en dark */ :root[data-theme="dark"] .rh-skel { background: linear-gradient(90deg, var(--surface2) 25%, var(--bg2) 50%, var(--surface2) 75%); background-size: 200% 100%; } /* Respetar prefers-reduced-motion: desactiva animaciones */ @media (prefers-reduced-motion: reduce) { .rh-skel { animation: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Focus visible global accesible */ *:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); } button:focus-visible, .btn:focus-visible, .ni:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════ UTILITIES de animación — opt-in con clases ══════════════════════════════════════════════════════════════ */ .rh-fade-in { animation: rh-fade-in .22s ease-out both; } .rh-slide-up { animation: rh-slide-up .25s ease-out both; } .rh-pop { animation: rh-pop .18s ease-out both; } @keyframes rh-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rh-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes rh-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } /* Hover state consistente para links e items clickeables */ .rh-clickable { transition: background var(--tt-fast), color var(--tt-fast), transform var(--tt-fast); cursor: pointer; } .rh-clickable:hover { background: var(--bg2); } .rh-clickable:active { transform: scale(.98); } /* ── Utilidades mínimas opcionales ────────────────────────── */ .rh-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .rh-scrollbar::-webkit-scrollbar-track { background: transparent; } .rh-scrollbar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-full); } .rh-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--border-d); } /* Empty state base — usable con .rh-empty desde rh-core.js */ .rh-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--t3); font-size: var(--fs-sm); min-height: 160px; } .rh-empty-icon { font-size: 32px; margin-bottom: var(--sp-3); opacity: .6; } .rh-empty-title { font-size: var(--fs-md); font-weight: 600; color: var(--t2); margin-bottom: var(--sp-1); } .rh-empty-cta { margin-top: var(--sp-3); } /* Skeleton loader base */ .rh-skel { background: linear-gradient(90deg, var(--border) 25%, var(--bg2) 50%, var(--border) 75%); background-size: 200% 100%; animation: rh-skel-pulse 1.4s ease-in-out infinite; border-radius: var(--r-sm); } @keyframes rh-skel-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }