/* El avatar: una constelación de lo que se sabe.
   ───────────────────────────────────────────────────────────────────────────
   La regla de color, y es la que sostiene todo lo demás: **el color se GANA**.
   La silueta base es grafito. Cada área con suficientes habilidades dominadas
   le da su color, y con las dos el cuerpo lleva las dos. Si la silueta naciera
   ya coloreada, el color dejaría de significar nada — sería decoración, y esta
   pantalla existe justamente para que no la haya. */
.avat{width:100%;height:auto;display:block;overflow:visible}

.avat-cuerpo{stroke-linejoin:round}
.avat-c-base{fill:var(--tinta-3)}
.avat-c-matematica{fill:var(--azul)}
.avat-c-ingles{fill:var(--verde-txt)}
/* Las dos áreas: la figura se parte en dos por un degradado duro, no por una
   mezcla. Mezclarlos daría un tercer color que no representa nada — y aquí cada
   color tiene que poder nombrarse. */
.avat-c-ingles-matematica{fill:url(#avat-dos)}

.avat-anillo{fill:var(--oro)}
.avat-insig path{fill:var(--oro);stroke:var(--papel);stroke-width:.8}
.avat-mas{fill:var(--tinta-3);font-size:8px;font-weight:800}

/* Los anillos ORBITAN, lentísimo. 28 s la vuelta es una presencia, no un
   reclamo: a 3 s marearía y competiría con el ejercicio, que es donde tiene que
   estar la atención. Gira el grupo entero, así que es una sola transformación
   compuesta en GPU y no doce. */
@keyframes avat-orbita{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.avat-orb{transform-origin:42px 52px;animation:avat-orbita 28s linear infinite}

/* Una pieza NUEVA entra con su propia animación, UNA vez. El momento en que se
   gana algo es el único que merece que se gaste movimiento; repetirlo en cada
   carga lo convertiría en ruido y el logro dejaría de sentirse logro. */
@keyframes avat-llega{
  0%{transform:scale(0);opacity:0}
  55%{transform:scale(1.5);opacity:1}
  100%{transform:scale(1);opacity:1}}
.avat-nuevo{transform-box:fill-box;transform-origin:center;
  animation:avat-llega .62s cubic-bezier(.22,1,.36,1) both}

/* El estado vacío no es un error: es lo que ven los 60 el primer día. La figura
   se atenúa un punto —no se rompe ni se pone gris muerto— y eso es todo. Una
   silueta punteada esperando a rellenarse diría «te falta», y lo que hay que
   decir es «todavía no», que no es lo mismo. */
.avat-vacio .avat-cuerpo{opacity:.55}

.avatar-caja{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);
  padding:1rem 1.25rem;box-shadow:var(--sombra)}
.avatar-fig{flex:0 0 auto;width:6.5rem}
.avatar-txt{flex:1 1 14rem;min-width:0}
.avatar-txt h3{margin:0 0 .2rem;font-size:1rem}
.avatar-txt .que{margin:0;font-size:.9375rem;color:var(--tinta);font-weight:600}
.avatar-txt .falta{margin:.3rem 0 0;font-size:.8125rem;color:var(--tinta-2)}
.avatar-txt .regla{margin:.45rem 0 0;font-size:.75rem;color:var(--tinta-3)}

@media (prefers-reduced-motion:reduce){
  .avat-orb{animation:none}
  .avat-nuevo{animation:none}
}