/* ============================================================
 * ALGORIX — Estilos del botón PWA + instrucciones iOS
 * Tema coherente: oro (#e5b84b), azul (#3e8bff), fondo ink (#05070e)
 * ============================================================ */

.pwa-install-host { width: 100%; max-width: 360px; margin: 12px auto; }

/* Botón principal (variante inline) */
.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  background: linear-gradient(135deg, #e5b84b 0%, #f0cd77 100%);
  color: #1a1206;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 6px 20px rgba(229,184,75,.25);
  -webkit-tap-highlight-color: transparent;
}
.pwa-install-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(229,184,75,.35); }
.pwa-install-btn:active { transform: translateY(0); }
.pwa-install-btn.is-loading { opacity: .7; cursor: progress; }
.pwa-install-btn i { font-size: 18px; }

/* Variante hero (más grande, ideal para landing/login) */
.pwa-install-btn.pwa-install-hero {
  padding: 14px 22px;
  font-size: 15px;
  border-radius: 14px;
}
.pwa-install-btn.pwa-install-hero i { font-size: 20px; }

/* Variante rankinline: botón hermano del <a class="rank-card">, dentro de
   .rank-block (que es position:relative). Así evitamos HTML inválido
   (<button> dentro de <a>), que Safari móvil ignora silenciosamente.
   Apariencia: compacto, negro con texto blanco, totalmente a la derecha
   debajo del card de rango. */
.rank-block { position: relative; }

.pwa-install-host[data-variant="rankinline"] {
  width: 100%;
  max-width: none;
  margin: 10px 0 20px;            /* mas aire abajo para que no quede pegado a Balance total */
  display: flex;
  justify-content: flex-end;
}
.pwa-install-host[data-variant="rankinline"] .pwa-install-btn {
  width: auto;
  padding: 7px 14px;              /* +20% sobre el anterior 6/12 */
  font-size: 13.5px;              /* +12.5% sobre 12 */
  font-weight: 600;
  border-radius: 9px;
  background: #0a0d14;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  gap: 7px;
  letter-spacing: 0;
  /* Reset de estilos <button> por si el navegador hereda algo */
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}
.pwa-install-host[data-variant="rankinline"] .pwa-install-btn:hover {
  background: #161b24;
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.pwa-install-host[data-variant="rankinline"] .pwa-install-btn:active {
  transform: translateY(0);
}
.pwa-install-host[data-variant="rankinline"] .pwa-install-btn i { font-size: 15px; }
.pwa-install-host[data-variant="rankinline"] .pwa-install-ios {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  z-index: 5;
}

/* Móvil: el botón se mantiene igual (compacto a la derecha). Solo
   aseguramos que no rompa si el ancho de pantalla es muy estrecho. */
@media (max-width: 640px) {
  .pwa-install-host[data-variant="rankinline"] { margin-bottom: 16px; }
  .pwa-install-host[data-variant="rankinline"] .pwa-install-btn {
    padding: 8px 16px;
    font-size: 13.5px;
  }
}

/* iOS: caja de instrucciones */
.pwa-install-ios {
  background: linear-gradient(180deg, rgba(62,139,255,.08), rgba(229,184,75,.06));
  border: 1px solid rgba(229,184,75,.25);
  border-radius: 14px;
  padding: 16px 18px;
  color: #f5f5f7;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.pwa-ios-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #f0cd77;
}
.pwa-ios-head i { font-size: 20px; }
.pwa-ios-steps {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.pwa-ios-steps li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.45;
  color: rgba(255,255,255,.88);
}
.pwa-ios-ico { color: #e5b84b; font-size: 18px; flex: 0 0 18px; margin-top: 1px; }
.pwa-ios-steps kbd {
  display: inline-block;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: #f0cd77;
}
.pwa-ios-close {
  width: 100%;
  background: rgba(255,255,255,.06);
  color: #f0cd77;
  border: 1px solid rgba(229,184,75,.3);
  border-radius: 10px;
  padding: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pwa-ios-close:hover { background: rgba(229,184,75,.1); }

/* Atributo data: instalado → ocultar todo */
html[data-pwa-installed="1"] .pwa-install-host { display: none !important; }

/* Modo standalone: ajustes suaves */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}