/* Diálogo de crear historia en MÓVIL: pantalla completa estilo Facebook, sobre el diálogo que ya existe (mismas funciones). Solo <=768px. */
@media (max-width:768px){
html.mbm-open,html.mbm-open body{overflow:hidden!important}
.mbm{padding:0!important;display:block!important;background:#000!important}
.mbm>div{position:absolute!important;left:0!important;top:var(--mbm-t,0px)!important;width:100%!important;max-width:none!important;height:var(--mbm-h,100dvh)!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#000!important;overflow:hidden!important;display:flex!important;flex-direction:column;color:#fff}

/* barra de arriba: X a la izquierda; en "elegir" el título "Crear historia" va centrado */
.mbm>div>div:first-child{position:absolute!important;top:0!important;left:0!important;right:0!important;z-index:30;display:flex!important;align-items:center;justify-content:center;min-height:calc(env(safe-area-inset-top,0px) + 64px);padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 14px!important;background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent)!important;pointer-events:none}
.mbm>div>div:first-child>button{position:absolute;left:12px;top:calc(env(safe-area-inset-top,0px) + 10px);pointer-events:auto;width:42px!important;height:42px!important;border-radius:50%!important;background:rgba(255,255,255,.16)!important;color:#fff!important}
.mbm>div>div:first-child>p{font-size:0!important;margin:0!important}
.mbm[data-mbm="select"]>div>div:first-child>p::after{content:"Crear historia";font-size:18px;font-weight:700;color:#fff}

/* paso 1: elegir -> accesos arriba (foto / video) y gran bloque "galería" */
.mbm[data-mbm="select"]>div>div.p-6{flex:1 1 0!important;min-height:0;display:flex!important;flex-direction:column;gap:14px;padding:calc(env(safe-area-inset-top,0px) + 76px) 14px calc(env(safe-area-inset-bottom,0px) + 14px)!important;margin:0!important;overflow:hidden}
.mbm[data-mbm="select"]>div>div.p-6>*{margin:0!important}
.mbm[data-mbm="select"]>div>div.p-6>.text-center:first-child{display:none!important}
.mbm[data-mbm="select"]>div>div.p-6>.grid{display:flex!important;flex:none;gap:10px!important}
.mbm[data-mbm="select"]>div>div.p-6>.grid>button{flex:1 1 0;height:88px!important;padding:0!important;border-radius:16px!important;gap:8px!important;background:#262626!important;background-image:none!important}
.mbm[data-mbm="select"]>div>div.p-6>.grid>button svg{width:28px!important;height:28px!important}
.mbm[data-mbm="select"]>div>div.p-6>.grid>button span{font-size:14px!important;font-weight:600!important}
.mbm[data-mbm="select"]>div>div.p-6>.h-px{display:none!important}
.mbm[data-mbm="select"]>div>div.p-6>label{flex:1 1 0;min-height:0;flex-direction:column!important;justify-content:center;gap:14px!important;padding:0 16px!important;border-radius:20px!important;background:#1a1a1a!important;border:1px dashed rgba(255,255,255,.22)!important}
.mbm[data-mbm="select"]>div>div.p-6>label svg{width:44px!important;height:44px!important}
.mbm[data-mbm="select"]>div>div.p-6>label span{font-size:0!important}
.mbm[data-mbm="select"]>div>div.p-6>label span::after{content:"Elegir de la galería";font-size:17px;font-weight:600}
.mbm[data-mbm="select"]>div>div.p-6>p{font-size:12px!important;padding:0 8px;color:rgba(255,255,255,.55)!important}

/* paso 2: cámara a pantalla completa */
.mbm[data-mbm="capture"]>div>div.relative{flex:1 1 0!important;min-height:0!important;height:auto!important;aspect-ratio:auto!important;max-width:none!important;width:100%!important;margin:0!important}
.mbm[data-mbm="capture"] div.absolute.bg-rose-600{top:calc(env(safe-area-inset-top,0px) + 64px)!important}
.mbm[data-mbm="capture"] div.absolute.bottom-0{padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 18px)!important}
.mbm[data-mbm="capture"] div.absolute.bottom-0 button.h-16{width:78px!important;height:78px!important;touch-action:manipulation}
.mbm[data-mbm="capture"] div.absolute.bottom-0 .h-12.w-12{width:54px!important;height:54px!important}
.mbm[data-mbm="capture"] div.absolute.bottom-0>p{font-size:0!important;margin-top:12px!important}
.mbm[data-mbm="capture"] div.absolute.bottom-0>p::after{content:"Toca para foto · toca dos veces para grabar video (máx. 30 s)";font-size:12px;color:rgba(255,255,255,.75)}

/* paso 3: vista previa a pantalla completa + barra inferior con "Descartar" y "Compartir" */
.mbm[data-mbm="preview"]>div>div.flex-col{flex:1 1 0!important;min-height:0;display:flex!important;flex-direction:column}
.mbm[data-mbm="preview"]>div>div.flex-col>div.relative{flex:1 1 0!important;min-height:0!important;height:auto!important;aspect-ratio:auto!important;max-width:none!important;width:100%!important;margin:0!important}
.mbm[data-mbm="preview"]>div>div.flex-col>div.p-4{flex:0 0 auto;padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 12px)!important;background:#000!important;border-top:1px solid rgba(255,255,255,.12);border-radius:0}
.mbm[data-mbm="preview"] input[placeholder]{height:46px!important;font-size:16px!important;border-radius:999px!important;padding:0 18px!important;background:rgba(255,255,255,.1)!important}
.mbm[data-mbm="preview"] input[type=checkbox]{width:20px;height:20px}
.mbm[data-mbm="preview"] label{font-size:14px!important}
.mbm[data-mbm="preview"]>div>div.flex-col>div.p-4 div.flex.gap-2{justify-content:space-between;align-items:center}
.mbm[data-mbm="preview"]>div>div.flex-col>div.p-4 div.flex.gap-2>button{height:48px!important;border-radius:999px!important;font-size:15px!important;font-weight:600!important;flex:0 0 auto!important}
.mbm[data-mbm="preview"]>div>div.flex-col>div.p-4 div.flex.gap-2>button:first-child{padding:0 18px!important}
.mbm[data-mbm="preview"]>div>div.flex-col>div.p-4 div.flex.gap-2>button:last-child{min-width:150px;font-size:0!important}
.mbm[data-mbm="preview"]>div>div.flex-col>div.p-4 div.flex.gap-2>button:last-child svg:not(.animate-spin){display:none!important}
.mbm[data-mbm="preview"]>div>div.flex-col>div.p-4 div.flex.gap-2>button:last-child::after{content:"Compartir";font-size:16px;font-weight:700}
}