/* Backend Sidebar – Mobile Off-Canvas (v1.5)
   - Sólo visible en mobile
   - Panel 70% (izquierda) + overlay 30% (derecha)
   - Animación caída lateral
*/

/* === Visibilidad por breakpoint === */
#bsb-mobf-button{ display:none; }
@media (max-width:768px){
  #bsb-mobf-button{ display:inline-flex; }
}
@media (min-width:769px){
  #bsb-mobf-root{ display:none !important; }
}

/* Fila donde conviven botón y ordenación */
.bsb-mobf-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}

/* Botón */
#bsb-mobf-button.bsb-mobf-btn{
  align-items:center; gap:8px;
  padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px;
  background:#f9fafb; color:#111827; font-weight:600; cursor:pointer;
}
#bsb-mobf-button .bsb-mobf-ico{ font-size:16px; line-height:1; }

/* === Overlay (30%) anclado a la DERECHA === */
.bsb-mobf-overlay{
  position:fixed; top:0; right:0; bottom:0;
  width:30vw; min-width:30vw;
  background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
  z-index:9998;
}
.bsb-mobf.is-open .bsb-mobf-overlay{ opacity:1; pointer-events:auto; }

/* === Panel (70%) anclado a la IZQUIERDA con "caída" === */
@keyframes bsb-slide-drop-left{
  0%   { transform:translateX(-102%) translateY(-8px); }
  70%  { transform:translateX(0) translateY(1px); }
  100% { transform:translateX(0) translateY(0); }
}
.bsb-mobf-panel{
  position:fixed; top:0; left:0; bottom:0; right:auto;
  width:70vw; max-width:70vw;
  background:#fff; box-shadow:8px 0 24px rgba(0,0,0,.15);
  transform:translateX(-102%);
  will-change:transform;
  display:flex; flex-direction:column; z-index:9999;
}
.bsb-mobf.is-open .bsb-mobf-panel{
  transform:translateX(0);
  animation: bsb-slide-drop-left .28s cubic-bezier(.22,.95,.31,.99);
}

/* Cuerpo (contenido de filtros) */
.bsb-mobf-body{ padding:8px 14px; overflow:auto; height:100%; }

/* === iPhone/iOS: títulos siempre NEGROS (y sin subrayado) === */
#bsb-mobf-panel h1,
#bsb-mobf-panel h2,
#bsb-mobf-panel h3,
#bsb-mobf-panel h4,
#bsb-mobf-panel .widget-title,
#bsb-mobf-panel .bsb-acc-head,
#bsb-mobf-panel .bsb-accordion summary{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  text-decoration:none !important;
}
#bsb-mobf-panel a,
#bsb-mobf-panel a:any-link,
#bsb-mobf-panel a:link,
#bsb-mobf-panel a:visited,
#bsb-mobf-panel a:hover,
#bsb-mobf-panel a:active{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  text-decoration:none !important;
}

/* Footer */
.bsb-mobf-footer{
  position:sticky; bottom:-1px; background:#fff; padding:12px 14px 14px; border-top:1px solid #e5e7eb;
}
.bsb-mobf-apply{
  width:100%; padding:12px 18px; border:0; border-radius:8px;
  background:#111827; color:#fff; font-weight:700; cursor:pointer;
}

/* Bloqueo de scroll cuando está abierto */
html.bsb-mobf-lock, body.bsb-mobf-lock{ overflow:hidden !important; }

/* Pequeñas seguridades para pantallas ultra angostas */
@media (max-width:360px){
  .bsb-mobf-panel{ width:72vw; max-width:72vw; }
  .bsb-mobf-overlay{ width:28vw; min-width:28vw; }
}