/* ═══════════════════════════════════════════════════════════════════
   MODO APP — el mobiliario que convierte la web instalada en una app.

   TODO cuelga de `html.modo-app`. Fuera de la app instalada este archivo
   no pinta absolutamente nada: se carga siempre, pero ninguna regla
   encuentra a quién aplicarse. Es lo que permite tocar la apariencia sin
   arriesgar la web, que es donde están casi todos los estudiantes.

   Las medidas de seguridad de iPhone (`env(safe-area-inset-*)`) solo
   devuelven algo si el <meta viewport> lleva `viewport-fit=cover`. Sin
   eso, la barra de pestañas queda DEBAJO del indicador de inicio y no se
   puede tocar la pestaña del medio.
   ═══════════════════════════════════════════════════════════════════ */

html.modo-app {
  --app-alto-tabs: 62px;
  --app-abajo: env(safe-area-inset-bottom, 0px);
  --app-arriba: env(safe-area-inset-top, 0px);
}

/* ── Fuera el mobiliario de navegador ─────────────────────────────── */
html.modo-app .topbar,
html.modo-app .site-footer { display: none !important; }

/* El relleno de abajo lo enciende la propia barra (clase con-tabs), no
   este archivo: las pantallas sin barra no deben llevar hueco. */
html.modo-app.con-tabs body {
  padding-bottom: calc(var(--app-alto-tabs) + var(--app-abajo) + 10px);
}
/* El flotante de WhatsApp se sube para no quedar bajo las pestañas. */
html.modo-app.con-tabs .wa-flotante,
html.modo-app.con-tabs .whatsapp-float,
html.modo-app.con-tabs .ins-app {
  bottom: calc(var(--app-alto-tabs) + var(--app-abajo) + 14px) !important;
}

/* ── La cabecera de la app ────────────────────────────────────────── */
.pi-appbar { display: none; }
html.modo-app .pi-appbar {
  display: flex; align-items: center; gap: 11px;
  position: sticky; top: 0; z-index: 60;
  padding: calc(var(--app-arriba) + 11px) 15px 11px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(12, 18, 34, .10);
}
body.tema-noche .pi-appbar {
  background: rgba(11, 20, 48, .88);
  border-bottom-color: rgba(232, 238, 255, .14);
}

.pi-appbar-volver {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(12, 18, 34, .06); border: 0; color: #0c1222;
}
body.tema-noche .pi-appbar-volver { background: rgba(232, 238, 255, .10); color: #e8eeff; }

.pi-appbar-txt { flex: 1 1 auto; min-width: 0; }
.pi-appbar-hola {
  display: block; font-size: .72rem; font-weight: 700; color: #5b6884;
  letter-spacing: .01em; line-height: 1.2;
}
body.tema-noche .pi-appbar-hola { color: #8fa0c5; }
.pi-appbar-tit {
  display: block; font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.12rem; font-weight: 800; color: #0c1222; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.tema-noche .pi-appbar-tit { color: #e8eeff; }

/* El saldo: en la app es lo único de la barra vieja que se conserva, así
   que se conserva bien visible. */
.pi-appbar-oro {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px; text-decoration: none;
  font: 800 .88rem/1 'JetBrains Mono', ui-monospace, monospace;
  border: 1px solid #d9a406;
  background: linear-gradient(145deg, #ffd257, #f0a800);
  color: #4a3000; box-shadow: 0 2px 7px rgba(217, 164, 6, .32);
}
.pi-appbar-oro b { color: #2e1d00; }
body.tema-noche .pi-appbar-oro {
  border-color: rgba(255, 196, 60, .5); box-shadow: none;
  background: linear-gradient(145deg, rgba(255, 196, 60, .22), rgba(255, 196, 60, .06));
  color: #ffd98a;
}
body.tema-noche .pi-appbar-oro b { color: #ffe9b0; }
.pi-appbar-racha { font-size: .74rem; opacity: .9; }

/* ── La barra de pestañas ─────────────────────────────────────────── */
.pi-tabs { display: none; }
html.modo-app .pi-tabs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 6px 6px calc(var(--app-abajo) + 6px);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(12, 18, 34, .10);
}
body.tema-noche .pi-tabs {
  background: rgba(11, 20, 48, .94);
  border-top-color: rgba(232, 238, 255, .14);
}
/* En pantalla ancha no se estira de lado a lado: una barra de pestañas de
   1400 px de ancho no se parece a ninguna app. */
@media (min-width: 620px) {
  html.modo-app .pi-tabs {
    left: 50%; right: auto; transform: translateX(-50%); width: 430px;
    border-radius: 22px 22px 0 0; border: 1px solid rgba(12, 18, 34, .10); border-bottom: 0;
  }
}

.pi-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px; border-radius: 14px; text-decoration: none;
  color: #5b6884; transition: color .16s ease, background .16s ease;
  -webkit-tap-highlight-color: transparent;
}
body.tema-noche .pi-tab { color: #8fa0c5; }
.pi-tab-ico { display: grid; place-items: center; height: 22px; }
.pi-tab-txt {
  font-size: .655rem; font-weight: 800; letter-spacing: .01em;
  white-space: nowrap;
}
.pi-tab.on { color: #0a9e52; background: rgba(10, 158, 82, .11); }
body.tema-noche .pi-tab.on { color: #1fe374; background: rgba(31, 227, 116, .13); }
/* La activa da un saltito al llegar: es la señal de «estás aquí». */
.pi-tab.on .pi-tab-ico { animation: pi-tab-brinca .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pi-tab-brinca {
  0%   { transform: translateY(3px) scale(.9); }
  60%  { transform: translateY(-3px) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}
.pi-tab:active { transform: scale(.92); }

/* ── El pulso de la app ───────────────────────────────────────────── */
/* La página entra deslizándose: es la diferencia entre «cargó una web» y
   «cambié de pantalla». */
html.modo-app .page-content { animation: pi-app-entra .34s cubic-bezier(.22, .9, .3, 1); }
@keyframes pi-app-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Todo lo tocable se hunde bajo el dedo. Sin esto, tocar en una app se
   siente muerto: no hay cursor que dé la pista, solo el tacto. */
html.modo-app .card,
html.modo-app .btn,
html.modo-app .hub-carta,
html.modo-app .isla:not(.cerrada),
html.modo-app .mt-ir { transition: transform .12s ease; }
html.modo-app .card:active,
html.modo-app .btn:active,
html.modo-app .hub-carta:active,
html.modo-app .isla:not(.cerrada):active,
html.modo-app .mt-ir:active { transform: scale(.972); }

/* En una app no se selecciona el texto del mobiliario ni rebota la página
   al final, que son los dos gestos que delatan al navegador. */
html.modo-app .pi-tabs,
html.modo-app .pi-appbar { user-select: none; -webkit-user-select: none; }
html.modo-app body { overscroll-behavior-y: contain; }

@media (prefers-reduced-motion: reduce) {
  html.modo-app .page-content,
  .pi-tab.on .pi-tab-ico { animation: none !important; }
  html.modo-app .card:active,
  html.modo-app .btn:active,
  html.modo-app .hub-carta:active { transform: none; }
}