/* Fita "Mercado hoje" no Meu painel — a MESMA da home (css/home-v2-critico.css
   § FITA DE MERCADO), com escopo próprio. Os tiques são montados pelo
   js/mercado-hoje.js (atualizarFita) e o passeio pelo js/painel-fita.js. */
.mp-fita {
  --line: #1E2836; --txt: #E9F0F8; --txt-2: #93A2B4; --txt-3: #66768A;
  --up: #3FB950; --down: #F85149; --gold: #E8A81C; --canvas: var(--bg-primary, #0A0E14);
  --font-display: 'Archivo', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative; --fita-pl: 14px; --fita-pr: 14px;
  max-width: 1200px; margin: 6px auto 0; padding: 0 var(--fita-pr) 0 var(--fita-pl); box-sizing: border-box;
}
/* tela larga: as mesmas margens do .mp (css/conta-largo.css) */
html[data-trilho] body[data-tela="painel"] .mp-fita {
  --fita-pl: var(--pag-pad-l); --fita-pr: var(--pag-pad-r);
  /* encostada no topo como na home: anula o padding-top do main */
  max-width: none; margin: -20px 0 0;
}
/* esqueleto: tique sem valor ainda mostra a barra de carregando */
.mp-fita .hv-tick-val:empty { display: block; width: 54px; height: .9rem; margin-top: 2px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(147,162,180,.10), rgba(147,162,180,.22), rgba(147,162,180,.10)); background-size: 200% 100%;
  animation: mp-fita-sk 1.4s ease-in-out infinite; }
.mp-fita .hv-tick i:empty { display: none; }
@keyframes mp-fita-sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.mp-fita .hv-tape {
  position: relative; overflow: hidden; margin: 0; padding-left: 132px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.mp-fita .hv-tape.is-manual { overflow-x: auto; scrollbar-width: none; }
.mp-fita .hv-tape.is-manual::-webkit-scrollbar { display: none; }
.mp-fita .hv-tape.is-arrastando { cursor: grabbing; }
.mp-fita .hv-tape-track { display: flex; width: max-content; }
.mp-fita .hv-tape-rotulo {
  position: absolute; left: var(--fita-pl); top: 1px; bottom: 1px; z-index: 2;
  display: flex; align-items: center; padding: 0 14px 0 2px; pointer-events: none;
  font-family: var(--font-display); font-size: .64rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  background: linear-gradient(90deg, var(--canvas) 0, var(--canvas) 82%, transparent);
}
.mp-fita .hv-tick {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; text-decoration: none; white-space: nowrap; font-size: .8rem;
  transition: background .2s;
}
.mp-fita .hv-tick + .hv-tick::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line);
}
.mp-fita .hv-tick:hover { background: rgba(232, 168, 28, .06); }
.mp-fita .hv-tick-ico.mh-ic {
  flex: none; width: 24px; height: 24px; color: var(--txt-2); background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.mp-fita .hv-tick-ico--cor { flex: none; width: 24px; height: 17px; border-radius: 3px; object-fit: cover; }
.mp-fita .hv-tick-nome { display: flex; flex-direction: column; line-height: 1.15; }
.mp-fita .hv-tick b {
  font-family: var(--font-display); font-weight: 700; font-size: .62rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3);
}
.mp-fita .hv-tick-val {
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  font-variant-numeric: tabular-nums; color: var(--txt);
}
.mp-fita .hv-tick i {
  font-style: normal; font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; background: rgba(147, 162, 180, .1);
}
.mp-fita .hv-tick i.up { color: var(--up); background: rgba(63, 185, 80, .12); }
.mp-fita .hv-tick i.down { color: var(--down); background: rgba(248, 81, 73, .12); }
.mp-fita .hv-tick i.flat { color: var(--txt-3); }
.mp-fita .hv-tick-fut {
  font-style: normal; font-variant-numeric: tabular-nums; font-size: .68rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
}
.mp-fita .hv-tick-fut.up { color: var(--up); background: rgba(63, 185, 80, .1); }
.mp-fita .hv-tick-fut.down { color: var(--down); background: rgba(248, 81, 73, .1); }
.mp-fita .hv-tick-fut.forte { background: currentColor; }
.mp-fita .hv-tick-fut.forte.up, .mp-fita .hv-tick-fut.forte.down { color: #0d1117; }
.mp-fita .hv-tick-fut.forte.up { background: var(--up); border-color: var(--up); }
.mp-fita .hv-tick-fut.forte.down { background: var(--down); border-color: var(--down); }
.mp-fita .hv-tick-spark { display: block; overflow: visible; width: 52px; height: 20px; flex: none; }
.mp-fita .hv-tick-spark .mh-spark-linha { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mp-fita .hv-tick-spark .mh-spark-area { fill: currentColor; stroke: none; opacity: .12; }
.mp-fita .hv-tick-spark.up { color: var(--up); }
.mp-fita .hv-tick-spark.down { color: var(--down); }
.mp-fita .hv-tick-spark.flat { color: var(--txt-3); }
@media (max-width: 699px) {
  .mp-fita .hv-tape-rotulo { display: none; }
  .mp-fita .hv-tape {
    padding-left: 0; border: 1px solid rgba(186, 198, 216, .10); border-radius: 14px;
    background: rgba(226, 234, 246, .03);
    -webkit-mask-image: none; mask-image: none;
  }
}