/* ==========================================================================
   Norte . estilos de Métricas (.mx-) y del motor de gráficos (.ch-, .hm-)
   v2: menos cajas, superficies sin borde, la aguja en el héroe, ticker de contadores,
   cabeceras con filete naranja. Solo tokens de norte.css. Naranja para impacto,
   estados en verde, ámbar y rojo.
   ========================================================================== */

/* ---------- barra de rango ---------- */
.mx-bar{
  position:sticky;top:var(--head);z-index:15;display:flex;flex-direction:column;gap:8px;
  margin:-18px calc(-1 * var(--pad)) 10px;padding:10px var(--pad);
  background:rgba(5,5,5,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.mx-seg{display:flex}
.mx-seg button{flex:1;min-height:36px;font-size:13px}
.mx-range{font-size:12.5px}
.mx-head-seg{display:none}
/* bajo 600px la barra fija no enseña las fechas: van como subtítulo del héroe */
.mx-hero-range{font-size:12.5px;display:none}
@media (max-width:599px){.mx-range{display:none}.mx-hero-range{display:block}}
@media (min-width:900px){
  .mx-bar{position:static;margin:0;padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .mx-bar .mx-seg{display:none}
  .mx-head-seg{display:inline-flex}
  .mx-head-seg button{flex:none;min-height:34px;padding:6px 16px}
  .mx-range{font-size:13px}
}

/* ---------- regla de sección: marca naranja, filete y control ---------- */
.mx-sec{margin-top:30px}
.mx-rule-wrap{display:flex;flex-direction:column;gap:6px}
.mx-rule{display:flex;align-items:center;gap:14px;min-height:44px}
.mx-rule .kick{flex:none}
.mx-rule-line{flex:1;height:1px;background:linear-gradient(to right,var(--line2),rgba(255,255,255,0));min-width:20px}
.mx-rule-sub{font-size:13px;color:var(--tx3);line-height:1.45;max-width:72ch;margin-top:-2px}

/* ---------- héroe: la aguja manda ---------- */
.mx-hero{
  display:grid;grid-template-columns:1fr;gap:22px;margin-top:4px;padding:20px 20px 18px;overflow:hidden;
}
.mx-hero::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:linear-gradient(to bottom,var(--or),rgba(255,106,0,0))}
.mx-hero-part{display:flex;flex-direction:column;gap:12px;min-width:0;cursor:pointer;border-radius:var(--r)}
.mx-hero-part:focus-visible{outline:2px solid var(--or);outline-offset:6px}
.mx-hero-main{display:flex;align-items:center;gap:20px;min-width:0}
.mx-hero-main.col{align-items:flex-end;gap:18px}
.mx-needle{flex:none;line-height:0}
.mx-needle svg{width:96px;height:96px}
.mx-hero-txt{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.mx-hero-txt.wide{flex:1}
.mx-hero-big{font-size:clamp(34px,4.4vw,42px)}
.mx-hero-huge{font-size:clamp(46px,7vw,64px);flex:none}
.mx-hero-bar{width:100%;max-width:240px;padding:4px 0 2px}
.mx-hero-obj{font-size:12.5px}
.mx-read{font-size:13.5px;color:var(--tx2);line-height:1.45}
.mx-hero-part .mx-read{border-top:1px solid var(--line);margin-top:2px;padding-top:10px}
@media (min-width:760px){
  .mx-hero{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:22px 24px 20px}
  .mx-hero-part + .mx-hero-part{border-left:1px solid var(--line);padding-left:30px;margin-left:30px}
}
@media (max-width:899px){.mx-needle svg{width:80px;height:80px}}
@media (max-width:400px){.mx-hero-main{gap:14px}.mx-needle svg{width:72px;height:72px}}

/* ---------- ticker de contadores ---------- */
.mx-sec .ticker{margin-top:2px}
/* en escritorio caben los siete de una fila: columnas más estrechas que las de norte.css */
@media (min-width:1000px){.mx-sec .ticker{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}}
.tick{transition:background .18s}
.tick:hover{background:rgba(255,255,255,.025)}
.tick .num small{font-family:var(--f);font-weight:500;font-size:11.5px;letter-spacing:0}
.tick .num.long{font-size:21px}
.tick .delta{min-height:16px;font-variant-numeric:tabular-nums}
.mx-ticker-read{margin-top:10px}

/* ---------- indicadores ---------- */
.mx-tiles{gap:10px}
.mx-tile{
  display:flex;flex-direction:column;align-items:stretch;gap:7px;text-align:left;padding:14px;
  width:100%;min-height:44px;border:1px solid transparent;
  transition:border-color .2s,background .2s,color .2s,opacity .2s;
}
.mx-tile:hover{border-color:var(--line2);background:var(--card2)}
.mx-tile-name{white-space:normal;line-height:1.3;min-height:2.6em;letter-spacing:.12em;font-size:10.5px;overflow-wrap:anywhere}
.mx-tile-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-width:0}
.mx-val{font-size:clamp(26px,3.2vw,32px)}
.mx-tile-spark{flex:1;min-width:34px;max-width:92px;line-height:0;padding-bottom:7px;opacity:.9}
.mx-tile .rbar{margin:4px 0 3px}
.mx-tile-t{font-size:11.5px;line-height:1.35}
.mx-tile-h{font-size:12px;font-weight:600;line-height:1.3}
.mx-tile.st-none{opacity:.55}
/* semáforo: la tarjeta entera del color del estado, tinta según contraste (--ink la pone el JS) */
.mx-tiles.paint .mx-tile.st-good{background:var(--good);border-color:var(--good)}
.mx-tiles.paint .mx-tile.st-warn{background:var(--warn);border-color:var(--warn)}
.mx-tiles.paint .mx-tile.st-bad{background:var(--bad);border-color:var(--bad)}
.mx-tiles.paint .mx-tile:not(.st-none){color:var(--ink)}
.mx-tiles.paint .mx-tile:not(.st-none) .mx-val,.mx-tiles.paint .mx-tile:not(.st-none) .mx-tile-h{color:var(--ink)}
.mx-tiles.paint .mx-tile:not(.st-none) .label,.mx-tiles.paint .mx-tile:not(.st-none) .mx-tile-t{color:var(--ink);opacity:.72}
.mx-tiles.paint .mx-tile:not(.st-none) .mx-tile-spark{opacity:.55}
.mx-tiles.paint .mx-tile:not(.st-none) .rbar{background:color-mix(in srgb,var(--ink) 16%,transparent)}
.mx-tiles.paint .mx-tile:not(.st-none) .rbar .band{opacity:0}
.mx-tiles.paint .mx-tile:not(.st-none) .rbar .pin{background:var(--ink);box-shadow:none}
.mx-tiles.paint .mx-tile:not(.st-none):hover{filter:brightness(1.06)}

.mx-switch{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;color:var(--tx2);cursor:pointer;min-height:44px;flex:none;user-select:none}
.mx-switch-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25;text-align:left}
.mx-switch-sub{font-size:11px;font-weight:400;color:var(--tx3)}
@media (max-width:599px){.mx-switch-sub{display:none}}

/* ---------- gráficos ---------- */
.mx-charts{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){.mx-charts{grid-template-columns:repeat(2,minmax(0,1fr))}.mx-span2{grid-column:span 2}}
.mx-chart{display:flex;flex-direction:column;gap:12px;padding:18px;min-width:0;border:1px solid transparent;transition:border-color .2s,background .2s}
.mx-chart:hover{border-color:var(--line)}
.mx-chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;min-height:34px}
.mx-chart-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.mx-chart-sub{font-size:12.5px;color:var(--tx3);line-height:1.45;max-width:74ch;margin-top:-8px}
/* con el dedo, los desplegables de las cabeceras vuelven a los 44 px */
@media (max-width:899px){.mx-chart-ctl .nsel.compact .nsel-btn{min-height:44px;font-size:13.5px}}
.ch-box{width:100%;min-width:0}
.mx-caption{margin-top:-2px}
.mx-scatter-body{display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
@media (min-width:900px){.mx-scatter-body{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:28px}}
.mx-read-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.mx-read-item{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:var(--r);background:var(--card2)}
.mx-read-item .num{font-size:30px}
.mx-read-item .dim{font-size:12px;line-height:1.35}
.mx-read-grid .mx-read{grid-column:span 2}

/* hoja de una métrica */
.mx-sheet{display:flex;flex-direction:column;gap:16px}
.mx-sheet-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mx-sheet-val{font-size:44px}
.mx-sheet-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px}
.mx-note{font-size:12.5px;margin-top:-8px}
.mx-empty{margin-top:30px;padding:40px 18px}
.mx-empty p{font-size:13px;max-width:42ch}

