/* INSTALAR PLAYICFES COMO APP
   El botón vive en la tira de navegación de todas las páginas; la hoja se abre
   desde abajo, como una app nativa. Paleta de PlayICFES: azul noche + verde
   neón. Nada de emojis en el botón — en varios Android salían como cuadros. */

/* ⚠ EL ATRIBUTO `hidden` TIENE QUE GANAR SIEMPRE.
   `hidden` esconde poniendo `display:none` desde la hoja del navegador, que
   pierde contra cualquier clase. Al declarar `display:flex` en `.pi-hoja` la
   hoja de instalación quedaba MOSTRADA aunque tuviera `hidden`: invisible
   (opacity 0) pero ocupando la pantalla entera a z-index 9000 y tragándose
   todos los clics. Desde fuera se veía como si todos los botones de
   PlayICFES estuvieran deshabilitados. Estas dos líneas son el arreglo. */
.pi-hoja[hidden],
.pi-instalar-btn[hidden] { display: none !important; }

.pi-instalar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(10, 158, 82, 0.55);
  background: linear-gradient(145deg, rgba(10, 158, 82, 0.22), rgba(10, 158, 82, 0.06));
  /* El verde pálido de aquí venía de la portada, que es negra. Este mismo
     botón vive también en la barra BLANCA de toda la aplicación, y allí
     era menta sobre blanco: se veía la píldora y no la letra. El color
     por defecto es ahora el verde oscuro, que se lee sobre blanco; la
     versión clara se reserva para los fondos oscuros. */
  color: #077a3f;
  font: 700 0.78rem/1 inherit;
  letter-spacing: 0.01em;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pi-instalar-btn:hover,
.pi-instalar-btn:focus-visible {
  background: linear-gradient(145deg, rgba(10, 158, 82, 0.38), rgba(10, 158, 82, 0.14));
  box-shadow: 0 0 0 3px rgba(10, 158, 82, 0.18);
  transform: translateY(-1px);
}
.pi-instalar-btn svg { flex: 0 0 auto; }

/* El pulso llama la atención una sola vez cada minuto: presente, no molesto. */
@keyframes pi-latido {
  0%, 92%, 100% { box-shadow: 0 0 0 0 rgba(10, 158, 82, 0); }
  95%           { box-shadow: 0 0 0 6px rgba(10, 158, 82, 0.22); }
}
.pi-instalar-btn { animation: pi-latido 12s ease-in-out infinite; }

/* Vive dentro del carrusel horizontal de navegación: nunca debe encogerse
   ni partir la etiqueta en dos líneas. */
.pi-instalar-btn { flex: 0 0 auto; }

/* ── La hoja ── */
.pi-hoja {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3, 7, 20, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
  /* Cinturón y tirantes: mientras no esté abierta de verdad, la hoja deja
     pasar los clics. Aunque algo la deje a medio abrir, jamás vuelve a
     bloquear la página entera. */
  pointer-events: none;
}
.pi-hoja.pi-visible { opacity: 1; pointer-events: auto; }
body.pi-hoja-abierta { overflow: hidden; }

.pi-hoja-caja {
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #0d1730;
  border: 1px solid rgba(10, 158, 82, 0.35);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 22px 22px calc(26px + env(safe-area-inset-bottom));
  color: #e8eefc;
  transform: translateY(18px);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.55);
}
.pi-hoja.pi-visible .pi-hoja-caja { transform: translateY(0); }
@media (min-width: 640px) {
  .pi-hoja { align-items: center; }
  .pi-hoja-caja { border-radius: 22px; border-bottom: 1px solid rgba(10, 158, 82, 0.35); }
}

