/* Acto 5 · Medición inteligente. Dashboard claro (Apple / Linear) con cabecera verde stage y KPIs en vidrio.
   Glass solo en la banda verde; en la zona clara, tarjetas blancas sobre --surface-soft. */

.m-body { background: var(--surface-soft); }

/* ---------- Cabecera ---------- */
.m-head { position: relative; overflow: hidden; padding: 28px 0 40px;
  background: radial-gradient(70% 120% at 85% 0%, rgba(0, 154, 68, .38) 0%, rgba(0, 154, 68, 0) 60%), linear-gradient(180deg, #02301A 0%, #034526 100%); }
.m-head__glow { position: absolute; width: 900px; height: 900px; right: -300px; top: -520px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 90px rgba(255, 255, 255, .02), 0 0 0 180px rgba(255, 255, 255, .015); pointer-events: none; }
.m-head__in { position: relative; display: grid; gap: 28px; }
.m-head__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.m-head__brand { display: flex; align-items: center; gap: 14px; }
.m-head__logo { height: 28px; width: auto; }
.m-head__sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .3); }
.m-head__app { font-size: 15px; color: rgba(255, 255, 255, .8); }
.m-head__live { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--text-body-sm); color: rgba(255, 255, 255, .78); }
.m-live { color: var(--white); }
.m-live::before { color: #5BD08B; background: #5BD08B; }
.m-head__now b { color: var(--white); }
.m-head__clock { font-size: 15px; font-weight: 700; color: var(--white); padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.m-head__title { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.m-head__title h1 { margin-top: 14px; max-width: 760px; font-size: clamp(32px, 3.6vw, 52px); }
.m-filter { display: grid; gap: 8px; justify-items: end; }
.m-filter__l { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.m-seg { flex-wrap: wrap; justify-content: flex-end; }
.m-seg button.is-new { position: relative; }
.m-seg button.is-new::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #5BD08B; }
.m-head__note { display: flex; align-items: center; gap: 8px; font-size: var(--text-caption); color: rgba(255, 255, 255, .62); }
.m-head__note svg { width: 14px; height: 14px; }

/* KPIs en vidrio */
.m-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.m-kpi { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 0; border-radius: var(--radius-lg); overflow: hidden; align-content: start; min-height: 168px;
  transition: transform .5s var(--ease-reveal), box-shadow .5s var(--ease-reveal), opacity var(--duration-reveal) var(--ease-reveal), border-color .5s; }
.m-kpi__l { display: grid; gap: 2px; font-size: 14px; font-weight: 700; color: var(--white); line-height: 1.25; min-height: 2.9em; }
.m-kpi__l small { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .62); }
.m-kpi__v { font-size: clamp(26px, 2.2vw, 34px); line-height: 1; letter-spacing: -0.025em; white-space: nowrap; }
.m-kpi__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.m-kpi__h { color: rgba(255, 255, 255, .55); }
.m-kpi__d { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; padding: 2px 8px 2px 5px; border-radius: var(--radius-pill); }
.m-kpi__d svg { width: 12px; height: 12px; }
.m-kpi__d.is-good { background: rgba(91, 208, 139, .18); color: #9BE7B9; }
.m-kpi__d.is-bad { background: rgba(240, 110, 100, .2); color: #FFB4AC; }
.m-kpi__s { width: calc(100% + 36px); max-width: none; height: 44px; margin: auto -18px 0; }
.m-kpi__s .l { fill: none; stroke: #9BE7B9; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.m-kpi__s .a { fill: rgba(155, 231, 185, .14); }

/* ---------- Rejilla ---------- */
.m-main { padding: 28px 0 56px; }
.m-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.m-span-12 { grid-column: span 12; } .m-span-8 { grid-column: span 8; } .m-span-6 { grid-column: span 6; } .m-span-4 { grid-column: span 4; }
.m-card { position: relative; background: var(--white); border-radius: var(--radius-xl); padding: 24px 26px; box-shadow: 0 1px 2px rgba(2, 48, 26, .05), 0 6px 24px rgba(2, 48, 26, .05);
  min-width: 0; transition: box-shadow .6s var(--ease-reveal), opacity var(--duration-reveal) var(--ease-reveal), transform var(--duration-reveal) var(--ease-reveal); }
.m-card--flat { background: transparent; box-shadow: none; padding: 4px 0 0; }
.m-card.is-boost { box-shadow: 0 0 0 2px var(--green-500), 0 16px 48px rgba(0, 154, 68, .18); }
.m-kpi.is-boost, .m-kpis.is-boost .m-kpi { border-color: rgba(155, 231, 185, .7); }
.m-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.m-card__head .vd-kicker { margin-bottom: 8px; }
.m-card__sub { margin-top: 4px; font-size: 14px; color: var(--ink-500); max-width: 62ch; }
.m-subh { margin: 22px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--ink-500); }
.m-caption { font-size: 12px; color: var(--ink-500); margin-top: 8px; }
.m-big { display: grid; justify-items: end; gap: 2px; text-align: right; }
.m-big b { font-size: 34px; line-height: 1; letter-spacing: -0.025em; }
.m-big span { font-size: 13px; color: var(--ink-500); }
.is-good { color: #0B7A3B; font-weight: 700; }
.is-bad { color: var(--negative); font-weight: 700; }
.m-legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-500); }
.m-legend span { display: inline-flex; align-items: center; gap: 6px; }
.m-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.m-dot--city { background: rgba(0, 154, 68, .55); box-shadow: 0 0 0 3px rgba(0, 154, 68, .15); }
.m-dot--plant { background: var(--white); border: 2px solid var(--green-900); width: 9px; height: 9px; }
.is-switching .m-card:not(.m-card--flat) > :not(.m-card__head) { animation: m-swap .45s var(--ease-reveal); }
@keyframes m-swap { 0% { opacity: .35; } 100% { opacity: 1; } }

/* ---------- Insights del agente ---------- */
.m-alerts .m-card__head { margin-bottom: 14px; }
.m-alerts__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 60px) / 4)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; }
.m-alerts__rail::-webkit-scrollbar { display: none; }
.m-alert { scroll-snap-align: start; position: relative; display: grid; align-content: start; gap: 10px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--white);
  box-shadow: 0 1px 2px rgba(2, 48, 26, .05), 0 6px 20px rgba(2, 48, 26, .05); overflow: hidden; animation: m-in .7s var(--ease-reveal) both; animation-delay: calc(var(--i, 0) * 70ms); }
