/* Composición compacta del tablero. Conserva las tarjetas, fuentes y estados existentes. */
:root #app .management-board .mb-header-shell { margin-bottom:14px; padding:14px 18px; border-radius:13px; box-shadow:none; }
:root #app .management-board .mb-hero { min-height:0; gap:14px; margin-bottom:10px; padding-bottom:10px; }
:root #app .management-board .mb-hero h1 { font-size:clamp(19px,1.6vw,24px); }
:root #app .management-board .mb-hero-copy > p { font-size:10px; }
:root #app .management-board .mb-brand-lockup { width:104px; }
:root #app .management-board .mb-brand-lockup img { height:38px; }
:root #app .management-board .mb-control-deck { gap:10px; }
:root #app .management-board .mb-company-heading { margin-bottom:6px; }
:root #app .management-board .mb-company-heading h2 { font-size:11px; }
:root #app .management-board .mb-company-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
:root #app .management-board .mb-ditar-actions { flex-wrap:wrap; }
:root #app .management-board .mb-company-actions .mb-monthly-open { min-height:30px; padding:5px 9px; color:#1e6840; font-size:10px; }
:root #app .management-board .mb-company-tabs { gap:8px; }
:root #app .management-board .mb-company-tabs button { min-height:67px; grid-template-columns:76px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:1px 9px; padding:8px 11px; border:1px solid var(--kpi-line); border-radius:8px; box-shadow:none; }
:root #app .management-board .mb-company-logo { grid-column:1; grid-row:1/3; width:72px; height:38px; max-width:none; margin:0; }
:root #app .management-board .mb-company-tabs button span { grid-column:2; grid-row:1; font-size:12px; letter-spacing:0; }
:root #app .management-board .mb-company-tabs button small { grid-column:2; grid-row:2; font-size:10px; }
:root #app .management-board .mb-company-tabs button > b { grid-column:3; grid-row:1/3; align-self:center; min-width:28px; padding:5px; background:#f1f5f1; color:#305640; }
:root #app .management-board .mb-company-tabs button > b::after { content:none; }
:root #app .management-board .mb-company-tabs button > em { display:none; }
:root body:not([data-view="login"]) #app .management-board .mb-company-tabs button[aria-selected="true"] { border-color:#73a885; background:#edf7ef; box-shadow:inset 0 0 0 1px #73a885; }
:root #app .management-board .mb-filters { display:flex; flex-wrap:wrap; align-items:end; gap:8px 10px; padding-top:10px; }
:root #app .management-board .mb-filters > :is(.mb-period-filter,label) { flex:1 1 125px; }
:root #app .management-board .mb-filters > .mb-period-filter { flex-basis:210px; }
:root #app .management-board .mb-filters > label:has(#mbCurrency) { flex-basis:180px; }
:root #app .management-board .mb-filters :is(input,select) { height:36px; padding:7px 9px; }
:root #app .management-board .mb-quick { min-height:36px; }
:root #app .management-board .mb-quick button { min-height:28px; font-size:10px; }
:root #app .management-board .mb-quick button[aria-pressed="true"] { color:#145632; background:#e4f2e8; }
:root #app .management-board .mb-filters > .mb-button { min-height:36px; padding:7px 11px; }
:root body:not([data-view="login"]) #app .management-board .mb-refresh { color:#fff; background:#1f7044; border-color:#1f7044; box-shadow:none; }
:root #app .management-board .mb-cutline { flex:1 0 100%; font-size:10px; }

:root #app .management-board .mb-board-toolbar { display:flex; align-items:center; gap:12px; min-width:0; margin-bottom:10px; padding:8px; border:1px solid var(--kpi-line); border-radius:10px; background:#f7faf7; }
:root #app .management-board .mb-area-tabs { display:flex; flex:1 1 auto; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:thin; }
:root #app .management-board .mb-area-tabs button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; flex:0 0 auto; padding:7px 11px; border:1px solid transparent; border-radius:7px; background:transparent; color:#476151; font-size:11px; font-weight:700; white-space:nowrap; }
:root #app .management-board .mb-area-tabs button:hover { background:#eaf3ed; }
:root #app .management-board .mb-area-tabs button[aria-pressed="true"] { border-color:#b7d4bf; background:#e5f2e9; color:#175a36; }
:root #app .management-board .mb-area-tabs button span { padding:2px 6px; border-radius:10px; background:#fff; color:#5a7361; font-size:10px; font-variant-numeric:tabular-nums; }
:root #app .management-board .mb-search-label { flex:0 0 210px; min-width:0; }
:root #app .management-board .mb-search-label input { width:100%; min-height:38px; padding:8px 11px; border:1px solid #cbd9ce; border-radius:7px; background:#fff; color:#203b2a; font:600 11px Manrope,'Segoe UI',sans-serif; }
:root #app .management-board .mb-search-label input:focus-visible { outline:2px solid #24734a; outline-offset:2px; }
:root #app .management-board .mb-section-title { justify-content:flex-end; margin-bottom:6px; }
:root #app .management-board .mb-kpi-legend { margin-bottom:8px; }
:root #app .management-board .mb-search-count { margin:0 0 8px; color:#607769; font-size:11px; font-weight:700; }
:root #app .management-board .mb-search-empty { margin:0 0 10px; padding:16px; border:1px dashed #b7cfbe; border-radius:9px; background:#f7faf7; color:#45614d; }
:root #app .management-board :is(.mb-search-empty,.mb-metric-group-window,.mb-kpi-card)[hidden] { display:none; }

