/*  [PORTADA VIVA] Saludo con hechos, cifras que entran contando, desglose al pasar y la línea
 *  «Brainmore analizó…». Sólo tokens de la paleta (tema claro y oscuro salen solos).  */

/*  La segunda línea del saludo: más chica y más suave que la primera.  */
.saludo-detalle { margin: 2px 0 0; font-size: 13.5px; color: var(--text-mute); line-height: 1.5; }
.saludo-detalle[hidden] { display: none; }

/*  «3 señales» es un enlace dentro de la frase: se lee como texto y se toca como botón.
 *  24 px de alto mínimo (WCAG 2.5.8) sin romper el renglón: el relleno vertical va por dentro.  */
.saludo-ir {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 6px; margin: 0 1px;
  font: inherit; font-weight: 600; color: var(--primary); background: var(--primary-soft);
  border: 0; border-radius: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.saludo-ir:hover { color: var(--primary-dark); }
.saludo-ir:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
body.theme-dark .saludo-ir { color: var(--text); }

/*  Cifras: dígitos de ancho fijo, así el conteo no hace bailar la tarjeta.  */
.radar-cifra { font-variant-numeric: tabular-nums; }
.pv-contando { font-variant-numeric: tabular-nums; }

/*  «Brainmore analizó N líneas de documentos de venta de SAP este mes · actualizado hace 2 min»  */
.pv-lectura {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 2px 4px;
  font-size: 12.5px; color: var(--text-mute); font-variant-numeric: tabular-nums;
}
.pv-lectura::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: .55em;
  background: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
}
.pv-lectura[hidden] { display: none; }
body.theme-dark .pv-lectura::before { box-shadow: none; }

/*  Tarjeta con desglose: se puede enfocar y se nota que responde.  */
.pv-con-tip { cursor: pointer; }
.pv-con-tip:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.pv-tip {
  position: fixed; z-index: 60; max-width: 300px; padding: 10px 12px;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
  font-size: 12.5px; line-height: 1.45; pointer-events: none;
}
.pv-tip[hidden] { display: none; }
.pv-tip-t { margin: 0 0 6px; font-weight: 600; font-size: 13px; }
.pv-tip dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.pv-tip dt { color: var(--text-mute); }
.pv-tip dd { margin: 0; font-variant-numeric: tabular-nums; }
.pv-tip-pie { margin: 8px 0 0; color: var(--text-mute); font-size: 12px; }

/*  «¿Por qué bajó?» en la producción: la línea de comparación y el botón, bajo la frescura.  */
.radar-card .pv-porque { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .pv-contando { transition: none; }
}