` y la página quedó sin un solo `h3`): de ahí `margin:0` y la tipografía explícita en `__nom`, para que el `

` no traiga sus defaults. / margin: 0; grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; padding: 8px 0 2px; } .rtc-espmatriznom { font: 700 1rem var(--font-head); color: var(--texto); min-width: 0; } .rtc-espmatrizrareza { / 0.72rem = piso tipográfico de §4 (v0.51.0 lo dejó en 0.68rem, por debajo). / font: 600 0.72rem var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris-suave); } .rtc-espmatrizn { font: 600 0.8rem var(--font-head); color: var(--gris); font-variant-numeric: tabular-nums; margin-left: auto; } @media (min-width: 600px) { .rtc-espmatrizrot { / Pista 1 EXPLÍCITA (no `auto`): con celdas ancladas por `--esp-col` el rótulo debe anclarse igual, o el auto-placement lo mete en el primer hueco que encuentre. / grid-column: 1; flex-direction: column; align-items: flex-start; align-self: center; justify-content: center; gap: 2px; padding: 0 8px 0 0; } .rtc-espmatrizn { margin-left: 0; } / En escritorio el rótulo es el identificador principal de la fila y competía a 16px contra sprites de 148px. Sube un escalón (18px) solo donde hay columna de rótulo. / .rtc-espmatriznom { font-size: 1.125rem; } } / Celda: el cromo pelado. Dentro de la matriz el nombre de variante y la rareza son REDUNDANTES (los dan el encabezado de columna y el rótulo de fila) ⇒ se ocultan AQUÍ y solo aquí. `.rtc-esp` (marco, estado, trama, insignia, aria-label) queda intocado: el cromo es `role="img"` con `aria-label` completo, que PODA a sus descendientes, así que ocultar el texto visible no le quita nada a un lector de pantalla. / .rtc-espmatrizcelda { min-width: 0; } .rtc-espmatriz .rtc-espnombre, .rtc-espmatriz .rtc-esprareza { display: none; } / Fallback de rareza MIXTA en una base: solo esa fila reexpone la rareza por celda (el rótulo de fila la omite). El rótulo nunca miente. / .rtc-espmatrizcelda--conrareza .rtc-esprareza { display: block; } / Variante ausente = esa variante NO EXISTE para esta base. Hasta v0.51.1 era `visibility:hidden`: un hueco MUDO que se leía como "no cargó" o —peor, en una herramienta de trades— como "te falta". Confundir "no existe" con "te falta" es el error caro de este producto, así que ahora el slot se declara con un guion sobre una superficie plana. Se distingue de "te falta" en los tres canales visuales: sin trama diagonal, sin marco dashed de variante y sin insignia ＋. La columna ya la sostiene `--esp-col` (arriba), no la ocupación del slot. ⚠️ v0.51.3 — EL GUION NO LLEGABA POR NINGÚN CANAL, pese a que v0.51.2 lo llamaba "canal de texto, no color". Dos defectos medidos: (1) el `opacity: 0.55` de la celda arrastraba al guion a 2.14:1 en tema claro (`--gris` #5b6b85 al 55 % sobre el lienzo #eef2f8), bajo el 4.5:1 de AA para texto — y 3.08:1 en OLED, también bajo; (2) el `
` iba `aria-hidden="true"`, así que para un lector de pantalla el slot sencillamente no existía. Corrección: el `opacity` deja de aplicarse a la celda entera y el guion va a color pleno ⇒ 4.81:1 en claro y 8.51:1 en OLED, ambos AA. La atenuación que buscaba el 0.55 se conserva SOLO en el borde, que es decorativo. El nombre accesible lo pone el PHP (`role="img"` + `aria-label` "… · no existe") y hay una leyenda bajo la matriz. / .rtc-espmatrizcelda--vacio { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: var(--radio-sm); border: 1px solid var(--borde); } .rtc-espmatriznovale { font: 600 0.9rem var(--font-body); color: var(--gris); line-height: 1; } / Leyenda de la matriz: explica el guion en TEXTO, una vez, bajo la rejilla. Sin ella el `—` se puede leer como "otra que me falta", que es la confusión cara de esta herramienta. / .rtc-espmatrizleyenda { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.35; color: var(--texto-suave); } .rtc-espmatrizleyenda b { font-weight: 700; color: var(--texto); } / --- Sección "Únicos": bases con EXACTAMENTE una variante (misma regla que el canvas). Aquí SÍ va el nombre bajo el sprite: fuera de la matriz no hay rótulo de fila. --- / .rtc-espunicos { margin-top: 24px; } .rtc-espunicostit { margin: 0 0 2px; font: 700 1rem var(--font-head); color: var(--texto); } .rtc-espunicossub { margin: 0 0 10px; font-size: 0.85rem; color: var(--gris-suave); } / La celda se DERIVA de la matriz, pero NO es la misma celda: aquí el cromo SÍ lleva nombre y rareza debajo (tema.md), y la matriz los oculta. Historia de las dos correcciones: · v0.51.2 quiso parear la escala y usó `repeat(auto-fill, minmax(--esp-cell-min, 1fr))`. Eso deriva el NÚMERO DE COLUMNAS DEL ANCHO, mientras la matriz lo FIJA con `repeat(var(--esp-nvar), …)`. Coincidían en móvil por accidente aritmético; en escritorio el contenedor de 770px daba floor((770+6)/(52+6)) = 13 columnas ⇒ celda de 53.7px contra los 148px de la matriz (0.36×). El `max-width` acota el CONTENEDOR, nunca el conteo. · v0.51.3 fija el conteo desde `--esp-nvar` igual que la matriz ⇒ (770 − 4×6)/5 = 149.2px, pareado con la matriz. Cero tokens nuevos en este eje. MÓVIL — por qué NO se fija a `--esp-nvar` aquí. Con 5 columnas a 360px la celda queda en 54.4px útiles y el texto que esta sección existe para mostrar no cabe: "Maní Quemado" pide 89px (medido `scrollWidth` 89 / `clientWidth` 60) y "MÍTICA" desborda a lo ancho y se corta contra el borde inferior. Se usa un mínimo PROPIO, `--esp-uni-cell-min`, dimensionado por el texto (89px del nombre más largo + 6px de aire = 95 → 96px): 360px: floor((328 + 6) / (96 + 6)) = 3 columnas de (328 − 2×6)/3 = 105.3px 390px: floor((358 + 6) / 102) = 3 columnas de (358 − 12)/3 = 115.3px Los 3 únicos caben en UNA fila en ambos y ningún texto se recorta. TRADE-OFF ACEPTADO Y MEDIDO: en móvil el sprite de Únicos queda 105/54.4 = 1.94× el de la matriz. Es una regresión PARCIAL del pareo de v0.51.2 (que venía de 2.7×), tomada a propósito: con 3 ítems y texto obligatorio, la legibilidad del nombre+rareza pesa más que la paridad de escala. Si se decide lo contrario, el revert es cambiar `--esp-uni-cell-min` por `--esp-cell-min` y `auto-fit` por `repeat(var(--esp-nvar,5), …)` — y volverá el recorte. / .rtc-espunicosgrid { / Ancho mínimo de celda dictado por el TEXTO, no por el sprite (ver la cuenta de arriba). / --esp-uni-cell-min: 96px; list-style: none; display: grid; / `min(…, 100%)` evita el desbordamiento si el contenedor fuera más estrecho que el mínimo. / grid-template-columns: repeat(auto-fit, minmax(min(var(--esp-uni-cell-min), 100%), 1fr)); gap: var(--esp-gap); margin: 0; padding: 0; } @media (min-width: 600px) { .rtc-espunicosgrid { / Mismo conteo que la matriz ⇒ misma anchura de celda (149.2px sobre 770px). / grid-template-columns: repeat(var(--esp-nvar, 5), minmax(var(--esp-cell-min), 1fr)); max-width: calc(var(--esp-nvar, 5) (var(--esp-cell-max) + var(--esp-gap))); } } /* El nombre y la rareza de un único NO se recortan: esta sección existe para mostrarlos (tema.md). Se permite envolver por PALABRAS — `white-space: normal` sin `overflow-wrap: anywhere`, para no repetir el corte a mitad de palabra que hubo que deshacer en el rótulo de columna. "Maní Quemado" parte en "Maní" / "Quemado" (~45px, cabe). / .rtc-espunicoscelda .rtc-espnombre, .rtc-espunicoscelda .rtc-esprareza { white-space: normal; overflow: visible; text-overflow: clip; } / --- Barra de acciones flotante en móvil (SPEC 0016 §D + MAYOR-2) --- Fija al borde inferior del viewport durante el marcado; estática y centrada en ≥720px. El contenedor del tracker lleva padding-bottom para que la barra no tape el último grupo. / .rtc-espbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; background: var(--top-bg); backdrop-filter: blur(8px); border-top: 1px solid var(--borde); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); } .rtc-espbar .rtc-btn { min-height: var(--tap); } / MAYOR-3: "Guardar mi tracker" es la acción primaria única y va PRIMERO. / .rtc-espbarguardar { order: -1; } .rtc-espbarhint { order: 1; flex-basis: 100%; margin: 0; text-align: center; font-size: 0.8rem; color: var(--texto-suave); } .rtc-esptrackerguardomsg { order: 2; flex-basis: 100%; text-align: center; color: var(--texto-suave); font-size: 0.85rem; } .rtc-esptrackerguardomsg:empty { display: none; } / Deja aire bajo el contenido para la barra flotante (móvil). / @media (max-width: 719px) { .rtc-esptracker, .rtc-espst { padding-bottom: 132px; } } @media (min-width: 720px) { .rtc-espbar { position: static; background: none; border: 0; backdrop-filter: none; justify-content: center; } } / --- Epic ID opcional del tracker GLOBAL (v0.33.0) --- Campo para personalizar la imagen descargable ("Epic: {id}"). Tokens del tema (2 temas), input con tap-target ≥44px. No aparece en /streamer/{slug}/espiritus. / .rtc-espepic { display: flex; flex-direction: column; gap: 6px; max-width: 340px; margin: 0 auto 16px; } .rtc-espepiclabel { font-family: var(--font-body); font-size: 0.85rem; color: var(--texto-suave); } .rtc-espepicinput { width: 100%; min-height: var(--tap); padding: 0 14px; border-radius: var(--radio-sm); background: var(--superficie-2); border: 1px solid var(--borde); color: var(--blanco); font-family: var(--font-body); font-size: 0.95rem; } .rtc-espepicinput::placeholder { color: var(--gris); } .rtc-espepicinput:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; } / --- Vista pública /espiritus (tracker) --- / .rtc-esptracker { max-width: 1000px; margin: 0 auto; padding: 20px 16px 64px; } .rtc-esptrackerhead { text-align: center; margin-bottom: 20px; } .rtc-esptrackertitulo { font-family: var(--font-head); font-size: 1.9rem; color: var(--texto); } .rtc-esptrackersub { color: var(--texto-suave); max-width: 60ch; margin: 8px auto 0; } .rtc-esptrackerdisc { display: inline-block; margin-top: 12px; padding: 4px 12px; border: 1px solid var(--borde); border-radius: 999px; font-size: 0.8rem; color: var(--texto-suave); } .rtc-esptrackerbarra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } / (v3 SPEC 0023) El texto plano `.rtc-esptrackerprog` se reemplazó por el anillo `.rtc-esphero` (más abajo). La micro-celebración vive ahora en `.rtc-espmedidor.is-completo`. / .rtc-esptrackeratajos { display: flex; gap: 8px; } / §E — "Marcar todo" / "Limpiar" con área táctil completa (≥44px). / .rtc-esptrackeratajos .rtc-btn--mini { min-height: var(--tap); } / ========================================================= SPEC 0023 — Sprite Tracker v3: héroe (anillo) · desglose · controles · destacados · "más raro" · datos · confirm. Todo color por tokens de [data-tema] (cero hex suelto). ========================================================= / / --- Héroe: anillo de progreso (donut conic-gradient + máscara radial) --- / / @property registra --pct como interpolable → el anillo TRANSICIONA al marcar (bajo prefers-reduced-motion se anula, ver más abajo). Sin soporte, el cambio es instantáneo (degradación con gracia). / @property --pct { syntax: ''; inherits: true; initial-value: 0; } / v0.51.0 — ANILLO → BARRA (`.rtc-espmedidor`). Por qué: el donut medía 128px (160 ≥720px) de ALTO y en móvil el fold se agotaba antes del primer sprite. La barra apila cifras + pista en ~50px. Coherente con la imagen descargable, que ya pasó a barra en v0.50.3. Se REUSAN `--pct` + `@property` (arriba), el token `--esp-anillo-track` como pista y los data-hooks del motor: CERO tokens de color nuevos y `espActualizarAnillo` (comunidad.js) no cambia una línea. Nombre `.rtc-espmedidor` y NO `.rtc-espbarra`: `.rtc-espbar` ya es la barra de acciones. / .rtc-esphero { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto 22px; width: 100%; max-width: 620px; } .rtc-espheromedidor { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } .rtc-espmedidor { --pct: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; transition: --pct 0.5s ease; } .rtc-espmedidorcifras { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .rtc-espmedidorpct { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; } .rtc-espmedidorfrac { font-size: 0.85rem; color: var(--gris-suave); font-variant-numeric: tabular-nums; } .rtc-espmedidorpista { display: block; height: 12px; border-radius: 999px; background: var(--esp-anillo-track); overflow: hidden; } / El relleno se deriva de --pct igual que lo hacía el conic-gradient del aro. El color sale del alias `--esp-medidor-fill`, que cada tema define con la cuenta hecha (oled 5.76:1 con --azul; claro 3.66:1 con --azul-claro; ambos ≥3:1 de objeto gráfico contra su pista — números recalculados en v0.51.3; v0.51.2 publicaba 3.75 en claro, que no se reproduce). NO hay `inset` de contorno: el que llevaba v0.51.1 medía 2.23:1 compuesto contra el propio relleno, es decir no dibujaba nada. / .rtc-espmedidorfill { display: block; height: 100%; width: calc(var(--pct) 1%); border-radius: 999px; background: var(--esp-medidor-fill); } /* Completa (N/N): relleno --ok + glow (reusa is-completo) + "¡Colección completa!". `--ok` NO se toca: mide 3.40:1 contra la pista en claro, ya pasa. / .rtc-espmedidor.is-completo .rtc-espmedidorfill { background: var(--ok); } .rtc-espmedidor.is-completo { filter: drop-shadow(0 0 10px rgba(var(--ok-rgb), 0.45)); } / "¡Colección completa!" — se usa --oro-texto (oro AA para TEXTO en ambos temas), NO --var-gold (que en claro es marco 3:1, no AA de texto). Honra "gold en claro solo como dot/gráfico, jamás texto". / .rtc-espmedidorcompleta { margin: 0; font: 700 1rem var(--font-head); letter-spacing: 0.02em; color: var(--oro-texto); text-align: center; } / ≥720px — el héroe pasa a DOS COLUMNAS (medidor izquierda · desglose derecha). Antes el donut iba centrado y dejaba ~230px muertos a cada lado; la barra ocupa el ancho útil y el desglose sube a la misma banda en vez de apilarse debajo. / @media (min-width: 720px) { .rtc-esphero { flex-direction: row; align-items: center; gap: 24px; max-width: 900px; } .rtc-espheromedidor { flex: 1 1 0; } .rtc-esphero .rtc-espdesglose { flex: 1 1 0; } .rtc-espmedidor__pct { font-size: 2.3rem; } } / --- Desglose por rareza y por variante (chips) --- / .rtc-espdesglose { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; } / v0.51.2 — el desglose salió del héroe y va SUELTO debajo de la matriz (ver `esp_anillo_html`): dentro del flex del héroe heredaba centrado y separación; aquí se los da él mismo. / .rtc-espdesglose--pie { margin: 26px auto 0; } / §D M4 — cada eje (rareza / variante) es un grupo con su etiqueta encima de sus chips. / .rtc-espdesglosegrupo { display: flex; flex-direction: column; gap: 5px; } .rtc-espdesgloseeje { font: 700 0.72rem/1.1 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); } .rtc-espdesglosefila { display: flex; flex-wrap: wrap; / móvil incluido: las chips ENVUELVEN a varias filas en vez de scroll-x horizontal, que cortaba Épica/Rara a la mitad y se leía como roto. / gap: 8px; padding-bottom: 2px; } .rtc-espchip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 5px 10px; border-radius: var(--radio-sm); background: var(--superficie-2); border: 1px solid var(--borde); font-size: 0.8rem; / --chip-c / --chip-rgb los fijan los modificadores de rareza/variante (dot + mini-barra). / --chip-c: var(--gris); --chip-rgb: 147, 166, 198; } .rtc-espchipdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--chip-c); } .rtc-espchiplbl { color: var(--gris-suave); } / La fracción SIEMPRE en --texto (blindaje AA), nunca el color del chip. / .rtc-espchipfrac { color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; } .rtc-espchipbarra { width: 34px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(var(--chip-rgb), 0.20); flex: 0 0 auto; } .rtc-espchipfill { display: block; height: 100%; background: var(--chip-c); } / Colores del chip por rareza / variante (solo dot + mini-barra, no el número). / .rtc-espchip--r-rare { --chip-c: var(--rareza-rare); --chip-rgb: var(--rareza-rare-rgb); } .rtc-espchip--r-epic { --chip-c: var(--rareza-epic); --chip-rgb: var(--rareza-epic-rgb); } .rtc-espchip--r-legendary { --chip-c: var(--rareza-legendary); --chip-rgb: var(--rareza-legendary-rgb); } .rtc-espchip--r-mythic { --chip-c: var(--rareza-mythic); --chip-rgb: var(--rareza-mythic-rgb); } .rtc-espchip--v-estandar { --chip-c: var(--var-estandar); --chip-rgb: var(--var-estandar-rgb); } .rtc-espchip--v-gold { --chip-c: var(--var-gold); --chip-rgb: var(--var-gold-rgb); } .rtc-espchip--v-gummy { --chip-c: var(--var-gummy); --chip-rgb: var(--var-gummy-rgb); } .rtc-espchip--v-galaxy { --chip-c: var(--var-galaxy); --chip-rgb: var(--var-galaxy-rgb); } .rtc-espchip--v-holofoil { --chip-c: var(--var-holofoil); --chip-rgb: var(--var-holofoil-rgb); } / --- Controles: búsqueda + orden --- / .rtc-espctrl { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 260px; } .rtc-espctrlcampo { display: flex; align-items: center; gap: 6px; } .rtc-espctrlcampo--buscar { flex: 1 1 200px; } .rtc-espctrlcampo--orden { flex: 0 0 auto; } .rtc-espctrllbl { color: var(--texto-suave); font-size: 0.85rem; font-weight: 600; } .rtc-espctrlinput, .rtc-espctrlselect { min-height: var(--tap); padding: 0 12px; border-radius: var(--radio-sm); background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); font: 600 0.9rem var(--font-body); } .rtc-espctrlinput { width: 100%; } .rtc-espctrlinput::placeholder { color: var(--gris); } .rtc-espctrlinput:focus-visible, .rtc-espctrlselect:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; } / §D M1/M2 — en pantallas muy angostas (<520px) la fila búsqueda + Orden + atajos hace WRAP a filas propias full-width, para que el control "Orden" + su