/* ================================================================
   FRAN96MC.ES — SISTEMA DE DISEÑO COMPARTIDO
   includes/asistente.css — estilos de la mascota oficial "Fran",
   el mago pixel que asiste al visitante. Requiere tokens.css
   cargado ANTES. El DOM lo inyecta includes/asistente.js.

   Reglas de la casa:
     · Solo var(--...) de tokens.css: aquí no vive ningún color
       (los tonos propios del sprite —piel, pelo, madera— viven en
       la paleta del SVG dentro de asistente.js, no en CSS).
     · Animaciones SOLO sobre transform / opacity (y border-color
       en micro-hovers). Nada de width/height/top/left animados.
     · Todo decorativo se apaga bajo prefers-reduced-motion
       (bloque final) y los bucles de JS comprueban document.hidden.
   ================================================================ */

/* ----------------------------------------------------------------
   1) CONTENEDOR FLOTANTE
   Esquina inferior DERECHA (el HUD de música/atardecer vive abajo
   a la izquierda). z-index de HUD: por debajo de gate y warp.
   El contenedor no captura punteros: solo sus hijos interactivos.
   ---------------------------------------------------------------- */
.fm-asistente{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:var(--z-hud);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-family:var(--f-cuerpo);
  pointer-events:none;
  animation:fmAsistenteEntra var(--dur-entrada) var(--ease-back) both;
}
.fm-asistente > *{pointer-events:auto}
@keyframes fmAsistenteEntra{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

/* ----------------------------------------------------------------
   2) AVATAR (botón con el sprite del mago)
   Abierto: sprite flotando con bob + sombra elíptica que respira
   a contratiempo. Área táctil >= 44px garantizada por el tamaño.
   ---------------------------------------------------------------- */
.fm-avatar{
  position:relative;
  width:108px;height:108px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.fm-avatar:focus-visible{
  outline:3px solid var(--acento-pagina,var(--oro));
  outline-offset:3px;
}

/* Sprite SVG pixel de reserva: rejilla nítida, sin suavizado */
.fm-sprite{
  display:block;
  width:100%;height:100%;
  shape-rendering:crispEdges;
  animation:fmBob 3.4s ease-in-out infinite;
}
@keyframes fmBob{50%{transform:translateY(-4px)}}


/* Sombra en el suelo: escala inversa al bob (solo transform/opacity) */
.fm-avatar::after{
  content:"";
  position:absolute;left:24%;right:24%;bottom:0;height:9px;
  background:radial-gradient(closest-side,rgba(0,0,10,.55),transparent 72%);
  pointer-events:none;
  animation:fmSombra 3.4s ease-in-out infinite;
}
@keyframes fmSombra{50%{transform:scaleX(.82);opacity:.65}}

/* ----------------------------------------------------------------
   3) VIDA DEL SPRITE: parpadeo, estrella y varita
   El parpadeo lo dispara JS (clase .fm-parpadea, cadencia 4-7s
   aleatoria): los ojos se apagan y los párpados se encienden,
   ambos solo con opacity.
   ---------------------------------------------------------------- */
/* Parpadeo instantáneo, como un cambio de frame de sprite: sin
   transición a propósito (el fundido delataba que no es pixel-art). */
.fm-parpado{opacity:0}
.fm-parpadea .fm-parpado{opacity:1}

/* La estrella de la varita titila sola (decorativo, CSS puro) */
.fm-estrella{animation:fmEstrella 2.1s ease-in-out infinite}
@keyframes fmEstrella{50%{opacity:.45}}

/* Chispitas fijas alrededor de la estrella: titilan desfasadas */
.fm-chispita{animation:fmEstrella 1.7s ease-in-out infinite}
.fm-chispita:nth-of-type(2n){animation-delay:-.6s}
.fm-chispita:nth-of-type(3n){animation-delay:-1.1s}

/* Agitar la varita: JS añade .fm-agita al sprite ~600ms.
   transform-box:fill-box para que el origen sea la mano del mago
   (esquina inferior derecha del grupo palo+estrella). */
.fm-varita{transform-box:fill-box;transform-origin:95% 98%}
.fm-agita .fm-varita{animation:fmAgita .55s var(--ease-out)}
@keyframes fmAgita{
  0%{transform:rotate(0)}
  25%{transform:rotate(-16deg)}
  55%{transform:rotate(11deg)}
  80%{transform:rotate(-6deg)}
  100%{transform:rotate(0)}
}

/* Chispitas pixel que suelta la varita (elementos <i> efímeros que
   crea JS con tope estricto; forma de destello en cruz). */
.fm-chispa{
  position:absolute;
  width:7px;height:7px;
  background:var(--oro-vivo);
  clip-path:polygon(33% 0,66% 0,66% 33%,100% 33%,100% 66%,66% 66%,
                    66% 100%,33% 100%,33% 66%,0 66%,0 33%,33% 33%);
  pointer-events:none;
  opacity:0;
  animation:fmChispa .85s ease-out forwards;
}
.fm-chispa--cian{background:var(--cian)}
@keyframes fmChispa{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(var(--fm-cx,0px),-22px) scale(1.05)}
}

/* ----------------------------------------------------------------
   4) BOCADILLO DE DIÁLOGO
   Globo = envoltorio (anima y lleva la flechita escalonada, que no
   puede vivir DENTRO del panel porque el clip-path la recortaría).
   ---------------------------------------------------------------- */
.fm-globo{
  display:flex;flex-direction:column;align-items:flex-end;
  opacity:0;
  transform:translateY(10px) scale(.95);
  transform-origin:bottom right;
  transition:
    opacity var(--dur-micro) ease,
    transform var(--dur-entrada) var(--ease-back);
}
.fm-globo--visible{opacity:1;transform:none}
.fm-globo[hidden]{display:none}

.fm-bocadillo{
  position:relative;
  max-width:min(300px,78vw);
  padding:.85rem 2.9rem .9rem 1rem;
  background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border:3px solid var(--panel-borde-luz);
  clip-path:var(--recorte-px);
  color:var(--tinta);
  box-shadow:0 10px 24px rgba(0,0,10,.5);
}

/* Flechita escalonada apuntando al mago (escalera pixel hacia abajo) */
.fm-flecha{
  display:block;
  width:24px;height:13px;
  margin:-2px 34px 0 auto;
  background:var(--panel-borde-luz);
  clip-path:polygon(0 0,100% 0,100% 100%,66% 100%,66% 66%,33% 66%,33% 33%,0 33%);
}

/* Nombre del personaje, en tipografía pixel y oro */
.fm-nombre{
  display:block;
  font-family:var(--f-pixel);
  font-size:.55rem;
  letter-spacing:1px;
  color:var(--oro);
  text-shadow:2px 2px 0 rgba(0,0,10,.6);
  margin-bottom:.45rem;
}

/* Texto del mensaje: cuerpo legible + cursor de máquina de escribir
   mientras JS teclea (clase .fm-tecleando). */
.fm-texto{
  margin:0;
  font-size:.86rem;
  line-height:1.5;
  color:var(--tinta-suave);
  min-height:1.5em;
  overflow-wrap:break-word;
}
.fm-tecleando .fm-texto-visible::after{
  content:"▌";
  margin-left:1px;
  color:var(--oro);
  animation:fmCursor .8s steps(2,start) infinite;
}
@keyframes fmCursor{50%{opacity:0}}

/* Texto completo solo para lectores de pantalla (el animado va
   aria-hidden para no anunciar letra a letra). */
.fm-solo-lector{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Botón X pixel: área táctil 44px, glifo pequeño centrado */
.fm-cerrar{
  position:absolute;top:0;right:0;
  width:44px;height:44px;
  display:grid;place-items:center;
  padding:0;border:none;background:transparent;
  font-family:var(--f-pixel);font-size:.65rem;line-height:1;
  color:var(--tinta-tenue);
  cursor:pointer;
  touch-action:manipulation;
  transition:color var(--dur-micro) ease,transform var(--dur-micro) var(--ease-out);
}
.fm-cerrar:hover{color:var(--error);transform:scale(1.2)}
.fm-cerrar:active{transform:scale(.95)}
.fm-cerrar:focus-visible{
  outline:3px solid var(--acento-pagina,var(--oro));
  outline-offset:-9px; /* anillo interior: el clip del panel recorta fuera */
}

/* ----------------------------------------------------------------
   5) ESTADO CERRADO
   Solo queda el avatar, convertido en botón circular con borde
   pixel grueso y zoom sobre la cara del mago. Se recuerda en
   localStorage('fm-asistente').
   ---------------------------------------------------------------- */
.fm-asistente--cerrado .fm-globo{display:none}
.fm-asistente--cerrado .fm-avatar{
  width:60px;height:60px;
  overflow:hidden;
  background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border:4px solid var(--panel-borde-luz);
  border-radius:50%;
  transition:
    transform var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) ease,
    box-shadow var(--dur-micro) ease;
}
.fm-asistente--cerrado .fm-avatar:hover{
  border-color:var(--oro);
  transform:translateY(-3px);
  box-shadow:0 0 14px color-mix(in srgb,var(--oro) 40%,transparent);
}
/* Zoom sobre la cabeza (la cara del sprite 65x85 queda centrada en
   torno al 52% / 18% del lienzo): es un estado, no una transición.
   Valores afinados visualmente en navegador. */
.fm-asistente--cerrado .fm-sprite{
  animation:none; /* sin bob dentro del medallón */
  transform:translate(-3%,52%) scale(2.1);
}
.fm-asistente--cerrado .fm-avatar::after{display:none} /* sin sombra */

/* ----------------------------------------------------------------
   5-bis) LA ESQUINA ES DE FRAN
   Varias secciones traen su propio botón flotante "volver arriba"
   (#toTop) justo en esta esquina y con z-index mayor, así que se
   dibujaba encima del mago. Decisión de diseño: en las páginas
   donde vive Fran, el botón se retira — el asistente manda en esa
   esquina. Se usa el id para ganar a la regla propia de cada
   página sin necesidad de !important. (Esta hoja solo se carga
   donde está el asistente, así que el botón sigue existiendo en
   las páginas que no lo tienen.)
   ---------------------------------------------------------------- */
#toTop{display:none}

/* ----------------------------------------------------------------
   6) MÓVIL (<= 640px)
   Avatar más pequeño y bocadillo que nunca tapa el contenido.
   ---------------------------------------------------------------- */
@media (max-width:640px){
  .fm-asistente{right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .fm-avatar{width:72px;height:72px}
  .fm-bocadillo{max-width:70vw;padding-right:2.7rem}
  .fm-texto{font-size:.8rem}
  .fm-flecha{margin-right:22px}
  .fm-asistente--cerrado .fm-avatar{width:52px;height:52px}
}

/* ----------------------------------------------------------------
   7) MOVIMIENTO REDUCIDO
   Sin bob, sin sombra animada, sin titileo, sin agitar, sin chispas
   y sin cursor: todo estático pero 100% funcional. JS tampoco lanza
   parpadeo, chispas ni máquina de escribir en este modo.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fm-asistente,
  .fm-sprite,
  .fm-avatar::after,
  .fm-estrella,
  .fm-chispita,
  .fm-agita .fm-varita,
  .fm-chispa,
  .fm-tecleando .fm-texto-visible::after{animation:none}
  .fm-globo,
  .fm-cerrar{transition:none}
  .fm-globo{opacity:1;transform:none}
  .fm-cerrar:hover{transform:none}
  .fm-asistente--cerrado .fm-avatar:hover{transform:none}
}