/* ============================================================
   Fabricio · asistente de ISEPlus (widget de preventa)
   Usa la paleta de styles.css; todo prefijado con .fb- para no
   chocar con el sitio. Se apila encima del boton de WhatsApp.
   ============================================================ */
.fb-root {
  --fb-navy: var(--navy, #22295f);
  --fb-navy-deep: var(--navy-deep, #171d4a);
  --fb-blue: var(--blue, #495eab);
  --fb-green: var(--green, #6aa332);
  --fb-red: var(--red, #d93a1c);
  --fb-warm: var(--warm, #faf9f6);
  --fb-ink: var(--ink, #10143a);
  --fb-body: var(--body, #4a5169);
  --fb-muted: var(--muted, #7b819a);
  --fb-border: var(--border, #e4e7f0);
  --fb-display: var(--font-display, "Outfit", ui-sans-serif, system-ui, sans-serif);
  --fb-text: var(--font-body, "Figtree", ui-sans-serif, system-ui, sans-serif);
  --fb-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --fb-wa-alto: 58px;
  font-family: var(--fb-text);
}

/* ---------- mascota flotante ---------- */
.fb-lanzador {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.4rem + var(--fb-wa-alto) + 0.5rem);
  z-index: 61;
  width: 92px;
  height: 96px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(34, 41, 95, 0.28));
  transition: transform 0.35s var(--fb-ease);
  animation: fb-flotar 4.5s ease-in-out infinite;
}
.fb-lanzador:hover { transform: scale(1.07) rotate(-3deg); }
.fb-lanzador:focus-visible { outline: 3px solid var(--fb-blue); outline-offset: 4px; border-radius: 18px; }
.fb-lanzador svg { width: 100%; height: 100%; display: block; }
.fb-lanzador[aria-expanded="true"] { transform: scale(0.85); opacity: 0; pointer-events: none; }

.fb-punto {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fb-red);
  border: 2px solid #fff;
  animation: fb-latir 1.8s ease-in-out infinite;
}

.fb-ojos { transform-box: fill-box; transform-origin: center; animation: fb-parpadeo 5s infinite; }

@keyframes fb-flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes fb-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes fb-latir { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }

/* ---------- globito de saludo ---------- */
.fb-globo {
  position: fixed;
  right: calc(1.1rem + 96px);
  bottom: calc(1.4rem + var(--fb-wa-alto) + 2.4rem);
  z-index: 61;
  max-width: 250px;
  padding: 0.85rem 2.2rem 0.85rem 1rem;
  border-radius: 18px 18px 4px 18px;
  background: #fff;
  color: var(--fb-ink);
  font-size: 0.93rem;
  line-height: 1.4;
  box-shadow: 0 14px 34px rgba(34, 41, 95, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.4s var(--fb-ease), transform 0.4s var(--fb-ease);
  pointer-events: none;
}
.fb-globo.fb-visible { opacity: 1; transform: none; pointer-events: auto; }
.fb-globo strong { font-family: var(--fb-display); color: var(--fb-navy); }
.fb-globo-cerrar {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: transparent; color: var(--fb-muted);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.fb-globo-cerrar:hover { background: var(--fb-warm); color: var(--fb-ink); }

/* ---------- panel de chat ---------- */
.fb-panel {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 70;
  width: min(390px, calc(100vw - 2.2rem));
  height: min(620px, calc(100vh - 2.2rem));
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: var(--fb-warm);
  box-shadow: 0 30px 70px rgba(16, 20, 58, 0.32), 0 4px 14px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.35s var(--fb-ease), transform 0.35s var(--fb-ease);
  pointer-events: none;
}
.fb-panel.fb-abierto { opacity: 1; transform: none; pointer-events: auto; }

.fb-cabecera {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1rem 1rem 0.9rem;
  color: #fff;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(73, 94, 171, 0.55), transparent 55%),
    linear-gradient(135deg, var(--fb-navy) 0%, var(--fb-navy-deep) 100%);
}
.fb-cabecera::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--fb-red) 0 33%, var(--fb-green) 33% 66%, var(--fb-blue) 66% 100%);
}
.fb-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  display: grid; place-items: center; overflow: hidden;
}
.fb-avatar svg { width: 46px; height: 48px; }
.fb-titulo { flex: 1; min-width: 0; }
.fb-nombre { font-family: var(--fb-display); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.01em; }
.fb-estado { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; opacity: 0.85; }
.fb-estado::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #7ee07a; box-shadow: 0 0 0 3px rgba(126, 224, 122, 0.25);
}
.fb-cerrar {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; transition: background 0.2s;
}
.fb-cerrar:hover { background: rgba(255, 255, 255, 0.2); }
.fb-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fb-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.fb-msg {
  max-width: 86%;
  padding: 0.7rem 0.9rem;
  border-radius: 16px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--fb-ink);
  word-wrap: break-word;
  animation: fb-entrar 0.35s var(--fb-ease);
}
.fb-msg p { margin: 0 0 0.5em; }
.fb-msg p:last-child { margin: 0; }
.fb-msg ul { margin: 0.3em 0 0.5em; padding-left: 1.2em; }
.fb-msg a { color: var(--fb-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fb-msg--fabricio {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--fb-border);
  border-bottom-left-radius: 5px;
}
.fb-msg--visitante {
  align-self: flex-end;
  background: var(--fb-navy);
  color: #fff;
  border-bottom-right-radius: 5px;
}
@keyframes fb-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fb-escribiendo { display: inline-flex; gap: 5px; align-items: center; padding: 0.3rem 0.1rem; }
.fb-escribiendo span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--fb-muted);
  animation: fb-puntos 1.2s infinite ease-in-out;
}
.fb-escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.fb-escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes fb-puntos { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.fb-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.2rem 1rem 0.7rem; }
.fb-chip {
  border: 1px solid rgba(73, 94, 171, 0.35);
  background: #fff;
  color: var(--fb-navy);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font: 600 0.82rem var(--fb-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.fb-chip:hover { background: rgba(73, 94, 171, 0.08); border-color: var(--fb-blue); transform: translateY(-1px); }
.fb-chip:focus-visible { outline: 2px solid var(--fb-blue); outline-offset: 2px; }

.fb-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.5rem;
  background: #fff;
  border-top: 1px solid var(--fb-border);
}
.fb-entrada {
  flex: 1;
  resize: none;
  overflow-y: hidden;
  max-height: 110px;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--fb-border);
  border-radius: 14px;
  background: var(--fb-warm);
  font: 0.95rem/1.4 var(--fb-text);
  color: var(--fb-ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fb-entrada:focus { border-color: var(--fb-blue); box-shadow: 0 0 0 3px rgba(73, 94, 171, 0.15); }
.fb-enviar {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 14px;
  background: var(--fb-green); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.2s, transform 0.2s;
}
.fb-enviar:hover { background: #5b8f2a; transform: translateY(-1px); }
.fb-enviar:disabled { background: #b8c2a8; cursor: default; transform: none; }
.fb-enviar svg { width: 20px; height: 20px; }
.fb-pie {
  padding: 0 0.9rem 0.65rem;
  background: #fff;
  font-size: 0.72rem;
  color: var(--fb-muted);
  text-align: center;
}
.fb-pie a { color: var(--fb-muted); }

/* ---------- movil ---------- */
/* Hasta 720px el sitio muestra la barra CTA fija abajo y sube el boton de
   WhatsApp a 5rem (styles.css): la mascota va encima de ambos. */
@media (max-width: 720px) {
  .fb-lanzador { width: 72px; height: 76px; right: 0.8rem; bottom: calc(5rem + 52px + 0.4rem); }
  .fb-globo { right: calc(0.8rem + 76px); bottom: calc(5rem + 52px + 1.8rem); max-width: 210px; font-size: 0.88rem; }
  /* inset en vez de 100vw: 100vw incluye la barra de desplazamiento y se sale */
  .fb-panel { inset: 0; width: auto; height: auto; border-radius: 0; z-index: 80; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-lanzador, .fb-ojos, .fb-punto, .fb-escribiendo span { animation: none; }
  .fb-globo, .fb-panel, .fb-msg { transition: none; animation: none; }
}

/* ---------- pagina completa (fabricio.iseplus.com) ---------- */
.fb-root--pagina .fb-panel {
  position: relative; right: auto; bottom: auto;
  width: min(760px, 100%); height: min(760px, calc(100dvh - 2rem));
  margin: 1rem auto; opacity: 1; transform: none; pointer-events: auto;
}
.fb-root--pagina .fb-cerrar { display: none; }