/* Publicaciones de texto con fondo de color: ocupan todo el ancho de la tarjeta, como las de imagen/video */
article[data-post-id] div.mx-4.my-2.p-8.rounded-xl{margin-left:0!important;margin-right:0!important;margin-top:0!important;margin-bottom:0!important;border-radius:0!important}
/* Feed más fluido: el navegador no pinta las tarjetas lejanas a la pantalla y recuerda su altura real (sin saltos) */
.mb-mmain article[data-post-id]{content-visibility:auto;contain-intrinsic-size:auto 520px}

/* Comentarios: el texto/placeholder del cuadro "Escribe un comentario..." queda centrado verticalmente (también al escribir) */
textarea[placeholder^="Escribe un comentario"],textarea[placeholder^="Escribe una respuesta"]{
  box-sizing:border-box!important;height:auto;min-height:44px;max-height:160px;
  padding-top:12px!important;padding-bottom:12px!important;line-height:20px!important;
  display:block;resize:none;overflow-y:auto;vertical-align:middle;
}

/* Notebooks (1024–1535px): columnas laterales más angostas para que el feed central tenga el ancho de Facebook (~680px). Pantallas ≥1536px quedan igual. */
@media (min-width:1024px) and (max-width:1279px){
  .mb-mmain[data-view="home"]>div.grid{grid-template-columns:260px minmax(0,1fr) 280px!important;gap:16px!important}
  .mb-mmain:not([data-view="home"]):not([data-view="messenger"]):not([data-view="videos"])>div.grid{grid-template-columns:260px minmax(0,1fr)!important;gap:16px!important}
}
@media (min-width:1280px) and (max-width:1535px){
  .mb-mmain[data-view="home"]>div.grid{grid-template-columns:280px minmax(0,1fr) 300px!important;gap:16px!important}
  .mb-mmain:not([data-view="home"]):not([data-view="messenger"]):not([data-view="videos"])>div.grid{grid-template-columns:280px minmax(0,1fr)!important;gap:16px!important}
}

