/* Centro de mando. Marino y azul Cooper de marca; cian = en vivo; ámbar = en lectura; rojo = solo alertas.
   Un solo protagonista, la potencia en vivo. Todo lo demás, callado y en su sitio. */
:root { --live: #39d5ee; --live-soft: rgba(57, 213, 238, .14); --lect: #f2b84b; }

.cm {
  container: cm / inline-size;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 16px;
  background: radial-gradient(90% 60% at 18% -8%, rgba(46, 155, 255, .11), transparent 62%), var(--n1);
}
.cm .num { font-family: var(--body); font-variant-numeric: tabular-nums; letter-spacing: 0; word-spacing: normal; }

/* ---------- Cabecera ---------- */
.cm-top { --fs: clamp(13px, 1cqw, 19px); flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--fs); }
.cm-logo { display: none; }
.cm-tt { min-width: 0; }
.cm-title { font: 800 1.5em/1.12 var(--display); font-stretch: 106%; letter-spacing: -.015em; }
.cm-brief li { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 14px; margin-top: 2px; color: var(--fg2); font-size: .95em; }
.cm-brief span { position: relative; }
.cm-brief span + span::before { content: ""; position: absolute; left: -8px; top: .35em; width: 3px; height: 3px; border-radius: 50%; background: var(--fg3); top: 50%; margin-top: -1.5px; }
.cm-brief .bad span:last-child { color: var(--red); font-weight: 600; }
.cm-ctl { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-when { display: grid; justify-items: end; line-height: 1.15; margin-right: 4px; }
.cm-when b { color: var(--fg1); font-size: 1.15em; word-spacing: normal; }
.cm-when small { color: var(--fg3); font-size: .85em; }
.cm-rot[aria-pressed="true"] { background: var(--live-soft); border-color: var(--live); color: var(--fg1); }
.cm-rotbar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3px; background: rgba(57, 213, 238, .12); }
.cm-rotbar i { display: block; height: 100%; background: var(--live); transform-origin: left; animation: cm-rotbar 8s linear both; }
@keyframes cm-rotbar { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- Cuadrícula ---------- */
.cm-grid { --fs: clamp(11.5px, min(1.08cqw, calc((100dvh - 168px) / 56)), 24px); --ring: 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cm-bottom { display: contents; }
.w-potencia { order: 1; } .w-anillos { order: 2; } .w-mapa { order: 3; } .w-recorrido { order: 4; } .w-actividad { order: 5; } .w-consumo { order: 6; } .w-alertas { order: 7; }

@container cm (min-width: 680px) {
  .cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-potencia, .w-recorrido, .w-alertas { grid-column: 1 / -1; }
}
@container cm (min-width: 1040px) {
  .cm-grid {
    flex: 1 1 0; min-height: 0;
    grid-template-columns: 11fr 7fr 6fr;
    grid-template-rows: minmax(226px, 1fr) max-content max-content;
    grid-template-areas:
      "a c b"
      "d d d"
      "z z z";
  }
  .cm-bottom { grid-area: z; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit; min-height: 0; }
  .cm-bottom > .cm-win { order: 0; grid-column: auto; }
  .w-anillos { container-type: size; }
  .w-anillos:not(.is-zoom) .cm-ring { width: clamp(38px, 14.5cqh, 104px); height: clamp(38px, 14.5cqh, 104px); }
  .w-anillos:not(.is-zoom) .cm-rings { grid-auto-rows: minmax(0, 1fr); align-content: stretch; align-items: center; }
  .w-potencia { grid-area: a; } .w-anillos { grid-area: b; } .w-mapa { grid-area: c; } .w-recorrido { grid-area: d; }
}

/* ---------- Ventana ---------- */
.cm-win {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  padding: .75em .95em .85em; border-radius: var(--r-l); font-size: var(--fs); outline-offset: 2px;
  background: linear-gradient(to bottom, rgba(12, 51, 98, .42), rgba(4, 28, 64, .78) 46%), var(--n2);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 36px -28px rgba(0, 0, 0, .9);
}
.cm :focus-visible { outline: none; }
html.teclado .cm :focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.cm-h { flex: none; display: flex; align-items: center; gap: .55em; min-height: 26px; margin-bottom: .15em; }
.cm-h h2 { font: 600 1.04em/1.2 var(--body); color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-h .ex-tag { margin-left: auto; flex: none; }
.cm-exp { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -2px -5px -2px 0; border-radius: var(--r-s); color: var(--fg3); transition: background-color .15s, color .15s, transform .16s var(--ease-out); }
.cm-exp .i { width: 15px; height: 15px; }
.cm-exp:hover { background: var(--n4); color: var(--fg1); }
.cm-exp:active { transform: scale(.92); }
.cm-vivo { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--live); font-size: .9em; font-weight: 600; white-space: nowrap; }
.cm-vivo i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.cm-vivo i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); animation: cm-beat 2s var(--ease-out) infinite; }
@keyframes cm-beat { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.cm-rotn { flex: none; color: var(--live); font-size: .9em; font-weight: 600; }
.cm-main { flex: none; display: flex; align-items: baseline; gap: .45em; line-height: 1.1; color: var(--fg2); font-size: .96em; }
.cm-mid { font: 850 1.75em/1.05 var(--display); font-stretch: 106%; letter-spacing: -.015em; color: var(--fg1); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.cm-mid.bad { color: var(--red); }
.cm-none { color: var(--fg3); font-size: .95em; }

/* ---------- a) Potencia ---------- */
.w-potencia {
  background: radial-gradient(80% 90% at 12% 0%, rgba(57, 213, 238, .1), transparent 62%), linear-gradient(to bottom, rgba(12, 51, 98, .55), rgba(4, 28, 64, .82) 52%), var(--n2);
  box-shadow: inset 0 0 0 1px rgba(57, 213, 238, .2), inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -28px rgba(0, 0, 0, .95);
}
.cm-kw { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5em 1.6em; margin-top: .1em; }
.cm-kw-n { display: flex; align-items: baseline; gap: .4em; }
.cm-big { font: 850 4.8em/.92 var(--display); font-stretch: 110%; letter-spacing: -.035em; color: #fff; text-shadow: 0 0 44px rgba(57, 213, 238, .28); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cm-u { color: var(--live); font-size: 1.1em; font-weight: 600; white-space: nowrap; }
.cm-figs { display: flex; flex-wrap: wrap; gap: .3em 1.5em; }
.cm-figs dt { color: var(--fg3); font-size: .9em; line-height: 1.25; white-space: nowrap; }
.cm-figs dd { font-weight: 600; font-size: 1.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-figs small { color: var(--fg3); font-size: .88em; font-weight: 500; }
.cm-plot-w { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cm-ley { position: absolute; z-index: 1; right: 0; top: .1em; display: flex; gap: 1em; color: var(--fg2); font-size: .9em; font-weight: 500; }
.cm-ley i, .cm-ptip i { display: inline-block; width: 16px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.cm-ley i.hoy, .cm-ptip i.hoy { background: var(--live); }
.cm-ley i.ayer, .cm-ptip i.ayer { height: 2px; background: repeating-linear-gradient(90deg, var(--fg3) 0 4px, transparent 4px 7px); }

.cm-plot { position: relative; flex: 1; min-height: 96px; margin: 1.5em 0 1.5em 4em; touch-action: pan-y; }
.cm-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.cm-plot path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.cm-ayer path { stroke: var(--fg3); stroke-width: 1.75; stroke-dasharray: 5 5; }
.cm-hoy { position: absolute; inset: 0; }
.cm-hoy .l { stroke: var(--live); stroke-width: 3; }
.cm-hoy .a { fill: rgba(57, 213, 238, .1); stroke: none; }
.cm-y { position: absolute; inset: 0; border-bottom: 1px solid var(--line-2); }
.cm-y span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.cm-y b { position: absolute; right: 100%; top: 0; transform: translateY(-50%); margin-right: .6em; color: var(--fg3); white-space: nowrap; font-size: .84em; font-weight: 500; font-variant-numeric: tabular-nums; }
.cm-x { position: absolute; left: 0; right: 0; top: 100%; height: 1.4em; margin-top: .3em; color: var(--fg3); font-size: .84em; font-variant-numeric: tabular-nums; }
.cm-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.cm-x span:first-child { transform: none; }
.cm-x span:last-child:not(:first-child) { transform: translateX(-100%); }
.cm-lab-ayer { position: absolute; margin-top: -1.5em; color: var(--fg3); font-size: .84em; pointer-events: none; }
.cm-dot { position: absolute; left: 0; top: 0; isolation: isolate; will-change: transform; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; pointer-events: none; }
.cm-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--live); }
.cm-dot i { position: absolute; inset: -2.5px; border-radius: 50%; background: var(--live); opacity: .5; animation: cm-beat 2s var(--ease-out) infinite; z-index: -1; }
.cm-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); pointer-events: none; }
.cm-ptip { position: absolute; z-index: 3; top: 0; display: grid; gap: 1px; padding: 6px 9px; border-radius: var(--r-s); background: var(--n0); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-pop); font-size: .92em; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.cm-ptip b { font-weight: 600; }
.cm-ptip span { color: var(--fg2); }

/* ---------- b) Anillos ---------- */
.cm-rings { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35em .5em; align-content: space-evenly; margin-top: .25em; }
.cm-rg { display: grid; justify-items: center; gap: .25em; min-width: 0; text-align: center; }
.cm-ring { --rc: var(--accent); position: relative; display: block; width: var(--ring); height: var(--ring); }
.cm-ring.ambar { --rc: var(--lect); }
.cm-ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.cm-ring circle { fill: none; stroke-width: 6; }
.cm-ring .t { stroke: var(--n4); }
.cm-ring .v { stroke: var(--rc); stroke-linecap: round; }
.cm-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 .94em/1 var(--display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cm-rg-t { min-width: 0; max-width: 100%; line-height: 1.2; }
.cm-rg-t b { display: block; font-size: .9em; font-weight: 600; }
.cm-rg-t small { display: block; color: var(--fg3); font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-rest { margin-left: auto; color: var(--fg3); font-size: .86em; white-space: nowrap; }

/* ---------- c) Mapa ---------- */
.cm-map-w { flex: 1; min-height: 0; display: flex; margin-top: .2em; }
.cm-map { position: relative; flex: 1; min-width: 0; min-height: 150px; container-type: size; }
.cm-map-in { position: absolute; left: 50%; top: 50%; width: min(100cqw, calc(100cqh * 1.3043)); aspect-ratio: 600 / 460; transform: translate(-50%, -50%); }
.cm-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cm-pins { position: absolute; inset: 0; }
.cm-base .land { fill: rgba(143, 198, 255, .06); stroke: rgba(143, 198, 255, .42); stroke-width: 1.25; stroke-linejoin: round; }
.cm-base .dots { fill: url(#cm-dots); }
.cm-base pattern circle { fill: rgba(143, 198, 255, .3); }
.cm-base .box { fill: none; stroke: var(--line-2); stroke-width: 1; }
.pin, .cm-lm { --pc: var(--accent); }
.pin.p-lectura, .cm-lm.p-lectura { --pc: var(--lect); }
.pin.p-off, .cm-lm.p-off { --pc: var(--red); }
.pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.pin.p-none { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.pin i, .cm-lm i { position: relative; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1.5px var(--n1); }
.pin.p-lectura i, .cm-lm.p-lectura i { background: var(--n1); box-shadow: inset 0 0 0 2.5px var(--pc), 0 0 0 1px var(--n1); }
.pin.p-off i, .cm-lm.p-off i { border-radius: 2px; transform: rotate(45deg); }
.pin.p-none i, .cm-lm.p-none i { width: 5px; height: 5px; background: none; box-shadow: inset 0 0 0 1.25px var(--fg3); }
.pin:not(.p-none) i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--pc); animation: cm-pin 2.8s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
.pin.p-off i::after { animation-duration: 1.8s; }
@keyframes cm-pin { from { transform: scale(.7); opacity: .9; } 72%, to { transform: scale(2.5); opacity: 0; } }
.pin:hover { z-index: 2; }
.pin:hover i { box-shadow: 0 0 0 2px #fff; }
.pin.p-lectura:hover i { box-shadow: inset 0 0 0 2.5px var(--pc), 0 0 0 2px #fff; }
html.teclado .cm .pin:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-radius: 50%; z-index: 2; }
.pin span { position: absolute; color: var(--fg1); font-size: .8em; font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--n1), 0 0 3px var(--n1), 0 1px 2px var(--n1); }
.pin.p-none span { color: var(--fg3); font-weight: 500; font-size: .74em; }
.lado-r span { left: calc(50% + 12px); top: 50%; transform: translateY(-50%); }
.lado-l span { right: calc(50% + 12px); top: 50%; transform: translateY(-50%); }
.lado-t span { left: 50%; bottom: calc(50% + 10px); transform: translateX(-50%); }
.lado-b span { left: 50%; top: calc(50% + 10px); transform: translateX(-50%); }
.lado-tl span { right: 50%; bottom: calc(50% + 7px); }
.lado-tr span { left: calc(50% - 4px); bottom: calc(50% + 8px); }
.lado-be span { right: calc(50% - 8px); top: calc(50% + 8px); }
.cm-pintip { position: absolute; z-index: 4; display: grid; gap: 1px; max-width: 240px; padding: 7px 10px; border-radius: var(--r-s); background: var(--n0); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-pop); pointer-events: none; font-size: .95em; line-height: 1.3; }
.cm-pintip b { font-weight: 600; }
.cm-pintip span { color: var(--fg3); font-size: .92em; }
.cm-pintip strong { color: var(--live); font-weight: 600; word-spacing: normal; }
.cm-mapley { flex: none; display: flex; flex-wrap: wrap; gap: .1em .65em; margin-top: .25em; color: var(--fg2); font-size: .84em; }
.cm-mapley li { display: inline-flex; align-items: center; gap: 4px; }
.cm-lm { display: inline-grid; place-items: center; width: 12px; height: 12px; flex: none; }

/* ---------- d) Recorrido ---------- */
.w-recorrido { padding-bottom: .55em; }
.cm-h-d { flex: none; color: var(--fg3); font-size: .94em; white-space: nowrap; }
.cm-h-d b { color: var(--fg1); font-weight: 600; font-variant-numeric: tabular-nums; }
.cm-flow { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr) clamp(20px, 4cqw, 64px)) minmax(0, 1fr); align-items: center; gap: 0 .4em; margin-top: .2em; }
.cm-step { --sc: var(--fg1); min-width: 0; display: grid; align-content: center; }
.cm-step > b { font: 850 2.1em/1 var(--display); font-stretch: 106%; letter-spacing: -.02em; color: var(--sc); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cm-step > span { color: var(--fg2); font-size: .94em; line-height: 1.2; }
.cm-step.s-verificacion { --sc: var(--lect); }
.cm-step.s-compra { --sc: var(--accent-hi); }
.cm-link { position: relative; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(57, 213, 238, .1); }
.cm-link i { position: absolute; top: 0; bottom: 0; left: -24px; right: 0; background: repeating-linear-gradient(90deg, var(--live) 0 9px, transparent 9px 24px); opacity: .85; animation: cm-flow 1.3s linear infinite; }
@keyframes cm-flow { to { transform: translateX(24px); } }
.cm-step-l { display: none; }
@container cm (max-width: 619px) {
  .cm-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cm-step { grid-template-columns: 2.1em minmax(0, 1fr); align-items: center; gap: .6em; padding: .3em 0; }
  .cm-link { width: 3px; height: 16px; margin-left: .95em; }
  .cm-link i { inset: -24px 0 0; background: repeating-linear-gradient(180deg, var(--live) 0 6px, transparent 6px 14px); animation: cm-flowv 1.1s linear infinite; }
  @keyframes cm-flowv { to { transform: translateY(14px); } }
}

/* ---------- e) Actividad ---------- */
.cm-feed-w { flex: 1; min-height: 0; margin-top: .35em; display: flex; flex-direction: column; }
.cm-feed-clip { flex: none; overflow: hidden; }
.cm-feed { display: grid; gap: 2px; }
.cm-feed-live .cm-ev:nth-child(n + 5) { display: none; }
.cm-feed-dia .cm-ev:nth-child(n + 3) { display: none; }
.cm-feed-lab { flex: none; margin: .4em 0 .1em; padding-top: .35em; border-top: 1px solid var(--line); color: var(--fg3); font-size: .86em; font-weight: 600; }
.cm-ev { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto auto; align-items: center; gap: .55em; min-height: 2.45em; }
.cm-ev-i { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--n4); color: var(--fg2); }
.cm-ev-i .i { width: .95em; height: .95em; }
.cm-ev.k-lectura .cm-ev-i { background: var(--live-soft); color: var(--live); }
.cm-ev.k-verif .cm-ev-i { background: rgba(242, 184, 75, .14); color: var(--lect); }
.cm-ev.k-web .cm-ev-i, .cm-ev.k-visita .cm-ev-i { background: var(--accent-soft); color: var(--accent-hi); }
.cm-ev.k-off .cm-ev-i, .cm-ev.k-incidencia .cm-ev-i { background: rgba(240, 113, 122, .14); color: var(--red); }
.cm-ev-t { min-width: 0; line-height: 1.2; }
.cm-ev-t b { display: block; font-size: .96em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-ev-t small { display: block; color: var(--fg3); font-size: .88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-ev-v { color: var(--fg1); font-size: .94em; word-spacing: normal; white-space: nowrap; }
.cm-ev time { grid-column: 4; color: var(--fg3); font-size: .86em; word-spacing: normal; white-space: nowrap; text-align: right; min-width: 4.4em; }
.cm-ev time.live { color: var(--live); }

/* ---------- f) Consumo ---------- */
.cm-bars { position: relative; flex: 1; min-height: calc(var(--n) * 1.72em); margin-top: .3em; }
.cm-bar {
  position: absolute; left: 0; right: 0; top: 0; height: var(--rh, 1.9em);
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr) 5em; align-items: center; gap: .55em;
  transform: translateY(calc(var(--r) * var(--rh, 1.9em)));
  transition: transform .8s var(--ease-drawer);
}
.cm-bar.sin, .cm-bar.sin i { transition: none; }
.cm-bar-n { min-width: 0; color: var(--fg2); font-size: .94em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-bar-t { display: block; height: min(46%, 10px); border-radius: 2px; background: rgba(143, 198, 255, .07); overflow: hidden; }
.cm-bar-t i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: left; transition: transform .8s var(--ease-out); }
.cm-bar.off .cm-bar-t i { background: var(--red); }
.cm-bar.off .cm-bar-n { color: var(--red); }
.cm-bar b { text-align: right; font-size: .92em; word-spacing: normal; white-space: nowrap; }
.cm-bar-k { text-align: right; color: var(--live); word-spacing: normal; white-space: nowrap; }
.cm-bar.off .cm-bar-k { color: var(--red); }

/* ---------- g) Alertas y agenda ---------- */
.cm-ag { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5em; margin-top: .3em; overflow: hidden; }
.cm-als { display: grid; gap: 3px; }
.cm-al { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; align-items: center; gap: .55em; min-height: 2em; }
.cm-al-i { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: rgba(240, 113, 122, .14); color: var(--red); }
.cm-al-i .i { width: .95em; height: .95em; }
.cm-al b { display: block; font-size: .96em; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-al small { display: block; color: var(--fg3); font-size: .9em; line-height: 1.3; }
.cm-al-go { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-s); color: var(--fg3); }
.cm-al-go { transition: background-color .15s, color .15s, transform .16s var(--ease-out); }
.cm-al-go:hover { background: var(--n4); color: var(--fg1); }
.cm-al-go:active { transform: scale(.92); }
.cm-al-go .i { width: 12px; height: 12px; }
.cm-tl-w { margin-top: auto; padding-top: .45em; border-top: 1px solid var(--line); }
.cm-tl-w h3 { font-size: .9em; font-weight: 600; color: var(--fg3); margin-bottom: .25em; }
.cm-tl { position: relative; display: grid; gap: .2em; }
.cm-tl::before { content: ""; position: absolute; left: 3.5px; top: .55em; bottom: .55em; width: 1px; background: var(--line-2); }
.cm-tl li { position: relative; display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: .5em; padding-left: 1.05em; line-height: 1.3; }
.cm-tl li.past { opacity: .62; }
.cm-tl em { font-style: normal; font-size: .84em; }
.cm-tl li::before { content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px; border-radius: 50%; background: var(--n2); box-shadow: inset 0 0 0 2px var(--accent); }
.cm-tl time { color: var(--fg1); font-size: .92em; word-spacing: normal; white-space: nowrap; }
.cm-tl span { min-width: 0; color: var(--fg2); font-size: .94em; line-height: 1.25; }

/* ---------- Pantalla completa: modo sala y ventana ampliada ---------- */
html.cm-full .band, html.cm-full .tabbar, html.cm-full #viewas { display: none; }
html.cm-full .cm {
  position: fixed; inset: 0; z-index: 30; gap: 12px; background: radial-gradient(70% 50% at 16% -6%, rgba(46, 155, 255, .13), transparent 62%), var(--n0);
  padding: max(12px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
}
html.cm-full .cm-logo { display: block; }
html.cm-full .cm-logo .logo { height: 40px; }
html.cm-full .cm-grid { gap: 12px; --fs: clamp(11.5px, min(1.08cqw, calc((100dvh - 92px) / 56)), 24px); }
.is-zoomed .cm-top { display: none; }
html.cm-full .is-zoomed .cm-grid, .is-zoomed .cm-grid { flex: 1 1 0; min-height: 0; display: flex; --fs: clamp(14px, min(1.22cqw, 2.1dvh), 28px); --ring: clamp(92px, min(9.5cqw, 17dvh), 190px); }
.is-zoomed .cm-win:not(.is-zoom) { display: none; }
.is-zoomed .cm-bottom { display: contents; }
.cm-win.is-zoom:focus-visible { outline: none; }
.cm-win.is-zoom { flex: 1; width: 100%; padding: clamp(14px, 1.8cqw, 34px); overflow-y: auto; border-radius: var(--r-l); }
.is-zoom .cm-h { margin-bottom: .5em; }
.is-zoom .cm-h h2 { font: 800 1.5em/1.15 var(--display); font-stretch: 106%; letter-spacing: -.015em; }
.is-zoom .cm-exp { width: 40px; height: 40px; }
.is-zoom .cm-exp .i { width: 20px; height: 20px; }
.is-zoom .cm-mid { font-size: 2.4em; }
.is-zoom.w-potencia .cm-big { font-size: 7em; }
.is-zoom .cm-plot { min-height: 240px; margin-bottom: 2em; }
.is-zoom .cm-figs { gap: .6em 2.4em; }
.is-zoom .cm-figs dd { font-size: 1.3em; }
.is-zoom .cm-rings { flex: 1 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; align-content: space-around; }
.is-zoom .cm-rg-t b { font-size: 1.1em; }
.is-zoom .cm-rg-t small { font-size: .95em; white-space: normal; }
.is-zoom .cm-ring b { font-size: 1.5em; }
.is-zoom .cm-map-w { gap: 1.5em; min-height: 300px; }
.cm-mapl { flex: none; width: min(24em, 34%); overflow-y: auto; display: grid; gap: .7em; align-content: start; }
.cm-mg h3 { display: flex; align-items: center; gap: .45em; margin-bottom: .3em; font-size: 1em; font-weight: 600; }
.cm-mg h3 .num { margin-left: auto; color: var(--fg3); }
.cm-mg li { display: flex; justify-content: space-between; gap: .8em; padding: .14em 0; border-top: 1px solid var(--line); font-size: .9em; }
.cm-mg li span { min-width: 0; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-mg li b { color: var(--live); font-size: .94em; word-spacing: normal; white-space: nowrap; }
.cm-mg li b.off { color: var(--red); }
.is-zoom.w-recorrido .cm-flow { flex: none; align-items: start; margin-block: auto; }
.is-zoom .cm-step > b { font-size: 5.4em; }
.is-zoom .cm-step > span { font-size: 1.1em; margin-top: .2em; }
.is-zoom .cm-link { margin-top: 2.6em; }
.is-zoom .cm-step-l { display: grid; gap: .4em; margin-top: 1em; color: var(--fg2); font-size: 1em; line-height: 1.25; }
.is-zoom .cm-feed-w { overflow-y: auto; min-height: 240px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 2.5em; align-items: start; }
.is-zoom .cm-feed-clip { grid-column: 1; grid-row: 1 / span 2; overflow: visible; }
.is-zoom .cm-feed-lab { grid-column: 2; grid-row: 1; margin: 0 0 .3em; padding: 0; border: 0; font-size: 1em; }
.is-zoom .cm-feed-dia { grid-column: 2; grid-row: 2; }
.is-zoom .cm-feed-live .cm-ev:nth-child(n + 5), .is-zoom .cm-feed-dia .cm-ev:nth-child(n + 3) { display: grid; }
.is-zoom .cm-ev { min-height: 2.8em; border-bottom: 1px solid var(--line); }
.is-zoom .cm-bars { flex: 1 0 auto; min-height: calc(var(--n) * 2.5em); }
.is-zoom .cm-bar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.8fr) 6.4em 6em; gap: 1em; }
.is-zoom .cm-bar-n small { display: block; color: var(--fg3); font-size: .86em; }
.is-zoom .cm-bar-t { height: 12px; }
.is-zoom.w-alertas { font-size: calc(var(--fs) * 1.1); }
.is-zoom.w-alertas .cm-ag { flex-direction: row; gap: 2em; flex: 1 0 auto; overflow: visible; }
.is-zoom .cm-tl-w { margin-top: 0; }
.is-zoom .cm-als, .is-zoom .cm-tl-w { flex: 1; min-width: 0; align-content: start; }
.is-zoom .cm-tl-w { padding: 0 0 0 2em; border-top: 0; border-left: 1px solid var(--line); }
.is-zoom .cm-al { min-height: 3.6em; grid-template-columns: 2.2em minmax(0, 1fr) auto; font-size: 1.08em; }
.is-zoom .cm-al b { white-space: normal; font-weight: 600; }
.is-zoom .cm-al-i { width: 2.2em; height: 2.2em; }
.is-zoom .cm-als { gap: .9em; }
.is-zoom .cm-tl { gap: .75em; }
.is-zoom .cm-tl li { grid-template-columns: 8.6em minmax(0, 1fr) auto; align-items: center; }
.is-zoom .cm-tl-w h3 { font-size: 1em; margin-bottom: .7em; }
.is-zoom .cm-tl li::before { top: .5em; }

@container cm (max-width: 759px) {
  .cm-brief li { display: grid; gap: 1px; }
  .cm-brief span + span::before { display: none; }
  .pin span { display: none; }
  .is-zoom .cm-mapley { display: none; }
  .cm-feed-w { flex: none; }
  .is-zoom .cm-feed-w { display: flex; }
  .is-zoom .cm-feed-lab { margin: .6em 0 .2em; }
  .cm-ctl { margin-left: 0; width: 100%; }
  .cm-when { justify-items: start; margin-right: auto; }
  .cm-ctl .btn { min-height: 40px; }
  .cm-exp { width: 40px; height: 40px; margin: -7px -9px -7px 0; }
  .cm-plot-w { flex: none; }
  .cm-plot { min-height: 170px; height: 170px; flex: none; }
  .is-zoom .cm-plot-w { flex: 1; }
  .is-zoom .cm-plot { flex: 1; height: auto; min-height: 220px; }
  .is-zoom .cm-h { flex-wrap: wrap; }
  .is-zoom .cm-h h2 { white-space: normal; font-size: 1.3em; }
  .cm-h { flex-wrap: wrap; }
  .cm-h-d { order: 5; flex-basis: 100%; }
  .cm-map { aspect-ratio: 600 / 460; flex: none; width: 100%; min-height: 0; }
  .cm-rings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em .5em; }
  .cm-bars { min-height: calc(var(--n) * 2.3em); }
  .cm-bar { height: var(--rh, 2.3em); transform: translateY(calc(var(--r) * var(--rh, 2.3em))); }
  .cm-ag { overflow: visible; }
  .is-zoom .cm-map-w { flex-direction: column; }
  .cm-mapl { width: 100%; }
  .is-zoom.w-alertas .cm-ag { flex-direction: column; }
  .is-zoom .cm-tl-w { padding: 1em 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .is-zoom .cm-bar { grid-template-columns: minmax(0, 1fr) 4.8em 5em; }
  .is-zoom .cm-bar-t { grid-column: 1 / -1; grid-row: 2; }
  .is-zoom .cm-bars { min-height: calc(var(--n) * 3.6em); }
  .is-zoom.w-potencia .cm-big { font-size: 4.6em; }
  .is-zoom.w-recorrido .cm-flow { margin-top: .5em; }
  .is-zoom .cm-step > b { font-size: 2.4em; }
  .is-zoom .cm-link { margin-top: 0; }
  .is-zoom .cm-step-l { grid-column: 2; margin-top: .2em; }
}

/* ---------- Se para si la pestaña no se ve; sin movimiento si se ha pedido así ---------- */
.cm.paused *, .cm.paused *::before, .cm.paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .cm *, .cm *::before, .cm *::after { animation: none !important; transition: none !important; }
  .cm-link i { opacity: .55; }
}

/* Cifras tabulares también en las piezas antiguas del panel: los números no bailan al contar. */
.kpi-v b, .figure, .f-n, .renew-num b, .au-sum b, .mo-v, .ring-v, .pl-node b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Portátiles con poca altura: la curva sigue entera aunque el número ceda un poco. */
@media (max-height: 800px) and (min-width: 1000px) {
  .cm-win:not(.is-zoom) .cm-big { font-size: 3.6em; }
  .cm-win:not(.is-zoom) .cm-plot { min-height: 60px; margin-top: 1.2em; margin-bottom: 1.3em; }
  .cm-win:not(.is-zoom) .cm-kw { gap: .2em 1.2em; }
}