/* Evita text-inflation / autoenlarging en móviles */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ***********************************************************************************************
   TOPBAR MÓVIL (fail-safe + rango XS–LG + kill-switch XL–XXL)
   XS–LG = ≤1199.98px  |  XL–XXL = ≥1200px
*********************************************************************************************** */

/* 0) Fail-safe global: oculta la topbar móvil por defecto */
.btb-mobile-topbar{ display: none; }

/* 1) Mostrar topbar móvil SOLO hasta 1199.98px (XS–LG) */
@media (min-width:0px) and (max-width:1199.98px){
  /* Barra fija arriba */
  .btb-mobile-topbar{
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: rgba(255,255,255,.85) !important; /* 85% opacidad */
    -webkit-backdrop-filter: saturate(120%) blur(4px); /* soporte Safari */
    backdrop-filter: saturate(120%) blur(4px);         /* efecto */
    border-bottom: 1px solid rgba(0,0,0,.06);
    z-index: 5000;                 /* por encima del header, debajo del overlay del menú */
    width: 100%;
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* Empuja el contenido SOLO en móvil/tablet */
  body{ padding-top: 56px !important; }

  /* Layout interno: [izq][logo][der] para centrar el logo */
  .btb-topbar-inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
    padding: 0 .875rem;
    column-gap: .5rem;
  }
  .btb-left-slot{
    display: flex; align-items: center; justify-content: flex-start;
    min-width: 44px;
  }
  .btb-right-slot{ min-width: 44px; }

  /* Logo */
  .btb-topbar-logo{
    display: inline-flex; align-items: center; justify-self: center;
    text-decoration: none;
  }
  .btb-topbar-logo img{
    height: 36px;
    width: auto; display: block;
    max-height: 36px; max-width: none; object-fit: contain;
  }

  /* Botón nativo colocado en la topbar (el script añade .btb-in-topbar) */
  .btb-in-topbar{
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin: 0; padding: 0;
    background: transparent; border: 0;
    position: relative; left: 0; top: 0;
  }

  /* Forzar que no herede posicionamientos del header */
  .btb-left-slot .btb-in-topbar,
  .btb-left-slot #menu-icon,
  .btb-left-slot .menu-icon,
  .btb-left-slot .navbar-toggle,
  .btb-left-slot .menu-nav-trigger{
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important;
    margin: 0 !important; margin-left: 1em !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 1;
  }

  /* Hamburguesa: fondo negro + líneas blancas */
  .btb-left-slot .btb-in-topbar,
  .btb-left-slot #menu-icon,
  .btb-left-slot .menu-icon,
  .btb-left-slot .navbar-toggle,
  .btb-left-slot .menu-nav-trigger{
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 4px;
    background-image:
      linear-gradient(#fff,#fff),
      linear-gradient(#fff,#fff),
      linear-gradient(#fff,#fff);
    background-repeat: no-repeat;
    background-size: 22px 2px, 22px 2px, 22px 2px;
    background-position: 50% 14px, 50% 21px, 50% 28px;
  }

  /* Oculta texto interno del botón si existiera */
  .btb-left-slot .btb-in-topbar .menu-text,
  .btb-left-slot #menu-icon .menu-text,
  .btb-left-slot .menu-icon .menu-text{
    font-size: 0 !important; line-height: 0 !important;
  }

  /* Si no se mueve el botón, reserva ancho para mantener centrado el logo */
  .btb-left-slot:empty{ min-width: 44px; }
}

/* 2) Escritorio: ocultar topbar y resetear offsets (XL–XXL ≥1200px) */
@media (min-width:1200px){
  html body .btb-mobile-topbar,
  html body .btb-mobile-topbar *{
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  body{ padding-top: 0 !important; }
}

/* 3) Admin bar (rangos exactos) */
@media (min-width:0px) and (max-width:782.98px){
  html.admin-bar .btb-mobile-topbar{ top: 46px !important; }
}
@media (min-width:783px) and (max-width:1199.98px){
  html.admin-bar .btb-mobile-topbar{ top: 32px !important; }
}