/* ==========================================================================
   Convocatum — la pantalla de acceso de WordPress.

   Misma dirección que el panel: papel, tinta y reglas finas. Los tokens se
   declaran aquí porque esta pantalla no carga ninguna hoja del panel; es una
   página aparte de WordPress, servida por wp-login.php.

   Lo que se cambia es el aspecto, no el formulario: los campos, los nombres y
   el envío siguen siendo los de WordPress, que es quien autentica.
   ========================================================================== */

/* Los mismos valores que el bloque `:root` de admin.css. Se repiten porque wp-login.php no carga
   aquella hoja; si allá cambia un color, aquí hay que cambiarlo también. */
:root {
    --cv-navy: #23224f;
    --cv-marca: #00d970;
    --cv-papel: #ffffff;
    --cv-papel-alt: #eff2f7;
    --cv-tinta: var(--cv-navy);
    --cv-tinta-2: #5a6270;
    --cv-tinta-3: #767c8c;
    --cv-regla-fina: #d6dae4;
    --cv-senal: #e63946;
}

body.login {
    background: var(--cv-papel-alt);
    color: var(--cv-tinta);
}

/* --------------------------------------------------------------------------
   La marca
   -------------------------------------------------------------------------- */

.login h1 {
    margin: 0;
}

/* Con logotipo: la imagen la pone PHP, porque su dirección depende de la instalación. El nombre
   del sitio sigue dentro del enlace para quien use un lector de pantalla, pero fuera de la vista:
   sin esconderlo quedaba impreso encima de la imagen. */
.login.convocatum-con-logo h1 a {
    width: auto;
    max-width: 260px;
    height: 92px;
    margin: 0 auto 28px;
    background-position: center center;
    background-size: contain;
    text-indent: -9999px;
}

/* Sin logotipo configurado, el nombre del sitio en tipografía: mejor que un hueco o que el
   logotipo de otra herramienta */
.login.convocatum-sin-logo h1 a {
    width: auto;
    height: auto;
    margin: 0 auto 24px;
    background: none;
    color: var(--cv-tinta);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-indent: 0;
    text-transform: uppercase;
    overflow: visible;
}

/* --------------------------------------------------------------------------
   La caja del formulario
   -------------------------------------------------------------------------- */

.login form {
    margin-top: 0;
    padding: 32px 28px 28px;
    border: 1px solid var(--cv-regla-fina);
    border-radius: 0;
    background: var(--cv-papel);
    box-shadow: none;
}

.login label {
    color: var(--cv-tinta-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login form .input,
.login input[type="text"],
.login input[type="password"] {
    padding: 10px 12px;
    border: 1px solid var(--cv-regla-fina);
    border-radius: 2px;
    background: var(--cv-papel);
    color: var(--cv-tinta);
    font-size: 15px;
    font-weight: 400;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: var(--cv-tinta);
    box-shadow: none;
    outline: 2px solid var(--cv-tinta);
    outline-offset: 1px;
}

/* El ojo para ver la contraseña: en gris, sin el azul de wp-admin */
.login .button.wp-hide-pw {
    color: var(--cv-tinta-3);
}

.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
    color: var(--cv-tinta);
    box-shadow: none;
    outline: 0;
}

/* --------------------------------------------------------------------------
   El botón y los enlaces
   -------------------------------------------------------------------------- */

.login .button-primary {
    width: 100%;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--cv-tinta);
    border-radius: 2px;
    background: var(--cv-tinta);
    color: var(--cv-papel);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-shadow: none;
    text-transform: uppercase;
    box-shadow: none;
}

/* Al pasar por encima, el azul se oscurece. Antes se iba a negro puro, que con la tinta en
   #111111 era un matiz y con el azul marino sería un color distinto. */
.login .button-primary:hover,
.login .button-primary:focus {
    border-color: var(--cv-tinta);
    background: #17163a;
    color: var(--cv-papel);
    box-shadow: none;
}

.login #nav,
.login #backtoblog {
    margin: 16px 0 0;
    padding: 0;
    text-align: center;
}

.login #nav a,
.login #backtoblog a {
    color: var(--cv-tinta-2);
    font-size: 12px;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login #nav a:focus,
.login #backtoblog a:focus {
    color: var(--cv-tinta);
}

/* La casilla de recordar sesión, en el mismo gris que las demás explicaciones */
.login .forgetmenot label {
    color: var(--cv-tinta-2);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.login input[type="checkbox"] {
    accent-color: var(--cv-tinta);
}

/* --------------------------------------------------------------------------
   Mensajes

   Se conservan enteros: aquí es donde WordPress dice que la contraseña no es
   correcta o que hay que revisar el correo, y esconder eso deja a alguien
   fuera sin saber por qué. Lo que pierden es la franja de color.
   -------------------------------------------------------------------------- */

.login .message,
.login .notice,
.login #login_error {
    border: 0;
    border-left: 3px solid var(--cv-tinta);
    border-radius: 0;
    background: var(--cv-papel);
    box-shadow: none;
    font-size: 13px;
}

.login #login_error {
    border-left-color: var(--cv-senal);
}

/* El pie de «Volver a...» y el idioma no necesitan competir con el formulario */
.login .language-switcher {
    margin-top: 12px;
}

.login .language-switcher select {
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Pantallas angostas
   -------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {
    .login form {
        padding: 24px 18px;
    }

    .login.convocatum-con-logo h1 a {
        height: 72px;
        margin-bottom: 20px;
    }
}