/* Estilos para la página de autenticación */
body {
    min-height: 100vh;
    background-color: #222D32;
}

/* Estilos para el logotipo de autenticación */
.auth-logo {
    max-width: 400px !important; /* o el tamaño que prefieras */
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@media (min-width: 768px) {
    .auth-logo {
        max-width: 250px;
    }
}

/* Estilos para la card de acceso */
.card {
    background-color: #1A2226 !important;
    border: none;
    color: #ffffff;
}

.card-body {
    color: #ffffff;
}

/* Estilos para el título dentro de la card */
.card-body h2,
.card-body h3,
.card-body h4 {
    color: #ffffff;
}

.card-body small {
    color: rgba(255, 255, 255, 0.7);
}

/* Estilos para los labels del formulario */
.card-body label {
    color: #ffffff;
    font-size: 0.875rem; /* 14px - más pequeño que el tamaño por defecto */
    font-weight: 400;
    margin-bottom: 0.5rem;
}

/* Estilos para los inputs del formulario */
.card-body .form-control,
.card-body input[type="text"],
.card-body input[type="password"],
.card-body input[type="email"] {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.card-body .form-control:focus,
.card-body input[type="text"]:focus,
.card-body input[type="password"]:focus,
.card-body input[type="email"]:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.card-body .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Estilos para el botón de acceso */
.card-body .btn,
.card-body button[type="submit"],
.card-body input[type="submit"] {
    background-color: #48606B;
    border-color: #48606B;
    color: #ffffff;
    font-weight: 500;
}

.card-body .btn:hover,
.card-body button[type="submit"]:hover,
.card-body input[type="submit"]:hover {
    background-color: #5a7885;
    border-color: #5a7885;
    color: #ffffff;
}

.card-body .btn:focus,
.card-body button[type="submit"]:focus,
.card-body input[type="submit"]:focus {
    background-color: #48606B;
    border-color: #48606B;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(72, 96, 107, 0.5);
}

.card-body .btn:active,
.card-body button[type="submit"]:active,
.card-body input[type="submit"]:active {
    background-color: #3d5159;
    border-color: #3d5159;
    color: #ffffff;
}

/* Estilos para los mensajes flash */
.card-body .alert {
    color: #ffffff;
}