.m-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sev); }
.m-alert[data-sev="neg"] { --sev: var(--negative); --sev-bg: #FBE6E4; --sev-fg: #9A2820; }
.m-alert[data-sev="warn"] { --sev: var(--warning); --sev-bg: #FFF4D6; --sev-fg: #7A5600; }
.m-alert[data-sev="good"] { --sev: var(--green-500); --sev-bg: var(--green-050); --sev-fg: var(--green-700); }
.m-alert[data-sev="info"] { --sev: var(--info); --sev-bg: #E3EEF9; --sev-fg: #1F5594; }
.m-alert__top { display: flex; align-items: center; gap: 10px; }
.m-alert__ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--sev-bg); color: var(--sev-fg); flex: none; }
.m-alert__ico svg { width: 17px; height: 17px; }
.m-alert__sev { font-size: 12px; font-weight: 700; color: var(--sev-fg); }
.m-alert__mk { margin-left: auto; font-size: 12px; color: var(--ink-500); }
.m-alert h3 { font-size: 17px; line-height: 1.3; }
.m-alert p { font-size: 14px; color: var(--ink-700); line-height: 1.5; }
.m-alert__cta { justify-self: start; margin-top: 2px; }
@keyframes m-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Mapa ---------- */
.m-map__body { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; align-items: stretch; }
.m-map__canvas { position: relative; height: 500px; border-radius: var(--radius-lg); background: radial-gradient(70% 70% at 40% 40%, #F7FBF8 0%, #FAFAFA 70%); overflow: hidden; }
.m-map__canvas svg { position: absolute; inset: 0; }
.m-map__canvas .vd-worldmap__dots circle { r: min(3.9px, calc(var(--upp, 1) * 3.4px)); }
.m-plant { fill: var(--white); stroke: var(--green-900); }
.m-city { cursor: default; transition: opacity .6s var(--ease-reveal); }
.m-city__dot { fill: rgba(0, 154, 68, .55); stroke: rgba(255, 255, 255, .9); stroke-width: calc(var(--upp, 1) * 1.2); }
.m-city__ring { fill: rgba(0, 154, 68, .28); transform-box: fill-box; transform-origin: center; animation: m-pulse 3s var(--ease-out) infinite; }
.m-city.is-dim { opacity: .14; }
.m-city.is-dim .m-city__ring { animation: none; opacity: 0; }
@keyframes m-pulse { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.m-label { fill: var(--ink-900); font-weight: 700; paint-order: stroke; stroke: rgba(250, 250, 250, .92); stroke-linejoin: round; pointer-events: none; animation: m-fade .6s var(--ease-reveal) both; }
.m-ping { fill: var(--green-500); transform-box: fill-box; transform-origin: center; animation: m-ping 1.6s var(--ease-out) forwards; pointer-events: none; }
.m-ping.is-dim { fill: var(--ink-300); }
@keyframes m-ping { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
.m-map__top { list-style: none; display: grid; align-content: start; gap: 4px; }
.m-map__top li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--ink-200); animation: m-in .6s var(--ease-reveal) both; animation-delay: calc(var(--i) * 60ms); }
.m-top__n { font-size: 15px; font-weight: 700; display: grid; }
.m-top__n small { font-size: 12px; font-weight: 400; color: var(--ink-500); }
.m-map__top b { font-size: 15px; align-self: center; }
.m-top__bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: var(--ink-100); overflow: hidden; }
.m-top__bar i { display: block; height: 100%; border-radius: 4px; background: var(--green-500); transition: width .9s var(--ease-reveal); }
.m-top__empty { font-size: 14px; color: var(--ink-500); border: 0 !important; }

/* ---------- Feed ---------- */
.m-feed { display: flex; flex-direction: column; }
.m-feed__list { list-style: none; display: grid; gap: 2px; align-content: start; }
.m-feed__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: var(--radius-md); animation: m-feed .6s var(--ease-reveal) both; }
.m-feed__list li.is-hl { background: var(--green-050); }
@keyframes m-feed { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.m-feed__i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-soft); color: var(--green-700); }
.m-feed__list li.is-hl .m-feed__i { background: var(--green-500); color: var(--white); }
.m-feed__i svg { width: 16px; height: 16px; }
.m-feed__t { font-size: 14px; line-height: 1.35; display: grid; gap: 2px; min-width: 0; }
.m-feed__t small { font-size: 12px; color: var(--ink-500); }
.m-feed__list time { font-size: 12px; color: var(--ink-500); }