/* ==========================================================================
   Motor de gráficos (Norte.charts)
   ========================================================================== */
.ch{position:relative;width:100%;min-width:0}
.ch-svg{display:block;width:100%;height:auto;overflow:visible;outline:none;border-radius:var(--r-sm)}
.ch-svg:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-ax{font-family:var(--f);font-size:10.5px;fill:var(--tx3);font-variant-numeric:tabular-nums;font-weight:500}
.ch-ax.strong{fill:var(--tx2);font-weight:600}
.ch-labels text{paint-order:stroke;stroke:var(--card);stroke-width:2px;stroke-linejoin:round}
.ch-plate{fill:var(--card);opacity:.85}
.ch-ax.band{fill:var(--good);opacity:.95}
.ch-ax.ref{fill:var(--tx2)}
.ch-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ch-end{stroke:var(--card);stroke-width:2}
.ch-ref{stroke-width:1;stroke-dasharray:4 4}
.ch-cross{transition:opacity .15s}
.ch-crossline{stroke:var(--line3);stroke-width:1;transition:opacity .15s}
.ch-dot{stroke:var(--card);stroke-width:2}
.ch-bar{fill-opacity:.82;transition:fill-opacity .18s}
.ch-bar.best{fill-opacity:1}
.ch-bar.on{fill-opacity:1}
.ch-val{font-family:var(--fd);font-weight:700;font-size:11.5px;fill:var(--tx);letter-spacing:-.01em}
.ch-pts{transition:opacity .2s}
.ch-pt{fill-opacity:.72;stroke:var(--card);stroke-width:1.5;transition:r .15s,fill-opacity .15s}
.ch-pt.on{fill:var(--or)!important;fill-opacity:1}
.ch-tip{opacity:0;left:0;top:0;visibility:hidden;transition:opacity .12s,visibility .12s}
.ch-tip.on{opacity:1;visibility:visible}
.ch-tip .r .k{display:inline-flex;align-items:center;gap:7px;color:var(--tx2)}
.ch-key{flex:none;display:inline-block}
.ch-legend{margin-top:6px;gap:0 6px}
.ch-legend button{min-height:44px;padding:0 8px;border-radius:100px;transition:color .18s,background .18s}
.ch-legend button:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.ch-legend button.off{color:var(--tx4)}
.ch-legend button.off .ch-key{opacity:.3}
.ch-legend.static{gap:6px 16px;margin-top:8px}
.ch-legend.static span{font-size:11.5px;color:var(--tx3)}

