/* ══════════════════════════════════════════════════════════════════════════
   masterbar.css — Barra maestra de navegación (chasis compartido)
   Un solo componente para el visor (/app, tema oscuro) y el workspace (/,
   papel). Dos niveles:
     · Nivel 1: navegación persistente con labels en desktop amplio; se puede
       contraer. En anchos medios revela labels por hover/foco.
     · Nivel 2: panel contextual (304px) que se abre al clic en un ítem con
       panel propio; también empuja. Con pin y cierre.
   El empuje se propaga con variables CSS: el contenido de cada superficie
   consume var(--mb-total) en su margin/left y transiciona suave.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --mb-rail:64px;            /* rail colapsado (solo iconos) */
  --mb-open:252px;           /* rail expandido */
  --mb-panel:304px;          /* panel de segundo nivel */
  --mb-cur:var(--mb-rail);   /* ancho actual del rail */
  --mb-total:var(--mb-cur);  /* rail + panel: lo que consume el layout */
  --mb-top:46px;             /* alto del topbar aosenuma */
  --mb-ease:var(--ui-ease,cubic-bezier(.33,1,.68,1));
  --mb-dur:.26s;

  /* Paleta de marca (petróleo/teal/cta) — igual en ambas superficies */
  --mb-bg-a:rgba(10,31,38,.97);
  --mb-bg-b:rgba(10,31,38,.9);
  --mb-line:rgba(242,244,237,.09);
  --mb-tx:rgba(242,244,237,.62);
  --mb-tx-hi:#f2f4ed;
  --mb-teal:var(--ui-teal,#0e8a9a); --mb-teal-deep:var(--ui-petrol-800,#0a5560); --mb-teal-bright:var(--ui-teal-bright,#66b8c0);
  --mb-on-bg:rgba(74,156,165,.20); --mb-on-ring:rgba(74,156,165,.42); --mb-on-tx:#86d6e0;
  --mb-cta:#b4c96f;
  --mb-navy:#0a1f26;
}
html.mb-hover, html.mb-pinned{ --mb-cur:var(--mb-open); }
html.mb-wide:not(.mb-compact){ --mb-cur:var(--mb-open); }
html.mb-panel-open{ --mb-total:calc(var(--mb-cur) + var(--mb-panel)); }

/* ── Nivel 1 · rail ──────────────────────────────────────────────────────── */
.mb-rail{
  position:fixed; top:var(--mb-top); left:0; bottom:0; z-index:140;
  width:var(--mb-cur);
  display:flex; flex-direction:column; gap:4px; padding:12px 10px 10px;
  background:linear-gradient(180deg,var(--mb-bg-a) 0%,var(--mb-bg-b) 100%);
  backdrop-filter:blur(14px) saturate(1.06); -webkit-backdrop-filter:blur(14px) saturate(1.06);
  border-right:1px solid var(--mb-line);
  overflow-x:hidden; overflow-y:auto; scrollbar-width:none;
  transition:width var(--mb-dur) var(--mb-ease);
  overscroll-behavior:contain;
}
.mb-rail::-webkit-scrollbar{ display:none; }

/* Marca y contexto: dan orientación incluso antes del primer ítem. */
.mb-rail-brand{
  display:flex; align-items:center; gap:11px; flex:none; min-height:42px;
  padding:2px 2px 10px; margin-bottom:2px; border-bottom:1px solid var(--mb-line);
}
.mb-brand-mark{
  width:42px; height:34px; flex:none; display:flex; align-items:flex-end; justify-content:center;
  gap:3px; padding:8px 8px; border-radius:11px;
  background:rgba(102,184,192,.1); box-shadow:inset 0 0 0 1px rgba(102,184,192,.17);
}
.mb-brand-mark i{ display:block; width:3px; border-radius:3px; background:var(--mb-teal-bright); }
.mb-brand-mark i:nth-child(1){ height:8px; opacity:.6; }
.mb-brand-mark i:nth-child(2){ height:14px; }
.mb-brand-mark i:nth-child(3){ height:10px; opacity:.78; }
.mb-brand-copy{
  min-width:0; line-height:1.18; opacity:0; transform:translateX(-6px);
  transition:opacity .18s var(--mb-ease), transform .18s var(--mb-ease);
}
.mb-brand-copy b{ display:block; color:var(--mb-tx-hi); font-family:'Inter Tight','Inter',sans-serif; font-size:13px; font-weight:700; white-space:nowrap; }
.mb-brand-copy small{ display:block; margin-top:3px; color:var(--mb-tx); font-family:'Inter','Barlow',sans-serif; font-size:10px; white-space:nowrap; }