/* ---------- SVG comunes ---------- */
.m-svg { width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.m-axis { stroke: var(--ink-200); stroke-width: 1; }
.m-tick { font-size: 12px; fill: var(--ink-500); }
.m-lane { font-size: 12px; font-weight: 700; fill: var(--ink-700); letter-spacing: .04em; }
.m-line-c { fill: none; stroke: var(--green-500); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.m-line-i { fill: none; stroke: var(--green-700); stroke-width: 1.5; stroke-linejoin: round; }
.m-area-i { fill: rgba(3, 106, 56, .1); }
.m-end { fill: var(--green-500); stroke: var(--white); stroke-width: 2.5; }
.m-end--i { fill: var(--green-700); }
.m-mark { stroke: var(--ink-300); stroke-dasharray: 3 4; }
.m-mark-t { font-size: 12px; font-weight: 700; fill: var(--ink-700); paint-order: stroke; stroke: var(--white); stroke-width: 4px; }
.m-mark-t.is-neg { fill: var(--negative); }
.m-cross { stroke: var(--green-700); stroke-width: 1; opacity: 0; pointer-events: none; transition: opacity .2s; }
.m-hit { fill: transparent; }
.m-seo__totals { display: flex; gap: 28px; }
.m-seo__totals div { display: grid; gap: 2px; }
.m-seo__totals b { font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; }
.m-seo__totals span { font-size: 12px; color: var(--ink-500); }

/* ---------- Secciones ---------- */
.m-sections { list-style: none; display: grid; }
.m-sections li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 76px 64px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ink-200); }
.m-sections li:last-child { border-bottom: 0; }
.m-sec__i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-soft); color: var(--green-700); }
.m-sec__i svg { width: 17px; height: 17px; }
.m-sec__n { font-size: 15px; font-weight: 700; display: grid; gap: 2px; }
.m-sec__n small { font-size: 12px; font-weight: 400; }
.m-sections .m-sec__s { width: 76px; height: 30px; }
.m-sections .m-sec__s .l { fill: none; stroke: var(--green-500); stroke-width: 1.75; stroke-linejoin: round; }
.m-sections .m-sec__s .a { fill: rgba(0, 154, 68, .1); }
.m-sections b { text-align: right; font-size: 15px; }
.m-sections li.is-spike .m-sec__i { background: var(--green-500); color: var(--white); }
.m-pill { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--green-050); color: var(--green-700); font-weight: 700; }
.m-pill--info { background: #E3EEF9; color: #1F5594; }

/* ---------- GEO ---------- */
.m-big span .is-good { font-size: 13px; }
.m-engines { display: grid; gap: 12px; }
.m-engine { display: grid; grid-template-columns: 170px minmax(0, 1fr) 52px; gap: 14px; align-items: center; }
.m-engine__n { font-size: 15px; font-weight: 700; display: grid; }
.m-engine__n small { font-size: 12px; font-weight: 400; color: var(--ink-500); }
.m-engine__track { height: 12px; border-radius: 12px; background: var(--ink-100); overflow: hidden; }
.m-engine__track i { display: block; height: 100%; width: 100%; border-radius: 12px; background: linear-gradient(90deg, var(--green-700), var(--green-500)); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease-reveal); }
.m-engine b { text-align: right; font-size: 15px; }
.m-questions { list-style: none; display: grid; }
.m-questions li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ink-200); animation: m-in .6s var(--ease-reveal) both; animation-delay: calc(var(--i) * 50ms); }
.m-questions li:last-child { border-bottom: 0; }
.m-q__q { font-size: 14px; line-height: 1.35; display: grid; gap: 2px; }
.m-q__q small { font-size: 12px; color: var(--ink-500); }
.m-q__q small.m-q__new { color: var(--green-700); font-weight: 700; }
.m-q__n { font-size: 13px; color: var(--ink-500); }
.m-questions li.is-fresh { background: linear-gradient(90deg, var(--green-050), rgba(234, 246, 239, 0)); margin: 0 -10px; padding: 11px 10px; border-radius: var(--radius-md); }

