/* =============================================================
   VALORES OCULTOS (js/valores-ocultos.js)
   O olhinho é tímido de propósito: quase transparente até o mouse
   chegar perto, para não quebrar a estética de nenhuma tela.
============================================================= */

.vl-olho {
  display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; flex: none;
  border-radius: 10px; cursor: pointer; font-size: 14px;
  border: 1px solid transparent; background: transparent; color: var(--text-faint);
  opacity: .32; transition: opacity .2s, background .15s, color .15s, border-color .15s;
}
.vl-olho:hover, .vl-olho:focus-visible { opacity: 1; background: var(--surface-3); color: var(--text); }
.vl-olho[aria-pressed="true"] { opacity: .85; color: var(--accent); }
.vl-olho:active { transform: scale(.9); }
@media (hover: none) { .vl-olho { opacity: .5; } }

/* o blur: forte o bastante para não dar para ler, curto para o número
   continuar ocupando o mesmo espaço (a tela não pula ao ligar/desligar) */
.vl-oculto {
  filter: blur(7px);
  user-select: none; -webkit-user-select: none;
  transition: filter .25s ease;
}
.vl-span { display: inline-block; }
svg .vl-oculto { filter: blur(5px); }

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