/* ═══ ControlPanel — pestaña "Métricas" (M-06) ══════════════════════════
   Sale de la maqueta aprobada (maquetas/m06/). Compone los bloques de base.css
   y controlpanel.css (card, cp-block, toggle-group, callout, chip, disclosure,
   skeleton) y agrega solo lo propio del panel con prefijo cp-metrics-.
   Colores por la regla de la rareza: azul = datos (gráficos, heatmap),
   verde = subió / al día, rojo = bajó, naranja = el sondeo atrasado (algo que
   el staff tiene que arreglar). Los tokens de gráficos están en tokens.css §11.
   Sin animaciones propias. */

/* ── Encabezado, filtros y aviso de aproximación ─────────────────────── */
.cp-metrics-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
}
.cp-metrics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}
.cp-metrics-filter {
  display: grid;
  gap: var(--space-2xs);
}
.cp-metrics-filter__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.cp-metrics-approx__list {
  display: grid;
  gap: var(--space-xs);
  padding-left: var(--space-md);
  list-style: disc;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}
.cp-metrics-approx__list strong { color: var(--color-text); }
.cp-metrics-notice:empty { display: none; }
.cp-metrics-notice .callout { display: grid; gap: var(--space-xs); }
.cp-metrics-retry { justify-self: start; min-height: var(--touch-target); }

/* ── Tarjetas KPI ────────────────────────────────────────────────────── */
.cp-metrics-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media (min-width: 700px) {
  .cp-metrics-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cp-metrics-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cp-metrics-kpi {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  min-width: 0;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.cp-metrics-kpi__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
.cp-metrics-kpi__body {
  display: grid;
  gap: var(--space-2xs);
}
.cp-metrics-kpi__value {
  color: var(--color-data);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-none);
}
.cp-metrics-kpi__delta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.cp-metrics-kpi__delta--up { color: var(--color-success); }
.cp-metrics-kpi__delta--down { color: var(--color-danger); }
.cp-metrics-kpi__delta--none { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.cp-metrics-kpi__comparison {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}
.cp-metrics-kpi__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
}

/* ── Gráficos (SVG que dibuja el JS al ancho real) ───────────────────── */
.cp-metrics-chart {
  position: relative;
  min-width: 0;
}
.cp-metrics-chart:focus-visible { outline-offset: var(--space-2xs); }
.cp-metrics-chart__title {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-heading);
}
.cp-metrics-chart__svg { display: block; overflow: visible; }
.cp-metrics-chart__grid { stroke: var(--color-border); stroke-width: 1px; }
.cp-metrics-chart__axis-label {
  fill: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
}
.cp-metrics-chart__line {
  fill: none;
  stroke: var(--color-data);
  stroke-width: var(--chart-line-width);
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Hoy, en curso: punteado y punto hueco, para que nadie lo lea como una caída */
.cp-metrics-chart__line--partial { stroke-dasharray: var(--chart-dash); }
.cp-metrics-chart__area { fill: var(--color-data-tint); }
.cp-metrics-chart__point {
  fill: var(--color-data);
  stroke: var(--color-surface);
  stroke-width: var(--chart-line-width);
}
.cp-metrics-chart__point--partial { fill: var(--color-surface); stroke: var(--color-data); }
.cp-metrics-chart__bar { fill: var(--color-data); rx: var(--chart-bar-radius); }
.cp-metrics-chart__bar--partial {
  fill: var(--color-data-tint);
  stroke: var(--color-data);
  stroke-width: 1px;
  stroke-dasharray: var(--chart-dash);
}
.cp-metrics-chart__crosshair { stroke: var(--color-text-muted); stroke-width: 1px; }

/* Globito del día señalado: se ubica con --tooltip-x (lo pone el JS) */
.cp-metrics-tooltip {
  position: absolute;
  top: 0;
  left: var(--tooltip-x, 0);
  max-width: 70%;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-float);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  pointer-events: none;
  transform: translateX(var(--space-xs));
}
.cp-metrics-tooltip--left { transform: translateX(calc(-100% - var(--space-xs))); }

/* ── Tablas (vista en tabla y cohortes) ──────────────────────────────── */
/* position: relative para que los textos .visually-hidden de las celdas (absolutos)
   queden recortados por el scroll y no ensanchen la página */
