/* ===================================================================
   Fondo e identidad de la pantalla de entrada de MINION.

   NO es parte de Healthchecks. Se monta dentro del contenedor como
   /opt/healthchecks/static-collected/css/minion-login.css (ver
   docker-compose.yml) y el nginx lo engancha al <head> solo en las
   paginas de /accounts/login/ (ver nginx/minion.prod.conf).

   Se hace asi, y no editando las plantillas de la imagen oficial, para
   que una actualizacion de Healthchecks no borre ni rompa nada: aqui
   solo se pintan estilos encima de lo que ya hay.

   Todo va colgado de `body.page-login`, la clase que Healthchecks pone
   unicamente en esa pagina: si algun dia cambia, el panel sigue igual
   de usable, solo se pierde el fondo.
   =================================================================== */

body.page-login {
    /* La imagen va en un pseudo-elemento fijo y no en el propio body
       para que no se desplace ni se repita al hacer scroll en pantallas
       bajas (en el movil el teclado reduce el alto visible). */
    background: #070b12;
    color: #e8f1ff;
    position: relative;
    min-height: 100vh;
}

body.page-login::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url("../img/minion-fondo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Velo oscuro: la foto tiene mucho detalle y neon, y sin el no se leeria
   ni el titulo ni el pie. Mas opaco abajo, donde esta el formulario. */
body.page-login::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(4, 8, 16, 0.45) 0%,
        rgba(4, 8, 16, 0.62) 45%,
        rgba(4, 8, 16, 0.86) 100%
    );
}

/* Fuera la barra superior.
   En el login no lleva nada que haga falta: el logo es el cuadro de relleno
   con una interrogacion que trae Healthchecks de serie, y el unico enlace es
   su documentacion. Tapaba el fondo y no aportaba nada.
   Se oculta con CSS en vez de borrarla de la plantilla por lo mismo de
   siempre: la plantilla es de la imagen oficial y vuelve en cada
   actualizacion. En el resto del panel la barra sigue intacta. */
body.page-login .navbar {
    display: none;
}

/* Sin barra, el titulo quedaba pegado al borde de arriba. */
body.page-login > .container {
    padding-top: 7vh;
}

body.page-login h1 {
    text-align: center;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
    margin-bottom: 28px;
}

/* --- Titulo y formulario a la derecha -----------------------------------
   La foto tiene al leon en la mitad izquierda y la tarjeta centrada se lo
   comia. Solo a partir de 768 px: en el movil no sobra ancho para mover
   nada, asi que alli se queda centrada y a todo lo ancho.

   Se reordena con flex y no tocando los `offset` de Bootstrap porque esos
   son porcentajes encadenados (una columna dentro de otra) y cualquier
   cambio de clases en la plantilla descuadraria las cuentas. Con flex, si
   la plantilla cambia, lo peor que pasa es que vuelva al centro.          */
@media (min-width: 768px) {
    /* El contenedor de serie es estrecho y centrado; se suelta para que el
       formulario pueda llegar de verdad al borde derecho. */
    body.page-login > .container {
        width: auto;
        max-width: none;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    /* El bloque exterior deja de ir centrado y ocupa todo el ancho. */
    body.page-login > .container > .row > [class*="col-"] {
        float: none;
        width: 100%;
        margin-left: 0;
    }

    /* La fila del formulario alinea a la derecha. */
    body.page-login > .container > .row > [class*="col-"] > .row {
        display: flex;
        justify-content: flex-end;
    }

    /* Ancho fijo de la tarjeta: con el contenedor suelto, un porcentaje la
       estiraria hasta hacerla absurda en pantallas anchas. */
    body.page-login > .container > .row > [class*="col-"] > .row > [class*="col-"] {
        float: none;
        margin-left: 0;
        width: 420px;
        max-width: 100%;
    }

    /* El titulo, centrado SOBRE la tarjeta y no sobre la pagina: alineado
       a la derecha quedaba descuadrado respecto a ella.
       390 px = los 420 de la columna menos sus 15 px de relleno a cada
       lado, o sea el ancho visible exacto de la tarjeta. */
    body.page-login h1 {
        width: 390px;
        max-width: 100%;
        margin-left: auto;
        margin-right: 0;
        text-align: center;
    }
}

/* Tarjeta del formulario: translucida y desenfocada, para que se vea la
   imagen detras sin perder contraste en los campos. */
body.page-login #login-form {
    background: rgba(9, 14, 24, 0.74);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(110, 185, 255, 0.28);
    border-radius: 14px;
    padding: 26px 24px 20px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}

body.page-login #login-form p,
body.page-login #login-form strong {
    color: #cfe2fb;
}

body.page-login #login-form .form-control {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(150, 200, 255, 0.3);
    color: #ffffff;
    box-shadow: none;
}

body.page-login #login-form .form-control::placeholder {
    color: rgba(206, 226, 251, 0.55);
}

body.page-login #login-form .form-control:focus {
    border-color: #4aa8ff;
    box-shadow: 0 0 0 3px rgba(74, 168, 255, 0.22);
}

/* El relleno automatico de Chrome pinta el campo de blanco y el texto
   blanco se volveria invisible. La sombra interior enorme es el truco
   estandar para repintar ese fondo. */
body.page-login #login-form .form-control:-webkit-autofill,
body.page-login #login-form .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #11192a inset;
    caret-color: #ffffff;
}

body.page-login #forgot-password a {
    color: #7cc5ff;
}

body.page-login .btn-primary {
    background: linear-gradient(180deg, #2f8fe0 0%, #1f6fbd 100%);
    border-color: #1b5e9f;
}

body.page-login .btn-primary:hover,
body.page-login .btn-primary:focus {
    background: linear-gradient(180deg, #3a9df0 0%, #2679c9 100%);
    border-color: #2577c7;
}

/* Fuera el pie. En el login solo decia la version de Healthchecks y
   enlazaba a su github: a quien entra no le sirve de nada y es justo la
   informacion que no conviene regalar en una pagina abierta a internet
   (que version corre, para buscarle fallos conocidos).
   En el resto del panel el pie sigue, con su credito al proyecto. */
body.page-login .footer {
    display: none;
}

/* El cuadro de «perdiste la contrasena» sigue siendo claro: se deja con
   su estilo original, que ya se lee bien sobre el velo. */