/* ═══ Métricas v3 · #464 frente C (2026-10-08) ═══════════════════════════════
   Se carga DESPUÉS de app.css. Solo para la pestaña Resumen de Métricas (`.mt`).
   Piel Control: papel claro, tarjetas blancas con filo, tinta oscura para los
   datos y el morado SOLO como luz (el tramo «ahora» de la gráfica y el foco).
   Manrope con cifras tabulares; sin mono ni mayúsculas espaciadas. Todo lo que
   se anima es transform u opacity; las gráficas tienen alto fijo (CLS 0). */

.mt {
  --mt-good: #17805A;            /* verde como TEXTO: 4,9:1 sobre blanco */
  --mt-gap: 20px;
  font-variant-numeric: tabular-nums;
  padding: 6px 0 8px;
  transition: opacity var(--dur-med) var(--ease-out);
}
.mt.cambiando .mt-kpis, .mt.cambiando .mt-grid2, .mt.cambiando .mt-narr,
.mt.cambiando .mt-narr-sub { opacity: 0.5; transition: opacity var(--dur-fast); }

/* ── Cabecera: periodo + frase ───────────────────────────────────────────── */
.mt-cab {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px; margin: 14px 0 14px;
}
.mt-eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0;
  font-size: 13px; font-weight: 700; color: var(--text-3);
}
.mt-eyebrow i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }

.mt-seg {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill);
  background: var(--overlay-2);
}
.mt-seg button {
  min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 700; color: var(--text-2); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast),
              box-shadow var(--dur-fast);
}
.mt-seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--text-1);
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.08), 0 4px 10px -6px rgba(20, 24, 30, 0.18);
}
.mt-seg button:not([aria-pressed="true"]):hover { color: var(--text-1); }
.mt-seg button:focus-visible, .mt-kpi:focus-visible, .mt-fila:focus-visible,
.mt-carga-f:focus-visible, .mt-cerrar:focus-visible, .mt-chart svg:focus-visible {
  outline: 2px solid var(--purple-deep); outline-offset: 2px;
}

.mt-narr {
  margin: 0; max-width: 31ch; text-wrap: balance;
  font-size: clamp(25px, 3.2vw + 8px, 36px); line-height: 1.16;
  font-weight: 600; letter-spacing: -0.024em; color: var(--text-1);
}
.mt-narr strong { font-weight: 800; }
.mt-narr-sub {
  margin: 12px 0 24px; max-width: 62ch; font-size: 16px; line-height: 1.45;
  font-weight: 500; color: var(--text-2);
}
.mt-narr-sub strong { font-weight: 700; color: var(--text-1); }

