/* ============================================================ Richard Links v2 — Shell (sidebar + topbar) inspirado en Bitly Funciona encima de assets/style.css; este archivo solo añade chrome nuevo + utilities. Las clases existentes (.card, .kpis, .bd, .map-wrap, .bars, etc.) siguen funcionando intactas. ============================================================ */ :root{ --rs-sidebar-w: 64px; --rs-sidebar-w-open: 232px; --rs-topbar-h: 60px; --rs-bg: #fafaf5; --rs-bg-soft: #f4f1e8; --rs-card: #ffffff; --rs-text: #1a1a1a; --rs-text-muted: #3f4750; /* AA: 9.45:1 sobre #fff */ --rs-text-muted-soft: #5a6470; /* AA: 6.5:1, para texto >14px */ --rs-line: #e5e7eb; --rs-line-strong: #d4d4d0; --rs-accent: #1c4030; --rs-accent-light: #4f9e78; /* Sistema de status — consolidado P2 audit */ --rs-success: #16a34a; /* Verde "success" estándar — login, export, activo */ --rs-success-soft: rgba(22,163,74,.10); --rs-warning: #d97706; /* Ámbar — pendiente, regenerar */ --rs-warning-soft: rgba(217,119,6,.10); --rs-danger: #dc2626; /* Rojo — eliminar, error */ --rs-danger-soft: rgba(220,38,38,.10); --rs-info: #2f6fea; /* Azul — info, link */ --rs-info-soft: rgba(47,111,234,.10); --rs-warm: #c97844; --rs-blue: #2f6fea; --rs-blue-hover: #2356c4; --rs-blue-soft: #e8f0fe; --rs-sidebar-bg: #0f1115; --rs-sidebar-text: #9ca3af; --rs-sidebar-hover: rgba(255,255,255,.06); --rs-sidebar-active: rgba(79,158,120,.18); --rs-sidebar-active-bar: var(--rs-accent-light); --rs-radius: 10px; --rs-radius-lg: 14px; --rs-shadow-sm: 0 1px 2px rgba(0,0,0,.04); --rs-shadow: 0 2px 8px rgba(0,0,0,.06); } /* ============================================================ DARK MODE — redefinimos las MISMAS variables. Toda la UI consume var(--rs-*), entonces el switch es automático. Estrategia: [data-theme="dark"] en , controlado por JS. ============================================================ */ [data-theme="dark"]{ /* Variables admin v2 (las nuevas) */ --rs-bg: #0f1115; --rs-bg-soft: #161b22; --rs-card: #1c2128; --rs-text: #e6edf3; --rs-text-muted: #a8b1bd; /* AA dark: 9.6:1 sobre #0f1115 */ --rs-text-muted-soft: #8b949e; /* AA dark: 6.66:1, para texto >14px */ --rs-line: #30363d; --rs-line-strong: #484f58; --rs-accent: #2d6a4f; --rs-accent-light: #52b788; /* Status colors dark — más brillantes para contraste sobre dark bg */ --rs-success: #4ade80; --rs-success-soft: rgba(74,222,128,.15); --rs-warning: #fbbf24; --rs-warning-soft: rgba(251,191,36,.15); --rs-danger: #f87171; --rs-danger-soft: rgba(248,113,113,.15); --rs-info: #60a5fa; --rs-info-soft: rgba(96,165,250,.15); --rs-warm: #e08050; --rs-blue: #388bfd; --rs-blue-hover: #58a6ff; --rs-blue-soft: #1c3a6e; --rs-sidebar-bg: #090c10; --rs-sidebar-text: #8b949e; --rs-sidebar-hover: rgba(255,255,255,.06); --rs-sidebar-active: rgba(82,183,136,.15); --rs-sidebar-active-bar: var(--rs-accent-light); --rs-shadow-sm: 0 1px 2px rgba(0,0,0,.3); --rs-shadow: 0 2px 8px rgba(0,0,0,.5); /* Bridge a variables LEGACY del style.css/theme-richard.css de producción. !important obligatorio porque theme-richard.css las declara con !important. */ --bg: #0f1115 !important; --card: #1c2128 !important; --card-2: #161b22 !important; --ink: #e6edf3 !important; --ink-soft: #d0d7de !important; --ink-subtle: #a0a8b1 !important; --muted: #8b949e !important; --line: #30363d !important; --line-strong: #484f58 !important; --text: #e6edf3 !important; --primary: #e6edf3 !important; --primary-d: #ffffff !important; --on-primary: #0f1115 !important; --slug-bg: #1c2128 !important; --slug-fg: #e6edf3 !important; --shadow-card: 0 1px 3px rgba(0,0,0,.4) !important; /* color-scheme: hint al browser para scrollbars / form controls nativos */ color-scheme: dark; } [data-theme="light"]{ /* En light, restaurar las variables legacy a sus valores originales. !important para sobrescribir tanto theme-richard.css como la @media (prefers-color-scheme: dark) del legacy cuando OS está en dark pero el usuario quiere light. */ --bg: #F0F7F3 !important; --card: #FFFFFF !important; --ink: #1d1a16 !important; --ink-soft: #2a2620 !important; --ink-subtle: #463f37 !important; --muted: #6b7280 !important; --line: #E5E7EB !important; --line-strong: #D1D5DB !important; --text: #1a1a1a !important; --primary: #000000 !important; --primary-d: #1A1A1A !important; --on-primary: #FFFFFF !important; --slug-bg: #000 !important; --slug-fg: #fff !important; --shadow-card: 0 1px 3px rgba(0,0,0,.04) !important; color-scheme: light; } /* Transición suave entre modos. T2·f: limitada a bloques grandes (no a todos los nodos) — antes corrían cientos de transitions en paralelo en Android mid-range. */ html.theme-transition, html.theme-transition body, html.theme-transition .rs-shell, html.theme-transition .rs-sidebar, html.theme-transition .rs-topbar, html.theme-transition .rs-content, html.theme-transition .rs-card, html.theme-transition .rs-kpi, html.theme-transition .rs-input, html.theme-transition .rs-btn, html.theme-transition .rs-btn-secondary, html.theme-transition .rs-btn-ghost, html.theme-transition .rs-table, html.theme-transition .rs-pill, html.theme-transition .rs-badge, html.theme-transition .rs-link-card, html.theme-transition .rs-recent-link, html.theme-transition .rs-insight, html.theme-transition .rs-sidebar-item, html.theme-transition .rs-topbar-btn{ transition: background-color .2s ease, border-color .2s ease, color .2s ease !important; } /* ---------- Reset / base ---------- */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0; background-color:var(--rs-bg);color:var(--rs-text); font-family:-apple-system,BlinkMacSystemFont,Inter,"Segoe UI",Roboto,sans-serif; font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} /* Override agresivo del legacy style.css que usaba var(--bg) — fuerza el repaint con data-theme */ [data-theme="dark"], [data-theme="dark"] body{background-color:#0f1115 !important;color:#e6edf3} [data-theme="light"], [data-theme="light"] body{background-color:#fafaf5;color:#1a1a1a} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* ---------- Shell layout (Grid 2x2) ---------- */ .rs-shell{ display:grid; grid-template-columns:var(--rs-sidebar-w) 1fr; grid-template-rows:var(--rs-topbar-h) 1fr; grid-template-areas:"sidebar topbar" "sidebar content"; min-height:100vh } /* ---------- Sidebar ---------- */ /* Sin overflow:hidden — los tooltips ::after se posicionan FUERA del sidebar (a left:58px) y se cortaban. Ahora flotan correctamente sobre el content. */ .rs-sidebar{ grid-area:sidebar;background:var(--rs-sidebar-bg); display:flex;flex-direction:column;align-items:center; padding:14px 0 12px;height:100vh;position:sticky;top:0; overflow:visible;z-index:30 } .rs-sidebar .brand{ width:38px;height:38px;border-radius:9px; background:linear-gradient(135deg,#1a3a30,#1c4030);color:#fafaf6; display:flex;align-items:center;justify-content:center; font-family:Georgia,serif;font-weight:600;font-size:15px; margin-bottom:18px;flex-shrink:0;text-decoration:none } .rs-sidebar .create-btn{ width:42px;height:42px;border-radius:50%;border:0;cursor:pointer; background:var(--rs-blue);color:#fff; display:flex;align-items:center;justify-content:center; margin-bottom:18px;flex-shrink:0; transition:background .15s,transform .12s; box-shadow:0 4px 12px rgba(47,111,234,.35) } .rs-sidebar .create-btn:hover{background:var(--rs-blue-hover);transform:translateY(-1px)} /* Force white SVG inside the FAB. El SVG colapsaba a width:0 dentro del