/* sparkline suelto (ticker e indicadores) */
.spark{display:block;width:100%;overflow:visible}

/* donut */
.ch-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ch-dsvg{width:168px;height:168px;flex:none;overflow:visible}
.ch-dtrack{fill:none;stroke:var(--line)}
.ch-seg{fill:none;transition:opacity .18s,stroke-width .18s;transform:rotate(-90deg);transform-origin:50% 50%}
.ch-seg.on{stroke-width:22px!important}
.ch-seg.off{opacity:.35!important}
.ch-dnum{font-family:var(--fd);font-weight:800;font-size:30px;fill:var(--tx);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ch-dlegend{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px}
.ch-ditem{display:flex;align-items:center;gap:9px;font-size:13px;padding:6px 8px;border-radius:var(--r-sm);min-height:34px;transition:background .18s}
.ch-ditem.on{background:rgba(255,255,255,.05)}
.ch-ditem i{width:10px;height:10px;border-radius:3px;flex:none}
.ch-demoji{font-size:14px;line-height:1}
.ch-dname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.ch-dn{font-weight:600}
.ch-dpct{font-size:12px;min-width:36px;text-align:right}

/* mapa de calor */
.ch-heat{width:100%}
.hm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px;touch-action:pan-y pan-x}
.hm{display:grid;align-items:center;width:max-content;min-width:100%;padding-right:20px}
.hm-lab{position:sticky;left:0;z-index:1;background:var(--card);display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2);padding-right:6px;overflow:hidden;white-space:nowrap;height:var(--hm-cell,14px)}
.hm-lab.dim{color:var(--tx3)}
.hm-lab.first-dim,.hm-c.first-dim{margin-top:6px}
.hm-emoji{font-size:11.5px;flex:none;line-height:1}
.hm-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
.hm-head{height:14px}
.hm-x{font-family:var(--f);font-size:10px;color:var(--tx3);text-align:center;height:14px;line-height:14px;font-variant-numeric:tabular-nums;overflow:visible;white-space:nowrap;font-weight:500}
.hm-c{width:var(--hm-cell,14px);height:var(--hm-cell,14px);border-radius:3px;background:var(--line);transition:transform .15s var(--tech),opacity .15s;position:relative}
.hm-c.st-done,.hm-c.st-bonus{background:var(--good)}
.hm-c.st-bonus::after{content:'';position:absolute;inset:0;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--or)}
.hm-c.st-missed{background:var(--bad);opacity:.38}
.hm-c.st-skip{background:var(--line);opacity:.4}
.hm-c.st-none{background:transparent}
.hm-c.st-rate{background:var(--good);opacity:calc(.15 + .85 * var(--hm-v,0))}
.hm-c.dim.st-done,.hm-c.dim.st-bonus{opacity:.6}
.hm-c.dim.st-rate{opacity:calc(.1 + .55 * var(--hm-v,0))}
.hm-c.on{transform:scale(1.25);z-index:2;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--tx)}
.hm-legend{gap:6px 14px;margin-top:-2px}
.hm-legend span{font-size:11.5px;color:var(--tx3)}
.hm-key{width:10px;height:10px;border-radius:3px;display:inline-block;background:var(--line)}
.hm-key.st-done{background:var(--good)}
.hm-key.st-missed{background:var(--bad);opacity:.38}
.hm-key.st-skip{background:var(--line2);opacity:.7}
.hm-key.st-rate{background:linear-gradient(to right,var(--line),var(--good))}

@media (prefers-reduced-motion:reduce){
  .hm-c.on{transform:none}
}