:root {
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 14px; --cds-gap-lg: 20px; --cds-gap-xl: 28px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 14px; --cds-pad-lg: 20px; --cds-pad-xl: 28px;
  --cds-font-size-caption: 12px; --cds-font-size-body: 14px; --cds-font-size-heading: 18px; --cds-font-size-title: 28px;
  --cds-font-weight-medium: 600; --cds-radius: 12px; --cds-dur-slow: .3s; --cds-ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
:root { --wg-gold: #FFB703; --wg-gold-2: #F59E0B; --wg-text: #F2F4F8; --wg-muted: rgba(232, 237, 247, .64); --wg-faint: rgba(232, 237, 247, .40); --wg-line: rgba(255, 255, 255, .09); --wg-ok: #34D399; --wg-warn: #FBBF24; --wg-bad: #FB7185; --wg-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
html, body { margin: 0; min-height: 100%; background: #1b1d22; }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif; color: #F2F4F8; }
[hidden] { display: none !important; }
.mb { border-radius: 0; min-height: 100vh; box-sizing: border-box; }
.dash-skeleton { position: relative; color: transparent !important; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; border-radius: 10px; min-height: 1.2em; }
@media (prefers-reduced-motion: no-preference) { .dash-skeleton { animation: wsk 1.4s linear infinite; } }
@keyframes wsk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.mb-sin-datos { margin: 0; padding: .9rem 1.1rem; border-radius: 16px; border: 1px solid rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .08); color: #FBBF24; font-size: .9rem; }
.mb-user { display: flex; flex-direction: column; gap: .2rem; padding: .2rem .4rem; }
.mb-user small { color: rgba(232, 237, 247, .4); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-user .mb-link { text-align: left; padding: .3rem 0; text-decoration: none; }
/* arranque y login */
.boot { min-height: 100vh; display: grid; place-items: center; color: rgba(232, 237, 247, .6); font-size: .95rem; background: #1b1d22; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; background: radial-gradient(60rem 40rem at 15% -10%, rgba(255, 183, 3, .06), transparent 60%), radial-gradient(50rem 40rem at 110% 10%, rgba(0, 180, 216, .05), transparent 60%), #1b1d22; }
.login-card { width: 100%; max-width: 400px; box-sizing: border-box; padding: 2rem 1.8rem; border-radius: 28px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.035)); -webkit-backdrop-filter: blur(32px) saturate(180%); backdrop-filter: blur(32px) saturate(180%); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 1.1rem; }
.login-card h1 { margin: .4rem 0 0; font-size: 1.5rem; letter-spacing: -.02em; }
.login-card p { margin: 0; color: rgba(232,237,247,.64); font-size: .88rem; line-height: 1.5; }
.login-card form { display: flex; flex-direction: column; gap: .8rem; }
.login-card label { display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; color: rgba(232,237,247,.64); }
.login-card input { font: inherit; font-size: .95rem; color: #F2F4F8; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: .75rem .9rem; }
.login-card input:focus-visible { outline: none; border-color: rgba(255,183,3,.6); box-shadow: 0 0 0 3px rgba(255,183,3,.18); }
.login-btn { font: inherit; font-weight: 650; font-size: .95rem; color: #16120a; background: linear-gradient(145deg, #FFC93C, #F59E0B); border: 0; border-radius: 14px; padding: .8rem 1rem; cursor: pointer; margin-top: .3rem; }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-alt { font: inherit; font-size: .82rem; color: #FFB703; background: none; border: 0; cursor: pointer; padding: .2rem 0; align-self: flex-start; }
.login-msg { min-height: 1.2em; font-size: .85rem; color: #FBBF24; margin: 0; }
.login-logo { display: flex; gap: .75rem; align-items: center; }

/* Liquid glass oscuro · sidebar fija + barra superior flotante + contenido */

.mb {
  --wg-bg: #1b1d22; --wg-gold: #FFB703; --wg-gold-2: #F59E0B; --wg-mbb: #38BDF8; --wg-ecf: #FF2A55; --wg-che: #FFFFFF;
  --wg-text: #F2F4F8; --wg-muted: rgba(232, 237, 247, .64); --wg-faint: rgba(232, 237, 247, .40);
  --wg-line: rgba(255, 255, 255, .09); --wg-glass: rgba(255, 255, 255, .055); --wg-glass-hi: rgba(255, 255, 255, .10);
  --wg-ok: #34D399; --wg-warn: #FBBF24; --wg-bad: #FB7185;
  --wg-r: 24px; --wg-r-sm: 14px;
  --wg-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* tokens compartidos, leídos por los gráficos */
  --color-fg: var(--wg-text); --color-fg-muted: var(--wg-muted); --color-bg: #121318; --color-panel: #1a1e27; --color-border-line: var(--wg-line);
  --color-ok: var(--wg-ok); --color-warn: var(--wg-warn); --color-bad: var(--wg-bad);
  --cds-chart-grid: rgba(255, 255, 255, .07); --cds-chart-axis: rgba(255, 255, 255, .22); --cds-chart-reference: rgba(255, 255, 255, .55); --cds-chart-muted: rgba(255, 255, 255, .22); --cds-chart-status-critical: #FB7185;
  --cds-surface-popover: rgba(26, 29, 38, .88); --cds-border: rgba(255, 255, 255, .16); --cds-shadow-popover: 0 18px 40px rgba(0, 0, 0, .5); --cds-text-secondary: var(--wg-muted);
  position: relative; overflow: clip; container-type: inline-size; color-scheme: dark;
  color: var(--wg-text); background: var(--wg-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  padding: var(--cds-pad-lg) max(16px, env(safe-area-inset-right, 0px)) var(--cds-pad-xl) max(16px, env(safe-area-inset-left, 0px));
  border-radius: 28px; min-height: 100%;
}
.mb [hidden] { display: none !important; }
.mb-orb { position: absolute; width: 40rem; height: 40rem; border-radius: 50%; filter: blur(160px); opacity: .05; pointer-events: none; z-index: 0; }
.mb-orb.o1 { background: var(--wg-gold); top: -18rem; left: -12rem; }
.mb-orb.o2 { background: #00B4D8; top: -10rem; right: -16rem; opacity: .04; }
.mb-orb.o3 { display: none; }
.mb-orb.o4 { background: #7C3AED; bottom: -14rem; right: -8rem; opacity: .03; }

/* vidrio */
.mb-side, .mb-top, .mb-tile, .mb-card, .mb-pcard, .mb-hero, .mb-bcard, .mb-banner {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .035) 100%);
  -webkit-backdrop-filter: blur(32px) saturate(180%); backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--wg-r);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.mb-side::before, .mb-top::before, .mb-tile::before, .mb-card::before, .mb-pcard::before, .mb-hero::before, .mb-bcard::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .02) 65%, rgba(255, 255, 255, .07) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.mb-card:hover, .mb-pcard:hover, .mb-bcard:hover, .mb-tile:hover { z-index: 3; }

/* estructura */
.mb-shell { position: relative; z-index: 1; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--cds-gap-lg); align-items: start; }
.mb-main { display: flex; flex-direction: column; gap: var(--cds-gap-lg); min-width: 0; }

/* sidebar */
.mb-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: var(--cds-gap-md); padding: var(--cds-pad-lg) var(--cds-pad-md); border-radius: 28px; scrollbar-width: thin; }
.mb-logo { display: flex; gap: .75rem; align-items: center; padding: 0 .25rem; }
.mb-logo-i { width: 2.75rem; height: 2.75rem; border-radius: 14px; background: linear-gradient(145deg, #FFC93C, var(--wg-gold-2)); color: #1a1405; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); flex: none; }
.mb-logo-i svg { width: 1.35rem; height: 1.35rem; }
.mb-logo b { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.mb-logo small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: var(--wg-gold); }
.mb-legend-b { display: flex; justify-content: space-between; gap: .4rem; padding: .55rem .7rem; border-radius: var(--wg-r-sm); background: rgba(0, 0, 0, .25); border: 1px solid var(--wg-line); font-family: var(--wg-mono); font-size: .66rem; letter-spacing: .06em; color: var(--wg-muted); }
.mb-legend-b span { display: inline-flex; align-items: center; gap: .35rem; }
.mb-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; flex: none; }
.mb-side-h { font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: var(--wg-faint); text-transform: uppercase; padding: 0 .5rem; }
.mb-nav { display: flex; flex-direction: column; gap: 4px; }
.mb-nav-btn { font: inherit; font-size: .92rem; font-weight: 500; color: var(--wg-muted); background: none; border: 0; border-radius: 16px; padding: .7rem .8rem; display: flex; align-items: center; gap: .75rem; cursor: pointer; text-align: left; white-space: nowrap; transition: background .2s, color .2s; }
.mb-nav-btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.mb-nav-btn:hover { color: var(--wg-text); background: rgba(255, 255, 255, .06); }
.mb-nav-btn[aria-current=page] { color: #16120a; font-weight: 650; background: linear-gradient(145deg, #FFC93C, var(--wg-gold-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.mb-suc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 10px; }
.mb-suc summary::-webkit-details-marker { display: none; }
.mb-suc summary::after { content: "▾"; color: var(--wg-faint); font-size: .8rem; transition: transform .2s; }
.mb-suc:not([open]) summary::after { transform: rotate(-90deg); }
.mb-suc summary small { white-space: nowrap; font-size: .7rem; color: var(--wg-faint); font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: auto; }
#tiendas { display: flex; flex-direction: column; gap: var(--cds-gap-sm); margin-top: .35rem; }
.mb-sgroup { display: flex; flex-direction: column; gap: 2px; }
.mb-sgroup-h { display: flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 650; color: var(--wg-muted); padding: .2rem .5rem; }
.mb-srow { font: inherit; display: flex; justify-content: space-between; gap: .5rem; align-items: center; width: 100%; padding: .42rem .6rem .42rem 1.45rem; border: 1px solid transparent; border-radius: 11px; background: none; color: var(--wg-text); font-size: .82rem; cursor: pointer; text-align: left; }
.mb-srow:hover { background: rgba(255, 255, 255, .06); }
.mb-srow[aria-pressed=true] { background: rgba(255, 183, 3, .14); border-color: rgba(255, 183, 3, .45); }
.mb-srow-v { color: var(--wg-faint); font-size: .72rem; font-family: var(--wg-mono); white-space: nowrap; }
.mb-status { margin-top: auto; display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; border-radius: var(--wg-r-sm); background: rgba(0, 0, 0, .28); border: 1px solid var(--wg-line); font-size: .72rem; color: var(--wg-muted); }
.mb-status b { display: block; color: var(--wg-text); font-size: .68rem; letter-spacing: .1em; font-weight: 700; }
.mb-live { width: .55rem; height: .55rem; border-radius: 50%; background: var(--wg-ok); box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); flex: none; }
@media (prefers-reduced-motion: no-preference) { .mb-live { animation: mbpulse 2.4s infinite; } }
@keyframes mbpulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* barra superior */
.mb-top { position: sticky; top: 12px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-gap-sm) var(--cds-gap-md); padding: .55rem .6rem; border-radius: 999px; }
.mb-segs { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .32); border: 1px solid var(--wg-line); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.mb-segs .mb-btn { border: 0; background: none; color: var(--wg-muted); border-radius: 999px; padding: .45rem .9rem; font-size: .84rem; font-weight: 550; min-height: 2.1rem; }
.mb-segs .mb-btn:hover { color: var(--wg-text); }
.mb-segs .mb-btn[aria-pressed=true] { color: #16120a; background: linear-gradient(145deg, #FFC93C, var(--wg-gold-2)); box-shadow: none; }
#marcas .mb-sw { width: .5rem; height: .5rem; border-radius: 50%; }
#marcas .mb-btn-logo { padding: .2rem .8rem; display: inline-flex; align-items: center; }
#marcas .mb-btn-logo img { display: block; width: auto; opacity: .78; transition: opacity .2s; }
#marcas .mb-btn-logo:hover img { opacity: .9; }
#marcas .mb-btn-logo[aria-pressed=true] { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px var(--wg-gold); }
#marcas .mb-btn-logo[aria-pressed=true] img { opacity: 1; }
#marcas .lg-mb { height: 32px; }
#marcas .lg-ecf { height: 30px; }
#marcas .lg-c { height: 24px; }
.mb-search { position: relative; flex: 1 1 16rem; min-width: 0; }
.mb-search svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--wg-faint); pointer-events: none; }
.mb-search input { width: 100%; box-sizing: border-box; font: inherit; font-size: .88rem; color: var(--wg-text); background: rgba(0, 0, 0, .32); border: 1px solid var(--wg-line); border-radius: 999px; padding: .62rem 1rem .62rem 2.5rem; }
.mb-search input::placeholder { color: var(--wg-faint); }
.mb-search input:focus-visible { outline: none; border-color: rgba(255, 183, 3, .6); box-shadow: 0 0 0 3px rgba(255, 183, 3, .18); }
.mb-q-list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; padding: .4rem; border-radius: 18px; background: rgba(26, 29, 38, .94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); max-height: 22rem; overflow: auto; }
.mb-q-h { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wg-faint); padding: .45rem .6rem .2rem; font-weight: 700; }
.mb-q-it { font: inherit; width: 100%; display: flex; gap: .55rem; align-items: center; text-align: left; background: none; border: 0; color: var(--wg-text); font-size: .86rem; padding: .5rem .6rem; border-radius: 10px; cursor: pointer; }
.mb-q-it:hover, .mb-q-it:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.mb-fresh { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(0, 0, 0, .32); border: 1px solid var(--wg-line); font-size: .8rem; color: var(--wg-muted); white-space: nowrap; }
.mb-link { font: inherit; font-size: .8rem; color: var(--wg-gold); background: none; border: 0; padding: .4rem .5rem; cursor: pointer; white-space: nowrap; }
.mb-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* encabezado */
.mb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--cds-gap-md); scroll-margin-top: 90px; }
.mb-head-t { display: flex; flex-direction: column; gap: .4rem; min-width: 0; flex: 1 1 26rem; }
.mb-brandstrip { display: inline-flex; align-self: flex-start; align-items: center; flex-wrap: wrap; gap: .6rem 1.2rem; padding: .55rem 1.1rem; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--wg-line); max-width: 100%; box-sizing: border-box; }
.mb-brandstrip img { display: block; width: auto; max-width: 100%; }
.mb-brandstrip .bs-mbb { height: 36px; }
.mb-brandstrip .bs-ecf { height: 33px; }
.mb-brandstrip .bs-che { height: 27px; }
.mb-logo-img { flex-direction: column; align-items: flex-start; gap: .45rem; padding: .2rem .35rem 0; }
.mb-logo-img img { display: block; height: 34px; width: auto; max-width: 100%; }
.mb-logo-img small { padding-left: .15rem; }
.mb-eyebrow { display: inline-flex; align-self: flex-start; gap: .5rem; align-items: center; font-family: var(--wg-mono); font-size: .7rem; letter-spacing: .08em; color: var(--wg-muted); padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 183, 3, .1); border: 1px solid rgba(255, 183, 3, .28); }
.mb-eyebrow b { color: var(--wg-gold); font-weight: 700; }
.mb h1 { margin: 0; font-size: clamp(1.7rem, 3.4cqi, 2.5rem); line-height: 1.08; font-weight: 750; letter-spacing: -.025em; text-wrap: balance; }
.mb h1 em { font-style: normal; background: linear-gradient(90deg, #FFD166, var(--wg-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mb-take { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--wg-muted); max-width: 84ch; }
.mb-meta { margin: 0; color: var(--wg-faint); font-size: .74rem; line-height: 1.5; }
.mb-time { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-left: auto; }
.mb-dates { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: 4px 6px 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .32); border: 1px solid var(--wg-line); }
.mb-dates span { color: var(--wg-faint); font-size: .75rem; }
.mb input[type=date] { font: inherit; font-size: .82rem; color: var(--wg-text); background: rgba(255, 255, 255, .06); border: 1px solid transparent; border-radius: 999px; padding: .3rem .7rem; min-height: 2.1rem; box-sizing: border-box; color-scheme: dark; }
.mb input[type=date]:focus-visible { outline: none; border-color: rgba(255, 183, 3, .6); }

/* páginas, tarjetas */
.mb h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
.mb h3 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.mb-page { display: flex; flex-direction: column; gap: var(--cds-gap-lg); }
.mb-sec { display: flex; flex-direction: column; gap: var(--cds-gap-md); }
.mb-sec-head { display: flex; flex-direction: column; gap: .35rem; }
.mb-note { margin: 0; color: var(--wg-muted); font-size: .78rem; line-height: 1.55; max-width: 104ch; }
.mb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--cds-gap-md); }
.mb-tile { padding: 1.05rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; border-radius: 22px; }
.mb-tile-l { font-size: .72rem; color: var(--wg-muted); font-weight: 550; letter-spacing: .01em; }
.mb-num { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; overflow-wrap: anywhere; }
.mb-sub { font-size: .76rem; color: var(--wg-muted); line-height: 1.5; }
.mb .mb-up { color: var(--wg-ok); }
.mb .mb-down { color: var(--wg-bad); }
.mb .mb-alert { color: var(--wg-warn); }
.mb-pill { display: inline-flex; align-items: center; gap: .4em; padding: .14em .62em; border-radius: 999px; font-size: .74rem; font-weight: 650; white-space: nowrap; }
.mb-pill::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.mb-pill.ok { color: var(--wg-ok); background: rgba(52, 211, 153, .14); }
.mb-pill.warn { color: var(--wg-warn); background: rgba(251, 191, 36, .15); }
.mb-pill.bad { color: var(--wg-bad); background: rgba(251, 113, 133, .15); }
.mb-tile .mb-num .mb-pill { font-size: 1.4rem; padding: .05em .45em; }
.mb-card { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: var(--cds-gap-md); min-width: 0; }
.mb-card-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cds-gap-sm); align-items: flex-start; }
.mb-card-h > div { min-width: 0; }
.mb-card-h p { margin: .3rem 0 0; color: var(--wg-muted); font-size: .78rem; line-height: 1.5; max-width: 84ch; }
.mb-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--cds-gap-md); }
.mb-chart { position: relative; width: 100%; min-width: 0; }
.mb-chart.dash-skeleton { min-height: 220px; }
.mb-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .76rem; color: var(--wg-muted); }
.mb-legend .it { display: inline-flex; align-items: center; gap: .45em; }
.mb .mb-legend b { color: var(--wg-text); font-weight: 650; }
.mb-sw { width: .62rem; height: .62rem; border-radius: 3px; flex: none; display: inline-block; }
.mb-ln { width: 1.1rem; height: 0; border-top: 2px solid; flex: none; display: inline-block; }
.mb-ln.dash { border-top-style: dashed; }
.mb-btn { font: inherit; font-size: .8rem; color: var(--wg-text); background: rgba(255, 255, 255, .05); border: 1px solid var(--wg-line); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; min-height: 2rem; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.mb-btn:hover { background: rgba(255, 255, 255, .09); }
.mb-btn[aria-pressed=true] { color: #16120a; background: linear-gradient(145deg, #FFC93C, var(--wg-gold-2)); border-color: transparent; }
.mb-group { display: flex; flex-wrap: wrap; gap: .35rem; }
.mb-btn:focus-visible, .mb-nav-btn:focus-visible, .mb-sort:focus-visible, .mb-srow:focus-visible, .mb-link:focus-visible { outline: 2px solid var(--wg-gold); outline-offset: 2px; }
.mb-fail { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 200px; color: var(--wg-muted); font-size: .78rem; }
.mb-fail::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--wg-bad); }
.mb-empty { color: var(--wg-muted); font-size: .78rem; padding: var(--cds-pad-md) 0; }
.mb-banner { display: flex; gap: .6rem; padding: .8rem 1rem; border-radius: 18px; border-color: rgba(251, 191, 36, .4); font-size: .8rem; line-height: 1.5; }
.mb-banner b { color: var(--wg-warn); }

