/* 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, box-shadow .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;
}

/* ✅ Tema CLARO manual: elevar FABs para que no se “laven” (iOS especially) */
html[data-theme="light"] .jd-fab,
body[data-theme="light"] .jd-fab {
  background: rgba(248, 250, 252, 0.96);
  color: var(--text, #0f172a);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.14), inset 0 1px 0 rgba(255,255,255,.70);
}

html[data-theme="light"] #jd-ar-menu,
body[data-theme="light"] #jd-ar-menu {
  background: rgba(248, 250, 252, 0.98);
  color: var(--text, #0f172a);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.16);
}

html[data-theme="light"] #jd-ar-menu .sep,
body[data-theme="light"] #jd-ar-menu .sep {
  background: rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] #jd-ar-menu button:hover,
body[data-theme="light"] #jd-ar-menu button:hover {
  background: rgba(2, 6, 23, 0.06);
}

html[data-theme="light"] .jd-pill,
body[data-theme="light"] .jd-pill {
  background: rgba(2, 6, 23, 0.07);
}

/* Solo aplicar el ajuste por prefers-color-scheme cuando estamos en tema AUTO */
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .jd-fab,
  html:not([data-theme]) .jd-fab {
    background: var(--card, #fff);
    color: var(--text, #111);
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.45);
  }

  html[data-theme="auto"] #jd-ar-menu,
  html:not([data-theme]) #jd-ar-menu {
    background: var(--card, #fff);
    color: var(--text, #111);
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 14px 30px rgba(0,0,0,.14);
  }

  html[data-theme="auto"] #jd-ar-menu button:hover,
  html:not([data-theme]) #jd-ar-menu button:hover {
    background: rgba(0,0,0,.06);
  }

  html[data-theme="auto"] #jd-ar-menu .sep,
  html:not([data-theme]) #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; }
}