* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fdfbf7; 
}

form {
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #ffffff; 
    padding: 45px;
    box-shadow: 0 0 20px rgba(212, 180, 115, 0.15); 
    border-radius: 10px; 
}

.login {
    display: flex;
    flex-direction: column;
}

form h2 {
    font-size: 35px;
    margin-bottom: 15px; /* Reduje esto de 35px a 15px para acercarlo al logo */
    color: #4a4031; 
    text-align: center; 
} 

/* =========================================
   NUEVOS ESTILOS PARA EL LOGO
   ========================================= */
.logo-login {
    width: 130px; /* Un tamaño prudente para que no invada los inputs */
    height: auto;
    margin: 0 auto 25px auto; /* Centrado automático y espacio hacia abajo */
    display: block;
    border-radius: 50%; /* Hará que tu logo se vea perfectamente redondo */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Una sombra muy sutil para darle profundidad */
}

label {
    text-align: left;
    margin-bottom: 8px;
    color: #4a4031;
    font-weight: bold;
    font-size: 14px;
}

input[type="text"], 
input[type="password"] {
   background-color: #f7f4ec; 
   padding: 17px 20px;
   margin-bottom: 20px;
   border: 1px solid #efe8d8; 
   border-radius: 25px; 
   color: #4a4031;
   outline: none;
   font-size: 16px;
   width: 100%; 
}

input[type="text"]:focus, 
input[type="password"]:focus {
    border-color: #e8c782;
}

.button-container {
    display: flex;
    gap: 15px; 
    width: 100%; 
}

.btn {
    background-color: #e8c782; 
    color: #4a4031; 
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
    padding: 17px 20px;
    border: 0;
    border-radius: 25px; 
    font-weight: bold;
    flex: 1; 
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #d6b46b; 
}

.btn-cancel {
    background-color: #e3dfd7; 
    color: #5c554a;
}

.btn-cancel:hover {
    background-color: #d1cdc4;
} 

@media (max-width: 991px) {
    body {
        padding: 30px;
    }
    form {
        width: 340px;
    }
}

.show-password{
    position: relative; 
    width: 100%;
    margin-bottom: 25px; 
}

.show-password input {
    margin-bottom: 0; 
    padding-right: 45px; 
}

.icon-btn {
    position: absolute;
    right: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
}

.icon-btn img {
    width: 22px; 
    opacity: 0.6; 
    transition: opacity 0.3s; 
}

.icon-btn:hover img {
    opacity: 1;
}

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 250px;
    max-width: 350px;
    padding: 15px 20px;
    background-color: #4a4031; 
    color: #fffdfa;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(100%); 
    transition: all 0.3s ease-in-out;
}

.toast.error {
    background-color: #e08d8d; 
    border-left: 6px solid #c76d6d;
    color: #4a2b2b; 
}

.toast.success {
    background-color: #8fcf9e; 
    border-left: 6px solid #6bb57c;
    color: #24402a; 
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

/* --- ESTILOS PARA LOS TEXTOS DE ERROR DINÁMICOS --- */
.error-text {
    color: #dc3545;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    
    /* El truco: Reservamos el espacio fijo aunque no haya texto */
    min-height: 15px; 
    visibility: hidden; /* Invisible pero ocupando su espacio */
    
    /* Ajustes para que quede pegadito al input sin deformar */
    margin-top: -10px; 
    margin-bottom: 10px;
}