/* PlayLife · EL MODO APP (6-oct-2026) — y las piezas para instalarla (cuenta.php y app.php).
   Todo lo de la app cuelga de html.modo-app, que marca el guion del <head> (_app.php) antes del primer pintado.
   Fuera de la app instalada no cambia un píxel: la cabecera propia nace con display:none.
   Se carga en las pantallas de _ui.php (junto a app.css) y en la portada (junto a landing.css). */

.barra-app { display: none; }

/* ═══ dentro de la app ═══ */
html.modo-app { overscroll-behavior-y: none; }
html.modo-app body { overscroll-behavior-y: none; -webkit-touch-callout: none; }
html.modo-app .barra, html.modo-app .tabbar { -webkit-user-select: none; user-select: none; }

/* La cabecera propia del acudiente: saludo por la hora + el nombre de la pantalla, en lugar de la marca. */
html.modo-app .con-nav .barra .marca { display: none; }
html.modo-app .con-nav .barra-app { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; }
.barra-app-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 14px; color: var(--sol, #FFD23F);
  background: rgba(255, 210, 63, .14); border: 1.5px solid rgba(255, 210, 63, .35); }
.barra-app-ic .ic { width: 22px; height: 22px; }
.barra-app-txt { display: grid; min-width: 0; line-height: 1.15; }
.barra-app-txt small { font: 500 .8rem Inter, system-ui, sans-serif; color: rgba(255, 255, 255, .74); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-app-txt b { font: 800 1.14rem "Bricolage Grotesque", Inter, sans-serif; color: #fff; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* En las pantallas raíz (Inicio, Padres, Cuenta) la barra inferior ya dice dónde está: sin «volver». */
html.modo-app .app-raiz .barra-volver { display: none; }
/* El saludo por la hora ya va en la cabecera: el amanecer del inicio no lo repite. */
html.modo-app .con-nav .amanecer-dia { display: none; }

/* La barra inferior: pegada al borde y por encima del indicador de inicio del iPhone (safe-area). */
html.modo-app .tabbar { padding-bottom: max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(36, 25, 61, .08); }
html.modo-app .tabbar a[aria-current="page"] .tab-ic { animation: plTab .42s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes plTab { from { transform: scale(.7); } }

/* Entrada suave de cada pantalla. Solo «backwards»: al terminar no queda ningún transform puesto
   (un transform fijo en <main> volvería relativo a él todo lo que va con position: fixed). */
html.modo-app main.contenido { animation: plAppEntra .34s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes plAppEntra { from { opacity: 0; transform: translateY(14px); } }

/* La portada, si se abre dentro de la app: fuera el anuncio de precio, la barra fija de compra, el botón flotante
   del chat y el pie con enlaces al sitio. */
html.modo-app .anuncio, html.modo-app .barra-compra, html.modo-app .wa-flota, html.modo-app .cierre .pie { display: none !important; }
html.modo-app .nav-fila { padding-top: calc(10px + env(safe-area-inset-top)); }
html.modo-app .hero { padding-top: calc(84px + env(safe-area-inset-top)); }

/* ═══ instalar la app: la tarjeta de la cuenta ═══ */
.aviso-estado.aviso-app { background: var(--teal-f, #DDF6F2); cursor: pointer; }
.aviso-app .aviso-ic { background: var(--teal, #12B5A6); color: #fff; }

/* ═══ app.php: la página para mandar por el chat ═══ */
.inst { display: grid; gap: 18px; max-width: 560px; }
.inst-cab { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 26px 18px 22px; }
.inst-icono { width: 96px; height: 96px; border-radius: 22px; border: 3px solid var(--noche, #24193D); box-shadow: var(--sombra, 4px 4px 0 #24193D); background: #fff; overflow: hidden; }
.inst-icono img { display: block; width: 100%; height: 100%; }
.inst-cab h1 { margin: 6px 0 0; }
.inst-cab p { margin: 0; max-width: 40ch; }
.inst-ventajas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.inst-ventajas li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--sol-f, #FFF1C2);
  border: 2px solid var(--noche, #24193D); font: 600 .9rem Fredoka, Inter, sans-serif; }
.inst-ventajas .ic { width: 18px; height: 18px; color: var(--teal-osc, #0A7C72); stroke-width: 3; }
.inst-caja { display: grid; gap: 12px; }
.inst-caja h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.inst-caja h2 .ic { width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: var(--sol, #FFD23F); border: 2px solid var(--noche, #24193D); flex: none; }
.inst-caja > p { margin: 0; }
.inst-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 10px; }
.inst-pasos li { counter-increment: paso; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; line-height: 1.45; }
.inst-pasos li::before { content: counter(paso); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--coral, #FF6B4A);
  color: var(--noche, #24193D); border: 2px solid var(--noche, #24193D); font: 700 1rem Fredoka, Inter, sans-serif; }
.inst-glifo { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0 2px; vertical-align: -7px; border-radius: 7px; background: var(--gris-f, #EEEAF3);
  color: #0A84FF; border: 1.5px solid rgba(36, 25, 61, .25); }
.inst-glifo svg { width: 16px; height: 16px; }
.inst-ojo { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--coral-f, #FFE4DC); border: 2px solid var(--noche, #24193D); font-size: .94rem; }
.inst-qr { justify-self: center; padding: 10px; border-radius: 18px; background: #fff; border: 3px solid var(--noche, #24193D); box-shadow: var(--sombra, 4px 4px 0 #24193D); line-height: 0; }
.inst-qr svg { width: 210px; height: 210px; }
.inst-url { margin: 0; text-align: center; color: var(--suave, #5E5470); }
.inst-url b { color: var(--noche, #24193D); font-size: 1.08rem; word-break: break-all; }
.inst-pie { display: grid; gap: 10px; justify-items: center; text-align: center; }
.inst-pie .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html.modo-app main.contenido, html.modo-app .tabbar a .tab-ic { animation: none !important; }
}