/* =====================================================================
   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); }
/* 1.0.10 · Iconos de la biblioteca: grosor de línea ajustable (los de relleno
   no llevan línea), imágenes ajustadas a su caja y emoji del mismo tamaño */
.myem-menu svg.m-ico-l { stroke-width: var(--i-trazo, 1.75); }
.myem-menu img.m-ico-img { object-fit: contain; }
.myem-menu .m-ico-emoji { display: inline-grid; place-items: center; font-size: var(--i-tam); line-height: 1; }
.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) ----------
   Desde la 1.0.3, en la web el contenedor .m-lat no tiene caja propia (solo
   reparte las variables): la flecha y el panel son fijos cada uno por su
   lado. Así, con el menú cerrado no hay ninguna capa que cubra la pantalla,
   solo la flecha, igual de ligero que el snippet antiguo. */
.myem-menu .m-lat { position: static; }
/* Dentro de la vista previa del builder, el marco hace de pantalla: ahí la
   flecha y el panel se colocan respecto a él, no respecto a la ventana */
.vp-capa.myem-menu .m-lat { position: absolute; inset: 0; z-index: 35; pointer-events: none; }
.vp-capa.myem-menu .m-lat .m-flecha,
.vp-capa.myem-menu .m-lat .m-panel { position: absolute; }
.vp-capa.myem-menu .m-lat .m-flecha { z-index: 5; }
.vp-capa.myem-menu .m-lat .m-panel { z-index: 3; }
/* 1.0.11 · Vista previa con «Se abre con: Hamburguesa» (tablet y móvil): la
   flecha solo se ve con el menú abierto. En la web lo hace el CSS propio de
   cada menú (motor.php), por dispositivo. */
.vp-capa.myem-menu .m-lat.abre-hamb:not(.abierto) .m-flecha { display: none; }
/* La pestaña queda SIEMPRE encima del panel y de la página de configurar */
.myem-menu .m-flecha {
  position: fixed; z-index: 99992; 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); }
.myem-menu .m-flecha-ico { display: grid; place-items: center; }
/* 1.0.10 · Icono elegido para la pestaña (forma «Icono») */
.myem-menu .m-flecha-barra .m-f-ico { width: var(--f-ico); height: var(--f-ico); }
.myem-menu .m-flecha-barra svg.m-f-ico.m-ico-l { stroke-width: var(--f-trazo, 1.75); }
.myem-menu .m-flecha-barra img.m-f-ico { object-fit: contain; }
.myem-menu .m-flecha-barra .m-f-ico.m-ico-emoji { display: grid; place-items: center; font-size: var(--f-ico); line-height: 1; }
/* 1.0.7 · Pestaña con texto: crece en altura lo que pida el texto (nunca
   menos que el «Alto» configurado); el icono va encima y el texto debajo.
   writing-mode pone el texto en vertical ocupando su sitio real (de arriba
   abajo = 90°); el giro configurado se suma con transform: -90° le da la
   vuelta y se lee de abajo arriba. */
.myem-menu .m-flecha.con-texto { height: auto; min-height: var(--f-alto); }
.myem-menu .m-flecha.con-texto .m-flecha-barra {
  height: auto; min-height: var(--f-alto); padding: 10px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.myem-menu .m-flecha-txt {
  writing-mode: vertical-rl; transform: rotate(calc(var(--f-giro) - 90deg));
  font-family: var(--m-fuente); font-size: var(--f-txt); font-weight: 600; line-height: 1;
  letter-spacing: .04em; white-space: nowrap; color: var(--f-ico-col);
}
/* Panel a pantalla completa */
.myem-menu .m-panel {
  position: fixed; inset: 0; z-index: 99991; 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;
}
/* Cerrado del todo, el panel NO EXISTE para el navegador (display:none): ni
   ocupa pantalla, ni se pinta, ni calcula el desenfoque del cristal, que en
   móviles era lo que más costaba. front.js añade «montado» un instante antes
   de abrir y lo quita al acabar de cerrar, para que las animaciones se vean.
   (En la vista previa del builder se mantiene siempre montado.) */
.myem-menu:not(.vp-capa) .m-lat:not(.abierto):not(.montado) .m-panel { display: none; }
/* 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);
}
/* El «latido» solo corre con «Configura tu menú» a la vista: oculto seguiría
   gastando fotogramas sin que nadie lo vea */
.myem-menu .config-abierto .m-mini-flecha { 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); }