/* auth/css/auth-style.css */

/* Centralização Global */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
    margin: 0;
    padding: 20px 0; /* Espaço vertical para não cortar em telas pequenas */
}

/* Cartão Padrão (Login e Esqueci Senha) */
.login-card {
    width: 100%;
    max-width: 400px; /* Largura padrão */
    padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: fadeIn 0.8s ease-in-out;
}

/* Cartão Largo (Para o Cadastro) */
.login-card.card-wide {
    max-width: 500px;
}

/* Inputs */
.form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #444;
    color: white !important;
    border-right: none;
}
.form-control:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: #dc3545;
    color: white;
    box-shadow: none;
}

/* Input sem botão de olho (tem borda na direita) */
.form-control.normal-input {
    border-right: 1px solid #444;
}

/* Ícones */
.input-group-text {
    background: #222;
    border-color: #444;
    color: #aaa;
}

/* Botão Olho */
.btn-eye {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #444;
    border-left: none;
    color: #ccc;
    transition: 0.3s;
}
.btn-eye:hover { background: rgba(255, 255, 255, 0.2); color: white; }

/* Textos e Links */
label { font-size: 0.85rem; color: #ccc; margin-bottom: 2px; }
a { transition: 0.3s; }
a:hover { opacity: 0.8; }

/* Animação */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
stretched-link{
    
}