/* Tarjetas KPI del dashboard gerencial (#/dashboard). Delimitado a .management-board y cargado después
   de gerencia.css y del tema blanco ejecutivo, cuyas reglas de tarjeta usan #app: el prefijo :root #app
   mantiene la precedencia sin !important. Sin dorado: verde, ámbar y rojo con texto y bordes sobrios. */
:root #app .management-board {
  --kpi-bg:#f6f8f6; --kpi-paper:#fff; --kpi-ink:#1f2d24; --kpi-muted:#627369; --kpi-line:#dce5df; --kpi-faint:#edf1ed;
  --kpi-green:#227345; --kpi-green-soft:#edf7f0; --kpi-amber:#b45309; --kpi-amber-soft:#fff4e5; --kpi-red:#b42318; --kpi-red-soft:#fff0ef;
  --kpi-track:#e7ece8; --kpi-previous:#9aa8a0;
}

/* Controles del panel */
:root #app .management-board .mb-section-title { align-items:center; gap:12px; }
:root #app .management-board .mb-kpi-legend { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; margin:0 0 14px; }
:root #app .management-board .mb-kpi-signal-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0; color:var(--kpi-muted); font-size:11px; }
:root #app .management-board .mb-kpi-signal-legend span { display:inline-flex; align-items:center; gap:6px; }
:root #app .management-board .mb-kpi-signal-legend i { width:7px; height:7px; border-radius:2px; background:currentColor; }
:root #app .management-board .mb-kpi-signal-legend [data-tone="green"] i { color:var(--kpi-green); }
:root #app .management-board .mb-kpi-signal-legend [data-tone="amber"] i { color:var(--kpi-amber); }
:root #app .management-board .mb-kpi-signal-legend [data-tone="red"] i { color:var(--kpi-red); }

/* Cuadrícula adaptable: tantas columnas como quepan sin cortar importes. */
:root #app .management-board .mb-area-list .mb-metric-card-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,288px),1fr)); align-items:start; gap:16px; padding:16px; background:var(--kpi-bg); }
:root #app .management-board .mb-raw-material-layout { display:grid; grid-template-columns:minmax(280px, 300px) minmax(0,1fr); align-items:start; gap:16px; padding:16px; background:var(--kpi-bg); }
:root #app .management-board .mb-raw-material-layout .mb-metric-card-grid { display:grid; grid-template-columns:minmax(0,1fr); padding:0; background:none; }
:root #app .management-board .mb-raw-material-layout .mb-inventory-summary { min-width:0; margin:0; }
:root #app .management-board .mb-claims-monthly-wrap { display:grid; gap:10px; min-width:0; }

/* Tarjeta */
:root #app .management-board .mb-kpi-card { position:relative; display:block; min-width:0; height:var(--mb-kpi-equal-height,auto); margin:0; padding:0; border:1px solid var(--kpi-line); border-radius:10px; background:var(--kpi-paper); color:var(--kpi-ink); box-shadow:none; overflow:hidden; perspective:1200px; transform:none; transition:border-color .18s; font-family:Manrope,'Segoe UI',sans-serif; }
:root #app .management-board .mb-kpi-card:has(.mb-kpi-details[open]) { border-color:#b8cbbb; }
:root #app .management-board .mb-kpi-front { position:relative; display:flex; flex-direction:column; box-sizing:border-box; min-width:0; height:100%; backface-visibility:hidden; transform:rotateY(0); transform-style:preserve-3d; transition:transform .48s ease,visibility .48s; }
:root #app .management-board .mb-kpi-card:has(.mb-kpi-details[open]) .mb-kpi-front { visibility:hidden; transform:rotateY(-180deg); }
:root #app .management-board .mb-kpi-card .mb-kpi-overview { position:relative; container-type:inline-size; display:block; flex:1 0 auto; width:100%; min-width:0; margin:0; padding:22px 22px 14px; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; box-shadow:none; transform:none; }
:root #app .management-board .mb-area-flat .mb-kpi-overview { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
:root #app .management-board .mb-kpi-card .mb-kpi-overview:hover { background:#fbfcfb; }
:root #app .management-board .mb-kpi-card .mb-kpi-overview:focus-visible { outline:2px solid var(--kpi-green); outline-offset:-4px; border-radius:9px; }
:root #app .management-board .mb-kpi-heading { display:block; min-height:30px; padding-right:132px; }
:root #app .management-board .mb-kpi-scope-row { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:16px; margin-bottom:11px; color:#587764; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
:root #app .management-board .mb-kpi-scope-row > span { min-width:0; overflow-wrap:anywhere; }
:root #app .management-board .mb-kpi-scope-row em { flex:0 0 auto; padding:2px 5px; border-radius:4px; background:#eef5ef; color:#3b704e; font-size:9px; font-style:normal; }
:root #app .management-board .mb-area-flat .mb-kpi-source { top:51px; }
:root #app .management-board .mb-kpi-title { display:block; min-width:0; color:var(--kpi-ink); font:750 16px/1.4 Manrope,'Segoe UI',sans-serif; letter-spacing:-.3px; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
:root #app .management-board .mb-kpi-source { position:absolute; top:22px; right:22px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:30px; max-width:132px; padding:4px 8px; border:1px solid var(--kpi-line); border-radius:5px; background:#f3f5f3; color:var(--kpi-muted); font:700 10px/1.4 Manrope,'Segoe UI',sans-serif; letter-spacing:.2px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:root #app .management-board .mb-kpi-source.is-logo { width:82px; height:30px; padding:0; border:0; background:transparent; }
:root #app .management-board .mb-kpi-source.is-logo img { display:block; width:100%; height:100%; object-fit:contain; object-position:right center; opacity:.7; }
:root #app .management-board .mb-kpi-source.is-hubspot img { object-fit:cover; }

