/* Estilos para el bloque de inicio de sesión (vm-login) en MODO OSCURO */
html[data-bs-theme="dark"] div.vm-login.bg-light {
    background-color: #333333 !important; /* Fondo oscuro */
    color: #ffffff !important;           /* Texto blanco para el contenido general */
    border-color: #555555 !important;    /* Borde sutil */
}

/* Estilos para el título/subtítulo "Si ya está registrado..." */
html[data-bs-theme="dark"] div.vm-login p.lead {
    color: #88ccff !important;           /* Color de título claro, consistente */
    border-color: #666666 !important;    /* Borde inferior más oscuro */
}

/* Estilos para los campos de entrada (input text, password) */
html[data-bs-theme="dark"] div.vm-login input.form-control {
    background-color: #222222 !important; /* Fondo aún más oscuro para los inputs */
    color: #ffffff !important;           /* Texto blanco dentro de los inputs */
    border-color: #444444 !important;    /* Borde oscuro para los inputs */
    caret-color: #ffffff !important;     /* Color del cursor (el parpadeo) */
}

/* Estilos para el placeholder de los inputs */
html[data-bs-theme="dark"] div.vm-login input.form-control::placeholder {
    color: #aaaaaa !important; /* Texto del placeholder en gris claro */
    opacity: 1 !important;     /* Asegura que no sea transparente */
}

/* Estilos para el checkbox (el cuadro) */
html[data-bs-theme="dark"] div.vm-login input.form-check-input {
    background-color: #444444 !important; /* Fondo oscuro para el cuadro del checkbox */
    border-color: #666666 !important;    /* Borde oscuro */
    /* Para el 'check' mismo, a menudo es un SVG o fondo de imagen de Bootstrap.
       Puede que necesite un filtro para volverse blanco. */
    filter: invert(1) brightness(1.5) !important; /* Intenta invertir el color del check */
}

/* Estilos para el label "Recuérdeme" */
html[data-bs-theme="dark"] div.vm-login label.form-check-label {
    color: #ffffff !important; /* Texto blanco */
}

/* Estilos para el botón "Acceder" (btn btn-primary) */
html[data-bs-theme="dark"] div.vm-login button.btn-primary {
    background-color: #007bff !important; /* Azul primario de Bootstrap */
    border-color: #007bff !important;     /* Borde del mismo color */
    color: #ffffff !important;           /* Texto blanco */
}

html[data-bs-theme="dark"] div.vm-login button.btn-primary:hover {
    background-color: #0056b3 !important; /* Azul más oscuro al pasar el ratón */
    border-color: #0056b3 !important;
}

/* Estilos para los enlaces "¿Olvidó su usuario?" y "¿Olvidó su contraseña?" */
html[data-bs-theme="dark"] div.vm-login a {
    color: #88ccff !important; /* Un color azul claro para los enlaces */
}

html[data-bs-theme="dark"] div.vm-login a:hover {
    color: #55aaff !important; /* Un poco más oscuro al pasar el ratón */
}