/* mb-unify.css — estilo parejo con el menú de accesos directos (solo colores/íconos/botones; sin layout ni funciones) */
:root{--mbu-acc:#7c3aed;--mbu-acc-bg:rgba(124,58,237,.18);--mbu-ic-bg:rgba(127,127,127,.2)}

/* 1) Botones principales: negros en tema claro, blancos en tema oscuro */
.mb-fr-b1,.mb-ev-cta,.mb-bd-primary,.mbn-ok,.mbp-create,.mbp-b.pri,.mb-gm-btn.main,
button.bg-gradient-to-r[class*="to-rose-"],a.bg-gradient-to-r[class*="to-rose-"],
button[class*="bg-violet-6"],button[class*="bg-rose-5"],button[class*="bg-rose-6"]{
  background-image:none!important;background-color:var(--foreground)!important;color:var(--background)!important}
.mb-fr-b1 svg,.mb-ev-cta svg,.mb-bd-primary svg,.mbn-ok svg,.mbp-create svg,.mbp-b.pri svg,.mb-gm-btn.main svg,
button.bg-gradient-to-r[class*="to-rose-"] svg,button[class*="bg-violet-6"] svg,button[class*="bg-rose-5"] svg,button[class*="bg-rose-6"] svg{color:inherit!important}

/* 2) Acentos y estados activos: igual que el menú (violeta sobre violeta suave) */
.mb-ev-b.on,.mb-ev-pill.on,.mbn-tab.on,.dark .mbn-tab.on{background:var(--mbu-acc-bg)!important;color:var(--mbu-acc)!important}
.mb-fbp .mb-ptabs [role=tab][data-state=active],.mb-fbg .mb-gtabs button.on,.mbpd-tabs button[data-on="1"]{color:var(--mbu-acc)!important;border-bottom-color:var(--mbu-acc)!important}
.mbt-link,.mbn-time.new,.dark .mbn-time.new{color:var(--mbu-acc)!important}
.mbn-dot,.dark .mbn-dot,.mbt-day.today .mbt-dn{background:var(--mbu-acc)!important}
a[class*="text-blue-"],button[class*="text-blue-"]{color:var(--mbu-acc)!important}

/* 3) Íconos planos dentro de círculo gris, como en el menú */
.mbs-ic,.mbs-sq{background:var(--mbu-ic-bg)!important;color:var(--foreground)!important}
[data-view]:not([data-view="home"]) svg[class*="text-violet-"]:not(article svg),
[data-view]:not([data-view="home"]) svg[class*="text-rose-"]:not(article svg),
[data-view]:not([data-view="home"]) svg[class*="text-amber-"]:not(article svg),
[data-view]:not([data-view="home"]) svg[class*="text-orange-"]:not(article svg),
[data-view]:not([data-view="home"]) svg[class*="text-fuchsia-"]:not(article svg),
[data-view]:not([data-view="home"]) svg[class*="text-cyan-"]:not(article svg),
[data-view]:not([data-view="home"]) svg[class*="text-emerald-"]:not(article svg),
[data-view]:not([data-view="home"]) svg[class*="text-teal-"]:not(article svg),
[data-view]:not([data-view="home"]) svg[class*="text-pink-"]:not(article svg),
[data-view]:not([data-view="home"]) svg[class*="text-blue-"]:not(article svg){color:var(--foreground)!important}
.mb-bd-ic{background:var(--mbu-ic-bg)}
.mb-bd-nav.on .mb-bd-ic{background:var(--mbu-acc-bg)}
[data-view] .mb-bd-nav.on .mb-bd-ic svg{color:var(--mbu-acc)!important}

/* 4) Tarjetas con degradado rosa/violeta -> fondo neutro como las del menú */
[class*="bg-gradient-to-br"][class*="/10"][class*="to-rose-500"],
[class*="bg-gradient-to-br"][class*="/15"][class*="to-rose-500"]{background-image:none!important;background-color:var(--muted)!important}
[class*="bg-gradient-to-br"][class*="to-rose-500"].mx-auto.rounded-2xl[class*="h-1"]{background-image:none!important;background-color:var(--mbu-ic-bg)!important;color:var(--foreground)!important}

/* 5) Configuración: íconos del panel izquierdo en círculo gris, como el menú */
.mb-set-l button>svg{width:38px!important;height:38px!important;flex:0 0 38px!important;padding:9px;box-sizing:border-box;border-radius:9999px;background:var(--mbu-ic-bg);color:var(--foreground)}
.mb-set-l button.bg-muted>svg{background:var(--mbu-acc-bg);color:var(--mbu-acc)}

/* 6) Línea separadora en la barra lateral de Amigos, Eventos y Cumpleaños (como Grupos, Páginas, Guardado y Configuración) */
@media(min-width:1024px){.mb-bd-layout>.mb-bd-side{border-right:1px solid var(--border);padding-right:12px;top:65px;max-height:none;height:calc(100vh - 65px)}}