/* tarjetas por marca */
.mb-bcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: var(--cds-gap-md); }
.mb-bcards.dash-skeleton { min-height: 12rem; }
.mb-bcard { --brand: var(--wg-gold); padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0; overflow: hidden; }
.mb-bcard::after { content: ""; position: absolute; left: 0; top: 1.2rem; bottom: 1.2rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); opacity: .85; pointer-events: none; }
.mb-bcard-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mb-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; font-size: .66rem; font-weight: 750; letter-spacing: .08em; color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.mb-badge::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--brand); }
.mb-chip { font-family: var(--wg-mono); font-size: .72rem; font-weight: 650; padding: .28rem .6rem; border-radius: 10px; border: 1px solid var(--wg-line); background: rgba(0, 0, 0, .25); }
.mb-chip.up { color: var(--wg-ok); border-color: rgba(52, 211, 153, .35); }
.mb-chip.down { color: var(--wg-bad); border-color: rgba(251, 113, 133, .35); }
.mb-bcard-t { font-size: .95rem; font-weight: 650; margin-top: .25rem; }
.mb-bcard-v { font-size: clamp(1.8rem, 3.2cqi, 2.4rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.05; }
.mb-mono { font-family: var(--wg-mono); font-size: .72rem; color: var(--wg-muted); line-height: 1.55; }
.mb-meta-row { display: flex; justify-content: space-between; gap: .6rem; font-family: var(--wg-mono); font-size: .7rem; color: var(--brand); margin-top: auto; padding-top: .4rem; }
.mb-meta-row b { color: var(--wg-text); }
.mb-bar { height: .38rem; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mb-bar span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.mb-spark { margin-top: auto; min-height: 46px; }
.mb-mini-h { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wg-faint); font-weight: 700; }
.mb-share { display: flex; height: .7rem; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .06); margin: .5rem 0 .6rem; gap: 2px; }
.mb-share span { display: block; height: 100%; }
.mb-share-l { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.mb-share-r { display: grid; grid-template-columns: auto 1fr auto auto; gap: .6rem; align-items: center; font-size: .82rem; }
.mb-share-r b { font-weight: 650; }
.mb-share-v { font-family: var(--wg-mono); font-size: .74rem; color: var(--wg-muted); }

/* primera plana */
.mb-dia { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: end; }
.mb-dia-main { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.mb .mb-dia .mb-num { font-size: clamp(2rem, 4.2cqi, 3rem); line-height: 1; letter-spacing: -.03em; }
.mb-dia .mb-kv { margin-top: 0; border-top: 0; padding-top: 0; border-left: 1px solid var(--wg-line); padding-left: 1.5rem; row-gap: .45rem; font-size: .85rem; }
.mb-dia .mb-kv span:nth-child(even) { font-size: .85rem; }
.mb-mono-sm { display: block; font-family: var(--wg-mono); font-size: .68rem; color: var(--wg-faint); line-height: 1.5; }
.mb-table td.mb-dim, .mb-table th.mb-dim { color: var(--wg-faint); font-size: .7rem; }
.mb-plana { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cds-gap-md); }
.mb-pcard { padding: 1.2rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.mb-pcard .mb-num { font-size: clamp(1.6rem, 2.8cqi, 2.1rem); line-height: 1.05; }
.mb-kv { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; font-size: .78rem; border-top: 1px solid var(--wg-line); padding-top: .6rem; margin-top: auto; }
.mb-kv span:nth-child(odd) { color: var(--wg-muted); }
.mb-kv span:nth-child(even) { text-align: right; font-family: var(--wg-mono); font-size: .76rem; }
.mb-alerts { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.mb-alerts li { display: flex; gap: .6rem; align-items: baseline; font-size: .88rem; line-height: 1.45; padding: .55rem .7rem; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--wg-line); }
.mb-alerts li .mb-pill { flex: none; }

/* hero de ventas */
.mb-hero { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem 1.5rem; overflow: hidden; }

.mb .mb-hero-num { font-size: clamp(2.2rem, 5cqi, 3.4rem); line-height: 1; letter-spacing: -.035em; font-weight: 750; }
.mb-prog { position: relative; height: .5rem; border-radius: 999px; background: rgba(255, 255, 255, .08); max-width: 36rem; overflow: hidden; }
.mb-prog-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.mb-hero-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: .9rem; border-top: 1px solid var(--wg-line); padding-top: 1rem; }
.mb-st { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-st-n { display: inline-flex; align-items: center; gap: .45em; font-size: .74rem; color: var(--wg-muted); }
.mb-st-n .mb-sw { border-radius: 50%; }
.mb-st-v { font-size: 1.05rem; font-weight: 650; }

/* svg y tooltip */
.mb svg { display: block; }
.mb svg text { font-family: inherit; font-size: 11px; fill: var(--wg-muted); }
.mb svg text.mb-t-strong { fill: var(--wg-text); }
.mb-measure { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; }
.mb-tip { position: absolute; z-index: 10; pointer-events: none; background: rgba(26, 29, 38, .88); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12); padding: .55rem .75rem; font-size: .76rem; min-width: 11rem; max-width: 18rem; display: flex; flex-direction: column; gap: 3px; }
.mb-tip-h { color: var(--wg-muted); margin-bottom: 2px; }
.mb-tip-r { display: flex; align-items: center; gap: .5em; }
.mb-tip-n { flex: 1; color: var(--wg-muted); }
.mb-tip-v { color: var(--wg-text); font-family: var(--wg-mono); font-size: .74rem; white-space: nowrap; }

/* tablas */
.mb-tw { overflow-x: auto; }
.mb-scroll { max-height: 30rem; overflow: auto; }
.mb-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mb-table th, .mb-table td { padding: .5rem .65rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--wg-line); vertical-align: middle; }
.mb-table td { font-family: var(--wg-mono); font-size: .76rem; }
.mb-table td.mb-name, .mb-table td.mb-left { font-family: inherit; font-size: .82rem; }
.mb-table th:first-child, .mb-table td:first-child { text-align: left; padding-left: .2rem; }
.mb-table th { color: var(--wg-faint); font-weight: 650; font-size: .7rem; letter-spacing: .04em; position: sticky; top: 0; background: rgba(23, 26, 34, .96); z-index: 1; }
.mb-table tbody tr:hover td { background: rgba(255, 255, 255, .035); }
.mb-table td.mb-name { white-space: normal; min-width: 9rem; }
.mb-table td .mb-name-sub { display: block; color: var(--wg-faint); font-size: .7rem; }
.mb-table tr.mb-brand td { font-weight: 650; background: rgba(255, 255, 255, .045); color: var(--wg-text); }
.mb-table tr.mb-total td { font-weight: 700; border-bottom: 0; border-top: 1px solid rgba(255, 183, 3, .45); color: var(--wg-gold); }
.mb-table tr.mb-store td:first-child { padding-left: 1.1rem; }
.mb-table tr.mb-off td { opacity: .42; }
.mb-table td.mb-left, .mb-table th.mb-left { text-align: left; }
.mb-sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: .3em; align-items: center; }
.mb-sort:hover { color: var(--wg-text); }
.mb-cellbar { display: inline-block; width: 4.5rem; height: .42rem; border-radius: 4px; background: rgba(255, 255, 255, .07); margin-right: .6em; vertical-align: middle; overflow: hidden; }
.mb-cellbar > span { display: block; height: 100%; border-radius: 4px; }
.mb-hcell { text-align: center !important; min-width: 4.5rem; }
.mb-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mb-tools input[type=search] { font: inherit; font-size: .82rem; color: var(--wg-text); background: rgba(0, 0, 0, .3); border: 1px solid var(--wg-line); border-radius: 999px; padding: .45rem .9rem; width: 16rem; min-width: 0; }

[data-dash-source-state=empty] { color: transparent; }
[data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }
.mb .dash-skeleton { border-radius: 12px; }

@container (max-width: 1100px) {
  .mb-plana { grid-template-columns: minmax(0, 1fr); }
  .mb-dia { grid-template-columns: minmax(0, 1fr); }
  .mb-dia .mb-kv { border-left: 0; padding-left: 0; border-top: 1px solid var(--wg-line); padding-top: .6rem; }
  .mb-top { border-radius: 24px; }
}
@container (max-width: 980px) {
  .mb-shell { grid-template-columns: minmax(0, 1fr); }
  .mb-side { position: relative; top: 0; max-height: none; border-radius: 24px; }
  .mb-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .mb-nav-btn { padding: .55rem .8rem; font-size: .84rem; }
  .mb-status { margin-top: 0; }
  .mb-time { margin-left: 0; }
}
@container (max-width: 640px) {
  .mb-hide-sm { display: none; }
  .mb-tools input[type=search] { width: 100%; }
  .mb-fresh { display: none; }
}