/*
 * Fortaleza Ingeniería: identidad del webmail (Roundcube, tema Elastic).
 * Los azules de acento del tema se reemplazan en colors.css (generado);
 * aquí van la tipografía, la pantalla de acceso y el menú lateral.
 */
:root {
  --fi-blue: #010ece;
  --fi-blue-strong: #000a9e;
  --fi-ink: #0a0c12;
  --fi-ink-3: #1a1e29;
  --fi-muted: #5a6070;
  --fi-muted-on-dark: #a2a8b7;
}

/* Tipografía de la marca, en los mismos elementos donde Elastic usa Roboto */
.popover, body, button, input, optgroup, select, textarea,
div.tox, div.tox :not(.svg) {
  font-family: "Archivo", Roboto, sans-serif;
}

/* Opción activa del menú lateral: botón azul como en el sitio */
#taskmenu a.selected,
#taskmenu a.selected:hover,
html.dark-mode #taskmenu a.selected {
  color: #fff;
  background: var(--fi-blue);
}

.btn-primary,
.mainaction {
  font-weight: 700;
}

/* ---------- Pantalla de acceso ---------- */
/* "html.dark-mode" para ganarle al fondo gris que Elastic pone en modo oscuro */
html body.task-login,
html.dark-mode body.task-login {
  min-height: 100vh;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(39, 53, 245, .45), transparent 70%),
    var(--fi-ink);
}

.task-login #layout,
.task-login #layout-content {
  background: transparent;
}

.task-login #logo {
  top: 10vh;
  max-height: 60px;
  max-width: min(320px, 80vw);
}

.task-login #login-form {
  top: 14vh;
  max-width: 380px;
  padding: 28px 26px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7);
}

.task-login #rcmloginsubmit {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: 6px;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px -10px rgba(1, 14, 206, .7);
}

.task-login #login-footer {
  margin-top: 1.25rem;
  color: var(--fi-muted);
}

html.dark-mode .task-login #login-form {
  background: var(--fi-ink-3);
}

html.dark-mode .task-login #login-footer {
  color: var(--fi-muted-on-dark);
}