/* Menu movil (js/menu/abrir_menu.js). En escritorio (>768 px) no existe: la barra queda igual. */
.menu-hamburguesa, .menu-movil { display:none; }
@media (max-width:768px){
    /* Barra fija arriba al hacer scroll: html/body traen overflow-x:hidden, que rompe el sticky; clip recorta igual sin
       crear contenedor de scroll. Sticky (no fixed) = sin salto de contenido. Encima del contenido, debajo de modales (200+). */
    html, body { overflow-x:clip; }
    header { position:sticky; top:0; z-index:100; padding-top:max(8px, env(safe-area-inset-top)); }
  /* En celular la barra solo deja el logo (grande), "Volver a mi vista" si aplica y la hamburguesa; lo demas va al panel. */
  header > .menubar, header > #menuAjustes, header > #entrar { display:none !important; }
  header img.logo, header .marca-inicio img.logo { display:block !important; width:48px !important; height:48px !important; }
  header .marca-inicio { flex:1 1 0; min-width:0; }
  .menu-hamburguesa { display:inline-grid; place-items:center; flex:none; width:48px; height:48px; margin-left:auto; border:0; border-radius:16px; background:var(--fondo-rojo-claro,#fff1ee); cursor:pointer; transition:background .15s ease, transform .15s ease; }
  .menu-hamburguesa:hover { background:var(--fondo-hover-rojo-claro-2,#ffe3dd); }
  .menu-hamburguesa:active { transform:scale(.96); }
  .menu-hamburguesa:focus-visible { outline:3px solid var(--red, var(--fondo-rojo,#e11d2e)); outline-offset:2px; }
  .menu-rayas { display:grid; gap:4px; width:22px; }
  .menu-rayas i { display:block; height:3px; border-radius:3px; background:var(--red, var(--fondo-rojo,#e11d2e)); transition:transform .22s ease, opacity .22s ease; }
  .menu-hamburguesa[aria-expanded="true"] .menu-rayas i:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .menu-hamburguesa[aria-expanded="true"] .menu-rayas i:nth-child(2) { opacity:0; }
  .menu-hamburguesa[aria-expanded="true"] .menu-rayas i:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  .menu-movil { display:block; position:fixed; inset:0; z-index:130; }
  .menu-movil[hidden] { display:none; }
  .menu-movil-fondo { position:absolute; inset:0; background:var(--fondo-tinta-a45,rgba(28,20,18,.45)); opacity:0; transition:opacity .24s ease; }
  .menu-movil-panel { position:absolute; top:0; right:0; bottom:0; width:min(340px, 88vw); display:flex; flex-direction:column; background:var(--fondo-salmon-claro-6,#fffaf6); box-shadow:-12px 0 40px var(--sombra-tinta-a18-3,rgba(60,30,20,.18)); border-radius:24px 0 0 24px; transform:translateX(100%); transition:transform .26s cubic-bezier(.22,.8,.24,1); overflow:hidden; outline:none; }
  .menu-movil.abierto .menu-movil-fondo { opacity:1; }
  .menu-movil.abierto .menu-movil-panel { transform:none; }
  .menu-movil-cabeza { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 56px 12px; border-bottom:1px solid var(--borde-crema,#f1e6de); }
  .menu-movil-logo { margin:0; }
  .menu-movil-logo img { width:56px; height:56px; object-fit:contain; }
  .menu-movil.abierto .menu-movil-logo img { opacity:1; transform:none; }
  .menu-movil-cabeza h2 { margin:0; font-family:var(--fuente-titulos,Fraunces, serif); font-size:19px; text-align:center; color:var(--ink, var(--fondo-tinta-2,#1c1412)); }
  .menu-movil-cerrar { position:absolute; top:12px; right:12px; width:44px; height:44px; border-radius:50%; background:var(--fondo-blanco,#fff); box-shadow:0 2px 10px var(--sombra-tinta-a1,rgba(60,30,20,.1)); }
  .menu-movil-nav { flex:1; overflow-y:auto; padding:8px 12px max(16px, env(safe-area-inset-bottom)); overscroll-behavior:contain; }
  .menu-movil-grupo { margin:14px 8px 6px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted, var(--texto-cafe-7,#76615a)); }
  .menu-movil-nav ul { margin:0; padding:0; list-style:none; display:grid; gap:2px; }
  .menu-movil-nav a { display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 10px 6px 6px; border-radius:14px; color:var(--ink, var(--fondo-tinta-2,#1c1412)); font-weight:600; font-size:15px; text-decoration:none; transition:background .15s ease; }
  .menu-movil-nav a:hover, .menu-movil-nav a:focus-visible { background:var(--fondo-rojo-claro,#fff1ee); outline:none; }
  .menu-movil-nav a:focus-visible { box-shadow:inset 0 0 0 2px var(--sombra-activo-rojo-a55,rgba(225,29,46,.55)); }
  .menu-movil-nav a.on { background:var(--fondo-rojo-claro,#fff1ee); color:var(--red, var(--fondo-rojo,#e11d2e)); }
  .menu-movil-ic { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--fondo-blanco,#fff); box-shadow:0 1px 3px var(--sombra-tinta-a08-3,rgba(60,30,20,.08)); }
  .menu-movil-ic img.ic { width:18px; height:18px; }
  .menu-movil-sesion { margin-top:14px !important; padding-top:10px !important; border-top:1px solid var(--borde-crema,#f1e6de); }
  /* Entrada suave de los enlaces */
  .menu-movil.abierto .menu-movil-nav li { animation:menuEntra .3s ease both; }
  .menu-movil.abierto .menu-movil-nav li:nth-child(2) { animation-delay:.03s; } .menu-movil.abierto .menu-movil-nav li:nth-child(3) { animation-delay:.06s; }
  .menu-movil.abierto .menu-movil-nav li:nth-child(n + 4) { animation-delay:.09s; }
  body.con-menu-movil { overflow:hidden; }
}
@keyframes menuEntra { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .menu-movil-panel, .menu-movil-fondo, .menu-rayas i, .menu-hamburguesa { transition:none; } .menu-movil.abierto .menu-movil-nav li { animation:none; } }
body.menu-abierto .subir-arriba { display:none !important; }
/* Puente invisible entre el boton y el desplegable (hueco de 8 px) para que el hover no parpadee. */
@media (hover:hover) and (pointer:fine) and (min-width:769px){
  header .dropmenu::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
}
/* Engrane de configuracion (escritorio): menu con Ajustes y Cerrar sesion al final. */
#menuAjustes { position:relative; }
#menuAjustes .dropmenu { left:auto; right:0; min-width:200px; }
#menuAjustes .menu-salir { margin-top:4px; padding-top:8px; border-top:1px solid var(--line); border-radius:0 0 12px 12px; }
#menuAjustes #salir { margin-left:0; }
/* Desplegable de Administracion: Comunidades (la actual marcada) y Panel administrativo. */
#menuAdministracion .dropmenu { min-width:250px; }