/* =====================================================================
   Constructor Menus MYEM · Estilos del menú público (motor de pintado)
   ---------------------------------------------------------------------
   - Lo usan la web (menús globales y shortcode), la vista previa del
     builder y el HTML autónomo exportado: así los tres se ven igual.
   - Todo cuelga de .myem-menu para no chocar con el tema (Astra).
   - Los valores (colores, tamaños, velocidad...) llegan como variables
     CSS (--m-*, --e-*, --i-*, --d-*, --f-*, --fi-*) que calcula el plugin
     para cada menú, tipo y dispositivo.
   ===================================================================== */

/* ---------- Protección frente a los estilos del tema ----------
   Astra da estilo general a botones, listas y enlaces. Aquí se anulan
   dentro del menú para que solo mande la configuración del builder. */
.myem-menu,
.myem-menu *,
.myem-menu *::before,
.myem-menu *::after { box-sizing: border-box; }
.myem-menu ul,
.myem-menu li { margin: 0; padding: 0; list-style: none; }
.myem-menu button {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: none;
  line-height: inherit; min-height: 0; min-width: 0; cursor: pointer;
}
.myem-menu button:hover,
.myem-menu button:focus { background: none; color: inherit; box-shadow: none; }
.myem-menu button:focus-visible,
.myem-menu a:focus-visible { outline: 2px solid var(--acento, #ffaa00); outline-offset: 2px; }
.myem-menu a { box-shadow: none; }
.myem-menu svg { display: block; }

/* Multiplicador del tamaño de letra que elige el visitante */
.myem-menu { --m-mult: 1; }
.myem-menu[data-letra="pequena"] { --m-mult: .875; }
.myem-menu[data-letra="grande"] { --m-mult: 1.2; }

/* Mientras se coloca según las preferencias guardadas del visitante, sin
   animaciones (evita que la flecha «viaje» al cargar cada página) */
.myem-menu.myem-sin-transicion,
.myem-menu.myem-sin-transicion * { transition: none !important; }

/* Con el menú abierto, la página de detrás no se desplaza */
html.myem-menu-bloqueo,
html.myem-menu-bloqueo body { overflow: hidden !important; }

/* ---------- Base común de todos los tipos ---------- */
.myem-menu .m-base {
  font-family: var(--m-fuente); font-size: calc(var(--m-tam) * var(--m-mult));
  font-weight: var(--m-peso); color: var(--m-texto); text-align: var(--m-alin); line-height: 1.3;
}
.myem-menu .m-lista { display: flex; flex-direction: column; gap: var(--e-sep); }
.myem-menu .m-fila { display: flex; align-items: center; gap: 4px; }
.myem-menu .m-enlace {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: var(--m-just); gap: .6em;
  padding: var(--e-padv) var(--e-padh);
  background: var(--e-rel); color: var(--e-tex); text-decoration: none;
  border: var(--e-gros) solid var(--e-bor); border-radius: var(--e-rad);
  transition: background .2s, color .2s, border-color .2s;
}
.myem-menu .m-enlace:hover,
.myem-menu .m-enlace:focus { background: var(--e-rel-h); color: var(--e-tex-h); border-color: var(--e-bor-h); }
.myem-menu .m-ico { width: var(--i-tam); height: var(--i-tam); flex-shrink: 0; color: var(--i-col); }
.myem-menu .m-sin-iconos .m-ico { display: none; }
.myem-menu .m-ico-arriba .m-enlace { flex-direction: column; gap: .3em; }
.myem-menu .m-titulo {
  padding: calc(var(--e-padv) + 6px) var(--e-padh) 2px;
  font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6;
}
.myem-menu .m-sep { height: 1px; margin: 4px var(--e-padh); background: currentColor; opacity: .15; }
.myem-menu .m-destacado .m-enlace {
  justify-content: center; font-weight: 600;
  background: var(--d-rel); color: var(--d-tex); border-color: transparent; border-radius: var(--d-rad);
}
.myem-menu .m-destacado .m-enlace:hover,
.myem-menu .m-destacado .m-enlace:focus { background: var(--d-rel-h); color: var(--d-tex); border-color: transparent; }
.myem-menu .m-destacado .m-ico { color: currentColor; }

/* Página actual: tres formas de marcarla */
.myem-menu .act-color .es-actual > .m-fila > .m-enlace,
.myem-menu .act-color .es-actual > .m-fila > .m-enlace .m-ico { color: var(--a-col); }
.myem-menu .act-subrayado .es-actual > .m-fila > .m-enlace .m-txt {
  text-decoration: underline 2px var(--a-col); text-underline-offset: 5px;
}
.myem-menu .act-fondo .es-actual > .m-fila > .m-enlace { background: var(--a-fondo); }

/* Submenús: la flecha y todo el título los despliegan */
.myem-menu .m-sub-btn {
  flex-shrink: 0; width: 2.2em; height: 2.2em;
  color: inherit; border-radius: var(--e-rad); display: grid; place-items: center;
}
.myem-menu .m-sub-btn svg { width: 1em; height: 1em; transition: transform var(--vel); }
.myem-menu .sub-abierto > .m-fila .m-sub-btn svg { transform: rotate(180deg); }
.myem-menu .m-sub { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--vel) ease, opacity var(--vel) ease; }
.myem-menu .m-sub-in { overflow: hidden; display: flex; flex-direction: column; gap: var(--e-sep); padding-left: 1em; }
.myem-menu .sub-abierto > .m-sub { grid-template-rows: 1fr; opacity: 1; }

/* ---------- Tipo 1: lateral (flecha o tres puntos) ---------- */
.myem-menu .m-lat { position: fixed; inset: 0; z-index: 99990; pointer-events: none; }
/* Dentro de la vista previa del builder, el marco hace de pantalla */
.vp-capa.myem-menu .m-lat { position: absolute; z-index: 35; }
/* La pestaña queda SIEMPRE encima del panel y de la página de configurar */
.myem-menu .m-flecha {
  position: absolute; z-index: 5; top: var(--pos); left: 0; transform: translateY(-50%);
  width: var(--f-tac); height: var(--f-alto);
  display: flex; align-items: center;
  pointer-events: auto;
  transition: top var(--vel) ease, left var(--vel) ease;
}
.myem-menu .lado-derecha .m-flecha { left: calc(100% - var(--f-tac)); justify-content: flex-end; }
.myem-menu .lado-izquierda .m-flecha { justify-content: flex-start; }
.myem-menu .m-flecha-barra {
  width: var(--f-vis); height: 100%; background: var(--f-col); color: var(--f-ico-col);
  display: grid; place-items: center; transition: border-radius var(--vel);
}
.myem-menu .lado-derecha .m-flecha-barra { border-radius: 8px 0 0 8px; }
.myem-menu .lado-izquierda .m-flecha-barra { border-radius: 0 8px 8px 0; }
.myem-menu .m-flecha-barra svg { width: var(--f-ico); height: var(--f-ico); }
/* Panel a pantalla completa */
.myem-menu .m-panel {
  position: absolute; inset: 0; z-index: 3; pointer-events: auto; touch-action: pan-y;
  display: flex; flex-direction: column;
  background: var(--m-fondo);
  -webkit-backdrop-filter: blur(var(--m-blur)); backdrop-filter: blur(var(--m-blur));
  visibility: visible; transform: none; opacity: 1;
  transition: transform var(--vel) ease, opacity var(--vel) ease, visibility 0s;
}
/* Estados cerrados según la animación elegida */
.myem-menu .m-lat:not(.abierto) .m-panel {
  visibility: hidden;
  transition: transform var(--vel) ease, opacity var(--vel) ease, visibility 0s linear var(--vel);
}
.myem-menu .m-lat:not(.abierto).anim-deslizar.lado-derecha .m-panel { transform: translateX(100%); }
.myem-menu .m-lat:not(.abierto).anim-deslizar.lado-izquierda .m-panel { transform: translateX(-100%); }
.myem-menu .m-lat:not(.abierto).anim-fundido .m-panel { opacity: 0; }
.myem-menu .m-lat:not(.abierto).anim-crecer .m-panel { opacity: 0; transform: scale(.15); }
.myem-menu .anim-crecer.lado-derecha .m-panel { transform-origin: right var(--pos); }
.myem-menu .anim-crecer.lado-izquierda .m-panel { transform-origin: left var(--pos); }
/* Cabecera del menú = botón «Configurar» */
.myem-menu .m-panel-cab { display: flex; align-items: stretch; flex-shrink: 0; background: var(--acento); color: #121212; }
.myem-menu .m-panel-cab.sin-config { background: transparent; color: var(--m-texto); justify-content: flex-end; }
.myem-menu .m-cab-config {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; color: inherit; text-align: left;
  font-size: 15px; font-weight: 700;
}
.myem-menu .m-cab-config svg { width: 18px; height: 18px; flex-shrink: 0; }
.myem-menu .m-cab-config .m-cab-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myem-menu .m-cab-config .m-cab-ir { margin-left: auto; }
.myem-menu .m-cerrar { width: 54px; flex-shrink: 0; color: inherit; font-size: 28px; line-height: 1; }
/* Cuerpo: las opciones quedan centradas en altura, haya las que haya */
.myem-menu .m-panel-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 20px calc(var(--f-tac) + 12px);
}
.myem-menu .m-panel-cuerpo > .m-lista { margin: auto 0; }
/* Firma: abajo de todo del menú, discreta */
.myem-menu .m-firma {
  flex-shrink: 0; padding: 10px calc(var(--f-tac, 16px) + 12px) 14px;
  font-size: var(--fi-tam); opacity: var(--fi-op); text-align: var(--fi-alin);
  color: var(--m-texto); letter-spacing: .02em;
}
.myem-menu .m-firma a { color: inherit; text-decoration: none; }
.myem-menu .m-firma a:hover { text-decoration: underline; }

/* Página «Configura tu menú» (a pantalla completa, encima del menú) */
.myem-menu .m-pconf {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  background: var(--m-fondo-solido); color: var(--m-texto);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path var(--vel) ease, visibility 0s linear var(--vel);
}
.myem-menu .config-abierto .m-pconf { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--vel) ease, visibility 0s; }
.myem-menu .m-pconf .m-panel-cab { background: var(--acento); color: #121212; }
.myem-menu .m-pconf-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px calc(var(--f-tac) + 12px) 26px; font-size: 14px;
}
.myem-menu .m-pconf-cuerpo > :first-child { margin-top: auto; }
.myem-menu .m-pconf-cuerpo > :last-child { margin-bottom: auto; }
.myem-menu .m-diagrama { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.myem-menu .m-mini { position: relative; width: 64px; height: 112px; border: 2px solid currentColor; border-radius: 12px; opacity: .85; }
.myem-menu .m-mini::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: currentColor; opacity: .5; }
.myem-menu .m-mini-flecha {
  position: absolute; top: var(--pos); left: 0; width: 7px; height: 22px; transform: translateY(-50%);
  background: var(--f-col); border-radius: 0 4px 4px 0;
  transition: top var(--vel) ease, left var(--vel) ease, border-radius var(--vel);
  animation: myem-latido 1.6s ease-in-out infinite;
}
.myem-menu .lado-derecha .m-mini-flecha { left: calc(100% - 7px); border-radius: 4px 0 0 4px; }
@keyframes myem-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,170,0,.55); } 50% { box-shadow: 0 0 0 7px rgba(255,170,0,0); } }
.myem-menu .m-diagrama-txt { font-size: 12px; opacity: .75; }
.myem-menu .m-opc-bloque { display: flex; flex-direction: column; gap: 6px; }
.myem-menu .m-opc-titulo { font-weight: 700; }
.myem-menu .m-opc-desc { font-size: 12px; line-height: 1.4; opacity: .7; }
.myem-menu .m-opc-bots { display: flex; gap: 6px; }
.myem-menu .m-opc-bots button {
  flex: 1; padding: 10px 6px; border-radius: 6px;
  background: rgba(128,128,128,.16); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.myem-menu .m-opc-bots button:hover { background: rgba(128,128,128,.26); }
.myem-menu .m-opc-bots button[aria-pressed="true"] { background: var(--acento); color: #121212; font-weight: 700; }
.myem-menu .m-muestra { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(128,128,128,.5); }

/* ---------- Tipo 2: barra inferior (vista previa del builder; en la web, v1.1) ---------- */
.myem-menu .m-inf, .myem-menu .m-cab {
  position: fixed; left: 0; right: 0; z-index: 99980; pointer-events: auto;
  background: var(--m-fondo);
  -webkit-backdrop-filter: blur(var(--m-blur)); backdrop-filter: blur(var(--m-blur));
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.vp-capa.myem-menu .m-inf, .vp-capa.myem-menu .m-cab { position: absolute; z-index: 30; }
.myem-menu .m-inf { bottom: 0; padding: 6px 6px 10px; box-shadow: 0 -1px 0 rgba(0,0,0,.06); }
.myem-menu .m-inf.oculto { transform: translateY(100%); }
.myem-menu .m-inf > ul { display: flex; gap: var(--e-sep); }
.myem-menu .m-inf > ul > li { flex: 1; min-width: 0; display: flex; }
.myem-menu .m-inf .m-fila { flex: 1; min-width: 0; }
.myem-menu .m-inf .m-enlace { font-size: .72em; text-align: center; justify-content: center; }
.myem-menu .m-inf.m-ico-auto .m-enlace { flex-direction: column; gap: .3em; }
.myem-menu .m-inf .m-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Tipo 3: cabecera horizontal (vista previa; en la web, v1.2) ---------- */
.myem-menu .m-cab { top: 0; display: flex; align-items: center; gap: 14px; padding: 8px 14px; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.myem-menu .m-cab.oculto { transform: translateY(-100%); }
.myem-menu .m-cab-logo { flex-shrink: 0; font-weight: 700; letter-spacing: .04em; }
.myem-menu .m-cab-logo b { color: #ffaa00; }
.myem-menu .m-cab-lista {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: safe var(--m-just);
  gap: var(--e-sep); overflow-x: auto; scrollbar-width: none;
}
.myem-menu .m-cab-lista::-webkit-scrollbar { display: none; }
.myem-menu .m-cab-lista > li { flex-shrink: 0; }
.myem-menu .m-cab-lista .m-enlace { white-space: nowrap; }
.myem-menu .m-cab .m-sub {
  display: none; position: absolute; top: 100%; left: 0; right: 0; opacity: 1;
  background: var(--m-fondo);
  -webkit-backdrop-filter: blur(var(--m-blur)); backdrop-filter: blur(var(--m-blur));
}
.myem-menu .m-cab .sub-abierto > .m-sub { display: block; animation: myem-aparece var(--vel) ease; }
.myem-menu .m-cab .m-sub-in { overflow: visible; padding: 10px 14px 14px; }
@keyframes myem-aparece { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.myem-menu .m-inf.sin-fondo, .myem-menu .m-cab.sin-fondo { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

/* ---------- Tipo 4: dentro de página (vista previa; en la web, v1.3) ---------- */
.myem-menu .m-pag { margin: 22px; padding: 12px; border-radius: 10px; background: var(--m-fondo); }
.myem-menu .m-pag-pestanas > ul { display: flex; justify-content: safe var(--m-just); gap: var(--e-sep); overflow-x: auto; border-bottom: 1px solid rgba(128,128,128,.25); }
.myem-menu .m-pag-pestanas .m-enlace { white-space: nowrap; border-radius: var(--e-rad) var(--e-rad) 0 0; }
.myem-menu .m-pag-pestanas .es-actual .m-enlace { box-shadow: inset 0 -2px 0 var(--a-col); }
.myem-menu .m-pag-botones > ul { display: flex; flex-wrap: wrap; justify-content: var(--m-just); gap: var(--e-sep); }