/* ---------- Matriz de presupuestos ---------- */
.m-matrix { display: grid; gap: 6px; }
.m-mx__row { display: grid; grid-template-columns: 100px repeat(6, minmax(0, 1fr)) 52px; gap: 5px; align-items: center; transition: opacity .5s var(--ease-reveal); }
.m-mx__head span { font-size: 11px; color: var(--ink-500); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-mx__head span:first-child { text-align: left; }
.m-mx__mk { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-mx__c { height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--green-900);
  transition: background .6s var(--ease-reveal), transform .3s var(--ease-out); animation: m-fade .5s var(--ease-reveal) both; }
.m-mx__c.is-dark { color: var(--white); }
.m-mx__c:hover { transform: scale(1.06); }
.m-mx__row > b { text-align: right; font-size: 15px; }
.m-mx__row.is-dim { opacity: .28; }
.m-mx__row.is-on .m-mx__mk { color: var(--green-700); }
.m-segbar { margin-top: 20px; display: grid; gap: 10px; }
.m-segbar__bar { display: flex; height: 12px; border-radius: 12px; overflow: hidden; gap: 2px; }
.m-segbar__bar i { flex: 1 1 0; flex-basis: 0; transition: flex-grow .9s var(--ease-reveal); }
.m-segbar__leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-700); }
.m-segbar__leg span { display: inline-flex; align-items: center; gap: 6px; }
.m-segbar__leg i { width: 10px; height: 10px; border-radius: 3px; }