/* Cifra principal: Space Grotesk, escala con el ancho de la tarjeta para no cortar importes. */
:root #app .management-board .mb-kpi-card .mb-kpi-value { display:block; min-height:0; margin:12px 0 0; color:var(--kpi-green); font:600 clamp(21px,10cqi,38px)/1.12 'Space Grotesk',Manrope,sans-serif; letter-spacing:-.045em; font-variant-numeric:tabular-nums; text-shadow:none; white-space:normal; overflow-wrap:normal; }
:root #app .management-board .mb-kpi-card .mb-kpi-value[data-tone="amber"] { color:var(--kpi-amber); }
:root #app .management-board .mb-kpi-card .mb-kpi-value[data-tone="red"] { color:var(--kpi-red); }
:root #app .management-board .mb-kpi-card .mb-kpi-value:is([data-tone="neutral"],[data-tone="missing"]) { color:var(--kpi-muted); }
:root #app .management-board .mb-kpi-number { white-space:nowrap; }
:root #app .management-board .mb-kpi-symbol { font-size:.78em; letter-spacing:-.02em; white-space:nowrap; }
:root #app .management-board .mb-kpi-unit { font:600 11px/1 Manrope,'Segoe UI',sans-serif; letter-spacing:0; white-space:nowrap; }
:root #app .management-board .mb-kpi-context { display:block; margin-top:4px; color:var(--kpi-muted); font-size:11px; font-weight:650; }

/* Variación: el color representa el movimiento numérico confirmado. */
:root #app .management-board .mb-kpi-variation { display:flex; align-items:center; gap:7px; min-height:18px; margin-top:8px; padding:0; border:0; background:none; color:var(--kpi-ink); font:650 12px/1.4 Manrope,'Segoe UI',sans-serif; }
:root #app .management-board .mb-kpi-variation svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
:root #app .management-board .mb-kpi-variation > i { width:10px; height:2px; border-radius:1px; background:currentColor; }
:root #app .management-board .mb-kpi-variation:is([data-trend="flat"],[data-trend="none"]) { color:var(--kpi-muted); }
:root #app .management-board .mb-kpi-variation[data-tone="green"] { color:var(--kpi-green); }
:root #app .management-board .mb-kpi-variation[data-tone="amber"] { color:var(--kpi-amber); }
:root #app .management-board .mb-kpi-variation[data-tone="red"] { color:var(--kpi-red); }

