/* Paleta de colores más profesional y elegante */
:root {
    --bg-oscuro: #1a1a1a;
    --card-bg: #222222;
    --azul-zafiro: #3F51B5;
    --azul-zafiro-claro: #5C6BC0;
    --texto-claro: #E0E0E0;
    --texto-gris: #9E9E9E;
    --fuente: 'Roboto', sans-serif;
}

body {
    background-color: var(--bg-oscuro);
    font-family: var(--fuente);
    color: var(--texto-claro);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
position: relative;
}

.login-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 450px;
}

.login-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.login-title {
    color: var(--texto-claro);
    font-weight: 500;
}

.form-label {
    color: var(--texto-gris);
    font-weight: 300;
}

.form-control {
    background-color: var(--bg-oscuro);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--texto-claro);
    border-radius: 8px;
    padding: 12px 15px;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    background-color: var(--bg-oscuro);
    border-color: var(--azul-zafiro);
    box-shadow: 0 0 0 0.25rem rgba(63, 81, 181, 0.25);
}

.form-control::placeholder {
    color: var(--texto-gris);
}

.input-group-text {
    background-color: var(--azul-zafiro);
    color: #FFF;
    border: 1px solid var(--azul-zafiro);
    border-right: none;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.login-btn {
    background-color: var(--azul-zafiro);
    color: #FFF;
    border: none;
    font-weight: 500;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.login-btn:hover {
    background-color: var(--azul-zafiro-claro);
    transform: scale(1.02);
}

.forgot-password a {
    color: var(--texto-gris);
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s ease;
}

.forgot-password a:hover {
    color: var(--azul-zafiro);
}

.logo-image {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 80px; /* Tamaño por defecto */
    height: auto;
    z-index: 1000;
}

/* Estilos para la imagen de tolu en la esquina superior derecha */
.tolu-image {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 300px; /* Tamaño por defecto */
    height: auto;
    z-index: 1000;
}

/* Media queries para responsividad 
*/

/* En pantallas pequeñas (ej. celulares), ajusta el tamaño de las imágenes */
@media (max-width: 767px) {
    .logo-image, .tolu-image {
        width: 60px; /* Reduce el tamaño */
        top: 10px;
        right: 10px;
        left: 10px;
    }

    /* Ocultar la segunda imagen si el espacio es muy limitado */
    .tolu-image {
        display: none; 
    }
}