﻿<style >
/* ---- INPUT DE SENHA COM ÍCONE ---- */
:root {
    --corPrincipal: #29ADE2;
    --corSecundaria: #EFA22E;
}

.senha-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

    .senha-wrapper input {
        width: 100%;
        padding-right: 45px; /* espaço para o ícone */
        border: 2px solid #e9ecef;
        border-radius: 8px;
        font-size: 1rem;
        transition: all .3s ease;
        background: #f8f9fa;
    }

        .senha-wrapper input:focus {
            outline: none;
            border-color: var(--corPrincipal);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(29, 48, 92, .1);
        }

    .senha-wrapper i {
        position: absolute;
        right: 14px;
        cursor: pointer;
        color: #a0a0a0;
        font-size: 1.15em;
        top: 50%;
        transform: translateY(-50%);
        transition: color .2s ease, transform .2s ease;
    }

        .senha-wrapper i:hover {
            color: var(--corSecundaria);
            transform: translateY(-50%) scale(1.1);
        }

        .senha-wrapper i.active {
            color: var(--corPrincipal);
        }
/* ---- fim INPUT DE SENHA COM ÍCONE ---- */

</style >
