/* Pappitas — App instalable: aviso "Instalar" + guía iPhone. Colores del theme. */
.pa-install {
  position: fixed; z-index: 900; left: 50%; bottom: 24px; width: min(440px, calc(100% - 24px));
  transform: translate(-50%, 140%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center;
  padding: 14px; border-radius: 18px; background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border); box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .35);
  font-family: var(--font, system-ui, sans-serif);
}
.pa-install.show { transform: translate(-50%, 0); }
body.has-mnav .pa-install { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.pa-install-ic { width: 48px; height: 48px; border-radius: 12px; display: block; }
.pa-install-t b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.pa-install-t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; }
.pa-install-a { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.pa-install-a button { font: inherit; font-size: 14px; font-weight: 800; height: 42px; border-radius: 12px; cursor: pointer; }
.pa-install-no { background: var(--bg-app); color: var(--text-secondary); border: 1px solid var(--border); }
.pa-install-yes { background: var(--brand-primary); color: #fff; border: 0; }

.pa-guide-bg {
  position: fixed; inset: 0; z-index: 950; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 15, 20, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.pa-guide-bg.show { opacity: 1; }
.pa-guide {
  width: min(460px, 100%); background: var(--bg-card); color: var(--text-primary); border-radius: 22px 22px 0 0;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: center;
  transform: translateY(40px); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
  font-family: var(--font, system-ui, sans-serif);
}
.pa-guide-bg.show .pa-guide { transform: none; }
@media (min-width: 769px) { .pa-guide-bg { align-items: center; } .pa-guide { border-radius: 22px; } }
.pa-guide-ic { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 12px; display: block; }
.pa-guide h3 { margin: 0 0 14px; font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.pa-guide-p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.pa-guide-steps { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; display: grid; gap: 10px; }
.pa-guide-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; font-size: 14px; line-height: 1.4; }
.pa-guide-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--text-primary); color: var(--bg-card); font-size: 13px; font-weight: 800; }
.pa-guide-k { display: inline-flex; vertical-align: -5px; width: 22px; height: 22px; margin: 0 2px; color: #0a84ff; }
.pa-guide-k svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pa-guide-ok { width: 100%; height: 46px; border: 0; border-radius: 14px; background: var(--brand-primary); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }

/* Mi perfil → línea de estado "con el app cerrada" (dentro del bloque de avisos) */
.pa-push-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 13px; border-radius: 12px;
  background: var(--bg-app); border: 1px solid var(--border); font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.pa-push-line > span:not(.pa-push-ok) { flex: 1 1 200px; min-width: 0; }
.pa-push-line b { color: var(--text-primary); }
.pa-push-line button { flex: none; font: inherit; font-size: 12.5px; font-weight: 800; padding: 7px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); }
.pa-push-line.is-on { border-color: color-mix(in srgb, var(--c-success, #16a34a) 30%, var(--border)); }
.pa-push-ok { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-success, #16a34a); color: #fff; font-size: 12px; font-weight: 900; }
.pa-push-line.is-empty { display: none; }

/* Config Global → Sonido de venta */
.sale-sound { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-app); }
.sale-sound-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--brand-primary); color: #fff; }
.sale-sound-play svg { width: 18px; height: 18px; fill: currentColor; }
.sale-sound-t { flex: 1; min-width: 160px; }
.sale-sound-t b { display: block; font-size: 14px; font-weight: 800; color: var(--text-primary); }
.sale-sound-t small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); word-break: break-all; }
.sale-sound-a { display: flex; gap: 8px; flex-wrap: wrap; }