/* CAMBIO DE CONTRATO #10 — sol/luna en el toggle de tema. * * El ícono indica el DESTINO, no el estado: luna cuando estás en claro, sol cuando estás en * oscuro. Antes hacía lo contrario —mostraba una luna estando ya en oscuro—, que es la lectura * al revés de la convención. * * El estado se lee de , que aplicarTema() escribe en la raíz. Es la misma * razón por la que el menú mobile guarda su estado ahí: el runtime re-renderiza el nav y una * marca puesta sobre uno de sus nodos se perdería sin aviso. * * Los dos SVG están siempre en el DOM y acá se decide cuál se ve. Sin eso no habría crossfade: * una transición necesita un estado anterior del que partir, y un nodo recién creado no lo * tiene. * * Ni la caja de 13px ni el botón de 32px se tocan: el target táctil es el de hoy. */ .upran-tema-cajita { position: relative; display: block; width: 13px; height: 13px; /* El token exacto que usaba el ícono viejo. Se fija una sola vez acá y los dos SVG lo toman * por currentColor, así que el doble tema sigue saliendo por tokens y no por colores sueltos. */ color: var(--text-primary); } .upran-tema-icono { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* Reparto de curvas por propiedad, como hace el export: `ease` a lo que sólo cambia de * intensidad, la curva firma a lo espacial. La misma regla que se documentó en la tanda de * motion, aplicada acá sin excepción. * * SIN !important, y es deliberado: la regla global de reduced-motion es * `* { transition-duration: 0.01ms !important }`, y entre dos !important gana la * especificidad. Con !important acá, .upran-tema-icono (0,1,0) le ganaría a `*` (0,0,0) y * esto seguiría animando con reduced-motion activo — el bug exacto que tuvo el panel del * menú y que cazó motion-tanda3.mjs. */ transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); } /* Estado oculto: además del fade, un cuarto de giro corto y una pizca de escala. La rotación * es lo que hace que se lea como "el mismo objeto cambió" y no como "dos íconos parpadearon". * Cada uno gira hacia su lado, así que el gesto tiene dirección. */ .upran-tema-luna { opacity: 1; transform: rotate(0deg) scale(1); } .upran-tema-sol { opacity: 0; transform: rotate(-60deg) scale(0.6); } [data-theme="dark"] .upran-tema-luna { opacity: 0; transform: rotate(60deg) scale(0.6); } [data-theme="dark"] .upran-tema-sol { opacity: 1; transform: rotate(0deg) scale(1); }