/* ============================================================================
   Momix — estilos del menú del usuario del CRM en la cara pública.

   POR QUÉ ES UN ARCHIVO APARTE. El menú lo emite UN componente PHP compartido
   (components/public_usermenu.php) que usan la home y el explorador. Sus estilos,
   en cambio, vivían solo en home.css — así que en Home-Mapa el avatar salía como
   un recuadro negro sin bordes ni fondo y el panel, al abrirse, no tenía ni
   posición ni superficie (Máximo, 2026-08-26: "el ícono quedó con recuadro negro
   y además hacés clic y no anda"). Un componente compartido cuyo CSS no se
   comparte funciona en la pantalla donde nació y se rompe en la segunda — es el
   mismo pozo que ya dio el 500 dentro del menú el 2026-08-25, y por eso ahora
   viajan juntos los tres archivos: .php, .css y .js.

   Usa los tokens de tema (--card, --bord, --head, --mut, --pg): los definen tanto
   home.css como global.css, con los mismos nombres, para claro y oscuro.
   ============================================================================ */

/* La barra de la home pinta TODOS sus links de blanco (`.mx-nav a`, 0-2-0) para que se lean sobre
   el hero oscuro. El panel del menú vive adentro de esa barra pero es una superficie CLARA, así
   que esa regla le ganaba a `.mx-um-item` (0-1-0) y "Ir al panel" y "Mi perfil" salían blancos
   sobre blanco — invisibles salvo al pasar el mouse. "Cerrar sesión" se veía porque es un
   <button> y la regla del nav solo alcanza a los <a>: por eso el menú parecía tener un solo
   ítem (Máximo, 2026-08-26).
   Se resuelve con especificidad: `.mx-um-panel .mx-um-item` (0-2-0) empata con `.mx-nav a` y gana
   por orden, y además no depende de qué barra lo contenga. */

/* Los tokens `--mxum-*` los define CADA pantalla apuntando a su propia paleta — el mismo patrón
   que ya usa filters.css con `--mxf-*`. Así el menú hereda claro/oscuro de la pantalla que lo
   contiene sin que este archivo tenga que conocer ninguna de las dos: la home los mapea a
   --card/--bord/--head… y el explorador a --x-s/--x-bd/--x-tx…, que ya cambian solos en oscuro.
   Cada `var()` lleva su valor de respaldo ADENTRO — `var(--mxum-card, #FFFFFF)` — y no como un
   bloque `.mx-um { --mxum-card:#FFFFFF }`. Esa fue la primera versión y estaba mal: una declaración
   sobre `.mx-um` no es un respaldo, es una asignación, y le gana al valor que hereda del `body` de
   la pantalla. El menú quedaba blanco SIEMPRE, también en tema oscuro. Lo agarró el test al
   comprobar que la página estuviera de verdad en oscuro antes de medir. */
.mx-um { position:relative; display:inline-flex; }
.mx-um-btn { border:none; background:none; padding:0; cursor:pointer; border-radius:999px; line-height:0;
  transition:transform .15s, box-shadow .2s; }