.pi-hoja-asa {
  width: 42px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  margin: -6px auto 16px;
}
.pi-hoja-cab { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.pi-hoja-icono {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
  background: #fff; padding: 6px; object-fit: contain;
}
.pi-hoja-cab h2 { margin: 0 0 2px; font-size: 1.12rem; color: #fff; line-height: 1.3; }
.pi-hoja-cab p  { margin: 0; font-size: 0.82rem; color: #8fa3c8; }

.pi-hoja-p    { margin: 0 0 14px; line-height: 1.65; font-size: 0.95rem; color: #cfdaf0; }
.pi-hoja-nota { margin: 14px 0 0; line-height: 1.6; font-size: 0.82rem; color: #8fa3c8; }

.pi-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.pi-paso  { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; font-size: 0.93rem; color: #cfdaf0; }
.pi-paso-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 158, 82, 0.2); color: #4ade80;
  font-weight: 800; font-size: 0.82rem;
}
.pi-glifo { display: inline-block; vertical-align: -4px; color: #4ade80; margin: 0 1px; }

.pi-instalar-ya {
  display: block; width: 100%; min-height: 54px;
  border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #0a9e52, #14c46a);
  color: #04160c; font: 800 1.02rem/1 inherit;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(10, 158, 82, 0.35);
}
.pi-instalar-ya:active { transform: translateY(1px); }

.pi-ventajas { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pi-ventajas li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: #a9bcd9; line-height: 1.55; }
.pi-ventajas b { color: #e8eefc; }
.pi-tic { flex: 0 0 auto; color: #4ade80; font-weight: 800; }

.pi-hoja-cerrar {
  display: block; width: 100%; margin-top: 16px;
  background: none; border: 0; color: #8fa3c8;
  font: 700 0.86rem/1 inherit; padding: 12px; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .pi-instalar-btn { animation: none; }
  .pi-hoja, .pi-hoja-caja { transition: none; }
}

/* En el hero de la portada el botón compite con dos llamadas grandes:
   se le da el mismo aire para que no parezca un añadido. */
.pi-instalar-hero {
  min-height: 46px;
  padding: 12px 20px;
  font-size: 0.9rem;
}

/* ── iPhone: la flecha que guía la mano ──────────────────────────────────
   Apple no permite instalar por código, así que lo más cerca de «automático»
   que se puede llegar es señalar el botón Compartir de la barra de Safari.
   Va por encima de la hoja, pegada al borde de abajo. */
#pi-flecha-ios {
  position: fixed;
  left: 50%;
  bottom: calc(6px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #4ade80;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  animation: pi-flecha 1.3s ease-in-out infinite;
}
#pi-flecha-ios span {
  background: rgba(6, 12, 28, 0.92);
  border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: 999px;
  padding: 7px 14px;
  font: 700 0.82rem/1 system-ui, sans-serif;
  color: #d8ffe9;
  white-space: nowrap;
}
#pi-flecha-ios b { color: #4ade80; }
@keyframes pi-flecha {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 9px); }
}

/* Copiar el enlace: para quien abrió PlayICFES en Chrome dentro del iPhone,
   donde Apple no deja instalar de ninguna manera. */
.pi-copiar {
  display: block; width: 100%; margin-top: 14px; min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); color: #e8eefc;
  font: 700 0.88rem/1.3 inherit; padding: 12px; cursor: pointer;
}
.pi-copiar:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  #pi-flecha-ios { animation: none; }
}

/* ── EL MONEDERO EN LA BARRA ─────────────────────────────────────────────
   Oro sobre la noche, para que se lea como plata y no como un dato más.
   Vive en la misma tira que el botón de instalar. */
.pi-monedero {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 9px 15px; border-radius: 999px;
  font: 800 0.92rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;

  /* ── DE DÍA: moneda maciza ──
     Esto nació «oro sobre la noche»: letra dorada pálida (#ffe9b0) sobre
     un fondo translúcido. Funcionaba en la portada oscura, pero la barra
     del aula es BLANCA (#fff), y ahí ese dorado daba un contraste de
     ~1.3:1 — el saldo estaba pintado, pero no se leía. Si el monedero es
     el corazón de la economía del juego, no puede ser lo más tenue de la
     pantalla. De día va macizo: oro de verdad y tinta oscura encima. */
  border: 1px solid #d9a406;
  background: linear-gradient(145deg, #ffd257, #f0a800);
  color: #4a3000;
  box-shadow: 0 2px 7px rgba(217, 164, 6, 0.35);
}
.pi-monedero:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(217, 164, 6, 0.45); }
.pi-monedero b { color: #2e1d00; font-weight: 800; font-size: 1.02em; }
.pi-monedero svg { flex: 0 0 auto; color: #7a5200; }

/* ── DE NOCHE: vuelve el oro sobre la noche, que ahí sí se lee. ── */
body.tema-noche .pi-monedero {
  border-color: rgba(255, 196, 60, 0.5);
  background: linear-gradient(145deg, rgba(255, 196, 60, 0.22), rgba(255, 196, 60, 0.06));
  color: #ffd98a;
  box-shadow: none;
}
body.tema-noche .pi-monedero:hover { box-shadow: 0 0 0 3px rgba(255, 196, 60, 0.16); }
body.tema-noche .pi-monedero b { color: #ffe9b0; }
body.tema-noche .pi-monedero svg { color: #ffc43c; }
.pi-racha {
  background: rgba(255, 93, 108, 0.22); color: #ff9aa5;
  border-radius: 999px; padding: 3px 7px; font-size: 0.7rem; font-weight: 800;
}
/* Cuando sube, un destello: el dinero que entra tiene que verse entrar. */
@keyframes pi-monedero-sube {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); box-shadow: 0 0 0 8px rgba(255, 196, 60, 0.25); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 196, 60, 0); }
}
.pi-monedero.sube { animation: pi-monedero-sube 0.9s ease-out; }

/* Sobre fondo oscuro —la portada y el Modo Noche— vuelve la menta. */
body.tema-noche .pi-instalar-btn,
.pi-instalar-hero { color: #d8ffe9; }