/* Gráficos */
:root #app .management-board .mb-kpi-chart { display:block; min-height:150px; margin-top:18px; padding-top:16px; border-top:1px solid var(--kpi-faint); }
:root #app .management-board .mb-kpi-chart-title { display:block; color:var(--kpi-muted); font-size:11px; font-weight:700; line-height:1.5; }
:root #app .management-board .mb-kpi-chart-empty { display:block; padding:22px 0; color:var(--kpi-muted); font-size:12px; }
:root #app .management-board .mb-pt-summary { display:flex; flex-direction:column; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--kpi-faint); }
:root #app .management-board .mb-pt-total { display:flex; flex-direction:column; gap:5px; color:var(--kpi-muted); font-size:11px; line-height:1.5; }
:root #app .management-board .mb-pt-total b { color:var(--kpi-ink); font-size:15px; font-weight:650; overflow-wrap:anywhere; }
:root #app .management-board .mb-pt-share { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; color:var(--kpi-muted); font-size:11px; line-height:1.5; }
:root #app .management-board .mb-pt-share b { color:var(--kpi-green); font-size:22px; font-weight:750; }
:root #app .management-board .mb-kpi-bars { display:block; padding-top:18px; }
:root #app .management-board .mb-kpi-bar-row { display:block; }
:root #app .management-board .mb-kpi-bar-row + .mb-kpi-bar-row { margin-top:18px; }
:root #app .management-board .mb-kpi-bar-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 8px; margin-bottom:8px; }
:root #app .management-board .mb-kpi-bar-heading small { min-width:0; color:var(--kpi-muted); font-size:11px; font-weight:600; line-height:1.35; }
:root #app .management-board .mb-kpi-bar-heading b { margin-left:auto; color:var(--kpi-ink); font-size:11px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
:root #app .management-board .mb-kpi-bar { display:block; width:100%; height:11px; }
:root #app .management-board .mb-kpi-bar-track { fill:var(--kpi-track); }
:root #app .management-board .mb-kpi-bar-row.is-previous .mb-kpi-bar-fill { fill:var(--kpi-previous); }
:root #app .management-board .mb-kpi-bar-row.is-current .mb-kpi-bar-fill { fill:var(--kpi-green); }
:root #app .management-board .mb-kpi-bars[data-tone="amber"] .is-current .mb-kpi-bar-fill { fill:var(--kpi-amber); }
:root #app .management-board .mb-kpi-bars[data-tone="red"] .is-current .mb-kpi-bar-fill { fill:var(--kpi-red); }
:root #app .management-board .mb-kpi-bars[data-tone="neutral"] .is-current .mb-kpi-bar-fill { fill:var(--kpi-muted); }
:root #app .management-board .mb-kpi-bar-zero { stroke:var(--kpi-ink); stroke-width:2; vector-effect:non-scaling-stroke; }
:root #app .management-board .mb-kpi-bar-axis { display:block; margin-top:9px; color:var(--kpi-muted); font-size:10px; }
:root #app .management-board .mb-kpi-gauge { display:block; width:min(100%,245px); height:auto; margin:10px auto 0; }
:root #app .management-board .mb-kpi-chart-track { stroke:var(--kpi-track); }
:root #app .management-board .mb-kpi-chart-fill { stroke:var(--kpi-green); }
:root #app .management-board .mb-kpi-card[data-tone="amber"] .mb-kpi-gauge .mb-kpi-chart-fill { stroke:var(--kpi-amber); }
:root #app .management-board .mb-kpi-card[data-tone="red"] .mb-kpi-gauge .mb-kpi-chart-fill { stroke:var(--kpi-red); }
:root #app .management-board .mb-kpi-card[data-tone="neutral"] .mb-kpi-gauge .mb-kpi-chart-fill { stroke:var(--kpi-muted); }
:root #app .management-board .mb-kpi-gauge-value { fill:var(--kpi-green); font:600 29px 'Space Grotesk',sans-serif; letter-spacing:-1px; }
:root #app .management-board .mb-kpi-card[data-tone="amber"] .mb-kpi-gauge-value { fill:var(--kpi-amber); }
:root #app .management-board .mb-kpi-card[data-tone="red"] .mb-kpi-gauge-value { fill:var(--kpi-red); }
:root #app .management-board .mb-kpi-card[data-tone="neutral"] .mb-kpi-gauge-value { fill:var(--kpi-muted); }
:root #app .management-board :is(.mb-kpi-gauge-caption,.mb-kpi-ring-caption) { fill:var(--kpi-muted); font:500 10px Manrope,sans-serif; }
:root #app .management-board .mb-kpi-gauge-axis { fill:var(--kpi-muted); font:500 9px Manrope,sans-serif; }

