/* 1) Fondo temático */
body {
    background: url('../assets/images/bg-tourism.jpg') center/cover no-repeat fixed;
}

/* 2) Tarjeta semitransparente */
.card {
    background-color: rgba(255, 255, 255, 0.85);
}

.card-body {
    padding: 2rem 1.5rem;
}

/* 3) Logo redondeado y con sombra */
img.logo {
    display: block;
    margin: 0 auto 1rem;
    max-width: 150px;
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    background-color: #fff;
    padding: 0.25rem;
}

/* Variables de color */
:root {
    --primary-color: #4DB8FF;
    --text-color: #333333;
    --input-border: #cccccc;
    --error-color: #e74c3c;
}

/* Body: usamos bg-light de Bootstrap, así que sólo ajustamos tipografía */
body {
    font-family: Arial, sans-serif;
}

/* Card del login: ya definimos padding y shadow en el HTML */

/* Ajustes a los inputs para que con Bootstrap mantengan tu borde */
.form-control {
    border-color: var(--input-border);
}

/* Botón login: sobreescribimos Bootstrap para usar tu color */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #3aa9e6;
    /* un poquito más oscuro */
    border-color: #3aa9e6;
}

/* Mensajes de error: usaremos la clase invalid-feedback de Bootstrap */
.invalid-feedback {
    color: var(--error-color);
    display: block;
    /* siempre mostramos el feedback cuando lo quitamos de hidden */
}

/* El contenedor de alerta de servidor ya está con alert-danger */