/* componentes/campos.css — Campos de formulário (.campo), campo de senha com botão de revelar e medidor de força da senha. */
.campo { display: grid; gap: 6px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--texto); }
.campo input, .campo select, .campo textarea { border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: 11px 12px; background: var(--superficie); transition: border-color .15s, box-shadow .15s; width: 100%; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--cinza-claro); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(18,18,18,.08); }
.campo .ajuda { font-size: 12px; color: var(--cinza); }
.campo.invalido input { border-color: var(--vermelho); box-shadow: 0 0 0 4px rgba(181,8,8,.10); animation: sacode .35s var(--ease-out); }
.campo .erro { color: var(--vermelho); font-size: 12px; font-weight: 600; }
@keyframes sacode { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 44px; }
.senha-wrap button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--cinza); cursor: pointer; padding: 6px; border-radius: 6px; }
.forca { height: 6px; border-radius: 3px; background: var(--borda); overflow: hidden; }
.forca i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .3s var(--ease-out), background .3s; }