/* ============================================================================ UX V3.1 — PREMIUM EDITORIAL · One Piece TCG dashboard ---------------------------------------------------------------------------- Corrección del feedback sobre V2/V3 ("demasiados colores, los ojos no saben en qué fijarse, poco comercial"). Dirección: Apple/escaparate · CLARO por defecto · OSCURO opcional. Referencias: App Store, Robinhood (calmado), Stripe Dashboard, Linear, Collectr. PRESUPUESTO DE COLOR (no negociable): · fondo + escala de grises de texto · UN acento (azul) para lo interactivo/primario · UN verde + UN rojo DESATURADOS, SOLO en cifras de %/P&L/Δ PROHIBIDO: arcoíris de rarezas, color por tier, ámbar por todo, veredictos coloreados, múltiples acentos. En pantalla: 2–3 tonos como mucho. Rareza/tier = chip NEUTRO (color solo si esa rareza ES el foco de la vista). Stack: server-rendered HTML + este CSS + JS vanilla. Sin build. Sin deps. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. TOKENS — TEMA CLARO (por defecto) -------------------------------------------------------------------------- */ :root{ /* superficies (claro, cálido-neutro tipo papel premium, NO blanco puro plano) */ --bg: #f7f7f5; /* lienzo */ --surface: #ffffff; /* tarjetas */ --surface-2: #f2f2ef; /* hover de fila, zonas hundidas suaves */ --line: #e7e7e3; /* bordes finos / divisores */ --line-2: #efefec; /* divisor de fila (aún más sutil) */ /* texto: UNA escala de grises (la jerarquía vive aquí, no en color) */ --ink: #1a1a1a; /* heroe / títulos ~16:1 AAA */ --ink-2: #57575a; /* cuerpo secundario ~7.0:1 AAA */ --ink-3: #6e6e72; /* terciario / etiquetas 4.5–5.1:1 AA texto normal (sub/code/eyebrow 12–14px) */ /* UN acento — interactivo/primario (azul calmado, NO neón) */ --accent: #2563eb; /* enlaces, botón primario, foco (5.2:1 sobre tarjeta) */ --accent-ink:#ffffff; /* texto sobre acento */ --accent-sft:#eaf1fe; /* fondo tenue del acento (chip activo, fila seleccionada) */ /* SEMÁNTICA — desaturada, SOLO para %/P&L/Δ. En ningún otro sitio. */ --up: #16793f; /* verde subida (5.5:1 sobre tarjeta, AA texto normal) */ --down: #c0392b; /* rojo bajada (5.4:1 sobre tarjeta) */ --flat: #6e6e72; /* sin cambio = gris, no color (AA, = --ink-3) */ /* radios, sombra (muy sutil), tipografía */ --r: 14px; /* tarjetas */ --r-sm: 9px; /* chips, botones, inputs, thumbs */ --shadow: 0 1px 2px rgba(20,20,30,.05), 0 6px 24px rgba(20,20,30,.05); --shadow-pop: 0 12px 40px rgba(20,20,30,.16); /* tipografía: SERIF editorial para titulares, sans limpia para UI/datos */ --font-display: "New York","Iowan Old Style",Georgia,"Times New Roman",serif; --font-ui: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif; --font-num: ui-monospace,"SF Mono",Menlo,monospace; /* cifras: tabular */ /* densidad (BAJA por defecto; modo denso = toggle) */ --row-h: 56px; /* fila cómoda con miniatura */ --pad: 24px; /* padding interno de tarjeta */ --gap: 20px; /* aire entre tarjetas */ } /* densidad alta opcional (toggle power-user: ) */ :root[data-density="dense"]{ --row-h: 36px; --pad: 16px; --gap: 14px; } /* ---------------------------------------------------------------------------- 2. TOKENS — TEMA OSCURO (variante) · Oscuro CALMADO (no terminal): grafito, no negro puro. Mismo presupuesto. -------------------------------------------------------------------------- */ :root[data-theme="dark"]{ --bg: #16171a; --surface: #1e1f23; --surface-2: #26282d; --line: #2c2e34; --line-2: #25272c; --ink: #f0f0f2; /* ~15:1 */ --ink-2: #b3b4b9; /* ~8:1 */ --ink-3: #919299; /* 4.5–5.3:1 AA texto normal en grafito (igual que en claro) */ --accent: #4d8dff; --accent-ink:#0b1220; --accent-sft:#1b2a44; --up: #4ad77b; /* verde claro desat. ~6:1 sobre grafito */ --down: #ff6b5e; /* rojo claro desat. ~5.4:1 */ --flat: #919299; /* AA, = --ink-3 oscuro */ --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35); --shadow-pop: 0 16px 48px rgba(0,0,0,.6); } /* respeta preferencia del SO si el usuario no ha elegido tema explícito */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ --bg:#16171a; --surface:#1e1f23; --surface-2:#26282d; --line:#2c2e34; --line-2:#25272c; --ink:#f0f0f2; --ink-2:#b3b4b9; --ink-3:#919299; --accent:#4d8dff; --accent-ink:#0b1220; --accent-sft:#1b2a44; --up:#4ad77b; --down:#ff6b5e; --flat:#919299; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35); --shadow-pop:0 16px 48px rgba(0,0,0,.6); } } /* ---------------------------------------------------------------------------- 3. BASE -------------------------------------------------------------------------- */ *{box-sizing:border-box} html{color-scheme:light dark} body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 var(--font-ui); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .wrap{max-width:1120px; margin:0 auto; padding:32px 28px 96px} a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline} ::selection{background:var(--accent-sft)} /* tipografía editorial */ h1,h2,h3,.display{font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; color:var(--ink); margin:0} h1{font-size:34px; line-height:1.15} h2{font-size:21px; line-height:1.25} .eyebrow{font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 6px} .lede{font-size:17px; color:var(--ink-2); max-width:62ch; margin:6px 0 0} .muted{color:var(--ink-3)} .sub{color:var(--ink-3); font-size:14px} /* cifras: tabular siempre */ .num{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"} /* ---------------------------------------------------------------------------- 4. SEMÁNTICA — el ÚNICO sitio donde aparece verde/rojo Δ con signo + flecha (no solo color: ~8% daltónicos). Tamaño = jerarquía. -------------------------------------------------------------------------- */ .delta{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap} .delta.up{color:var(--up)} .delta.down{color:var(--down)} .delta.flat{color:var(--flat)} .delta.up::before{content:"▲ "; font-size:.78em} .delta.down::before{content:"▼ "; font-size:.78em} .delta.flat::before{content:"– "} /* ---------------------------------------------------------------------------- 5. NAVEGACIÓN — barra editorial calma (sin pestañas de colores) -------------------------------------------------------------------------- */ .topbar{display:flex; align-items:center; gap:24px; margin-bottom:40px} .brand{font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); white-space:nowrap} .brand .dot{color:var(--accent)} .nav{display:flex; gap:4px; flex-wrap:wrap; flex:1} .nav a{ font-size:14px; font-weight:500; color:var(--ink-2); padding:7px 12px; border-radius:var(--r-sm); text-decoration:none; } .nav a:hover{background:var(--surface-2); color:var(--ink)} .nav a[aria-current]{color:var(--ink); font-weight:600; background:var(--surface)} /* acento SOLO como subrayado fino bajo la activa — un toque, no un bloque */ .nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)} /* búsqueda / command bar disparador (Apple/Linear) */ .cmd{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink-3); font-size:14px; min-width:200px; } .cmd:hover{border-color:var(--ink-3)} .cmd kbd{margin-left:auto; font:11px var(--font-num); color:var(--ink-3); border:1px solid var(--line); border-radius:5px; padding:1px 6px; background:var(--bg)} .themetoggle{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); height:38px; min-width:38px; border-radius:var(--r-sm); cursor:pointer; font-size:16px; display:inline-flex; align-items:center; justify-content:center; gap:5px; text-decoration:none; box-sizing:border-box} .themetoggle:hover{border-color:var(--ink-3); color:var(--ink)} /* menús desplegables del nav (Estrategias / Personal) */ .navgroup{position:relative} .navgroup>.gt{font-size:14px; font-weight:500; color:var(--ink-2); padding:7px 12px; border-radius:var(--r-sm); cursor:default; white-space:nowrap; display:inline-block} .navgroup:hover>.gt,.navgroup:focus-within>.gt{background:var(--surface-2); color:var(--ink)} .navgroup.active>.gt{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent)} .navgroup .navmenu{position:absolute; top:100%; left:0; min-width:180px; z-index:50; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:0 10px 28px rgba(0,0,0,.14); padding:6px; display:none; flex-direction:column; gap:2px} .navgroup:hover .navmenu,.navgroup:focus-within .navmenu{display:flex} .navgroup .navmenu a{font-size:14px; color:var(--ink-2); padding:7px 10px; border-radius:var(--r-sm); text-decoration:none; white-space:nowrap} .navgroup .navmenu a:hover{background:var(--surface-2); color:var(--ink)} /* ---------------------------------------------------------------------------- 6. TARJETAS · GRID · ESPACIO PREMIUM Profundidad = borde fino + sombra MUY sutil. Nada de bloques de color. -------------------------------------------------------------------------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--pad); box-shadow:var(--shadow); max-width:100%; overflow-x:auto; /* tablas anchas -> scroll dentro de la tarjeta, no se salen */ } .card > .eyebrow{margin-bottom:14px} .grid{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .cols{display:grid; gap:var(--gap); grid-template-columns:1fr 1fr} @media(max-width:820px){.cols{grid-template-columns:1fr}} .section{margin-top:48px} .section > .eyebrow{margin-bottom:16px} /* fila clave/valor dentro de tarjeta (calma: etiqueta gris, valor ink) */ .kv{display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line-2)} .kv:last-child{border-bottom:0} .kv .k{color:var(--ink-3); font-size:14px} .kv .v{font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--ink); font-weight:500} /* ---------------------------------------------------------------------------- 7. HÉROE — UN foco por vista (cifra grande O imagen) -------------------------------------------------------------------------- */ .hero-stat{display:flex; flex-direction:column; gap:4px} .hero-stat .label{font-size:13px; color:var(--ink-3); font-weight:600; letter-spacing:.04em; text-transform:uppercase} .hero-stat .value{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:56px; line-height:1; font-weight:600; color:var(--ink); letter-spacing:-.02em} .hero-stat .meta{font-size:15px; color:var(--ink-2)} /* ---------------------------------------------------------------------------- 8. CHIPS / BADGES — NEUTROS (rareza, tier, condición, estado scraper) DOS conceptos, NO mezclar: .chip.active = filtro SELECCIONADO (acento como "interactivo activo"). Es lo que se usa en las barras de filtro de oportunidades/colección. .chip.focus = la rareza/categoría ES el foco semántico de la vista (uso muy puntual, raro). NO usar para filtros — para eso está .chip.active. Ambos comparten el mismo aspecto (acento suave) porque el acento es el único color interactivo; lo importante es no confundir "filtro activo" con "rareza-foco" al migrar (esa confusión es la puerta por la que vuelve el "color por tier"). -------------------------------------------------------------------------- */ .chip{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line)} .chip.active{color:var(--accent); background:var(--accent-sft); border-color:transparent} /* filtro seleccionado */ .chip.focus {color:var(--accent); background:var(--accent-sft); border-color:transparent} /* rareza-foco (muy puntual) */ /* GUARDA: nombres de color de carta (Rojo/Azul/Verde/Morado/Amarillo/Negro) son ETIQUETAS, NO estados → NUNCA colorearlos. Para mezclas usar un donut/barra de UN solo tono (--accent) con opacidades. Colorear por facción = vuelve el arcoíris. */ .chip .led{width:7px; height:7px; border-radius:50%; background:var(--ink-3)} /* estado neutro */ .chip.live .led{background:var(--up)} /* "vivo" es la única excepción de estado verde fuera de % */ .chip.stop .led{background:var(--ink-3)} /* ---------------------------------------------------------------------------- 9. BOTONES — UNA acción primaria clara por vista -------------------------------------------------------------------------- */ .btn{display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600; font-size:15px; padding:11px 20px; border-radius:var(--r-sm); cursor:pointer; border:1px solid transparent} .btn-primary{background:var(--accent); color:var(--accent-ink)} .btn-primary:hover{filter:brightness(1.06); text-decoration:none} .btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink-3); text-decoration:none} .btn-sm{padding:6px 12px; font-size:13px} /* ---------------------------------------------------------------------------- 10. LISTAS IMAGE-FORWARD (catálogo / colección) · IMAGEN protagonista -------------------------------------------------------------------------- */ .collection{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .ccard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease} .ccard:hover{transform:translateY(-3px); box-shadow:var(--shadow-pop); text-decoration:none} .ccard .art{aspect-ratio:5/7; background:var(--surface-2); display:block; width:100%; object-fit:cover} .ccard .body{padding:12px 14px 14px} .ccard .name{font-weight:600; color:var(--ink); font-size:14.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden} .ccard .code{font:12px var(--font-num); color:var(--ink-3); margin-top:1px} .ccard .priceline{display:flex; justify-content:space-between; align-items:baseline; margin-top:10px} .ccard .price{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); font-size:16px} /* ---------------------------------------------------------------------------- 11. TABLAS — calmas (sin zebra, divisor 1px, números a la derecha) Densidad baja por defecto; sube con data-density=dense. -------------------------------------------------------------------------- */ .dtable{width:100%; border-collapse:collapse; font-size:14.5px} .dtable th{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:0 14px 12px; border-bottom:1px solid var(--line)} .dtable td{padding:0 14px; height:var(--row-h); border-bottom:1px solid var(--line-2); vertical-align:middle} .dtable tbody tr:hover{background:var(--surface-2)} .dtable .r{text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums} .dtable th.r{text-align:right} .dtable .code{font-family:var(--font-num); color:var(--ink-3); font-size:13px} /* etiqueta → IZQUIERDA */ .dtable .name a{color:var(--ink); font-weight:500} .dtable .name a:hover{color:var(--accent)} .thumb{height:40px; aspect-ratio:5/7; object-fit:cover; border-radius:6px; vertical-align:middle; background:var(--surface-2)} /* ---------------------------------------------------------------------------- 12. SPARKLINE / GRÁFICA · minimal, sin relleno arcoíris color de línea = ink-3 (neutro) salvo que sea P&L (entonces up/down) -------------------------------------------------------------------------- */ .spark{display:inline-block; vertical-align:middle} .spark path,.spark polyline{fill:none; stroke:var(--ink-3); stroke-width:1.6} .spark .area{fill:var(--surface-2); stroke:none} .spark.up polyline,.spark.up path{stroke:var(--up)} .spark.down polyline,.spark.down path{stroke:var(--down)} .spark circle{fill:var(--ink-3)} /* ---------------------------------------------------------------------------- 13. COMMAND PALETTE (⌘K) — overlay calmado -------------------------------------------------------------------------- */ dialog.palette{border:none; padding:0; border-radius:var(--r); width:min(620px,92vw); background:var(--surface); box-shadow:var(--shadow-pop); color:var(--ink); top:12vh} dialog.palette::backdrop{background:rgba(20,20,25,.32); backdrop-filter:blur(2px)} .palette input{width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:17px var(--font-ui); padding:18px 20px; outline:none} .palette ul{list-style:none; margin:0; padding:8px; max-height:50vh; overflow:auto} .palette li{padding:10px 14px; border-radius:var(--r-sm); display:flex; gap:12px; align-items:center; cursor:pointer} .palette li[aria-selected="true"]{background:var(--accent-sft)} .palette .hint{font:11px var(--font-num); color:var(--ink-3); margin-left:auto} .palette .pfoot{display:flex; gap:14px; padding:10px 16px; border-top:1px solid var(--line); font:11px var(--font-num); color:var(--ink-3)} /* ---------------------------------------------------------------------------- 14. ESTADOS VACÍOS — friendly, con acción (no un "—" suelto) -------------------------------------------------------------------------- */ .empty{text-align:center; padding:64px 24px; color:var(--ink-3)} .empty .ico{font-size:40px; opacity:.5; margin-bottom:12px} .empty h3{font-size:20px; color:var(--ink); margin:0 0 6px} .empty p{margin:0 0 18px; color:var(--ink-2)} /* ---------------------------------------------------------------------------- 15. TOOLTIP imagen on-hover (reusa el patrón existente #tt) -------------------------------------------------------------------------- */ #tt{position:fixed; display:none; width:200px; z-index:1000; pointer-events:none; border-radius:10px; box-shadow:var(--shadow-pop)} /* foco accesible visible (3:1) en TODO lo interactivo */ a:focus-visible,.btn:focus-visible,.cmd:focus-visible,.nav a:focus-visible, .themetoggle:focus-visible,.ccard:focus-visible,.dtable a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px} /* controles de la derecha del topbar (lupa, idioma, tema, menú) */ .topctl{display:flex; gap:8px; align-items:center; margin-left:auto} .hamburger{display:none} .dtable td.r,.dtable td.num,.dtable th.r{white-space:nowrap} /* números no parten en 2 líneas */ .userbar{display:flex; justify-content:flex-end; gap:14px; align-items:center; margin:-30px 0 28px; font-size:13px; color:var(--ink-3)} .userbar a{color:var(--ink-2); text-decoration:none} /* --- móvil: menú hamburguesa + tablas con scroll --- */ @media(max-width:760px){ .wrap{padding:20px 14px 80px} .topbar{flex-wrap:wrap; gap:10px; margin-bottom:22px} .hamburger{display:inline-flex; align-items:center; justify-content:center; height:38px; min-width:38px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:18px; cursor:pointer} .nav{display:none; order:10; flex:none; flex-basis:100%; flex-direction:column; gap:2px; margin-top:4px} .navtoggle:checked ~ .nav{display:flex} .nav a{padding:11px 12px} .navgroup{width:100%} .navgroup>.gt{display:block; padding:11px 12px} .navgroup .navmenu{position:static; display:flex; box-shadow:none; border:none; padding:2px 0 6px 16px; min-width:0} .userbar{justify-content:flex-start; margin:8px 0 16px} h1{font-size:25px} .display{font-size:21px !important} }