/* =============================================================================
   PANTALLA DE ACCESO — Portal Orbense
   -----------------------------------------------------------------------------
   Es lo primero que ve el cliente cada vez que entra. Si aqui aparece el logo
   de WordPress, el portal deja de ser suyo.

   Se cargan antes brand.css y style.css del tema hijo, asi que aqui solo hay
   tokens: ni un color literal, ni una fuente declarada.

   Se usa !important en algunas reglas y esta justificado: los estilos del login
   de WordPress se encolan despues de los del tema y tienen especificidad de id.
   Es la excepcion del sistema — cascada enemiga real, no pereza.
   ============================================================================= */

body.login {
  background: var(--cc-bg-alt);
  font-family: var(--cc-font-body);
  color: var(--cc-ink);
}

/* El logotipo de WordPress, fuera. En su lugar, el nombre del sitio. */
body.login h1 a {
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto var(--cc-space-2) !important;
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-2xl);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--cc-brand) !important;
  text-indent: 0 !important;
  text-decoration: none;
  line-height: 1.2;
}

.orb-login-intro {
  max-width: 320px;
  margin: 0 auto var(--cc-space-4) !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
  font-size: var(--cc-text-sm);
  color: var(--cc-ink-soft);
  line-height: 1.55;
}

body.login #login {
  padding-top: var(--cc-space-10);
  width: 340px;
}

body.login form {
  background: var(--cc-surface);
  border: var(--cc-border-width) solid var(--cc-line);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: var(--cc-space-6);
  margin-top: 0;
}

body.login form label {
  font-size: var(--cc-text-sm);
  color: var(--cc-ink-soft);
}

body.login input[type="text"],
body.login input[type="password"] {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-base);
  color: var(--cc-ink);
  background: var(--cc-bg);
  border: 1.5px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  padding: 0.6em 0.8em;
  box-shadow: none;
  min-height: 44px;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
  border-color: var(--cc-brand-2);
  box-shadow: none;
  outline: 2px solid transparent;
}

/* Boton primario: rosa de acento con el vino encima. 4.87:1, la combinacion
   aprobada. Blanco encima daria 1.64:1 y seria ilegible. */
body.login .button-primary {
  background: var(--cc-surface-accent) !important;
  border-color: var(--cc-surface-accent) !important;
  color: var(--cc-brand) !important;
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: var(--cc-text-sm);
  letter-spacing: 0.05em;
  border-radius: var(--cc-radius-pill) !important;
  min-height: 44px;
  padding: 0 var(--cc-space-5) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition:
    background var(--cc-dur-fast) var(--cc-ease-out),
    transform var(--cc-dur-fast) var(--cc-ease-out);
}

body.login .button-primary:hover,
body.login .button-primary:focus {
  background: var(--cc-surface-accent-hover) !important;
  border-color: var(--cc-surface-accent-hover) !important;
  color: var(--cc-brand) !important;
  transform: translateY(-1px);
}

body.login .message,
body.login #login_error {
  border-left-color: var(--cc-brand) !important;
  background: var(--cc-surface) !important;
  border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
  box-shadow: var(--cc-shadow-sm) !important;
  font-size: var(--cc-text-sm);
  color: var(--cc-ink);
}

body.login #nav,
body.login #backtoblog {
  text-align: center;
  padding: var(--cc-space-3) 0 0;
}

body.login #nav a,
body.login #backtoblog a {
  color: var(--cc-ink-soft) !important;
  font-size: var(--cc-text-sm);
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
  color: var(--cc-brand) !important;
}

body.login .language-switcher {
  display: none;
}

/* La casilla de recordar sesion se queda: el cliente entra desde su telefono y
   escribir una clave larga cada vez es motivo suficiente para dejar de entrar. */
body.login .forgetmenot label {
  font-size: var(--cc-text-sm);
}