/* ═══════════════════════════════════════════════════════════ 🥚 LIMPIAAI v23 — ICONOS RENDER PIXAR QUÉ HACE ──────── Sustituye los emojis del sistema de las tarjetas de cifras y de tecnología por renders 3D estilo Pixar (arcilla mate, luz de estudio, paleta morado/oro de la app). POR QUÉ HOJAS DE SPRITES Y NO 10 ARCHIVOS ───────────────────────────────────────── Los emojis del sistema los dibuja el sistema operativo, así que la app se veía distinta en cada teléfono (Apple, Google y Samsung tienen diseños propios). Un render propio garantiza la misma imagen en todos. Pero el coste importa: `egg-sacred.png`, UN solo render, pesa 960 KB. Diez archivos sueltos habrían sido diez peticiones y varios megas. Se usan por eso DOS hojas (una de 2×2 y otra de 3×2): dos descargas, dos entradas de caché, y el navegador recorta cada icono con `background-position`. POR QUÉ LAS HOJAS SON PEQUEÑAS (320 px y 477 px de ancho) ───────────────────────────────────────────────────────── Al recortar el fondo, los PNG pasaron a tener canal alfa y su peso subió de 261+297 KB a 916+902 KB: 1,8 MB para diez iconos que se ven a 42 px. Se redujeron a 115+126 KB (−87 %) escalando cada hoja a ~160 px por celda. CUIDADO AL MEDIR SI SOBRAN PÍXELES ────────────────────────────────── El tamaño que hay que cubrir NO son los 42 px de CSS, sino 42 × densidad de pantalla. Un móvil moderno tiene densidad 3, así que necesita ~126 px reales por celda. Medido así, estas hojas están a 1,26× de lo necesario: prácticamente ajustadas. (Comparar píxeles nativos contra píxeles CSS da un falso «3,8× de desperdicio» e invita a reducirlas hasta que se vean borrosas.) POR QUÉ SE CONSERVA EL EMOJI DEBAJO ─────────────────────────────────── El emoji sigue en el HTML y sólo se oculta visualmente. Si la imagen no carga (red caída, caché fría, bloqueador), `@supports` y la capa de reserva devuelven el emoji: la app nunca queda con huecos vacíos. Es el mismo criterio que ya usaba `pixar.js` con `img.onerror`. ═══════════════════════════════════════════════════════════ */ /* ─── 1. BASE COMÚN ───────────────────────────────────────── Se mantiene el medallón dorado que ya definía `imperial.css` (anillo de oro + gema morada): el render se coloca DENTRO de ese medallón, no lo sustituye. Así los iconos nuevos siguen perteneciendo al mismo lenguaje visual que el resto. */ .px-ico { /* El emoji original queda oculto pero presente para lectores de pantalla y como reserva. `font-size: 0` no lo elimina del árbol de accesibilidad. */ font-size: 0 !important; color: transparent; background-repeat: no-repeat; /* `contain` evita que el render se deforme si la tarjeta cambia de proporción en pantallas estrechas. */ background-origin: content-box; image-rendering: auto; } /* ─── 2. HOJA DE CIFRAS (2×2) ─────────────────────────────── Cuatro celdas. Con `background-size: 200% 200%` la hoja mide el doble del hueco en cada eje, así que cada esquina encaja una celda exacta: 0% / 100% en cada eje. */ .stats-row .stat-card .stat-emoji { background-image: url('../images/icons-stats.png'); background-size: 200% 200%; } .stats-row .stat-card:nth-child(1) .stat-emoji { background-position: 0% 0%; } /* cámara */ .stats-row .stat-card:nth-child(2) .stat-emoji { background-position: 100% 0%; } /* cerebro */ .stats-row .stat-card:nth-child(3) .stat-emoji { background-position: 0% 100%; } /* esfera */ .stats-row .stat-card:nth-child(4) .stat-emoji { background-position: 100% 100%; } /* globo */ /* ─── 3. HOJA DE TECNOLOGÍA (3×2) ─────────────────────────── Seis celdas, 3 columnas × 2 filas. En el eje X las tres columnas caen en 0%, 50% y 100%; en el eje Y las dos filas en 0% y 100%. (Con `background-position` en porcentaje, el 50% NO es el centro de la hoja sino el punto medio del recorrido, que es justo lo que se necesita para la columna central.) */ .tech-grid .tech-card .tech-icon { background-image: url('../images/icons-tech.png'); background-size: 300% 200%; } .tech-grid .tech-card:nth-child(1) .tech-icon { background-position: 0% 0%; } /* paleta */ .tech-grid .tech-card:nth-child(2) .tech-icon { background-position: 50% 0%; } /* microscopio */ .tech-grid .tech-card:nth-child(3) .tech-icon { background-position: 100% 0%; } /* lápiz */ .tech-grid .tech-card:nth-child(4) .tech-icon { background-position: 0% 100%; } /* escuadra */ .tech-grid .tech-card:nth-child(5) .tech-icon { background-position: 50% 100%; } /* diana */ .tech-grid .tech-card:nth-child(6) .tech-icon { background-position: 100% 100%; } /* cadena */ /* ─── 4. AJUSTE DENTRO DEL MEDALLÓN ───────────────────────── `imperial.css` da al medallón 52×52 px. El render se deja algo más pequeño que el círculo para que el anillo dorado siga leyéndose como marco y el icono no toque el borde. */ .stats-row .stat-emoji, .tech-grid .tech-icon { background-size: 200% 200%; padding: 5px; box-sizing: border-box; } /* Se reafirma el tamaño por hoja: la regla anterior unifica el relleno, pero cada hoja tiene su propia cuadrícula. */ .stats-row .stat-card .stat-emoji { background-size: 200% 200%; } .tech-grid .tech-card .tech-icon { background-size: 300% 200%; } /* ─── 5. MOVIMIENTO SUAVE ─────────────────────────────────── Los renders tienen volumen, así que un giro brusco los delata como imagen plana. Se sustituye la rotación que aplicaba `imperial.css` al pasar el ratón por una elevación suave, que sugiere objeto físico. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .stat-card:hover .stat-emoji, .tech-card:hover .tech-icon { transform: translateY(-2px) scale(1.08) rotate(0deg); } } /* ─── 6. SEGUNDO LOTE · HOJA DE RITUAL (3×2) ──────────────── Seis renders para los widgets que en v24 se mudaron a la pantalla «Ritual». Se aplican SÓLO a iconos que no cambian nunca: · zen-banner → figura meditando (fila 1, col 2 de la hoja) · oracle-front → carta de tarot (fila 1, col 3) · spread-cta → carta de tarot (fila 1, col 3) Contenido real de la hoja, verificado celda a celda: fila 1: luna creciente · figura meditando · cartas de tarot fila 2: árbol · nota musical · nube de lluvia POR QUÉ NO SE APLICAN A TODOS LOS WIDGETS DE ESTA PANTALLA ───────────────────────────────────────────────────────── Varios iconos de Ritual son VARIABLES, no decorativos: · La luna cambia con la fase real (8 iconos distintos: 🌑🌒🌓🌔🌕🌖🌗🌘). Un sprite fijo de luna creciente sería incorrecto 7 días de cada 8, y además contradiría el texto que aparece al lado. · El reverso del oráculo depende de la carta del día. · El clima cambia con la previsión (☀️⛅🌧️…). · Las misiones alternan entre su icono y ✅ al completarse. En todos esos casos el emoji del sistema es la opción CORRECTA, porque comunica un dato que varía. Sustituirlos por una imagen fija sería un retroceso funcional disfrazado de mejora visual. */ .px-ico-zen, .px-ico-card { background-image: url('../images/icons-ritual.png'); background-size: 300% 200%; background-repeat: no-repeat; /* Estos iconos no viven dentro del medallón dorado de `imperial.css`, así que se les da tamaño propio y se centra el recorte. `display: inline-block` porque el icono de la tirada es un `` (en línea) y a un elemento en línea no le afectarían `width` ni `height`. Los otros dos ya son `div`, pero unificar no molesta. */ display: inline-block; width: 44px; height: 44px; flex: 0 0 44px; vertical-align: middle; } /* Cuadrícula 3×2: en el eje X las columnas caen en 0% / 50% / 100%; en el eje Y las dos filas en 0% (arriba) y 100% (abajo). */ .px-ico-card { background-position: 100% 0%; } /* fila 1, col 3 → cartas */ .px-ico-zen { background-position: 50% 0%; } /* fila 1, col 2 → meditando */ /* El botón de la tirada mostraba tres emojis 🎴🎴🎴 en una sola línea. Con el render basta uno: tres copias del mismo dibujo 3D se leerían como un error de repetición, no como «tres cartas». */ .spread-cta .spread-cta-icon.px-ico { margin-right: 10px; } /* ─── 7. RESERVA SI NO HAY IMÁGENES ───────────────────────── Si el navegador no soporta `background-size` en porcentaje sobre varias celdas, o el usuario navega sin imágenes, se devuelve el emoji para no dejar medallones vacíos. */ @supports not (background-size: 200% 200%) { .stats-row .stat-emoji, .tech-grid .tech-icon, .px-ico-zen, .px-ico-card { font-size: 1.5rem !important; color: inherit; background-image: none; } }