/* Complementarios y aviso */
:root #app .management-board .mb-kpi-card .mb-kpi-total { display:block; min-height:0; margin:14px 0 0; color:var(--kpi-ink); font-size:12px; font-weight:600; line-height:1.4; }
:root #app .management-board .mb-kpi-card .mb-kpi-total b { font:500 24px/1.2 'Space Grotesk',sans-serif; letter-spacing:-.03em; white-space:nowrap; }
:root #app .management-board .mb-kpi-card .mb-kpi-support-value { display:block; margin:6px 0 0; color:var(--kpi-muted); font-size:12px; font-weight:600; line-height:1.4; overflow-wrap:normal; }
:root #app .management-board .mb-kpi-card .mb-kpi-support-value b { color:var(--kpi-green); font-weight:700; white-space:nowrap; }
:root #app .management-board .mb-kpi-card .mb-kpi-signal { display:flex; align-items:center; gap:7px; width:calc(100% - 44px); min-height:36px; margin:0 22px 8px; padding:0; border:0; background:none; color:var(--kpi-amber); font:700 12px/1.35 Manrope,'Segoe UI',sans-serif; text-align:left; cursor:pointer; }
:root #app .management-board .mb-kpi-card .mb-kpi-signal[data-tone="red"] { color:var(--kpi-red); }
:root #app .management-board .mb-kpi-signal:hover span { text-decoration:underline; text-underline-offset:3px; }
:root #app .management-board .mb-kpi-signal > i { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:currentColor; }
:root #app .management-board .mb-kpi-signal svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Dos caras del KPI: la altura la fija el resumen; el detalle se desplaza dentro del reverso. */
:root #app .management-board .mb-kpi-card .mb-kpi-flip-button { display:flex; align-items:center; gap:6px; width:100%; min-height:52px; margin:0; padding:14px 22px; border:0; border-top:1px solid var(--kpi-line); background:var(--kpi-paper); color:var(--kpi-green); font:750 12px/1.3 Manrope,'Segoe UI',sans-serif; text-align:left; cursor:pointer; }
:root #app .management-board .mb-kpi-card .mb-kpi-flip-button:hover { background:#f8fbf8; }
:root #app .management-board .mb-kpi-card .mb-kpi-flip-button:focus-visible { outline:2px solid var(--kpi-green); outline-offset:-5px; border-radius:6px; }
:root #app .management-board .mb-kpi-details { position:absolute; inset:0; z-index:1; box-sizing:border-box; width:100%; height:100%; margin:0; border:0; background:var(--kpi-paper); backface-visibility:hidden; pointer-events:none; transform:rotateY(180deg); transition:transform .48s ease,visibility .48s; visibility:hidden; }
:root #app .management-board .mb-kpi-details[open] { pointer-events:auto; transform:rotateY(0); visibility:visible; }
:root #app .management-board .mb-kpi-details > summary { display:flex; align-items:center; gap:6px; box-sizing:border-box; height:52px; padding:14px 22px; list-style:none; background:var(--kpi-paper); color:var(--kpi-green); font:750 12px/1.3 Manrope,'Segoe UI',sans-serif; cursor:pointer; user-select:none; transition:background .15s; }
:root #app .management-board .mb-kpi-details > summary::-webkit-details-marker { display:none; }
:root #app .management-board .mb-kpi-details > summary:hover { background:#f8fbf8; }
:root #app .management-board .mb-kpi-details > summary:focus-visible { outline:2px solid var(--kpi-green); outline-offset:-5px; border-radius:6px; }
:root #app .management-board .mb-kpi-details[open] > summary { background:#f7faf7; border-bottom:1px solid var(--kpi-faint); }
:root #app .management-board .mb-kpi-chevron { width:16px; height:16px; flex-shrink:0; margin-left:auto; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
:root #app .management-board .mb-kpi-details[open] .mb-kpi-chevron { transform:rotate(180deg); }
:root #app .management-board .mb-kpi-opened, :root #app .management-board .mb-kpi-details[open] .mb-kpi-closed { display:none; }
:root #app .management-board .mb-kpi-details[open] .mb-kpi-opened { display:inline; }
:root #app .management-board .mb-kpi-detail-body { position:absolute; inset:52px 0 0; box-sizing:border-box; height:auto; padding:4px 22px 22px; color:var(--kpi-ink); font-size:12px; line-height:1.55; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#a8bcae transparent; overflow-wrap:anywhere; }
:root #app .management-board .mb-kpi-detail-body::-webkit-scrollbar { width:8px; }
:root #app .management-board .mb-kpi-detail-body::-webkit-scrollbar-thumb { border:2px solid var(--kpi-paper); border-radius:8px; background:#a8bcae; }
:root #app .management-board .mb-kpi-detail-body :is(dl,dd,p,h5,ul) { margin:0; }
:root #app .management-board .mb-kpi-meta { display:grid; gap:6px; padding:14px 0 12px; border:0; border-bottom:1px solid var(--kpi-faint); font-size:11px; }
:root #app .management-board .mb-kpi-meta > div { display:flex; flex-wrap:wrap; gap:2px 6px; }
:root #app .management-board .mb-kpi-meta dt { color:var(--kpi-muted); }
:root #app .management-board .mb-kpi-meta dt::after { content:':'; }
:root #app .management-board .mb-kpi-meta dd { color:var(--kpi-ink); font-weight:650; }
:root #app .management-board .mb-kpi-section { padding-top:16px; }
:root #app .management-board .mb-kpi-section + .mb-kpi-section { margin-top:16px; border-top:1px solid var(--kpi-faint); }
:root #app .management-board .mb-kpi-section h5 { margin-bottom:10px; color:var(--kpi-ink); font-size:12px; font-weight:750; letter-spacing:-.1px; }
:root #app .management-board :is(.mb-kpi-comparison,.mb-kpi-review) { display:block; padding:0; border:0; }
:root #app .management-board :is(.mb-kpi-comparison,.mb-kpi-review) > div { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; padding:9px 0; border-bottom:1px solid var(--kpi-faint); font-size:11px; }
:root #app .management-board :is(.mb-kpi-comparison,.mb-kpi-review) > div:first-child { padding-top:0; }
:root #app .management-board :is(.mb-kpi-comparison,.mb-kpi-review) > div:last-child { padding-bottom:0; border-bottom:0; }
:root #app .management-board :is(.mb-kpi-comparison,.mb-kpi-review) dt { min-width:0; color:var(--kpi-muted); }
:root #app .management-board :is(.mb-kpi-comparison,.mb-kpi-review) dd { margin-left:auto; color:var(--kpi-ink); font-weight:700; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:normal; }
:root #app .management-board .mb-kpi-comparison .is-current dd { color:var(--kpi-green); }
:root #app .management-board .mb-kpi-review { margin:10px 0; }
:root #app .management-board .mb-kpi-note { color:var(--kpi-muted); font-size:11px; line-height:1.65; }
:root #app .management-board .mb-kpi-note + .mb-kpi-note, :root #app .management-board .mb-kpi-detail-body > .mb-kpi-note { margin-top:8px; }
:root #app .management-board .mb-kpi-detail-body .mb-kpi-note.mb-metric-support { display:block; margin:8px 0 0; color:var(--kpi-ink); font-size:11px; font-weight:650; }
:root #app .management-board .mb-kpi-observation, :root #app .management-board .mb-kpi-detail-body > .mb-metric-support { display:block; margin:10px 0 0; padding:10px 12px; border-radius:5px; background:var(--kpi-amber-soft); color:var(--kpi-amber); font-size:11px; font-weight:600; line-height:1.6; }
:root #app .management-board :is(.mb-kpi-alert-list,.mb-kpi-controls) { display:grid; gap:6px; padding:0; list-style:none; }
:root #app .management-board .mb-kpi-alert-list li { display:grid; gap:2px; padding:8px 11px; border-left:3px solid currentColor; border-radius:5px; background:var(--kpi-amber-soft); color:var(--kpi-amber); font-size:11px; line-height:1.45; }
:root #app .management-board .mb-kpi-alert-list li[data-tone="red"] { background:var(--kpi-red-soft); color:var(--kpi-red); }
:root #app .management-board .mb-kpi-alert-list li span { color:var(--kpi-ink); font-weight:500; }
:root #app .management-board .mb-kpi-controls { margin:12px 0 10px; }
:root #app .management-board .mb-kpi-controls li { display:flex; align-items:center; gap:11px; padding:8px 11px; border-left:3px solid currentColor; border-radius:5px; background:#f3f5f3; color:var(--kpi-muted); font-size:11px; line-height:1.35; }
:root #app .management-board .mb-kpi-controls li b { min-width:36px; font:600 20px/1.1 'Space Grotesk',sans-serif; letter-spacing:-.5px; }
:root #app .management-board .mb-kpi-controls li[data-tone="green"] { background:var(--kpi-green-soft); color:var(--kpi-green); }
:root #app .management-board .mb-kpi-controls li[data-tone="amber"] { background:var(--kpi-amber-soft); color:var(--kpi-amber); }
:root #app .management-board .mb-kpi-controls li[data-tone="red"] { background:var(--kpi-red-soft); color:var(--kpi-red); }
:root #app .management-board .mb-kpi-ring-layout { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
:root #app .management-board .mb-kpi-ring { width:150px; height:150px; flex:0 0 150px; }
:root #app .management-board .mb-kpi-ring-layout .mb-kpi-note { flex:1 1 120px; }
:root #app .management-board .mb-kpi-ring-value { fill:var(--kpi-green); font:600 26px 'Space Grotesk',sans-serif; letter-spacing:-1px; }
:root #app .management-board .mb-kpi-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:16px; margin-top:16px; border-top:1px solid var(--kpi-faint); }
:root #app .management-board .mb-kpi-actions small { color:var(--kpi-muted); font-size:11px; }
:root #app .management-board .mb-kpi-actions .mb-kpi-lines { display:inline-flex; align-items:center; gap:8px; width:auto; min-height:40px; padding:9px 14px; border:1px solid #cddbd0; border-radius:7px; background:var(--kpi-paper); background-image:none; color:var(--kpi-green); font:700 12px/1.25 Manrope,'Segoe UI',sans-serif; box-shadow:none; text-align:left; }
:root #app .management-board .mb-kpi-actions .mb-kpi-lines:hover { background:var(--kpi-green-soft); }
/* Bloques existentes reubicados en el detalle: sin dorado en la serie mensual. */
:root #app .management-board .mb-kpi-detail-body .mb-card-monthly { margin:0; }
:root #app .management-board .mb-kpi-detail-body .mb-monthly-trend { margin:0; }
:root #app .management-board .mb-kpi-detail-body .mb-monthly-trend small { color:var(--kpi-muted); font-size:11px; }
:root #app .management-board .mb-kpi-detail-body .mb-monthly-trend polyline { stroke:var(--kpi-green); }
:root #app .management-board .mb-kpi-detail-body .mb-monthly-trend circle { fill:var(--kpi-paper); stroke:var(--kpi-amber); }
:root #app .management-board .mb-kpi-detail-body .mb-absence-month { margin:0; }
:root #app .management-board .mb-kpi-detail-body .mb-product-summary { margin:0; }

