/* Aviso para instalar la app (Actualizaciones 21, 23, 24 y 25): uno solo, el mismo en la web (torneos.raqueteo.com) y en
   marcador.raqueteo.com (entrada, panel en el teléfono y Marcador). Componente: public/js/comun/aviso-instalar.js.
   Todo con su propio estilo (no depende de la hoja de cada app). */
.pi-capa, .pi-capa * { box-sizing: border-box; }
.pi-capa { font-family: 'Jakarta', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.4; text-align: left; }
.pi-capa button { font-family: inherit; }
.pi-capa { position: fixed; inset: 0; z-index: 900; background: rgba(0, 20, 32, .62); display: flex; align-items: flex-end; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); animation: pi-aparecer .25s ease; }
.pi-caja { position: relative; width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: #00263a;
  border-radius: 24px; padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: pi-subir .32s cubic-bezier(.2,.8,.2,1); }
.pi-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef2f5; color: #4a6070; display: grid; place-items: center; cursor: pointer; }
.pi-x svg { width: 18px; height: 18px; }
.pi-cab { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.pi-icono { flex: none; width: 60px; height: 60px; border-radius: 15px; box-shadow: 0 6px 16px rgba(0,38,58,.25); }
.pi-caja h2 { margin: 0; font-size: 19px; line-height: 1.2; color: #00263a; letter-spacing: -.01em; }
.pi-caja p { margin: 4px 0 0; font-size: 14px; color: #4a6272; line-height: 1.38; }
/* Pasos: número, texto y el dibujo del botón que hay que tocar */
.pi-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pi-pasos li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; background: #f2f6f9; border-radius: 14px; }
.pi-num { width: 28px; height: 28px; border-radius: 50%; background: #bfe000; color: #00263a; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.pi-txt { font-size: 15px; line-height: 1.35; color: #0f2233; }
.pi-txt b { font-weight: 800; color: #00263a; }
.pi-txt small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: #5b7181; }
.pi-ver { display: flex; justify-content: flex-end; }
/* Un dibujo ancho (fila de menú) va debajo del texto */
.pi-pasos li:has(.pi-dib.fila) .pi-ver { grid-column: 2 / -1; justify-content: flex-start; }
.pi-dib { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; border-radius: 12px; padding: 8px 11px; }
.pi-dib svg { width: 21px; height: 21px; flex: none; }
.pi-dibs { display: inline-flex; gap: 6px; }
/* iPhone: azul del sistema sobre gris claro */
.pi-dib.ios { background: #fff; color: #0a84ff; border: 1px solid #dfe3e8; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pi-dib.ios.redondo { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.pi-dib.ios.texto { color: #0a84ff; font-weight: 700; font-size: 16px; background: transparent; border-color: transparent; box-shadow: none; padding: 8px 4px; }
/* Android: gris de Material */
.pi-dib.android { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.pi-dib.android.redondo { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.pi-dib.android.texto { color: #fff; background: #1a73e8; border-color: #1a73e8; border-radius: 999px; padding: 9px 16px; font-weight: 700; }
/* Fila de menú (hoja de Compartir o menú del navegador) */
.pi-dib.fila { min-width: 190px; justify-content: space-between; gap: 14px; padding: 10px 12px; font-weight: 500; color: #111; border-radius: 12px; }
.pi-dib.fila.ios svg { color: #111; }
.pi-dib.fila.android svg { color: #5f6368; }
/* Botones */
/* Botones propios (la misma hoja de estilos en la web, el panel, la entrada y el Marcador) */
.pi-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 10px 16px; border: 1px solid #e1e8ee;
  border-radius: 14px; background: #f2f6f9; color: #00263a; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; text-decoration: none; }
.pi-btn:active { transform: scale(.98); }
.pi-caja .pi-btn.lima { background: #bfe000; border-color: #bfe000; color: #00263a; }
.pi-caja .pi-btn.pi-instalar { min-height: 58px; font-size: 18px; border-radius: 16px; box-shadow: 0 8px 22px rgba(191,224,0,.45); }
.pi-caja .pi-btn.pi-ahora { background: #f2f6f9; border-color: #e1e8ee; color: #00263a; }
.pi-caja .pi-btn.pi-copiar { background: #00263a; border-color: #00263a; color: #fff; }
.pi-caja .pi-btn.pi-copiar svg { width: 20px; height: 20px; color: #bfe000; }
.pi-caja .pi-btn.pi-copiar.ok { background: #e9f7c2; border-color: #c9dd55; color: #3e5600; }
.pi-caja .pi-btn.pi-copiar.ok svg { color: #4b6800; }
.pi-enlace { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid #c8d4de; border-radius: 12px; color: #0f2233; background: #f7f9fb; }
@keyframes pi-aparecer { from { opacity: 0; } }
@keyframes pi-subir { from { transform: translateY(30px); opacity: 0; } }
/* Arriba cuando los botones del navegador están abajo, con una flecha que señala dónde tocar */
.pi-capa.arriba { align-items: flex-start; }
.pi-capa.arriba .pi-caja { animation-name: pi-bajar; }
@keyframes pi-bajar { from { transform: translateY(-30px); opacity: 0; } }
.pi-flecha { position: fixed; z-index: 901; width: 54px; height: 54px; border-radius: 50%; background: #bfe000; color: #00263a; display: grid; place-items: center; font-size: 30px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.35); pointer-events: none; }
.pi-flecha.abajo { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); animation: pi-rebote-abajo 1s ease-in-out infinite; }
.pi-flecha.arriba { top: calc(10px + env(safe-area-inset-top, 0px)); animation: pi-rebote-arriba 1s ease-in-out infinite; }
.pi-flecha.derecha { right: 18px; }
.pi-flecha.centro { left: calc(50% - 27px); }
@keyframes pi-rebote-abajo { 50% { transform: translateY(8px); } }
@keyframes pi-rebote-arriba { 50% { transform: translateY(-8px); } }
@media (max-height: 640px) {
  .pi-cab .pi-icono { width: 48px; height: 48px; border-radius: 12px; }
  .pi-caja { gap: 9px; padding-top: 14px; }
  .pi-pasos li { padding: 8px 10px; }
  .pi-txt { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pi-capa, .pi-caja, .pi-flecha { animation: none !important; } }
/* Dibujos de las barras del navegador (Actualización 23): lo que la persona ve en su teléfono, con el botón que debe
   tocar resaltado en lima. En el iPhone se dibujan las dos formas posibles de la barra de abajo de Safari. */
.pi-barras { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; min-width: 0; }
.pi-opcion { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pi-opcion-txt { font-size: 13px; line-height: 1.35; color: #3d5466; }
.pi-opcion-txt b { font-weight: 800; color: #00263a; }
.pi-nota { font-size: 12.5px; line-height: 1.35; color: #5b7181; }
.pi-nota b { font-weight: 800; color: #00263a; }
.pi-dibujo { display: flex; min-width: 0; }
.pi-barra { display: flex; align-items: center; justify-content: space-around; gap: 4px; width: 100%; max-width: 300px; padding: 5px 8px; border-radius: 16px; background: #f9f9fb; border: 1px solid #d9dfe5; box-shadow: 0 1px 2px rgba(0,0,0,.06); color: #0a84ff; }
.pi-barra i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: inherit; font-style: normal; }
.pi-barra i svg { width: 20px; height: 20px; }
.pi-barra i.toca { background: #bfe000; color: #00263a; box-shadow: 0 0 0 3px rgba(191,224,0,.45); }
.pi-dir { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 17px; background: #eef0f3; color: #1c1c1e; font-size: 13px; font-weight: 600; }
.pi-dir > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Safari compacta (iPhone, Safari 26): atrás, la dirección y los 3 puntos, sueltos. */
.pi-barra.compacta { justify-content: space-between; gap: 6px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.pi-barra .bola { background: #f2f3f5; border: 1px solid #d9dfe5; color: #1c1c1e; }
.pi-barra .bola.toca { background: #bfe000; border-color: #bfe000; color: #00263a; }
.pi-barra.compacta .pi-dir { border: 1px solid #d9dfe5; background: #f2f3f5; }
/* Solo la dirección (cuando Safari esconde los botones al bajar por la página). */
.pi-barra.sola { width: auto; max-width: 220px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.pi-barra.sola .pi-dir { height: 28px; font-size: 12px; padding: 0 14px; border: 1px solid #d9dfe5; box-shadow: 0 0 0 3px rgba(191,224,0,.55); }
.pi-opcion.chico .pi-opcion-txt { font-size: 12.5px; }
/* Chrome del iPhone: Compartir dentro de la dirección, a la derecha. */
.pi-barra.chrome { padding: 5px; }
.pi-barra.chrome .pi-dir { justify-content: space-between; padding: 0 3px 0 14px; }
.pi-barra.chrome .pi-dir i { width: 30px; height: 30px; }
/* Android: Chrome (arriba), Samsung (abajo) y los navegadores de otras apps. */
.pi-barra.android { color: #3c4043; background: #fff; border-color: #dadce0; }
.pi-barra.android .pi-dir { justify-content: flex-start; background: #f1f3f4; color: #202124; }
.pi-cuenta { font-style: normal; flex: none; width: 21px; height: 21px; border: 2px solid currentColor; border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 800; line-height: 1; }
.pi-barra.samsung { justify-content: space-between; }
.pi-barra.samsung i { width: 32px; height: 32px; }
.pi-barra.interna { justify-content: space-between; background: #fff; color: #1c1c1e; }
.pi-barra.interna .pi-dir { background: transparent; font-weight: 700; }
@media (max-height: 700px) {
  /* Teléfonos chicos (ej. iPhone SE): el aviso más compacto para que quepa entero. */
  .pi-cab p { display: none; }
  .pi-caja h2 { font-size: 17px; }
  .pi-pasos li { padding: 7px 9px; gap: 3px 10px; }
  .pi-txt { font-size: 13.5px; }
  .pi-opcion-txt { font-size: 12.5px; }
  .pi-barras { gap: 6px; }
  .pi-barra { padding: 3px 6px; }
  .pi-barra i { width: 30px; height: 30px; }
  .pi-barra i svg { width: 18px; height: 18px; }
  .pi-dir { height: 30px; }
  .pi-dib.ios.redondo, .pi-dib.android.redondo { width: 38px; height: 38px; }
  .pi-dib.fila { padding: 8px 11px; }
  .pi-caja .pi-btn { min-height: 44px; }
}

/* ---------- Aviso para instalar: arte nuevo (Actualización 24) ----------
   Borde lima, pasos en tarjetas con su número y, en el iPhone, el dibujo de cada pantalla con lo que hay que tocar. */
.pi-capa { padding-left: 6px; padding-right: 6px; }
.pi-caja { border: 4px solid #bfe000; border-radius: 28px; padding: 14px 8px 10px; gap: 8px; }
.pi-cab { gap: 12px; padding: 2px 46px 2px 2px; }
.pi-icono { width: 62px; height: 62px; border-radius: 16px; }
.pi-caja h2 { font-size: 21px; line-height: 1.15; font-weight: 800; }
.pi-x { top: 12px; right: 12px; width: 40px; height: 40px; }
.pi-x svg { width: 20px; height: 20px; }
.pi-pasos { gap: 8px; }
.pi-pasos li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 8px; padding: 9px 8px; background: #f6f9fb; border: 1.5px solid #00263a; border-radius: 18px; overflow: hidden; }
.pi-num { width: 32px; height: 32px; font-size: 16px; align-self: start; }
.pi-txt { font-size: 14.5px; line-height: 1.3; align-self: center; }
/* Con dibujo del teléfono: texto a la izquierda, dibujo a la derecha (también al lado de la barra del paso 1). */
.pi-pasos li.con-tel { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 44%); align-items: start; }
.pi-pasos li.con-tel .pi-ver.tel { grid-column: 3; grid-row: 1; justify-content: flex-end; align-self: start; min-width: 0; }
.pi-pasos li.con-tel .pi-txt { align-self: start; padding-top: 5px; }
.pi-pasos li.con-tel .pi-barras { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
.pi-pasos li.con-tel .pi-opcion { flex: 1 1 140px; }
.pi-pasos li.con-tel .pi-barra { max-width: none; padding: 4px 4px; }
.pi-pasos li.con-tel .pi-barra i { width: 28px; height: 28px; }
.pi-pasos li.con-tel .pi-barra i svg { width: 17px; height: 17px; }
.pi-pasos li.con-tel .pi-barra.compacta .pi-dir { font-size: 11px; padding: 0 6px; height: 28px; }
.pi-pasos li.con-tel .pi-opcion-txt { font-size: 12.5px; }
.pi-caja .pi-btn.pi-ahora { background: #fff; border: 1.5px solid #00263a; border-radius: 18px; min-height: 54px; font-size: 18px; }
/* El teléfono dibujado */
.pi-tel { display: flex; flex-direction: column; width: 100%; max-width: 190px; border: 3px solid #121417; border-radius: 16px; background: #fff; color: #1c1c1e; font-size: 9px; line-height: 1.2; overflow: hidden; box-shadow: 0 4px 12px rgba(0,38,58,.18); }
.pi-tel svg { width: 13px; height: 13px; flex: none; }
.pi-tel .toca { box-shadow: 0 0 0 2px #bfe000, 0 0 0 4px rgba(191,224,0,.4); }
.pi-tel.abajo { background: #1c1c1e; color: #fff; padding: 7px 6px 4px; gap: 6px; border-radius: 16px 16px 20px 20px; }
.pi-tel-dir { display: flex; align-items: center; gap: 3px; justify-content: center; padding: 5px 4px; border-radius: 9px; background: #3a3a3c; font-size: 8px; letter-spacing: -.02em; font-weight: 600; min-width: 0; }
.pi-tel-dir > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-tel-dir svg { width: 9px; height: 9px; }
.pi-tel-botones { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }
.pi-tel-botones i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #0a84ff; font-style: normal; }
.pi-tel-botones i.toca { color: #fff; background: rgba(191,224,0,.18); }
.pi-tel-botones svg { width: 15px; height: 15px; }
.pi-tel-raya { align-self: center; width: 46px; height: 3px; border-radius: 3px; background: #fff; margin-top: 2px; }
.pi-tel.hoja { padding: 6px; gap: 6px; border-bottom-width: 0; border-radius: 16px 16px 4px 4px; }
.pi-tel-pag { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pi-tel-pag img { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.pi-tel-pag > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pi-tel-pag b { font-size: 9.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-tel-pag small { font-size: 7.5px; letter-spacing: -.02em; color: #8a8a8e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-tel-pag > i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #eeeef0; color: #8a8a8e; flex: none; }
.pi-tel-pag > i svg { width: 9px; height: 9px; }
.pi-tel-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.pi-app { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; border-radius: 8px; padding: 2px 0; }
.pi-app i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; }
.pi-app.claro i { background: #fff; color: #1c1c1e; border: 1px solid #e3e3e6; }
.pi-app i svg { width: 14px; height: 14px; }
.pi-app small { font-size: 7px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pi-app.toca { box-shadow: 0 0 0 2px #bfe000; background: rgba(191,224,0,.12); }
.pi-tel.lista { padding: 4px 6px; gap: 0; }
.pi-tel.lista > span { display: flex; align-items: center; gap: 6px; padding: 5px 4px; border-bottom: 1px solid #ececef; font-size: 9.5px; white-space: nowrap; overflow: hidden; }
.pi-tel.lista > span:last-child { border-bottom: 0; }
.pi-tel.lista > span.toca { border-radius: 8px; border-bottom-color: transparent; font-weight: 700; margin: 2px 0; font-size: 9px; letter-spacing: -.02em; }
.pi-tel.agregar { padding: 6px; gap: 7px; }
.pi-tel-cab { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pi-tel-cab small { color: #0a84ff; font-size: 8.5px; }
.pi-tel-cab b { flex: 1; min-width: 0; text-align: center; font-size: 8px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-tel-cab small, .pi-tel-cab i { flex: none; }
.pi-tel-cab i { font-style: normal; color: #0a84ff; font-weight: 800; font-size: 10px; padding: 2px 5px; margin-right: 3px; border-radius: 999px; }
@media (max-height: 700px) {
  .pi-caja h2 { font-size: 18px; }
  .pi-icono { width: 50px; height: 50px; border-radius: 13px; }
  .pi-pasos li { padding: 8px; }
  .pi-caja .pi-btn.pi-ahora { min-height: 46px; font-size: 16px; }
}

@media (max-width: 380px) {
  /* Teléfonos angostos: un poco más de lugar para el dibujo, así se lee la dirección completa. */
  .pi-pasos li.con-tel { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 48%); }
  .pi-num { width: 30px; height: 30px; }
  .pi-txt { font-size: 14px; }
}