/* ═══════════════════════════════════════════════════════════════ REDESIGN — Design system foundation Loaded LAST so it overrides legacy styles. Uses utility classes prefixed with `r-` so legacy classes keep working untouched. ═════════════════════════════════════════════════════════════ */ /* ── Universal SVG icon utility class ── All inline SVG icons rendered via window.ICO('name') wrap into .r-ico. Default size 14px, currentColor stroke. */ .r-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: -2px; } .r-ico svg { width: 100%; height: 100%; stroke: currentColor; } .r-ico-12 { width: 12px; height: 12px; } .r-ico-14 { width: 14px; height: 14px; } .r-ico-16 { width: 16px; height: 16px; } .r-ico-18 { width: 18px; height: 18px; } .r-ico-20 { width: 20px; height: 20px; } /* Panel action buttons (.paBtn) — flex layout for SVG + label */ [data-theme="dark"] .paBtn, [data-theme="black"] .paBtn { display: inline-flex !important; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 500; } [data-theme="dark"] .paBtn .r-ico, [data-theme="black"] .paBtn .r-ico { width: 13px; height: 13px; } [data-theme="dark"] .paBtn svg, [data-theme="black"] .paBtn svg { stroke-width: 1.85; } /* ═══════════════════════════════════════════════════════════════ Switch / toggle pill — used for the "Mini-etiquetas" setting ═════════════════════════════════════════════════════════════ */ .r-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; } .r-switch input { opacity: 0; width: 0; height: 0; } .r-switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--r-bg-card-2); border: 1px solid var(--r-line); border-radius: 999px; transition: background .2s, border-color .2s; } .r-switch-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--r-text-3); border-radius: 50%; transition: transform .2s, background .2s; } .r-switch input:checked + .r-switch-slider { background: var(--r-amber-soft); border-color: rgba(240,180,41,.5); } .r-switch input:checked + .r-switch-slider::before { transform: translateX(16px); background: var(--r-amber); } /* ═══════════════════════════════════════════════════════════════ TOOLTIPS — elegant on-hover hints with global toggle Any element with data-tip="text" shows a tooltip on hover, but ONLY when has class `r-tips-on`. Toggle from Settings. ═════════════════════════════════════════════════════════════ */ [data-tip] { position: relative; } .r-tips-on [data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--r-bg-card-2); border: 1px solid var(--r-line-2); color: var(--r-text); font-family: var(--sans); font-size: 11px; font-weight: 500; padding: 7px 11px; border-radius: 8px; white-space: normal; max-width: 260px; width: max-content; z-index: 9999; pointer-events: none; box-shadow: 0 6px 24px rgba(0,0,0,.4); line-height: 1.4; letter-spacing: .005em; animation: r-tip-in .15s ease-out; } .r-tips-on [data-tip]:hover::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--r-line-2); z-index: 9999; pointer-events: none; } @keyframes r-tip-in { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Solid status dot — replaces emoji circles like 🔴 🟢 🟡 ⚪ */ .r-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--r-text-3); flex-shrink: 0; } .r-dot-red { background: #e45a52; box-shadow: 0 0 6px rgba(228,90,82,.5); } .r-dot-green { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.45); } .r-dot-amber { background: #f0b429; box-shadow: 0 0 6px rgba(240,180,41,.45); } .r-dot-cyan { background: #06b6d4; box-shadow: 0 0 6px rgba(6,182,212,.45); } .r-dot-purple { background: #a855f7; box-shadow: 0 0 6px rgba(168,85,247,.45); } .r-dot-pink { background: #ec4899; box-shadow: 0 0 6px rgba(236,72,153,.45); } .r-dot-gray { background: var(--r-text-3); } /* ── Tokens (alongside the existing ones in pro.css) ── */ /* Light theme — same token names, calibrated para fondo claro. Sin esto, componentes como el dropdown re-scan del panel quedaban con texto color undefined sobre #1e1e1e, dando un cuadro negro vacío en light mode. */ :root, [data-theme="light"] { --r-bg: #f7f7f8; --r-bg-card: #ffffff; --r-bg-card-2: #fafafa; --r-bg-hover: rgba(0,0,0,.05); --r-line: rgba(0,0,0,.08); --r-line-2: rgba(0,0,0,.14); --r-text: #1a1a1a; --r-text-2: #4b4b4b; --r-text-3: #8a8a8a; --r-cyan: #0891b2; --r-lime: #84cc16; --r-green: #16a34a; --r-pink: #db2777; --r-purple: #9333ea; --r-amber: #d97706; --r-blue: #2563eb; --r-cyan-soft: rgba(6,182,212,.10); --r-lime-soft: rgba(132,204,22,.12); --r-green-soft: rgba(34,197,94,.10); --r-pink-soft: rgba(236,72,153,.10); --r-purple-soft: rgba(168,85,247,.10); --r-amber-soft: rgba(240,180,41,.14); --r-blue-soft: rgba(59,130,246,.10); } [data-theme="dark"], [data-theme="black"] { --r-bg: #0a0a0a; --r-bg-card: #111; --r-bg-card-2: #161616; --r-bg-hover: #1c1c1c; --r-line: rgba(255,255,255,.06); --r-line-2: rgba(255,255,255,.10); --r-text: #f5f5f5; --r-text-2: #a8a8a8; --r-text-3: #6e6e6e; /* Accent palette — used for stat/action card borders + icon boxes */ --r-cyan: #06b6d4; --r-lime: #d4f43c; --r-green: #22c55e; --r-pink: #ec4899; --r-purple: #a855f7; --r-amber: #f0b429; --r-blue: #3b82f6; /* Translucent variants for icon-box backgrounds */ --r-cyan-soft: rgba(6,182,212,.12); --r-lime-soft: rgba(212,244,60,.12); --r-green-soft: rgba(34,197,94,.12); --r-pink-soft: rgba(236,72,153,.12); --r-purple-soft: rgba(168,85,247,.12); --r-amber-soft: rgba(240,180,41,.14); --r-blue-soft: rgba(59,130,246,.12); --r-radius-sm: 10px; --r-radius: 14px; --r-radius-lg: 18px; } /* ── Card primitive: rounded, subtle inner border ── */ .r-card { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: var(--r-radius); padding: 18px 20px; transition: border-color .18s ease, transform .18s ease; } .r-card.is-hover:hover { border-color: var(--r-line-2); } /* ── Stat card with gradient corner glow + thin colored top border ── Uses a ::before with mask to paint a 1px gradient border that fades to transparent toward bottom-right. Single rounded element, no double-border stacking. */ .r-stat { position: relative; background: var(--r-bg-card); border-radius: var(--r-radius-lg); padding: 22px 24px 24px; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; } .r-stat::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--r-c) 0%, var(--r-c) 18%, transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } .r-stat::after { /* Soft glow blob in the top-left, behind everything */ content: ''; position: absolute; top: -30px; left: -30px; width: 140px; height: 140px; background: radial-gradient(circle at center, var(--r-c) 0%, transparent 65%); opacity: .14; filter: blur(10px); pointer-events: none; z-index: 0; } .r-stat > * { position: relative; z-index: 1; } .r-stat-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--r-c-soft); color: var(--r-c); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 18px; } .r-stat-num { font-family: var(--sans); font-size: 38px; font-weight: 600; line-height: 1; color: var(--r-text); letter-spacing: -.02em; } .r-stat-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--r-text-3); margin-top: 8px; } .r-stat-sub { font-family: var(--mono); font-size: 10px; color: var(--r-text-3); margin-top: 8px; } /* color variants */ .r-stat.cyan { --r-c: var(--r-cyan); --r-c-soft: var(--r-cyan-soft); } .r-stat.lime { --r-c: var(--r-lime); --r-c-soft: var(--r-lime-soft); } .r-stat.green { --r-c: var(--r-green); --r-c-soft: var(--r-green-soft); } .r-stat.pink { --r-c: var(--r-pink); --r-c-soft: var(--r-pink-soft); } .r-stat.purple { --r-c: var(--r-purple); --r-c-soft: var(--r-purple-soft); } .r-stat.amber { --r-c: var(--r-amber); --r-c-soft: var(--r-amber-soft); } .r-stat.blue { --r-c: var(--r-blue); --r-c-soft: var(--r-blue-soft); } /* ── Action card: clickable card with icon + title + subtitle + arrow ── */ .r-action { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: var(--r-radius); cursor: pointer; transition: background .18s, border-color .18s, transform .18s; text-decoration: none; color: inherit; } .r-action:hover { background: var(--r-bg-hover); border-color: var(--r-line-2); transform: translateX(2px); } .r-action-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--r-c-soft); color: var(--r-c); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .r-action-body { flex: 1; min-width: 0; } .r-action-title { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--r-text); margin-bottom: 2px; } .r-action-sub { font-family: var(--mono); font-size: 9.5px; color: var(--r-text-3); letter-spacing: .02em; } .r-action-arrow { color: var(--r-text-3); font-size: 14px; transition: color .18s, transform .18s; } .r-action:hover .r-action-arrow { color: var(--r-c); transform: translateX(2px); } .r-action.cyan { --r-c: var(--r-cyan); --r-c-soft: var(--r-cyan-soft); } .r-action.lime { --r-c: var(--r-lime); --r-c-soft: var(--r-lime-soft); } .r-action.green { --r-c: var(--r-green); --r-c-soft: var(--r-green-soft); } .r-action.pink { --r-c: var(--r-pink); --r-c-soft: var(--r-pink-soft); } .r-action.purple { --r-c: var(--r-purple); --r-c-soft: var(--r-purple-soft); } .r-action.amber { --r-c: var(--r-amber); --r-c-soft: var(--r-amber-soft); } .r-action.blue { --r-c: var(--r-blue); --r-c-soft: var(--r-blue-soft); } /* ── Section card with title + see-all link ── */ .r-section { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: var(--r-radius-lg); padding: 18px 22px; } .r-section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .r-section-title { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--r-text); } .r-section-link { font-family: var(--mono); font-size: 10px; color: var(--r-amber); text-decoration: none; letter-spacing: .04em; cursor: pointer; } .r-section-link:hover { color: var(--r-text); } /* Empty state for section cards */ .r-empty { font-family: var(--mono); font-size: 10px; color: var(--r-text-3); text-align: center; padding: 28px 0; } /* ── KOL list row inside a section ── */ .r-kol-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .15s; } .r-kol-row:hover { background: var(--r-bg-hover); } .r-kol-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--r-cyan-soft), var(--r-lime-soft)); display: flex; align-items: center; justify-content: center; color: var(--r-text); font-size: 14px; font-weight: 700; flex-shrink: 0; overflow: hidden; } .r-kol-avatar img { width: 100%; height: 100%; object-fit: cover; } .r-kol-info { flex: 1; min-width: 0; } .r-kol-name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--r-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r-kol-meta { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; color: var(--r-text-3); margin-top: 2px; } .r-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--r-text-3); flex-shrink: 0; } .r-status-dot.green { background: var(--r-green); box-shadow: 0 0 6px rgba(34,197,94,.5); } .r-status-dot.amber { background: var(--r-amber); } .r-status-dot.purple { background: var(--r-purple); } .r-status-dot.cyan { background: var(--r-cyan); } .r-status-dot.pink { background: var(--r-pink); } .r-kol-num { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--r-text); } /* ── Greeting block (Inicio tab header) ── */ .r-greeting { font-family: var(--sans); font-size: 28px; font-weight: 600; color: var(--r-text); letter-spacing: -.02em; margin-bottom: 4px; } .r-greeting-date { font-family: var(--mono); font-size: 11px; color: var(--r-text-3); letter-spacing: .03em; } /* ── Top-right "primary" pill button (gold, like the KOLs button in TT) ── */ .r-pill-primary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--r-amber); color: #000; border: none; border-radius: 10px; font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .15s, transform .15s; } .r-pill-primary:hover { filter: brightness(1.07); transform: translateY(-1px); } /* ── Layout helpers ── */ .r-grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1100px) { .r-grid-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .r-grid-stats { grid-template-columns: 1fr; } } .r-grid-2col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; } @media (max-width: 1000px) { .r-grid-2col { grid-template-columns: 1fr; } } /* ── Inicio tab container ── */ #tab-home { padding: 28px 32px 40px; background: var(--r-bg); overflow: auto; } #tab-home .r-home-hd { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; } /* ── Topbar refinements (subtle, doesn't break legacy nav) ── */ [data-theme="dark"] .nav, [data-theme="black"] .nav { background: var(--r-bg); border-bottom-color: var(--r-line); } /* Tabs in nav: cleaner look with rounded underline */ [data-theme="dark"] .tab, [data-theme="black"] .tab { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; padding: 14px 12px; } [data-theme="dark"] .tab.on, [data-theme="black"] .tab.on { font-weight: 600; color: var(--r-text); position: relative; } [data-theme="dark"] .tab.on::after, [data-theme="black"] .tab.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--r-amber); border-radius: 2px 2px 0 0; } [data-theme="dark"] .tab.on { border-bottom-color: transparent !important; } /* Tab counter badge */ [data-theme="dark"] .tc, [data-theme="black"] .tc { background: var(--r-bg-card-2); color: var(--r-text-2); border: 1px solid var(--r-line); font-family: var(--mono); font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 6px; margin-left: 6px; } [data-theme="dark"] .tab.on .tc, [data-theme="black"] .tab.on .tc { background: var(--r-amber-soft); border-color: transparent; color: var(--r-amber); } /* Brand block */ [data-theme="dark"] .bdot, [data-theme="black"] .bdot { background: var(--r-amber); box-shadow: 0 0 8px rgba(240,180,41,.4); } [data-theme="dark"] .bname, [data-theme="black"] .bname { color: var(--r-text); letter-spacing: .02em; } /* Top-right buttons: tighter, cleaner */ [data-theme="dark"] .nr .btn, [data-theme="black"] .nr .btn { border-radius: 8px; font-size: 11.5px; padding: 7px 12px; } [data-theme="dark"] .nr .btn-primary, [data-theme="black"] .nr .btn-primary { background: var(--r-amber); color: #000; font-weight: 700; border: none; } /* ═══════════════════════════════════════════════════════════════ ANALYZER — Similar Channels card (was broken, now redesigned) Clean horizontal layout: avatar | info column | actions Info column has hard min-width so text never collapses. ═════════════════════════════════════════════════════════════ */ .r-sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; max-height: 520px; overflow-y: auto; padding: 4px 2px; } .r-sim-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: var(--r-radius-sm); align-items: center; transition: border-color .18s, background .18s; } .r-sim-card:hover { border-color: var(--r-line-2); background: var(--r-bg-card-2); } .r-sim-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--r-bg-card-2); flex-shrink: 0; } .r-sim-avatar-ph { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--r-cyan-soft), var(--r-amber-soft)); display: flex; align-items: center; justify-content: center; color: var(--r-text); font-size: 16px; font-weight: 700; flex-shrink: 0; } .r-sim-info { min-width: 0; } .r-sim-name { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--r-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r-sim-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .r-sim-meta { font-family: var(--mono); font-size: 10px; color: var(--r-text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r-sim-score-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .r-sim-score { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; letter-spacing: .03em; flex-shrink: 0; } .r-sim-score.high { background: var(--r-green-soft); color: var(--r-green); } .r-sim-score.mid { background: var(--r-amber-soft); color: var(--r-amber); } .r-sim-score.low { background: var(--r-bg-card-2); color: var(--r-text-3); } .r-sim-reasons { font-family: var(--mono); font-size: 9px; color: var(--r-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .r-sim-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex-shrink: 0; } .r-sim-primary { background: var(--r-amber); color: #000; border: none; border-radius: 7px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; padding: 6px 10px; cursor: pointer; transition: filter .15s, transform .15s; white-space: nowrap; } .r-sim-primary:hover { filter: brightness(1.07); transform: translateY(-1px); } .r-sim-mini-row { display: flex; gap: 4px; } .r-sim-mini { flex: 1; background: transparent; border: 1px solid var(--r-line); border-radius: 6px; font-family: var(--sans); font-size: 9.5px; font-weight: 500; color: var(--r-text-2); padding: 4px 6px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; } .r-sim-mini:hover { background: var(--r-bg-hover); color: var(--r-text); border-color: var(--r-line-2); } .r-sim-mini.green:hover { color: var(--r-green); border-color: rgba(34,197,94,.3); } .r-sim-mini.amber:hover { color: var(--r-amber); border-color: rgba(240,180,41,.3); } /* Lang/state badges inside the name */ .r-sim-badge { font-family: var(--mono); font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; } .r-sim-badge.lang-ok { background: var(--r-green-soft); color: var(--r-green); } .r-sim-badge.lang-bad { background: rgba(228,90,82,.14); color: #e45a52; } .r-sim-badge.indb { background: var(--r-amber-soft); color: var(--r-amber); } /* Header card for the similar-channels result block */ .r-sim-header { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: var(--r-radius); padding: 16px 20px; margin-bottom: 14px; } .r-sim-header-title { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--r-text); letter-spacing: -.005em; line-height: 1.4; margin-bottom: 10px; } .r-sim-header-meta { font-family: var(--mono); font-size: 10px; color: var(--r-text-3); line-height: 1.7; } .r-sim-header-meta b { color: var(--r-text-2); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ STATS BAR — refresh existing .sbar / .sc into clean mini-cards Each stat becomes a small card with a colored dot accent. ═════════════════════════════════════════════════════════════ */ [data-theme="dark"] .sbar, [data-theme="black"] .sbar { background: var(--r-bg); border-bottom: 1px solid var(--r-line); padding: 10px 18px; gap: 8px; display: flex; align-items: center; flex-wrap: wrap; } [data-theme="dark"] .sc, [data-theme="black"] .sc { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; position: relative; transition: border-color .15s, background .15s; cursor: default; min-width: 76px; } [data-theme="dark"] .sc-clickable, [data-theme="black"] .sc-clickable { cursor: pointer; } [data-theme="dark"] .sc-clickable:hover, [data-theme="black"] .sc-clickable:hover { background: var(--r-bg-card-2); border-color: var(--r-line-2); } [data-theme="dark"] .sv, [data-theme="black"] .sv { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--r-text); line-height: 1.1; letter-spacing: -.01em; } [data-theme="dark"] .sl, [data-theme="black"] .sl { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--r-text-3); } /* Color the numbers via accent palette */ [data-theme="dark"] .sv.gold, [data-theme="black"] .sv.gold { color: var(--r-amber); } [data-theme="dark"] .sv.green, [data-theme="black"] .sv.green { color: var(--r-green); } [data-theme="dark"] .sv.blue, [data-theme="black"] .sv.blue { color: var(--r-cyan); } [data-theme="dark"] .sv.orange, [data-theme="black"] .sv.orange { color: var(--r-pink); } [data-theme="dark"] .sv.teal, [data-theme="black"] .sv.teal { color: var(--r-lime); } /* Right-side cluster (status, quota bars, save status) */ [data-theme="dark"] .sc-right, [data-theme="black"] .sc-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } [data-theme="dark"] .tokbar, [data-theme="black"] .tokbar { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 8px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; position: relative; } [data-theme="dark"] .tok-lbl, [data-theme="black"] .tok-lbl { font-family: var(--mono); font-size: 9px; color: var(--r-text-3); letter-spacing: .04em; } [data-theme="dark"] .status-ind, [data-theme="black"] .status-ind { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 999px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--r-text-2); } [data-theme="dark"] .save-status, [data-theme="black"] .save-status { font-family: var(--mono); font-size: 9px; color: var(--r-text-3); } /* ═══════════════════════════════════════════════════════════════ TOOLBAR — refresh existing .toolbar / .swrap / .sin Cleaner search input, refined chips. ═════════════════════════════════════════════════════════════ */ [data-theme="dark"] .toolbar, [data-theme="black"] .toolbar { background: var(--r-bg); border-bottom: 1px solid var(--r-line); padding: 12px 18px; gap: 10px; flex-wrap: wrap; } /* listStatusBar lives inside the toolbar and contains TWO rows (actions + chips). Force it onto its own line below the search input so chips span the full width and don't fight the search bar for space. */ [data-theme="dark"] #listStatusBar, [data-theme="black"] #listStatusBar { flex: 1 0 100%; width: 100%; } [data-theme="dark"] .swrap, [data-theme="black"] .swrap { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 10px; padding: 0 12px; min-width: 280px; flex: 1 1 auto; /* Removed max-width cap so the search input fills the toolbar instead of leaving dead space when actions live below it. */ display: flex; align-items: center; gap: 8px; transition: border-color .15s; } [data-theme="dark"] .swrap:focus-within, [data-theme="black"] .swrap:focus-within { border-color: var(--r-amber); } [data-theme="dark"] .sico, [data-theme="black"] .sico { color: var(--r-text-3); font-size: 13px; } [data-theme="dark"] .sin, [data-theme="black"] .sin { background: transparent; border: none; outline: none; font-family: var(--sans); font-size: 12.5px; color: var(--r-text); padding: 9px 0; width: 100%; } [data-theme="dark"] .sin::placeholder, [data-theme="black"] .sin::placeholder { color: var(--r-text-3); } /* Status filter chips inside toolbar */ [data-theme="dark"] #listStatusBar .ls-chip, [data-theme="black"] #listStatusBar .ls-chip, [data-theme="dark"] .achip, [data-theme="black"] .achip { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 999px; padding: 5px 12px; font-family: var(--sans); font-size: 11px; color: var(--r-text-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } [data-theme="dark"] #listStatusBar .ls-chip:hover, [data-theme="black"] #listStatusBar .ls-chip:hover, [data-theme="dark"] .achip:hover, [data-theme="black"] .achip:hover { background: var(--r-bg-hover); color: var(--r-text); border-color: var(--r-line-2); } [data-theme="dark"] #listStatusBar .ls-chip.on, [data-theme="black"] #listStatusBar .ls-chip.on, [data-theme="dark"] .achip.on, [data-theme="black"] .achip.on { background: var(--r-amber-soft); border-color: rgba(240,180,41,.4); color: var(--r-amber); font-weight: 600; } /* Page size + sort cluster */ [data-theme="dark"] .pgctrls, [data-theme="black"] .pgctrls { display: flex; align-items: center; gap: 8px; margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--r-text-3); } [data-theme="dark"] .pgsel, [data-theme="black"] .pgsel { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 7px; color: var(--r-text); padding: 5px 10px; font-family: var(--sans); font-size: 11px; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════ SIDEBAR — reorder blocks via CSS `order` so HTML stays untouched. New canonical order (most-used first, settings last): 1. Filtros rápidos (qfilters) 2. Métricas (metrics) 3. Idioma del canal (lang) 4. País del canal (country) 5. Exchanges & Brokers 6. Canales similares 7. Keywords de búsqueda 8. Config búsqueda (settings — least used, at bottom) ═════════════════════════════════════════════════════════════ */ .sb { display: flex !important; flex-direction: column !important; } #sb-qfilters { order: 1; } #sb-metrics { order: 2; } #sb-lang { order: 3; } #sb-country { order: 4; } #sb-exchanges { order: 5; } #sb-similar { order: 6; } #sb-keywords { order: 7; } #sb-config { order: 8; } /* ═══════════════════════════════════════════════════════════════ SIDEBAR FILTER CHIPS (.fchips) — refined with SVG icon support ═════════════════════════════════════════════════════════════ */ [data-theme="dark"] .fchips, [data-theme="black"] .fchips { display: flex; flex-wrap: wrap; gap: 5px; } [data-theme="dark"] .fchip, [data-theme="black"] .fchip { display: inline-flex !important; align-items: center; gap: 6px; padding: 5px 11px; background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 999px; font-family: var(--sans); font-size: 11px; color: var(--r-text-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } [data-theme="dark"] .fchip:hover, [data-theme="black"] .fchip:hover { background: var(--r-bg-hover); color: var(--r-text); border-color: var(--r-line-2); } [data-theme="dark"] .fchip.on, [data-theme="black"] .fchip.on { background: var(--r-amber-soft); border-color: rgba(240,180,41,.4); color: var(--r-amber); font-weight: 600; } [data-theme="dark"] .fchip.rf, [data-theme="black"] .fchip.rf { /* Exclusion-style chip: muted by default, red tint when active */ color: var(--r-text-3); } [data-theme="dark"] .fchip.rf.on, [data-theme="black"] .fchip.rf.on { background: rgba(228,90,82,.10); border-color: rgba(228,90,82,.35); color: #e45a52; } [data-theme="dark"] .fchip .r-ico, [data-theme="black"] .fchip .r-ico { width: 12px; height: 12px; } [data-theme="dark"] .fchip svg, [data-theme="black"] .fchip svg { stroke-width: 1.85; } /* ═══════════════════════════════════════════════════════════════ KEYWORDS BLOCK — full redesign for clarity ═════════════════════════════════════════════════════════════ */ .r-kw-hint { font-family: var(--sans); font-size: 10.5px; color: var(--r-text-3); line-height: 1.5; margin-bottom: 10px; } .r-kw-add { display: flex; gap: 6px; align-items: stretch; margin-bottom: 10px; } .r-kw-add-input { flex: 1; background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 7px; color: var(--r-text); font-family: var(--sans); font-size: 11.5px; padding: 7px 10px; outline: none; transition: border-color .15s; min-width: 0; height: 30px; box-sizing: border-box; } .r-kw-add-input::placeholder { color: var(--r-text-3); } .r-kw-add-input:focus { border-color: var(--r-amber); } .r-kw-add-btn { background: var(--r-amber); color: #000; border: none; border-radius: 7px; width: 30px; height: 30px; font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .15s; flex-shrink: 0; box-sizing: border-box; } .r-kw-add-btn:hover { filter: brightness(1.07); } /* Active keyword rows — preserve old IDs/classes, refresh look */ [data-theme="dark"] .r-kw-list .kwr, [data-theme="black"] .r-kw-list .kwr { display: flex; gap: 4px; margin-bottom: 5px; } [data-theme="dark"] .r-kw-list .kwi, [data-theme="black"] .r-kw-list .kwi { flex: 1; background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 7px; color: var(--r-text); font-family: var(--sans); font-size: 11.5px; padding: 7px 10px; height: 30px; box-sizing: border-box; outline: none; min-width: 0; } [data-theme="dark"] .r-kw-list .kdel, [data-theme="black"] .r-kw-list .kdel { height: 30px; box-sizing: border-box; } [data-theme="dark"] .r-kw-list .kwi:focus, [data-theme="black"] .r-kw-list .kwi:focus { border-color: var(--r-line-2); } [data-theme="dark"] .r-kw-list .kdel, [data-theme="black"] .r-kw-list .kdel { background: transparent; border: 1px solid var(--r-line); border-radius: 7px; color: var(--r-text-3); width: 28px; cursor: pointer; font-size: 14px; transition: background .15s, color .15s, border-color .15s; } [data-theme="dark"] .r-kw-list .kdel:hover, [data-theme="black"] .r-kw-list .kdel:hover { background: rgba(228,90,82,.12); color: #e45a52; border-color: rgba(228,90,82,.3); } /* AI suggestions section */ .r-kw-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--r-line); } .r-kw-sec-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .r-kw-sec-title { font-family: var(--sans); font-size: 11px; letter-spacing: .02em; text-transform: none; color: var(--r-purple); font-weight: 600; } .r-kw-refresh { background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.3); border-radius: 6px; color: var(--r-purple); font-family: var(--sans); font-size: 10.5px; font-weight: 600; padding: 4px 10px; height: 26px; cursor: pointer; transition: background .15s; } .r-kw-refresh:hover { background: rgba(168,85,247,.18); } .r-kw-refresh.loading { opacity: .6; pointer-events: none; } .r-kw-chips { display: flex; flex-wrap: wrap; gap: 5px; } .r-kw-chips .sugchip, .r-kw-chips .kwsg { background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 6px; color: var(--r-text-2); font-family: var(--sans); font-size: 10.5px; padding: 5px 9px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; } .r-kw-chips .sugchip:hover, .r-kw-chips .kwsg:hover { background: var(--r-bg-hover); border-color: var(--r-amber); color: var(--r-amber); } .r-kw-chips .sugchip::before, .r-kw-chips .kwsg::before { content: '+ '; color: var(--r-text-3); margin-right: 1px; } .r-kw-chips .sugchip:hover::before, .r-kw-chips .kwsg:hover::before { color: var(--r-amber); } .r-kw-chips .kwsg.used { opacity: .35; cursor: default; pointer-events: none; } .r-kw-chips .kwsg.used::before { content: '✓ '; color: var(--r-green); } /* AI chips: purple tint to differentiate from generic chips */ .r-kw-ai .sugchip { border-color: rgba(168,85,247,.2); color: var(--r-purple); } .r-kw-ai .sugchip:hover { background: rgba(168,85,247,.12); border-color: var(--r-purple); } .r-kw-ai .sugchip::before { color: rgba(168,85,247,.6); } .r-kw-empty { font-family: var(--sans); font-size: 11px; color: var(--r-text-3); line-height: 1.5; padding: 8px 0; font-weight: 400; } .r-kw-empty b { color: var(--r-purple); font-weight: 600; } .r-kw-hint { font-size: 11px; } /* Native
for collapsibles — clean, accessible */ .r-kw-details { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--r-line); } .r-kw-details summary { cursor: pointer; list-style: none; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--r-text-2); padding: 6px 0; display: flex; align-items: center; gap: 6px; transition: color .15s; /* Prevent the summary text from wrapping awkwardly when there's an inline action button on the right (was producing "Biblioteca / guardada (1/2)" stacked over "↑ guardar / actuales") */ flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r-kw-details summary > span:not([class]) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .r-kw-details summary::-webkit-details-marker { display: none; } .r-kw-details summary::before { content: '▸'; color: var(--r-text-3); font-size: 9px; transition: transform .15s; display: inline-block; } .r-kw-details[open] summary::before { transform: rotate(90deg); } .r-kw-details summary:hover { color: var(--r-text); } .r-kw-details > *:not(summary) { margin-top: 8px; } .r-kw-link-inline { margin-left: auto; flex-shrink: 0; background: transparent; border: 1px solid var(--r-line); border-radius: 6px; font-family: var(--sans); font-size: 10px; font-weight: 500; color: var(--r-amber); padding: 3px 8px; cursor: pointer; transition: background .15s; white-space: nowrap; } .r-kw-link-inline:hover { background: var(--r-amber-soft); } /* Saved keyword chips (kwsc) */ [data-theme="dark"] .kwsc, [data-theme="black"] .kwsc { display: inline-flex; align-items: center; gap: 4px; background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 6px; color: var(--r-text-2); font-family: var(--sans); font-size: 10.5px; padding: 4px 4px 4px 8px; margin: 0 4px 4px 0; } [data-theme="dark"] .kwsc > span:first-child, [data-theme="black"] .kwsc > span:first-child { cursor: pointer; transition: color .15s; } [data-theme="dark"] .kwsc > span:first-child:hover, [data-theme="black"] .kwsc > span:first-child:hover { color: var(--r-amber); } [data-theme="dark"] .kwsx, [data-theme="black"] .kwsx { cursor: pointer; color: var(--r-text-3); font-size: 13px; padding: 0 5px; border-radius: 4px; transition: color .15s, background .15s; } [data-theme="dark"] .kwsx:hover, [data-theme="black"] .kwsx:hover { color: #e45a52; background: rgba(228,90,82,.12); } /* "Canales similares" reference list */ .r-kw-refs .kwr { display: flex; gap: 4px; margin-bottom: 5px; } .r-kw-refs .kwi { flex: 1; background: var(--r-bg-card); border: 1px solid var(--r-line); border-radius: 7px; color: var(--r-text); font-family: var(--sans); font-size: 11.5px; padding: 6px 10px; outline: none; min-width: 0; } .r-kw-refs .kdel { background: transparent; border: 1px solid var(--r-line); border-radius: 7px; color: var(--r-text-3); width: 28px; cursor: pointer; font-size: 14px; } .r-kw-refs .kdel:hover { background: rgba(228,90,82,.12); color: #e45a52; border-color: rgba(228,90,82,.3); } /* Suggestion counter pill */ [data-theme="dark"] #kwCnt, [data-theme="black"] #kwCnt { font-family: var(--mono); font-size: 9px; color: var(--r-text-3); background: var(--r-bg-card); border: 1px solid var(--r-line); padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; } /* ═══════════════════════════════════════════════════════════════ LIST TOOLBAR — fix dead space + professional SVG icons The action buttons (Añadir KOL, Vista global, etc.) get tighter layout and inline SVG icons (set on the buttons via JS by render.js). ═════════════════════════════════════════════════════════════ */ .list-actions-row { /* Tighten gap and align with right side of toolbar but cap dead space */ justify-content: flex-end !important; gap: 6px !important; } .list-actions-row .btn { background: var(--r-bg-card) !important; border: 1px solid var(--r-line) !important; border-radius: 8px !important; font-family: var(--sans) !important; font-size: 11.5px !important; font-weight: 500 !important; padding: 7px 12px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transition: background .15s, border-color .15s, color .15s !important; } .list-actions-row .btn:hover { background: var(--r-bg-hover) !important; border-color: var(--r-line-2) !important; } .list-actions-row .btn svg { width: 14px; height: 14px; flex-shrink: 0; } .list-filters-row .fchip { font-family: var(--sans); font-size: 11px; padding: 5px 11px; border-radius: 999px; background: var(--r-bg-card); border: 1px solid var(--r-line); color: var(--r-text-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .list-filters-row .fchip:hover { background: var(--r-bg-hover); color: var(--r-text); } .list-filters-row .fchip.on { background: var(--r-amber-soft); border-color: rgba(240,180,41,.4); color: var(--r-amber); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ RE-SCAN DROPDOWN MENU (panel actions) ═════════════════════════════════════════════════════════════ */ .pa-rm-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-family: var(--sans); font-size: 12px; /* Usa los tokens base del tema (que sí están definidos en light/dark) en lugar de --r-text-2, que antes quedaba undefined en light mode y dejaba el texto invisible (cuadro negro vacío). */ color: var(--text); cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; } .pa-rm-item:hover { background: var(--bg2); color: var(--accent); } .pa-rm-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; } .pa-rm-item small { margin-left: auto; opacity: .55; font-size: 10px; } .pa-rescan-chevron { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .pa-rescan-chevron svg { width: 12px; height: 12px; } /* ═══════════════════════════════════════════════════════════════ DENSITY PASS — trims vertical whitespace on the list/pipeline chrome (stats bar, toolbar, page-size row) so more rows fit per screen. Keeps horizontal layout intact, only compresses padding + gaps that were eating the viewport. ═════════════════════════════════════════════════════════════ */ [data-theme="dark"] .sbar, [data-theme="black"] .sbar { padding: 5px 14px; gap: 6px; } [data-theme="dark"] .sc, [data-theme="black"] .sc { padding: 5px 11px; min-width: 70px; } [data-theme="dark"] .sv, [data-theme="black"] .sv { font-size: 16px; } .toolbar { padding: 5px 12px; gap: 6px; } .sin { padding: 5px 10px 5px 26px; font-size: 11px; } .pgctrls { gap: 4px; } .pgsel { padding: 3px 6px; } .list-combined-row { padding: 4px 0; gap: 6px !important; } .list-actions-row .btn, .list-actions-row .btn-ghost { padding: 4px 9px; font-size: 10.5px; } /* Pipeline kanban — tighter banner/tools row above the columns. */ .pipeline > div:not(.pstage):not(.pipeline-row) { margin-bottom: 6px !important; flex-shrink: 0; }