/* MusicBook — SOLO móvil (≤767px), estilo app de Facebook. Escritorio NO cambia. Mantiene los colores del proyecto. */
@media (max-width:767px){
  /* Esquinas rectas en tarjetas y bloques del contenido (como en Facebook) */
  .mb-mmain :is(.rounded-2xl,.rounded-xl,.rounded-lg,.rounded-3xl):not(button,img,video,input,textarea,[data-reel],.mb-slider *,.mb-stories *){border-radius:0!important}
  .mb-feedcol>*,.mb-mmain .rounded-2xl.border.bg-card{border-width:0!important;box-shadow:none!important}
  .mb-feedcol video{border-radius:0!important}

  /* Las tarjetas que SÍ van redondeadas: historias, reels, personas, grupos y páginas sugeridas */
  .mb-stories>button{border-radius:12px!important}
  .mb-slider.mb-scrollbar>*{border-radius:12px!important}
  .mb-slider.mb-scrollbar>[data-reel]{border-radius:12px!important}

  /* Cabecera: sin línea, logo y botones más grandes y limpios */
  .mb-mtop{padding:8px 12px!important;border-bottom:0!important}
  .mb-mtop{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:70!important;transform:none!important}
  body:has(.mb-mtop){padding-top:var(--mbh,0px)!important}
  .mb-mtop button{box-shadow:none!important}

  /* Barra inferior: iconos grandes, línea fina arriba, indicador en el activo */
  .mb-mbar{border-top:1px solid rgba(127,127,127,.2)!important}

  /* Botones y cajas: esquinas chicas, como los botones de Facebook */
  .mb-mmain button.rounded-md,.mb-mmain button.rounded-lg,.mb-mmain button.rounded-xl{border-radius:6px!important}

  /* Cada publicación/bloque se separa con una franja de 8px */
  .mb-feedcol>*+*{margin-top:8px!important}

  /* Notificaciones, amigos y mensajes: filas a todo el ancho, sin bordes laterales ni esquinas */
  .mb-mmain [class*="mb-notif"],.mb-mmain [class*="mb-fr"],.mb-mmain [class*="mb-msg"]{border-radius:0}
}

/* Publicaciones a ANCHO COMPLETO (sin márgenes laterales); el texto conserva su margen interno */
@media (max-width:767px){
  .mb-mmain article.bg-card[data-post-id]{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;border-width:0!important;border-radius:0!important;box-shadow:none!important}
  .mb-mmain article.bg-card[data-post-id] video,.mb-mmain article.bg-card[data-post-id] [data-mb-all]{border-radius:0!important;width:100%!important;max-width:100%!important}
  /* Una sola foto: proporción original, no cuadrada */
  .mb-mmain article.bg-card[data-post-id] .grid-cols-1 img.aspect-square{aspect-ratio:auto!important;height:auto!important;max-height:80vh}
}