.m-products { list-style: none; display: grid; }
.m-products li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ink-200); animation: m-in .6s var(--ease-reveal) both; animation-delay: calc(var(--i) * 60ms); }
.m-products li:last-child { border-bottom: 0; }
.m-p__t { font-size: 14px; font-weight: 700; display: grid; gap: 2px; }
.m-p__t small { font-size: 12px; font-weight: 400; color: var(--ink-500); }
.m-p__bar { height: 6px; border-radius: 6px; background: var(--ink-100); overflow: hidden; }
.m-p__bar i { display: block; height: 100%; width: 100%; background: var(--green-500); border-radius: 6px; transform-origin: left; animation: m-grow 1s var(--ease-reveal) both; }
@keyframes m-grow { from { width: 0; } }
.m-products b { text-align: right; font-size: 15px; }

/* ---------- Impacto de la IA ---------- */
.m-ai__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 36px; align-items: start; }
.m-ai__stat { display: grid; gap: 4px; }
.m-ai__stat b { font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.m-ai__stat span { font-size: 14px; color: var(--ink-500); }
.m-ai__stat em { font-style: normal; font-weight: 700; color: #0B7A3B; }
.m-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 120px; margin-top: 18px; align-items: end; }
.m-bar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.m-bar i { display: block; width: 100%; height: 100%; border-radius: 6px 6px 3px 3px; background: var(--green-100); transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease-reveal), background .3s; }
.m-bar.is-last i { background: var(--green-500); }
.m-bar:hover i { background: var(--green-700); }
.m-bar em { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--ink-500); }
.m-bar:not(:first-child):not(:last-child) em { opacity: 0; }
.m-journey { list-style: none; display: grid; margin-top: 36px; }
.m-journey li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 60px; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ink-200); }
.m-j__l { font-size: 14px; font-weight: 700; display: grid; gap: 2px; }
.m-j__l small { font-size: 12px; font-weight: 400; color: var(--ink-500); }
.m-j__v { display: grid; justify-items: end; }
.m-j__v b { font-size: 20px; line-height: 1.1; color: var(--green-700); }
.m-j__v em { font-style: normal; font-size: 11px; color: var(--ink-500); }
.m-j__v--org b { color: var(--ink-500); font-size: 16px; }
.m-sankey__labels { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--ink-500); padding: 0 0 8px; }
.m-sankey__labels span:nth-child(1) { padding-left: 4%; }
.m-sankey__labels span:nth-child(2) { text-align: center; }
.m-sankey__labels span:nth-child(3) { text-align: right; padding-right: 4%; }
.m-link { fill: rgba(122, 121, 119, .16); transition: fill .3s; }
.m-link:hover { fill: rgba(122, 121, 119, .3); }
.m-link.is-ai { fill: rgba(0, 154, 68, .42); }
.m-link.is-ai:hover { fill: rgba(0, 154, 68, .6); }
.m-link.is-quote { fill: rgba(0, 154, 68, .32); }
.m-flow { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.6; stroke-dasharray: 2 14; stroke-linecap: round; animation: m-flow 1.6s linear infinite; pointer-events: none; }
@keyframes m-flow { to { stroke-dashoffset: -32; } }
.m-node { fill: var(--ink-700); }
.m-node.is-ai, .m-node.is-quote { fill: var(--green-500); }
.m-node-t { font-size: 13px; font-weight: 700; fill: var(--ink-900); paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; }
.m-node-v { font-size: 12px; fill: var(--ink-500); paint-order: stroke; stroke: var(--white); stroke-width: 4px; }

