/* ─────────────────────────────────────────────────────────────────────────
   Botón de refrescar del Portal (21-ago-2026). Ver refrescar.js para el porqué.

   Los colores son los del Portal, sacados de entrar.css, no inventados:
     #0b0b0d fondo · #141418 superficie · #26262e borde
     #9b9ba6 texto apagado · #e8e8ec texto claro · #c9a227 dorado
   El dorado es dinero en la marca, así que aquí se usa sólo al pulsar y al
   pasar por encima -no de adorno-.
   ───────────────────────────────────────────────────────────────────────── */

#cmpnd-refrescar {
  position: fixed;
  /* Abajo a la derecha, respetando el hueco del notch en iPhone: sin el
     safe-area el botón se mete debajo de la barra del sistema y no se puede
     pulsar. */
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;          /* por encima del SPA, por debajo de nada */

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;

  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #9b9ba6;

  background: #141418;
  border: 1px solid #26262e;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

#cmpnd-refrescar:hover,
#cmpnd-refrescar:focus-visible {
  color: #e8e8ec;
  border-color: #c9a227;
  outline: none;
}

#cmpnd-refrescar:active { transform: scale(0.97); }

#cmpnd-refrescar[disabled] {
  color: #c9a227;
  border-color: #c9a227;
  cursor: default;
}

.cmpnd-refrescar-ico {
  font-size: 15px;
  line-height: 1;
  display: inline-block;
}

/* Gira mientras recarga: sin esto, pulsar y no ver nada durante un segundo
   parece que el botón está roto. */
#cmpnd-refrescar.girando .cmpnd-refrescar-ico {
  animation: cmpnd-girar 700ms linear infinite;
}

@keyframes cmpnd-girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* En pantallas estrechas, sólo el icono: el rótulo se come sitio útil. */
@media (max-width: 420px) {
  #cmpnd-refrescar { padding: 11px; gap: 0; }
  .cmpnd-refrescar-txt { display: none; }
}

/* Quien pide menos movimiento no ve el giro. */
@media (prefers-reduced-motion: reduce) {
  #cmpnd-refrescar,
  #cmpnd-refrescar.girando .cmpnd-refrescar-ico { transition: none; animation: none; }
}