/* ============================================================ ONE WAY · DASHBOARD SKIN v3 (2026-05-20) Targets dashboard-pro.css `.pro-*` classes EXACTAMENTE. Override agresivo: neutraliza los gradients tutifruti y alinea con paleta Geist indigo del inicio. Carga DESPUÉS de style.css, oneway-navbar.css, dashboard-pro.css, oneway-overrides.css (el último link en ). ============================================================ */ /* ─── TOKEN REWRITE: kill the rainbow at the source ─── */ :root { /* Original (kept for reference): --pro-grad-1: blue→purple→pink ← welcome banner --pro-grad-warn: amber→red ← Warns btn --pro-grad-strike: red→darkred --pro-grad-bl: black→darkred --pro-grad-clan: green→blue ← Clanes btn Below: neutralize to semantic surface accents. */ --pro-grad-1: linear-gradient(135deg, rgba(91, 140, 255, 0.14) 0%, rgba(111, 224, 255, 0.06) 100%) !important; --pro-grad-2: linear-gradient(135deg, rgba(91, 140, 255, 0.18) 0%, rgba(91, 140, 255, 0.06) 100%) !important; --pro-grad-warn: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04)) !important; --pro-grad-strike: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04)) !important; --pro-grad-bl: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.04)) !important; --pro-grad-clan: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04)) !important; --pro-grad-success: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.04)) !important; /* Token primarios (forzar paleta inicio aunque alguien los redefina) */ --primary: #5B8CFF !important; --primary-rgb: 91, 140, 255 !important; --secondary: #6FE0FF !important; --accent: #6FE0FF !important; } /* ─── WELCOME BANNER (pro-hero) ─── */ .pro-hero { background: linear-gradient(135deg, rgba(91, 140, 255, 0.12) 0%, rgba(111, 224, 255, 0.04) 70%) !important; border: 1px solid rgba(91, 140, 255, 0.18) !important; border-radius: 18px !important; box-shadow: 0 8px 24px -10px rgba(91, 140, 255, 0.20) !important; } .pro-hero::before, .pro-hero::after { /* Si tiene blob morado/pink decorativo, escóndelo */ display: none !important; } .pro-hero-title { background: linear-gradient(135deg, #FFFFFF 0%, #C7D2FE 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } .pro-hero-sub, .pro-hero-subtitle, .pro-hero-description { color: rgba(255, 255, 255, 0.75) !important; } /* Welcome pills (GLOBAL ADMIN / @user / ID / BANNER ACTIVO) */ .pro-hero-pill, .pro-pill, .pro-badge, .pro-hero [class*="pill"], .pro-hero [class*="badge"] { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.85) !important; border-radius: 999px !important; padding: 5px 12px !important; font-size: 12px !important; font-weight: 600 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: 0.02em !important; text-transform: none !important; } /* ─── STAT CARDS (608 / 380 / 0 / 0 / 13 / 44) ─── */ .pro-stat, .pro-stat-card { background: rgba(15, 17, 22, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 16px !important; padding: 20px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease !important; box-shadow: none !important; } .pro-stat:hover, .pro-stat-card:hover { border-color: rgba(255, 255, 255, 0.14) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5) !important; } .pro-stat::before, .pro-stat-card::before, .pro-stat::after, .pro-stat-card::after { display: none !important; } .pro-stat-icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; background: rgba(91, 140, 255, 0.10) !important; border: 1px solid rgba(91, 140, 255, 0.18) !important; color: #6FE0FF !important; margin-bottom: 12px !important; background-image: none !important; } .pro-stat-value, .pro-stat .value, .pro-stat-card .value { background: linear-gradient(135deg, #FFFFFF 0%, #C7D2FE 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; font-variant-numeric: tabular-nums !important; } .pro-stat-label, .pro-stat .label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.50) !important; margin-top: 4px !important; } .pro-stat-sub, .pro-stat-hint, .pro-stat .sub { font-size: 12.5px !important; color: rgba(255, 255, 255, 0.55) !important; font-weight: 500 !important; margin-top: 4px !important; } /* ─── ACCIONES RÁPIDAS — kill the rainbow ─── */ .pro-actions, .pro-actions-card, .pro-quick-actions { background: rgba(15, 17, 22, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 18px !important; padding: 20px !important; } .pro-actions-title, .pro-actions h2, .pro-actions h3 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #F4F5F7 !important; margin-bottom: 14px !important; } /* The big colored buttons → uniform surface + semantic left border */ .pro-btn, .pro-action-btn, .pro-btn-warn, .pro-btn-strike, .pro-btn-bl, .pro-btn-clan, .pro-btn-search, .pro-btn-users, .pro-btn-primary { background: rgba(26, 30, 40, 0.85) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-left: 3px solid rgba(255, 255, 255, 0.15) !important; color: #F4F5F7 !important; border-radius: 12px !important; padding: 14px 18px !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: -0.005em !important; text-shadow: none !important; box-shadow: none !important; transition: all .15s ease !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; text-align: left !important; cursor: pointer !important; } .pro-btn:hover, .pro-action-btn:hover, .pro-btn-warn:hover, .pro-btn-strike:hover, .pro-btn-bl:hover, .pro-btn-clan:hover, .pro-btn-search:hover, .pro-btn-users:hover, .pro-btn-primary:hover { background: rgba(35, 40, 52, 0.95) !important; border-color: rgba(255, 255, 255, 0.14) !important; transform: translateY(-1px) !important; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5) !important; } /* Semantic left-border per action */ .pro-btn-warn { border-left-color: #F59E0B !important; } .pro-btn-strike { border-left-color: #F59E0B !important; } .pro-btn-bl, .pro-btn-blacklist { border-left-color: #EF4444 !important; } .pro-btn-clan, .pro-btn-clanes { border-left-color: #22C55E !important; } .pro-btn-search, .pro-btn-users { border-left-color: #5B8CFF !important; } /* Icons inside the action buttons */ .pro-btn > span:first-child, .pro-action-btn > span:first-child, .pro-btn-warn > span:first-child, .pro-btn-strike > span:first-child, .pro-btn-bl > span:first-child, .pro-btn-clan > span:first-child, .pro-btn-search > span:first-child, .pro-btn-users > span:first-child { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; width: 24px !important; height: 24px !important; flex-shrink: 0 !important; } /* ─── ANY ELEMENT using a `--pro-grad-*` var → kill the rainbow ─── */ /* Catches dynamically-built elements that inline the gradient via var() */ [style*="--pro-grad-1"], [style*="--pro-grad-warn"], [style*="--pro-grad-strike"], [style*="--pro-grad-bl"], [style*="--pro-grad-clan"] { /* var() ya está reescrita arriba, esto está acá por seguridad */ } /* Kill inline tutifruti gradients */ [style*="linear-gradient(135deg, #5865F2"][style*="#EC4899"], [style*="linear-gradient(135deg, #F59E0B"][style*="#EF4444"], [style*="linear-gradient(135deg, #EF4444"][style*="#B91C1C"], [style*="linear-gradient(135deg, #18181B"][style*="#7F1D1D"], [style*="linear-gradient(135deg, #10B981"][style*="#5865F2"] { background: var(--surface-2, rgba(26, 30, 40, 0.85)) !important; background-image: none !important; } /* ─── SIDEBAR / PANEL ─── */ .sidebar, aside.sidebar, .pro-sidebar, [class*="dashboard-sidebar"] { background: rgba(15, 17, 22, 0.86) !important; border-right: 1px solid rgba(255, 255, 255, 0.07) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; padding: 20px 16px !important; } .sidebar h2, .sidebar h3, .sidebar-title, .pro-sidebar-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.45) !important; margin-bottom: 16px !important; } /* Profile row in sidebar (ijezko + power icon) */ .sidebar-profile, .sidebar .profile-row, .sidebar .user-row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; background: rgba(26, 30, 40, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 14px !important; transition: border-color .2s ease !important; } .sidebar-profile:hover { border-color: rgba(91, 140, 255, 0.25) !important; } .sidebar-profile-name, .sidebar .username { font-weight: 600 !important; color: #F4F5F7 !important; font-size: 14px !important; } .sidebar-profile-role, .sidebar .role { font-size: 11.5px !important; color: rgba(255, 255, 255, 0.50) !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: 0.02em !important; } /* Power off button */ .sidebar .logout-btn, .sidebar [class*="logout"], .sidebar [class*="power"] { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.55) !important; border-radius: 10px !important; padding: 8px 10px !important; font-size: 14px !important; transition: all .15s ease !important; } .sidebar .logout-btn:hover, .sidebar [class*="logout"]:hover { background: rgba(239, 68, 68, 0.14) !important; color: #EF4444 !important; border-color: rgba(239, 68, 68, 0.3) !important; } /* Server selector slots (sidebar primary, topbar fallback) */ #sidebar-guild-selector, #guild-selector-header, #ow-guild-selector-slot, .guild-selector, [class*="server-select"], [class*="guild-select"] { position: relative !important; } #sidebar-guild-selector { margin: 4px 0 12px !important; padding: 0 4px !important; } #sidebar-guild-selector #btn-guild-sel { width: 100% !important; min-width: 0 !important; } #sidebar-guild-selector #guild-dropdown-menu { /* Anchor inside sidebar, fit within width — was overflowing on the right so the right corner-radius was cut off. */ left: 0 !important; right: 0 !important; width: auto !important; min-width: 100% !important; max-width: none !important; top: calc(100% + 6px) !important; transform-origin: top left !important; box-sizing: border-box !important; } #guild-selector-header #btn-guild-sel, #ow-guild-selector-slot #btn-guild-sel, #sidebar-guild-selector #btn-guild-sel { background: rgba(26, 30, 40, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 12px !important; padding: 9px 14px !important; color: #F4F5F7 !important; cursor: pointer !important; transition: all .15s ease !important; min-width: 200px !important; } #guild-selector-header #btn-guild-sel:hover, #ow-guild-selector-slot #btn-guild-sel:hover, #sidebar-guild-selector #btn-guild-sel:hover { border-color: rgba(91, 140, 255, 0.45) !important; background: rgba(35, 40, 52, 0.95) !important; } #guild-dropdown-menu { background: rgba(15, 17, 22, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; } .guild-drop-item:hover { background: rgba(91, 140, 255, 0.10) !important; } .sidebar.collapsed #sidebar-guild-selector { display: none !important; } /* ─── Sidebar nav items ─── */ /* Hard override: oneway-navbar.css ships a global `nav { display: none !important }` killer rule (intended for legacy navbars). We bump specificity to win. */ .sidebar-nav, aside.sidebar .sidebar-nav, .sidebar > .sidebar-nav, nav.sidebar-nav, #sidebar #sidebar-nav { display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 8px 0 !important; } /* SIDEBAR-FLAT-V13 (2026-05-30): fuente ÚNICA del estado EXPANDIDO (este archivo carga último → manda). Items PLANOS: fondo transparente, sin borde, sin sombra. hover = fondo accent muy sutil + texto claro. active = fondo accent sutil + barra accent a la izquierda + ícono/texto accent. Accent = --primary (indigo), no el viejo #5B8CFF. Sin cápsulas, look Linear/Vercel. */ .sidebar-nav .nav-item, .sidebar .nav-item { position: relative !important; display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 14px !important; border-radius: 10px !important; color: var(--text-muted) !important; font-size: 13.5px !important; font-weight: 500 !important; cursor: pointer !important; /* SIDEBAR-ANIM-V16 (2026-05-31): width CONCRETO (no flex `auto`) para que el item pueda INTERPOLAR su ancho al colapsar (auto↔44px NO es animable; un length↔length sí). box-sizing border-box → calc(100% - 16px) deja 8px de margin a cada lado. Y la transición incluye la geometría (width/margin/ padding/border-radius) en ESTE estado expandido — que es el "from" del colapso —, no solo en .collapsed, para que el encogimiento sea fluido y sincronizado con el rail. */ width: calc(100% - 16px) !important; box-sizing: border-box !important; margin: 2px 8px !important; transition: background-color .16s ease, color .16s ease, width .34s cubic-bezier(.4,0,.2,1), margin .34s cubic-bezier(.4,0,.2,1), padding .34s cubic-bezier(.4,0,.2,1), border-radius .34s cubic-bezier(.4,0,.2,1) !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; transform: none !important; } .sidebar-nav .nav-item:hover, .sidebar .nav-item:hover { background: rgba(var(--primary-rgb), 0.08) !important; color: var(--text-main) !important; border-color: transparent !important; box-shadow: none !important; transform: none !important; } .sidebar-nav .nav-item.active, .sidebar .nav-item.active { background: rgba(var(--primary-rgb), 0.12) !important; color: var(--text-main) !important; border-color: transparent !important; box-shadow: none !important; font-weight: 600 !important; } .sidebar-nav .nav-item.active::before, .sidebar .nav-item.active::before { content: '' !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; height: 20px !important; width: 3px !important; background: var(--primary) !important; border-radius: 0 3px 3px 0 !important; } .sidebar-nav .nav-item-icon, .sidebar .nav-item-icon { font-size: 16px !important; display: inline-flex !important; width: 22px !important; flex-shrink: 0 !important; justify-content: center !important; } /* SIDEBAR-FLAT-V13: ícono accent en el item activo (expandido). */ .sidebar-nav .nav-item.active .nav-item-icon, .sidebar .nav-item.active .nav-item-icon { color: var(--primary) !important; filter: none !important; } .sidebar-nav .nav-item-text, .sidebar .nav-item-text { flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .sidebar.collapsed .nav-item-text, .sidebar.collapsed .sidebar-user-info, .sidebar.collapsed .sidebar-brand { display: none !important; } /* ════════════════════════════════════════════════════════════════════ SIDEBAR-COLLAPSED-V14 (2026-05-30): FUENTE ÚNICA del layout colapsado en DESKTOP. Este archivo carga último → manda; lo envolvemos en @media (min-width:1025px) para NO tocar el drawer mobile (≤1024). Antes había una regla huérfana `.sidebar.collapsed .nav-item{padding:10px}` que peleaba con style.css (48px box) y, sin flex-shrink, los items se aplastaban a ~42px → "tira apretada". Acá: slot 44px cuadrado, flex-shrink:0 (cero aplastamiento), gap parejo 6px, ícono 1.35rem centrado, hover/active = cuadradito accent suave + barra accent a la izquierda. Look Linear/Vercel, aireado y centrado. Todo transparente en reposo (correcto, NO tocar). */ @media (min-width: 1025px) { /* HEADER-CENTER-FIX (2026-05-31): el botón ☰/◂ del header quedaba descentrado (pegado a la izquierda) en colapsado. Centramos el header (solo queda el toggle; el brand está display:none) y forzamos el toggle a 44px centrado, alineado con la columna de íconos del nav (que son 44px centrados). */ .sidebar.collapsed .sidebar-header, aside.sidebar.collapsed .sidebar-header { display: flex !important; align-items: center !important; justify-content: center !important; padding: 14px 0 10px !important; width: 100% !important; box-sizing: border-box !important; } .sidebar.collapsed .sidebar-toggle, aside.sidebar.collapsed .sidebar-toggle, .sidebar.collapsed #sidebar-collapse-btn-sidebar, aside.sidebar.collapsed #sidebar-collapse-btn-sidebar { margin: 0 auto !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Ancho cómodo y nav respirado. Selectores con id/aside para ganarle al `82px !important` de style.css y al `#sidebar #sidebar-nav` de este archivo. */ .sidebar.collapsed, aside.sidebar.collapsed, #sidebar.collapsed, body .sidebar.collapsed, body aside.sidebar.collapsed { width: 80px !important; /* SIDEBAR-ANIM-V16 (2026-05-31): NO clavar min/max-width a 80px. Eran `80px !important` SIN transición → al colapsar clampeaban el rail a 80 de GOLPE en el frame 1, anulando la transición `width .34s` del