/* ── Tarjetas KPI ────────────────────────────────────────────────────────── */
.mt-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.mt-kpi {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  min-height: 44px; padding: 18px 20px 14px; text-align: left; cursor: pointer;
  background: var(--surface); border: 0; font: inherit; color: var(--text-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.mt-kpi:hover { background: var(--surface-2); }
.mt-kpi:focus-visible { outline-offset: -3px; border-radius: 20px; }
.mt-kpi.abierto { background: var(--purple-tint); }
.mt-kpi-l { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.mt-kpi-go {
  margin-left: auto; font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--purple-ink); opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.mt-kpi:hover .mt-kpi-go, .mt-kpi:focus-visible .mt-kpi-go, .mt-kpi.abierto .mt-kpi-go {
  opacity: 1; transform: none;
}
.mt-kpi-v {
  margin-top: 10px; font-size: 34px; font-weight: 750; line-height: 1.05;
  letter-spacing: -0.03em;
}
.mt-kpi-v small {
  margin-left: 4px; font-size: 15px; font-weight: 650; letter-spacing: 0; color: var(--text-3);
}
.mt-delta {
  display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 18px;
  font-size: 12.5px; font-weight: 700; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-delta b { font-weight: 800; }
.mt-delta.bien b { color: var(--mt-good); }
.mt-delta.mal b { color: var(--alert-t); }
.mt-delta.igual b { color: var(--text-2); }
.mt-delta.nada b { color: var(--text-3); font-weight: 650; }
.mt-spark { display: block; width: 100%; height: 36px; margin-top: 12px; overflow: visible; }
.mt-spark path { fill: none; stroke: rgba(20, 24, 30, 0.5); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mt-spark .vacia { stroke: rgba(20, 24, 30, 0.22); stroke-width: 1.4; stroke-dasharray: 3 5; }

/* ── Lista al pulsar una tarjeta ─────────────────────────────────────────── */
.mt-drill {
  margin-top: 14px; padding: 18px 20px 14px; border-radius: 22px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow);
  animation: mt-entra var(--dur-med) var(--ease-out) both;
}
.mt-drill-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mt-drill-h h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.mt-n {
  padding: 2px 9px; border-radius: var(--r-pill); background: var(--purple-tint);
  color: var(--purple-ink); font-size: 12px; font-weight: 800;
}
.mt-cerrar {
  min-height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; color: var(--text-2);
}
.mt-cerrar:hover { color: var(--text-1); background: var(--overlay-2); }
.mt-filas { list-style: none; margin: 4px 0 0; padding: 0; }
.mt-filas li + li { border-top: 1px solid var(--line); }
.mt-fila {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 6px 4px; text-align: left; border-radius: 12px;
}
.mt-fila:hover { background: var(--overlay-1); }
.mt-fila-id { font-size: 12px; font-weight: 700; color: var(--text-3); }
.mt-fila-t { display: grid; min-width: 0; }
.mt-fila-tit { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-fila-t small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-fila-e { font-size: 12.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.mt-fila-e.bien { color: var(--mt-good); }
.mt-fila-e.mal { color: var(--alert-t); }
.mt-vacio { margin: 10px 0 4px; font-size: 14px; color: var(--text-3); }
.mt-nota { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

/* ── «Ahora mismo» ───────────────────────────────────────────────────────── */
.mt-ahora {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  margin: 16px 2px 0; font-size: 13px; color: var(--text-2);
}
.mt-ahora b { font-size: 15px; font-weight: 800; color: var(--text-1); }
.mt-ahora-k { color: var(--text-3); }

/* ── Paneles ─────────────────────────────────────────────────────────────── */
.mt-grid2 {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--mt-gap); margin-top: 16px; align-items: stretch;
}
.mt-panel {
  min-width: 0; padding: 20px 22px; border-radius: 22px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.mt-panel-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 14px; }
.mt-panel-h h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.mt-sub { font-size: 13px; font-weight: 600; color: var(--text-3); }
.mt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.mt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.mt-legend .ok { background: rgba(20, 24, 30, 0.78); }
.mt-legend .tarde { background: var(--alert); }
.mt-legend .sin { background: rgba(20, 24, 30, 0.16); }
.mt-legend .ahora { background: var(--purple-deep); }
.mt-legend .prev { width: 14px; height: 0; border-top: 2px dashed var(--text-3); border-radius: 0; }

/* ── Gráfica de ritmo ────────────────────────────────────────────────────── */
.mt-chart { position: relative; }
.mt-chart svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.mt-axis { font-size: 11.5px; font-weight: 600; fill: var(--text-3); font-family: var(--font-ui); }
.mt-axis.ahora { fill: var(--purple-ink); font-weight: 800; }
.mt-grid { stroke: var(--line); }
.mt-bar {
  transform-box: fill-box; transform-origin: bottom;
  animation: mt-crece 520ms var(--ease-out) both; animation-delay: calc(var(--i) * 18ms);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.mt-seg-ok { fill: var(--ink); fill-opacity: 0.78; }
.mt-seg-tarde { fill: var(--alert); }
.mt-seg-sin { fill: var(--ink); fill-opacity: 0.16; }
.mt-bar.ahora .mt-seg-ok { fill: var(--purple-deep); fill-opacity: 1; }
.mt-chart.hov .mt-bar:not(.hl) { opacity: 0.32; }
.mt-prev { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; }
.mt-prev-pt { fill: var(--surface); stroke: var(--text-3); stroke-width: 1.5; }
.mt-tip {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
  padding: 9px 12px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 12.5px; line-height: 1.4; box-shadow: var(--shadow);
  transform: translate(-50%, calc(-100% - 10px)); transition: opacity var(--dur-fast);
}
.mt-tip b { font-size: 13.5px; }
.mt-tip span { color: rgba(255, 255, 255, 0.78); }

/* ── Carga frente a umbral ───────────────────────────────────────────────── */
.mt-carga { list-style: none; margin: 0; padding: 0; }
.mt-carga-f {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 0 4px; text-align: left; border-radius: 12px;
}
.mt-carga-f:hover { background: var(--overlay-1); }
.mt-quien { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-track { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--overlay-track); }
.mt-lf {
  position: absolute; top: 0; bottom: 0; left: 0; display: block; border-radius: 5px;
  background: rgba(20, 24, 30, 0.72); transform-origin: left;
  animation: mt-crece-x 520ms var(--ease-out) both; animation-delay: calc(var(--i) * 30ms);
}
.mt-lf.base-pasa { border-radius: 5px 0 0 5px; }
.mt-lf.pasa { background: var(--alert); border-radius: 0 5px 5px 0; transform-origin: left; }
.mt-marca { position: absolute; top: -4px; bottom: -4px; display: block; width: 2px; border-radius: 1px; background: var(--text-1); }
.mt-val { min-width: 64px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.mt-val.pasa { color: var(--alert-t); }
.mt-sin-dato { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.mt-sin-dato b { color: var(--text-2); font-weight: 700; }
.mt-marca-k { flex: none; width: 2px; height: 12px; margin-top: 3px; border-radius: 1px; background: var(--text-1); }

@keyframes mt-crece { from { transform: scaleY(0); } }
@keyframes mt-crece-x { from { transform: scaleX(0); } }
@keyframes mt-entra { from { opacity: 0; transform: translateY(6px); } }

/* ── Móvil: de 768 a 320 px, sin scroll horizontal ───────────────────────── */
@media (max-width: 1000px) {
  .mt-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .mt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .mt-seg button { min-height: 44px; min-width: 44px; padding: 0 16px; }
  .mt-narr-sub { font-size: 15px; margin-bottom: 20px; }
  .mt-panel { padding: 18px; }
  .mt-drill { padding: 16px 16px 12px; }
  .mt-legend { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .mt-kpi { padding: 16px 16px 12px; }
  .mt-kpi-v { font-size: 30px; }
  /* El «vs.» sigue para el lector de pantalla; a la vista, el signo y la cifra. */
  .mt-vs {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .mt-carga-f { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; }
  .mt-val { min-width: 0; }
}
@media (max-width: 360px) {
  .mt-seg button { min-width: 44px; padding: 0 11px; font-size: 13px; }
  .mt-kpi { padding: 14px 12px 10px; }
  .mt-kpi-v { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .mt, .mt *, .mt *::before, .mt *::after { animation: none !important; transition: none !important; }
}