.login-anim { animation: fadeSlide .6s ease; } @keyframes fadeSlide { 0% { opacity:0; transform: translateY(14px) scale(.985); } 100% { opacity:1; transform: translateY(0) scale(1); } } .input-wrap { position:relative; } .input-wrap .input-icon { position:absolute; left:0.75rem; top:50%; transform:translateY(-50%); display:inline-block; line-height:1; opacity:.65; transition:.25s; pointer-events:none; } .input-wrap:focus-within .input-icon { opacity:1; } .input-wrap input { padding-left:2.75rem; } /* garante que o "olhinho" fique DENTRO do input (mesmo se houver regras antigas) */ .input-wrap { position: relative; width: 100%; } .di-eye-btn{ position: absolute !important; right: 14px; top: 50%; transform: translateY(-50%); z-index: 10; background: transparent; border: 0; padding: 0; line-height: 0; cursor: pointer; } /* ========================================================= LOGIN – Inputs mais legíveis (borda/linha com contraste) Cole no FINAL do login_styles.css ========================================================= */ .input-base{ border-style: solid !important; border-width: 2px !important; border-color: rgba(148,163,184,.95) !important; /* slate-300/400 */ background-color: rgba(255,255,255,.96) !important; /* reduz transparência */ } .input-base::placeholder{ color: rgba(100,116,139,.9); } .input-base:hover{ border-color: rgba(100,116,139,.95) !important; /* slate-500 */ } /* quando o wrapper estiver focado (ícone + input), destaca borda */ .input-wrap:focus-within .input-base{ border-color: rgba(37,99,235,1) !important; /* blue-600 */ box-shadow: 0 0 0 4px rgba(59,130,246,.25) !important; } /* Dark mode (Tailwind usa .dark no ) */ .dark .input-base{ border-color: rgba(100,116,139,.85) !important; /* slate-500 */ background-color: rgba(51,65,85,.72) !important; /* slate-700 */ color: rgb(241,245,249); } .dark .input-base::placeholder{ color: rgba(203,213,225,.75); } .dark .input-wrap:focus-within .input-base{ box-shadow: 0 0 0 4px rgba(59,130,246,.35) !important; }