/* Portal Vifer v3 · GRAFICAS QUE SE LEEN (pase 38): ficha flotante con fecha y valor, guia vertical y puntos que
   marcan cada serie. Una sola ficha para todo el portal; los colores salen de los tokens (claro y oscuro). */
.chtip { position: fixed; left: 0; top: 0; z-index: 90; display: grid; gap: 6px; min-width: 168px; max-width: 280px; padding: 10px 12px; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--surface-1); color: var(--fg); box-shadow: var(--shadow-lg); font-size: 13.5px; line-height: 1.3; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast); }
.chtip.is-on { opacity: 1; }
.chtip__t { font-size: 12.5px; font-weight: 600; color: var(--fg-muted); }
.chtip__t::first-letter { text-transform: uppercase; }
.chtip__r { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.chtip__r strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chtip__k { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.chtip__marks { position: fixed; left: 0; top: 0; z-index: 89; width: 0; height: 0; pointer-events: none; }
.chtip__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border: 2.5px solid var(--surface-1); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--c), 0 2px 8px rgba(16, 24, 40, 0.25); }
.chg { stroke: var(--fg-dim); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
svg.is-live { cursor: crosshair; touch-action: pan-y; }
svg.is-live:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 8px; }
svg.is-hover .chg { opacity: 1; }
/* ejes con cifras: discretos, que no compitan con la linea */
.ej-ar__y { fill: var(--fg-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.ej-ar__grid { stroke: var(--border-subtle); stroke-width: 1; }
/* proporcion del dibujo en lugar de un alto fijo: el texto no se deforma en pantallas anchas */
.ch, .sa { height: auto; min-height: 170px; max-height: 340px; }
.mr-charts .ch { min-height: 0; }
/* "De donde sale": debajo de cada tarjeta, discreto pero legible */
.ej-src { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-mid); color: var(--fg-muted); font-size: 14px; line-height: 1.5; }
.ej-src b { color: var(--fg); font-weight: 600; }
.ej-ar__pt { stroke: var(--surface-1); stroke-width: 1.2; }