/* OP planificadas: el valor conserva la escala principal; el conteo queda como dato de apoyo. */
:root #app .management-board .mb-kpi-measures { display:grid; gap:10px; margin-top:6px; }
:root #app .management-board .mb-kpi-measure { container-type:inline-size; display:block; min-width:0; padding-top:12px; }
:root #app .management-board .mb-kpi-measure > small { display:block; color:var(--kpi-muted); font-size:11px; font-weight:700; }
:root #app .management-board .mb-kpi-measure .mb-kpi-value { margin-top:6px; }
:root #app .management-board .mb-kpi-measure-count { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding-top:10px; border-top:1px solid var(--kpi-faint); }
:root #app .management-board .mb-kpi-measure-count > small { flex:1 1 90px; }
:root #app .management-board .mb-kpi-measure-count .mb-kpi-value { flex:0 0 auto; margin:0; font-size:20px; line-height:1.2; }
:root #app .management-board .mb-kpi-measure-count .mb-kpi-variation { flex:0 0 auto; min-height:0; margin:0; font-size:11px; }

/* Variantes con reglas propias heredadas */
:root #app .management-board .mb-kpi-card.mb-finished-card, :root #app .management-board .mb-kpi-card.mb-absence-card { display:block; align-self:start; gap:0; padding:0; border-top-width:1px; }
:root #app .management-board .mb-kpi-card.claims-card .mb-kpi-value { min-height:0; }

