/* * Bloxy Market — Shortcodes guías pillar (V3.3a) * Estilos scoped bajo .bloxy-sg para no chocar con Astra ni * con otras secciones del sitio (/frutas/, /mercado/, /tradeos/). * * Soporte dark mode: * 1) automático vía prefers-color-scheme. * 2) manual: si el o un ancestro tiene .dark-mode, .dark, * o data-theme="dark", se fuerza el esquema oscuro. */ /* ── Tokens ────────────────────────────────────────────────────── */ .bloxy-sg { --bsg-bg: #ffffff; --bsg-bg-soft: #f7f8fa; --bsg-bg-card: #ffffff; --bsg-bg-card-hov: #f1f3f7; --bsg-border: #e4e7ec; --bsg-text: #1d2433; --bsg-text-soft: #5b6478; --bsg-accent: #ff5a36; --bsg-accent-soft: #fff1ec; --bsg-up: #16a34a; --bsg-down: #dc2626; --bsg-flat: #6b7280; --bsg-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --bsg-shadow-hov: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06); --bsg-radius: 10px; --bsg-radius-sm: 6px; box-sizing: border-box; margin: 1.25em 0; color: var(--bsg-text); font-family: inherit; line-height: 1.45; } .bloxy-sg *, .bloxy-sg *::before, .bloxy-sg *::after { box-sizing: border-box; } @media (prefers-color-scheme: dark) { .bloxy-sg:not(.bloxy-sg--force-light) { --bsg-bg: #0f1218; --bsg-bg-soft: #161a23; --bsg-bg-card: #1a1f2a; --bsg-bg-card-hov: #232938; --bsg-border: #2a3142; --bsg-text: #e8ecf3; --bsg-text-soft: #9aa3b5; --bsg-accent: #ff7a5c; --bsg-accent-soft: #2a1610; --bsg-up: #4ade80; --bsg-down: #f87171; --bsg-flat: #94a3b8; --bsg-shadow: 0 1px 3px rgba(0,0,0,.4); --bsg-shadow-hov: 0 4px 12px rgba(0,0,0,.5); } } .dark-mode .bloxy-sg, .dark .bloxy-sg, [data-theme="dark"] .bloxy-sg { --bsg-bg: #0f1218; --bsg-bg-soft: #161a23; --bsg-bg-card: #1a1f2a; --bsg-bg-card-hov: #232938; --bsg-border: #2a3142; --bsg-text: #e8ecf3; --bsg-text-soft: #9aa3b5; --bsg-accent: #ff7a5c; --bsg-accent-soft: #2a1610; --bsg-up: #4ade80; --bsg-down: #f87171; --bsg-flat: #94a3b8; } /* ── Mensajes (warn / info) ────────────────────────────────────── */ .bloxy-sg-msg { padding: 12px 14px; border-radius: var(--bsg-radius); background: var(--bsg-bg-soft); color: var(--bsg-text-soft); border: 1px dashed var(--bsg-border); font-size: 0.95em; } .bloxy-sg-msg--warn { color: var(--bsg-down); border-color: var(--bsg-down); } .bloxy-sg-msg--info { color: var(--bsg-text-soft); } /* ── Tier badge (compartido) ───────────────────────────────────── */ .bloxy-sg-tier-badge { display: inline-block; min-width: 28px; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 0.78em; text-align: center; letter-spacing: 0.03em; color: #fff; background: var(--bsg-flat); line-height: 1.4; } .bloxy-sg-tier-badge--tier-s { background: #d946ef; } /* magenta */ .bloxy-sg-tier-badge--tier-a { background: #ef4444; } /* rojo */ .bloxy-sg-tier-badge--tier-b { background: #f59e0b; } /* ámbar */ .bloxy-sg-tier-badge--tier-c { background: #3b82f6; } /* azul */ .bloxy-sg-tier-badge--tier-d { background: #6b7280; } /* gris */ .bloxy-sg-tier-badge--tier-none { background: transparent; color: var(--bsg-text-soft); border: 1px dashed var(--bsg-border); } /* ═══════════════════════════════════════════════════════════════ 1) TIER LIST [bloxy_tier_list] ═══════════════════════════════════════════════════════════════ */ .bloxy-sg-tier-list__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; } .bloxy-sg-tier-list__badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--bsg-accent); color: #fff; font-weight: 700; font-size: 0.88em; letter-spacing: 0.02em; } .bloxy-sg-tier-list__count { font-size: 0.85em; color: var(--bsg-text-soft); } .bloxy-sg-tier-list__grid { display: grid; grid-template-columns: repeat( auto-fill, minmax(140px, 1fr) ); gap: 10px; } .bloxy-sg-card { display: flex; flex-direction: column; align-items: center; padding: 10px; background: var(--bsg-bg-card); border: 1px solid var(--bsg-border); border-radius: var(--bsg-radius); text-decoration: none !important; color: var(--bsg-text); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; box-shadow: var(--bsg-shadow); } .bloxy-sg-card:hover, .bloxy-sg-card:focus-visible { background: var(--bsg-bg-card-hov); transform: translateY(-2px); box-shadow: var(--bsg-shadow-hov); } .bloxy-sg-card__img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 6px; } .bloxy-sg-card__body { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; } .bloxy-sg-card__name { font-weight: 600; font-size: 0.92em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bloxy-sg-card__value { font-size: 0.82em; color: var(--bsg-text-soft); } /* ═══════════════════════════════════════════════════════════════ 2) COMBO TOP [bloxy_combo_top] ═══════════════════════════════════════════════════════════════ */ .bloxy-sg-combo__card { padding: 14px 16px; border-radius: var(--bsg-radius); background: var(--bsg-bg-card); box-shadow: var(--bsg-shadow); } .bloxy-sg-combo__card--editorial { border: 2px solid var(--bsg-accent); background: linear-gradient( 180deg, var(--bsg-accent-soft) 0%, var(--bsg-bg-card) 60% ); } .bloxy-sg-combo__card--community { border: 1px solid var(--bsg-border); } .bloxy-sg-combo__label { font-weight: 700; font-size: 0.92em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bloxy-sg-combo__icon { font-size: 1.1em; } .bloxy-sg-combo__avatar { width: 22px; height: 22px; border-radius: 50%; margin: 0 4px; vertical-align: middle; } .bloxy-sg-combo__author { color: var(--bsg-accent); } .bloxy-sg-combo__body { font-size: 0.96em; color: var(--bsg-text); } .bloxy-sg-combo__sequence { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 600; margin-bottom: 6px; } .bloxy-sg-combo__notes { color: var(--bsg-text-soft); font-size: 0.92em; } /* ═══════════════════════════════════════════════════════════════ 3) MERCADO TOP [bloxy_mercado_top] ═══════════════════════════════════════════════════════════════ */ .bloxy-sg-mercado { border: 1px solid var(--bsg-border); border-radius: var(--bsg-radius); overflow: hidden; background: var(--bsg-bg-card); } .bloxy-sg-mercado__head, .bloxy-sg-mercado__row { display: grid; grid-template-columns: 32px 1fr 60px 1fr 80px; align-items: center; gap: 8px; padding: 10px 12px; } .bloxy-sg-mercado__head { background: var(--bsg-bg-soft); font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bsg-text-soft); border-bottom: 1px solid var(--bsg-border); } .bloxy-sg-mercado__row { border-bottom: 1px solid var(--bsg-border); text-decoration: none !important; color: var(--bsg-text); transition: background .12s ease; } .bloxy-sg-mercado__row:last-child { border-bottom: none; } .bloxy-sg-mercado__row:hover, .bloxy-sg-mercado__row:focus-visible { background: var(--bsg-bg-card-hov); } .bloxy-sg-mercado__col--pos { color: var(--bsg-text-soft); font-weight: 700; } .bloxy-sg-mercado__col--name { display: flex; align-items: center; gap: 8px; min-width: 0; } .bloxy-sg-mercado__img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .bloxy-sg-mercado__name-txt { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bloxy-sg-mercado__col--price { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .bloxy-sg-mercado__col--trend { text-align: right; font-weight: 700; font-size: 0.9em; font-variant-numeric: tabular-nums; } .bloxy-sg-mercado__trend--up { color: var(--bsg-up); } .bloxy-sg-mercado__trend--down { color: var(--bsg-down); } .bloxy-sg-mercado__trend--flat { color: var(--bsg-flat); } /* ── Mobile (<560px): apila info, oculta head ──────────────────── */ @media (max-width: 560px) { .bloxy-sg-mercado__head { display: none; } .bloxy-sg-mercado__row { grid-template-columns: 28px 1fr auto; grid-template-areas: "pos name trend" "pos price tier"; row-gap: 2px; } .bloxy-sg-mercado__col--pos { grid-area: pos; } .bloxy-sg-mercado__col--name { grid-area: name; } .bloxy-sg-mercado__col--tier { grid-area: tier; text-align: right; } .bloxy-sg-mercado__col--price { grid-area: price; text-align: left; font-size: 0.92em; color: var(--bsg-text-soft); } .bloxy-sg-mercado__col--trend { grid-area: trend; } .bloxy-sg-tier-list__grid { grid-template-columns: repeat( auto-fill, minmax(110px, 1fr) ); } .bloxy-sg-card__img { width: 44px; height: 44px; } }