/* GENERACYE — microinteracciones.css · EL DETALLE QUE SE NOTA SIN VERSE
   ═══════════════════════════════════════════════════════════════════════════

   POR QUÉ EXISTE (20-sep-2026)

   Fichero aparte a propósito: todo lo de aquí es añadido, nada pisa el diseño
   que ya hay. Si algún día molesta, se quita la línea del index y la web queda
   exactamente como estaba.

   TRES REGLAS QUE NO SE SALTAN

   1. NADA ARRANCA INVISIBLE. El estado quieto del elemento es el visible; la
      animación solo lo acompaña. Si el navegador no anima —o el usuario pide
      menos movimiento— se ve igual, no se ve en blanco. Misma pauta que
      styles.css con el Panel y los KPI.
   2. SOLO BRILLA LO QUE SE PUEDE TOCAR. El resplandor al pasar por encima
      enseña dónde se puede pulsar; repartido por todas las tarjetas sería
      ruido y, peor, enseñaría a pulsar donde no pasa nada.
   3. LOS NÚMEROS NO SE ANIMAN. Un contador que sube del 0 al precio enseña
      cifras que nunca fueron el precio, y este producto vende justo lo
      contrario. Lo que sí se marca es el CAMBIO: un destello verde o rojo de
      medio segundo cuando el dato cambia de verdad. Es lo que hacen las
      terminales, y dice algo; el contador solo entretiene. */

/* ── 1 · ESQUELETOS DE CARGA ──────────────────────────────────────────────
   Un bloque gris con la forma de lo que va a venir se lee como «esto está
   llegando». Un «Cargando…» centrado se lee como «esto está parado». */
.gen-skel {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--bg-2) 0%,
    color-mix(in oklab, var(--bg-3) 70%, var(--bg-2)) 50%,
    var(--bg-2) 100%);
  background-size: 220% 100%;
  background-position: 120% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .gen-skel { animation: gen-skel-brillo 1.5s ease-in-out infinite; }
}
@keyframes gen-skel-brillo {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
.gen-skel + .gen-skel { margin-top: 8px; }

/* ── 2 · PROFUNDIDAD Y RESPLANDOR, SOLO EN LO QUE LLEVA A ALGÚN SITIO ─────
   La tarjeta sube 2 px y se le enciende el borde. Ni sombras grandes ni
   escalados: en una pantalla con veinte tarjetas, dos píxeles ya se notan. */
.gen-tocable {
  transition: transform .18s cubic-bezier(.2, .8, .2, 1),
              border-color .18s ease,
              box-shadow .18s ease;
  /* 16-oct-2026: sin `will-change`. Hacía de cada tarjeta una capa gráfica
     permanente (memoria de sobra en un iPhone) para un movimiento de 2 px que
     el navegador anima igual sin la pista. */
}
.gen-tocable:hover,
.gen-tocable:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow:
    0 10px 28px -16px rgba(0, 0, 0, .75),
    0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .gen-tocable { transition: border-color .18s ease; }
  .gen-tocable:hover, .gen-tocable:focus-within { transform: none; }
}
/* En táctil no hay ratón: el hover se queda «pegado» tras pulsar. */
@media (hover: none) {
  .gen-tocable:hover { transform: none; box-shadow: none; }
}

/* ── 3 · EL DESTELLO DEL DATO QUE CAMBIA ──────────────────────────────────
   Medio segundo, un fondo tenue y se va. Lo pone demo.js cuando el precio que
   llega es distinto del que había pintado. */
.gen-destello-sube,
.gen-destello-baja {
  border-radius: 5px;
  padding: 0 4px;
  margin: 0 -4px;
}
@media (prefers-reduced-motion: no-preference) {
  .gen-destello-sube { animation: gen-destello-verde .65s ease-out; }
  .gen-destello-baja { animation: gen-destello-rojo .65s ease-out; }
}
@keyframes gen-destello-verde {
  from { background: color-mix(in oklab, var(--up) 30%, transparent); }
  to   { background: transparent; }
}
@keyframes gen-destello-rojo {
  from { background: color-mix(in oklab, var(--down) 30%, transparent); }
  to   { background: transparent; }
}

/* ── 4 · LA PANTALLA ENTRA, NO APARECE DE GOLPE ───────────────────────────
   220 ms y 5 px. Sin `both` ni `forwards` a propósito: el estado quieto ya es
   el bueno, así que si la animación no llega a correr no se queda nada a
   medias. */
@media (prefers-reduced-motion: no-preference) {
  .screen { animation: gen-pantalla-entra .22s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes gen-pantalla-entra {
  from { opacity: .35; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}