/* JDServer-Webs — Botones flotantes: Auto-refresh (izq) y Subir (dcha) */

/* Contenedor seguro, por si queremos agruparlos en el futuro */
#jd-fab-wrap { position: fixed; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 998; }

/* Botón base */
.jd-fab {
  position: fixed;
  bottom: clamp(8px, 1.6vh, 14px);           /* más abajo */
  height: 36px;                              /* un pelín más pequeño */
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--border, #2b2f36);
  background: var(--card, #111418);
  color: var(--text, #dfe7ef);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
  pointer-events: auto; user-select: none; cursor: pointer;
  transform: translateZ(0); transition: transform .18s ease, opacity .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.jd-fab:hover { transform: translateY(-2px); }
.jd-fab:active { transform: translateY(0); }

/* Posiciones */
.jd-fab--left  { left: 16px; }
.jd-fab--right { right: 16px; }

/* Iconos simples */
.jd-fab .ico { font-size: 16px; line-height: 1; opacity: .9; }

/* Estado oculto (cuando estamos arriba del todo) */
.jd-fab.is-hidden {
  opacity: 0; pointer-events: none; transform: translateY(8px);
}

/* Menú del auto-refresh */
#jd-ar-menu {
  position: fixed;
  left: 16px;
  bottom: calc(clamp(8px, 1.6vh, 14px) + 44px);   /* justo encima del botón */
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border, #2b2f36);
  background: var(--card, #111418);
  color: var(--text, #dfe7ef);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  display: none; z-index: 999;
}
#jd-ar-menu.open { display: block; }

#jd-ar-menu h4 {
  margin: 4px 2px 8px; font-size: 13px; font-weight: 700; opacity: .9;
}
#jd-ar-menu .sep {
  height: 1px; background: var(--border, #2b2f36); margin: 8px 0;
}
#jd-ar-menu button {
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
#jd-ar-menu button:hover { background: rgba(255,255,255,.06); }
#jd-ar-menu button.is-active {
  border-color: var(--brand, #2dd4bf);
  background: rgba(45,212,191,.12);
}

/* Etiquetas compactas dentro del botón auto */
.jd-pill { padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 700; }

/* Temas claros oscuros (señales suaves para el menú) */
@media (prefers-color-scheme: light) {
  .jd-fab        { background: var(--card, #fff); color: var(--text, #111); border-color: rgba(0,0,0,.12); }
  #jd-ar-menu    { background: var(--card, #fff); color: var(--text, #111); border-color: rgba(0,0,0,.12); }
  #jd-ar-menu button:hover { background: rgba(0,0,0,.06); }
  #jd-ar-menu .sep { background: rgba(0,0,0,.1); }
}

/* Evitar solaparse con footers pegajosos si los hubiera (opcional) */
@media (max-width: 640px){
  .jd-fab--left  { left: 12px; }
  .jd-fab--right { right: 12px; }
}