/* --- Estilos Generales y Fondo --- */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    background-image: url('/static/imagenes/fondo_9.png'); /* <--- CAMBIA ESTO */
    background-size: cover; /* Cubre todo el área sin distorsionar la imagen */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed;
}

/* Simulación de la superposición de fondo (overlay) */
.background-overlay {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: left;
    align-items: center;
    /* Si usaras una imagen de fondo, aquí iría el overlay oscuro transparente */
    background: rgba(0, 0, 0, 0.2);
}

/* --- Tarjeta de Login (El formulario oscuro) --- */
.login-card {
    background-color: #000000; /* Gris oscuro de la tarjeta */
    background: rgba(0, 0, 0, 0.6);
    padding: 40px;
    border-radius: 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8); /* Sombra marcada */
    max-width: 400px;
    width: 90%;
    color: white;
    margin-left: 90px;
}

.card-title {
    font-size: 1.8em;
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
}

.card-subtitle {
    font-size: 1em;
    font-weight: bold;
    color: #c9c9c9; /* Texto gris claro */
    margin-bottom: 30px;
}

/* --- Campos del Formulario --- */
.form-group {
    margin-bottom: 25px;
}

label {
    display: block;
    font-size: 0.9em;
    color: #a0a0a0; /* Etiqueta gris */
    margin-bottom: 5px;
    /* Usaremos el placeholder y la línea inferior para el estilo */
    display: none; /* Ocultamos la etiqueta para depender del placeholder como en la ref. */
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 8px 0; /* Padding solo arriba y abajo */
    background: transparent; /* Fondo transparente */
    border: none;
    border-bottom: 2px solid #a0a0a0; /* Línea de entrada gris */
    color: white;
    font-size: 1.1em;
    box-sizing: border-box;
    transition: border-bottom-color 0.3s;
}

/* Estilo al enfocar (activo) */
input:focus {
    border-bottom-color: white; /* La línea se vuelve blanca al escribir */
    outline: none;
}

/* Estilo para el placeholder */
::placeholder {
    color: #777;
    opacity: 1; /* Asegura que no se vea transparente */
}

/* --- Botón de Acceso --- */
.login-button {
    background-color: #8de7f7; /* Amarillo/Verde Limón de la referencia */
    color: #333;
    font-weight: bold;
    padding: 15px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    text-transform: uppercase;
    width: 100%;
    margin-top: 30px;
    transition: background-color 0.3s ease;
}

.login-button:hover {
    background-color: #FC9FD3; /* Un tono más oscuro al pasar el ratón */
}

/* Enlace de olvido de contraseña */
.forgot-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #ffc107; /* Color de acento para el enlace */
    text-decoration: none;
    font-size: 0.95em;
}

.forgot-link:hover {
    text-decoration: underline;
}