/* Panel derecho del inicio (escritorio): tarjetas sin marco ni fondo (transparentes) y separadas por una línea igual a la del panel izquierdo */
.mb-mmain[data-view="home"]>div.grid>aside.xl\:block .sticky>div.space-y-3>*{background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.mb-mmain[data-view="home"]>div.grid>aside.xl\:block .sticky>div.space-y-3>*:not(:first-child){border-top:1px solid rgba(127,127,127,.3)!important;padding-top:12px!important}

/* Inicio (escritorio): marcos de las tarjetas del feed invisibles (no se quitan, solo transparentes) */
.mb-mmain[data-view="home"] main :is(article[data-post-id],.rounded-2xl.border.bg-card,.rounded-xl.border.bg-card){border-color:transparent!important}
/* Botones de flecha de los sliders: borde invisible */
button[title="Siguiente"],button.mb-prev{border-color:transparent!important}
/* Flecha izquierda del slider de historias */
.mb-prev{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid transparent;background:var(--card,#fff);color:var(--foreground,#111);box-shadow:0 3px 10px rgba(0,0,0,.45);cursor:pointer;display:none;place-items:center;padding:0;z-index:4}
.mb-prev.on{display:grid}
.mb-prev.mb-next{left:auto;right:22px}
@media (max-width:768px){.mb-prev{display:none!important}}

/* Escritorio: enlaces pegados en el cuadro principal de publicar -> tarjeta grande (imagen arriba, sitio y título abajo).
   Los enlaces agregados con el ícono de enlace (compactos) no se tocan. */
@media (min-width:1024px){
  article[data-post-id] .mb-lpbig{border-color:transparent!important;background:rgba(127,127,127,.14)!important;border-radius:10px!important}
  article[data-post-id] .mb-lpbig>div{flex-direction:column!important}
  article[data-post-id] .mb-lpbig>div>div:first-child{width:100%!important;flex:none}
  article[data-post-id] .mb-lpbig>div>div:first-child>div{height:auto!important;aspect-ratio:1.91/1}
  article[data-post-id] .mb-lpbig>div>div:last-child{padding:12px 16px!important}
  article[data-post-id] .mb-lpbig>div>div:last-child>div:first-child span{text-transform:uppercase;font-size:12px;letter-spacing:.2px}
  article[data-post-id] .mb-lpbig p.font-semibold{font-size:17px;line-height:1.3;font-weight:700;margin-top:2px}
  article[data-post-id] .mb-lpbig p.text-xs,
  article[data-post-id] .mb-lpbig p.text-violet-600{display:none}
}
@media (min-width:1024px){
  article[data-post-id] .mb-lpbig:hover p.font-semibold,article[data-post-id] .mb-lpbig p.font-semibold{color:inherit!important}
}
/* Tarjeta de enlace a todo el ancho de la publicación, sin márgenes laterales ni esquinas redondeadas propias */
@media (min-width:1024px){
  article[data-post-id] div:has(>.mb-lpbig){padding-left:0!important;padding-right:0!important;padding-bottom:0!important}
  article[data-post-id] .mb-lpbig{border-radius:0!important}
  article[data-post-id] .mb-lpbig *{border-radius:0!important}
}


/* El espacio de la barra de scroll queda siempre reservado: la página no se mueve cuando aparece o desaparece */
html{scrollbar-gutter:stable}

/* Barras de scroll discretas: delgadas, sin fondo y de un tono muy cercano al de la página */
*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.16) transparent}
html.dark *,html.dark{scrollbar-color:rgba(255,255,255,.16) transparent}
/* Menús desplegables (tres puntos, cuenta): el lugar del scroll ya está reservado, así que no hay que compensarlo (eso corría la página) */
@supports (scrollbar-gutter: stable){html body[data-scroll-locked]{margin-right:0!important;padding-right:0!important}}
/* Tema claro: tarjetas de publicación del inicio con un gris muy suave para distinguirlas del fondo (el tema oscuro no cambia).
   Se define --card en la tarjeta, así lo heredan también los elementos internos que usan bg-card o var(--card). */
html:not(.dark) .mb-mmain[data-view="home"] article[data-post-id]{--card:#f0f1f3}
/* Tema claro: mismo gris para los sliders del inicio (personas, grupos, páginas, reels); las historias no cambian */
html:not(.dark) .mb-mmain[data-view="home"] .mb-slcard{--card:#f0f1f3}

/* Reproductores de música compartidos desde Musicfy (escritorio): tema claro con degradado del color de la portada, igual que en móvil */
@media (min-width:768px){
  .mb-player{position:relative;overflow:hidden;isolation:isolate}
  html:not(.dark) .mb-player{background:#f3f0f8!important;color:#111!important}
  html:not(.dark) .mb-player::before{content:"";position:absolute;inset:-40px;z-index:-1;background:var(--mbp-img,linear-gradient(135deg,#c4b5fd,#fda4af)) center/cover no-repeat;filter:blur(36px) saturate(1.6);opacity:.6}
  html:not(.dark) .mb-player::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.88))}
  html:not(.dark) .mb-player [style*="9a9a9a"]{color:#555!important}
  html:not(.dark) .mb-player button[style*="color: rgb(255, 255, 255)"],html:not(.dark) .mb-player a[download]{background:rgba(255,255,255,.75)!important;color:#111!important}
  html:not(.dark) .mb-player button[aria-label]{background:#111!important}
  html:not(.dark) .mb-player button[aria-label] svg{fill:#fff!important}
  html:not(.dark) .mb-player [style*="rgb(196, 196, 196)"]{background:rgba(0,0,0,.28)!important}
  html:not(.dark) .mb-player span[style*="rgb(0, 0, 0)"]{color:#fff!important}
}

/* YouTube estilo Facebook (escritorio): video a todo el ancho de la tarjeta, sin bordes laterales */
@media (min-width:768px){article.bg-card .mb-ytc{margin-left:-16px;margin-right:-16px;margin-bottom:-16px;border-width:0;border-radius:0}}