.cp-metrics-scroll {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
/* Los hijos de las grillas (cp-block, cohortes) no se ensanchan con su tabla */
.cp-metrics .cp-block > *,
.cp-metrics-cohorts > * { min-width: 0; }
.cp-metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.cp-metrics-table th,
.cp-metrics-table td {
  padding: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  white-space: nowrap;
}
.cp-metrics-table th:first-child { text-align: left; }
.cp-metrics-table thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
.cp-metrics-tag {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

/* Heatmap: el número siempre escrito, el tono solo ayuda a ver la forma */
.cp-metrics-heat { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.cp-metrics-heat--1 { background: var(--color-heat-1); }
.cp-metrics-heat--2 { background: var(--color-heat-2); }
.cp-metrics-heat--3 { background: var(--color-heat-3); }
.cp-metrics-heat--4 { background: var(--color-heat-4); }
.cp-metrics-heat--5 { background: var(--color-heat-5); }
.cp-metrics-heat--pending { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.cp-metrics-cohorts { display: grid; gap: var(--space-sm); }
.cp-metrics-cohorts__size { color: var(--color-text-muted); }
.cp-metrics-cohorts__row--summary th,
.cp-metrics-cohorts__row--summary td {
  border-bottom: 1px solid var(--color-border-strong);
  font-weight: var(--font-weight-bold);
}
.cp-metrics-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.cp-metrics-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.cp-metrics-legend__swatch {
  width: var(--heat-swatch-size);
  height: var(--heat-swatch-size);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
}
.cp-metrics-more { justify-self: start; min-height: var(--touch-target); }

/* ── Embudo por campaña ──────────────────────────────────────────────
   Celular: cada campaña es un bloque con un paso por línea (la tabla se
   apila; el rótulo de cada paso sale de data-label). Los role= explícitos
   del JS son a propósito, como en el ranking: Safari pierde la semántica de
   tabla al cambiar el display. Desde 900 px es una tabla normal para comparar
   campañas de un vistazo. */
.cp-metrics-funnel { display: grid; gap: var(--space-sm); }
.cp-metrics-funnel__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.cp-metrics-funnel__thead { display: none; }
.cp-metrics-funnel__row {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.cp-metrics-funnel__campaign {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-heading);
  text-align: left;
  overflow-wrap: anywhere;
}
.cp-metrics-funnel__cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 var(--space-sm);
  padding: var(--space-2xs) 0;
  border-top: 1px solid var(--color-border);
}
.cp-metrics-funnel__cell::before {
  content: attr(data-label);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.cp-metrics-funnel__value {
  color: var(--color-data);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-heavy);
  text-align: right;
}
.cp-metrics-funnel__value--none { color: var(--color-text-muted); }
.cp-metrics-funnel__rate {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.cp-metrics-funnel__bar {
  grid-column: 1 / -1;
  display: block;
  height: var(--funnel-bar-height);
  border-radius: var(--radius-pill);
  background: var(--color-border);
}
/* El largo sale del dato: data-bar-value → --bar-value (ui.js), nunca un estilo fijo */
.cp-metrics-funnel__fill {
  display: block;
  width: var(--bar-value, 0);
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-data);
}
.cp-metrics-funnel__extra {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-align: right;
}
.cp-metrics-funnel__head {
  padding: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-align: right;
  text-transform: uppercase;
  vertical-align: bottom;
}
.cp-metrics-funnel__head:first-child { text-align: left; }
.cp-metrics-funnel__head-note { text-transform: none; font-weight: var(--font-weight-regular); }

@media (min-width: 900px) {
  .cp-metrics-funnel__thead { display: table-header-group; }
  .cp-metrics-funnel__row {
    display: table-row;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .cp-metrics-funnel__campaign,
  .cp-metrics-funnel__cell {
    display: table-cell;
    padding: var(--space-sm) var(--space-xs);
    border-top: 0;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
  }
  .cp-metrics-funnel__campaign {
    width: var(--funnel-campaign-width);
    font-size: var(--font-size-md);
  }
  .cp-metrics-funnel__cell { text-align: right; }
  .cp-metrics-funnel__cell::before { content: none; }
  .cp-metrics-funnel__value,
  .cp-metrics-funnel__rate,
  .cp-metrics-funnel__bar { display: block; }
  .cp-metrics-funnel__rate { margin-top: var(--space-3xs); }
  .cp-metrics-funnel__bar { margin-top: var(--space-2xs); }
}

/* ── Vacío / error dentro de cada bloque ─────────────────────────────── */
.cp-metrics-empty {
  padding: var(--space-lg) var(--space-md);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  text-align: center;
}

/* ── M-08: fila "Total" del embudo y nota chica en la tabla diaria ── */
.cp-metrics-funnel__row--total { border-color: var(--color-data); }
.cp-metrics-table__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

@media (min-width: 900px) {
  .cp-metrics-funnel__row--total .cp-metrics-funnel__campaign,
  .cp-metrics-funnel__row--total .cp-metrics-funnel__cell {
    border-top: 2px solid var(--color-data);
  }
}

/* ── Generador de links de campaña (M-09) ────────────────────────────── */
.cp-campaign-link {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.cp-campaign-link__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.cp-campaign-link__output {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  /* El link es una sola palabra larga: sin esto desborda en el celular */
  overflow-wrap: anywhere;
  user-select: all;
}