@media (max-width:520px) {
  :root #app .management-board .mb-area-list .mb-metric-card-grid { gap:12px; padding:10px; }
  :root #app .management-board .mb-kpi-card .mb-kpi-overview { padding:18px 16px 12px; }
  :root #app .management-board .mb-kpi-source { top:18px; right:16px; }
  :root #app .management-board .mb-area-flat .mb-kpi-source { top:47px; }
  :root #app .management-board .mb-kpi-card .mb-kpi-signal { width:calc(100% - 32px); margin:0 16px 8px; }
  :root #app .management-board .mb-kpi-details > summary, :root #app .management-board .mb-kpi-card .mb-kpi-flip-button { padding:14px 16px; }
  :root #app .management-board .mb-kpi-detail-body { padding:4px 16px 18px; }
  :root #app .management-board .mb-kpi-title { font-size:15px; }
}
@media (max-width:900px) {
  :root #app .management-board .mb-raw-material-layout { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:520px) {
  :root #app .management-board .mb-raw-material-layout { gap:12px; padding:10px; }
}
@media (prefers-reduced-motion:reduce) {
  :root #app .management-board :is(.mb-kpi-card,.mb-kpi-front,.mb-kpi-details,.mb-kpi-details > summary,.mb-kpi-chevron) { transition:none; }
}