/* Dado sensível escondido (Sensivel.jsx): a mesma peça em RH, Financeiro,
   Logística, Suporte e Marketing. Cópia idêntica em cada repositório. A peça
   mora dentro do texto da tela: herda fonte, tamanho e cor de onde está, e
   não traz cor de destaque própria. */

.sens{
  --sens-vao:4px;
  display:inline-flex;align-items:center;gap:var(--sens-vao);max-width:100%;vertical-align:baseline;white-space:nowrap;
}

/* Valor e **** no mesmo lugar: a largura é a do maior dos dois, e a linha
   não pula ao mostrar ou esconder. */
.sens-valor{display:inline-grid;font-variant-numeric:tabular-nums}
/* Cada camada ocupa a caixa inteira e segue o text-align de onde está: em
   coluna de número alinhada à direita (text-align:right), o **** e o valor
   ficam colados à direita, como antes. A caixa nunca encolhe abaixo do
   valor: em tabela apertada o valor aberto não sai cortado. */
.sens-valor>*{grid-area:1/1;text-align:inherit}
.sens-sombra,.sens-reserva{visibility:hidden;user-select:none;pointer-events:none}
/* O asterisco nasce no alto da letra: desce para a linha do texto. */
.sens-mascara{position:relative;top:.18em;letter-spacing:.08em}

.sens-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Olho: botão de ícone com fundo leve (tem cara de botão), alvo de 24px. O
   mesmo botão serve ao valor solto e ao olho do bloco. */
.sens-olho{
  --sens-alvo:24px;--sens-ico:16px;--sens-traco:1.6;
  --sens-fundo:8%;--sens-fundo-hover:15%;--sens-fundo-toque:20%;
  flex:none;display:inline-grid;place-items:center;width:var(--sens-alvo);height:var(--sens-alvo);margin:-4px 0;padding:0;border:0;border-radius:999px;
  background:color-mix(in srgb,currentColor var(--sens-fundo),transparent);color:inherit;font:inherit;line-height:0;cursor:pointer;
  transition:background .12s ease;
}
.sens-olho:hover{background:color-mix(in srgb,currentColor var(--sens-fundo-hover),transparent)}
.sens-olho:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.sens-olho:active{background:color-mix(in srgb,currentColor var(--sens-fundo-toque),transparent)}
.sens-ico{width:var(--sens-ico);height:var(--sens-ico);fill:none;stroke:currentColor;stroke-width:var(--sens-traco);stroke-linecap:round;stroke-linejoin:round}

/* Olho ao lado do título (TituloSensivel): título e olho na mesma linha.
   O olho é redondo, com fundo leve, e a dica sai à direita dele, no vazio
   da linha do título, sem cobrir nada. */
/* Cores e medidas da dica: escura no tema claro, clara no tema escuro. */
.sens-titulo{
  --sens-dica-fundo:#1b1b1a;--sens-dica-texto:#fbfbfa;--sens-dica-fs:12.5px;--sens-dica-raio:8px;--sens-dica-vao:10px;--sens-dica-camada:20;
  display:flex;align-items:center;gap:10px;min-width:0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sens-titulo{--sens-dica-fundo:#f2f1ee;--sens-dica-texto:#1b1b1a}
}
:root[data-theme="dark"] .sens-titulo{--sens-dica-fundo:#f2f1ee;--sens-dica-texto:#1b1b1a}
:root[data-theme="light"] .sens-titulo{--sens-dica-fundo:#1b1b1a;--sens-dica-texto:#fbfbfa}
.sens-titulo>:first-child{min-width:0}
.sens-olho.sens-olho--titulo{--sens-alvo:32px;--sens-ico:17px;--sens-fundo:7%;--sens-fundo-hover:13%;--sens-fundo-toque:18%;position:relative;margin:0}
.sens-olho--titulo[data-dica]::after{
  content:attr(data-dica);position:absolute;top:50%;left:calc(100% + var(--sens-dica-vao));transform:translateY(-50%);z-index:var(--sens-dica-camada);
  padding:6px 10px;border-radius:var(--sens-dica-raio);background:var(--sens-dica-fundo);color:var(--sens-dica-texto);font-size:var(--sens-dica-fs);font-weight:400;line-height:1.2;letter-spacing:0;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.sens-olho--titulo[data-dica]:hover::after,.sens-olho--titulo[data-dica]:focus-visible::after{opacity:1}
/* Toque não tem passar o mouse: no celular a dica não aparece. */
@media (hover:none){.sens-olho--titulo[data-dica]::after{display:none}}

@media (prefers-reduced-motion:reduce){
  .sens-olho,.sens-olho--titulo[data-dica]::after{transition:none}
}

/* Impressão: o olho não sai no papel; o que está escondido sai como ****. */
@media print{
  .sens-olho{display:none}
}