/* Rendimiento Hoy / Semanal / Mensual / Histórico -- ver ../js/rendimiento_instrumento.js.
   Auto-contenido: solo usa tokens compartidos (--omnia-*, --color-success/danger). */
.rend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
@media (max-width: 720px) { .rend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rend-card { padding: 0.55rem 0.8rem; border-radius: 10px; border: 1px solid var(--omnia-glass-border); background: var(--omnia-glass-bg); min-width: 0; }
.rend-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--omnia-text-muted); cursor: help; }
.rend-value { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.rend-value.up { color: var(--color-success); }
.rend-value.down { color: var(--color-danger); }
.rend-value.rend-empty { color: var(--omnia-text-muted); }
.rend-pct { font-size: 0.78rem; font-weight: 600; }
.rend-pct.up { color: var(--color-success); }
.rend-pct.down { color: var(--color-danger); }
.rend-sub { font-size: 0.72rem; color: var(--omnia-text-muted); margin-top: 0.1rem; }
.rend-nota { font-size: 0.75rem; color: var(--omnia-text-muted); margin: 0.4rem 0 0; }
.rend-sec { font-size: 0.7rem; color: var(--omnia-text-muted); margin-top: 0.2rem; opacity: 0.85; }
.rend-cmp { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.rend-cmp th, .rend-cmp td { padding: 0.25rem 0.5rem; text-align: left; border-bottom: 1px solid var(--omnia-glass-border); }
.rend-cmp .r { text-align: right; }
.rend-cmp .up { color: var(--color-success); }
.rend-cmp .down { color: var(--color-danger); }
.rend-cmp caption { text-align: left; caption-side: top; }
/* "?" de ayuda junto a cada % (helper RendimientoInstrumento.ayudaPct): el glifo "?" lo pone el helper; el popup aparece con el foco del teclado. */
.help-pct { position: relative; margin-left: 0.3rem; cursor: help; text-transform: none; letter-spacing: 0; font-weight: 700; vertical-align: middle; }
.help-pct:focus-visible { outline: 2px solid var(--omnia-gold-bright, currentColor); outline-offset: 2px; }
.help-pct:focus::after { content: attr(data-ayuda); position: absolute; z-index: 50; left: 0; top: 140%; width: min(320px, 80vw); padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid var(--omnia-glass-border); background: var(--omnia-surface, #1b1b1f); color: var(--omnia-text); font-size: 0.74rem; font-weight: 400; line-height: 1.35; white-space: normal; text-align: left; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }