/* Avatar flotante + tour guiado. Va con web/avatar-tour.js.
   Usa las variables de color de styles.css, así que si algún día cambia la
   paleta de la web, esto cambia con ella. */

/* ── el patinete de la esquina ── */
.tour-avatar{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:56px;height:56px;border-radius:50%;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--papel-2,#12171f);
  border:1px solid var(--linea-fuerte,#33404f);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tour-avatar:hover{
  transform:translateY(-3px) scale(1.05);
  border-color:var(--marca,#f5a524);
  box-shadow:0 14px 36px rgba(245,165,36,.3);
}
.tour-emoji{font-size:27px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

/* El texto del boton. Vive SIEMPRE en el HTML (para quien navega con lector de
   pantalla), pero solo se ve al pasar el raton o cuando el boton se presenta
   solo. El "title" no valia: en un movil no hay raton que lo enseñe. */
.tour-etiqueta{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  font-size:.85rem;font-weight:600;color:var(--t-900,#f2f6fa);
  transition:max-width .3s ease, opacity .25s ease, margin .3s ease;
}
.tour-avatar:hover .tour-etiqueta,
.tour-avatar:focus-visible .tour-etiqueta,
.tour-avatar.con-texto .tour-etiqueta{
  max-width:190px;opacity:1;margin-left:.55rem;margin-right:.15rem;
}
/* Con texto deja de ser un circulo: se estira en pastilla. */
.tour-avatar:hover,
.tour-avatar:focus-visible,
.tour-avatar.con-texto{
  width:auto;border-radius:999px;padding:0 .95rem 0 .8rem;
}
.tour-avatar.con-texto{border-color:var(--marca,#f5a524)}
/* En una pantalla estrecha el texto no cabe al lado del patinete sin taparlo
   todo: ahi se queda solo el icono, que es lo que hacia antes. */
@media (max-width:420px){
  .tour-avatar.con-texto{width:56px;padding:0;border-radius:50%}
  .tour-avatar.con-texto .tour-etiqueta{max-width:0;opacity:0;margin:0}
}
/* un latido suave para que se note que está ahí, sin dar la lata */
.tour-pulso{
  position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  border:2px solid var(--marca,#f5a524);opacity:0;
  animation:tour-latir 3.4s ease-out infinite;
}
@keyframes tour-latir{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.45);opacity:0}
  100%{opacity:0}
}
body.tour-abierto .tour-avatar{opacity:0;pointer-events:none}

/* ── la capa oscura y el agujero de luz ── */
.tour-capa{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;
  transition:opacity .3s ease;
}
body.tour-abierto .tour-capa{opacity:1;pointer-events:auto}

/* El truco del foco: un recuadro transparente con una sombra gigantesca
   alrededor. Todo lo que queda fuera se oscurece; lo de dentro se ve limpio. */
.tour-hueco{
  position:absolute;border-radius:12px;opacity:0;
  box-shadow:0 0 0 9999px rgba(3,5,8,.76), 0 0 0 2px var(--marca,#f5a524),
             0 0 26px 4px rgba(245,165,36,.35);
  transition:top .45s cubic-bezier(.16,1,.3,1), left .45s cubic-bezier(.16,1,.3,1),
             width .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1),
             opacity .3s ease;
}

/* ── el bocadillo ── */
.tour-globo{
  position:fixed;z-index:71;width:340px;max-width:calc(100vw - 24px);
  background:var(--papel-2,#12171f);
  border:1px solid var(--linea-fuerte,#33404f);
  border-radius:16px;padding:18px 20px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  opacity:0;transform:translateY(8px) scale(.97);pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1),
             top .45s cubic-bezier(.16,1,.3,1), left .45s cubic-bezier(.16,1,.3,1);
}
body.tour-abierto .tour-globo{opacity:1;transform:none;pointer-events:auto}
.tour-globo.centrado{
  top:50% !important;left:50% !important;
  transform:translate(-50%,-50%) !important;
}

.tour-cabeza{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tour-mini{font-size:22px;line-height:1}
.tour-titulo{
  margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;
  color:var(--t-900,#f2f6fa);
}
.tour-texto{
  margin:0 0 16px;font-size:14.5px;line-height:1.55;
  color:var(--t-500,#93a3b1);
}
.tour-pie{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tour-cuenta{font-size:12.5px;color:var(--t-300,#5a6772);letter-spacing:.03em}
.tour-botones{display:flex;gap:8px}

.tour-omitir,.tour-siguiente{
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  padding:9px 16px;border-radius:9px;border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.tour-omitir{
  background:transparent;color:var(--t-400,#74838f);
  border-color:var(--linea,#232c38);
}
.tour-omitir:hover{color:var(--t-900,#f2f6fa);border-color:var(--linea-fuerte,#33404f)}
.tour-siguiente{
  background:var(--marca,#f5a524);color:#1a1206;
}
.tour-siguiente:hover{background:var(--marca-osc,#e0921a)}

.tour-omitir:focus-visible,.tour-siguiente:focus-visible,.tour-avatar:focus-visible{
  outline:2.5px solid var(--marca,#f5a524);outline-offset:3px;
}

/* con "reducir animaciones" puesto, el foco salta en vez de deslizarse */
@media (prefers-reduced-motion: reduce){
  .tour-hueco,.tour-globo,.tour-avatar{transition:none !important}
  .tour-pulso{animation:none !important;opacity:0}
}

@media (max-width:640px){
  .tour-avatar{width:48px;height:48px;right:12px;bottom:12px}
  .tour-emoji{font-size:23px}
  .tour-globo{width:calc(100vw - 24px);padding:16px 17px}
  .tour-titulo{font-size:16px}
  .tour-texto{font-size:14px}
}

/* ── botón "Escuchar esta ficha" (va con web/voz-lectura.js) ── */
.boton-escuchar{
  display:inline-flex;align-items:center;gap:9px;
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  color:var(--t-500,#93a3b1);background:var(--papel-2,#12171f);
  border:1px solid var(--linea,#232c38);border-radius:99px;
  padding:9px 18px 9px 14px;margin:14px 0 18px;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.boton-escuchar:hover{
  color:var(--t-900,#f2f6fa);border-color:var(--linea-fuerte,#33404f);
  background:var(--papel-3,#1a212b);
}
.be-icono{display:inline-flex;color:var(--marca,#f5a524)}
.boton-escuchar.sonando{
  color:var(--t-900,#f2f6fa);border-color:var(--marca-borde,#4f3611);
  background:var(--marca-clara,#2a1d09);
}
.boton-escuchar.sonando .be-onda{animation:be-onda 1.4s ease-in-out infinite}
.boton-escuchar.sonando .be-onda2{animation:be-onda 1.4s ease-in-out .25s infinite}
@keyframes be-onda{0%,100%{opacity:.25}50%{opacity:1}}
.boton-escuchar:focus-visible{outline:2.5px solid var(--marca,#f5a524);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .boton-escuchar.sonando .be-onda,.boton-escuchar.sonando .be-onda2{animation:none !important}
}
@media (max-width:640px){
  .boton-escuchar{font-size:14px;padding:8px 15px 8px 12px}
}

/* ── sugerencia discreta (va con web/sugerencias.js) ──
   Sale al lado del patinete, NUNCA encima del contenido. Se puede ignorar. */
.sug-globo{
  position:fixed;right:20px;bottom:88px;z-index:59;
  width:290px;max-width:calc(100vw - 32px);
  background:var(--papel-2,#12171f);
  border:1px solid var(--linea-fuerte,#33404f);
  border-radius:14px 14px 4px 14px;padding:15px 17px 14px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.sug-globo.visible{opacity:1;transform:none}
.sug-texto{
  margin:0 0 12px;font-size:14px;line-height:1.5;
  color:var(--t-700,#c9d4de);padding-right:14px;
}
.sug-enlace{
  display:inline-block;font-size:13.5px;font-weight:700;text-decoration:none;
  color:var(--marca,#f5a524);
}
.sug-enlace:hover{text-decoration:underline}
.sug-cerrar{
  position:absolute;top:8px;right:9px;width:24px;height:24px;padding:0;
  background:transparent;border:0;cursor:pointer;line-height:1;
  color:var(--t-300,#5a6772);font-size:18px;border-radius:6px;
}
.sug-cerrar:hover{color:var(--t-900,#f2f6fa);background:var(--papel-3,#1a212b)}
.sug-cerrar:focus-visible,.sug-enlace:focus-visible{
  outline:2px solid var(--marca,#f5a524);outline-offset:2px;
}
body.tour-abierto .sug-globo{display:none}
@media (prefers-reduced-motion: reduce){ .sug-globo{transition:none} }
@media (max-width:640px){
  .sug-globo{right:12px;bottom:70px;width:calc(100vw - 24px);padding:13px 15px 12px}
}