/* BAIREN · Portal · Ajustes de menu (25/10/2026), sobre el diseño de siempre: claridad, textos, legibilidad y funciones. Sin cambiar colores, encabezado, pie, fotos, logo ni formas. */

/* ── Encabezado del celular: BAIREN y el botón "Menú" ──
   25/10/2026 (noche) · Tomás: "más simple". "Publicar gratis" y ES · PT · EN pasan adentro del menú (antes estaban a la
   vista: un usuario brasileño no encontraba el idioma y un dueño quería Publicar más visible; ahora los dos están en el
   menú, que dice "Menú"). */
@media(max-width:1023px){
  #pHeader .p-navbar{display:flex;align-items:center;gap:4px}
  #pHeader .p-navbar > .p-nav-left{flex:0 0 auto;margin-right:auto}
  #pHeader .p-navbar > .p-campana-m{order:4}

  /* Las tres rayitas de siempre, con la palabra al lado. Abierto, las rayitas hacen la cruz de siempre y la palabra queda
     (así nada se corre al abrir) */
  #pHeader .p-navbar > .burger.mm-burger{display:grid!important;order:5;grid-template-columns:22px auto;grid-auto-rows:1.5px;row-gap:5px;column-gap:7px;
    align-content:center;width:auto;height:44px;margin-left:2px;padding:0 0 0 8px;border-left:0}
  #pHeader .mm-burger span{grid-column:1;width:22px}
  #pHeader .mm-burger .mm-burger-t{grid-column:2;grid-row:1 / 4;align-self:center;font:600 10.5px/1 var(--font-body);
    letter-spacing:.16em;text-transform:uppercase;color:#DECDA0;text-align:left}
}
/* ── El menú: arriba, las tres puertas, solo con su nombre, un ícono oro y la flecha ── */
#mobileMenu .mm-puerta{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:14px}
#mobileMenu .mm-ic{display:flex;color:var(--gold,#C2A968)}
#mobileMenu .mm-ic svg{width:21px;height:21px}
#mobileMenu .mm-tx{min-width:0;color:#FBFAF6}
#mobileMenu .mm-ir{display:flex;color:var(--gold,#C2A968)}
#mobileMenu .mm-ir svg{width:18px;height:18px}
/* La puerta donde se está: el punto oro de siempre en lugar de la flecha */
#mobileMenu .mm-puerta.on .mm-ir{display:none}
#mobileMenu .mm-puerta:not(.on)::after{display:none}
#mobileMenu .mm-puerta:active{background:rgba(251,250,246,.04)}

/* Abajo, Guardados y Cómo funciona: un poco más grandes y claros que antes */
#mobileMenu .m-secundario.mm-sec{gap:0 28px;padding:10px 0 0}
#mobileMenu .m-secundario.mm-sec a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.9rem;color:rgba(251,250,246,.8)}
#mobileMenu .m-secundario.mm-sec a.on{color:#DECDA0}
#mobileMenu .m-secundario.mm-sec svg{width:17px;height:17px;color:var(--gold,#C2A968)}
/* Al final, el idioma, siempre (con o sin la barra de abajo) */
#mobileMenu .m-lang{display:inline-flex;margin:18px 0 0}

/* ── La barra de abajo: la misma, con palabras que se leen ── */
@media(max-width:859px){
  #pTabbar a{color:rgba(251,250,246,.86)}
  #pTabbar a svg{stroke-width:1.5}
  html #pTabbar a span{font-size:12.5px;letter-spacing:.005em}
  #pTabbar a.on{color:#DECDA0}
  /* "Ingresar" sin sesión y "Mi cuenta" con sesión: lo decide el enlace, que BP.applySession cambia */
  #pTabbar a[data-tab="cuenta"][href^="ingresar"] .mm-con,#pTabbar a[data-tab="cuenta"]:not([href^="ingresar"]) .mm-sin{display:none}
  /* El final de cada página queda arriba de la barra, con un poco de aire (alguien tocaba la barra sin querer) */
  html.con-tabbar body::after{height:calc(68px + env(safe-area-inset-bottom))}
}

/* ── El pie: el © se lee ── */
.p-pie2 .p-pie-copy{font-size:.8rem;color:rgba(251,250,246,.68)}