:root #app .management-board .mb-area-card { border-color:#d6e4da; border-radius:12px; background:#fff; }
:root #app .management-board .mb-area-heading { padding:12px 16px; border-bottom:1px solid #e2eae4; }
:root #app .management-board .mb-area-icon { width:32px; height:32px; border-radius:8px; }
:root #app .management-board .mb-area-icon svg { width:18px; height:18px; }
:root #app .management-board .mb-area-heading h3 { font-size:15px; font-weight:750; }
:root #app .management-board .mb-metric-group-window { margin:10px; border-color:#dbe6dd; border-radius:10px; box-shadow:none; }
:root #app .management-board .mb-metric-group-window + .mb-metric-group-window { margin-top:12px; }
:root #app .management-board .mb-group-heading { padding:9px 15px; }
:root #app .management-board .mb-area-list .mb-metric-card-grid,
:root #app .management-board .mb-planned-orders-group .mb-metric-card-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:12px; padding:12px; background:#f7faf7; }
:root #app .management-board .mb-raw-material-layout .mb-metric-card-grid { grid-template-columns:minmax(0,1fr); padding:0; background:transparent; }
:root #app .management-board .mb-kpi-card { border-radius:9px; }

/* Una cuadrícula por área; los grupos conservan alcance semántico sin añadir marcos visuales. */
:root body:not([data-view="login"]) #app .management-board .mb-area-card.mb-area-flat { border:0; border-radius:0; background:transparent; background-image:none; box-shadow:none; overflow:visible; }
:root #app .management-board .mb-area-flat .mb-area-heading { gap:10px; margin:0 0 10px; padding:0; border:0; background:transparent; }
:root #app .management-board .mb-area-flat .mb-area-heading h3 { font-size:16px; }
:root #app .management-board .mb-area-flat .mb-area-count { display:flex; align-items:baseline; gap:3px; font-size:14px; }
:root #app .management-board .mb-area-flat .mb-area-count small { font-size:10px; font-weight:600; }
:root #app .management-board .mb-area-flat > .mb-metric-card-grid.mb-flat-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:12px; padding:0; background:transparent; background-image:none; }
:root #app .management-board .mb-area-flat .mb-metric-group-window { display:contents; }
:root #app .management-board .mb-area-flat .mb-metric-group-window[hidden] { display:none; }
:root #app .management-board .mb-area-flat .mb-group-heading { display:none; }
:root #app .management-board .mb-area-flat .mb-inventory-summary { grid-column:1/-1; margin:0; }
:root #app .management-board .mb-area-flat .mb-raw-material-layout { display:grid; grid-column:1/-1; grid-template-columns:minmax(280px,300px) minmax(0,1fr); align-items:start; gap:12px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
:root #app .management-board .mb-area-flat .mb-raw-material-layout > .mb-inventory-summary { grid-column:2; min-width:0; }
:root #app .management-board .mb-area-flat .mb-channel-group { display:block; grid-column:1/-1; min-width:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
:root #app .management-board .mb-area-flat .mb-channel-group + .mb-channel-group { margin-top:12px; }
:root #app .management-board .mb-area-flat .mb-channel-group > .mb-group-heading { display:flex; padding:0 0 10px; margin:0; border:0; background:transparent; }
:root #app .management-board .mb-channel-group > .mb-group-heading h4 { margin:0; color:#235b3b; font-size:14px; font-weight:750; }
:root #app .management-board .mb-area-flat .mb-channel-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:12px; padding:0; background:transparent; }

@media (max-width:900px) {
  :root #app .management-board .mb-area-flat .mb-raw-material-layout { grid-template-columns:minmax(0,1fr); }
  :root #app .management-board .mb-area-flat .mb-raw-material-layout > .mb-inventory-summary { grid-column:1; }
  :root #app .management-board .mb-board-toolbar { flex-wrap:wrap; }
  :root #app .management-board .mb-area-tabs { flex-basis:100%; }
  :root #app .management-board .mb-search-label { flex:1 1 100%; }
}
@media (max-width:680px) {
  :root #app .management-board .mb-header-shell { padding:12px; }
  :root #app .management-board .mb-hero-copy > p { display:none; }
  :root #app .management-board .mb-hero-right { display:none; }
  :root #app .management-board .mb-brand-lockup { width:76px; }
  :root #app .management-board .mb-brand-lockup img { height:30px; }
  :root #app .management-board .mb-company-tabs { display:flex; overflow-x:auto; padding-bottom:3px; }
  :root #app .management-board .mb-company-tabs button { flex:0 0 152px; min-height:60px; grid-template-columns:42px minmax(0,1fr) auto; padding:7px; gap:4px; }
  :root #app .management-board .mb-company-logo { width:40px; height:30px; }
  :root #app .management-board .mb-company-tabs button small { display:none; }
  :root #app .management-board .mb-company-tabs button > b { font-size:10px; }
  :root #app .management-board .mb-company-heading { align-items:flex-start; }
  :root #app .management-board .mb-company-actions { gap:6px; }
  :root #app .management-board .mb-company-actions .mb-monthly-open { max-width:112px; white-space:normal; line-height:1.2; }
  :root #app .management-board .mb-filters > :is(.mb-period-filter,label) { flex:1 1 calc(50% - 8px); }
  :root #app .management-board .mb-filters > .mb-period-filter { flex-basis:100%; }
  :root #app .management-board .mb-filters > label:has(#mbCurrency) { flex-basis:calc(50% - 8px); }
  :root #app .management-board .mb-filters > .mb-button { flex:1 1 100%; }
  :root #app .management-board .mb-cutline { gap:3px; }
  :root #app .management-board .mb-board-toolbar { margin-bottom:8px; }
  :root #app .management-board .mb-area-heading { padding:10px 12px; }
  :root #app .management-board .mb-area-list .mb-metric-card-grid { padding:10px; }
}