/* ════════════════════════════════════════════════════════════════════
   COP · LA PÁGINA QUE ENTRA DESDE LA DERECHA  (31/08/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: *«quiero crear el diseño de la página de notificaciones, que
   sea una página completa que entra desde el lado derecho»*.

   ⚠⚠ ES UN ARCHIVO Y NO CÓDIGO ADENTRO DE `notificaciones.html` PORQUE
   YA SON DOS PANTALLAS: misiones entra igual desde el 23/08 y tenía la
   animación escrita adentro. Con la segunda, o compartían o empezaban a
   separarse — la historia de la escalera, del cartel de recompensas, del
   interruptor y de la hoja de mercados. Se comparte antes de que se
   separen, no después.

   ⚠ QUÉ ESTÁ ACÁ: cómo ENTRA la página y su cabecera (volver · título ·
   acción). Lo que va ADENTRO es de cada pantalla — misiones pone sus
   misiones y notificaciones sus avisos. Una puerta no sabe qué hay en
   la habitación.

   ⚠⚠ EL «DESDE LA DERECHA» SE APAGA SI EL JUGADOR PIDIÓ QUE NADA SE
   MUEVA. Una pantalla que se desliza entera es exactamente el tipo de
   movimiento que molesta a quien activó `prefers-reduced-motion`, y
   acá no es información: es adorno. La página aparece igual.
   ════════════════════════════════════════════════════════════════════ */

@keyframes copPlEntra{
  from{ transform:translateX(100%); opacity:.6 }
  to  { transform:none; opacity:1 }
}
.cop-pl{ animation:copPlEntra .32s cubic-bezier(.22,.61,.36,1) }
@media (prefers-reduced-motion: reduce){
  .cop-pl{ animation:none }
}

/* ⚠⚠ ACÁ VIVÍA `.cop-pl-head` (la cabecera volver · título · acción) Y SE
   BORRÓ EL 24/09/2026. Franco pidió que Notificaciones tenga el título y la
   flecha en la MISMA posición que Misiones, y Misiones ya usaba
   `cop-cabecera.css`: era la segunda cabecera del sistema, con su propio
   relleno, y la única que la seguía usando era Notificaciones. Ahora las dos
   usan `.cop-cab`. */

/* ── EL AIRE DE ABAJO ────────────────────────────────────────────────
   ⚠ LA BARRA INFERIOR VA FIJA Y TAPA LO ÚLTIMO DE LA LISTA. Es el mismo
   número en las dos pantallas y por eso vive acá: escrito en cada una,
   el día que la barra cambie de alto una queda bien y la otra no. */
.cop-pl-fondo{ padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)) }