/* Friends App · Cabecera móvil · controlador visual único 2026-10-17.
 * La cabecera PHP es común. Esta capa gobierna exclusivamente <= 899 px,
 * se aplica a Inicio, Momentos, Conecta, Planes, Grupos, Cuenta, Explora,
 * chats y demás páginas que utilizan banana_web_shell_render().
 * NO se cambian las reglas de escritorio ni la navegación inferior.
 */
body.bf-web-page > .bf-web-header-spacer { display: none; }

@media screen and (max-width: 899px) {
  /* Mismo blanco en el área superior de iOS y en la cabecera.
     El fondo sólido elimina el segundo tono que creaban transparencias
     sobre el degradado de cada página. Escritorio permanece igual. */
  :root {
    --bf-mobile-head-height: 68px;
    --bf-mobile-head-inner: 68px;
    --bf-mobile-top-surface: #ffffff;
    background-color: var(--bf-mobile-top-surface);
  }
  html { background-color: var(--bf-mobile-top-surface) !important; }

  /* Espacio reservado en el flujo del documento: no desplaza tarjetas ni
     provoca saltos si cambia el scroll de <body> a un contenedor interno. */
  html body.bf-web-page.bf-web-page > .bf-web-header-spacer {
    display: block !important;
    position: relative !important;
    flex: 0 0 var(--bf-mobile-head-measured, var(--bf-mobile-head-height)) !important;
    width: 100% !important;
    height: var(--bf-mobile-head-measured, var(--bf-mobile-head-height)) !important;
    min-height: var(--bf-mobile-head-measured, var(--bf-mobile-head-height)) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  /* Fixed evita las divergencias de sticky entre Safari, Momentos (body
     scrolleable) y contenedores internos. El spacer ocupa exactamente
     la altura retirada del flujo. Fondo y botones iguales en todos. */
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 1900 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--bf-mobile-head-measured, var(--bf-mobile-head-height)) !important;
    min-height: var(--bf-mobile-head-measured, var(--bf-mobile-head-height)) !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top, 0px) 0 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(30, 32, 38, .075) !important;
    background: var(--bf-mobile-top-surface) !important;
    color: #17171a !important;
    box-shadow: 0 1px 0 rgba(22, 22, 27, .03) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] > .bf-web-header-inner {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: 640px !important;
    height: var(--bf-mobile-head-inner) !important;
    min-height: var(--bf-mobile-head-inner) !important;
    max-height: var(--bf-mobile-head-inner) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    transform: none !important;
    translate: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-location-wrap,
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-location,
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-nav,
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-menu-button {
    display: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-brand {
    display: inline-flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-brand-mark {
    display: grid !important;
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    flex: 0 0 39px !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 13px !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-brand-name {
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    gap: 6px !important;
  }
  /* Explora: siempre junto a comunicaciones. Se conserva el aspecto aprobado
     del menú, independientemente de qué bundle CSS cargue la página. */
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-explore-link {
    display: grid !important;
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    place-items: center !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication {
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 86px !important;
    width: 86px !important;
    min-width: 86px !important;
    height: 44px !important;
    padding: 2px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication > .bf-web-icon-link {
    position: relative !important;
    display: grid !important;
    width: 41px !important;
    height: 38px !important;
    flex: 0 0 41px !important;
    place-items: center !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication::after {
    top: 2px !important;
    left: 2px !important;
    width: 41px !important;
    height: 38px !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication[data-bf-comm-target="notifications"]::after {
    transform: translate3d(41px, 0, 0) scale(1) !important;
  }
  /* Miembros: el avatar está en el dock. Invitados: acceso arriba. */
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-account--desktop-only-on-mobile {
    display: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-account.is-guest {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] :is(a, button):focus-visible {
    outline: 2px solid #59616b !important;
    outline-offset: 2px !important;
  }
  html { scroll-padding-top: calc(var(--bf-mobile-head-height) + 10px); }
  html body.bf-web-page.bf-web-page :target { scroll-margin-top: calc(var(--bf-mobile-head-height) + 10px); }
}

@media screen and (max-width: 680px) {
  :root { --bf-mobile-head-height: calc(68px + env(safe-area-inset-top, 0px)); }
}
@media screen and (min-width: 681px) and (max-width: 899px) {
  :root { --bf-mobile-head-height: calc(70px + env(safe-area-inset-top, 0px)); --bf-mobile-head-inner: 70px; }
}
@media screen and (max-width: 360px) {
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] > .bf-web-header-inner { gap: 4px !important; width: calc(100% - 12px) !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-actions { gap: 4px !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-brand { gap: 5px !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-brand-name { font-size: 17px !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-explore-link { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication { width: 80px !important; min-width: 80px !important; flex-basis: 80px !important; height: 42px !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication > .bf-web-icon-link { width: 38px !important; height: 36px !important; flex-basis: 38px !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication::after { width: 38px !important; height: 36px !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication[data-bf-comm-target="notifications"]::after { transform: translate3d(38px, 0, 0) scale(1) !important; }
}
/* Chat grupal inmersivo: el shell es una columna flex y el teclado modifica
   el viewport. Su cabecera ocupa el propio flujo, sin spacer adicional. */
@media screen and (max-width: 899px) {
  html body.bf-web-page.bf-page-group-chat.gc-chat-immersive > .bf-web-header[data-bf-header] {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    flex: 0 0 var(--bf-mobile-head-measured, var(--bf-mobile-head-height)) !important;
  }
  html body.bf-web-page.bf-page-group-chat.gc-chat-immersive > .bf-web-header-spacer {
    display: none !important;
  }
}


/* Friends App · Identidad móvil 2026.
   Sólo móvil: la cabecera de PC conserva exactamente su marca y estructura.
   El nombre ocupa el centro óptico de la pantalla, no del espacio sobrante.
   El acceso Explora pasa al lado izquierdo para no tapar el wordmark. */
.bf-web-mobile-brand { display: none; }
@media screen and (max-width: 899px) {
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-brand {
    display: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-mobile-brand {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 1;
    width: clamp(78px, 23vw, 112px);
    height: 46px;
    min-width: 0;
    flex: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #090909;
    text-decoration: none;
    transform: translate3d(-50%, -50%, 0) !important;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
  }
  .bf-web-mobile-brand__banana,
  .bf-web-mobile-brand__friends {
    position: absolute;
    inset: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    transform-origin: 50% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  html body.bf-web-page .bf-web-mobile-brand__banana {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: clamp(21px, 6.1vw, 26px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.065em;
    text-align: center;
    white-space: nowrap;
    color: #070707;
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    transition:
      opacity 480ms ease,
      filter 480ms ease,
      transform 620ms cubic-bezier(.28,.76,.25,1);
  }
  html body.bf-web-page .bf-web-mobile-brand__friends {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(2px);
    transform: translate3d(0, 4px, 0) scale(.965);
    transition:
      opacity 440ms ease,
      clip-path 760ms cubic-bezier(.2,.8,.2,1),
      filter 620ms ease,
      transform 760ms cubic-bezier(.18,.88,.3,1);
  }
  html body.bf-web-page .bf-web-mobile-brand.is-friends .bf-web-mobile-brand__banana {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(0,-5px,0) scale(.96);
  }
  html body.bf-web-page .bf-web-mobile-brand.is-friends .bf-web-mobile-brand__friends {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
  /* Navegación con la transición ya completada: mostrar friends. directamente
     desde el primer pintado y sin volver a ejecutar el efecto. */
  html.bf-brand-session-complete body.bf-web-page .bf-web-mobile-brand__banana {
    opacity: 0;
    filter: none;
    transform: translate3d(0, -5px, 0) scale(.96);
    transition: none !important;
  }
  html.bf-brand-session-complete body.bf-web-page .bf-web-mobile-brand__friends {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
    transition: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-actions {
    position: static !important;
    z-index: 2;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-explore-link {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 2;
    transform: translate3d(0,-50%,0) !important;
  }
}
@media screen and (max-width: 380px) {
  /* Invitados tienen un botón de cuenta más: se compacta sólo lo justo
     para evitar colisiones con el título centrado en un iPhone estrecho. */
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-account.is-guest {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication {
    width: 80px !important;
    min-width: 80px !important;
    flex-basis: 80px !important;
    padding: 2px !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication > .bf-web-icon-link {
    width: 38px !important;
    flex-basis: 38px !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication::after { width: 38px !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication[data-bf-comm-target="notifications"]::after {
    transform: translate3d(38px, 0, 0) scale(1) !important;
  }
}
@media screen and (max-width: 360px) {
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication {
    width: 72px !important;
    min-width: 72px !important;
    flex-basis: 72px !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication > .bf-web-icon-link {
    width: 34px !important;
    flex-basis: 34px !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication::after { width: 34px !important; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication[data-bf-comm-target="notifications"]::after {
    transform: translate3d(34px, 0, 0) scale(1) !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-account.is-guest {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bf-web-mobile-brand__banana,
  .bf-web-mobile-brand__friends {
    transition: none !important;
    filter: none !important;
  }
}

/* Friends App · Compartir Momento · solo móvil.
   El símbolo «+» tiene una zona táctil accesible, pero ninguna silueta,
   fondo, borde, sombra ni cápsula visual. Escritorio sigue intacto. */
.bf-web-header .bf-web-create-link { display: none !important; }
@media screen and (max-width: 899px) {
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-create-link {
    display: grid !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 2 !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline-offset: 0;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #151515 !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transform: translate3d(0,-50%,0) !important;
    transition: opacity 150ms ease !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-create-link::before,
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-create-link::after {
    display: none !important;
    content: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-create-link svg {
    display: block;
    width: 27px !important;
    height: 27px !important;
    flex: none;
    stroke: currentColor;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-create-link:is(:active,:hover) {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-create-link:active { opacity: .55; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-create-link:focus-visible {
    outline: 2px solid #73777e !important;
    outline-offset: -2px;
    border-radius: 8px !important;
  }
}
@media screen and (max-width: 360px) {
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-create-link {
    width: 36px !important;
    flex-basis: 36px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bf-web-header .bf-web-create-link { transition: none !important; }
}

/* Oculta únicamente el cristal antiguo de Momentos en la vista móvil.
   Se instala en la capa común para invalidar caché sin editar momentos.php. */
@media screen and (max-width: 899px) {
  html body.bf-web-page.bf-page-feeds > .feed > header.feed-list-heading.plans-list-heading.pg-head {
    display: none !important;
  }
}

/* Friends App · Cabecera móvil · iconografía uniforme (+, corazón, avión 16).
   Los SVG clásicos de escritorio siguen intactos. La disposición móvil usa
   order: -1 en Notificaciones; no modifica el DOM ni los accesos en PC. */
.bf-web-header .bf-web-communication > .bf-web-icon-link > svg.bf-header-icon-mobile {
  display: none !important;
}
@media screen and (max-width: 899px) {
  /* Quitar la cápsula y el indicador rosa heredados; solo iconos. */
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication::before,
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication::after {
    display: none !important;
    content: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication > .bf-web-notification-link {
    order: -1 !important; /* Primero el corazón */
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication > .bf-web-message-link {
    order: 1 !important; /* Después el avión de papel */
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication
    > :is(.bf-web-message-link, .bf-web-notification-link) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #151515 !important; /* Igual que el + */
    transform: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication
    > :is(.bf-web-message-link, .bf-web-notification-link):is(:hover,:active,.is-active) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #151515 !important;
    transform: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication
    > :is(.bf-web-message-link, .bf-web-notification-link):active { opacity: .55; }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication
    > :is(.bf-web-message-link, .bf-web-notification-link):focus-visible {
    outline: 2px solid #73777e !important;
    outline-offset: -2px !important;
    border-radius: 8px !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication
    > :is(.bf-web-message-link, .bf-web-notification-link) > svg:not(.bf-header-icon-mobile) {
    display: none !important;
  }
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication
    > :is(.bf-web-message-link, .bf-web-notification-link) > svg.bf-header-icon-mobile {
    display: block !important;
    width: 27px !important; /* Igual que el + */
    height: 27px !important;
    flex: none !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.15 !important; /* Igual que el + */
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    color: inherit !important;
    opacity: 1 !important;
  }
  /* Conserva los avisos de pendientes, con una paleta neutra. */
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication .bf-web-badge,
  html body.bf-web-page.bf-web-page > .bf-web-header[data-bf-header] .bf-web-communication .bf-web-dot {
    background: #151515 !important;
    border-color: #fff !important;
  }
}