/* «Instalar en tu celular» y pantalla de inicio de la app (ver instalar.js). Estilo sticker del universo. */
.inst-aviso, .inst-tarjeta, .inst-hoja {
  font-family: Quicksand, "Segoe UI", system-ui, sans-serif;
  color: #5B3A24;
  background: #F1E9D5;
  border: 3px solid #5B3A24;
  border-radius: 22px;
  box-shadow: 0 4px 0 #5B3A24;
}
.inst-aviso {
  position: fixed; left: 10px; right: 10px; bottom: 76px; z-index: 25;
  max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px;
  animation: inst-entra .35s ease-out both;
}
.inst-aviso.fuera { animation: inst-sale .3s ease-in both; }
.inst-bro { width: 52px; height: 52px; flex: none; object-fit: contain; }
.inst-bro.grande { width: 96px; height: 96px; display: block; margin: 0 auto 4px; }
.inst-texto { margin: 0; flex: 1; font-weight: 700; font-size: 16px; line-height: 1.2; }
.inst-si, .inst-ok {
  min-height: 48px; padding: 8px 16px; flex: none;
  border: 3px solid #5B3A24; border-radius: 999px; background: #6AAA55; color: #fff;
  font: 800 16px/1 Quicksand, "Segoe UI", system-ui, sans-serif; text-shadow: 0 1px 0 rgba(91, 58, 36, .45);
  box-shadow: 0 4px 0 #5B3A24; cursor: pointer;
}
.inst-si:active, .inst-ok:active { transform: translateY(3px); box-shadow: 0 1px 0 #5B3A24; }
.inst-x {
  width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%;
  background: transparent; color: #5B3A24; font-size: 20px; font-weight: 800; cursor: pointer;
}
.inst-tarjeta { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 14px; }

/* Ayuda de iPhone / iPad */
.inst-ayuda {
  position: fixed; inset: 0; z-index: 45; background: rgba(42, 30, 20, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.inst-hoja { position: relative; width: min(340px, 100%); padding: 18px 16px 16px; text-align: center; }
.inst-hoja .inst-x { position: absolute; right: 4px; top: 4px; }
.inst-pasos { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 8px; text-align: left; }
.inst-pasos li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: #fff; border: 2px solid #E4D3BC; border-radius: 16px; font-weight: 700; font-size: 17px;
}
.inst-num {
  width: 28px; height: 28px; flex: none; border-radius: 50%; background: #F5B6A7; border: 2px solid #5B3A24;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.inst-icono { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #F4F4F6; border-radius: 10px; }
.inst-ok { width: 100%; }
.inst-manita { position: fixed; font-size: 44px; line-height: 1; filter: drop-shadow(0 2px 0 #5B3A24); pointer-events: none; }
/* La manita de afuera señala el borde real de la pantalla donde está la barra (Compartir queda a la derecha). */
.inst-manita.m-arriba { right: 13%; top: calc(4px + env(safe-area-inset-top)); animation: inst-toca-arriba 1.2s ease-in-out infinite; }
.inst-manita.m-abajo { right: 13%; bottom: calc(4px + env(safe-area-inset-bottom)); animation: inst-toca-abajo 1.2s ease-in-out infinite; }
.inst-manita.m-abajo-centro { left: 50%; margin-left: -22px; bottom: calc(4px + env(safe-area-inset-bottom)); animation: inst-toca-abajo 1.2s ease-in-out infinite; }
.inst-ayuda.ib-ipad .inst-manita.m-arriba { right: 9%; }

/* Ayuda de iOS: pasos y minipantallas */
.inst-ayuda .inst-hoja { width: min(360px, 100%); max-height: calc(100dvh - 120px); overflow-y: auto; padding-top: 14px; }
.inst-ayuda .inst-pasos { margin-top: 30px; }
.inst-pasos li.ib-paso1, .inst-pasos li { display: block; }
.ib-fila { display: flex; align-items: center; gap: 10px; }
.inst-icono svg { display: block; }
.ib-baja { position: relative; }
.ib-baja i { position: absolute; right: -4px; bottom: -6px; font-style: normal; font-weight: 800; font-size: 15px; color: #5B3A24; background: #F5B6A7; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; text-align: center; }
.ib-texto-azul { width: auto !important; padding: 0 8px; color: #007AFF; font-weight: 700; font-size: 14px; }
.ib-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ib-cel { margin: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px; height: 128px; background: #fff; border: 3px solid #5B3A24; border-radius: 18px; position: relative; }
.ib-cel.ib-uno { height: 112px; margin-top: 10px; }
.ib-cel figcaption { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: 13px; font-weight: 700; }
.ib-dos { margin-bottom: 22px; }
.ib-pagina { flex: 1; border-radius: 10px; background: #DCEBC8; display: flex; align-items: center; justify-content: center; }
.ib-barra { display: flex; align-items: center; gap: 4px; }
.ib-pill { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 3px 4px 3px 8px; background: #EDEDF0; border-radius: 999px; }
.ib-url { font-size: 10px; color: #3C3C43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-puntos { font-weight: 800; font-size: 14px; color: #1C1C1E; padding: 0 2px; }
.ib-meta { position: relative; display: inline-flex; padding: 2px; border-radius: 50%; background: #FFE68A; box-shadow: 0 0 0 3px #FFE68A80; }
.ib-dedo { position: absolute; left: 50%; font-size: 22px; line-height: 1; margin-left: -11px; pointer-events: none; }
.ib-arriba .ib-dedo { top: 25px; animation: inst-toca-arriba 1.2s ease-in-out infinite; }
.ib-abajo .ib-dedo { bottom: 27px; animation: inst-toca-abajo 1.2s ease-in-out infinite; }
.ib-herr { justify-content: space-around; padding: 4px 6px; background: #F2F2F5; border-radius: 10px; color: #007AFF; font-size: 15px; font-weight: 700; }
.ib-ancho .ib-barra { padding: 0 2px; color: #007AFF; font-weight: 700; }
.ib-nota { margin: 2px 0 0; font-size: 14px; font-weight: 600; text-align: center; }
@keyframes inst-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes inst-sale { to { opacity: 0; transform: translateY(14px); } }
@keyframes inst-toca-abajo { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes inst-toca-arriba { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) {
  .inst-aviso, .inst-aviso.fuera, .inst-manita, .ib-dedo { animation: none !important; }
}