/* avatar-estados.css — versiones de estado de ánimo del avatar Birretón.
   El dibujo lo genera vistas/js/avatarEstados.js; aquí van los colores y las
   animaciones de cada ánimo. Los colores repiten la paleta de la landing para
   que sea el mismo personaje. */

.avatar-estado {
  --ab-navy-darkest: #082257;
  --ab-navy-dark:    #0d2d5e;
  --ab-navy:         #123a72;
  --ab-navy-light:   #1e4b91;
  --ab-gold:         #e6ab1e;
  --ab-gold-light:   #f4c443;
  --ab-gold-dark:    #b98a10;
  --ab-pupil:        #0b285a;
  --ab-white:        #ffffff;

  width: 100%;
  max-width: 190px;
  height: auto;
  margin: 0 auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 8px 14px rgba(11, 40, 90, 0.22));
}

/* En modo oscuro el área donde vive el avatar recibe un fondo gris claro:
   el traje sigue siendo azul marino y, sin este respaldo, se funde con el
   negro/azul muy oscuro del subtema (punto 11). Contra un fondo claro el azul
   marino normal ya tiene contraste de sobra, así que no hace falta aclarar
   también los tonos del traje (punto 11, revisión). */
body.dark-mode .avatar-estado {
  background: #cbd5e1;
  border-radius: 1.25rem;
  padding: 0.6rem;
  box-sizing: border-box;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

/* ============ PIEZAS ============ */
.ab-cap-top-left    { fill: var(--ab-navy); }
.ab-cap-top-right   { fill: var(--ab-navy-darkest); }
.ab-cap-front-left  { fill: var(--ab-navy-light); }
.ab-cap-front-right { fill: var(--ab-navy-dark); }
.ab-cap-outline {
  fill: none; stroke: var(--ab-white); stroke-width: 8;
  stroke-linejoin: round; stroke-linecap: round;
}

.ab-tassel-cord    { stroke: var(--ab-gold); stroke-width: 7; stroke-linecap: round; }
.ab-tassel-knot    { fill: var(--ab-gold-dark); }
.ab-tassel-shine   { fill: var(--ab-gold-light); }
.ab-tassel-strands {
  fill: var(--ab-gold); stroke: var(--ab-gold); stroke-width: 6;
  stroke-linejoin: round; stroke-linecap: round;
}

.ab-bridge, .ab-temple { fill: none; stroke: var(--ab-gold); stroke-width: 13; stroke-linecap: round; }
.ab-lens      { fill: none; stroke: var(--ab-gold); stroke-width: 14; }
.ab-eye-white { fill: var(--ab-white); }
.ab-pupil     { fill: var(--ab-pupil); }
.ab-shine     { fill: var(--ab-white); }
.ab-shine-sm  { fill: var(--ab-white); opacity: 0.85; }
.ab-lid       { fill: var(--ab-navy-darkest); }

.ab-boca {
  fill: none; stroke: var(--ab-navy-darkest); stroke-width: 16;
  stroke-linecap: round; stroke-linejoin: round;
}
.ab-boca-abierta { fill: var(--ab-navy-darkest); stroke: none; }
.ab-lengua       { fill: #ef6a7a; }

.ab-lagrima { fill: #4aa8ff; opacity: 0.9; }
.ab-nota    { fill: var(--ab-navy-dark); }
.ab-punto   { fill: var(--ab-navy-light); }

/* ============ ANIMACIONES POR ÁNIMO ============
   Los adornos animados (confeti, notas) van dentro de otro grupo que ya
   lleva su posición como atributo: si se animara el mismo elemento, la
   animación CSS pisaría esa posición y la pieza saltaría al centro. */

/* Sin transform-box: fill-box, el navegador gira las piezas alrededor del
   centro de todo el SVG en vez del centro de la pieza. */
.ab-cuerpo,
.ab-confeti,
.ab-nota,
.ab-lagrima { transform-box: fill-box; transform-origin: center; }

/* Feliz: flota tranquilo */
.ab-feliz .ab-cuerpo { animation: ab-flotar 3.2s ease-in-out infinite; }
@keyframes ab-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Celebrando: brinca */
.ab-celebrando .ab-cuerpo { animation: ab-brincar 0.9s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
@keyframes ab-brincar {
  0%, 100% { transform: translateY(0)     scale(1, 1); }
  20%      { transform: translateY(0)     scale(1.04, 0.94); }
  55%      { transform: translateY(-46px) scale(0.97, 1.05); }
  85%      { transform: translateY(0)     scale(1.03, 0.96); }
}
/* Triste: se hunde despacio y la lágrima resbala */
.ab-triste .ab-cuerpo { animation: ab-hundirse 4s ease-in-out infinite; }
@keyframes ab-hundirse {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(12px) rotate(-2.5deg); }
}
.ab-triste .ab-lagrima { animation: ab-llorar 2.6s ease-in infinite; }
@keyframes ab-llorar {
  0%       { transform: translateY(0)     scale(0.4); opacity: 0; }
  18%      { transform: translateY(10px)  scale(1);   opacity: 0.95; }
  75%      { transform: translateY(150px) scale(1);   opacity: 0.9; }
  100%     { transform: translateY(180px) scale(0.6); opacity: 0; }
}

/* Pensativo: ladea la cabeza y los puntos suspensivos van apareciendo */
.ab-pensativo .ab-cuerpo {
  transform-origin: center bottom;
  animation: ab-ladear 4.5s ease-in-out infinite;
}
@keyframes ab-ladear {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
/* El retardo de cada punto viene en línea, desde avatarEstados.js */
.ab-pensativo .ab-punto { animation: ab-pensar 1.8s ease-in-out infinite; }
@keyframes ab-pensar {
  0%, 70%, 100% { opacity: 0.15; }
  35%           { opacity: 1; }
}

/* Bailando: se contonea y salen notas musicales */
.ab-bailando .ab-cuerpo {
  transform-origin: center bottom;
  animation: ab-bailar 0.7s ease-in-out infinite alternate;
}
@keyframes ab-bailar {
  from { transform: translateX(-16px) rotate(-6deg); }
  to   { transform: translateX(16px)  rotate(6deg); }
}
.ab-bailando .ab-nota { animation: ab-notas 2.4s linear infinite; }
@keyframes ab-notas {
  0%   { transform: translate(0, 0)       rotate(0deg);   opacity: 0; }
  15%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { transform: translate(30px, -120px) rotate(22deg); opacity: 0; }
}

/* Confeti de la celebración: cada tira cae con su propio retardo (en línea) */
.ab-celebrando .ab-confeti { animation: ab-caer 1.6s linear infinite; }
@keyframes ab-caer {
  0%   { transform: translateY(-60px)  rotate(0deg);   opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(320px) rotate(220deg); opacity: 0; }
}

/* ============ AVATAR DENTRO DE UN SWEETALERT ============
   Se le deja aire arriba y abajo para que el confeti no quede pegado al
   título ni al texto del resultado. */
.avatar-resultado {
  margin: -0.5rem auto 0.75rem;
  max-width: 160px;
}
.avatar-resultado .avatar-estado { max-width: 160px; }

/* Quien pide menos movimiento en su sistema, no lo recibe */
@media (prefers-reduced-motion: reduce) {
  .avatar-estado * { animation: none !important; }
}