/* Campos de senha: caixa com o olho, medidor de forca e conferencia da
 * repeticao. 03/09/2026. Compartilhado pelas telas de entrada (entrada.css)
 * e pelo painel (painel.css): as duas folhas definem --marca, --erro e
 * --texto-fraco, e e so isso que este arquivo usa. */
.senha-caixa { position: relative; }
.senha-caixa input { padding-right: 2.9rem; }
.olho {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
    border: 0; background: transparent; border-radius: 8px; color: var(--texto-fraco, #667085); cursor: pointer;
    display: grid; place-items: center;
}
.olho:hover, .olho:focus-visible { color: var(--marca, #2f7cf6); background: color-mix(in srgb, var(--marca, #2f7cf6) 12%, transparent); outline: none; }
.olho svg { width: 18px; height: 18px; }
.olho .fechado { display: none; }
.olho[aria-pressed="true"] .aberto { display: none; }
.olho[aria-pressed="true"] .fechado { display: block; }

.forca { margin-top: 8px; }
.forca-barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.forca-barra i { display: block; height: 5px; border-radius: 3px; background: var(--borda, #e6e9f0); transition: background .2s; }
.forca-texto { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--texto-fraco, #667085); margin-top: 6px; }
.forca-texto b { font-weight: 700; color: var(--texto-fraco, #667085); }
.forca[data-nivel="1"] i:nth-child(-n+1) { background: var(--erro, #d1433b); }
.forca[data-nivel="2"] i:nth-child(-n+2) { background: #e08a12; }
.forca[data-nivel="3"] i:nth-child(-n+3) { background: #12a36b; }
.forca[data-nivel="4"] i { background: #12a36b; }
.forca[data-nivel="1"] b { color: var(--erro, #d1433b); }
.forca[data-nivel="2"] b { color: #c97b0a; }
.forca[data-nivel="3"] b, .forca[data-nivel="4"] b { color: #12a36b; }
.confere { font-size: 12px; margin-top: 6px; color: var(--texto-fraco, #667085); min-height: 1em; }
.confere.igual { color: #12a36b; }
.confere.diferente { color: var(--erro, #d1433b); }