/* MusicBook — SOLO móvil (≤768px). Escritorio no cambia. */
/* Visor de historias (también al abrirlas desde el perfil): tarjeta vertical 9:16 que llena la pantalla, sin barras negras */
div[style*="aspect-ratio: 9 / 16"] { border-radius: 0 !important; }
div[style*="aspect-ratio: 9 / 16"] video, div[style*="aspect-ratio: 9 / 16"] img { object-fit: cover !important; }
/* Tarjetas de historias del perfil: ver reglas en index.html (tarjeta vertical 9:16) */
.mb-stories video, .mb-stories img { object-fit: cover; }

/* ===== MusicBook móvil estilo app de Facebook (solo ≤767px; escritorio NO cambia) ===== */
@media (max-width:767px){
  /* --- Historias del feed: tarjetas verticales grandes, a ras de pantalla --- */
  .mb-feedcol>div:has(>.mb-stories){padding:10px 0 10px 8px!important}
  .mb-stories{gap:8px!important;padding-bottom:0!important;scrollbar-width:none}
  .mb-stories::-webkit-scrollbar{display:none}
  .mb-stories>button{width:clamp(108px,calc((100cqw - 8px)/3.4),160px)!important;height:auto!important;aspect-ratio:9/16;border-radius:12px!important}

  /* --- Sliders del feed (Reels, Personas, Grupos, Páginas): a ras de pantalla y tarjetas grandes --- */
  div.rounded-2xl.border.bg-card:has(>div>.mb-slider){padding:12px 0 12px 12px!important}
  .mb-slider.mb-scrollbar{gap:8px!important;padding-bottom:2px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mb-slider.mb-scrollbar::-webkit-scrollbar{display:none}
  .mb-slider+button[title="Siguiente"]{display:none!important}
  /* Reels y Personas que quizá conozcas: ~2.2 tarjetas visibles */
  .mb-slider.mb-scrollbar[data-n="3"]>*{width:calc((100cqw - 20px)/2.2)!important;flex:0 0 auto!important}
  .mb-slider.mb-scrollbar[data-n="3"]>div:not([data-reel])>div:first-child{height:auto!important;aspect-ratio:1/1.1}
  .mb-slider.mb-scrollbar>[data-reel]{border-radius:12px!important}
  /* Grupos y Páginas sugeridos: ~1.7 tarjetas visibles */
  .mb-slider.mb-scrollbar[data-n="2"]>*{width:calc((100cqw - 20px)/1.7)!important;flex:0 0 auto!important}
  /* Carrusel dentro de una publicación */
  .mb-scrollbar[style*="scroll-snap-type: x mandatory"]>*{flex:0 0 calc((100% - 8px)/1.6)!important}

  /* --- Videos: pantalla completa, sin cabecera ni menú inferior (se sale con "atrás" del celular) --- */
  body:has(.mb-mmain[data-view="videos"]) .mb-mtop,
  body:has(.mb-mmain[data-view="videos"]) .mb-mbar{display:none!important}
  .mb-mmain[data-view="videos"]{padding:0!important}
  .mb-mmain[data-view="videos"] .mb-rv{height:100dvh!important;min-height:100dvh!important}
  .mb-mmain[data-view="videos"] .mb-rb button[title="Silenciar"],.mb-mmain[data-view="videos"] .mb-rb button[title="Activar sonido"]{display:none!important}

  /* --- Historias: pantalla completa, sin cabecera ni botón X (se sale con "atrás" del celular) --- */
  .max-w-2xl.mx-auto.flex.items-center.justify-center[style*="aspect-ratio: 9 / 16"]{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important;border-radius:0!important;z-index:10}
  .absolute.top-3.left-3.right-3.flex.gap-1\.5.z-30{top:calc(env(safe-area-inset-top,0px) + 8px)!important;width:calc(100vw - 16px)!important}
  .absolute.top-6.left-4.right-4.flex.items-center.justify-between.z-30{top:calc(env(safe-area-inset-top,0px) + 20px)!important;width:calc(100vw - 24px)!important}
  button.md\:hidden.absolute.top-3.right-3.z-40,
  .absolute.top-6.left-4.right-4 button[title="Cerrar"]{display:none!important}
  /* Flechas de historias ocultas: se desliza con el dedo */
  button.absolute.left-3.top-1\/2.z-30[title="Anterior"],
  button.absolute.right-3.top-1\/2.z-30[title="Siguiente"]{display:none!important}
}

/* ===== Refinado estilo app de Facebook (solo móvil; escritorio NO cambia) ===== */
@media (max-width:767px){
  /* Cabecera: sin línea, botones redondos grises */
  .mb-mtop{border-bottom:0!important;padding:6px 12px!important;box-shadow:none!important}
  .mb-mtop button[title]:not([title="Menú"]){background:rgba(127,127,127,.16)!important;border:0!important;border-radius:50%!important}
  /* Barra inferior: línea fina */
  .mb-mbar{border-top:1px solid rgba(127,127,127,.18)!important;box-shadow:none!important}
  /* Publicaciones: sin bordes, separadas por una franja como en Facebook */
  .mb-feedcol>*{border-top-width:0!important;border-bottom-width:0!important;box-shadow:none!important}
  .mb-feedcol>*+*{margin-top:6px!important}
  /* Caja "¿Qué estás pensando?" en píldora */
  .mb-composer-textarea{border-radius:20px!important}
  /* Pestañas del perfil (Todo / Reels / Fotos / Eventos): chips en una fila deslizable */
  .mb-ptabs{display:flex!important;gap:8px!important;overflow-x:auto;scrollbar-width:none;padding:4px 8px!important;-webkit-overflow-scrolling:touch}
  .mb-ptabs::-webkit-scrollbar{display:none}
  .mb-ptabs button{flex:0 0 auto!important;border-radius:999px!important;padding:8px 14px!important;font-size:14px!important;font-weight:600!important}
  /* Tipografía y botones más cercanos a Facebook */
  .mb-mmain{font-size:15px;line-height:1.35}
  .mb-mmain button{-webkit-tap-highlight-color:transparent}
}

/* Cuadro de publicar (feed, perfil, grupos y páginas) - SOLO móvil: cerrado = barra "¿Qué estás pensando?"; al tocarla se abre a pantalla completa estilo Facebook */
@media (max-width:767px){
  .mb-comp.mb-collapsed>*:not(.mb-compact){display:none!important}
  .mb-comp.mb-collapsed{border-radius:0!important}
  .mb-comp:not(.mb-collapsed){position:fixed!important;inset:0!important;z-index:400!important;display:flex!important;flex-direction:column;width:100%!important;max-width:none!important;height:100dvh;margin:0!important;padding-top:56px;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--background,#18191a)!important;overflow:hidden!important}
  .mb-comp:not(.mb-collapsed)::before{content:"Nueva publicación";position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;border-bottom:1px solid var(--border,rgba(127,127,127,.25));z-index:2}
  .mb-comp:not(.mb-collapsed)>button[title="Minimizar"]{position:absolute!important;top:0!important;left:0!important;right:auto!important;width:56px!important;height:56px!important;border-radius:0!important;background:none!important;font-size:22px!important;z-index:3}
  .mb-comp:not(.mb-collapsed) .mb-compact{display:none!important}
  .mb-comp:not(.mb-collapsed)>.p-4{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .mb-comp:not(.mb-collapsed)>.p-4 .flex-1>button:first-child{display:none!important}
  .mb-comp:not(.mb-collapsed)>.p-4 textarea{field-sizing:content;min-height:120px;overflow-wrap:anywhere;word-break:break-word}
  .mb-comp:not(.mb-collapsed)>.p-4 *{max-width:100%;min-width:0}
  .mb-comp:not(.mb-collapsed)>.p-4 img,.mb-comp:not(.mb-collapsed)>.p-4 video{max-height:45vh;object-fit:cover}
  .mb-comp:not(.mb-collapsed)>.px-4{flex:0 0 auto;padding-bottom:max(12px,env(safe-area-inset-bottom))!important;border-top:1px solid var(--border,rgba(127,127,127,.25))}
  .mb-comp:not(.mb-collapsed)>.px-4>.h-px{display:none}
  .mb-comp:not(.mb-collapsed) .mb-cmp-old{justify-content:flex-start!important}
  .mb-comp:not(.mb-collapsed) .mb-cmp-old>button:last-child{position:absolute;top:10px;right:12px;height:36px;padding:0 16px;z-index:3;margin:0}
  /* barra de acciones estilo Facebook: fichas con ícono y nombre, deslizables */
  .mb-comp:not(.mb-collapsed) .mb-cmp-old{flex-wrap:nowrap!important;gap:0!important;padding-right:0}
  .mb-comp:not(.mb-collapsed) .mb-cmp-old>div:first-child{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mb-comp:not(.mb-collapsed) .mb-cmp-old>div:first-child::-webkit-scrollbar{display:none}
  .mb-comp:not(.mb-collapsed) .mb-cmp-old>div:first-child>button{flex:0 0 auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-width:78px;height:72px;padding:6px 8px!important;border-radius:12px!important;background:rgba(127,127,127,.18)!important}
  .mb-comp:not(.mb-collapsed) .mb-cmp-old>div:first-child>button>span{display:block!important;font-size:12px;font-weight:600;white-space:nowrap}
  .mb-comp:not(.mb-collapsed) .mb-cmp-old>div:first-child>button>svg{width:24px!important;height:24px!important}
  /* al escribir una publicación se oculta la barra inferior de la app (como Facebook) y el fondo oscuro del feed queda por encima de ella */
  body:has(.mb-comp:not(.mb-collapsed)) .mb-mbar{display:none!important}
  .fixed.inset-0.z-50.grid.place-items-center.bg-black\/50{z-index:400!important}
  /* el aviso viejo "Cerrar" del feed ya no hace falta */
  .fixed.inset-0.z-50.grid.place-items-center.bg-black\/50>div>button{display:none}
}

/* Historias del perfil (solo móvil): la tarjeta "Crear nueva historia" va primero */
@media (max-width:767px){
  .mb-stories>button[class*="border-dashed"]{order:-1}
}

/* Botones de volver (solo móvil): círculo oscuro con flecha, igual que el de los grupos */
@media (max-width:767px){
  .mb-back,.mbpd-back,.mb-fr-back{flex:0 0 auto!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border:0!important;border-radius:9999px!important;font-size:0!important;color:transparent!important;background:rgba(0,0,0,.45) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/26px no-repeat!important;display:block!important}
  .mb-back>*,.mbpd-back>*,.mb-fr-back>*{display:none!important}
  /* Pestañas del perfil y de las páginas: píldoras como las de los grupos */
  .mb-mmain .mb-ptabs{display:flex!important;gap:8px!important;overflow-x:auto;padding:0 14px 14px!important;background:transparent!important}
  .mb-mmain .mb-ptabs [role=tab]{flex:0 0 auto!important;height:38px!important;padding:0 16px!important;border:0!important;border-radius:9999px!important;font-size:16px!important;font-weight:600!important;background:rgba(127,127,127,.22)!important;color:inherit!important}
  .mb-mmain .mb-ptabs [role=tab][data-state=active]{background:rgba(124,58,237,.3)!important;color:#a78bfa!important;font-weight:600!important}
  div.mbpd-tabs{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;gap:8px!important;padding:0 14px 4px!important}
  div.mbpd-tabs>button.rounded-full{flex:0 0 auto!important;height:38px!important;padding:0 16px!important;border:0!important;border-radius:9999px!important;font-size:16px!important;font-weight:600!important;box-shadow:none!important;background:rgba(127,127,127,.22)!important;color:inherit!important}
  div.mbpd-tabs>button.rounded-full[data-on="1"]{background:rgba(124,58,237,.3)!important;color:#a78bfa!important;box-shadow:none!important}
}