/* identidad (arriba): avatar + nombre de la cuenta; ancla al portafolio */
/* Identidad = disparador del menú de cuenta (es un <button>, no un enlace). */
.mb-id{
  display:flex; align-items:center; gap:10px; flex:none; width:100%;
  min-height:54px; padding:7px 7px; margin-top:5px;
  text-decoration:none; border-radius:12px;
  background:rgba(242,244,237,.055); border:1px solid rgba(242,244,237,.09);
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  transition:background .14s, border-color .14s, box-shadow .14s;
}
.mb-id:hover{ background:rgba(242,244,237,.09); border-color:rgba(102,184,192,.24); }
.mb-id:hover .mb-id-ava{ box-shadow:inset 0 0 0 1px rgba(102,184,192,.55); }
.mb-id:focus-visible{ outline:2px solid var(--mb-teal-br, #66b8c0); outline-offset:2px; }
.mb-id-ava{
  width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(150deg,var(--mb-teal),var(--mb-teal-deep)); color:#fff;
  font-family:'Inter Tight','Inter',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(242,244,237,.10);
  transition:box-shadow .15s, transform .15s var(--mb-ease);
}
/* Con foto el avatar es la imagen, no el degradado: el fondo se apaga para que
   no asome por los bordes redondeados. object-fit:cover recorta al cuadro sin
   deformar la cara. */
.mb-id-ava.has-foto{ background:none; }
.mb-id-ava img{ width:100%; height:100%; display:block; border-radius:inherit; object-fit:cover; }
.mb-id:hover .mb-id-ava{ transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(102,184,192,.5), 0 4px 14px -6px rgba(14,138,154,.6); }
.mb-id:focus-visible{ outline:2px solid var(--mb-teal-bright); outline-offset:2px; }
.mb-id-tx{ flex:1; min-width:0; line-height:1.2; opacity:0; transform:translateX(-6px); transition:opacity .18s var(--mb-ease), transform .18s var(--mb-ease); }
.mb-id-tx small{ display:block; margin-bottom:2px; color:var(--mb-teal-bright); font-family:'Inter Tight','Inter',sans-serif; font-size:8.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.mb-id-tx b{ display:block; font-family:'Inter Tight','Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--mb-tx-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-id-tx span{ display:block; font-size:10px; color:var(--mb-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-profile-chev{ width:15px; height:15px; flex:none; display:grid; place-items:center; opacity:0; color:var(--mb-tx); transition:opacity .18s; }
.mb-profile-chev svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }

/* ítems */
.mb-item{
  position:relative; display:flex; align-items:center; gap:11px; flex:none;
  width:100%; height:38px; padding:0 9px; border:none; border-radius:11px;
  background:transparent; color:var(--mb-tx); cursor:pointer; text-decoration:none;
  font-family:'Barlow','Inter',sans-serif; font-size:13px; font-weight:500; text-align:left;
  transition:background .14s var(--mb-ease), color .14s, box-shadow .14s;
}
.mb-item:hover{ background:rgba(242,244,237,.09); color:var(--mb-tx-hi); }
.mb-item:focus-visible{ outline:2px solid var(--mb-teal-bright); outline-offset:1px; }
.mb-item[aria-current], .mb-item.on{
  background:var(--mb-on-bg); color:var(--mb-on-tx);
  box-shadow:inset 0 0 0 1px var(--mb-on-ring);
}
/* ítem ACREDITADO que todavía no puede cumplir (ver `setEnabled` en masterbar.js).
   Se DECLARA, no se esconde: es la misma doctrina de `_goldenCard`, que pinta
   «no disponible» en vez de borrar la fila, y además un ítem que aparece y
   desaparece movería de sitio a sus vecinos en una navegación persistente. */
.mb-item.is-gated{ opacity:.45; cursor:not-allowed; }
.mb-item.is-gated:hover{ background:transparent; color:var(--mb-tx); }
/* marcador de activo estilo Supabase: barrita al borde izquierdo */
.mb-item[aria-current]::before, .mb-item.on::before{
  content:''; position:absolute; left:-9px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--mb-teal-bright);
}
.mb-ic{ width:38px; height:38px; margin:0 -9px; flex:none; display:grid; place-items:center; }
.mb-ic svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mb-lb{
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateX(-6px);
  transition:opacity .18s var(--mb-ease), transform .18s var(--mb-ease);
}
.mb-count{
  margin-left:auto; flex:none; font-family:'Inter Tight','Inter',sans-serif; font-size:10px; font-weight:700;
  color:#0a1518; background:var(--mb-cta); border-radius:99px; min-width:16px; height:16px;
  padding:0 5px; display:none; align-items:center; justify-content:center; line-height:1;
  opacity:0; transition:opacity .18s var(--mb-ease);
}
.mb-count.show{ display:inline-flex; }
/* badge numérico también en modo colapsado (esquina del icono) */
html:not(.mb-hover):not(.mb-pinned) .mb-count.show{
  position:absolute; top:2px; right:2px; opacity:1;
  box-shadow:0 0 0 2px rgba(10,31,38,.92);
}
/* chevron de "abre panel" (visible expandido) */
.mb-chev{ margin-left:auto; flex:none; opacity:0; transition:opacity .18s; }
.mb-chev svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
.mb-item .mb-count.show + .mb-chev{ margin-left:6px; }

/* labels visibles al expandir */
html.mb-hover .mb-lb, html.mb-pinned .mb-lb,
html.mb-hover .mb-id-tx, html.mb-pinned .mb-id-tx{ opacity:1; transform:none; }
html.mb-hover .mb-count.show, html.mb-pinned .mb-count.show{ opacity:1; }
html.mb-hover .mb-chev, html.mb-pinned .mb-chev{ opacity:.7; }
html.mb-hover .mb-brand-copy, html.mb-pinned .mb-brand-copy,
html.mb-wide:not(.mb-compact) .mb-brand-copy,
html.mb-wide:not(.mb-compact) .mb-lb,
html.mb-wide:not(.mb-compact) .mb-id-tx{ opacity:1; transform:none; }
html.mb-hover .mb-profile-chev, html.mb-pinned .mb-profile-chev,
html.mb-wide:not(.mb-compact) .mb-profile-chev{ opacity:.65; }
html.mb-wide:not(.mb-compact) .mb-count.show{ position:static; opacity:1; box-shadow:none; }
html.mb-wide:not(.mb-compact) .mb-chev{ opacity:.7; }

/* CTA (Nuevo análisis) */
.mb-item.mb-cta{
  min-height:42px; height:42px; margin:3px 0;
  background:var(--mb-teal); color:#fff; font-weight:700; justify-content:flex-start;
  box-shadow:0 10px 22px -14px rgba(14,138,154,.9), inset 0 0 0 1px rgba(255,255,255,.1);
}
.mb-item.mb-cta:hover{ background:#0d7e8d; color:#fff; }
.mb-item.mb-cta::before{ display:none; }

/* Switches Portafolio ↔ Visor (bajo el perfil; jerarquía alta) */
.mb-switches{
  flex:none; display:flex; flex-direction:column; gap:3px;
  padding:5px 0 2px; margin:0;
}
.mb-switches-label{
  height:0; overflow:hidden; padding:0 9px; color:var(--mb-tx);
  font-family:'Inter Tight','Inter',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; opacity:0;
  transition:height .18s var(--mb-ease), opacity .18s, padding .18s;
}
html.mb-hover .mb-switches-label, html.mb-pinned .mb-switches-label,
html.mb-wide:not(.mb-compact) .mb-switches-label{ height:24px; padding-top:7px; opacity:.7; }
.mb-item.mb-switch{
  height:36px; font-weight:600; letter-spacing:.01em;
  background:rgba(242,244,237,.05);
  box-shadow:inset 0 0 0 1px rgba(242,244,237,.08);
}
.mb-item.mb-switch:hover{
  background:rgba(242,244,237,.11); color:var(--mb-tx-hi);
}
.mb-item.mb-switch.is-current,
.mb-item.mb-switch[aria-current]{
  background:linear-gradient(135deg,rgba(14,138,154,.34),rgba(14,138,154,.18));
  color:#9fdce4;
  box-shadow:inset 0 0 0 1px rgba(102,184,192,.45), 0 6px 14px -10px rgba(14,138,154,.7);
}
.mb-item.mb-switch.is-current::before,
.mb-item.mb-switch[aria-current]::before{
  content:''; position:absolute; left:-9px; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--mb-teal-bright);
}
.mb-item.mb-switch .mb-ic svg{ stroke-width:1.85; }

/* separadores / grupos */
.mb-sep{ flex:none; height:1px; margin:6px 3px; background:var(--mb-line); }
.mb-group{
  flex:none; padding:8px 9px 3px; font-family:'Inter Tight','Inter',sans-serif;
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mb-tx); opacity:0; white-space:nowrap; overflow:hidden;
  transition:opacity .18s var(--mb-ease);
}
.mb-group[hidden], .mb-item[hidden]{ display:none !important; }
html.mb-hover .mb-group, html.mb-pinned .mb-group{ opacity:.75; }
html.mb-wide:not(.mb-compact) .mb-group{ opacity:.75; }
.mb-spacer{ flex:1 1 auto; min-height:8px; }

/* tooltips SOLO cuando el rail está colapsado (sin hover-expand aún) */
html:not(.mb-hover):not(.mb-pinned):not(.mb-mobile) .mb-item[data-tip]::after{
  content:attr(data-tip); position:absolute; left:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(-5px); white-space:nowrap;
  background:rgba(13,19,24,.97); color:var(--mb-tx-hi); font-size:11px; font-weight:500;
  font-family:'Inter',sans-serif; padding:5px 9px; border-radius:7px; pointer-events:none;
  opacity:0; transition:opacity .14s var(--mb-ease) .28s, transform .14s var(--mb-ease) .28s;
  box-shadow:0 6px 18px rgba(0,0,0,.3); border:1px solid var(--mb-line); z-index:150;
}
html:not(.mb-hover):not(.mb-pinned):not(.mb-mobile) .mb-item[data-tip]:hover::after{
  opacity:1; transform:translateY(-50%) translateX(0);
}
html.mb-wide:not(.mb-compact) .mb-item[data-tip]::after{ display:none; }
/* Excepción para los ítems ACREDITADOS, y va DENTRO del rail a propósito.
   MEDIDO en el visor (1280×860, rail expandido a 252 px): el tooltip de arriba
   se pinta con `opacity:1` y AUN ASÍ no se ve, porque `.mb-rail` es
   `overflow-x:hidden` y `left:calc(100% + 12px)` cae justo fuera del recorte.
   Vale para todos los ítems —es un defecto de la casa, anterior a esto y no se
   arregla aquí—, pero en los demás el tooltip sólo repite la etiqueta y aquí
   dice el MOTIVO por el que el ítem no puede cumplir: si se recorta, el ítem se
   queda apagado y mudo. Por eso este se ancla BAJO el ítem y dentro del ancho
   del rail, donde nada lo recorta; el hover del rail ya lo expande a 252 px, así
   que hay sitio para leerlo. `title` viaja además como respaldo nativo. */
.mb-item.is-gated[data-tip]::after{
  content:attr(data-tip); position:absolute; left:9px; right:9px; top:calc(100% - 2px);
  display:block; white-space:normal; text-align:left;
  background:rgba(13,19,24,.97); color:var(--mb-tx-hi); font-size:10.5px; font-weight:500;
  font-family:'Inter',sans-serif; line-height:1.35; padding:6px 9px; border-radius:7px;
  pointer-events:none; opacity:0; transform:translateY(-3px);
  transition:opacity .14s var(--mb-ease) .18s, transform .14s var(--mb-ease) .18s;
  box-shadow:0 6px 18px rgba(0,0,0,.3); border:1px solid var(--mb-line); z-index:150;
}
.mb-item.is-gated[data-tip]:hover::after{ opacity:1; transform:translateY(0); }
/* La línea de arriba («…mb-wide… display:none») le gana en ESPECIFICIDAD a la
   regla de `.is-gated`, así que la excepción hay que repetirla en su mismo
   régimen o el motivo se apaga justo en el ancho más usado. Medido: sin esta
   línea, `getComputedStyle(item, '::after').display` era `none` con el rail
   expandido. */
html.mb-wide:not(.mb-compact) .mb-item.is-gated[data-tip]::after{ display:block; }
/* el rail colapsado (56 px) no da para leer un motivo; ahí manda el tooltip de
   la casa, y el hover del propio rail lo expande antes de que dé tiempo a leer */
html:not(.mb-hover):not(.mb-pinned):not(.mb-wide) .mb-item.is-gated[data-tip]::after{ display:none; }

/* pie: pin del rail + cuenta */
.mb-foot{ flex:none; display:flex; flex-direction:column; gap:3px; padding-top:7px; border-top:1px solid var(--mb-line); }
.mb-pin svg{ transition:transform .2s var(--mb-ease); }
html.mb-pinned .mb-pin svg{ transform:rotate(180deg); }
html.mb-pinned .mb-pin{ color:var(--mb-teal-bright); }
html.mb-wide:not(.mb-compact) .mb-pin svg{ transform:rotate(180deg); }
html.mb-wide:not(.mb-compact) .mb-pin{ color:var(--mb-teal-bright); }

/* ── Nivel 2 · panel contextual ──────────────────────────────────────────── */
.mb-panel{
  position:fixed; top:var(--mb-top); left:var(--mb-cur); bottom:0; z-index:130;
  width:var(--mb-panel);
  display:flex; flex-direction:column;
  transform:translateX(-16px); opacity:0; pointer-events:none; visibility:hidden;
  transition:left var(--mb-dur) var(--mb-ease), transform var(--mb-dur) var(--mb-ease),
             opacity .2s var(--mb-ease), visibility 0s linear .26s;
  /* superficie por tema: papel en el workspace, vidrio oscuro en el visor */
  background:var(--mb-panel-bg, #fbfaf6);
  color:var(--mb-panel-tx, #23282b);
  border-right:1px solid var(--mb-panel-line, rgba(35,40,43,.12));
  box-shadow:12px 0 34px -22px rgba(12,52,60,.35);
}
html.mb-panel-open .mb-panel{
  transform:none; opacity:1; pointer-events:auto; visibility:visible;
  transition:left var(--mb-dur) var(--mb-ease), transform var(--mb-dur) var(--mb-ease),
             opacity .2s var(--mb-ease), visibility 0s;
}
.mb-panel-h{
  flex:none; display:flex; align-items:center; gap:8px; padding:14px 14px 11px;
  border-bottom:1px solid var(--mb-panel-line, rgba(35,40,43,.12));
}
.mb-panel-h b{
  flex:1; min-width:0; font-family:'Bricolage Grotesque','Inter Tight',sans-serif;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mb-panel-btn{
  flex:none; width:26px; height:26px; display:grid; place-items:center; border:none;
  border-radius:7px; background:transparent; color:inherit; opacity:.55; cursor:pointer;
  transition:opacity .13s, background .13s;
}
.mb-panel-btn:hover{ opacity:1; background:rgba(127,127,127,.12); }
.mb-panel-btn:focus-visible{ outline:2px solid var(--mb-teal-bright); outline-offset:1px; }
.mb-panel-btn svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.mb-panel-btn.pinned{ opacity:1; color:var(--mb-teal); background:rgba(14,138,154,.12); }
.mb-panel-body{ flex:1; min-height:0; overflow-y:auto; padding:12px 12px 20px; }

/* utilería del contenido del panel (listas estilo Supabase) */
.mb-panel-sec{
  margin:10px 2px 6px; font-family:'Inter Tight','Inter',sans-serif; font-size:9.5px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.5;
}
.mb-panel-sec:first-child{ margin-top:0; }
.mb-list{ display:flex; flex-direction:column; gap:2px; }
.mb-row{
  display:flex; align-items:center; gap:9px; width:100%; padding:8px 9px; border:none;
  border-radius:9px; background:transparent; color:inherit; cursor:pointer; text-align:left;
  font-family:'Barlow','Inter',sans-serif; font-size:12.5px; font-weight:500; text-decoration:none;
  transition:background .12s;
}
.mb-row:hover{ background:rgba(14,138,154,.09); }
.mb-row:focus-visible{ outline:2px solid var(--mb-teal-bright); outline-offset:1px; }
.mb-row.on{ background:rgba(14,138,154,.14); color:var(--mb-teal-deep); font-weight:600; }
.mb-row-cta{
  background:rgba(14,138,154,.14) !important;
  box-shadow:inset 0 0 0 1px rgba(14,138,154,.28);
  font-weight:600;
}
.mb-row-cta:hover{ background:rgba(14,138,154,.22) !important; }
.mb-row-cta .tx span{ color:inherit; }
.mb-row svg{ width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; opacity:.72; }
.mb-row .tx{ flex:1; min-width:0; line-height:1.3; }
.mb-row .tx small{ display:block; font-size:10px; opacity:.6; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-row .tx > span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-row .aux{ flex:none; font-family:'Inter Tight',sans-serif; font-size:10px; opacity:.55; }
.mb-panel-empty{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  padding:38px 18px; opacity:.75;
}
.mb-panel-empty svg{ width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.4; opacity:.55; }
.mb-panel-empty b{ font-family:'Bricolage Grotesque',sans-serif; font-size:13.5px; font-weight:600; }
.mb-panel-empty p{ font-size:11.5px; line-height:1.5; max-width:220px; margin:0; }
.mb-panel-search{ position:relative; margin-bottom:10px; }
.mb-panel-search svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; opacity:.5; pointer-events:none; }
.mb-panel-search input{
  width:100%; height:32px; padding:0 10px 0 30px; font-family:'Inter',sans-serif; font-size:12px;
  color:inherit; background:rgba(127,127,127,.08); border:1px solid rgba(127,127,127,.18);
  border-radius:99px; outline:none; transition:border-color .14s;
}
.mb-panel-search input:focus{ border-color:var(--mb-teal); }
.mb-panel-select-wrap{ display:block; margin:0 0 4px; }
.mb-panel-select{
  width:100%; height:34px; padding:0 30px 0 10px; box-sizing:border-box;
  font-family:'Inter Tight','Inter',sans-serif; font-size:12px; font-weight:500;
  color:inherit; background:rgba(127,127,127,.08);
  border:1px solid rgba(127,127,127,.18); border-radius:9px; outline:none;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
  transition:border-color .14s, background-color .14s; cursor:pointer;
}
.mb-panel-select:hover{ background-color:rgba(14,138,154,.08); }
.mb-panel-select:focus{ border-color:var(--mb-teal); }

/* Menús por fila (Análisis recientes / historial del visor) */
.mb-job{ display:flex; flex-direction:column; gap:0; }
.mb-job-menus{
  display:flex; flex-wrap:wrap; gap:4px;
  padding:0 6px 8px 33px;
}
.mb-job-menu{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 8px; border-radius:7px;
  font-family:'Inter Tight','Inter',sans-serif; font-size:10.5px; font-weight:600;
  color:inherit; text-decoration:none; opacity:.72;
  background:rgba(127,127,127,.08); border:1px solid rgba(127,127,127,.14);
  transition:background .12s, opacity .12s, border-color .12s;
}
.mb-job-menu:hover{ opacity:1; background:rgba(14,138,154,.12); border-color:rgba(14,138,154,.35); }
.mb-job-menu:focus-visible{ outline:2px solid var(--mb-teal-bright); outline-offset:1px; }
.mb-job-menu svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; opacity:.8; }


/* ── Menú de cuenta ──────────────────────────────────────────────────────── */
/* La cuenta vive en la identidad del TOPE: el popover cuelga desde arriba. */
.mb-account-pop{
  position:fixed; left:10px; z-index:180; width:min(310px, calc(100vw - 20px));
  background:var(--mb-navy); color:var(--mb-tx-hi);
  border:1px solid rgba(102,184,192,.2); border-radius:16px;
  box-shadow:0 28px 64px -20px rgba(0,0,0,.68); padding:11px;
  transform-origin:top left; animation:mbPop .16s var(--mb-ease);
}
@keyframes mbPop{ from{ opacity:0; transform:scale(.96) translateY(6px);} to{ opacity:1; transform:none; } }
.mb-account-kicker,
.mb-account-section{
  padding:3px 9px 7px; color:var(--mb-teal-bright);
  font-family:'Inter Tight','Inter',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.mb-account-id{ display:flex; align-items:center; gap:11px; padding:6px 9px 11px; }
/* El avatar del popover es un <span>, así que `.mb-account-id span` (0,1,1) le
   ganaba a `.mb-id-ava` (0,1,0) y le imponía --mb-tx: las iniciales quedaban a
   2.74:1 sobre el degradado teal. Se re-fija el blanco aquí (0,2,0) → 6.37:1. */
.mb-account-id .mb-id-ava{ width:42px; height:42px; border-radius:12px; font-size:12.5px; color:#fff; }
.mb-account-id div{ min-width:0; line-height:1.25; }
.mb-account-id b{ display:block; font-size:14px; font-family:'Inter Tight',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-account-id span{ display:block; margin-top:3px; font-size:10.5px; color:var(--mb-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-account-note{
  margin:0 5px 10px; padding:9px 10px; color:rgba(242,244,237,.57);
  background:rgba(102,184,192,.07); border:1px solid rgba(102,184,192,.11);
  border-radius:10px; font-size:10.5px; line-height:1.45;
}
/* .45 daba 4.09:1 sobre el panel (#0a1f26): por debajo de AA para texto normal.
   .55 lo deja en 5.45:1 sin dejar de leerse como encabezado secundario. */
.mb-account-section{ padding-top:5px; color:rgba(242,244,237,.55); }
.mb-account-section--session{ margin-top:7px; padding-top:10px; border-top:1px solid rgba(242,244,237,.11); }
.mb-account-item{
  display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:8px 9px; border:none;
  border-radius:10px; background:transparent; color:var(--mb-tx-hi); cursor:pointer; text-align:left;
  font-family:'Barlow','Inter',sans-serif; text-decoration:none; transition:background .12s;
}
.mb-account-item:hover{ background:rgba(242,244,237,.09); }
.mb-account-item:focus-visible{ outline:2px solid var(--mb-teal-bright); outline-offset:1px; }
.mb-account-item > svg{ width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; opacity:.78; }
.mb-account-item > svg:last-child:not(:first-child){ width:13px; height:13px; margin-left:auto; opacity:.45; }
.mb-account-item > span{ flex:1; min-width:0; }
.mb-account-item b{ display:block; color:inherit; font-size:12.5px; font-weight:600; }
.mb-account-item small{ display:block; margin-top:2px; color:var(--mb-tx); font-size:10px; font-weight:400; }
.mb-account-item.danger{ color:#e8a294; }
.mb-account-item.danger:hover{ background:rgba(196,98,79,.14); }

/* ── Móvil (≤768px): drawer off-canvas + hamburguesa ─────────────────────── */
.mb-burger{
  display:none; position:fixed; top:7px; left:10px; z-index:170;
  width:32px; height:32px; place-items:center; border:1px solid rgba(242,244,237,.2);
  border-radius:9px; background:rgba(10,31,38,.85); color:#f2f4ed; cursor:pointer;
}
.mb-burger svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.mb-burger:focus-visible{ outline:2px solid var(--mb-teal-bright); outline-offset:2px; }
.mb-scrim{
  display:none; position:fixed; inset:0; z-index:135; background:rgba(8,18,22,.5);
  opacity:0; transition:opacity .2s;
}
html.mb-mobile{ --mb-total:0px; }
html.mb-mobile .mb-burger{ display:grid; }
/* la hamburguesa vive sobre el topbar: recorre su contenido para no taparlo */
html.mb-mobile .aosenuma-topbar{ padding-left:50px; }
html.mb-mobile .mb-rail{
  width:var(--mb-open); transform:translateX(calc(-100% - 8px));
  transition:transform var(--mb-dur) var(--mb-ease);
  box-shadow:24px 0 48px -18px rgba(0,0,0,.5);
  padding-top:14px;
}
html.mb-mobile .mb-lb, html.mb-mobile .mb-id-tx, html.mb-mobile .mb-group{ opacity:1; transform:none; }
html.mb-mobile .mb-brand-copy, html.mb-mobile .mb-profile-chev{ opacity:1; transform:none; }
html.mb-mobile .mb-switches-label{ height:24px; padding-top:7px; opacity:.7; }
html.mb-mobile .mb-chev{ opacity:.7; }
html.mb-mobile .mb-count.show{ opacity:1; }
html.mb-mobile .mb-rail-toggle{ display:none; }
html.mb-mobile.mb-drawer .mb-rail{ transform:none; }
html.mb-mobile.mb-drawer .mb-scrim{ display:block; opacity:1; }
/* el panel de nivel 2 se apila SOBRE el drawer (stack), a lo ancho disponible */
html.mb-mobile .mb-panel{ left:0; width:min(92vw, 360px); z-index:150; }
html.mb-mobile.mb-panel-open.mb-drawer .mb-panel{ left:0; width:min(92vw, 360px); }
html.mb-mobile.mb-panel-open.mb-drawer .mb-rail{ transform:translateX(calc(-100% - 8px)); }
html.mb-mobile .mb-account-pop{ left:10px !important; width:calc(100vw - 20px); }

/* ── Tema del panel de nivel 2 por superficie ────────────────────────────
   El rail es navy en ambas; el panel adopta la superficie: papel en la
   workspace (default) y vidrio oscuro en el visor (html.mb-dark). ── */
html.mb-dark .mb-panel{
  --mb-panel-bg:rgba(13,22,26,.97);
  --mb-panel-tx:#e7ebe4;
  --mb-panel-line:rgba(242,244,237,.10);
  backdrop-filter:blur(14px) saturate(1.05); -webkit-backdrop-filter:blur(14px) saturate(1.05);
}
html.mb-dark .mb-row:hover{ background:rgba(102,184,192,.12); }
html.mb-dark .mb-row.on{ background:rgba(74,156,165,.22); color:#86d6e0; }
/* el visor puede estar en theme-light: el panel vuelve a papel */
html.mb-dark.theme-light .mb-panel{
  --mb-panel-bg:#fbfaf6; --mb-panel-tx:#23282b; --mb-panel-line:rgba(35,40,43,.12);
}
html.mb-dark.theme-light .mb-row.on{ background:rgba(14,138,154,.14); color:var(--mb-teal-deep); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .mb-rail, .mb-panel, .mb-lb, .mb-id-tx, .mb-brand-copy, .mb-switches-label,
  .mb-count, .mb-chev, .mb-profile-chev, .mb-scrim{ transition:none !important; }
  .mb-account-pop{ animation:none !important; }
}