/* ==========================================================
   ms-bot - Botón flotante Fhaycs Bot (WhatsApp, solo estudiantes)
   Lo carga el módulo mod_fhaycsbot (no hace falta en Custom CSS).
   A = .ms-bot--directo   B = .ms-bot--panel   Izquierda = .ms-bot--izq
   ========================================================== */

.ms-bot {
  --ms-bot-mag: #b00060;
  --ms-bot-mag-hover: #800048;
  --ms-bot-dark: #5a0030;
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  font-family: inherit;
  line-height: 1.25;
}

/* ---------- Botón (común a A y B) ---------- */
.ms-bot__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 8px;
  background: var(--ms-bot-mag);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(90, 0, 48, .28);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: background-color .2s, transform .2s;
}
.ms-bot__btn::-webkit-details-marker { display: none; }
.ms-bot__btn:hover,
.ms-bot__btn:focus-visible {
  background: var(--ms-bot-mag-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.ms-bot__btn:focus-visible {
  outline: 3px solid #fff;
  box-shadow: 0 0 0 6px var(--ms-bot-mag);
}

.ms-bot__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 6px;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}
.ms-bot__avatar img {
  display: block;
  width: 100%;
  height: 100%;
}

.ms-bot__texto { display: flex; flex-direction: column; }
.ms-bot__nombre { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.ms-bot__aviso  { font-size: .88rem; line-height: 1.3; }

/* ---------- Variante B: panel intermedio ---------- */
.ms-bot--panel details { position: relative; }

.ms-bot__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(300px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  background: #fff;
  color: #333;
  border-radius: 12px;
  border-top: 4px solid var(--ms-bot-mag);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  box-sizing: border-box;
}
.ms-bot__panel p { margin: 0 0 10px; font-size: .92rem; }
.ms-bot__panel .ms-bot__titulo {
  color: var(--ms-bot-dark);
  font-weight: 700;
  font-size: 1.05rem;
}
.ms-bot__panel strong { color: var(--ms-bot-mag); }

.ms-bot__ir {
  display: block;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--ms-bot-mag);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.ms-bot__ir:hover,
.ms-bot__ir:focus-visible {
  background: var(--ms-bot-mag-hover);
  color: #fff;
  text-decoration: none;
}

/* Abierto: el botón muestra "Cerrar" en lugar del aviso */
.ms-bot__cerrar { display: none; font-size: .88rem; }
.ms-bot--panel details[open] .ms-bot__aviso  { display: none; }
.ms-bot--panel details[open] .ms-bot__cerrar { display: inline; }

/* ---------- Colores blindados ----------
   El template aplica colores propios a enlaces y spans; estos
   selectores con más peso aseguran el blanco sobre magenta. */
.ms-bot .ms-bot__btn,
.ms-bot .ms-bot__btn:hover,
.ms-bot .ms-bot__btn:focus,
.ms-bot .ms-bot__btn:visited,
.ms-bot .ms-bot__btn .ms-bot__nombre,
.ms-bot .ms-bot__btn .ms-bot__aviso,
.ms-bot .ms-bot__btn .ms-bot__cerrar,
.ms-bot .ms-bot__panel .ms-bot__ir,
.ms-bot .ms-bot__panel .ms-bot__ir:hover,
.ms-bot .ms-bot__panel .ms-bot__ir:visited {
  color: #fff !important;
  opacity: 1 !important;
}
.ms-bot .ms-bot__panel,
.ms-bot .ms-bot__panel p { color: #333 !important; }
.ms-bot .ms-bot__panel .ms-bot__titulo { color: #5a0030 !important; }
.ms-bot .ms-bot__panel strong { color: #b00060 !important; }

/* ---------- Ubicación a la izquierda ---------- */
.ms-bot--izq { right: auto; left: 16px; }
.ms-bot--izq .ms-bot__panel { right: auto; left: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 575px) {
  .ms-bot { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ms-bot--izq { right: auto; left: 12px; }
  .ms-bot__btn { padding: 6px 14px 6px 6px; gap: 9px; border-radius: 14px; }
  .ms-bot__avatar { width: 48px; height: 48px; padding: 5px; }
  .ms-bot__nombre { font-size: 1rem; }
  .ms-bot__aviso,
  .ms-bot__cerrar { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-bot__btn { transition: none; }
  .ms-bot__btn:hover { transform: none; }
}

@media print { .ms-bot { display: none; } }

/* ---------- Convivencia con el "volver arriba" de Helix ----------
   Solo en las páginas donde está el bot, y solo si el bot va del
   mismo lado (derecha): se sube el botón de scroll por encima. */
body:has(.ms-bot:not(.ms-bot--izq)) .sp-scroll-up {
  bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 575px) {
  body:has(.ms-bot:not(.ms-bot--izq)) .sp-scroll-up {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}