/* ===== Pantalla de GRUPO en móvil (portada, nombre, botones, pestañas redondeadas) ===== */
@media (max-width:767px){
  .mb-gback,.mb-gh{display:none!important}
  .mb-gm{display:block!important;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .mb-gm-cov{position:relative;height:53vw;max-height:320px;overflow:hidden;background:#111}
  .mb-gm-cov>*:not(.mb-gm-top){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .mb-gm-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 8px}
  .mb-gm-top button{width:40px;height:40px;border-radius:9999px;border:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.45)}
  .mb-gm-name{padding:16px 14px 4px;font-size:28px;line-height:1.15;font-weight:800}
  .mb-gm-sub{display:flex;align-items:center;gap:6px;padding:0 14px;font-size:15px;color:var(--muted-foreground,#888)}
  .mb-gm-sub b{color:inherit;font-weight:700}
  .mb-gm-btns{display:flex;gap:10px;padding:14px}
  .mb-gm-btn{flex:1;height:44px;border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:700;color:inherit}
  .mb-gm-btn.gray{background:rgba(127,127,127,.25)}
  .mb-gm-btn.main{background:linear-gradient(to right,#7c3aed,#f43f5e);color:#fff}
  .mb-gm-pills{display:flex;gap:8px;overflow-x:auto;padding:0 14px 14px;scrollbar-width:none}
  .mb-gm-pills::-webkit-scrollbar{display:none}
  .mb-gm-pill{flex:0 0 auto;height:38px;padding:0 16px;border:0;border-radius:9999px;display:flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:inherit;background:rgba(127,127,127,.22)}
  .mb-gm-pill.on{background:rgba(124,58,237,.3);color:#a78bfa}
  .mb-gm-pill img,.mb-gm-pill>div{border-radius:9999px}
}

/* ===== Ajustes finales móvil: sin bordes visibles, pestañas del perfil como texto, sin márgenes laterales ===== */
@media (max-width:767px){
  /* Sin bordes visibles (se hacen transparentes; el diseño no se mueve) */
  .mb-mmain,.mb-mtop,.mb-mbar,
  .mb-mmain *:not(.mb-stories):not(.mb-stories *){border-color:transparent!important}
  .mb-mmain *{outline-color:transparent}

  /* Pestañas del perfil (Publicaciones, Información, Pistas, Fotos): solo texto, sin fondo ni color de acento */
  .mb-ptabs{background:transparent!important;border:0!important;box-shadow:none!important}
  .mb-ptabs [role=tab]{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;color:var(--muted-foreground,#888)!important;font-weight:600!important}
  .mb-ptabs [role=tab][data-state=active]{color:var(--foreground,inherit)!important;font-weight:800!important}

  /* Sin márgenes laterales: el contenido llega a los bordes de la pantalla */
  .mb-mmain{padding-left:0!important;padding-right:0!important}
  .mb-mmain:not([data-view="home"]):not([data-view="videos"]) main{padding:0!important}
}

/* ===== Contenido multimedia de las publicaciones: de lado a lado (vistas previas, YouTube, música, álbumes, páginas) ===== */
@media (max-width:767px){
  article.bg-card .px-4.pb-4:not(.text-base){padding-left:0!important;padding-right:0!important}
  article.bg-card .px-4.pb-4:not(.text-base) .rounded-xl,article.bg-card .px-4.pb-4:not(.text-base) .rounded-2xl,article.bg-card .px-4.pb-4:not(.text-base) a.block{border-radius:0!important;border-left-width:0!important;border-right-width:0!important}
  article.bg-card [style*="margin: 0px 16px 16px"],article.bg-card [style*="margin: 0px 16px 12px"],article.bg-card [style*="margin: 4px 16px 8px"],
  article.bg-card [style*="margin: 0 16px 16px"],article.bg-card [style*="margin: 0 16px 12px"]{margin-left:0!important;margin-right:0!important;border-radius:0!important}
  article.bg-card [style*="padding: 6px 16px 14px"]{padding-left:0!important;padding-right:0!important}
  article.bg-card [style*="scroll-snap-type"]{padding-left:12px!important;padding-right:12px!important;scroll-padding-left:12px}
  article.bg-card iframe{border-radius:0!important}
}

/* Texto de las publicaciones (incluidas las de solo texto): siempre con margen a los lados */
@media (max-width:767px){
  article.bg-card .px-4.pb-4.text-base{padding-left:16px!important;padding-right:16px!important}
}

/* ===== Texto un poco más grande en móvil (como en Facebook): 16px -> 17px de base ===== */
@media (max-width:767px){
  html{font-size:17px}
}

/* ===== Slider de Reels del feed: mismo tamaño que las tarjetas del slider "Destacados" del perfil (86% del ancho, máx. 330px, 400px de alto) ===== */
@media (max-width:767px){
  .mb-slider.mb-scrollbar[data-n="3"]>[data-reel]{flex:0 0 225px!important;width:225px!important;height:400px!important;border-radius:12px!important}
}

/* ===== Publicación con slider (diálogo de publicar): mismas medidas que las tarjetas de Destacados del perfil (86% del ancho, máx. 330px, 400px de alto). Solo móvil ===== */
@media (max-width:767px){
  .mb-scrollbar[style*="scroll-snap-type: x mandatory"]>*{flex:0 0 min(86%,330px)!important;width:min(86%,330px)!important;height:396px!important}
  .mb-scrollbar[style*="scroll-snap-type: x mandatory"]>*>a:first-child{flex:1 1 auto;min-height:0;aspect-ratio:auto!important;background-size:cover!important;background-position:center!important}
  /* texto más compacto (1 línea) para que la imagen tenga más altura y no se corte */
  .mb-scrollbar[style*="scroll-snap-type: x mandatory"]>*>div{padding:8px 12px!important;flex:0 0 auto}
  .mb-scrollbar[style*="scroll-snap-type: x mandatory"]>*>div p{-webkit-line-clamp:1!important}
  /* barra de desplazamiento invisible en sliders */
  .mb-scrollbar[style*="scroll-snap-type"]{scrollbar-width:none!important;-ms-overflow-style:none}
  .mb-scrollbar[style*="scroll-snap-type"]::-webkit-scrollbar{display:none!important;width:0;height:0}
  /* Imagen de publicaciones con enlace a ancho completo: altura según su proporción, sin recortar a 160px */
  .mb-mmain article.bg-card[data-post-id] a.group .h-40.relative{height:auto!important;background:#000}
  .mb-mmain article.bg-card[data-post-id] a.group .h-40.relative>img{height:auto!important;max-height:75vh;object-fit:contain!important;display:block}
}

/* ===== Reproductores de música (solo móvil): sin esquinas redondeadas, mismo margen arriba y abajo; tema claro con degradado del color de la portada ===== */
@media (max-width:767px){
  .mb-player{border-radius:0!important;padding:14px 12px!important;position:relative;overflow:hidden;isolation:isolate}
  .mb-player>div:first-child{align-self:center!important}
  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}
}

/* ===== Móvil: botonera de Amigos igual a la de Grupos; Fotos del perfil solo en su pestaña; "Administrar" sin cortar ===== */
@media (max-width:767px){
  [role=tablist]:has([id$="-trigger-requests"]){display:flex!important;gap:4px!important;background:transparent!important;padding:0!important;height:auto!important;border-radius:0!important}
  [role=tablist]:has([id$="-trigger-requests"]) [role=tab]{flex:1 1 0!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:12px 8px!important;height:auto!important;font-size:15px!important;font-weight:600!important;color:var(--muted-foreground,#888)!important}
  [role=tablist]:has([id$="-trigger-requests"]) [role=tab][data-state=active]{color:var(--foreground,inherit)!important;font-weight:800!important}
  .mb-fbm .mb-mph{display:none!important}
  div.rounded-2xl.border.bg-card:has(>div>.mb-slider)>div:first-child{padding-right:12px!important}
}

/* ===== Móvil: páginas — sin descripción bajo la portada (solo en la pestaña Información) y botonera como slider ===== */
@media (max-width:767px){
  .mbpd-desc{display:none!important}
  .mbpd-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .mbpd-tabs::-webkit-scrollbar{display:none}
  .mbpd-tabs>*{flex:0 0 auto!important;scroll-snap-align:start}
  /* Mensajes: ocupa exactamente el espacio entre la barra superior e inferior, sin huecos */
  .mbm-grid{position:fixed!important;left:0;right:0;top:var(--mbt,56px);bottom:var(--mbb,58px);height:auto!important;min-height:0!important;gap:0!important;z-index:5;background:var(--background,transparent)}
  .mbm-grid>.mbm-panel{border-radius:0!important;border-left:0!important;border-right:0!important;height:100%}
}

/* ===== Móvil: cabecera de página (avatar redondo, título/seguidores sin cortes, botonera como texto) ===== */
@media (max-width:767px){
  .mbpd-hd{padding:0 14px 8px!important}
  .mbpd-row{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:4px 12px!important;margin-top:-40px!important}
  .mbpd-row>div:first-child{flex:0 0 auto!important;width:88px!important;height:88px!important;border-radius:50%!important;overflow:hidden;font-size:34px!important}
  .mbpd-row>div:first-child img{width:100%!important;height:100%!important;object-fit:cover;border-radius:50%!important}
  .mbpd-row>div:nth-child(2){flex:1 1 0!important;min-width:0!important;padding-top:46px}
  .mbpd-row h1{font-size:clamp(19px,5.6vw,24px)!important;line-height:1.2!important;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
  .mbpd-row>div:nth-child(2) :is(p,span,div):not(h1){white-space:normal;line-height:1.35}
  .mbpd-row>*:nth-child(n+3){flex:0 0 100%!important;display:flex;gap:8px;flex-wrap:wrap}
  .mbpd-tabs{background:transparent!important;border:0!important;box-shadow:none!important;padding:0 8px!important;gap:0!important}
  .mbpd-tabs button{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;height:44px;padding:0 14px!important;font-weight:600;color:var(--muted-foreground)!important}
  .mbpd-tabs button[data-on="1"]{color:var(--foreground)!important;box-shadow:inset 0 -3px 0 currentColor!important}
  .mbpd-tabs::after{content:"";flex:0 0 8px}
}

/* Móvil: avatar de la página siempre redondo (gana a la regla que quita esquinas redondeadas) */
@media (max-width:767px){
  html body .mb-mmain .mbpd-row>*:first-child,
  html body .mb-mmain .mbpd-row>*:first-child *{border-radius:50%!important}
  html body .mb-mmain .mbpd-row>*:first-child{width:88px!important;height:88px!important;overflow:hidden!important}
  html body .mb-mmain .mbpd-row>*:first-child img{width:100%!important;height:100%!important;object-fit:cover!important}
}

/* Móvil: avatares de página (MbPageAvatar, círculo en línea). Si la imagen tiene esquinas transparentes
   (logo con forma cuadrada/octogonal), se amplía un poco para que el círculo quede lleno y se vea redondo. */
@media (max-width:767px){
  html body div[style*="border-radius: 50%"][style*="3px solid"]{background-size:128%!important;background-position:center!important;background-color:transparent!important;border-radius:50%!important;overflow:hidden}
}

/* Móvil: Cumpleaños (layout con barra lateral convertido a cabecera compacta + tarjetas ajustadas).
   Solo móvil; escritorio sin cambios. :has(.mb-bd-primary) limita a Cumpleaños/Eventos (Amigos no lo usa). */
@media (max-width:767px){
  .mb-bd-layout:has(.mb-bd-primary){gap:12px}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-side{position:static;max-height:none;overflow:visible;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:0}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-side h1{flex:0 0 100%;font-size:22px;margin:2px 2px 0}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-search{flex:0 0 100%;width:100%;margin:0;padding:9px 14px;font-size:15px}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-nav{width:auto;flex:0 0 auto;gap:6px;padding:4px 12px 4px 4px;border:1px solid var(--border);border-radius:9999px;font-size:14px}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-nav .mb-bd-ic{width:28px;height:28px}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-nav .mb-bd-ic svg{width:16px;height:16px}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-nav span:nth-child(2){flex:0 0 auto!important}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-primary{flex:0 0 100%;margin:2px 0;padding:10px 14px}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-primary ~ *{display:none}
  .mb-bd-layout:has(.mb-bd-primary) .mb-bd-main{max-width:100%;gap:14px}
  .mb-bd-main .text-2xl{font-size:18px!important;line-height:1.25}
  .mb-bd-main .text-2xl svg{width:22px!important;height:22px!important}
  .mb-bd-main .mb-bd-card{padding:4px 12px;border-radius:14px}
  .mb-bd-main .mb-bd-p{gap:10px;padding:12px 0}
  .mb-bd-main .mb-bd-av{width:48px;height:48px}
  .mb-bd-main .mb-bd-av>*{width:48px!important;height:48px!important}
  .mb-bd-main .mb-bd-top{flex-wrap:wrap;gap:0 8px;font-size:15px}
  .mb-bd-main .mb-bd-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .mb-bd-main .mb-bd-send{margin-top:6px;gap:4px}
  .mb-bd-main .mb-bd-field{padding:9px 14px;font-size:14px}
}

/* ===== Móvil: tarjeta de Spotify sin tapar su barra, botoneras con margen y portada de páginas hasta arriba ===== */
@media (max-width:767px){
  /* Tarjeta "Escuchar en Spotify": misma altura que su caja (max-h-32 = 128px), así no pisa la barra con el link */
  button[aria-label="Reproducir en Spotify"]{height:128px!important;max-height:100%}

  /* Botoneras tipo slider (páginas y perfiles): margen lateral para que no queden pegadas a la izquierda */
  html body .mb-mmain .mbpd-tabs,
  html body .mb-mmain .mb-ptabs,
  html body .mb-fbm .mb-ptabs{padding-left:14px!important;padding-right:14px!important;box-sizing:border-box;scroll-padding-left:14px;scroll-padding-right:14px}

  /* Páginas: la portada llega hasta arriba y la flecha de volver queda sobre la imagen (como en grupos) */
  .mbpd-main{position:relative}
  .mbpd-main>.mbpd-back{position:absolute!important;top:8px;left:10px;z-index:5}
  .mbpd-main>.mbpd-card{margin-top:0!important}
  /* Altura inicial de la barra superior (el JS la corrige al medirla): evita el salto al cargar */
  :root{--mbh:52px}
}

/* Flechas de los sliders ocultas en móvil (escritorio sin cambios) */
@media (max-width:768px){.mb-sarr{display:none!important}}