/* ---------- Contenido y autonomía ---------- */
.m-content__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 16px; }
.m-tile { background: var(--surface-soft); border-radius: var(--radius-lg); padding: 20px 22px; display: grid; gap: 10px; align-content: start; }
.m-tile__l { font-size: 13px; color: var(--ink-700); font-weight: 700; }
.m-tile > b { font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.m-tile__p { font-size: 13px; color: var(--ink-700); line-height: 1.45; }
.m-bus { display: grid; gap: 8px; margin-top: 4px; }
.m-bu { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 13px; transition: opacity .5s; }
.m-bu em { font-style: normal; color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-bu > i { height: 8px; border-radius: 8px; background: var(--white); overflow: hidden; }
.m-bu > i > i { display: block; height: 100%; width: 100%; border-radius: 8px; background: var(--green-500); transform-origin: left; transition: transform .9s var(--ease-reveal); }
.m-bu b { text-align: right; }
.m-bu.is-dim { opacity: .35; }
.m-compare { display: grid; gap: 8px; margin-top: 6px; }
.m-compare div { display: grid; grid-template-columns: 44px minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-700); }
.m-compare em { font-style: normal; font-weight: 700; text-align: right; }
.m-compare__bar { display: block; height: 8px; border-radius: 8px; transform-origin: left; }
.m-compare__bar--old { background: var(--ink-300); }
.m-compare__bar--new { background: var(--green-500); width: 4%; min-width: 6px; }
.m-ring { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.m-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.m-ring__bg { fill: none; stroke: var(--white); stroke-width: 10; }
.m-ring__fg { fill: none; stroke: var(--green-500); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--ease-reveal); }
.m-ring__fg.is-full { stroke: var(--green-700); }
.m-ring b { position: relative; font-size: 24px; letter-spacing: -0.02em; }

.m-foot { margin-top: 28px; font-size: var(--text-caption); color: var(--ink-500); }

/* ---------- Tooltip ---------- */
.m-tip { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; padding: 10px 14px; border-radius: var(--radius-md); background: var(--green-950); color: var(--white);
  font-size: 13px; line-height: 1.45; max-width: 240px; box-shadow: var(--shadow-lift); opacity: 0; transition: opacity .15s; }
.m-tip.is-on { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .m-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-span-8, .m-span-4, .m-span-6 { grid-column: span 12; }
  .m-content__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .m-ai__grid { grid-template-columns: minmax(0, 1fr); }
  .m-map__body { grid-template-columns: minmax(0, 1fr); }
  .m-map__canvas { height: 340px; }
  .m-alerts__rail { grid-auto-columns: minmax(280px, 82%); }
}
@media (max-width: 640px) {
  .m-head { padding-top: 20px; }
  .m-head__live { gap: 10px; }
  .m-filter { justify-items: start; }
  .m-seg { justify-content: flex-start; }
  .m-seg button { padding: 0 12px; height: 36px; font-size: 13px; }
  .m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .m-kpi { padding: 14px 14px 0; min-height: 150px; }
  .m-kpi__s { width: calc(100% + 28px); margin: 4px -14px 0; }
  .m-kpi__v { font-size: 24px; }
  .m-card { padding: 20px 16px; border-radius: var(--radius-lg); }
  .m-card--flat { padding: 4px 0 0; }
  .m-seo__totals { gap: 16px; }
  .m-seo__totals b { font-size: 19px; }
  .m-engine { grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 10px; }
  .m-mx__row { grid-template-columns: 72px repeat(6, minmax(0, 1fr)) 40px; gap: 3px; }
  .m-mx__c { height: 34px; font-size: 11px; border-radius: 6px; }
  .m-mx__head span { font-size: 10px; }
  .m-mx__mk { font-size: 12px; }
  .m-mx__row > b { font-size: 12px; }
  .m-content__grid { grid-template-columns: minmax(0, 1fr); }
  .m-map__canvas { height: 280px; }
  .m-sankey, #seo { overflow-x: auto; scrollbar-width: none; }
  #seo .m-svg { min-width: 600px; }
  .m-head__note { display: block; }
  .m-head__note svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }
  .m-sankey__svg { min-width: 640px; }
  .m-sankey__labels { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .m-city__ring, .m-flow { animation: none; }
}
/* v2 · con Century Gothic el selector de mercado no cabe en una línea a 390 px: botones más compactos en lugar de partirse */
@media (max-width: 640px) {
  .m-seg { flex-wrap: nowrap; max-width: 100%; }
  .m-seg button { padding: 0 9px; font-size: 13px; }
}