/* Friends App · Momentos · estilos de móvil optimizados.
   Misma cascada que los archivos anteriores; mantiene el orden original.
   PC intacto: cada sección conserva sus media queries. */

/* ---- momentos-publish-mobile.css ---- */
/* Friends · Publicar Momentos. Únicamente interfaz móvil.
   Componente existente + lógica de publicación intacta. */
.bf-publish-mobile-title { display: none; }
@media (max-width: 899px) {
  body.bf-page-feeds .create-overlay.active {
    background: rgba(20, 20, 22, .40) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    backdrop-filter: blur(7px) !important;
  }
  body.bf-page-feeds .create-sheet.create-sheet--feed-pro.create-sheet--moment-production {
    inset: auto 0 0 0 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(84dvh, 740px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(24, 24, 27, .055) !important;
    border-bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -16px 50px rgba(12, 12, 14, .07) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translate3d(0, 103%, 0) !important;
    transition: transform .38s cubic-bezier(.22,1,.36,1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.bf-page-feeds .create-sheet.create-sheet--feed-pro.create-sheet--moment-production.open {
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-modal-frame {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(84dvh, 740px) !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .sheet-handle,
  body.bf-page-feeds .create-sheet--moment-production .create-kicker,
  body.bf-page-feeds .create-sheet--moment-production .create-subtitle,
  body.bf-page-feeds .create-sheet--moment-production .create-card-head,
  body.bf-page-feeds .create-sheet--moment-production .create-media-efficiency,
  body.bf-page-feeds .create-sheet--moment-production .create-modal-options-column,
  body.bf-page-feeds .create-sheet--moment-production .bf-publish-desktop-title,
  body.bf-page-feeds .create-sheet--moment-production .create-primary-hint,
  body.bf-page-feeds .create-sheet--moment-production .media-preview-meta,
  body.bf-page-feeds .create-sheet--moment-production .media-order-badge,
  body.bf-page-feeds .create-sheet--moment-production .media-order-controls {
    display: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .bf-publish-mobile-title { display: inline !important; }
  body.bf-page-feeds .create-sheet--moment-production .create-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 24px 24px 16px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-title-wrap { display: block !important; }
  body.bf-page-feeds .create-sheet--moment-production .create-title,
  body.bf-page-feeds .create-sheet--moment-production .create-title span {
    margin: 0 !important;
    font-size: 23px !important;
    font-weight: 780 !important;
    line-height: 1.14 !important;
    letter-spacing: -.04em !important;
    color: #171717 !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-close {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 1px solid rgba(26, 27, 31, .035) !important;
    border-radius: 50% !important;
    background: #f3f3f3 !important;
    box-shadow: none !important;
    color: #4f4f4f !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-modal-content {
    display: block !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 0 24px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-modal-media-column,
  body.bf-page-feeds .create-sheet--moment-production .create-section-card--media {
    width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 76px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(23, 23, 29, .045) !important;
    border-radius: 16px !important;
    background: #f7f7f7 !important;
    box-shadow: none !important;
    transform: none !important;
    color: #202020 !important;
    text-align: left !important;
    -webkit-tap-highlight-color: transparent;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone:active {
    background: #ededed !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-primary-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 35px !important;
    width: 35px !important;
    height: 35px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #ededed !important;
    color: #575757 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-primary-copy {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-primary-text {
    font-size: 14px !important;
    font-weight: 730 !important;
    line-height: 1.3 !important;
    letter-spacing: -.018em !important;
    color: #242424 !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-media-preview {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 9px !important;
    margin: 14px 0 0 !important;
    width: 100% !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-media-preview:not(.has-items) {display: none !important;}
  body.bf-page-feeds .create-sheet--moment-production .media-preview-item {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f3f3f3 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .media-preview-visual,
  body.bf-page-feeds .create-sheet--moment-production .media-preview-item img,
  body.bf-page-feeds .create-sheet--moment-production .media-preview-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .media-remove {
    top: 6px !important;
    right: 6px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.95) !important;
    color: #252525 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.12) !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-modal-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 18px 24px calc(20px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-publish-summary {
    display: none !important;
    color: #555555 !important;
    text-align: center !important;
    font-size: 12px !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-publish-summary.is-error,
  body.bf-page-feeds .create-sheet--moment-production .create-publish-summary.has-warning { display: block !important; }
  body.bf-page-feeds .create-sheet--moment-production .publish-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 96px !important;
    max-width: 160px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid #242424 !important;
    border-radius: 11px !important;
    background: #242424 !important;
    color: #fff !important;
    font-size: 0 !important;
    font-weight: 680 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  body.bf-page-feeds .create-sheet--moment-production .publish-btn::before {
    content: "Publicar";
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 680 !important;
    letter-spacing: -.01em;
  }
  body.bf-page-feeds .create-sheet--moment-production .publish-btn[aria-busy="true"]::before { content: "Publicando…"; }
  body.bf-page-feeds .create-sheet--moment-production .publish-btn > * { display: none !important; }
  body.bf-page-feeds .create-sheet--moment-production .publish-btn:disabled {
    background: #f1f1f1 !important;
    color: #9b9b9b !important;
    border-color: #e9e9e9 !important;
    box-shadow: none !important;
  }
  /* Igual que Ubicación: iconografía, escala de controles y grises neutros. */
  body.bf-page-feeds .create-sheet--moment-production .create-close svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2 !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-primary-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.8 !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone.is-compact {
    min-height: 66px !important;
    padding: 11px 14px !important;
    background: #f7f7f7 !important;
    border-color: rgba(23, 23, 29, .045) !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone.is-compact .create-primary-icon {
    flex: 0 0 35px !important;
    width: 35px !important;
    height: 35px !important;
    background: #ededed !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .publish-btn:not(:disabled):active {
    background: #363636 !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-publish-summary.is-error,
  body.bf-page-feeds .create-sheet--moment-production .create-publish-summary.has-warning {
    align-self: stretch !important;
    line-height: 1.4 !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-media-preview.has-items {
    margin-top: 12px !important;
  }

}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  body.bf-page-feeds .create-sheet.create-sheet--moment-production { transition-duration: .01ms !important; }
}

/* Paleta monocroma del modal Ubicación. Cubre estados heredados de Momentos
   que todavía usaban naranja/rosa (hover, foco, error y reordenación). */
@media (max-width: 899px) {
  body.bf-page-feeds .create-sheet--moment-production {
    --publish-ink: #242424;
    --publish-gray: #646464;
    --publish-muted: #f7f7f7;
    --publish-line: #e6e6e6;
    accent-color: #4a4a4a;
  }

  body.bf-page-feeds .create-sheet--moment-production .create-modal-frame,
  body.bf-page-feeds .create-sheet--moment-production .create-modal-header,
  body.bf-page-feeds .create-sheet--moment-production .create-modal-content,
  body.bf-page-feeds .create-sheet--moment-production .create-modal-footer {
    background: #fff !important;
    background-image: none !important;
  }

  body.bf-page-feeds .create-sheet--moment-production .create-dropzone,
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone.is-compact,
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone:hover,
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone:focus-within,
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone:active,
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone.drag-over {
    background: var(--publish-muted) !important;
    background-image: none !important;
    border: 1px solid var(--publish-line) !important;
    box-shadow: none !important;
    color: var(--publish-ink) !important;
    transform: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone:is(:hover,:active,:focus-within) {
    background: #eeeeee !important;
    border-color: #d9d9d9 !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone:focus-within {
    outline: 2px solid #777 !important;
    outline-offset: 2px !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-primary-icon,
  body.bf-page-feeds .create-sheet--moment-production .create-dropzone.is-compact .create-primary-icon {
    background: #ededed !important;
    background-image: none !important;
    color: #555 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-primary-text {
    color: var(--publish-ink) !important;
  }

  body.bf-page-feeds .create-sheet--moment-production .publish-btn,
  body.bf-page-feeds .create-sheet--moment-production .publish-btn:not(:disabled):hover,
  body.bf-page-feeds .create-sheet--moment-production .publish-btn:not(:disabled):active,
  body.bf-page-feeds .create-sheet--moment-production .publish-btn:focus-visible {
    background: var(--publish-ink) !important;
    background-image: none !important;
    border-color: var(--publish-ink) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .publish-btn:disabled,
  body.bf-page-feeds .create-sheet--moment-production .publish-btn:disabled:hover {
    background: #ededed !important;
    background-image: none !important;
    border-color: #e6e6e6 !important;
    color: #999 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .publish-btn:focus-visible {
    outline: 2px solid #777 !important;
    outline-offset: 2px !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .create-publish-summary,
  body.bf-page-feeds .create-sheet--moment-production .create-publish-summary.is-error,
  body.bf-page-feeds .create-sheet--moment-production .create-publish-summary.has-warning,
  body.bf-page-feeds .create-sheet--moment-production .media-preview-item.has-error .media-preview-state {
    color: var(--publish-gray) !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .media-preview-item.drag-over {
    outline: 2px solid #8a8a8a !important;
    outline-offset: 2px !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .media-preview-item.has-error {
    border-color: #8b8b8b !important;
  }
  body.bf-page-feeds .create-sheet--moment-production .media-preview-visual,
  body.bf-page-feeds .create-sheet--moment-production .media-preview-item.is-optimizing .media-preview-visual {
    background-color: #efefef !important;
  }
}

/* ---- momentos-edge-mobile.css ---- */
/* Friends App · Momentos · full bleed móvil (aislado de escritorio y modales)
   Mantener esta única capa al final de las hojas de Momentos para evitar
   parches repetidos entre momentos-base, momentos-native y momentos.css. */
@media (max-width: 899px) {
  html:has(body.bf-page-feeds),
  body.bf-page-feeds {
    background: #fff !important;
    background-image: none !important;
    overflow-x: clip !important;
  }

  body.bf-page-feeds > .feed {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 110px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  body.bf-page-feeds .feed-stories {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #f2f2f2 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.bf-page-feeds .feed-posts,
  body.bf-page-feeds main.feed-posts {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 125px !important;
    gap: 0 !important;
    align-items: stretch !important;
    background: #fff !important;
  }

  /* Neutraliza reglas heredadas de gran especificidad (html body .post...). */
  html body.bf-page-feeds .feed-posts > article.post,
  html body.bf-page-feeds .feed-posts > article.post.post--with-media {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #ededed !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  body.bf-page-feeds .feed-posts > article.post .post-media,
  body.bf-page-feeds .feed-posts > article.post .post-media-track,
  body.bf-page-feeds .feed-posts > article.post .post-media-item {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
  }
  body.bf-page-feeds .feed-posts > article.post .post-media-item {
    min-width: 100% !important;
    clip-path: none !important;
  }
  body.bf-page-feeds .feed-posts > article.post .post-media-item img,
  body.bf-page-feeds .feed-posts > article.post .post-media-item video {
    border-radius: 0 !important;
    clip-path: none !important;
  }
  body.bf-page-feeds .feed-posts > article.post .post-media-overlay {
    border-radius: 0 !important;
  }
  body.bf-page-feeds .feed-posts > article.post .post-actions {
    box-sizing: border-box !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  /* El aviso para invitados y el indicador de paginación siguen en el flujo. */
  body.bf-page-feeds .feed-login-gate,
  body.bf-page-feeds .bf-feed-sentinel { box-sizing: border-box; max-width: 100%; }
}

/* ---- momentos-icons-mobile.css ---- */
/* Friends · acciones de Momentos móvil · iconos de la misma familia que cabecera.
   Dibujo separado para mantener los iconos históricos en escritorio.
   No afecta a los modal sheets, historias ni cabecera global. */
body.bf-page-feeds .feed-posts > article.post .bf-moment-icon-mobile {
  display: none !important;
}

@media (max-width: 899px) {
  body.bf-page-feeds .feed-posts > article.post .like-btn > svg.icon-heart,
  body.bf-page-feeds .feed-posts > article.post .comment-btn > svg.icon-comment {
    display: none !important;
  }

  /* No modificar el icono de los items del desplegable ni sus eventos. */
  html body.bf-page-feeds .feed-posts > article.post .post-actions
    :is(.like-btn, .comment-btn, .post-owner-menu-trigger) > .bf-moment-icon-mobile {
    display: block !important;
    flex: 0 0 27px !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.15 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body.bf-page-feeds .feed-posts > article.post .post-actions
    :is(.like-btn, .comment-btn, .post-owner-menu-trigger) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #151515 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
  }

  html body.bf-page-feeds .feed-posts > article.post .post-actions
    :is(.like-btn, .comment-btn, .post-owner-menu-trigger):is(:hover,:active,[aria-expanded="true"]) {
    background: transparent !important;
    box-shadow: none !important;
  }
  html body.bf-page-feeds .feed-posts > article.post .post-actions
    :is(.like-btn, .comment-btn, .post-owner-menu-trigger):active { opacity: .65 !important; }
  html body.bf-page-feeds .feed-posts > article.post .post-actions
    :is(.like-btn, .comment-btn, .post-owner-menu-trigger):focus-visible {
    outline: 2px solid #858585 !important;
    outline-offset: -2px !important;
    border-radius: 8px !important;
  }

  /* La reacción se pinta únicamente cuando la confirma el estado 'liked'. */
  html body.bf-page-feeds .feed-posts > article.post .post-actions .like-btn.liked {
    color: #ef334b !important;
  }
  html body.bf-page-feeds .feed-posts > article.post .post-actions .like-btn.liked > .bf-moment-heart {
    fill: #ef334b !important;
    stroke: #ef334b !important;
  }

  /* Opciones (···): mismo tamaño que Like y Comentarios, sin icono duplicado. */
  html body.bf-page-feeds .feed-posts > article.post .post-actions
    .post-owner-menu-trigger > .bf-moment-options-dots {
    display: block !important;
    flex: 0 0 27px !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    color: inherit !important;
    fill: currentColor !important;
    stroke: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body.bf-page-feeds .feed-posts > article.post .post-action-group {
    column-gap: 3px !important;
    row-gap: 0 !important;
    grid-template-columns: 40px max-content 40px max-content !important;
    align-items: center !important;
  }
  html body.bf-page-feeds .feed-posts > article.post .post-action-group
    :is(.like-count, .comment-count) {
    min-width: 14px !important;
    width: auto !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: start !important;
  }
  html body.bf-page-feeds .feed-posts > article.post .post-action-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 40px !important;
  }
}

/* CONTADORES DE REACCIONES UNIFICADOS (solo móvil)
   El botón del total de likes heredaba color y peso distintos de la cifra
   de comentarios. Igualar ambos sin alterar su comportamiento interactivo. */
@media (max-width: 899px) {
  html body.bf-page-feeds .feed-posts > article.post .post-actions .post-action-group
    :is(button.like-count.like-count-btn, .comment-count) {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    font-style: normal !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    text-shadow: none !important;
    font-variant-numeric: tabular-nums !important;
  }
}

/* ---- momentos-likes-mobile.css ---- */
/* Friends App · Me gusta · vista móvil.
   Comparte escala, paleta y sheet inferior con Publicar / Ubicación.
   Aislado por data-variant: no modifica otros modales ni el escritorio. */
@media (max-width: 899px) {
  body.bf-page-feeds #uiModalOverlay.ui-modal-overlay:has(+ #uiModal[data-variant="likes"]) {
    background: rgba(20, 20, 22, .40) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    backdrop-filter: blur(7px) !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"].ui-modal {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    transform: translate3d(0, 103%, 0) !important;
    transition: transform .36s cubic-bezier(.22, 1, .36, 1) !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"].ui-modal.is-open {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .ui-modal-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: min(82dvh, 740px) !important;
    margin: 0 !important;
    padding: 24px 20px max(20px, env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #fff !important;
    color: #171717 !important;
    box-shadow: 0 -16px 50px rgba(12, 12, 14, .07) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .ui-modal-card::before,
  body.bf-page-feeds #uiModal[data-variant="likes"] .ui-modal-card::after {
    display: none !important;
    content: none !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .ui-modal-title {
    display: block !important;
    max-width: calc(100% - 48px) !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 1.14 !important;
    font-weight: 780 !important;
    letter-spacing: -.04em !important;
    color: #171717 !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .ui-modal-close {
    top: 22px !important;
    right: 20px !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(26, 27, 31, .035) !important;
    border-radius: 50% !important;
    background: #f3f3f3 !important;
    color: #4f4f4f !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .ui-modal-close svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2 !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .ui-modal-msg {
    display: block !important;
    flex: 0 1 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #696969 !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .ui-modal-actions { display: none !important; }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-list {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    max-height: min(59dvh, 520px) !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-list::-webkit-scrollbar {
    display: none !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-item-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #ededed !important;
    border-radius: 18px !important;
    background: #f7f7f7 !important;
    color: #171717 !important;
    box-shadow: none !important;
    text-align: left !important;
    cursor: pointer !important;
    transform: none !important;
    transition: background .16s ease !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-item-btn:is(:hover, :active) {
    border-color: #e9e9e9 !important;
    background: #f0f0f0 !important;
    transform: none !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-item-btn:focus-visible {
    outline: 2px solid #888 !important;
    outline-offset: 2px !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-avatar {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #e9e9e9 !important;
    box-shadow: none !important;
    object-fit: cover !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 5px !important;
    color: #202020 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-name span {
    min-width: 0 !important;
    color: #202020 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-verified {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-item-arrow { display: none !important; }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid #ededed !important;
    border-radius: 18px !important;
    background: #f7f7f7 !important;
    color: #777 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-retry {
    align-self: center !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid #e9e9e9 !important;
    border-radius: 12px !important;
    background: #f4f4f4 !important;
    color: #222 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-loading {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-loading span {
    display: block !important;
    height: 66px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #f4f4f4 !important;
    animation: bfLikesPulse 1.3s ease-in-out infinite alternate !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-loading span:nth-child(2) { animation-delay: .15s !important; }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-loading span:nth-child(3) { animation-delay: .3s !important; }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-list-sentinel {
    flex: 0 0 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
@keyframes bfLikesPulse { from { opacity: .65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.bf-page-feeds #uiModal[data-variant="likes"].ui-modal,
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-loading span {
    transition: none !important;
    animation: none !important;
  }
}

/* Seguimiento de Me gusta: distribución limpia, independiente de Perfil. */
@media (max-width: 899px) {
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    align-self: stretch !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid #ededed !important;
    border-radius: 18px !important;
    background: #f7f7f7 !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-item-btn {
    display: flex !important;
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-item-btn:is(:hover, :active) {
    border-color: transparent !important;
    background: transparent !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-follow-button {
    display: inline-flex !important;
    grid-column: 2 !important;
    justify-self: end !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 88px !important;
    min-height: 35px !important;
    margin: 0 0 0 auto !important;
    padding: 0 10px !important;
    border: 1px solid #171717 !important;
    border-radius: 11px !important;
    background: #171717 !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    transition: background-color .16s ease, color .16s ease, opacity .16s ease !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-follow-button.is-following {
    background: #fff !important;
    color: #171717 !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-follow-button:disabled {
    opacity: .58 !important;
    cursor: wait !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-follow-button:focus-visible {
    outline: 2px solid #444 !important;
    outline-offset: 3px !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-follow-error {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    color: #666 !important;
    font-size: 11px !important;
    text-align: right !important;
  }
}

/* Buscador Me gusta · solo lupa + campo; sin caja, línea ni color de foco. */
@media (max-width: 899px) {
  body.bf-page-feeds #uiModal[data-variant="likes"] .ui-modal-title {
    margin-bottom: 10px !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search,
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search:focus-within {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 36px !important;
    margin: 0 0 12px !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    color: #666 !important;
    pointer-events: none !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search-icon svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search-input,
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search-input:focus,
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search-input:focus-visible,
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search-input:active {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    color: #222 !important;
    caret-color: #222 !important;
    font-family: inherit !important;
    font-size: 16px !important; /* Impide el zoom automático en Safari iOS. */
    font-weight: 400 !important;
    line-height: 1.25 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search-input::placeholder {
    color: #8b8b8b !important;
    opacity: 1 !important;
  }
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search-input::-webkit-search-cancel-button,
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-search-input::-webkit-search-decoration {
    display: none !important;
  }
}

/* ---- momentos-comments-mobile.css ---- */
/* Friends App · Momentos / Comentarios.
   Único tema móvil para el sheet existente, inspirado en Me gusta y Ubicación.
   No modifica la estructura funcional ni la versión de escritorio. */
@media (max-width: 899px) {
  body.bf-page-feeds #feedCommentsOverlay.comments-overlay {
    background: rgba(20, 20, 22, .40) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    backdrop-filter: blur(7px) !important;
  }

  body.bf-page-feeds #feedCommentsSheet.comments-sheet,
  body.bf-page-feeds #feedCommentsSheet.comments-sheet.open {
    position: fixed !important;
    inset: auto 0 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #fff !important;
    color: #171717 !important;
    box-shadow: 0 -16px 50px rgba(12,12,14,.07) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
    transition: transform .36s cubic-bezier(.22, 1, .36, 1) !important;
  }
  body.bf-page-feeds #feedCommentsSheet.comments-sheet {
    transform: translate3d(0, 103%, 0) !important;
  }
  body.bf-page-feeds #feedCommentsSheet.comments-sheet.open {
    transform: translate3d(0, 0, 0) !important;
  }

  body.bf-page-feeds #feedCommentsSheet .comments-sheet-top {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 24px 20px 17px !important;
    margin: 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.bf-page-feeds #feedCommentsSheet :is(.sheet-handle, .comments-heading-icon, .comments-kicker) {
    display: none !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comments-heading {
    display: block !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comments-heading-copy { min-width: 0 !important; }
  body.bf-page-feeds #feedCommentsSheet #feedCommentsTitle.sheet-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #171717 !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 23px !important;
    font-weight: 780 !important;
    line-height: 1.14 !important;
    letter-spacing: -.04em !important;
    text-align: left !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedCommentsClose.comments-close {
    position: static !important;
    display: grid !important;
    flex: 0 0 34px !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(26,27,31,.035) !important;
    border-radius: 50% !important;
    background: #f3f3f3 !important;
    color: #4f4f4f !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background .16s ease !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedCommentsClose.comments-close svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    fill: none !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedCommentsClose.comments-close:is(:hover, :active) {
    background: #ebebeb !important;
  }

  body.bf-page-feeds #feedCommentsSheet #feedCommentsList.comments-list {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: min(61dvh, 540px) !important;
    margin: 0 !important;
    padding: 0 20px 14px !important;
    border: 0 !important;
    background: #fff !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedCommentsList.comments-list::-webkit-scrollbar { display: none !important; }
  body.bf-page-feeds #feedCommentsSheet #feedCommentsList .comment-item {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #ededed !important;
    border-radius: 18px !important;
    background: #f7f7f7 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedCommentsList .comment-item:last-child {
    border-bottom: 1px solid #ededed !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-profile-link,
  body.bf-page-feeds #feedCommentsSheet .comment-avatar {
    display: block !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-avatar {
    border: 0 !important;
    border-radius: 50% !important;
    background: #e9e9e9 !important;
    box-shadow: none !important;
    object-fit: cover !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px 8px !important;
    margin: 0 !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-name {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: #202020 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-meta {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 7px !important;
    color: #858585 !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-date {
    color: #858585 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-text {
    margin: 5px 0 0 !important;
    color: #505050 !important;
    font-size: 13.5px !important;
    line-height: 1.48 !important;
    font-weight: 400 !important;
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-delete-btn,
  body.bf-page-feeds #feedCommentsSheet .comment-delete-btn.bf-comment-delete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #777 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comment-delete-btn svg { width: 15px !important; height: 15px !important; }

  body.bf-page-feeds #feedCommentsSheet #feedCommentInputWrap.feed-comment-input-wrap {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid #f0f0f0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedCommentInputWrap[hidden],
  body.bf-page-feeds #feedCommentsSheet #feedCommentInputBox[hidden] { display: none !important; }
  body.bf-page-feeds #feedCommentsSheet #feedCommentInputBox.comment-input {
    position: static !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedNewComment {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    max-height: 118px !important;
    padding: 10px 13px !important;
    margin: 0 !important;
    border: 1px solid #ededed !important;
    border-radius: 14px !important;
    background: #f7f7f7 !important;
    color: #202020 !important;
    box-shadow: none !important;
    font: 400 16px/1.35 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    outline: none !important;
    resize: none !important;
    box-sizing: border-box !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedNewComment::placeholder { color: #8b8b8b !important; opacity: 1 !important; }
  body.bf-page-feeds #feedCommentsSheet #feedNewComment:focus {
    border-color: #c5c5c5 !important;
    background: #f7f7f7 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedSendComment {
    display: grid !important;
    flex: 0 0 42px !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: #1b1b1b !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: background .16s ease, opacity .16s ease !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedSendComment::before {
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedSendComment:disabled { opacity: .48 !important; box-shadow: none !important; }
  body.bf-page-feeds #feedCommentsSheet #feedSendComment[hidden] { display: none !important; }
  body.bf-page-feeds #feedCommentsSheet #feedSendComment:focus-visible,
  body.bf-page-feeds #feedCommentsSheet #feedCommentsClose:focus-visible { outline: 2px solid #777 !important; outline-offset: 2px !important; }

  body.bf-page-feeds #feedCommentsSheet #feedCommentsGate.feed-comments-gate {
    flex: 0 0 auto !important;
    margin: 0 20px 12px !important;
    padding: 15px !important;
    border: 1px solid #ededed !important;
    border-radius: 18px !important;
    background: #f7f7f7 !important;
    box-shadow: none !important;
    color: #666 !important;
  }
  body.bf-page-feeds #feedCommentsSheet #feedCommentsGate[hidden] { display: none !important; }
  body.bf-page-feeds #feedCommentsSheet #feedCommentsGate .feed-inline-auth-btn {
    border: 0 !important;
    border-radius: 12px !important;
    background: #202020 !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comments-state {
    display: flex !important;
    flex: 1 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 130px !important;
    padding: 24px 12px !important;
    border: 1px solid #ededed !important;
    border-radius: 18px !important;
    background: #f7f7f7 !important;
    color: #777 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comments-state strong { color: #262626 !important; font-size: 14px !important; font-weight: 700 !important; }
  body.bf-page-feeds #feedCommentsSheet .comments-state > span:last-child { color: #777 !important; font-size: 12px !important; }
  body.bf-page-feeds #feedCommentsSheet .comments-state-icon { display: none !important; }
  body.bf-page-feeds #feedCommentsSheet .comments-spinner {
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #d9d9d9 !important;
    border-top-color: #303030 !important;
    box-shadow: none !important;
  }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  body.bf-page-feeds #feedCommentsSheet.comments-sheet,
  body.bf-page-feeds #feedCommentsSheet.comments-sheet.open {
    transition: none !important;
  }
  body.bf-page-feeds #feedCommentsSheet .comments-spinner { animation: none !important; }
}

/* ---- momentos-doubletap-mobile.css ---- */
/* Friends App · doble toque en fotos de Momentos · solo móvil */
@media (max-width: 899px) {
  body.bf-page-feeds .feed-posts .post .post-media-item {
    position: relative;
  }
  body.bf-page-feeds .feed-posts .post .post-media-item > img {
    touch-action: manipulation;
  }
  body.bf-page-feeds .feed-posts .post .post-media-item > .bf-doubletap-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 85px;
    height: 85px;
    margin: -42.5px 0 0 -42.5px;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transform: scale(.75);
    will-change: transform, opacity;
    animation: bf-doubletap-heart-appear .78s cubic-bezier(.18,.8,.24,1) both;
  }
  body.bf-page-feeds .feed-posts .post .post-media-item > .bf-doubletap-heart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.30));
  }
  body.bf-page-feeds .feed-posts .post .post-media-item > .bf-doubletap-heart path {
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
    animation: bf-doubletap-heart-stroke .38s ease-out both;
  }
}
@keyframes bf-doubletap-heart-appear {
  0%   { opacity: 0; transform: scale(.65); }
  23%  { opacity: 1; transform: scale(1.08); }
  54%  { opacity: 1; transform: scale(1); }
  83%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes bf-doubletap-heart-stroke {
  from { stroke-dashoffset: 95; }
  to   { stroke-dashoffset: 0; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  body.bf-page-feeds .feed-posts .post .post-media-item > .bf-doubletap-heart {
    animation: bf-doubletap-heart-appear .25s ease-out both;
  }
  body.bf-page-feeds .feed-posts .post .post-media-item > .bf-doubletap-heart path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---- momentos-media-static-mobile.css ---- */
/* Friends App · medios del feed como superficies estáticas · solo móvil.
   No afecta a historias, creación de publicaciones, Cuenta ni escritorio. */
@media (max-width: 899px) {
  body.bf-page-feeds .feed-posts .post .post-media-item,
  body.bf-page-feeds .feed-posts .post .post-media-item > img,
  body.bf-page-feeds .feed-posts .post .post-media-item > video {
    -webkit-touch-callout: none !important; /* iOS: menú nativo de guardar/compartir */
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-tap-highlight-color: transparent;
    /* Scroll vertical y deslizamiento del carrusel, sin zoom del contenido. */
    touch-action: pan-x pan-y;
  }

  body.bf-page-feeds .feed-posts .post .post-media-item > img,
  body.bf-page-feeds .feed-posts .post .post-media-item > video {
    display: block;
    max-width: 100%;
    cursor: default;
    -webkit-user-drag: none;
  }

  /* Safari no debe abrir vídeo a pantalla completa ni activar controles al tocarlo.
     El autoplay del feed y el botón de sonido son independientes del elemento. */
  body.bf-page-feeds .feed-posts .post .post-media-item > video {
    pointer-events: none;
  }
}

/* ---- momentos-verified-mobile.css ---- */
/* Friends · verificado nº4 unificado en Momentos · solo móvil. */
body.bf-page-feeds .bf-moment-verified-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
/* PC: conservar exclusivamente los verificados clásicos sin tocar su diseño. */
body.bf-page-feeds .bf-moment-verified-icon { display: none !important; }
@media (min-width: 900px) {
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-name .likes-verified-icon {
    display: none !important;
  }
}

@media (max-width: 899px) {
  /* Mostrar solo los SVG nuevos en las zonas que llevan verificación. */
  body.bf-page-feeds article.post .post-username img.verified-badge,
  body.bf-page-feeds .post-featured-user img.verified-badge,
  body.bf-page-feeds .comment-name img.verified-badge,
  body.bf-page-feeds .story-name > img,
  body.bf-page-feeds #storyViewerBadge,
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-name img.likes-verified {
    display: none !important;
  }

  body.bf-page-feeds .bf-moment-verified-icon,
  body.bf-page-feeds #uiModal[data-variant="likes"] .likes-verified-icon {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    vertical-align: middle !important;
    color: #363636 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.bf-page-feeds .bf-moment-verified-icon[hidden] { display: none !important; }
  /* Medios e historias muestran nombres blancos sobre imágenes oscuras. */
  body.bf-page-feeds .post-media-overlay .bf-moment-verified-icon,
  body.bf-page-feeds .story-viewer .bf-moment-verified-icon {
    color: #fff !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
  }
  body.bf-page-feeds .story-name .bf-moment-verified-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    flex-basis: 14px !important;
  }
}

/* ---- momentos-stats-mobile.css ---- */
/* Friends App | Estadísticas de Momentos
 * Capa de presentación SOLO móvil para el panel existente.
 * Conserva sus métricas, actualizaciones y endpoints originales.
 * Misma escala y paleta que los modales Me gusta y Comentarios.
 */
@media (max-width: 899px) {
  body.bf-page-feeds #feedStatsOverlay.feed-stats-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(20, 20, 22, .40) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    backdrop-filter: blur(7px) !important;
  }
  body.bf-page-feeds #feedStatsOverlay.feed-stats-overlay[hidden] {
    display: none !important;
  }
  body.bf-page-feeds #feedStatsModal.feed-stats-modal {
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: min(88dvh, 780px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #fff !important;
    color: #171717 !important;
    box-shadow: 0 -16px 50px rgba(12, 12, 14, .07) !important;
    overflow: hidden !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: translate3d(0, 20px, 0) !important;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  }
  body.bf-page-feeds #feedStatsOverlay.is-open #feedStatsModal.feed-stats-modal {
    transform: translate3d(0, 0, 0) !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-handle,
  body.bf-page-feeds #feedStatsModal .feed-stats-title-icon,
  body.bf-page-feeds #feedStatsModal .feed-stats-kicker,
  body.bf-page-feeds #feedStatsModal #feedStatsDescription,
  body.bf-page-feeds #feedStatsModal .feed-stats-footer {
    display: none !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-header {
    position: relative !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 20px 15px !important;
    border: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-head {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.bf-page-feeds #feedStatsModal #feedStatsTitle {
    margin: 0 !important;
    padding: 0 !important;
    color: #171717 !important;
    font-size: 23px !important;
    font-weight: 780 !important;
    line-height: 1.14 !important;
    letter-spacing: -.04em !important;
    text-align: left !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-close {
    position: static !important;
    display: grid !important;
    flex: 0 0 34px !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(26, 27, 31, .035) !important;
    border-radius: 50% !important;
    color: #4f4f4f !important;
    background: #f3f3f3 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-close:is(:hover, :active) {
    color: #4f4f4f !important;
    background: #eaeaea !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-close svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 0 20px max(20px, env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: #fff !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-body::-webkit-scrollbar { display: none !important; }
  body.bf-page-feeds #feedStatsModal .feed-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 117px !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid #ededed !important;
    border-radius: 18px !important;
    color: #171717 !important;
    background: #f7f7f7 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-card--featured {
    color: #171717 !important;
    border-color: #ededed !important;
    background: #f7f7f7 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-card--wide {
    grid-column: 1 / -1 !important;
    min-height: 92px !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-card[data-stat="retencion_audiencia"] {
    min-height: 104px !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-icon,
  body.bf-page-feeds #feedStatsModal .feed-stats-card--featured .feed-stats-icon {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #151515 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-icon svg {
    width: 21px !important;
    height: 21px !important;
    fill: none !important;
    stroke: #151515 !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-card-copy,
  body.bf-page-feeds #feedStatsModal .feed-stats-card > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-card span,
  body.bf-page-feeds #feedStatsModal .feed-stats-card--featured span {
    display: block !important;
    margin: 0 !important;
    color: #6c6c6c !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-card strong,
  body.bf-page-feeds #feedStatsModal .feed-stats-card--featured strong,
  body.bf-page-feeds #feedStatsModal .feed-stats-card--wide strong,
  body.bf-page-feeds #feedStatsModal .feed-stats-card[data-stat="retencion_audiencia"] strong {
    display: block !important;
    margin: 6px 0 0 !important;
    color: #171717 !important;
    font-size: 22px !important;
    font-weight: 730 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
    overflow-wrap: anywhere !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-card[data-stat="created_at"] strong {
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: -.01em !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-card-copy small,
  body.bf-page-feeds #feedStatsModal .feed-stats-card--featured .feed-stats-card-copy small {
    display: block !important;
    margin: 6px 0 0 !important;
    color: #777 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }
  /* Esqueleto neutro: sin naranja, rosa, efectos intensos ni tarjeta destacada. */
  body.bf-page-feeds #feedStatsModal .feed-stats-card--skeleton {
    display: grid !important;
    grid-template-columns: 23px minmax(0, 1fr) !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 5px 9px !important;
    min-height: 100px !important;
  }
  body.bf-page-feeds #feedStatsModal :is(.feed-stats-skeleton-icon, .feed-stats-skeleton-line, .feed-stats-skeleton-value) {
    background: #e8e8e8 !important;
    animation: none !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-skeleton-icon {
    grid-row: 1 / -1 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-error {
    min-height: 120px !important;
    padding: 20px 14px !important;
    color: #171717 !important;
    background: #f7f7f7 !important;
    border-radius: 18px !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-error-icon {
    color: #171717 !important;
    background: #eaeaea !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-retry {
    min-height: 36px !important;
    border: 1px solid #171717 !important;
    border-radius: 12px !important;
    background: #171717 !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #feedStatsModal .feed-stats-retry:focus-visible,
  body.bf-page-feeds #feedStatsModal .feed-stats-close:focus-visible {
    outline: 2px solid #777 !important;
    outline-offset: 3px !important;
  }
}

@media (max-width: 359px) {
  body.bf-page-feeds #feedStatsModal .feed-stats-card { padding: 12px !important; }
  body.bf-page-feeds #feedStatsModal .feed-stats-grid { gap: 8px !important; }
  body.bf-page-feeds #feedStatsModal .feed-stats-card strong { font-size: 20px !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  body.bf-page-feeds #feedStatsModal.feed-stats-modal { transition: none !important; }
}

/* ---- momentos-owner-menu-mobile.css ---- */
/* Friends App · Momentos
   Submenú de publicación, exclusivamente móvil.
   Se abre sobre el disparador; conserva el HTML y los handlers existentes.
*/
@media (max-width: 899px) {
  body.bf-page-feeds .feed-posts > article.post .post-action-right,
  body.bf-page-feeds .feed-posts > article.post .post-owner-actions {
    overflow: visible !important;
  }

  body.bf-page-feeds .post-owner-menu {
    position: absolute !important;
    inset: auto 0 calc(100% + 8px) auto !important;
    width: min(185px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform-origin: bottom right !important;
    animation: bfOwnerMenuSlideUp .18s cubic-bezier(.2,.8,.2,1) both !important;
    z-index: 100 !important;
  }

  body.bf-page-feeds .post-owner-menu[hidden] {
    display: none !important;
  }

  body.bf-page-feeds .post-owner-menu .post-owner-menu-item,
  body.bf-page-feeds .post-owner-menu .post-owner-menu-item.post-owner-stats-btn,
  body.bf-page-feeds .post-owner-menu .post-owner-menu-item.post-delete-btn {
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border: 1px solid #e9e9e9 !important;
    border-radius: 10px !important;
    color: #171717 !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.035) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    text-align: left !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color .16s ease, border-color .16s ease !important;
  }

  body.bf-page-feeds .post-owner-menu .post-owner-menu-item svg,
  body.bf-page-feeds .post-owner-menu .post-owner-menu-item.post-owner-stats-btn svg,
  body.bf-page-feeds .post-owner-menu .post-owner-menu-item.post-delete-btn svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    flex: 0 0 15px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body.bf-page-feeds .post-owner-menu .post-owner-menu-item--danger,
  body.bf-page-feeds .post-owner-menu .post-owner-menu-item.post-delete-btn {
    color: #171717 !important;
  }

  body.bf-page-feeds .post-owner-menu .post-owner-menu-item:hover,
  body.bf-page-feeds .post-owner-menu .post-owner-menu-item.post-owner-stats-btn:hover,
  body.bf-page-feeds .post-owner-menu .post-owner-menu-item.post-delete-btn:hover {
    color: #171717 !important;
    background: #f6f6f6 !important;
    border-color: #e5e5e5 !important;
  }

  body.bf-page-feeds .post-owner-menu .post-owner-menu-item:focus-visible {
    outline: 2px solid #555 !important;
    outline-offset: 2px !important;
  }

  @keyframes bfOwnerMenuSlideUp {
    from { opacity: 0; transform: translateY(9px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  body.bf-page-feeds .post-owner-menu {
    animation: none !important;
  }
}

/* Compatibilidad con WebKit anterior a overflow: clip. */
@supports not (overflow: clip) {
  @media (max-width: 899px) {
    body.bf-page-feeds {
      overflow-x: hidden !important;
    }
  }
}


/* ---- Publicar · controles monocromos y aparición condicionada (móvil) ----
   Estado gobernado por updatePublishState(), sin mutar la lógica de subida.
   Sobrescribe únicamente el modal, no los corazones rojos de likes del feed. */
@media (max-width: 899px) {
  body.bf-page-feeds #createSheet {
    --publish-ink: #242424;
    --publish-gray: #646464;
    --publish-muted: #f7f7f7;
    --publish-line: #e6e6e6;
    accent-color: #555;
    color: var(--publish-ink);
  }

  /* En móvil no hay botón ni espacio reservado antes de elegir foto/vídeo. */
  body.bf-page-feeds #createSheet .publish-btn:not(.bf-has-media) {
    display: none !important;
  }
  body.bf-page-feeds #createSheet .create-modal-footer.bf-publish-empty {
    padding-top: 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
  }

  body.bf-page-feeds #createSheet .create-dropzone,
  body.bf-page-feeds #createSheet .create-dropzone:hover,
  body.bf-page-feeds #createSheet .create-dropzone:active,
  body.bf-page-feeds #createSheet .create-dropzone:focus-within,
  body.bf-page-feeds #createSheet .create-dropzone.drag-over,
  body.bf-page-feeds #createSheet .create-dropzone.is-compact {
    background: var(--publish-muted) !important;
    background-image: none !important;
    border-color: var(--publish-line) !important;
    color: var(--publish-ink) !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #createSheet .create-dropzone:active,
  body.bf-page-feeds #createSheet .create-dropzone:hover,
  body.bf-page-feeds #createSheet .create-dropzone:focus-within {
    background: #eee !important;
    border-color: #d9d9d9 !important;
  }
  body.bf-page-feeds #createSheet .create-dropzone:focus-within,
  body.bf-page-feeds #createSheet .publish-btn:focus-visible,
  body.bf-page-feeds #createSheet .create-close:focus-visible {
    outline: 2px solid #777 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #createSheet .create-primary-icon,
  body.bf-page-feeds #createSheet .create-dropzone.is-compact .create-primary-icon {
    background: #ededed !important;
    background-image: none !important;
    color: #555 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #createSheet .create-primary-text,
  body.bf-page-feeds #createSheet .create-media-counter {
    color: var(--publish-ink) !important;
  }
  body.bf-page-feeds #createSheet .media-preview-item,
  body.bf-page-feeds #createSheet .media-preview-visual,
  body.bf-page-feeds #createSheet .media-preview-item.is-optimizing .media-preview-visual {
    background-color: #efefef !important;
    border-color: var(--publish-line) !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #createSheet .media-preview-item.has-error {
    border-color: #888 !important;
    outline-color: #888 !important;
  }
  body.bf-page-feeds #createSheet .media-preview-item.has-error .media-preview-state,
  body.bf-page-feeds #createSheet .create-publish-summary.is-error,
  body.bf-page-feeds #createSheet .create-publish-summary.has-warning {
    color: var(--publish-gray) !important;
    background-image: none !important;
    border-color: #dedede !important;
  }
  body.bf-page-feeds #createSheet .media-preview-item.drag-over {
    outline: 2px solid #888 !important;
    outline-offset: 2px !important;
  }
  body.bf-page-feeds #createSheet .media-remove,
  body.bf-page-feeds #createSheet .media-remove:hover,
  body.bf-page-feeds #createSheet .media-remove:active {
    background: #fff !important;
    color: #262626 !important;
    border-color: #e2e2e2 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #createSheet .create-close,
  body.bf-page-feeds #createSheet .create-close:hover,
  body.bf-page-feeds #createSheet .create-close:active {
    background: #f3f3f3 !important;
    color: #4f4f4f !important;
    border-color: #eee !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #createSheet .publish-btn.bf-has-media:not(:disabled),
  body.bf-page-feeds #createSheet .publish-btn.bf-has-media:not(:disabled):hover,
  body.bf-page-feeds #createSheet .publish-btn.bf-has-media:not(:disabled):active {
    background: #242424 !important;
    background-image: none !important;
    border-color: #242424 !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #createSheet .publish-btn.bf-has-media:disabled {
    background: #ebebeb !important;
    background-image: none !important;
    border-color: #e2e2e2 !important;
    color: #777 !important;
    box-shadow: none !important;
  }
}

/* Friends App · Momentos · confirmar eliminación (solo móvil).
   Estilo compartido por confirmación y avisos de archivos, aislado de otros modales y de PC. */
@media (max-width: 899px) {
  body.bf-page-feeds #uiModalOverlay.ui-modal-overlay:is([data-variant="delete-post"], [data-variant="publish-alert"]) {
    background: rgba(16, 16, 18, .42) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]).ui-modal {
    position: fixed !important;
    inset: auto 0 0 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    transform: translate3d(0, 103%, 0) !important;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1) !important;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]).ui-modal.is-open {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-modal-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #fff !important;
    background-image: none !important;
    color: #171717 !important;
    box-shadow: 0 -10px 35px rgba(0, 0, 0, .045) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-modal-card::before,
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-modal-card::after {
    display: none !important;
    content: none !important;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-modal-title {
    max-width: calc(100% - 48px) !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 1.14 !important;
    font-weight: 780 !important;
    letter-spacing: -.04em !important;
    color: #171717 !important;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-modal-close {
    position: absolute !important;
    top: 22px !important;
    right: 20px !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #4f4f4f !important;
    background: #f3f3f3 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-modal-close svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2 !important;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-modal-msg {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #727272 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-modal-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-btn,
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-btn:hover {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 88px !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border: 1px solid #dedede !important;
    border-radius: 11px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #242424 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: -.01em !important;
    text-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-btn.primary,
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-btn.primary:hover,
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-btn.primary:active {
    border: 1px solid #242424 !important;
    background: #242424 !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-btn:focus-visible,
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]) .ui-modal-close:focus-visible {
    outline: 2px solid #777 !important;
    outline-offset: 2px !important;
  }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  body.bf-page-feeds #uiModal:is([data-variant="delete-post"], [data-variant="publish-alert"]).ui-modal {
    transition: none !important;
  }
}

/* Friends App · Publicar: previsualización nativa dentro del modal.
   Solo móvil. Reemplaza las miniaturas recortadas y evita controles rojos heredados. */
@media (max-width: 899px) {
  body.bf-page-feeds #createSheet .create-media-preview.has-items {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview {
    width: 100%;
    min-width: 0;
    color: #242424;
    font-size: 12px;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 260px; /* Safari anterior a dynamic viewport units */
    height: clamp(168px, 35vh, 318px);
    height: clamp(168px, 35dvh, 318px);
    min-height: 0;
    background: #f5f5f5 !important;
    border: 1px solid #ebebeb !important;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: none !important;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > img,
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-user-drag: none;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > video {
    background: #161616 !important;
    -webkit-touch-callout: default;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > img[hidden],
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > video[hidden],
  body.bf-page-feeds #createSheet .bf-publish-preview-thumb img[hidden] {
    display: none !important;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-fallback {
    padding: 16px;
    font-size: 12px;
    line-height: 1.45;
    color: #777 !important;
    text-align: center;
    background: #f5f5f5 !important;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-fallback[hidden] { display: none !important; }
  body.bf-page-feeds #createSheet .bf-publish-preview-remove,
  body.bf-page-feeds #createSheet .bf-publish-preview-remove:hover,
  body.bf-page-feeds #createSheet .bf-publish-preview-remove:active {
    position: absolute !important;
    top: 9px !important;
    right: 9px !important;
    z-index: 3;
    display: grid !important;
    place-items: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 50% !important;
    background: #fff !important;
    background-image: none !important;
    color: #242424 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-remove svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 9px 2px 0;
    color: #5d5d5d !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-status {
    margin-left: auto;
    color: #858585 !important;
    white-space: nowrap;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-strip {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    margin-top: 12px;
    padding: 0 1px 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-strip::-webkit-scrollbar { display: none; }
  body.bf-page-feeds #createSheet .bf-publish-preview-thumb,
  body.bf-page-feeds #createSheet .bf-publish-preview-thumb:hover,
  body.bf-page-feeds #createSheet .bf-publish-preview-thumb:active {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 57px;
    width: 57px !important;
    height: 57px !important;
    min-height: 57px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 9px !important;
    background: #f4f4f4 !important;
    background-image: none !important;
    color: #555 !important;
    box-shadow: none !important;
    overflow: hidden;
    opacity: 1 !important;
    transform: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-thumb.is-selected,
  body.bf-page-feeds #createSheet .bf-publish-preview-thumb.is-selected:hover {
    border: 2px solid #333 !important;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-thumb:focus-visible,
  body.bf-page-feeds #createSheet .bf-publish-preview-remove:focus-visible {
    outline: 2px solid #666 !important;
    outline-offset: 2px !important;
  }
}
@media (max-width: 899px) and (max-height: 620px) {
  body.bf-page-feeds #createSheet .bf-publish-preview-stage { height: clamp(150px, 29vh, 220px); height: clamp(150px, 29dvh, 220px); }
}


/* Friends · Marco de previsualización fiel al encuadre real del feed móvil.
   Reconoce dimensiones verticales/horizontales sin alterar archivos subidos. */
@media (max-width: 899px) {
  body.bf-page-feeds #createSheet .bf-publish-preview {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-stage {
    flex: 0 0 auto !important;
    width: min(100%, var(--bf-publish-frame-width, 100%)) !important;
    height: auto !important;
    aspect-ratio: var(--bf-publish-frame-ratio, 3 / 4) !important;
    max-height: none !important;
    background: #0a0a0a !important; /* mismo fondo que el marco del feed */
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > img,
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > video {
    background: #0a0a0a !important;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > img[hidden],
  body.bf-page-feeds #createSheet .bf-publish-preview-stage > video[hidden] {
    display: none !important;
  }
  body.bf-page-feeds #createSheet .bf-publish-preview-details,
  body.bf-page-feeds #createSheet .bf-publish-preview-strip {
    align-self: stretch !important;
  }
}
@media (max-width: 899px) and (max-height: 620px) {
  body.bf-page-feeds #createSheet .bf-publish-preview-stage {
    /* En pantallas bajas manda la proporción exacta del feed; no se aplasta. */
    height: auto !important;
  }
}