.mx-um-btn:hover { transform:translateY(-1px); box-shadow:0 0 0 3px rgba(241,245,249,.18); }
.mx-um .av { width:36px; height:36px; border-radius:999px; overflow:hidden; display:inline-flex;
  align-items:center; justify-content:center; background:var(--mxum-av-bg, #22D3A6); color:var(--mxum-av-tx, #08111F);
  font:600 15px 'Outfit',sans-serif; text-transform:uppercase; }
.mx-um .av img { width:100%; height:100%; object-fit:cover; display:block; }
.mx-um .av-40 { width:40px; height:40px; font-size:16px; }
.mx-um-panel { position:absolute; top:calc(100% + 10px); right:0; z-index:60; min-width:248px;
  background:var(--mxum-card, #FFFFFF); border:1px solid var(--mxum-bord, #E2E8F0); border-radius:16px; padding:6px;   /* mismas medidas que el menú del panel */
  box-shadow:0 18px 40px rgba(8,17,31,.28); animation:mxUmIn .18s ease; }
.mx-um-panel[hidden] { display:none; }
.mx-um-head { display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid var(--mxum-bord, #E2E8F0); margin-bottom:6px; }
.mx-um-head strong { display:block; font:600 14px 'Outfit',sans-serif; color:var(--mxum-tx, #0F172A); }
.mx-um-head span { display:block; font:400 12px 'Manrope',sans-serif; color:var(--mxum-tx2, #475569);
  max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mx-um-item { display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px; border-radius:9px;
  font:500 13.5px 'Manrope',sans-serif; color:var(--mxum-tx, #0F172A); text-decoration:none; background:none; border:none;
  cursor:pointer; text-align:left; transition:background .15s; }
.mx-um-item:hover { background:var(--mxum-hover, #F8FAFC); color:var(--mxum-tx, #0F172A); }
.mx-um-item svg { flex:none; color:var(--mxum-tx2, #475569); }
@keyframes mxUmIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* La regla de arriba tapaba SOLO el color, y la barra de la home también le impone a sus <a> el
   `display` y el `padding`. Resultado: "Ir al panel" y "Mi perfil" salían con padding 0 y
   display:inline-flex —apretados y sin altura— mientras "Cerrar sesión", que es un <button> y no
   entra en esa regla, se veía bien. Por eso el menú seguía viéndose distinto al del panel aunque
   los ítems ya fueran los mismos (Máximo, 02/09/2026).
   La caja entera va acá, en la regla que gana: no alcanza con corregir el color. */
.mx-um-panel .mx-um-item { display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border-radius:10px; font:500 14px 'Manrope',sans-serif; text-align:left;
  color:var(--mxum-tx, #0F172A); text-decoration:none; background:none; border:none; cursor:pointer; }
.mx-um-panel .mx-um-item:hover { background:var(--mxum-hover, #F8FAFC); color:var(--mxum-tx, #0F172A); }
.mx-um-panel .mx-um-item svg { color:var(--mxum-tx2, #475569); flex:none; }

/* ── Paridad con el menú del panel (Máximo, 01/09/2026) ───────────────────────────────────────
   Los dos menús se habían separado: acá faltaban el rol y, para el SuperAdmin, «Modo Admin» y
   «Seguridad de la plataforma». Ahora los ítems los emite el mismo componente que el del panel, así
   que sólo faltaba vestir las piezas que antes no existían de este lado. */

/* El rol: la MISMA insignia que en el panel, no una parecida. Allá es `.badge` —fondo de acento
   suave, texto de acento— alineada a la izquierda debajo del mail. La primera versión la hizo gris
   sobre gris y centrada, y por eso el menú seguía viéndose distinto aunque los items ya fueran los
   mismos (Máximo, 02/09). */
.mx-um-head .mx-um-role { display:inline-flex; align-items:center; align-self:flex-start;
  padding:2px 10px; border-radius:999px; font:500 12px 'Manrope',sans-serif;
  background:var(--mxum-badge-bg, #DDFBF5); color:var(--mxum-badge-tx, #0B6E63); gap:5px; margin-top:2px; }
/* Va con `.mx-um-head` adelante por especificidad: la insignia es un <span> dentro del encabezado, y
   `.mx-um-head span` (0-1-1) le ganaba a `.mx-um-role` (0-1-0) pintándola del gris del mail. Es el
   mismo pozo que este archivo ya documenta arriba para los items. */
/* El bloque del encabezado apila nombre / mail / insignia alineados a la IZQUIERDA, como el panel.
   Sin esto la insignia salía centrada respecto del bloque. */
.mx-um-head > div { min-width:0; display:flex; flex-direction:column; gap:2px; align-items:flex-start; }

/* "Cerrar sesión" en rojo, igual que en el panel (allá es `.menu-item-btn`). El componente
   compartido emite `<clase>-btn`, así que acá le toca a `.mx-um-item-btn` — y NO alcanza con
   pintarlo: el `.mx-um-panel .mx-um-item` de más arriba tiene más especificidad y le ganaba. */
.mx-um-panel .mx-um-item-btn { color:var(--mxum-danger, #DC2626); }
.mx-um-panel .mx-um-item-btn svg { color:var(--mxum-danger, #DC2626); }
/* El "Modo Admin" es un botón también, pero sólo se pinta de rojo cuando está ENCENDIDO: apagado es
   una opción más. Se declara después para ganarle a la regla de arriba. */
.mx-um-panel form[action="/admin-mode"] .mx-um-item { color:var(--mxum-tx, #0F172A); }
.mx-um-panel form[action="/admin-mode"] .mx-um-item svg { color:var(--mxum-tx2, #475569); }
.mx-um-panel form[action="/admin-mode"] .mx-um-item.is-on,
.mx-um-panel form[action="/admin-mode"] .mx-um-item.is-on svg { color:var(--mxum-danger, #DC2626); }

/* El separador antes de "Cerrar sesión" lo emite el componente compartido con la clase del panel
   (`menu-sep`), así que hay que darle estilo también acá — si no, en la cara pública se vería como
   una línea sin definir. */
.mx-um-panel .menu-sep { height:1px; background:var(--mxum-bord, #E2E8F0); margin:6px 4px; border:0; }

/* «Modo Admin» encendido: el mismo rojo de aviso que en el panel, para que se note que el SuperAdmin
   está operando con permisos ampliados. */
.mx-um-item.is-on { color:var(--mxum-danger, #DC2626); font-weight:700; }
.mx-um-item.is-on svg { color:var(--mxum-danger, #DC2626); }

/* El botón de un <form> dentro del panel tiene que ocupar el ancho como los <a>: sin esto, «Modo
   Admin» y «Cerrar sesión» quedaban angostos y desalineados respecto de los demás ítems. */
.mx-um-panel form { margin:0; }
.mx-um-panel form .mx-um-item { width:100%; }

/* Aviso de MODO BROKER en la cara pública (Máximo, 02/09/2026). El panel tiene su banda amarilla
   arriba; acá no había nada, así que uno entraba a un cliente, se iba a la Home y al volver se
   encontraba operando como esa inmobiliaria sin acordarse. Va ARRIBA de todo en el menú y con el
   color de aviso, porque es información sobre en nombre de quién estás actuando. */
.mx-um-item-broker { padding:9px 10px 4px; border-radius:10px; background:var(--mxum-warn-bg, #FEF3C7); margin-bottom:4px; }
.mx-um-item-broker > span { display:block; font:400 12.5px 'Manrope',sans-serif;
  color:var(--mxum-warn-tx, #92400E); margin-bottom:2px; }
.mx-um-item-broker > span strong { font-weight:700; }
.mx-um-item-broker form { margin:0; }
.mx-um-panel .mx-um-item-broker .mx-um-item { color:var(--mxum-warn-tx, #92400E); padding:6px 0 4px; }
.mx-um-panel .mx-um-item-broker .mx-um-item svg { color:var(--mxum-warn-tx, #92400E); }
.mx-um-panel .mx-um-item-broker .mx-um-item:hover { background:transparent; text-decoration:underline; }

/* ── Menú del avatar del VISITANTE (lo construye assets/public-usermenu.js) ─────────────────
   Estaba COPIADO en home.css y en global.css, palabra por palabra, y la ficha pública habría
   sido la tercera copia (04/09/2026). Acá está una sola vez: las tres pantallas ya cargaban
   esta hoja. Lo único que queda en cada página son sus colores, porque cada una nombra sus
   variables de tema distinto (--card/--x-s/--sfc). */
.pu-um { position:relative; }
.pu-um-btn { display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:0 6px 0 0;
  background:none; border:none; cursor:pointer; color:inherit; }
.pu-um-av { display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:#22D3A6; color:#08111F; font:700 14px 'Manrope',sans-serif; flex:none; }
.pu-um-av-lg { width:40px; height:40px; font-size:16px; }
.pu-um-caret { opacity:.6; transition:transform .22s; }
.pu-um.is-open .pu-um-caret { transform:rotate(180deg); }
.pu-um-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:236px;
  padding:6px; border-radius:13px; box-shadow:0 14px 38px rgba(8,17,31,.22); }
/* El `[hidden]` del navegador pierde por cascada contra cualquier `display` de clase: sin esto el
   panel queda SIEMPRE abierto. Es la trampa que ya mordió tres veces en este proyecto. */
.pu-um-panel[hidden] { display:none; }
.pu-um-head { display:flex; align-items:center; gap:10px; padding:10px 10px 12px; }
.pu-um-head strong { display:block; font:700 13.5px 'Manrope',sans-serif; }
.pu-um-head span { display:block; font-size:12px; opacity:.7; overflow-wrap:anywhere; }
.pu-um-item { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 10px;
  border:none; border-radius:9px; background:none; text-decoration:none; cursor:pointer;
  font:500 13.5px 'Manrope',sans-serif; text-align:left; transition:background .15s; }
.pu-um-item svg { flex:none; opacity:.75; }
.pu-um-sep { margin-top:4px; padding-top:4px; }
